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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #2b73c9 0%, #4ba1ea 45%, #3a86d1 100%);15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 height: 92px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 opacity: 0.95;26 font-size: 36px;27 letter-spacing: 0.5px;28 }29 .status-icons { display: flex; gap: 22px; align-items: center; }30 31 /* App bar */32 .app-bar {33 height: 160px;34 padding: 0 36px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 }39 .left-app {40 display: flex; align-items: center; gap: 28px;41 }42 .hamburger {43 width: 64px; height: 64px; display: grid; place-items: center;44 }45 .brand {46 display: flex; flex-direction: column; line-height: 1.1;47 }48 .brand .logo-line { font-weight: 600; font-size: 40px; display: flex; align-items: center; gap: 10px; opacity: 0.95;}49 .brand .location { font-weight: 800; font-size: 54px; display: flex; align-items: center; gap: 10px;}50 .premium-btn {51 background: #fff;52 color: #e65100;53 font-weight: 800;54 padding: 18px 28px;55 border-radius: 36px;56 border: 3px solid rgba(255,255,255,0.6);57 font-size: 36px;58 }59 60 .divider {61 width: 100%;62 height: 2px;63 background: rgba(255,255,255,0.25);64 opacity: 0.6;65 }66 67 /* Main banner / dial */68 .headline {69 text-align: center;70 font-size: 44px;71 margin-top: 30px;72 opacity: 0.95;73 }74 .dial-wrap {75 position: relative;76 width: 980px;77 height: 980px;78 margin: 24px auto 0;79 }80 .dial {81 position: absolute;82 left: 50%;83 top: 50%;84 width: 900px;85 height: 900px;86 transform: translate(-50%, -50%);87 border-radius: 50%;88 background:89 radial-gradient(ellipse at 60% 60%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.02) 60%, rgba(0,0,0,0.05) 100%),90 repeating-conic-gradient(rgba(255,255,255,0.55) 0 3deg, transparent 3deg 12deg);91 box-shadow: inset 0 0 120px rgba(0,0,0,0.15), 0 10px 40px rgba(0,0,0,0.15);92 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;93 }94 .time-marker {95 position: absolute;96 top: -26px;97 left: 50%;98 transform: translateX(-50%);99 font-size: 32px;100 opacity: 0.85;101 }102 .weather-icon {103 width: 120px; height: 120px;104 }105 .temp {106 font-size: 160px;107 font-weight: 800;108 line-height: 1;109 }110 .temp small { font-size: 56px; font-weight: 700; margin-left: 6px; vertical-align: super; }111 .subline { font-size: 44px; opacity: 0.9; }112 .next-hours { margin-top: 20px; font-size: 46px; font-weight: 700; display: flex; align-items: center; gap: 12px; }113 .arrow-right {114 width: 28px; height: 28px; display: inline-block;115 }116 117 /* Legend */118 .legend {119 width: 100%;120 padding: 30px 54px 10px;121 font-size: 36px;122 display: flex;123 justify-content: space-between;124 align-items: center;125 opacity: 0.95;126 }127 .legend-group { display: flex; align-items: center; gap: 18px; }128 .dot { width: 22px; height: 22px; border-radius: 50%; display: inline-block; }129 .dots { display: flex; gap: 14px; align-items: center; margin-left: 16px; }130 .legend .label { opacity: 0.9; }131 132 /* Forecast cards */133 .cards {134 margin: 16px 40px 0;135 padding: 28px;136 background: rgba(255,255,255,0.08);137 border: 1px solid rgba(255,255,255,0.15);138 border-radius: 28px;139 display: grid;140 grid-template-columns: repeat(3, 1fr);141 gap: 22px;142 }143 .card {144 background: rgba(255,255,255,0.06);145 border: 1px solid rgba(255,255,255,0.12);146 border-radius: 18px;147 padding: 28px;148 }149 .card .title { font-size: 36px; letter-spacing: 1px; opacity: 0.9; }150 .card .big { font-size: 100px; font-weight: 800; margin: 6px 0 8px; }151 .card .small { font-size: 34px; opacity: 0.9; }152 .small-icon { width: 70px; height: 70px; margin-top: 6px; opacity: 0.95; }153 154 /* Ad placeholder */155 .ad {156 margin: 24px 0 0;157 width: 100%;158 height: 240px;159 background: #E0E0E0;160 border: 1px solid #BDBDBD;161 color: #757575;162 display: flex;163 justify-content: center;164 align-items: center;165 font-size: 44px;166 font-weight: 600;167 }168 169 /* Bottom nav */170 .bottom-nav {171 position: absolute;172 left: 0; right: 0; bottom: 60px;173 height: 160px;174 background: rgba(0,0,0,0.18);175 backdrop-filter: blur(2px);176 display: grid;177 grid-template-columns: repeat(4, 1fr);178 border-top: 1px solid rgba(255,255,255,0.15);179 }180 .nav-item {181 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;182 color: #e9f3ff;183 font-size: 32px;184 }185 .nav-item.active { color: #fff; font-weight: 700; }186 .nav-ico { width: 56px; height: 56px; }187 .home-pill {188 position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);189 width: 360px; height: 12px; border-radius: 8px; background: rgba(255,255,255,0.9);190 }191</style>192</head>193<body>194<div id="render-target">195 <!-- Status Bar -->196 <div class="status-bar">197 <div>8:19</div>198 <div class="status-icons">199 <span>◦</span>200 <span>⚙️</span>201 <span>▶</span>202 <span>☁️</span>203 <span>🔇</span>204 <span>📶</span>205 <span>📡</span>206 <span>91%</span>207 </div>208 </div>209 210 <!-- App Bar -->211 <div class="app-bar">212 <div class="left-app">213 <div class="hamburger">214 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">215 <path d="M3 6h18M3 12h18M3 18h18"/>216 </svg>217 </div>218 <div class="brand">219 <div class="logo-line">220 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">221 <circle cx="12" cy="12" r="4"></circle>222 <path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/>223 </svg>224 AccuWeather225 </div>226 <div class="location">227 Delhi, IN228 <svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5z"/></svg>229 </div>230 </div>231 </div>232 <button class="premium-btn">GET PREMIUM+</button>233 </div>234 235 <div class="divider"></div>236 237 <!-- Headline -->238 <div class="headline">No precipitation for at least 60 min</div>239 240 <!-- Dial -->241 <div class="dial-wrap">242 <div class="time-marker">8:18 AM</div>243 <div class="dial">244 <svg class="weather-icon" viewBox="0 0 48 48" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">245 <circle cx="30" cy="16" r="6"></circle>246 <path d="M30 4v4M30 24v4M18 16h4M38 16h4M22 10l3 3M35 23l3 3M35 9l3-3"/>247 <path d="M12 36h20a8 8 0 0 0 0-16c-.7 0-1.3.1-1.9.2A10 10 0 0 0 10 26c0 5.5 4.5 10 10 10z"/>248 </svg>249 <div class="temp">29<small>°C</small></div>250 <div class="subline">RealFeel 36°</div>251 <div class="next-hours">Next 4 Hours252 <svg class="arrow-right" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><path d="M8 4l8 8-8 8"/></svg>253 </div>254 </div>255 </div>256 257 <!-- Legend -->258 <div class="legend">259 <div class="legend-group">260 <span class="label">Rain</span>261 <div class="dots">262 <span class="dot" style="background:#7cb342"></span>263 <span class="dot" style="background:#c0ca33"></span>264 <span class="dot" style="background:#ffb300"></span>265 <span class="dot" style="background:#fb8c00"></span>266 <span class="dot" style="background:#e53935"></span>267 </div>268 </div>269 <div class="legend-group">270 <span class="label">Snow</span>271 <div class="dots">272 <span class="dot" style="background:#b0bec5"></span>273 <span class="dot" style="background:#90caf9"></span>274 <span class="dot" style="background:#42a5f5"></span>275 <span class="dot" style="background:#1e88e5"></span>276 </div>277 </div>278 <div class="legend-group">279 <span class="label">Ice</span>280 <div class="dots">281 <span class="dot" style="background:#f48fb1"></span>282 <span class="dot" style="background:#f06292"></span>283 <span class="dot" style="background:#ec407a"></span>284 </div>285 </div>286 <div class="legend-group">287 <span class="label">Mix</span>288 <div class="dots">289 <span class="dot" style="background:#9575cd"></span>290 <span class="dot" style="background:#7e57c2"></span>291 <span class="dot" style="background:#64b5f6"></span>292 </div>293 </div>294 </div>295 296 <!-- Forecast Cards -->297 <div class="cards">298 <div class="card">299 <div class="title">TODAY</div>300 <svg class="small-icon" viewBox="0 0 48 48" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">301 <path d="M10 34h22a8 8 0 0 0 0-16c-.7 0-1.3.1-1.9.2A10 10 0 0 0 8 24c0 4.5 3 8.5 7 9.6"/>302 <path d="M20 38l-4 6M28 38l-4 6"/>303 </svg>304 <div class="big">36°</div>305 <div class="small">RealFeel 44°</div>306 </div>307 <div class="card">308 <div class="title">TONIGHT</div>309 <svg class="small-icon" viewBox="0 0 48 48" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">310 <path d="M12 34h22a8 8 0 0 0 0-16c-.7 0-1.3.1-1.9.2A10 10 0 0 0 10 24c0 4.5 3 8.5 7 9.6"/>311 <path d="M22 38l-4 6M30 38l-4 6"/>312 </svg>313 <div class="big">27°</div>314 <div class="small">RealFeel 31°</div>315 </div>316 <div class="card">317 <div class="title">TUE</div>318 <svg class="small-icon" viewBox="0 0 48 48" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">319 <circle cx="30" cy="18" r="6"></circle>320 <path d="M30 6v4M30 26v4M20 18h4M40 18h4M23 12l3 3M34 25l3 3M34 11l3-3"/>321 <path d="M12 36h20a6 6 0 0 0 0-12c-.7 0-1.3.1-1.9.2A10 10 0 0 0 10 28c0 4.4 3.6 8 8 8z"/>322 </svg>323 <div class="big">37°</div>324 <div class="small">RealFeel 45°</div>325 </div>326 </div>327 328 <!-- Ad -->329 <div class="ad">[IMG: Ad Banner]</div>330 331 <!-- Bottom Navigation -->332 <div class="bottom-nav">333 <div class="nav-item active">334 <svg class="nav-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">335 <rect x="3" y="4" width="18" height="16" rx="2"></rect>336 <path d="M3 10h18M8 2v4M16 2v4"/>337 </svg>338 <div>Today</div>339 </div>340 <div class="nav-item">341 <svg class="nav-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">342 <circle cx="12" cy="12" r="9"></circle>343 <path d="M12 7v6l4 2"/>344 </svg>345 <div>Hourly</div>346 </div>347 <div class="nav-item">348 <svg class="nav-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">349 <rect x="3" y="4" width="18" height="16" rx="2"></rect>350 <path d="M3 10h18M8 2v4M16 2v4M7 14h4M7 18h6"/>351 </svg>352 <div>Daily</div>353 </div>354 <div class="nav-item">355 <svg class="nav-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">356 <circle cx="12" cy="12" r="9"></circle>357 <path d="M2 12h6l2-3 3 6 2-2h7"/>358 </svg>359 <div>Radar & Maps</div>360 </div>361 </div>362 363 <div class="home-pill"></div>364</div>365</body>366</html>