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; font-family: "Helvetica Neue", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: linear-gradient(180deg, #5da8d6 0%, #8ec1e0 35%, #a7cfeb 60%, #d2e8f6 100%);12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0; height: 120px;17 background: #3b3b3b; color: #fff; display: flex; align-items: center; padding: 0 40px; box-sizing: border-box;18 }19 .status-left { font-weight: 600; font-size: 40px; }20 .status-right { margin-left: auto; display: flex; gap: 28px; align-items: center; }21 .status-icon svg { width: 36px; height: 36px; fill: #fff; opacity: 0.9; }22 23 /* Header area */24 .header {25 position: absolute; top: 120px; left: 0; right: 0; height: 320px; padding: 40px; box-sizing: border-box; color: #fff;26 }27 .header-inner { display: flex; align-items: center; }28 .hamburger { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; margin-right: 24px; }29 .hamburger svg { width: 56px; height: 56px; stroke: #fff; stroke-width: 8; fill: none; opacity: 0.9; }30 .location {31 font-size: 46px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 760px;32 }33 .pin {34 margin-left: auto; width: 72px; height: 72px; border-radius: 36px; border: 2px solid rgba(255,255,255,0.8);35 display: inline-flex; align-items: center; justify-content: center;36 }37 .pin svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 8; opacity: 0.9; }38 39 .unit-toggle {40 margin-top: 34px; display: inline-flex; border-radius: 18px; overflow: hidden;41 background: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.6);42 }43 .unit {44 padding: 14px 22px; font-size: 34px; font-weight: 700; color: rgba(255,255,255,0.9);45 }46 .unit.active {47 background: #ffffff; color: #3aaad6; border-left: 1px solid rgba(0,0,0,0.05); border-right: 1px solid rgba(0,0,0,0.05);48 }49 50 .dots { position: absolute; right: 44px; top: 260px; display: flex; gap: 18px; }51 .dot { width: 20px; height: 20px; border-radius: 10px; background: rgba(255,255,255,0.55); }52 .dot.active { background: #ffffff; }53 54 /* Card base */55 .card {56 margin: 0 36px; border-radius: 24px;57 background: linear-gradient(180deg, rgba(75,110,140,0.55), rgba(75,110,140,0.45));58 border: 1px solid rgba(255,255,255,0.6); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,0.15);59 backdrop-filter: blur(4px);60 }61 /* Current card */62 .current-card { position: absolute; top: 430px; left: 0; right: 0; height: 380px; padding: 34px 40px; box-sizing: border-box; }63 .current-top { font-size: 36px; opacity: 0.95; }64 .current-main { margin-top: 16px; display: flex; align-items: center; }65 .temp-large { font-size: 160px; font-weight: 300; letter-spacing: 2px; }66 .deg { font-size: 44px; margin-left: 10px; }67 .sun-wrap { margin-left: auto; display: flex; align-items: center; gap: 20px; }68 .sun-icon svg { width: 120px; height: 120px; stroke: #fff; stroke-width: 8; fill: none; }69 .condition { font-size: 36px; text-transform: lowercase; opacity: 0.95; }70 .current-details { margin-top: 18px; font-size: 34px; opacity: 0.95; }71 .hi-lo { margin-top: 6px; font-size: 34px; display: flex; gap: 26px; align-items: center; opacity: 0.95; }72 .arrow-up, .arrow-down { display: inline-flex; align-items: center; gap: 10px; }73 .arrow-up svg, .arrow-down svg { width: 26px; height: 26px; fill: #fff; opacity: 0.9; }74 75 /* Hourly card */76 .hourly-card { position: absolute; top: 840px; left: 0; right: 0; height: 360px; padding: 24px 30px; box-sizing: border-box; }77 .hourly-row { display: flex; gap: 26px; margin-top: 10px; align-items: flex-end; }78 .hour { width: 160px; height: 220px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }79 .hour .time { font-size: 32px; font-weight: 600; opacity: 0.95; }80 .hour .small-icon svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 6; fill: none; opacity: 0.95; }81 .hour .precip { font-size: 28px; opacity: 0.9; }82 .hour .temp { font-size: 32px; font-weight: 600; opacity: 0.95; }83 .hourly-footer { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; }84 .legend { display: flex; gap: 30px; font-size: 30px; opacity: 0.95; align-items: center; }85 .legend .icon { display: inline-flex; align-items: center; margin-right: 10px; }86 .legend svg { width: 32px; height: 32px; stroke: #fff; stroke-width: 5; fill: none; opacity: 0.95; }87 .more { font-size: 32px; text-decoration: underline; opacity: 0.95; }88 89 /* Daily card */90 .daily-card { position: absolute; top: 1220px; left: 0; right: 0; height: 850px; padding: 24px; box-sizing: border-box; overflow: hidden; }91 .day-tabs { display: flex; gap: 26px; padding: 10px 8px 18px 8px; }92 .day-tab {93 color: #fff; border: 2px solid rgba(255,255,255,0.85); border-radius: 14px; padding: 16px 24px; font-size: 32px; font-weight: 700;94 background: rgba(255,255,255,0.08);95 }96 .photo-bg {97 position: absolute; left: 24px; right: 24px; bottom: 24px; top: 120px;98 border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.6);99 }100 .photo-bg .img {101 position: absolute; inset: 0;102 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;103 display: flex; align-items: center; justify-content: center; font-size: 34px;104 }105 .bars { position: absolute; left: 24px; right: 24px; bottom: 42px; height: 540px; display: flex; gap: 48px; justify-content: space-between; align-items: flex-end; padding: 0 36px; box-sizing: border-box; }106 .bar-group { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; }107 .bar {108 width: 40px; background: linear-gradient(180deg, #7bd9ff 0%, #49c7ff 100%);109 border-radius: 22px; box-shadow: 0 6px 10px rgba(0,0,0,0.2);110 }111 .bar-label-top { font-size: 32px; margin-bottom: 8px; opacity: 0.95; }112 .bar-label-bottom { font-size: 30px; margin-top: 12px; opacity: 0.95; }113 .daily-more { position: absolute; right: 40px; bottom: 24px; font-size: 32px; text-decoration: underline; color: #fff; opacity: 0.95; }114 .precip-small { font-size: 24px; opacity: 0.95; margin-top: 4px; }115 116 /* Ad banner */117 .ad-banner {118 position: absolute; left: 0; right: 0; bottom: 120px; height: 210px; margin: 0 0;119 display: flex; align-items: center; justify-content: center;120 }121 .ad-banner .img {122 width: 100%; height: 100%; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;123 display: flex; align-items: center; justify-content: center; font-size: 34px;124 }125 /* Gesture bar */126 .gesture {127 position: absolute; left: 0; right: 0; bottom: 26px; height: 60px; display: flex; align-items: center; justify-content: center;128 }129 .gesture .pill {130 width: 260px; height: 10px; background: #000; border-radius: 6px; opacity: 0.35;131 }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Status bar -->138 <div class="status-bar">139 <div class="status-left">8:26</div>140 <div class="status-right">141 <span class="status-icon">142 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>143 </span>144 <span class="status-icon">145 <svg viewBox="0 0 24 24"><path d="M2 12h20"/></svg>146 </span>147 <span class="status-icon">148 <svg viewBox="0 0 24 24"><path d="M12 2v20M2 12h20"/></svg>149 </span>150 <span class="status-icon">151 <svg viewBox="0 0 24 24"><path d="M12 4l6 8-6 8-6-8z"/></svg>152 </span>153 <span class="status-icon">154 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>155 </span>156 <span class="status-icon">157 <svg viewBox="0 0 24 24"><path d="M22 6v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6h20z"/></svg>158 </span>159 </div>160 </div>161 162 <!-- Header -->163 <div class="header">164 <div class="header-inner">165 <div class="hamburger">166 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>167 </div>168 <div class="location">Krishna Indraprasth Apartments, Shas...</div>169 <div class="pin">170 <svg viewBox="0 0 24 24"><path d="M12 22s-7-8-7-12a7 7 0 1 1 14 0c0 4-7 12-7 12z"/><circle cx="12" cy="10" r="3"/></svg>171 </div>172 </div>173 <div class="unit-toggle">174 <div class="unit">F</div>175 <div class="unit active">C</div>176 </div>177 <div class="dots">178 <div class="dot active"></div>179 <div class="dot"></div>180 <div class="dot"></div>181 </div>182 </div>183 184 <!-- Current weather card -->185 <div class="current-card card">186 <div class="current-top">Wed, 11/08/2023</div>187 <div class="current-main">188 <div style="display:flex; align-items:flex-end;">189 <div class="temp-large">25</div>190 <div class="deg">oC</div>191 </div>192 <div class="sun-wrap">193 <div class="sun-icon">194 <svg viewBox="0 0 24 24">195 <circle cx="12" cy="12" r="4"/>196 <path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M19.8 4.2l-2.1 2.1M6.3 17.7l-2.1 2.1"/>197 </svg>198 </div>199 <div class="condition">clear sky</div>200 </div>201 </div>202 <div class="current-details">203 Wind: 6 km/h, South East<br>204 Rain probability: (Rain) 0%205 </div>206 <div class="hi-lo">207 <span class="arrow-up">208 <svg viewBox="0 0 24 24"><path d="M12 5l6 6H6z"/></svg>209 32°210 </span>211 <span class="arrow-down">212 <svg viewBox="0 0 24 24"><path d="M12 19l-6-6h12z"/></svg>213 22°214 </span>215 </div>216 </div>217 218 <!-- Hourly forecast -->219 <div class="hourly-card card">220 <div class="hourly-row">221 <div class="hour">222 <div class="time">07:00 AM</div>223 <div class="small-icon">224 <svg viewBox="0 0 24 24">225 <circle cx="12" cy="12" r="4"/>226 <path d="M12 1v3M12 20v3M1 12h3M20 12h3"/>227 </svg>228 </div>229 <div class="precip">0%</div>230 <div class="temp">24°</div>231 </div>232 <div class="hour">233 <div class="time">08:00 AM</div>234 <div class="small-icon">235 <svg viewBox="0 0 24 24">236 <circle cx="12" cy="12" r="4"/>237 <path d="M12 1v3M12 20v3M1 12h3M20 12h3"/>238 </svg>239 </div>240 <div class="precip">0%</div>241 <div class="temp">25°</div>242 </div>243 <div class="hour">244 <div class="time">09:00 AM</div>245 <div class="small-icon">246 <svg viewBox="0 0 24 24">247 <path d="M6 14h12a3 3 0 0 0 0-6 5 5 0 0 0-9-1 4 4 0 0 0-3 7z"/>248 </svg>249 </div>250 <div class="precip">0%</div>251 <div class="temp">25°</div>252 </div>253 <div class="hour">254 <div class="time">10:00 AM</div>255 <div class="small-icon">256 <svg viewBox="0 0 24 24">257 <path d="M6 14h12a3 3 0 0 0 0-6 5 5 0 0 0-9-1 4 4 0 0 0-3 7z"/>258 </svg>259 </div>260 <div class="precip">0%</div>261 <div class="temp">26°</div>262 </div>263 <div class="hour">264 <div class="time">11:00 AM</div>265 <div class="small-icon">266 <svg viewBox="0 0 24 24">267 <path d="M6 14h12a3 3 0 0 0 0-6 5 5 0 0 0-9-1 4 4 0 0 0-3 7z"/>268 </svg>269 </div>270 <div class="precip">0%</div>271 <div class="temp">28°</div>272 </div>273 <div class="hour">274 <div class="time">12:00 PM</div>275 <div class="small-icon">276 <svg viewBox="0 0 24 24">277 <circle cx="12" cy="12" r="4"/>278 <path d="M12 1v3M12 20v3M1 12h3M20 12h3"/>279 </svg>280 </div>281 <div class="precip">0%</div>282 <div class="temp">30°</div>283 </div>284 </div>285 <div class="hourly-footer">286 <div class="legend">287 <span class="icon">288 <svg viewBox="0 0 24 24"><path d="M12 2c-2 2-3 4-3 7a5 5 0 0 0 6 0c0-3-1-5-3-7z"/></svg>289 </span>290 Chance of rain291 <span class="icon" style="margin-left: 36px;">292 <svg viewBox="0 0 24 24"><path d="M12 2l2.4 4.2L19 7l-3.4 3 1 4.6-4.6-2.2-4.6 2.2 1-4.6L4.9 7l4.6-0.8z"/></svg>293 </span>294 Chance of snow295 </div>296 <div class="more">More...</div>297 </div>298 </div>299 300 <!-- Daily forecast with photo background -->301 <div class="daily-card card">302 <div class="day-tabs">303 <div class="day-tab">WED</div>304 <div class="day-tab">THU</div>305 <div class="day-tab">FRI</div>306 <div class="day-tab">SAT</div>307 <div class="day-tab">SUN</div>308 <div class="day-tab">MON</div>309 <div class="day-tab">TUE</div>310 </div>311 312 <div class="photo-bg">313 <div class="img">[IMG: Snowy landscape]</div>314 </div>315 316 <div class="bars">317 <!-- WED -->318 <div class="bar-group">319 <div class="bar-label-top">32°</div>320 <div class="bar" style="height: 460px;"></div>321 <div class="bar-label-bottom">22°</div>322 <div class="precip-small">0%</div>323 </div>324 <!-- THU -->325 <div class="bar-group">326 <div class="bar-label-top">33°</div>327 <div class="bar" style="height: 470px;"></div>328 <div class="bar-label-bottom">22°</div>329 <div class="precip-small">0%</div>330 </div>331 <!-- FRI -->332 <div class="bar-group">333 <div class="bar-label-top">33°</div>334 <div class="bar" style="height: 470px;"></div>335 <div class="bar-label-bottom">22°</div>336 <div class="precip-small">3%</div>337 </div>338 <!-- SAT -->339 <div class="bar-group">340 <div class="bar-label-top">32°</div>341 <div class="bar" style="height: 440px;"></div>342 <div class="bar-label-bottom">22°</div>343 <div class="precip-small">0%</div>344 </div>345 <!-- SUN -->346 <div class="bar-group">347 <div class="bar-label-top">30°</div>348 <div class="bar" style="height: 420px;"></div>349 <div class="bar-label-bottom">20°</div>350 <div class="precip-small">0%</div>351 </div>352 <!-- MON -->353 <div class="bar-group">354 <div class="bar-label-top">30°</div>355 <div class="bar" style="height: 420px;"></div>356 <div class="bar-label-bottom">19°</div>357 <div class="precip-small">0%</div>358 </div>359 <!-- TUE -->360 <div class="bar-group">361 <div class="bar-label-top">30°</div>362 <div class="bar" style="height: 420px;"></div>363 <div class="bar-label-bottom">19°</div>364 <div class="precip-small">0%</div>365 </div>366 </div>367 368 <div class="daily-more">More...</div>369 </div>370 371 <!-- Ad banner -->372 <div class="ad-banner">373 <div class="img">[IMG: Ad banner - Homes on 99acres]</div>374 </div>375 376 <!-- Gesture bar -->377 <div class="gesture">378 <div class="pill"></div>379 </div>380 381</div>382</body>383</html>