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: "Roboto", "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(#4e7fd6 0 360px, #1f262a 360px 2400px);15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 20px;22 left: 32px;23 right: 32px;24 height: 80px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #eaf2ff;29 opacity: 0.95;30 font-size: 34px;31 letter-spacing: 0.5px;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .status-dot {39 width: 10px; height: 10px; border-radius: 50%; background: #eaf2ff; opacity: 0.8;40 }41 .status-icon {42 width: 28px; height: 28px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.9);43 }44 45 /* Header */46 .header {47 position: absolute;48 top: 110px;49 left: 24px;50 right: 24px;51 height: 230px;52 }53 .header-row {54 display: flex;55 align-items: center;56 justify-content: space-between;57 color: rgba(255,255,255,0.95);58 }59 .menu-btn {60 width: 62px; height: 62px; display: flex; align-items: center; justify-content: center;61 }62 .menu-btn svg { width: 42px; height: 42px; }63 .brand {64 margin-top: 8px;65 font-size: 32px;66 color: rgba(255,255,255,0.6);67 display: flex; align-items: center; gap: 12px;68 }69 .location {70 margin-top: 10px;71 font-weight: 700;72 font-size: 60px;73 letter-spacing: 0.4px;74 color: #eaf2ff;75 display: inline-flex; align-items: center; gap: 14px;76 }77 .caret {78 width: 16px; height: 16px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #eaf2ff; transform: translateY(6px);79 }80 .premium {81 background: rgba(255,255,255,0.18);82 color: #ffe9cc;83 border: 2px solid rgba(255,255,255,0.35);84 padding: 16px 28px;85 border-radius: 999px;86 font-weight: 700;87 font-size: 34px;88 }89 90 /* Card */91 .card {92 position: absolute;93 top: 320px;94 left: 0;95 right: 0;96 bottom: 0;97 background: #262c30;98 border-radius: 40px 40px 0 0;99 padding-bottom: 140px;100 color: #f1f1f1;101 }102 .gesture-notch {103 width: 180px; height: 16px; border-radius: 10px; background: #6b7176; opacity: 0.7;104 position: absolute; top: 22px; left: 50%; transform: translateX(-50%);105 }106 .card-inner {107 padding: 72px 48px 40px;108 }109 .card-header {110 text-align: center;111 margin-top: 10px;112 }113 .card-header h1 {114 margin: 0;115 font-size: 48px;116 font-weight: 700;117 color: #f7f7f7;118 }119 .unit {120 position: absolute; right: 40px; top: 74px; font-size: 32px; color: rgba(255,255,255,0.7);121 }122 123 .tabs {124 margin-top: 34px;125 display: flex; justify-content: center; gap: 90px;126 color: rgba(255,255,255,0.85);127 }128 .tab {129 font-size: 36px;130 padding-bottom: 14px;131 position: relative;132 }133 .tab.active::after {134 content: "";135 position: absolute;136 left: 0; right: 0; bottom: 0;137 height: 6px; border-radius: 6px;138 background: #ff7f32;139 }140 141 .temp-row {142 margin-top: 60px;143 text-align: center;144 }145 .weather-icon {146 width: 200px; height: 120px; margin: 0 auto 12px;147 }148 .temp-value {149 font-size: 160px; font-weight: 800; letter-spacing: -2px;150 }151 .temp-hi {152 font-size: 46px; color: rgba(255,255,255,0.6); margin-left: 12px;153 }154 155 .precip {156 display: flex; align-items: center; justify-content: center; gap: 14px;157 margin-top: 24px; color: #cfe4ff; font-size: 34px;158 }159 .summary {160 margin-top: 24px; text-align: center; font-size: 44px; color: #ffffff;161 }162 163 /* Stats list */164 .stats {165 margin-top: 36px;166 border-top: 1px solid rgba(255,255,255,0.1);167 }168 .stat-row {169 display: flex; justify-content: space-between; align-items: center;170 padding: 34px 0;171 border-bottom: 1px solid rgba(255,255,255,0.1);172 color: #e8edf1;173 }174 .stat-row .label {175 font-size: 36px; color: rgba(255,255,255,0.9);176 }177 .stat-row .value {178 font-size: 38px; font-weight: 700;179 }180 181 /* Sun/Moon section */182 .astro {183 margin-top: 18px;184 display: grid;185 grid-template-columns: 1fr 1fr;186 gap: 24px;187 border-top: 1px solid rgba(255,255,255,0.08);188 padding-top: 24px;189 }190 .astro-col {191 padding: 24px 14px;192 border-right: 1px solid rgba(255,255,255,0.08);193 }194 .astro-col:last-child { border-right: none; }195 .astro-header {196 display: flex; align-items: center; gap: 18px; color: #fff;197 }198 .astro-duration {199 margin-left: auto; text-align: right; color: rgba(255,255,255,0.7); font-size: 30px; line-height: 1.2;200 }201 .astro-rows {202 margin-top: 24px;203 }204 .astro-row {205 display: flex; justify-content: space-between; padding: 18px 0;206 border-bottom: 1px solid rgba(255,255,255,0.08);207 }208 .astro-row:last-child { border-bottom: none; }209 .astro-row .label { color: rgba(255,255,255,0.85); font-size: 34px; }210 .astro-row .time { font-size: 54px; font-weight: 800; color: #ffffff; }211 212 /* Small helpers */213 .muted { color: rgba(255,255,255,0.6); }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status bar -->220 <div class="status-bar">221 <div>10:03</div>222 <div class="status-icons">223 <div class="status-icon"></div>224 <div class="status-icon"></div>225 <div class="status-icon"></div>226 <div class="status-dot"></div>227 <div class="status-icon" style="width: 30px;"></div>228 <div class="status-icon" style="width: 28px;"></div>229 </div>230 </div>231 232 <!-- Header -->233 <div class="header">234 <div class="header-row">235 <div class="menu-btn">236 <svg viewBox="0 0 24 24" fill="none">237 <path d="M3 6h18M3 12h18M3 18h12" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round"/>238 </svg>239 </div>240 <div class="premium">GET PREMIUM+</div>241 </div>242 <div class="brand">AccuWeather</div>243 <div class="location">Welsh Harp, GB <span class="caret"></span></div>244 </div>245 246 <!-- Card -->247 <div class="card">248 <div class="gesture-notch"></div>249 <div class="card-inner">250 <div class="unit">°F</div>251 252 <div class="card-header">253 <h1>Saturday, September 23</h1>254 </div>255 256 <div class="tabs">257 <div class="tab active">Day</div>258 <div class="tab">Night</div>259 <div class="tab">History</div>260 </div>261 262 <div class="temp-row">263 <svg class="weather-icon" viewBox="0 0 180 120">264 <!-- Sun -->265 <circle cx="60" cy="50" r="22" fill="none" stroke="#ff8f3a" stroke-width="6"/>266 <!-- Rays -->267 <line x1="60" y1="16" x2="60" y2="4" stroke="#ff8f3a" stroke-width="6" stroke-linecap="round"/>268 <line x1="60" y1="96" x2="60" y2="108" stroke="#ff8f3a" stroke-width="6" stroke-linecap="round"/>269 <line x1="26" y1="50" x2="14" y2="50" stroke="#ff8f3a" stroke-width="6" stroke-linecap="round"/>270 <line x1="94" y1="50" x2="106" y2="50" stroke="#ff8f3a" stroke-width="6" stroke-linecap="round"/>271 <line x1="40" y1="30" x2="32" y2="22" stroke="#ff8f3a" stroke-width="6" stroke-linecap="round"/>272 <line x1="80" y1="30" x2="88" y2="22" stroke="#ff8f3a" stroke-width="6" stroke-linecap="round"/>273 <line x1="40" y1="70" x2="32" y2="78" stroke="#ff8f3a" stroke-width="6" stroke-linecap="round"/>274 <line x1="80" y1="70" x2="88" y2="78" stroke="#ff8f3a" stroke-width="6" stroke-linecap="round"/>275 <!-- Cloud -->276 <path d="M110 72c0-14-10-22-22-22-9 0-16 6-18 14-12-2-22 8-22 20 0 11 8 20 18 20h64c10 0 18-9 18-20s-8-20-18-20h-20z"277 fill="none" stroke="#cfd5db" stroke-width="6" stroke-linejoin="round"/>278 </svg>279 280 <div>281 <span class="temp-value">65°</span>282 <span class="temp-hi">Hi</span>283 </div>284 285 <div class="precip">286 <svg viewBox="0 0 24 24" width="28" height="28">287 <path d="M12 3c3 6 6 8 6 12a6 6 0 1 1-12 0c0-4 3-6 6-12z" fill="none" stroke="#cfe4ff" stroke-width="2.2"/>288 </svg>289 <span>Precipitation: 2%</span>290 </div>291 292 <div class="summary">Partial sunshine</div>293 </div>294 295 <div class="stats">296 <div class="stat-row"><div class="label">RealFeel High</div><div class="value">66°</div></div>297 <div class="stat-row"><div class="label">RealFeel Shade High</div><div class="value">62°</div></div>298 <div class="stat-row"><div class="label">Max UV Index</div><div class="value">3 (Moderate)</div></div>299 <div class="stat-row"><div class="label">Average Wind</div><div class="value">W 9 mph</div></div>300 <div class="stat-row"><div class="label">Max Wind Gusts</div><div class="value">20 mph</div></div>301 <div class="stat-row"><div class="label">Rain Probability</div><div class="value">2%</div></div>302 <div class="stat-row"><div class="label">Average Cloud Cover</div><div class="value">40%</div></div>303 </div>304 305 <div class="astro">306 <div class="astro-col">307 <div class="astro-header">308 <svg viewBox="0 0 32 32" width="36" height="36">309 <circle cx="16" cy="16" r="8" fill="none" stroke="#ff8f3a" stroke-width="3"/>310 <line x1="16" y1="2" x2="16" y2="8" stroke="#ff8f3a" stroke-width="3" stroke-linecap="round"/>311 <line x1="16" y1="24" x2="16" y2="30" stroke="#ff8f3a" stroke-width="3" stroke-linecap="round"/>312 <line x1="2" y1="16" x2="8" y2="16" stroke="#ff8f3a" stroke-width="3" stroke-linecap="round"/>313 <line x1="24" y1="16" x2="30" y2="16" stroke="#ff8f3a" stroke-width="3" stroke-linecap="round"/>314 </svg>315 <div style="font-size: 36px; font-weight: 700;">Daylight</div>316 <div class="astro-duration">317 <div>12 hrs</div>318 <div>10 mins</div>319 </div>320 </div>321 <div class="astro-rows">322 <div class="astro-row"><div class="label">Rise</div><div class="time">6:48 AM</div></div>323 <div class="astro-row"><div class="label">Set</div><div class="time">6:58 PM</div></div>324 </div>325 </div>326 327 <div class="astro-col">328 <div class="astro-header">329 <svg viewBox="0 0 32 32" width="36" height="36">330 <path d="M22 4c-7 2-10 9-8 16 1 5 5 8 10 8-5 2-11-1-14-6-4-7 0-16 12-18z" fill="none" stroke="#cfd5db" stroke-width="3"/>331 </svg>332 <div style="font-size: 36px; font-weight: 700;">Moon</div>333 <div class="astro-duration">334 <div>6 hrs</div>335 <div>39 mins</div>336 </div>337 </div>338 <div class="astro-rows">339 <div class="astro-row"><div class="label">Rise</div><div class="time">4:32 PM</div></div>340 <div class="astro-row"><div class="label">Set</div><div class="time">11:11 PM</div></div>341 </div>342 </div>343 </div>344 345 </div>346 </div>347 348</div>349</body>350</html>