Mission Control Timeline — Live CSS Playground

{CF} CodeFronts Back to CSS Timelines Mission Control Timeline Pure CSS

HTML

<section class="tl5-wrap">
  <header class="tl5-head">
    <div>
      <h2 class="tl5-title">HALCYON-7<br><span class="tl5-sub">::Lunar South Pole Insertion</span></h2>
    </div>
    <div class="tl5-telemetry">
      <div class="tl5-row"><span>VEHICLE</span><span>FALCON H · BLOCK 5</span></div>
      <div class="tl5-row"><span>PAYLOAD</span><span>HALCYON-7 LANDER</span></div>
      <div class="tl5-row"><span>PAD</span><span>KSC-39A</span></div>
      <div class="tl5-row"><span>WINDOW</span><span>04:12:00 UTC</span></div>
      <div class="tl5-row"><span>AZIMUTH</span><span>084.7°</span></div>
      <div class="tl5-row"><span>STATUS</span><span>NOMINAL</span></div>
    </div>
    <div class="tl5-countdown">
      <div class="tl5-cd-label">T-MINUS</div>
      <div class="tl5-clock">00:00:07<span class="tl5-blink">_</span></div>
    </div>
  </header>

  <div class="tl5-log">
    <div class="tl5-log-head">
      <span>T-Time</span>
      <span>Stat</span>
      <span>Event</span>
      <span>Telem</span>
    </div>

    <div class="tl5-event">
      <span class="tl5-tmin">T−14h</span>
      <span class="tl5-stat tl5-go">GO</span>
      <span class="tl5-msg"><strong>WET DRESS REHEARSAL</strong>Tanking sequence completed. LOX/RP-1 propellant load confirmed at 100%. All vent valves cycled.</span>
      <span class="tl5-gauge">100%<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−02h</span>
      <span class="tl5-stat tl5-go">GO</span>
      <span class="tl5-msg"><strong>RANGE GREEN</strong>Eastern Range clear. Air traffic and maritime traffic confirmed outside exclusion zone. Wx 76% favorable.</span>
      <span class="tl5-gauge">76%<span class="tl5-bar" style="--g: 76%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−45m</span>
      <span class="tl5-stat tl5-hold">HOLD</span>
      <span class="tl5-msg"><strong>TANKING HOLD · LH2</strong>Upper-stage LH2 fill pressure 2.3 PSI above nominal. Bleed valve cycling. Recovery in progress.</span>
      <span class="tl5-gauge">HOLD<span class="tl5-bar tl5-bar-hold" style="--g: 38%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−42m</span>
      <span class="tl5-stat tl5-go">RESUME</span>
      <span class="tl5-msg"><strong>HOLD RELEASED</strong>LH2 fill pressure nominal at 14.8 PSI. Count resumed. Loss-of-window risk: low.</span>
      <span class="tl5-gauge">98%<span class="tl5-bar" style="--g: 98%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−10m</span>
      <span class="tl5-stat tl5-go">GO</span>
      <span class="tl5-msg"><strong>TERMINAL COUNT</strong>FTS armed. APU spin-up complete. Launch director polls all stations: GO for launch.</span>
      <span class="tl5-gauge">99%<span class="tl5-bar" style="--g: 99%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+00:00</span>
      <span class="tl5-stat tl5-go">LIFT</span>
      <span class="tl5-msg"><strong>IGNITION &amp; LIFTOFF</strong>27 Merlin engines at 100% throttle. Tower cleared at T+7. Pitch program initiated at T+9.</span>
      <span class="tl5-gauge">7.6M LBF<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+01:08</span>
      <span class="tl5-stat tl5-nom">NOM</span>
      <span class="tl5-msg"><strong>MAX-Q</strong>Vehicle passes maximum dynamic pressure at 11.2 km altitude. Throttle-down complete, throttling back up.</span>
      <span class="tl5-gauge">Q=33<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+02:42</span>
      <span class="tl5-stat tl5-go">SEP</span>
      <span class="tl5-msg"><strong>BECO &amp; STAGE SEP</strong>Boost engine cutoff. Side cores separate cleanly. Upper stage MVac ignition confirmed.</span>
      <span class="tl5-gauge">+147km<span class="tl5-bar" style="--g: 84%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+08:34</span>
      <span class="tl5-stat tl5-crit">CRIT</span>
      <span class="tl5-msg"><strong>UPPER STAGE ANOMALY</strong>Telemetry dropout on FCC-2. Backup channel active. Crew safe; redundancy nominal but logged for review.</span>
      <span class="tl5-gauge">REDX<span class="tl5-bar tl5-bar-crit" style="--g: 65%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+12:18</span>
      <span class="tl5-stat tl5-go">ORB</span>
      <span class="tl5-msg"><strong>ORBITAL INSERTION</strong>Parking orbit confirmed: 185 × 192 km @ 28.5°. TLI burn scheduled for T+02:14:00.</span>
      <span class="tl5-gauge">ORBIT✓<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
  </div>

  <div class="tl5-status-bar">
    <div class="tl5-item">ALT<span class="tl5-v">187km</span></div>
    <div class="tl5-item">VEL<span class="tl5-v">7.79km/s</span></div>
    <div class="tl5-item">DOWNRANGE<span class="tl5-v">2,140km</span></div>
    <div class="tl5-item">ΔV LEFT<span class="tl5-v">3,148m/s</span></div>
    <div class="tl5-item">SIGNAL<span class="tl5-v">−104dBm</span></div>
    <div class="tl5-item">CREW<span class="tl5-v">N/A</span></div>
  </div>
