GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Weather Map UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1f2f3a; /* app chrome tone */13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14    color: #fff;15  }16  .top-bar {17    position: absolute; top: 0; left: 0; width: 100%; height: 130px;18    background: #1f3a48;19    display: flex; align-items: center; padding: 0 40px; box-sizing: border-box;20    letter-spacing: 0.2px;21  }22  .top-bar .time { font-size: 40px; font-weight: 600; margin-right: 40px; }23  .top-bar .icon-cluster { display: flex; gap: 34px; margin-left: 20px; }24  .top-bar .icon { opacity: 0.9; }25  .legend {26    position: absolute; top: 130px; left: 0; width: 100%; height: 110px;27    background: #203f4f;28    box-sizing: border-box; padding: 16px 28px;29  }30  .legend-labels {31    position: absolute; top: 16px; left: 28px; right: 28px;32    display: flex; align-items: center; gap: 14px; font-size: 34px; opacity: 0.9;33  }34  .legend-bar {35    position: absolute; bottom: 12px; left: 28px; right: 28px; height: 56px;36    border-radius: 18px; border: 1px solid rgba(255,255,255,0.25);37    background: linear-gradient(90deg,38      #3a86ff 0%,39      #4aa0ff 8%,40      #3cc26e 24%,41      #85d84a 32%,42      #d7dc3b 40%,43      #f2b533 54%,44      #f6802e 62%,45      #f04b37 72%,46      #e43a5d 84%,47      #c8328e 100%);48  }49  .legend-scale {50    position: absolute; bottom: 72px; left: 28px; right: 28px;51    display: flex; justify-content: space-between; padding: 0 8px;52    font-size: 28px; opacity: 0.95;53  }54  .map {55    position: absolute; top: 240px; left: 0; width: 100%; height: 1800px;56    background: #4caf50;57    border-top: 1px solid rgba(255,255,255,0.1);58    border-bottom: 1px solid rgba(255,255,255,0.1);59    display: flex; justify-content: center; align-items: center;60    color: #e0f2f1; font-size: 36px; text-shadow: 0 1px 2px rgba(0,0,0,0.35);61  }62  .map::before {63    content: ""; position: absolute; inset: 0; 64    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 1px, transparent 1px 60px);65    opacity: 0.07; pointer-events: none;66  }67  .fab {68    position: absolute; width: 110px; height: 110px; border-radius: 22px;69    background: #1f3a48; box-shadow: 0 10px 20px rgba(0,0,0,0.3);70    display: flex; align-items: center; justify-content: center;71  }72  .fab svg { width: 56px; height: 56px; }73  .info-card {74    position: absolute; left: 120px; top: 720px; width: 840px; background: #1e3443; 75    border-radius: 28px; box-shadow: 0 16px 28px rgba(0,0,0,0.35);76    padding: 40px; box-sizing: border-box;77  }78  .info-card .coords { font-size: 40px; font-weight: 600; letter-spacing: 0.3px; }79  .info-card .star {80    position: absolute; right: 34px; top: 34px; width: 64px; height: 64px;81    display: flex; align-items: center; justify-content: center; opacity: 0.9;82  }83  .info-card .section { margin-top: 24px; font-size: 30px; color: #cfd8dc; }84  .wind-row { display: flex; align-items: center; gap: 18px; margin-top: 16px; }85  .wind-primary { font-size: 42px; font-weight: 700; color: #a7ffeb; }86  .wind-secondary { font-size: 28px; color: #b0c6cf; }87  .forecast-btn {88    margin-top: 34px; width: 100%; height: 120px; border-radius: 24px;89    background: linear-gradient(90deg, #00f0c9, #22dda8);90    display: flex; align-items: center; justify-content: center;91    font-size: 42px; color: #082f2c; font-weight: 700;92  }93  .card-pointer {94    position: absolute; left: 50%; transform: translateX(-50%);95    bottom: -18px; width: 0; height: 0;96    border-left: 24px solid transparent;97    border-right: 24px solid transparent;98    border-top: 24px solid #1e3443;99    filter: drop-shadow(0 8px 8px rgba(0,0,0,0.35));100  }101  .pin {102    position: absolute; width: 84px; height: 84px; border-radius: 42px;103    border: 6px solid rgba(255,255,255,0.9); background: rgba(31,58,72,0.85);104    box-shadow: 0 6px 16px rgba(0,0,0,0.35);105  }106  .pin::after {107    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);108    width: 28px; height: 28px; border-radius: 50%; background: #9fe4ff; border: 4px solid #eaf6ff;109  }110  .blue-dot {111    position: absolute; width: 24px; height: 24px; border-radius: 50%;112    background: #2196f3; border: 4px solid #bfe2ff;113  }114  .model-pill {115    position: absolute; width: 160px; height: 90px; border-radius: 18px;116    background: #1f3a48; display: flex; align-items: center; justify-content: center;117    font-size: 34px; font-weight: 700; color: #c6e2f0; box-shadow: 0 10px 20px rgba(0,0,0,0.3);118  }119  .bottom-panel {120    position: absolute; left: 0; bottom: 0; width: 100%; height: 360px; background: #223b49;121    box-shadow: 0 -12px 28px rgba(0,0,0,0.4);122    padding: 30px 40px; box-sizing: border-box;123  }124  .bottom-title { font-size: 40px; font-weight: 700; margin-bottom: 32px; }125  .timeline { display: flex; gap: 64px; align-items: center; color: #e2eff5; }126  .time-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }127  .time-item .t { font-size: 42px; font-weight: 700; }128  .time-item .ampm { font-size: 24px; opacity: 0.8; }129  .bottom-note { position: absolute; left: 0; right: 0; bottom: 54px; text-align: center; font-size: 26px; color: #9fb3bf; }130  .handle { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 220px; height: 12px; border-radius: 6px; background: #6b7f89; opacity: 0.8; }131 132  /* small labels on map to hint places */133  .place-label { position: absolute; color: #f1f8e9; font-weight: 700; font-size: 54px; text-shadow: 0 2px 3px rgba(0,0,0,0.4); }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Top status bar -->140  <div class="top-bar">141    <div class="time">10:11</div>142    <div class="icon-cluster">143      <!-- precipitation icon -->144      <svg class="icon" viewBox="0 0 24 24">145        <path d="M12 3c4 0 7 3 7 7s-3 7-7 7-7-3-7-7 3-7 7-7z" fill="none" stroke="#a7cbe3" stroke-width="2"/>146        <path d="M12 6v6l4 2" stroke="#a7cbe3" stroke-width="2" fill="none" stroke-linecap="round"/>147      </svg>148      <!-- wind particles -->149      <svg class="icon" viewBox="0 0 24 24">150        <path d="M3 8h10m-8 5h14m-6 5h8" stroke="#a7cbe3" stroke-width="2" stroke-linecap="round"/>151      </svg>152      <!-- up arrow -->153      <svg class="icon" viewBox="0 0 24 24">154        <path d="M12 5l-6 6h4v8h4v-8h4z" fill="#a7cbe3"/>155      </svg>156      <!-- dot -->157      <svg class="icon" viewBox="0 0 24 24">158        <circle cx