90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
Vue
<template>
|
|
<header class="status-header">
|
|
<div class="status-banner operational">
|
|
<span class="status-icon">✓</span>
|
|
All Systems Operational
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.status-header {
|
|
background-color: #0d1117;
|
|
border-bottom: 1px solid #30363d;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.header-illustration {
|
|
height: 220px;
|
|
background: linear-gradient(180deg, #070a0e 0%, #0d1117 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.factory-backdrop {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
height: 100%;
|
|
position: relative;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.pipeline {
|
|
position: absolute;
|
|
top: 60%;
|
|
left: 5%;
|
|
right: 5%;
|
|
height: 8px;
|
|
background: #21262d;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.engineer {
|
|
position: absolute;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.dynamic-float-1 { top: 30%; left: 15%; animation: float 4s ease-in-out infinite; }
|
|
.dynamic-float-2 { top: 45%; left: 50%; animation: float 5s ease-in-out infinite 1s; }
|
|
.dynamic-float-3 { top: 25%; left: 80%; animation: float 6s ease-in-out infinite 0.5s; }
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
.status-banner {
|
|
max-width: 900px;
|
|
margin: -25px auto 0 auto;
|
|
position: relative;
|
|
z-index: 10;
|
|
padding: 16px 24px;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
font-size: 1.15rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.status-banner.operational {
|
|
background-color: #238636;
|
|
color: #ffffff;
|
|
border: 1px solid #2ea44f;
|
|
}
|
|
|
|
.status-icon {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|