</section>

CSS

.tl5-wrap {
  background: #000;
  color: #00ff88;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.tl5-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,255,136,0.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,255,136,0.02) 2px 3px);
  pointer-events: none;
  z-index: 1;
}
.tl5-wrap > * { position: relative; z-index: 2; }
.tl5-head {
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  border-bottom: 1px solid #006633;
  padding-bottom: 1.25rem;
}
.tl5-title {
  font-family: 'Major Mono Display', 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: #00ff88;
  line-height: 1;
  text-shadow: 0 0 12px rgba(0,255,136,0.5);
  letter-spacing: -0.02em;
  margin: 0;
}
.tl5-sub {
  display: block;
  font-size: 0.5em;
  color: #ffaa00;
  margin-top: 0.5rem;
  text-shadow: 0 0 8px rgba(255,170,0,0.5);
}
.tl5-telemetry {
  font-size: 10.5px;
  line-height: 1.7;
  color: #00cc6a;
}
.tl5-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #003322;
  padding: 2px 0;
}
.tl5-row span:last-child { color: #00ff88; }
.tl5-countdown { text-align: right; }
.tl5-cd-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #ffaa00;
}
.tl5-clock {
  font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 3rem;
  line-height: 1;
  color: #ff3355;
  text-shadow: 0 0 14px rgba(255,51,85,0.7);
  margin-top: 0.25rem;
}
.tl5-blink { animation: tl5-blink 1s steps(2) infinite; }
@keyframes tl5-blink { 50% { opacity: 0; } }
.tl5-log {
  border: 1px solid #006633;
  background: rgba(0,20,12,0.6);
}
.tl5-log-head {
  display: grid;
  grid-template-columns: 90px 60px 1fr 80px;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: #003322;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #00cc6a;
  border-bottom: 1px solid #006633;
}
.tl5-event {
  display: grid;
  grid-template-columns: 90px 60px 1fr 80px;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px dashed #003322;
  align-items: center;
  transition: background 0.2s;
  cursor: pointer;
}
.tl5-event:hover { background: rgba(0,255,136,0.06); }
.tl5-tmin { font-size: 13px; color: #ffaa00; font-weight: 700; }
.tl5-stat {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-align: center;
  padding: 2px 6px;
  border: 1px solid;
}
.tl5-stat.tl5-go { color: #00ff88; border-color: #00ff88; }
.tl5-stat.tl5-hold { color: #ffaa00; border-color: #ffaa00; }
.tl5-stat.tl5-nom { color: #00cc6a; border-color: #00cc6a; }
.tl5-stat.tl5-crit {
  color: #ff3355;
  border-color: #ff3355;
  animation: tl5-blink 0.8s infinite;
}
.tl5-msg { font-size: 12px; color: #d4ffe8; line-height: 1.4; }
.tl5-msg strong { color: #00ff88; display: inline-block; margin-right: 0.5rem; }
.tl5-gauge {
  font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: #00cc6a;
  text-align: right;
}
.tl5-bar {
  display: block;
  height: 4px;
  margin-top: 2px;
  background: #003322;
  position: relative;
}
.tl5-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--g, 50%);
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
}
.tl5-bar-hold::after { background: #ffaa00; box-shadow: 0 0 6px #ffaa00; }
.tl5-bar-crit::after { background: #ff3355; box-shadow: 0 0 6px #ff3355; }
.tl5-status-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #006633;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tl5-item {
  padding: 0.5rem;
  border: 1px solid #006633;
  text-align: center;
}
.tl5-item .tl5-v {
  display: block;
  font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 20px;
  color: #00ff88;
  margin-top: 2px;
  text-shadow: 0 0 6px rgba(0,255,136,0.5);
}
@media (max-width: 720px) {
  .tl5-head, .tl5-log-head, .tl5-event { grid-template-columns: 1fr; gap: 0.5rem; }
  .tl5-status-bar { grid-template-columns: repeat(3, 1fr); }
  .tl5-countdown { text-align: left; }
}