GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Weather UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background:transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background: radial-gradient(1400px 900px at 75% 35%, rgba(120,180,238,0.6), rgba(60,126,206,0.9) 40%, #1f61b2 80%) no-repeat,13 linear-gradient(180deg, #164d99 0%, #2b6fb9 40%, #2c73bf 100%);14 }15 16 /* General helpers */17 .row { display:flex; align-items:center; }18 .muted { color:#b6d1f2; }19 .white { color:#ffffff; }20 .divider { height:1px; background:rgba(255,255,255,0.25); }21 .caps { font-size:28px; letter-spacing:2px; text-transform:uppercase; }22 .shadow-soft { box-shadow: 0 8px 16px rgba(0,0,0,0.25); }23 24 /* Status bar */25 .status-bar {26 position:absolute; top:0; left:0; right:0; height:120px;27 padding:0 36px; color:#fff; font-size:42px; display:flex; align-items:center; justify-content:space-between;28 opacity:0.95;29 }30 .status-left { display:flex; align-items:center; gap:16px; }31 .status-right { display:flex; align-items:center; gap:24px; }32 .status-dot { width:12px; height:12px; background:#fff; border-radius:50%; opacity:0.9; }33 .battery {34 width:44px; height:24px; border:3px solid #fff; border-radius:5px; position:relative;35 }36 .battery::after { content:""; position:absolute; right:-10px; top:6px; width:6px; height:12px; background:#fff; border-radius:2px; }37 .battery-fill { position:absolute; top:3px; left:3px; height:16px; width:26px; background:#fff; }38 39 /* Header */40 .header {41 position:absolute; top:120px; left:0; right:0; height:190px;42 padding:0 36px; color:#fff;43 }44 .hamburger { width:60px; height:60px; display:flex; align-items:center; justify-content:center; margin-left:6px; }45 .hamburger svg { width:40px; height:40px; stroke:#fff; }46 .brand { margin-left:16px; }47 .brand .title { font-size:54px; font-weight:700; display:flex; align-items:center; gap:18px; }48 .brand .location { font-size:46px; font-weight:700; }49 .premium-btn {50 margin-left:auto; padding:18px 36px;51 border:3px solid #ff7a3d; color:#ff7a3d; border-radius:40px; font-weight:800; background:#ffffff; font-size:36px;52 }53 54 /* MinuteCast block */55 .minute-intro {56 position:absolute; top:328px; left:0; right:0; text-align:center; color:#fff;57 }58 .minute-intro .caps { color:#b6d1f2; font-weight:700; }59 .minute-intro .headline { font-size:64px; font-weight:700; margin-top:20px; }60 61 .now-label {62 position:absolute; top:560px; left:0; right:0; text-align:center; color:#fff; font-size:34px; font-weight:700;63 }64 .now-label::after {65 content:""; display:block; width:3px; height:32px; background:rgba(255,255,255,0.6); margin:10px auto 0; border-radius:2px;66 }67 68 .ring-wrap {69 position:absolute; top:620px; left:50%; transform:translateX(-50%);70 width:880px; height:880px;71 }72 .minute-ring {73 width:880px; height:880px; border-radius:50%;74 background:75 radial-gradient(closest-side, rgba(255,255,255,0.06) 70%, rgba(255,255,255,0) 72%) center/100% 100% no-repeat,76 repeating-conic-gradient(from -90deg,77 rgba(255,255,255,0.55) 0deg 6deg,78 rgba(255,255,255,0) 6deg 18deg);79 filter: blur(0.2px);80 opacity:0.9;81 }82 .ring-center {83 position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff;84 text-align:center;85 }86 .temp-icon { margin-bottom:28px; }87 .temp-icon svg { width:140px; height:140px; stroke:#fff; stroke-width:8; fill:none; opacity:0.9; }88 .temp-value { font-size:160px; font-weight:800; line-height:1; letter-spacing:2px; }89 .deg { font-size:0.6em; vertical-align:top; }90 .fahren { font-size:48px; margin-top:-10px; }91 .realfeel { margin-top:16px; font-size:44px; color:#e1efff; }92 .cta {93 margin-top:40px; display:inline-flex; align-items:center; gap:18px;94 padding:26px 38px; background:rgba(255,255,255,0.22); color:#fff; border-radius:40px; font-size:40px; font-weight:700;95 backdrop-filter: blur(2px);96 }97 .cta svg { width:26px; height:26px; stroke:#fff; fill:none; stroke-width:4; }98 99 .update-note {100 position:absolute; top:1580px; left:0; right:0; text-align:center; color:#b6d1f2; font-size:34px;101 }102 .pager {103 position:absolute; top:1660px; left:0; right:0; display:flex; justify-content:center; gap:36px;104 }105 .pager span { width:120px; height:10px; background:#e1efff; opacity:0.6; border-radius:6px; }106 .pager span.active { opacity:1; }107 108 /* Forecast cards */109 .cards {110 position:absolute; top:1760px; left:0; right:0;111 padding:0 36px;112 display:flex; gap:30px;113 }114 .card {115 flex:1; min-width:0;116 background:rgba(255,255,255,0.12);117 border-radius:30px; padding:40px; color:#fff;118 }119 .card h4 { margin:0 0 26px; font-size:38px; color:#cfe3ff; letter-spacing:1px; }120 .card .icon { margin-bottom:26px; }121 .card .icon svg { width:120px; height:120px; stroke:#fff; stroke-width:8; fill:none; opacity:0.95; }122 .card .temp { font-size:86px; font-weight:800; margin-bottom:12px; }123 .card .rf { font-size:36px; color:#e1efff; }124 125 /* Bottom nav */126 .bottom-nav {127 position:absolute; bottom:60px; left:0; right:0; height:180px;128 background:linear-gradient(180deg, rgba(19,67,130,0.65), rgba(19,67,130,0.85));129 display:flex; align-items:center; justify-content:space-around; color:#cfe3ff;130 border-top:1px solid rgba(255,255,255,0.15);131 }132 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; font-size:34px; }133 .nav-item svg { width:72px; height:72px; stroke:#cfe3ff; fill:none; stroke-width:6; }134 .nav-item.active { color:#fff; }135 .nav-item.active svg { stroke:#fff; }136 .home-indicator {137 position:absolute; bottom:18px; left:50%; transform:translateX(-50%);138 width:300px; height:16px; background:#ffffff; border-radius:10px;139 }140 141 /* Thin divider below header to mirror screenshot */142 .header-divider { position:absolute; top:310px; left:0; right:0; }143</style>144</head>145<body>146<div id="render-target">147 148 <!-- Status bar -->149 <div class="status-bar">150 <div class="status-left">151 <div>7:40</div>152 <div class="status-dot" style="opacity:0.6;"></div>153 <!-- simple gear icon -->154 <svg width="42" height="42" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2" opacity="0.85">155 <circle cx="12" cy="12" r="3"></circle>156 <path d="M12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"></path>157 </svg>158 <!-- cloud icon -->159 <svg width="42" height="42" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2" opacity="0.85">160 <path d="M6 16h9a4 4 0 0 0 0-8 5 5 0 0 0-9 3H5a3 3 0 0 0 1 5z"></path>161 </svg>162 <div class="status-dot" style="width:26px;height:26px;border-radius:6px;opacity:0.85;"></div>163 <div class="status-dot" style="opacity:0.85;"></div>164 </div>165 <div class="status-right">166 <!-- location pin -->167 <svg width="42" height="42" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2" opacity="0.9">168 <path d="M12 21s-6-7-6-11a6 6 0 1 1 12 0c0 4-6 11-6 11z"></path><circle cx="12" cy="10" r="2"></circle>169 </svg>170 <!-- gps circle -->171 <svg width="42" height="42" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2" opacity="0.9">172 <circle cx="12" cy="12" r="7"></circle><path d="M12 1v3M12 20v3M1 12h3M20 12h3"></path>173 </svg>174 <!-- wifi bar -->175 <svg width="42" height="42" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2" opacity="0.9">176 <path d="M2 9a14 14 0 0 1 20 0M5 12a10 10 0 0 1 14 0M8 15a6 6 0 0 1 8 0"></path><circle cx="12" cy="19" r="1.5" fill="#fff"></circle>177 </svg>178 <!-- battery -->179 <div class="battery"><div class="battery-fill"></div></div>180 </div>181 </div>182 183 <!-- Header -->184 <div class="header row">185 <div class="hamburger">186 <svg viewBox="0 0 24 24">187 <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>188 </svg>189 </div>190 <div class="brand">191 <div class="title">192 <svg width="50" height="50" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="1.6">193 <circle cx="12" cy="12" r="3"></circle>194 <path d="M12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"></path>195 </svg>196 <span>AccuWeather</span>197 </div>198 <div class="location">Orléans, FR199 <svg width="32" height="32" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2" style="vertical-align:middle; margin-left:8px;">200 <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>201 </svg>202 </div>203 </div>204 <button class="premium-btn">GET PREMIUM+</button>205 </div>206 <div class="header-divider divider"></div>207 208 <!-- MinuteCast Intro -->209 <div class="minute-intro">210 <div class="caps">Exclusive AccuWeather MinuteCast</div>211 <div class="headline">No precipitation for at least 60 min</div>212 </div>213 214 <div class="now-label">NOW</div>215 216 <!-- Ring -->217 <div class="ring-wrap">218 <div class="minute-ring"></div>219 <div class="ring-center">220 <div class="temp-icon">221 <!-- cloud + sun icon -->222 <svg viewBox="0 0 64 64">223 <circle cx="46" cy="18" r="6"></circle>224 <path d="M46 6v4M46 32v4M58 18h-4M38 18h-4M54 10l-3 3M54 26l-3-3M38 26l3-3M38 10l3 3"></path>225 <path d="M18 42h22a10 10 0 0 0 0-20 13 13 0 0 0-24 9h-2a7 7 0 0 0 4 11z"></path>226 </svg>227 </div>228 <div class="temp-value">63<span class="deg">°</span></div>229 <div class="fahren">F</div>230 <div class="realfeel">RealFeel 61°</div>231 <div class="cta shadow-soft">232 <span>See 4 Hours</span>233 <svg viewBox="0 0 24 24"><path d="M5 12h12M13 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>234 </div>235 </div>236 </div>237 238 <div class="update-note">Updated minute-by-minute as of 7:39 PM</div>239 <div class="pager"><span class="active"></span><span></span></div>240 241 <!-- Forecast cards -->242 <div class="cards">243 <div class="card">244 <h4>AFTERNOON</h4>245 <div class="icon">246 <!-- sun behind cloud -->247 <svg viewBox="0 0 64 64">248 <circle cx="46" cy="18" r="6"></circle>249 <path d="M46 6v4M46 32v4M58 18h-4M38 18h-4M54 10l-3 3M54 26l-3-3M38 26l3-3M38 10l3 3"></path>250 <path d="M18 42h22a10 10 0 0 0 0-20 13 13 0 0 0-24 9h-2a7 7 0 0 0 4 11z"></path>251 </svg>252 </div>253 <div class="temp">66°</div>254 <div class="rf">RealFeel 65°</div>255 </div>256 257 <div class="card">258 <h4>TONIGHT</h4>259 <div class="icon">260 <!-- crescent moon -->261 <svg viewBox="0 0 64 64">262 <path d="M44 48a18 18 0 1 1-8-34 14 14 0 1 0 8 34z"></path>263 </svg>264 </div>265 <div class="temp">41°</div>266 <div class="rf">RealFeel 42°</div>267 </div>268 269 <div class="card">270 <h4>SUN</h4>271 <div class="icon">272 <!-- sun -->273 <svg viewBox="0 0 64 64">274 <circle cx="32" cy="32" r="10"></circle>275 <path d="M32 8v8M32 48v8M8 32h8M48 32h8M14 14l6 6M44 44l6 6M14 50l6-6M44 20l6-6"></path>276 </svg>277 </div>278 <div class="temp">72°</div>279 <div class="rf">RealFeel 72°</div>280 </div>281 </div>282 283 <!-- Bottom navigation -->284 <div class="bottom-nav">285 <div class="nav-item active">286 <!-- calendar tile today -->287 <svg viewBox="0 0 24 24">288 <rect x="3" y="5" width="18" height="16" rx="2"></rect>289 <path d="M7 3v4M17 3v4M3 10h18"></path>290 <rect x="7" y="13" width="4" height="4" fill="none"></rect>291 <rect x="7" y="13" width="4" height="4" fill="#fff"></rect>292 </svg>293 <div>Today</div>294 </div>295 <div class="nav-item">296 <!-- clock -->297 <svg viewBox="0 0 24 24">298 <circle cx="12" cy="12" r="9"></circle>299 <path d="M12 7v6l4 2"></path>300 </svg>301 <div>Hourly</div>302 </div>303 <div class="nav-item">304 <!-- calendar -->305 <svg viewBox="0 0 24 24">306 <rect x="3" y="5" width="18" height="16" rx="2"></rect>307 <path d="M7 3v4M17 3v4M3 10h18"></path>308 </svg>309 <div>Daily</div>310 </div>311 <div class="nav-item">312 <!-- radar -->313 <svg viewBox="0 0 24 24">314 <circle cx="12" cy="12" r="9"></circle>315 <path d="M12 12l6-2M12 12l-4 5M12 3v9"></path>316 </svg>317 <div>Radar & Maps</div>318 </div>319 </div>320 321 <div class="home-indicator"></div>322</div>323</body>324</html>