GD-ML/AndroidCode
13.4k
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 & Radar - Ivrea</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: linear-gradient(#1e6f93, #3c8fb1 35%, #5aa0bb 60%, #6aa9c0 100%);15 color: #ffffff;16 font-family: "Segoe UI", Arial, sans-serif;17 }18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 110px;25 background: #0a3a4a;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 36px;30 box-sizing: border-box;31 font-size: 44px;32 letter-spacing: 1px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 28px;38 opacity: 0.9;39 }40 .status-dot {41 width: 14px; height: 14px; background: #ffffff; border-radius: 50%;42 }43 /* App bar */44 .app-bar {45 position: absolute;46 top: 110px;47 left: 0;48 width: 100%;49 height: 150px;50 background: #0f5e76;51 display: flex;52 align-items: center;53 justify-content: space-between;54 padding: 0 36px;55 box-sizing: border-box;56 }57 .brand {58 font-size: 64px;59 font-weight: 600;60 letter-spacing: 1px;61 }62 .brand .amp { color: #f6c545; font-weight: 800; }63 .app-actions { display: flex; align-items: center; gap: 36px; }64 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }65 /* Hero info */66 .hero {67 position: absolute;68 top: 300px;69 left: 48px;70 right: 48px;71 }72 .region { font-size: 44px; opacity: 0.9; }73 .city { font-size: 84px; font-weight: 600; margin-top: 10px; }74 .temp-line { display: flex; align-items: flex-end; gap: 30px; margin-top: 26px; }75 .temp { font-size: 200px; font-weight: 700; line-height: 1; }76 .feels { font-size: 44px; opacity: 0.9; margin-bottom: 18px; }77 .date-right {78 position: absolute;79 top: -12px;80 right: 0;81 font-size: 40px;82 opacity: 0.95;83 }84 .round-badge {85 position: absolute;86 top: 60px;87 right: 18px;88 width: 96px; height: 96px;89 border-radius: 50%;90 background: rgba(255,255,255,0.15);91 display: flex; align-items: center; justify-content: center;92 }93 /* Video card */94 .video-card {95 position: absolute;96 top: 650px;97 right: 60px;98 width: 680px;99 background: #ffffff;100 color: #154c5d;101 border-radius: 26px;102 box-shadow: 0 6px 18px rgba(0,0,0,0.15);103 display: flex;104 align-items: center;105 justify-content: space-between;106 padding: 26px 26px 26px 32px;107 }108 .video-text { font-size: 44px; line-height: 1.3; }109 .video-text b { color: #f4b400; }110 .play-wrap {111 width: 160px; height: 160px; border-radius: 50%;112 border: 8px solid #0f5e76;113 display: flex; align-items: center; justify-content: center;114 background: #0f5e76;115 }116 /* Today Row */117 .today-row {118 position: absolute;119 top: 860px;120 left: 48px;121 right: 48px;122 }123 .today-top {124 display: flex; align-items: center; justify-content: space-between;125 border-bottom: 2px solid rgba(255,255,255,0.5);126 padding-bottom: 16px;127 }128 .today-label { font-size: 44px; font-weight: 600; }129 .sunrise { display: flex; align-items: center; gap: 18px; font-size: 38px; opacity: 0.95; }130 .hourly {131 display: flex; gap: 34px;132 margin-top: 24px;133 }134 .hour-card {135 width: 190px;136 background: rgba(255,255,255,0.08);137 border-radius: 16px;138 padding: 18px;139 box-sizing: border-box;140 }141 .hour-card.dim { background: rgba(255,255,255,0.18); }142 .hour-time { font-size: 36px; opacity: 0.95; text-align: center; }143 .hour-temp { font-size: 60px; text-align: center; margin-top: 16px; }144 .hour-icons { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }145 .precip { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; font-size: 34px; opacity: 0.95; }146 /* Summary line */147 .summary {148 position: absolute;149 top: 1250px;150 left: 48px;151 right: 48px;152 display: flex; align-items: center; gap: 18px;153 font-size: 40px;154 opacity: 0.95;155 }156 .summary hr {157 border: none; border-top: 2px solid rgba(255,255,255,0.6);158 flex: 1;159 }160 /* Metrics */161 .metrics {162 position: absolute;163 top: 1320px;164 left: 48px;165 right: 48px;166 display: grid;167 grid-template-columns: 1fr 1fr;168 gap: 28px;169 }170 .metric {171 display: flex; align-items: center; gap: 18px;172 font-size: 40px;173 opacity: 0.95;174 padding: 12px 0;175 }176 .metric .circle {177 width: 64px; height: 64px; border-radius: 50%;178 border: 2px solid rgba(255,255,255,0.8);179 display: flex; align-items: center; justify-content: center;180 }181 /* Ad placeholder */182 .ad {183 position: absolute;184 top: 1650px;185 left: 48px;186 right: 48px;187 height: 600px;188 border: 1px dashed rgba(0,0,0,0.2);189 display: flex; align-items: center; justify-content: center;190 color: rgba(0,0,0,0.35);191 font-size: 72px;192 background: rgba(255,255,255,0.12);193 }194 .ad .img-ph {195 width: 200px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;196 display: flex; justify-content: center; align-items: center; color: #757575; border-radius: 12px;197 }198 /* Bottom nav bar */199 .nav-bar {200 position: absolute;201 bottom: 0; left: 0; width: 100%; height: 120px;202 background: #000000;203 display: flex; align-items: center; justify-content: center;204 }205 .home-pill {206 width: 220px; height: 16px; background: #ffffff; border-radius: 12px; opacity: 0.9;207 }208 209 /* Simple svg helpers */210 svg { display: block; }211</style>212</head>213<body>214<div id="render-target">215 216 <!-- Status bar -->217 <div class="status-bar">218 <div>6:08</div>219 <div class="status-right">220 <!-- small placeholders to imitate status icons -->221 <div class="status-dot"></div>222 <div class="status-dot"></div>223 <div class="status-dot"></div>224 <div class="status-dot"></div>225 <div class="status-dot"></div>226 <svg width="48" height="48" viewBox="0 0 24 24">227 <path d="M3 18h18V8H3v10zm2-2h14V10H5v6z" fill="#ffffff" opacity="0.8"/>228 </svg>229 <svg width="38" height="38" viewBox="0 0 24 24">230 <path d="M16 6v12H8V6h8m1-2H7a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z" fill="#ffffff" opacity="0.9"/>231 </svg>232 </div>233 </div>234 235 <!-- App bar -->236 <div class="app-bar">237 <div class="icon-btn">238 <svg width="60" height="60" viewBox="0 0 24 24">239 <path d="M3 6h18M3 12h18M3 18h18" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round"/>240 </svg>241 </div>242 <div class="brand">weather<span class="amp">&</span>radar</div>243 <div class="app-actions">244 <div class="icon-btn">245 <svg width="60" height="60" viewBox="0 0 24 24">246 <circle cx="11" cy="11" r="7" stroke="#ffffff" stroke-width="2.2" fill="none"/>247 <path d="M20 20l-4-4" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round"/>248 </svg>249 </div>250 </div>251 </div>252 253 <!-- Hero -->254 <div class="hero">255 <div class="date-right">Mon 09/25 2:38 PM</div>256 <div class="round-badge">257 <svg width="60" height="60" viewBox="0 0 24 24">258 <circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.8"/>259 <path d="M12 6v6l4 2" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>260 </svg>261 </div>262 <div class="region">Piedmont, Italy</div>263 <div class="city">Ivrea</div>264 <div class="temp-line">265 <div class="temp">22°</div>266 <div class="feels">feels like 22°</div>267 </div>268 </div>269 270 <!-- Video card -->271 <div class="video-card">272 <div class="video-text"><b>90 Min. Weather:</b><br>sunny</div>273 <div class="play-wrap">274 <svg width="80" height="80" viewBox="0 0 24 24">275 <path d="M9 7l8 5-8 5V7z" fill="#ffffff"/>276 </svg>277 </div>278 </div>279 280 <!-- Today row -->281 <div class="today-row">282 <div class="today-top">283 <div class="today-label">today</div>284 <div class="sunrise">285 <svg width="44" height="44" viewBox="0 0 24 24">286 <circle cx="12" cy="12" r="4" fill="none" stroke="#ffffff" stroke-width="2"/>287 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M17 7l2.1-2.1M4.9 19.1l2.1-2.1" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>288 </svg>289 <div>↑ 7:18 AM ↓ 7:21 PM</div>290 </div>291 </div>292 293 <div class="hourly">294 <div class="hour-card dim">295 <div class="hour-time">3:00 PM</div>296 <div class="hour-temp">22°</div>297 <div class="hour-icons">298 <svg width="48" height="48" viewBox="0 0 24 24">299 <circle cx="12" cy="12" r="4" fill="#f7d000"/>300 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M17 7l2.1-2.1M4.9 19.1l2.1-2.1" stroke="#f7d000" stroke-width="2" stroke-linecap="round"/>301 </svg>302 <svg width="26" height="26" viewBox="0 0 24 24">303 <path d="M12 4l6 8-6 8-6-8z" fill="none" stroke="#d9e8f2" stroke-width="2"/>304 </svg>305 </div>306 <div class="precip">307 <svg width="28" height="28" viewBox="0 0 24 24">308 <path d="M12 3s-5 6-5 9a5 5 0 0 0 10 0c0-3-5-9-5-9z" fill="none" stroke="#ffffff" stroke-width="2"/>309 </svg>310 <span>0%</span>311 </div>312 </div>313 314 <div class="hour-card">315 <div class="hour-time">4:00 PM</div>316 <div class="hour-temp">22°</div>317 <div class="hour-icons">318 <svg width="48" height="48" viewBox="0 0 24 24">319 <circle cx="12" cy="12" r="4" fill="#f7d000"/>320 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M17 7l2.1-2.1M4.9 19.1l2.1-2.1" stroke="#f7d000" stroke-width="2" stroke-linecap="round"/>321 </svg>322 <svg width="26" height="26" viewBox="0 0 24 24">323 <path d="M12 4l6 8-6 8-6-8z" fill="none" stroke="#d9e8f2" stroke-width="2"/>324 </svg>325 </div>326 <div class="precip">327 <svg width="28" height="28" viewBox="0 0 24 24">328 <path d="M12 3s-5 6-5 9a5 5 0 0 0 10 0c0-3-5-9-5-9z" fill="none" stroke="#ffffff" stroke-width="2"/>329 </svg>330 <span>0%</span>331 </div>332 </div>333 334 <div class="hour-card">335 <div class="hour-time">5:00 PM</div>336 <div class="hour-temp">23°</div>337 <div class="hour-icons">338 <svg width="48" height="48" viewBox="0 0 24 24">339 <circle cx="12" cy="12" r="4" fill="#f7d000"/>340 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M17 7l2.1-2.1M4.9 19.1l2.1-2.1" stroke="#f7d000" stroke-width="2" stroke-linecap="round"/>341 </svg>342 <svg width="26" height="26" viewBox="0 0 24 24">343 <path d="M12 4l6 8-6 8-6-8z" fill="none" stroke="#d9e8f2" stroke-width="2"/>344 </svg>345 </div>346 <div class="precip">347 <svg width="28" height="28" viewBox="0 0 24 24">348 <path d="M12 3s-5 6-5 9a5 5 0 0 0 10 0c0-3-5-9-5-9z" fill="none" stroke="#ffffff" stroke-width="2"/>349 </svg>350 <span>0%</span>351 </div>352 </div>353 354 <div class="hour-card">355 <div class="hour-time">6:00 PM</div>356 <div class="hour-temp">23°</div>357 <div class="hour-icons">358 <svg width="48" height="48" viewBox="0 0 24 24">359 <circle cx="12" cy="12" r="4" fill="#f7d000"/>360 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M17 7l2.1-2.1M4.9 19.1l2.1-2.1" stroke="#f7d000" stroke-width="2" stroke-linecap="round"/>361 </svg>362 <svg width="26" height="26" viewBox="0 0 24 24">363 <path d="M12 4l6 8-6 8-6-8z" fill="none" stroke="#d9e8f2" stroke-width="2"/>364 </svg>365 </div>366 <div class="precip">367 <svg width="28" height="28" viewBox="0 0 24 24">368 <path d="M12 3s-5 6-5 9a5 5 0 0 0 10 0c0-3-5-9-5-9z" fill="none" stroke="#ffffff" stroke-width="2"/>369 </svg>370 <span>0%</span>371 </div>372 </div>373 374 <div class="hour-card">375 <div class="hour-time">7:00 PM</div>376 <div class="hour-temp">22°</div>377 <div class="hour-icons">378 <svg width="48" height="48" viewBox="0 0 24 24">379 <circle cx="12" cy="12" r="4" fill="#f7d000"/>380 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M17 7l2.1-2.1M4.9 19.1l2.1-2.1" stroke="#f7d000" stroke-width="2" stroke-linecap="round"/>381 </svg>382 <svg width="26" height="26" viewBox="0 0 24 24">383 <path d="M12 4l6 8-6 8-6-8z" fill="none" stroke="#d9e8f2" stroke-width="2"/>384 </svg>385 </div>386 <div class="precip">387 <svg width="28" height="28" viewBox="0 0 24 24">388 <path d="M12 3s-5 6-5 9a5 5 0 0 0 10 0c0-3-5-9-5-9z" fill="none" stroke="#ffffff" stroke-width="2"/>389 </svg>390 <span>0%</span>391 </div>392 </div>393 </div>394 </div>395 396 <!-- Summary -->397 <div class="summary">398 <div>3:00 PM — sunny</div>399 <hr>400 </div>401 402 <!-- Metrics -->403 <div class="metrics">404 <div class="metric">405 <div class="circle">406 <svg width="36" height="36" viewBox="0 0 24 24">407 <path d="M4 12l8-8 8 8-8 8z" fill="none" stroke="#ffffff" stroke-width="2"/>408 </svg>409 </div>410 <div>pressure: 1022 hPa</div>411 </div>412 <div class="metric">413 <div class="circle">414 <svg width="36" height="36" viewBox="0 0 24 24">415 <path d="M10 3v12a4 4 0 1 0 4 0V3h-4z" fill="none" stroke="#ffffff" stroke-width="2"/>416 </svg>417 </div>418 <div>feels like: 22°</div>419 </div>420 <div class="metric">421 <div class="circle">422 <svg width="36" height="36" viewBox="0 0 24 24">423 <path d="M3 6h18M3 12h14M3 18h10" stroke="#ffffff" stroke-width="2" fill="none"/>424 </svg>425 </div>426 <div>humidity: 45 %<br>dew point: 10°</div>427 </div>428 <div class="metric">429 <div class="circle">430 <svg width="36" height="36" viewBox="0 0 24 24">431 <path d="M4 12l8-4 8 4-8 4z" fill="none" stroke="#ffffff" stroke-width="2"/>432 </svg>433 </div>434 <div>light wind from S (5 kph)</div>435 </div>436 </div>437 438 <!-- Ad placeholder -->439 <div class="ad">440 <div style="position:absolute; left:40px; top:20px; font-size:48px; color:rgba(255,255,255,0.7);">Ad</div>441 <div class="img-ph">[IMG: Ad banner]</div>442 </div>443 444 <!-- Bottom nav bar -->445 <div class="nav-bar">446 <div class="home-pill"></div>447 </div>448 449</div>450</body>451</html>