GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7 body { margin:0; padding:0; background: transparent; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#203845; /* outer shell color */12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 color:#fff;14 }15 .status-bar {16 position:absolute; left:0; top:0; width:100%; height:90px;17 background:#203845;18 display:flex; align-items:center; padding:0 36px; box-sizing:border-box;19 font-weight:600; letter-spacing:0.3px;20 }21 .status-right { margin-left:auto; display:flex; gap:28px; align-items:center; opacity:0.9; }22 .dot { width:8px; height:8px; border-radius:50%; background:#c9d7de; display:inline-block; }23 .legend-bar {24 position:absolute; left:0; top:90px; width:100%; height:92px;25 background: linear-gradient(90deg,26 #2f7ed1 0%, #2f7ed1 10%,27 #37b55e 25%, #35e36b 30%, #56f07f 35%,28 #e9df39 52%, #f3d233 55%,29 #f79c3a 65%, #f5792a 72%,30 #e7463d 82%, #db3a8f 92%, #c13ea7 100%);31 }32 .legend-labels {33 position:absolute; top:90px; left:0; width:100%; height:92px; pointer-events:none;34 display:flex; align-items:center;35 padding:0 24px; box-sizing:border-box; gap:18px; color:#fff; font-weight:700;36 }37 .legend-labels span { font-size:28px; opacity:0.95; }38 .legend-ticks {39 position:absolute; top:90px; left:170px; right:24px; height:92px;40 display:flex; align-items:center; gap:42px; color:#fff;41 font-weight:700; font-size:28px;42 }43 44 .map {45 position:absolute; left:0; top:182px; width:100%; height:1688px;46 background:47 linear-gradient(#d9d1cc 0 0),48 repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 80px),49 repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 80px);50 background-blend-mode: normal;51 background-color:#e9e4df;52 }53 54 /* Floating buttons */55 .fab {56 position:absolute; width:120px; height:120px; border-radius:24px;57 background:#243f4d; box-shadow:0 6px 12px rgba(0,0,0,0.2);58 display:flex; align-items:center; justify-content:center;59 }60 .fab svg { width:52px; height:52px; fill:none; stroke:#e7eef2; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }61 .fab.large-icon svg { width:64px; height:64px; }62 .back-btn { left:56px; top:250px; }63 .right-stack { position:absolute; right:56px; top:280px; display:flex; flex-direction:column; gap:40px; }64 .right-bottom-stack { position:absolute; right:56px; bottom:520px; display:flex; flex-direction:column; gap:40px; }65 .label-pill {66 min-width:140px; height:120px; border-radius:24px; background:#243f4d;67 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:38px;68 }69 70 /* Info popup card */71 .info-card {72 position:absolute; left:140px; top:760px; width:800px; background:#243f4d; color:#d7e5ec;73 border-radius:28px; box-shadow:0 18px 32px rgba(0,0,0,0.35);74 padding:40px; box-sizing:border-box;75 }76 .info-card:after {77 content:""; position:absolute; left:50%; transform:translateX(-50%);78 bottom:-28px; width:0; height:0; border-left:28px solid transparent;79 border-right:28px solid transparent; border-top:28px solid #243f4d;80 }81 .card-title { font-size:40px; font-weight:800; letter-spacing:0.4px; color:#ffffff; }82 .star-btn { position:absolute; right:32px; top:28px; width:72px; height:72px; border-radius:20px; display:flex; align-items:center; justify-content:center; }83 .star-btn svg { width:40px; height:40px; fill:none; stroke:#fff; stroke-width:6; }84 .section-label { margin-top:22px; font-size:30px; opacity:0.8; }85 .wind-row { margin-top:12px; display:flex; align-items:center; gap:22px; }86 .wind-icon {87 width:58px; height:58px; border-radius:50%; background:#1fd873;88 display:flex; align-items:center; justify-content:center;89 }90 .wind-icon svg { width:34px; height:34px; stroke:#173f2c; stroke-width:6; fill:none; }91 .wind-speed { font-size:44px; font-weight:900; color:#ffffff; }92 .wind-sub { font-size:30px; opacity:0.8; margin-left:6px; }93 .forecast-btn {94 margin-top:30px; height:110px; background:#1ef0a6; border-radius:24px;95 display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:900; color:#043a2b;96 }97 98 /* Map markers (simple) */99 .pin {100 position:absolute; width:120px; height:160px;101 }102 .pin svg { width:100%; height:100%; }103 .pin1 { left:200px; top:1320px; }104 .pin2 { left:620px; top:1300px; }105 .pin3 { left:520px; top:1020px; }106 .center-marker {107 position:absolute; width:40px; height:40px; border-radius:50%; background:#2f66b1; left:540px; top:1060px; border:6px solid #2a4768;108 }109 .center-stick { position:absolute; width:8px; height:40px; background:#111; left:559px; top:1100px; border-radius:3px; }110 111 /* Google & play */112 .play-btn { left:56px; bottom:930px; }113 .google-tag {114 position:absolute; left:220px; bottom:940px; color:#ffffff; font-size:48px; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,0.15);115 }116 117 /* Bottom panel */118 .bottom-panel {119 position:absolute; left:0; bottom:0; width:100%; height:360px; background:#203845;120 border-top-left-radius:0; border-top-right-radius:0;121 box-shadow:0 -8px 20px rgba(0,0,0,0.3);122 }123 .bottom-content { padding:32px 36px; box-sizing:border-box; }124 .bottom-top {125 display:flex; align-items:center; gap:26px; margin-bottom:24px;126 }127 .bottom-top .date { font-size:44px; font-weight:800; }128 .bottom-top .back-inline {129 width:72px; height:72px; border-radius:20px; background:#243f4d; display:flex; align-items:center; justify-content:center;130 }131 .bottom-top .back-inline svg { width:40px; height:40px; stroke:#e7eef2; stroke-width:6; fill:none; }132 .hours {133 display:flex; gap:36px; align-items:flex-end; color:#eaf2f6; font-weight:800;134 }135 .hour { display:flex; flex-direction:column; align-items:center; gap:6px; }136 .hour .h { font-size:42px; }137 .hour .ap { font-size:26px; opacity:0.8; }138 .divider {139 position:absolute; right:40px; top:120px; bottom:40px; width:6px; background:rgba(255,255,255,0.15); border-radius:3px;140 }141 .local-time { position:absolute; left:36px; bottom:70px; font-size:28px; opacity:0.8; color:#cfe0e7; }142 .home-indicator {143 position:absolute; left:50%; transform:translateX(-50%); bottom:18px;144 width:300px; height:14px; background:#e9e9ea; border-radius:10px;145 }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status bar -->152 <div class="status-bar">153 <div style="font-size:42px; font-weight:800;">10:11</div>154 <div class="status-right">155 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 12l3 3 5-8 5 8 3-3" stroke="#cfe0e7" stroke-width="2" fill="none"/></svg>156 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M2 12h20M2 17h20M2 7h20" stroke="#cfe0e7" stroke-width="2" fill="none"/></svg>157 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 3v18M3 12h18" stroke="#cfe0e7" stroke-width="2" fill="none"/></svg>158 <span class="dot"></span>159 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#cfe0e7" stroke-width="2" fill="none"/><circle cx="12" cy="12" r="3" fill="#cfe0e7"/></svg>160 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M10 20V4l10 8-10 8z" fill="#cfe0e7"/></svg>161 </div>162 </div>163 164 <!-- mph legend gradient -->165 <div class="legend-bar"></div>166 <div class="legend-labels">167 <span>mph</span><span>0</span>168 </div>169 <div class="legend-ticks">170 <span>5</span><span>10</span><span>15</span><span>20</span><span>25</span><span>30</span><span>35</span><span>40</span><span>45</span><span>50</span>171 </div>172 173 <!-- Map area -->174 <div class="map"></div>175 176 <!-- Left back floating -->177 <div class="fab back-btn">178 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" /></svg>179 </div>180 181 <!-- Right stack (search, locate, share) -->182 <div class="right-stack">183 <div class="fab">184 <svg viewBox="0 0 24 24">185 <circle cx="11" cy="11" r="7"></circle>186 <path d="M20 20l-4-4"></path>187 </svg>188 </div>189 <div class="fab">190 <svg viewBox="0 0 24 24">191 <circle cx="12" cy="12" r="3"></circle>192 <path d="M12 4v3M12 17v3M4 12h3M17 12h3"></path>193 </svg>194 </div>195 <div class="fab">196 <svg viewBox="0 0 24 24">197 <circle cx="6" cy="6" r="3"></circle>198 <circle cx="18" cy="10" r="3"></circle>199 <circle cx="12" cy="18" r="3"></circle>200 <path d="M8 8l8 2M7 9l3 7M15 12l-2 5"></path>201 </svg>202 </div>203 </div>204 205 <!-- Popup info card -->206 <div class="info-card">207 <div class="star-btn">208 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .8-4.5 4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.8 9 9z"></path></svg>209 </div>210 <div class="card-title">28°25'54"N, 77°9'17"E</div>211 <div class="section-label">Wind</div>212 <div class="wind-row">213 <div class="wind-icon">214 <svg viewBox="0 0 24 24"><path d="M7 12h10M16 9l3 3-3 3" /></svg>215 </div>216 <div class="wind-speed">12 mph</div>217 <div class="wind-sub">13 mph</div>218 </div>219 <div class="forecast-btn">Forecast</div>220 </div>221 222 <!-- Map markers -->223 <div class="pin pin1">224 <svg viewBox="0 0 60 80">225 <path d="M30 78C22 62 10 51 10 34a20 20 0 1 1 40 0c0 17-12 28-20 44z" fill="#6e88a8" stroke="#ffffff" stroke-width="4"></path>226 <circle cx="30" cy="26" r="9" fill="#eaf0f4"></circle>227 </svg>228 </div>229 <div class="pin pin2">230 <svg viewBox="0 0 60 80">231 <path d="M30 78C22 62 10 51 10 34a20 20 0 1 1 40 0c0 17-12 28-20 44z" fill="#6e88a8" stroke="#ffffff" stroke-width="4"></path>232 <circle cx="30" cy="26" r="9" fill="#eaf0f4"></circle>233 </svg>234 </div>235 <div class="pin pin3">236 <svg viewBox="0 0 60 80">237 <path d="M30 78C22 62 10 51 10 34a20 20 0 1 1 40 0c0 17-12 28-20 44z" fill="#6e88a8" stroke="#ffffff" stroke-width="4"></path>238 <circle cx="30" cy="26" r="9" fill="#eaf0f4"></circle>239 </svg>240 </div>241 <div class="center-marker"></div>242 <div class="center-stick"></div>243 244 <!-- Right bottom stack (wind model, label, filters) -->245 <div class="right-bottom-stack">246 <div class="fab">247 <svg viewBox="0 0 24 24">248 <path d="M4 12h9a3 3 0 1 0-3-3"></path>249 <path d="M5 16h11a3 3 0 1 1-3 3"></path>250 </svg>251 </div>252 <div class="label-pill">GFS27</div>253 <div class="fab">254 <svg viewBox="0 0 24 24">255 <path d="M4 6h12M14 6v10M4 12h8M10 12v4M4 18h16M18 18v-8"></path>256 </svg>257 </div>258 </div>259 260 <!-- Play + Google -->261 <div class="fab play-btn">262 <svg viewBox="0 0 24 24" class="large-icon"><path d="M7 5l12 7-12 7z" /></svg>263 </div>264 <div class="google-tag">Google</div>265 266 <!-- Bottom panel -->267 <div class="bottom-panel">268 <div class="bottom-content">269 <div class="bottom-top">270 <div class="back-inline">271 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" /></svg>272 </div>273 <div class="date">Wed, 16 Aug</div>274 </div>275 <div class="hours">276 <div class="hour"><div class="h">02</div><div class="ap">AM</div></div>277 <div class="hour"><div class="h">05</div><div class="ap">AM</div></div>278 <div class="hour"><div class="h">08</div><div class="ap">AM</div></div>279 <div class="hour"><div class="h">11</div><div class="ap">AM</div></div>280 <div class="hour"><div class="h">02</div><div class="ap">PM</div></div>281 <div class="hour"><div class="h">05</div><div class="ap">PM</div></div>282 <div class="hour"><div class="h">08</div><div class="ap">PM</div></div>283 <div class="hour"><div class="h">11</div><div class="ap">PM</div></div>284 <div class="hour"><div class="h">02</div><div class="ap">AM</div></div>285 </div>286 <div class="divider"></div>287 <div class="local-time">Local (your) time: India Standard Time (GMT+5:30)</div>288 </div>289 <div class="home-indicator"></div>290 </div>291 292</div>293</body>294</html>