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>AccuWeather Radar Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0c0f14;13    border-radius: 24px;14    box-shadow: 0 18px 40px rgba(0,0,0,0.4);15    color: #fff;16  }17  /* Top status bar (safe area) */18  .statusbar {19    height: 110px;20    background: #0b1428;21  }22 23  /* App bar */24  .appbar {25    height: 190px;26    background: #3B82F6;27    display: flex;28    align-items: center;29    padding: 0 40px;30    box-sizing: border-box;31    position: relative;32  }33  .left-actions { display: flex; align-items: center; gap: 26px; }34  .hamburger svg { width: 60px; height: 60px; }35  .brand {36    display: flex; align-items: center; gap: 12px;37    font-weight: 700; font-size: 34px;38    opacity: 0.95;39  }40  .brand .sun svg { width: 38px; height: 38px; }41  .location {42    position: absolute;43    left: 160px;44    bottom: 28px;45    font-weight: 800; font-size: 48px;46  }47  .location .chev { display: inline-block; vertical-align: middle; margin-left: 8px; }48  .premium-btn {49    margin-left: auto;50    background: #FF9F4A;51    color: #fff;52    font-weight: 800;53    padding: 20px 34px;54    border-radius: 40px;55    font-size: 32px;56  }57 58  /* Legend strip */59  .legend {60    height: 140px;61    background: #22272d;62    display: flex;63    align-items: center;64    padding: 0 36px;65    gap: 28px;66    box-sizing: border-box;67  }68  .legend-item {69    display: flex; flex-direction: column; align-items: center; gap: 12px;70  }71  .legend-swatch {72    width: 220px; height: 42px; border-radius: 26px;73    border: 1px solid rgba(255,255,255,0.2);74  }75  .legend-item span {76    font-size: 26px; letter-spacing: 1px; color: #cfd8ff;77  }78  .rain { background: linear-gradient(90deg,#89d62f,#f2c62f,#f68b30,#e04f2b); }79  .snow { background: linear-gradient(90deg,#cfe6ff,#a8caff,#6fa2ff,#1c49ff); }80  .ice  { background: linear-gradient(90deg,#e7b5cf,#d38fb5,#c06aa3,#a5488f); }81  .mix  { background: linear-gradient(90deg,#cbb8f1,#b19be9,#8b72df,#6a4fd3); }82 83  /* Map placeholder */84  .map {85    position: relative;86    height: 1710px;87    display: flex; align-items: center; justify-content: center;88    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;89    color: #757575; font-size: 40px; font-weight: 700;90  }91  .map-label {92    position: absolute; top: 50%; left: 50%;93    transform: translate(-50%, -50%);94    padding: 16px 24px; border: 1px solid #BDBDBD;95    background: rgba(255,255,255,0.6); color: #555; border-radius: 10px;96  }97 98  /* Overlay chips on map */99  .overlay-chips {100    position: absolute; top: 90px; left: 40px;101    display: flex; gap: 26px;102  }103  .chip {104    background: rgba(32,36,42,0.95);105    color: #fff; border-radius: 60px;106    padding: 22px 34px; font-size: 30px; font-weight: 700;107    display: flex; align-items: center; gap: 16px;108    box-shadow: 0 8px 18px rgba(0,0,0,0.25);109  }110  .chip svg { width: 38px; height: 38px; }111 112  /* Timeline scrubber */113  .timeline {114    position: absolute; left: 40px; right: 40px; bottom: 180px;115    height: 180px; background: #232a31; border-radius: 90px; color: #E8EEF8;116    display: flex; align-items: center; gap: 26px; padding: 0 40px; box-sizing: border-box;117    box-shadow: 0 14px 28px rgba(0,0,0,0.35);118  }119  .play-circle {120    width: 110px; height: 110px; border-radius: 55px;121    background: #1c2228; display: flex; align-items: center; justify-content: center;122    border: 1px solid rgba(255,255,255,0.08);123  }124  .time-label { font-size: 32px; font-weight: 700; margin-right: 12px; color: #AFC3DA; }125  .slider {126    flex: 1; display: flex; align-items: center; gap: 16px;127  }128  .bar-bg {129    height: 26px; background: #ffffff; border-radius: 16px; flex: 0 0 520px;130  }131  .ticks {132    height: 0; border-top: 6px dotted rgba(255,255,255,0.65);133    flex: 1;134  }135  .now {136    font-size: 40px; font-weight: 900; margin-left: 16px; color: #ffffff;137  }138  .right-time { font-size: 30px; font-weight: 700; color: #AFC3DA; margin-left: auto; }139 140  .brands {141    position: absolute; bottom: 38px; left: 40px; right: 40px;142    display: flex; align-items: center; justify-content: space-between; color: #2c2c2c;143    font-weight: 800; font-size: 36px;144  }145  .brands .info {146    width: 36px; height: 36px; border-radius: 18px; border: 2px solid #2c2c2c;147    display: inline-flex; align-items: center; justify-content: center; font-size: 26px;148    margin-left: 12px;149  }150  .accu {151    display: flex; align-items: center; gap: 12px; color: #2c2c2c;152  }153  .accu svg { width: 34px; height: 34px; }154 155  /* Bottom nav bar */156  .bottom-nav {157    position: absolute; left: 0; right: 0; bottom: 0;158    height: 210px; background: #3B82F6;159    display: flex; align-items: center; justify-content: space-around;160    border-top-left-radius: 26px; border-top-right-radius: 26px;161  }162  .nav-item {163    width: 24%; text-align: center; color: #DCE8FF;164  }165  .nav-item .icon { width: 70px; height: 70px; margin: 0 auto 12px; }166  .nav-item span { font-size: 30px; font-weight: 700; }167  .nav-item.active span { color: #ffffff; }168  .nav-item.active .icon svg { fill: #fff; stroke: #fff; }169  .nav-item .icon svg { fill: none; stroke: #ffffff; stroke-width: 3; }170</style>171</head>172<body>173<div id="render-target">174 175  <div class="statusbar"></div>176 177  <div class="appbar">178    <div class="left-actions">179      <div class="hamburger">180        <svg viewBox="0 0 24 24">181          <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>182        </svg>183      </div>184      <div class="brand">185        <span class="sun">186          <svg viewBox="0 0 24 24">187            <circle cx="12" cy="12" r="4" fill="#fff"/>188            <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.5 4.5l2.1 2.1M17.4 17.4l2.1 2.1M19.5 4.5l-2.1 2.1M6.6 17.4L4.5 19.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>189          </svg>190        </span>191        AccuWeather192      </div>193    </div>194 195    <div class="premium-btn">GET PREMIUM+</div>196 197    <div class="location">198      Orléans, FR199      <span class="chev">200        <svg width="36" height="36" viewBox="0 0 24 24">201          <path d="M6 9l6 6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>202        </svg>203      </span>204    </div>205  </div>206 207  <div class="legend">208    <div class="legend-item">209      <div class="legend-swatch rain"></div>210      <span>RAIN</span>211    </div>212    <div class="legend-item">213      <div class="legend-swatch snow"></div>214      <span>SNOW</span>215    </div>216    <div class="legend-item">217      <div class="legend-swatch ice"></div>218      <span>ICE</span>219    </div>220    <div class="legend-item">221      <div class="legend-swatch mix"></div>222      <span>MIX</span>223    </div>224  </div>225 226  <div class="map">227    <div class="map-label">[IMG: Dark Weather Map - France]</div>228 229    <div class="overlay-chips">230      <div class="chip">231        <svg viewBox="0 0 24 24">232          <path d="M4 8l8-3 8 3-8 3-8-3zM4 13l8-3 8 3-8 3-8-3z" fill="#fff"/>233        </svg>234        ALL MAPS235      </div>236      <div class="chip">CLOUDS</div>237      <div class="chip">TEMPERATURE</div>238    </div>239 240    <div class="timeline">241      <div class="play-circle">242        <svg viewBox="0 0 24 24">243          <circle cx="12" cy="12" r="10" fill="none" stroke="#7f8b99" stroke-width="2"/>244          <path d="M10 8l7 4-7 4z" fill="#fff"/>245        </svg>246      </div>247      <div class="time-label">7:15 PM</div>248      <div class="slider">249        <div class="bar-bg"></div>250        <div class="ticks"></div>251        <div class="now">NOW</div>252      </div>253      <div class="right-time">9:00 PM CEST</div>254    </div>255 256    <div class="brands">257      <div>258        mapbox <span class="info">i</span>259      </div>260      <div class="accu">261        <svg viewBox="0 0 24 24">262          <circle cx="12" cy="12" r="4" fill="#2c2c2c"/>263          <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.5 4.5l2.1 2.1M17.4 17.4l2.1 2.1M19.5 4.5l-2.1 2.1M6.6 17.4L4.5 19.5" stroke="#2c2c2c" stroke-width="2" stroke-linecap="round"/>264        </svg>265        AccuWeather266      </div>267    </div>268  </div>269 270  <div class="bottom-nav">271    <div class="nav-item">272      <div class="icon">273        <svg viewBox="0 0 24 24">274          <rect x="4" y="6" width="16" height="14" rx="2"/>275          <path d="M8 3v6M16 3v6M4 10h16"/>276        </svg>277      </div>278      <span>Today</span>279    </div>280    <div class="nav-item">281      <div class="icon">282        <svg viewBox="0 0 24 24">283          <circle cx="12" cy="12" r="9"/>284          <path d="M12 7v6l4 2"/>285        </svg>286      </div>287      <span>Hourly</span>288    </div>289    <div class="nav-item">290      <div class="icon">291        <svg viewBox="0 0 24 24">292          <rect x="4" y="6" width="16" height="14" rx="2"/>293          <path d="M4 10h16M8 14h8"/>294        </svg>295      </div>296      <span>Daily</span>297    </div>298    <div class="nav-item active">299      <div class="icon">300        <svg viewBox="0 0 24 24">301          <circle cx="12" cy="12" r="9"/>302          <circle cx="12" cy="12" r="5"/>303          <path d="M12 3v3M12 18v3M3 12h3M18 12h3"/>304        </svg>305      </div>306      <span>Radar & Maps</span>307    </div>308  </div>309 310</div>311</body>312</html>