Mars Mission Telemetry Dashboard Layout

<div class="flex flex-col md:flex-row w-full h-screen overflow-hidden"
  style="background-color: #F7F5F0; color: #2A2622; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.6;">
  <style>
    @keyframes pulse-red {
      0% {
        opacity: 0.5;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0.5;
      }
    }

    .custom-scrollbar::-webkit-scrollbar {
      width: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(42, 38, 34, 0.1);
    }
  </style>

  <!-- Sidebar Panel -->
  <aside class="flex flex-col w-full md:w-[45%] h-full relative z-10 overflow-hidden"
    style="background-color: #E6E2D6; border-right: 1px solid rgba(42, 38, 34, 0.08);">
    <header class="flex justify-between items-start p-10 pb-6" style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">
      <a href="#" class="font-semibold text-sm uppercase tracking-widest no-underline" style="color: #2A2622;">
        A &gt; 07
        <span class="font-normal opacity-60 italic" style="font-family: Georgia, serif; text-transform: none;">(ARES)</span>
      </a>
      <div class="text-[10px] tracking-widest opacity-60 uppercase">MISSION: DEEP CANYON</div>
    </header>

    <div class="flex flex-1 relative z-10 backdrop-blur-sm">
      <!-- Telemetry Column -->
      <div class="flex-1 flex flex-col" style="border-right: 1px solid rgba(42, 38, 34, 0.08);">
        <div class="text-[10px] uppercase tracking-widest p-4 px-6 opacity-70"
          style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">Live Telemetry</div>
        <div class="block p-4 px-6 text-xs transition-all duration-300"
          style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">
          Power Output
          <span class="block italic text-[11px] opacity-60 mt-1" style="font-family: Georgia, serif;">82.1% (RTG Decay)</span>
        </div>
        <div class="block p-4 px-6 text-xs" style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">
          System Temp
          <span class="block italic text-[11px] opacity-60 mt-1" style="font-family: Georgia, serif;">-22.5° C</span>
        </div>
        <div class="block p-4 px-6 text-xs" style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">
          Data Buffer
          <span class="block italic text-[11px] opacity-60 mt-1" style="font-family: Georgia, serif;">156 GB / 512 GB</span>
        </div>
        <div class="block p-4 px-6 text-xs" style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">
          Signal Relay
          <span class="block italic text-[11px] opacity-60 mt-1" style="font-family: Georgia, serif;">21m 05s Lag</span>
        </div>
      </div>

      <!-- Dynamics Column -->
      <div class="flex-1 flex flex-col" style="border-right: 1px solid rgba(42, 38, 34, 0.08);">
        <div class="text-[10px] uppercase tracking-widest p-4 px-6 opacity-70"
          style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">Dynamics</div>
        <div class="block p-4 px-6 text-xs" style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">
          Traversed
          <span class="block italic text-[11px] opacity-60 mt-1" style="font-family: Georgia, serif;">142.15 km</span>
        </div>
        <div class="block p-4 px-6 text-xs" style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">
          Incline
          <span class="block italic text-[11px] opacity-60 mt-1" style="font-family: Georgia, serif;">12.4° Grade</span>
        </div>
        <div class="block p-4 px-6 text-xs" style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">
          Velocity
          <span class="block italic text-[11px] opacity-60 mt-1" style="font-family: Georgia, serif;">0.12 m/s</span>
        </div>
      </div>

      <!-- Environment Column -->
      <div class="flex-1 flex flex-col">
        <div class="text-[10px] uppercase tracking-widest p-4 px-6 opacity-70"
          style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">Sol 2408</div>
        <div class="block p-4 px-6 text-xs" style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">
          Atmosphere
          <span class="block italic text-[11px] opacity-60 mt-1" style="font-family: Georgia, serif;">Dusty / Low Viz</span>
        </div>
        <div class="block p-4 px-6 text-xs" style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">
          Wind
          <span class="block italic text-[11px] opacity-60 mt-1" style="font-family: Georgia, serif;">14.2 m/s (SE)</span>
        </div>
      </div>
    </div>

    <div
      class="absolute bottom-[10%] -right-[10%] w-full h-[40%] flex justify-center items-center pointer-events-none z-0 opacity-40">
      <div class="w-[600px] h-[600px] rounded-full blur-[60px]"
        style="background: radial-gradient(circle, #CC5A45 0%, rgba(204, 90, 69, 0.1) 60%, transparent 80%);"></div>
    </div>

    <footer class="p-6 flex items-center justify-between text-[11px] uppercase tracking-widest z-20"
      style="border-top: 1px solid rgba(42, 38, 34, 0.08);">
      <span>Core Update: 11-15-2024</span>
      <span>Status: Nominal</span>
    </footer>
  </aside>

  <!-- Main Content Panel -->
  <main class="flex flex-col w-full md:w-[55%] h-full p-10 md:px-20 overflow-y-auto custom-scrollbar">
    <span class="text-[11px] uppercase tracking-[1.5px] text-[#948D85] mb-10 pb-4 inline-block w-fit" style="border-bottom: 1px solid rgba(42, 38, 34, 0.08);">Exploration Phase: Tier 3 Survey</span>

    <div class="inline-flex items-center text-[10px] tracking-widest uppercase text-[#CC5A45] font-semibold mb-4">
      <span class="w-1.5 h-1.5 bg-[#CC5A45] rounded-full mr-2" style="animation: pulse-red 2s infinite;"></span> System
      Online
    </div>

    <h1 class="text-5xl mb-6 tracking-tighter italic" style="font-family: Georgia, serif; color: #2A2622;">Ares-7.
      Valles Marineris Deep Survey</h1>

    <div class="my-6 mb-20 p-6 bg-[#fbfaf8]" style="border: 1px solid rgba(42, 38, 34, 0.08);">
      <div class="text-[10px] uppercase tracking-widest mb-4 flex justify-between">
        <span>Current Location: Melas Chasma Rim</span>
        <span>SOL 2408</span>
      </div>
      <div class="text-base text-[#2A2622]">9.8421° S, 76.3312° W</div>
    </div>

    <div class="text-[10px] uppercase tracking-[2px] mb-6 font-semibold">Canyon Vista (HazCam-07)</div>
    <div class="grid grid-cols-2 gap-[1px] bg-rgba(42, 38, 34, 0.08) border border-rgba(42, 38, 34, 0.08) mb-20">
      <div
        class="aspect-[4/3] bg-cover bg-center grayscale-[0.2] hover:grayscale-0 transition-all duration-300 relative"
        style="background-image: url('https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&q=80&w=400');">
        <div class="absolute bottom-0 inset-x-0 p-2 bg-black/70 text-white text-[9px] uppercase tracking-widest">Sol
          2406 - Descent Path</div>
      </div>
      <div
        class="aspect-[4/3] bg-cover bg-center grayscale-[0.2] hover:grayscale-0 transition-all duration-300 relative"
        style="background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=400');">
        <div class="absolute bottom-0 inset-x-0 p-2 bg-black/70 text-white text-[9px] uppercase tracking-widest">Sol
          2404 - Strata Detail</div>
      </div>
      <div
        class="aspect-[4/3] bg-cover bg-center grayscale-[0.2] hover:grayscale-0 transition-all duration-300 relative"
        style="background-image: url('https://images.unsplash.com/photo-1614314107768-6018061b3040?auto=format&fit=crop&q=80&w=400');">
        <div class="absolute bottom-0 inset-x-0 p-2 bg-black/70 text-white text-[9px] uppercase tracking-widest">Sol
          2400 - Mineral Sweep</div>
      </div>
      <div
        class="aspect-[4/3] bg-cover bg-center grayscale-[0.2] hover:grayscale-0 transition-all duration-300 relative"
        style="background-image: url('https://images.unsplash.com/photo-1446941611757-91d2c3bd3d45?auto=format&fit=crop&q=80&w=400');">
        <div class="absolute bottom-0 inset-x-0 p-2 bg-black/70 text-white text-[9px] uppercase tracking-widest">Sol
          2398 - Sky Survey</div>
      </div>
    </div>

    <div class="mt-auto">
      <div class="text-[10px] uppercase tracking-[2px] mb-6 font-semibold">Scientific Logbook</div>

      <div class="py-6 border-b border-rgba(42, 38, 34, 0.08)">
        <div class="text-[10px] text-[#948D85] mb-1">Nov 12, 2024</div>
        <div class="text-lg italic mb-2" style="font-family: Georgia, serif;">Subsurface Ice Deposits Detected</div>
        <p class="text-[13px] text-[#66605B] font-light">Ground-penetrating radar identified a massive shelf of frozen
          water 2 meters below the chasma floor, potentially containing ancient bio-signatures.</p>
      </div>

      <div class="py-6 border-b border-rgba(42, 38, 34, 0.08)">
        <div class="text-[10px] text-[#948D85] mb-1">Nov 04, 2024</div>
        <div class="text-lg italic mb-2" style="font-family: Georgia, serif;">Atmospheric Methane Flux</div>
        <p class="text-[13px] text-[#66605B] font-light">Spectrometer readings show a localized 40% spike in methane
          concentrations during the transition to the night cycle near the western rift.</p>
      </div>

      <div class="py-6">
        <div class="text-[10px] text-[#948D85] mb-1">Oct 28, 2024</div>
        <div class="text-lg italic mb-2" style="font-family: Georgia, serif;">Sedimentary Stratification Analysis</div>
        <p class="text-[13px] text-[#66605B] font-light">The robotic arm has successfully scraped the surface of Layer
          14-B. Analysis confirms high clay content typical of long-standing liquid water.</p>
      </div>
    </div>
  </main>

  <script src="telemetry.js"></script>
</div>