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 App UI</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: #EEEEEE;15 border-radius: 24px;16 box-shadow: 0 8px 24px rgba(0,0,0,0.15);17 font-family: Arial, Helvetica, sans-serif;18 color: #212121;19 }20 21 /* Top system status bar */22 .status-bar {23 height: 120px;24 background: #6B1E1F;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 36px;29 font-size: 34px;30 }31 .status-left { display: flex; align-items: center; gap: 20px; }32 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }33 .status-icon {34 width: 36px; height: 36px;35 border-radius: 50%;36 border: 2px solid rgba(255,255,255,0.8);37 opacity: 0.9;38 }39 40 /* App bar */41 .app-bar {42 height: 140px;43 background: #D32F2F;44 color: #fff;45 display: flex;46 align-items: center;47 padding: 0 28px;48 box-shadow: 0 3px 0 rgba(0,0,0,0.2);49 }50 .app-left, .app-right { display: flex; align-items: center; }51 .app-left { gap: 32px; }52 .app-title {53 font-size: 48px;54 font-weight: 600;55 margin-left: 22px;56 }57 .app-right { margin-left: auto; gap: 32px; }58 .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }59 .icon-btn svg { width: 60px; height: 60px; fill: none; stroke: #fff; stroke-width: 6; }60 61 /* Content area */62 .content { padding: 18px; }63 .card {64 background: #fff;65 border: 1px solid #DADADA;66 border-radius: 8px;67 box-shadow: 0 2px 0 rgba(0,0,0,0.08);68 margin: 16px 10px;69 overflow: hidden;70 }71 .card-header {72 padding: 26px 24px 8px 24px;73 color: #9E9E9E;74 font-weight: 700;75 font-size: 30px;76 letter-spacing: 1px;77 }78 .conditions {79 display: flex;80 padding: 8px 24px 24px 24px;81 }82 .gauge {83 flex: 1;84 min-height: 560px;85 position: relative;86 display: flex;87 align-items: center;88 justify-content: center;89 }90 /* Decorative ring to hint a multicolor gauge */91 .gauge-ring {92 position: absolute;93 width: 540px;94 height: 540px;95 border-radius: 50%;96 background:97 conic-gradient(#7e57c2 0deg, #5c6bc0 40deg, #42a5f5 80deg, #26c6da 120deg, #26a69a 160deg, #66bb6a 200deg, #d4e157 240deg, #ffa726 280deg, #ef5350 320deg, #ef9a9a 360deg);98 -webkit-mask: radial-gradient(circle, transparent 58%, black 59%);99 mask: radial-gradient(circle, transparent 58%, black 59%);100 opacity: 0.35;101 }102 .gauge-content {103 position: relative;104 text-align: center;105 }106 .haze-icon {107 width: 120px; height: 60px; margin: 0 auto 10px auto;108 }109 .temp-main { font-size: 140px; color: #E53935; font-weight: 500; line-height: 1; }110 .temp-sub { font-size: 40px; color: #757575; margin-top: 10px; }111 112 .side-stats {113 width: 340px;114 padding-left: 20px;115 display: flex;116 flex-direction: column;117 gap: 46px;118 align-items: center;119 }120 .mini-dial {121 width: 220px;122 height: 220px;123 border-radius: 50%;124 border: 10px solid #E0E0E0;125 position: relative;126 display: flex;127 align-items: center;128 justify-content: center;129 }130 .mini-dial .label {131 position: absolute;132 bottom: -18px;133 font-size: 28px;134 color: #9E9E9E;135 text-transform: uppercase;136 }137 .mini-dial .value {138 font-size: 48px;139 color: #424242;140 margin-top: 6px;141 }142 143 .cond-footer {144 padding: 12px 24px 26px 24px;145 text-align: center;146 }147 .cond-footer .cond-text {148 font-size: 58px;149 font-weight: 500;150 margin-bottom: 10px;151 }152 .cond-footer .feels {153 font-size: 28px;154 color: #9E9E9E;155 letter-spacing: 1px;156 }157 158 .forecast-note {159 border-top: 1px solid #E0E0E0;160 padding: 26px 24px;161 font-size: 32px;162 color: #757575;163 }164 .forecast-note .emph { color: #77C300; font-weight: 700; }165 166 .more-row {167 border-top: 1px solid #E0E0E0;168 padding: 26px 24px;169 text-align: center;170 }171 .more-btn {172 color: #2196F3;173 font-weight: 700;174 font-size: 34px;175 text-transform: uppercase;176 letter-spacing: 1px;177 }178 179 /* Map placeholder */180 .img-placeholder {181 width: 100%;182 height: 520px;183 background: #E0E0E0;184 border: 1px solid #BDBDBD;185 display: flex;186 align-items: center;187 justify-content: center;188 color: #757575;189 font-size: 34px;190 position: relative;191 }192 .play-btn {193 position: absolute;194 left: 24px;195 bottom: 24px;196 width: 70px; height: 70px;197 background: rgba(0,0,0,0.25);198 border-radius: 50%;199 display: flex;200 align-items: center; justify-content: center;201 }202 .play-btn svg { width: 34px; height: 34px; fill: #fff; }203 204 /* Daily forecast scroller mimic */205 .forecast-tabs {206 border-top: 1px solid #E0E0E0;207 display: flex;208 padding: 10px 0;209 }210 .tab {211 flex: 1;212 padding: 26px 24px;213 text-align: center;214 border-right: 1px solid #E0E0E0;215 }216 .tab:last-child { border-right: none; }217 .tab .d-label { font-size: 30px; color: #616161; }218 .tab .d-date { font-size: 36px; font-weight: 600; color: #212121; margin-top: 8px; }219 220 /* Bottom gesture indicator */221 .gesture {222 position: absolute;223 bottom: 32px;224 left: 50%;225 transform: translateX(-50%);226 width: 300px; height: 16px;227 background: #000;228 opacity: 0.8;229 border-radius: 12px;230 }231</style>232</head>233<body>234<div id="render-target">235 236 <!-- Status bar -->237 <div class="status-bar">238 <div class="status-left">239 <div style="font-weight:700;">10:19</div>240 <div class="status-icon"></div>241 <div class="status-icon"></div>242 </div>243 <div class="status-right">244 <div style="font-size:32px; opacity:0.85;">30°</div>245 <div class="status-icon"></div>246 <div class="status-icon"></div>247 <div class="status-icon" style="border-color:#fff;"></div>248 <div style="font-size:32px;">100%</div>249 </div>250 </div>251 252 <!-- App bar -->253 <div class="app-bar">254 <div class="app-left">255 <!-- Hamburger -->256 <div class="icon-btn" aria-label="menu">257 <svg viewBox="0 0 24 24">258 <path d="M3 5h18M3 12h18M3 19h18"></path>259 </svg>260 </div>261 <div class="app-title">New Delhi, Delhi, India</div>262 </div>263 <div class="app-right">264 <!-- Search -->265 <div class="icon-btn" aria-label="search">266 <svg viewBox="0 0 24 24">267 <circle cx="10" cy="10" r="6"></circle>268 <path d="M15 15l6 6"></path>269 </svg>270 </div>271 <!-- Target/GPS -->272 <div class="icon-btn" aria-label="locate">273 <svg viewBox="0 0 24 24">274 <circle cx="12" cy="12" r="7"></circle>275 <path d="M12 3v4M12 17v4M3 12h4M17 12h4"></path>276 <circle cx="12" cy="12" r="2"></circle>277 </svg>278 </div>279 <!-- Settings (Unicode fallback) -->280 <div class="icon-btn" aria-label="settings" style="font-size:46px; color:#fff;">⚙</div>281 </div>282 </div>283 284 <!-- Content -->285 <div class="content">286 287 <!-- Current Conditions Card -->288 <div class="card">289 <div class="card-header">CURRENT CONDITIONS</div>290 <div class="conditions">291 <div class="gauge">292 <div class="gauge-ring"></div>293 <div class="gauge-content">294 <!-- Haze icon (wavy lines) -->295 <svg class="haze-icon" viewBox="0 0 100 50">296 <path d="M10 15c12 8 22 8 35 0M20 30c12 8 22 8 35 0M30 45c12 8 22 8 35 0" stroke="#9E9E9E" stroke-width="4" fill="none" stroke-linecap="round"></path>297 </svg>298 <div class="temp-main">31°</div>299 <div class="temp-sub">35° | 27°</div>300 </div>301 </div>302 303 <div class="side-stats">304 <!-- Precip dial -->305 <div class="mini-dial">306 <svg viewBox="0 0 100 100" style="position:absolute; top:10px; left:10px; width:100px; height:100px;">307 <path d="M60 20c-8 10-18 22-18 32a18 18 0 0 0 36 0c0-10-10-22-18-32z" fill="#29B6F6" opacity="0.8"></path>308 </svg>309 <div class="value">8%</div>310 <div class="label">PRECIP</div>311 </div>312 <!-- Wind dial -->313 <div class="mini-dial">314 <svg viewBox="0 0 100 100" style="position:absolute; top:10px; left:10px; width:100px; height:100px;">315 <circle cx="50" cy="50" r="40" stroke="#CFCFCF" stroke-width="3" fill="none" stroke-dasharray="2 8"></circle>316 <path d="M50 50L80 60" stroke="#000" stroke-width="4" marker-end="url(#arrow)"></path>317 <defs>318 <marker id="arrow" markerWidth="10" markerHeight="10" refX="6" refY="3" orient="auto">319 <path d="M0,0 L0,6 L6,3 z" fill="#000"></path>320 </marker>321 </defs>322 </svg>323 <div class="value">1 | 35</div>324 <div class="label">WIND</div>325 </div>326 </div>327 </div>328 329 <div class="cond-footer">330 <div class="cond-text">Haze</div>331 <div class="feels">FEELS LIKE 38°</div>332 </div>333 334 <div class="forecast-note">335 Today's temperature is forecast to be <span class="emph">NEARLY THE SAME</span> as yesterday.336 </div>337 <div class="more-row">338 <span class="more-btn">MORE</span>339 </div>340 </div>341 342 <!-- Wundermap Card -->343 <div class="card">344 <div class="card-header">WUNDERMAP</div>345 <div class="img-placeholder">[IMG: Weather Map - New Delhi region]</div>346 <div class="play-btn">347 <svg viewBox="0 0 24 24"><path d="M6 4l14 8-14 8z"></path></svg>348 </div>349 </div>350 351 <!-- Daily Forecast Card -->352 <div class="card">353 <div class="card-header">DAILY FORECAST</div>354 <div class="forecast-tabs">355 <div class="tab">356 <div class="d-label">TODAY</div>357 <div class="d-date">—</div>358 </div>359 <div class="tab">360 <div class="d-label">WED 09</div>361 <div class="d-date">—</div>362 </div>363 <div class="tab">364 <div class="d-label">THU 10</div>365 <div class="d-date">—</div>366 </div>367 <div class="tab">368 <div class="d-label">FRI 11</div>369 <div class="d-date">—</div>370 </div>371 </div>372 </div>373 </div>374 375 <!-- Bottom gesture indicator -->376 <div class="gesture"></div>377</div>378</body>379</html>