GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Weather App UI - Noida</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #e9eef2;14 font-family: Arial, Helvetica, sans-serif;15 color: #fff;16 }17 18 /* Status bar */19 .statusbar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 110px;25 background: #0f3242;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 40px;30 font-size: 36px;31 box-sizing: border-box;32 letter-spacing: 0.5px;33 }34 .status-icons {35 display: flex;36 gap: 24px;37 align-items: center;38 }39 .status-icons svg { width: 42px; height: 42px; fill: #cfe7f2; }40 41 /* App bar */42 .appbar {43 position: absolute;44 top: 110px;45 left: 0;46 width: 1080px;47 height: 140px;48 background: #2d6b87;49 display: flex;50 align-items: center;51 box-sizing: border-box;52 padding: 0 30px;53 }54 .appbar .title {55 position: absolute;56 left: 0;57 right: 0;58 text-align: center;59 font-size: 58px;60 font-weight: 600;61 color: #ffffff;62 }63 .appbar .left, .appbar .right {64 display: flex;65 align-items: center;66 }67 .appbar .left svg, .appbar .right svg { width: 60px; height: 60px; fill: #eaf6fd; }68 69 /* Forecast section */70 .forecast {71 position: absolute;72 top: 250px;73 left: 0;74 width: 1080px;75 height: 640px;76 background: linear-gradient(#5b82a0, #557993);77 box-sizing: border-box;78 padding: 30px 30px 0 30px;79 }80 .forecast-grid {81 display: flex;82 gap: 26px;83 height: 360px;84 }85 .forecast-card {86 flex: 1;87 background: rgba(255,255,255,0.06);88 border-radius: 10px;89 padding: 26px 22px;90 box-sizing: border-box;91 color: #ffffff;92 }93 .temp {94 font-size: 62px;95 font-weight: 600;96 margin-bottom: 18px;97 }98 .weather-icon {99 width: 76px; height: 76px;100 margin-bottom: 18px;101 }102 .small-row {103 display: flex; align-items: center; gap: 16px;104 font-size: 30px;105 opacity: 0.95;106 }107 .aqi-pill {108 margin-top: 20px;109 display: inline-block;110 padding: 16px 26px;111 background: #e9c0bf;112 color: #5b3a3a;113 border-radius: 12px;114 font-size: 38px;115 font-weight: 600;116 }117 .triangle {118 width: 0; height: 0;119 border-left: 16px solid transparent;120 border-right: 16px solid transparent;121 border-top: 16px solid #bcd1de;122 margin-top: 20px;123 }124 125 .hour-line {126 display: flex;127 align-items: center;128 gap: 18px;129 margin-top: 16px;130 color: #eaf6fd;131 font-size: 34px;132 }133 .divider {134 flex: 1; height: 2px; background: rgba(255,255,255,0.6);135 }136 137 /* Stats */138 .stats {139 margin-top: 18px;140 display: grid;141 grid-template-columns: 1fr 1fr;142 row-gap: 24px;143 column-gap: 24px;144 }145 .stat {146 display: flex; align-items: center; gap: 18px;147 font-size: 34px; color: #ffffff;148 }149 .stat .circle {150 width: 56px; height: 56px; border-radius: 50%;151 background: rgba(255,255,255,0.18);152 display: flex; align-items: center; justify-content: center;153 }154 .stat .circle svg { width: 34px; height: 34px; fill: #ffffff; }155 156 /* Ad area */157 .ad-block {158 position: absolute;159 top: 890px;160 left: 0;161 width: 1080px;162 height: 740px;163 background: #edf2f4;164 color: #7a8b96;165 box-sizing: border-box;166 padding: 24px 30px;167 }168 .ad-text {169 text-align: right; font-size: 46px; color: #8ea1aa;170 }171 .ad-img {172 width: 520px; height: 380px; margin: 140px auto 0;173 background: #E0E0E0; border: 1px solid #BDBDBD;174 display: flex; align-items: center; justify-content: center;175 color: #757575; font-size: 38px; border-radius: 8px;176 }177 178 /* Radar card */179 .card {180 position: absolute;181 left: 30px;182 top: 1660px;183 width: 1020px;184 background: #ffffff;185 border-radius: 16px;186 overflow: hidden;187 box-shadow: 0 6px 12px rgba(0,0,0,0.15);188 }189 .card-header {190 height: 110px;191 background: #2d6b87;192 display: flex; align-items: center; justify-content: space-between;193 padding: 0 24px; box-sizing: border-box;194 color: #ffffff; font-size: 42px; font-weight: 600;195 }196 .card-header .left {197 display: flex; align-items: center; gap: 16px;198 }199 .card-header .left .badge {200 width: 66px; height: 66px; border-radius: 50%; border: 3px solid #f0d367;201 display: flex; align-items: center; justify-content: center;202 }203 .card-header .left .badge svg { width: 36px; height: 36px; }204 .card-header .right svg { width: 56px; height: 56px; fill: #eaf6fd; }205 206 .card-body {207 padding: 16px; background: #ffffff;208 }209 .map-placeholder {210 width: 100%; height: 560px;211 background: #E0E0E0; border: 1px solid #BDBDBD;212 display: flex; align-items: center; justify-content: center;213 color: #757575; font-size: 40px; border-radius: 8px;214 }215 216 /* Bottom gesture area */217 .bottom-bar {218 position: absolute; bottom: 0; left: 0;219 width: 1080px; height: 140px; background: #0a0a0a;220 display: flex; align-items: center; justify-content: center;221 }222 .home-handle {223 width: 260px; height: 14px; border-radius: 8px; background: #c9c9c9;224 }225 226 /* Utility icons (sun, moon, droplet) */227 .droplet { width: 34px; height: 34px; }228</style>229</head>230<body>231<div id="render-target">232 233 <!-- Status bar -->234 <div class="statusbar">235 <div>4:01 32°</div>236 <div class="status-icons">237 <!-- globe -->238 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18M12 3v18M5 7c3 2 11 2 14 0" stroke="#cfe7f2" stroke-width="1.5" fill="none"/></svg>239 <!-- cloud -->240 <svg viewBox="0 0 24 24"><path d="M6 14a5 5 0 019-3 4 4 0 012 7H7a3 3 0 01-1-4z" /></svg>241 <!-- wifi -->242 <svg viewBox="0 0 24 24"><path d="M2 8c6-5 14-5 20 0M5 12c4-3 10-3 14 0M9 16c2-2 4-2 6 0M12 20a1 1 0 100-2 1 1 0 000 2z" stroke="#cfe7f2" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>243 <!-- battery -->244 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2" ry="2" stroke="#cfe7f2" stroke-width="1.5" fill="none"></rect><rect x="5" y="8" width="12" height="8" fill="#cfe7f2"></rect><rect x="19" y="10" width="2.5" height="6" fill="#cfe7f2"></rect></svg>245 </div>246 </div>247 248 <!-- App bar -->249 <div class="appbar">250 <div class="left">251 <!-- hamburger -->252 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#eaf6fd" stroke-width="2" fill="none" stroke-linecap="round"/></svg>253 </div>254 <div class="title">Noida</div>255 <div class="right">256 <!-- share icon -->257 <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="9" r="3"></circle><circle cx="18" cy="19" r="3"></circle><path d="M8.7 10.2l7.0-3.8M8.7 11.8l7.0 4.8" stroke="#eaf6fd" stroke-width="2" fill="none" stroke-linecap="round"/></svg>258 </div>259 </div>260 261 <!-- Forecast -->262 <div class="forecast">263 <div class="forecast-grid">264 <!-- Card 1 -->265 <div class="forecast-card">266 <div class="temp">95°</div>267 <svg class="weather-icon" viewBox="0 0 24 24">268 <circle cx="12" cy="12" r="5" fill="#FFD54F"></circle>269 <g stroke="#FFD54F" stroke-width="1.6" stroke-linecap="round">270 <path d="M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M4.2 19.8L7 17M17 7l2.8-2.8"/>271 </g>272 </svg>273 <div class="small-row">274 <svg class="droplet" viewBox="0 0 24 24"><path d="M12 3C9 7 8 10 8 13a4 4 0 008 0c0-3-1-6-4-10z" fill="#ffffff"/></svg>275 <span>30%</span>276 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M4 12l7-4v8l-7-4zm11 0h6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>277 </div>278 <div class="aqi-pill">120</div>279 <div class="triangle"></div>280 </div>281 282 <!-- Card 2 -->283 <div class="forecast-card">284 <div class="temp">92°</div>285 <svg class="weather-icon" viewBox="0 0 24 24">286 <circle cx="12" cy="12" r="5" fill="#FFD54F"></circle>287 <g stroke="#FFD54F" stroke-width="1.6" stroke-linecap="round">288 <path d="M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M4.2 19.8L7 17M17 7l2.8-2.8"/>289 </g>290 </svg>291 <div class="small-row">292 <svg class="droplet" viewBox="0 0 24 24"><path d="M12 3C9 7 8 10 8 13a4 4 0 008 0c0-3-1-6-4-10z" fill="#ffffff"/></svg>293 <span>20%</span>294 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M4 12l7-4v8l-7-4zm11 0h6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>295 </div>296 <div class="aqi-pill">120</div>297 <div class="triangle"></div>298 </div>299 300 <!-- Card 3 -->301 <div class="forecast-card">302 <div class="temp">88°</div>303 <svg class="weather-icon" viewBox="0 0 24 24">304 <circle cx="12" cy="12" r="6" fill="#FFE082"></circle>305 <circle cx="14" cy="12" r="6" fill="#2b2d3a"></circle>306 </svg>307 <div class="small-row">308 <svg class="droplet" viewBox="0 0 24 24"><path d="M12 3C9 7 8 10 8 13a4 4 0 008 0c0-3-1-6-4-10z" fill="#ffffff"/></svg>309 <span>20%</span>310 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M4 12l7-4v8l-7-4zm11 0h6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>311 </div>312 <div class="aqi-pill">120</div>313 <div class="triangle"></div>314 </div>315 316 <!-- Card 4 -->317 <div class="forecast-card">318 <div class="temp">87°</div>319 <svg class="weather-icon" viewBox="0 0 24 24">320 <circle cx="12" cy="12" r="6" fill="#FFE082"></circle>321 <circle cx="14" cy="12" r="6" fill="#2b2d3a"></circle>322 </svg>323 <div class="small-row">324 <svg class="droplet" viewBox="0 0 24 24"><path d="M12 3C9 7 8 10 8 13a4 4 0 008 0c0-3-1-6-4-10z" fill="#ffffff"/></svg>325 <span>20%</span>326 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M4 12l7-4v8l-7-4zm11 0h6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>327 </div>328 <div class="aqi-pill" style="background:#e4b9b7;">110</div>329 <div class="triangle"></div>330 </div>331 332 <!-- Card 5 -->333 <div class="forecast-card">334 <div class="temp">86°</div>335 <svg class="weather-icon" viewBox="0 0 24 24">336 <circle cx="12" cy="12" r="6" fill="#FFE082"></circle>337 <circle cx="14" cy="12" r="6" fill="#2b2d3a"></circle>338 </svg>339 <div class="small-row">340 <svg class="droplet" viewBox="0 0 24 24"><path d="M12 3C9 7 8 10 8 13a4 4 0 008 0c0-3-1-6-4-10z" fill="#ffffff"/></svg>341 <span>20%</span>342 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M4 12l7-4v8l-7-4zm11 0h6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>343 </div>344 <div class="aqi-pill" style="background:#7ab160; color:#163b1d;">106</div>345 <div class="triangle"></div>346 </div>347 </div>348 349 <div class="hour-line">350 <span>5:00 PM — sunny</span>351 <div class="divider"></div>352 </div>353 354 <div class="stats">355 <div class="stat">356 <div class="circle">357 <svg viewBox="0 0 24 24"><path d="M4 12l6-4v8l-6-4z" /></svg>358 </div>359 <div>pressure: 29.44 inHg</div>360 </div>361 <div class="stat">362 <div class="circle">363 <svg viewBox="0 0 24 24"><circle cx="12" cy="18" r="3"></circle><rect x="10" y="6" width="4" height="8" rx="2" ry="2"></rect></svg>364 </div>365 <div>feels like: 106°</div>366 </div>367 <div class="stat">368 <div class="circle">369 <svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h12M4 17h8" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>370 </div>371 <div>humidity: 60 %<br>dew point: 76°</div>372 </div>373 <div class="stat">374 <div class="circle">375 <svg viewBox="0 0 24 24"><path d="M4 12l7-4v8l-7-4zm11 0h6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>376 </div>377 <div>light wind from E (8 mph)</div>378 </div>379 <div class="stat">380 <div class="circle" style="background:#e4eef4; color:#1f3c4a; font-size:24px;">AQI</div>381 <div>AQI 120 Moderately polluted</div>382 </div>383 </div>384 </div>385 386 <!-- Ad area -->387 <div class="ad-block">388 <div class="ad-text">Ad</div>389 <div class="ad-img">[IMG: Advertisement Placeholder]</div>390 </div>391 392 <!-- Weather Radar Card -->393 <div class="card">394 <div class="card-header">395 <div class="left">396 <div class="badge">397 <!-- simple sun badge -->398 <svg viewBox="0 0 24 24">399 <circle cx="12" cy="12" r="5" fill="#FFD54F"></circle>400 <g stroke="#FFD54F" stroke-width="1.4" stroke-linecap="round">401 <path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>402 </g>403 </svg>404 </div>405 <div>WeatherRadar</div>406 </div>407 <div class="right">408 <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="9" r="3"></circle><circle cx="18" cy="19" r="3"></circle><path d="M8.7 10.2l7.0-3.8M8.7 11.8l7.0 4.8" stroke="#eaf6fd" stroke-width="2" fill="none" stroke-linecap="round"/></svg>409 </div>410 </div>411 <div class="card-body">412 <div class="map-placeholder">[IMG: Weather map radar]</div>413 </div>414 </div>415 416 <!-- Bottom gesture bar -->417 <div class="bottom-bar">418 <div class="home-handle"></div>419 </div>420 421</div>422</body>423</html>