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 UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #2d75c5 0%, #3a86cf 40%, #4a92d2 100%);15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 100px;25 padding: 30px 40px 0 40px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 font-weight: 600;31 letter-spacing: 0.3px;32 }33 .status-left, .status-right { display: flex; align-items: center; gap: 22px; }34 .status-time { font-size: 36px; }35 .icon-small svg { width: 36px; height: 36px; fill: none; stroke: #ffffff; stroke-width: 3; }36 37 /* Header */38 .app-header {39 position: absolute;40 top: 120px;41 left: 0;42 width: 100%;43 padding: 0 40px;44 box-sizing: border-box;45 }46 .header-row {47 display: flex;48 align-items: center;49 justify-content: space-between;50 }51 .hamburger, .add-btn {52 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;53 border-radius: 36px;54 }55 .hamburger svg, .add-btn svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 4; }56 .location-title {57 text-align: center;58 font-weight: 800;59 font-size: 64px;60 margin: 16px 0 6px;61 }62 .subtime {63 text-align: center;64 font-size: 36px;65 opacity: 0.9;66 margin-bottom: 20px;67 }68 69 /* Forecast card */70 .forecast-card {71 margin: 40px;72 margin-top: 30px;73 background: linear-gradient(180deg, rgba(14,66,130,0.85), rgba(14,66,130,0.8));74 border-radius: 28px;75 padding: 40px 40px 34px;76 box-sizing: border-box;77 position: relative;78 }79 .chart-area {80 height: 420px;81 position: relative;82 border-radius: 18px;83 }84 .vline {85 position: absolute;86 top: 80px;87 bottom: 130px;88 width: 0;89 border-left: 6px dotted rgba(255,255,255,0.8);90 }91 .dot {92 position: absolute;93 width: 18px; height: 18px; border-radius: 50%;94 background: #fff;95 transform: translate(-9px, -9px);96 }97 .value-label {98 position: absolute;99 top: 12px;100 font-size: 48px;101 font-weight: 700;102 transform: translateX(-20px);103 }104 .trend-line {105 position: absolute;106 left: 0; right: 0; top: 220px; height: 2px;107 }108 .trend-line svg { width: 100%; height: 160px; }109 /* wind arrows row */110 .wind-row {111 display: flex;112 align-items: center;113 justify-content: space-between;114 padding: 40px 10px 0;115 }116 .wind-arrow svg { width: 72px; height: 72px; fill: #fff; }117 /* day labels */118 .days {119 display: grid;120 grid-template-columns: repeat(5, 1fr);121 gap: 10px;122 margin-top: 24px;123 }124 .day {125 text-align: left;126 color: #dfe9ff;127 }128 .day .name { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: #fff; }129 .day .date { font-size: 32px; opacity: 0.9; }130 131 /* Section headers */132 .section {133 padding: 20px 40px;134 margin-top: 10px;135 }136 .section .row {137 display: flex; align-items: center; justify-content: space-between;138 }139 .section-title {140 font-size: 52px; font-weight: 800;141 }142 .link {143 display: inline-flex; align-items: center; gap: 12px; font-size: 42px; font-weight: 700; color: #e9f2ff;144 }145 .link svg { width: 36px; height: 36px; stroke: #e9f2ff; stroke-width: 5; fill: none; }146 147 /* Map card (image placeholder) */148 .map-card {149 margin: 24px 40px;150 background: rgba(14,66,130,0.5);151 border-radius: 28px;152 padding: 20px;153 }154 .img-placeholder {155 width: 100%;156 height: 480px;157 background: #E0E0E0;158 border: 1px solid #BDBDBD;159 border-radius: 22px;160 display: flex; justify-content: center; align-items: center;161 color: #757575; font-size: 38px; font-weight: 600;162 }163 164 /* Indices list */165 .indices-card {166 margin: 16px 40px 0;167 background: linear-gradient(180deg, rgba(14,66,130,0.85), rgba(14,66,130,0.8));168 border-radius: 28px;169 padding: 26px;170 }171 .index-item {172 display: grid; grid-template-columns: 120px 1fr; gap: 28px;173 align-items: center;174 padding: 26px 20px;175 border-radius: 20px;176 }177 .index-icon {178 width: 120px; height: 120px; border-radius: 24px;179 background: rgba(255,255,255,0.15);180 display: flex; align-items: center; justify-content: center;181 }182 .index-icon svg { width: 64px; height: 64px; fill: none; stroke: #ffffff; stroke-width: 5; }183 .index-text {184 font-size: 38px; line-height: 1.36; color: #eaf3ff;185 }186 .divider { height: 1px; background: rgba(255,255,255,0.15); margin: 8px 0 8px 140px; }187 188 /* Home indicator */189 .home-indicator {190 position: absolute;191 bottom: 24px; left: 50%;192 transform: translateX(-50%);193 width: 360px; height: 14px; background: rgba(255,255,255,0.8);194 border-radius: 7px;195 }196</style>197</head>198<body>199<div id="render-target">200 201 <!-- Status Bar -->202 <div class="status-bar">203 <div class="status-left">204 <div class="status-time">5:53</div>205 <div class="icon-small">206 <!-- Simple mail icon -->207 <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7" stroke-linecap="round"/></svg>208 </div>209 <div class="icon-small">210 <!-- Simple slash icon -->211 <svg viewBox="0 0 24 24"><path d="M5 19L19 5" stroke-linecap="round"/></svg>212 </div>213 </div>214 <div class="status-right">215 <div class="icon-small">216 <!-- Wifi icon -->217 <svg viewBox="0 0 24 24">218 <path d="M2 8c9-6 11-6 20 0"/>219 <path d="M5 12c6-4 8-4 14 0"/>220 <path d="M8 16c3-2 5-2 8 0"/>221 <circle cx="12" cy="19" r="1.8" fill="#fff" stroke="none"/>222 </svg>223 </div>224 <div class="icon-small">225 <!-- Battery icon -->226 <svg viewBox="0 0 28 16">227 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#fff"/>228 <rect x="3" y="4" width="16" height="8" fill="#fff" stroke="none"/>229 <rect x="24" y="6" width="3" height="4" rx="1" stroke="#fff"/>230 </svg>231 </div>232 <div style="font-size: 34px; font-weight: 700;">85%</div>233 </div>234 </div>235 236 <!-- Header -->237 <div class="app-header">238 <div class="header-row">239 <div class="hamburger">240 <svg viewBox="0 0 24 24"><path d="M3 5h18M3 12h18M3 19h18" stroke-linecap="round"/></svg>241 </div>242 <div class="add-btn">243 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#fff" fill="none"/><path d="M12 7v10M7 12h10" stroke-linecap="round"/></svg>244 </div>245 </div>246 <div class="location-title">Ulm</div>247 <div class="subtime">Mon 14:23</div>248 </div>249 250 <!-- Forecast Card -->251 <div class="forecast-card">252 <div class="chart-area">253 <!-- vertical dotted lines + labels -->254 <div class="vline" style="left: 60px;"></div>255 <div class="dot" style="left: 60px; top: 280px;"></div>256 <div class="value-label" style="left: 76px;">7</div>257 258 <div class="vline" style="left: 260px;"></div>259 <div class="dot" style="left: 260px; top: 300px;"></div>260 <div class="value-label" style="left: 276px;">6</div>261 262 <div class="vline" style="left: 460px;"></div>263 <div class="dot" style="left: 460px; top: 270px;"></div>264 <div class="value-label" style="left: 476px;">7</div>265 266 <div class="vline" style="left: 660px;"></div>267 <div class="dot" style="left: 660px; top: 272px;"></div>268 <div class="value-label" style="left: 676px;">7</div>269 270 <div class="vline" style="left: 860px;"></div>271 <div class="dot" style="left: 860px; top: 274px;"></div>272 <div class="value-label" style="left: 876px;">7</div>273 274 <!-- Smooth trend line -->275 <div class="trend-line">276 <svg viewBox="0 0 1000 160">277 <path d="M40 120 C 200 145, 360 110, 460 100 C 560 95, 660 100, 860 100 C 960 100, 1000 100, 1000 100"278 stroke="#fff" stroke-width="5" fill="none"/>279 <!-- small points already added as .dot -->280 </svg>281 </div>282 </div>283 284 <!-- Wind direction arrows -->285 <div class="wind-row">286 <div class="wind-arrow">287 <svg viewBox="0 0 24 24"><path d="M5 12l12-6-6 12z"/></svg>288 </div>289 <div class="wind-arrow">290 <svg viewBox="0 0 24 24"><path d="M12 5l6 12-12-6z"/></svg>291 </div>292 <div class="wind-arrow">293 <svg viewBox="0 0 24 24"><path d="M12 5l-6 12 12-6z"/></svg>294 </div>295 <div class="wind-arrow">296 <svg viewBox="0 0 24 24"><path d="M12 5l5 14-14-5z"/></svg>297 </div>298 <div class="wind-arrow">299 <svg viewBox="0 0 24 24"><path d="M6 6l12 6-12 6z"/></svg>300 </div>301 </div>302 303 <!-- Day labels -->304 <div class="days">305 <div class="day">306 <div class="name">Today</div>307 <div class="date">25/9</div>308 </div>309 <div class="day">310 <div class="name">Tue</div>311 <div class="date">26/9</div>312 </div>313 <div class="day">314 <div class="name">Wed</div>315 <div class="date">27/9</div>316 </div>317 <div class="day">318 <div class="name">Thu</div>319 <div class="date">28/9</div>320 </div>321 <div class="day">322 <div class="name">Fri</div>323 <div class="date">29/9</div>324 </div>325 </div>326 </div>327 328 <!-- Radar section -->329 <div class="section">330 <div class="row">331 <div class="section-title">Radar</div>332 <div class="link">Details333 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke-linecap="round" stroke-linejoin="round"/></svg>334 </div>335 </div>336 </div>337 <div class="map-card">338 <div class="img-placeholder">[IMG: Map - Central Europe Radar]</div>339 </div>340 341 <!-- Indices section -->342 <div class="section" style="margin-top: 14px;">343 <div class="row">344 <div class="section-title">Indices</div>345 <div class="link">More346 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke-linecap="round" stroke-linejoin="round"/></svg>347 </div>348 </div>349 </div>350 <div class="indices-card">351 <div class="index-item">352 <div class="index-icon">353 <!-- running icon -->354 <svg viewBox="0 0 24 24">355 <circle cx="12" cy="4" r="2" fill="none" stroke="#fff"/>356 <path d="M8 9l4 2 3-2M7 17l3-5M14 14l3 3" stroke-linecap="round"/>357 </svg>358 </div>359 <div class="index-text">Conditions are good for running outdoors.</div>360 </div>361 <div class="divider"></div>362 <div class="index-item">363 <div class="index-icon">364 <!-- pill icon -->365 <svg viewBox="0 0 24 24">366 <rect x="3" y="6" width="18" height="12" rx="6" ry="6"/>367 <path d="M8 9l8 6" stroke-linecap="round"/>368 </svg>369 </div>370 <div class="index-text">Weather conditions create a lowered risk of catching a cold, and will help to make colds less severe and of shorter duration.</div>371 </div>372 <div class="divider"></div>373 <div class="index-item">374 <div class="index-icon">375 <!-- outdoor activities icon -->376 <svg viewBox="0 0 24 24">377 <path d="M4 18l8-12 8 12" stroke-linecap="round"/>378 <path d="M12 6v12" stroke-linecap="round"/>379 </svg>380 </div>381 <div class="index-text">Conditions will be good for outdoor activities.</div>382 </div>383 </div>384 385 <div class="home-indicator"></div>386</div>387</body>388</html>