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, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(#1e4d93, #4b7fcd 480px, #4b7fcd);15 color: #fff;16 }17 18 /* Top system status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 90px;25 padding: 0 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #eaf2ff;30 font-size: 34px;31 opacity: 0.95;32 }33 .status-right {34 display: flex;35 align-items: center;36 gap: 28px;37 }38 .icon {39 display: inline-flex;40 align-items: center;41 justify-content: center;42 }43 .icon svg { width: 40px; height: 40px; fill: none; stroke: #ffffff; stroke-width: 3; }44 45 /* App header */46 .app-bar {47 position: absolute;48 top: 90px;49 left: 0;50 width: 1080px;51 height: 280px;52 padding: 0 36px;53 display: flex;54 align-items: center;55 gap: 28px;56 }57 .menu-btn { width: 72px; height: 72px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }58 .header-content {59 flex: 1;60 }61 .brand-row {62 display: flex;63 align-items: center;64 gap: 12px;65 font-weight: 600;66 letter-spacing: 0.3px;67 font-size: 34px;68 opacity: 0.95;69 }70 .location-row {71 margin-top: 10px;72 display: inline-flex;73 align-items: center;74 gap: 12px;75 font-size: 56px;76 font-weight: 700;77 }78 .premium-btn {79 background: #ffffff;80 color: #f05b3c;81 border-radius: 40px;82 padding: 18px 26px;83 font-weight: 800;84 font-size: 30px;85 box-shadow: 0 6px 12px rgba(0,0,0,0.1);86 }87 88 /* Section label */89 .section-label {90 position: absolute;91 left: 40px;92 top: 380px;93 font-size: 30px;94 letter-spacing: 2px;95 text-transform: uppercase;96 color: rgba(255,255,255,0.7);97 }98 99 /* Cards */100 .card {101 position: absolute;102 left: 36px;103 width: 1008px;104 background: rgba(115, 160, 226, 0.55);105 border-radius: 28px;106 padding: 36px;107 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);108 backdrop-filter: blur(0.3px);109 }110 .conditions-card { top: 430px; }111 .row {112 display: flex;113 align-items: center;114 justify-content: space-between;115 padding: 26px 6px;116 font-size: 44px;117 }118 .row + .row { border-top: 1px solid rgba(255,255,255,0.25); }119 .value { font-weight: 700; }120 .see-more {121 margin-top: 30px;122 background: rgba(255,255,255,0.15);123 border-radius: 26px;124 height: 130px;125 display: flex;126 align-items: center;127 justify-content: center;128 font-size: 40px;129 font-weight: 600;130 }131 .see-more .arrow svg { width: 40px; height: 40px; stroke: #fff; stroke-width: 3; margin-left: 12px; }132 133 /* Sun & Moon */134 .sunmoon-label { top: 1290px; }135 .sunmoon-card { top: 1340px; }136 .sunmoon-inner {137 display: grid;138 grid-template-columns: 1fr 1fr;139 gap: 0;140 }141 .column {142 padding: 24px 24px;143 }144 .column + .column { border-left: 1px solid rgba(255,255,255,0.25); }145 .sm-header {146 display: flex;147 align-items: center;148 justify-content: space-between;149 padding-bottom: 18px;150 font-size: 34px;151 opacity: 0.95;152 }153 .sm-icon svg { width: 64px; height: 64px; stroke: #fff; stroke-width: 3; }154 .duration { font-size: 32px; color: rgba(255,255,255,0.85); }155 .sm-row {156 margin-top: 22px;157 padding: 20px 0;158 border-top: 1px solid rgba(255,255,255,0.25);159 display: flex;160 align-items: center;161 justify-content: space-between;162 font-size: 40px;163 }164 .sm-row .time { font-weight: 800; }165 166 /* Radar & Maps heading */167 .radar-title {168 position: absolute;169 left: 36px;170 top: 1970px;171 font-size: 64px;172 font-weight: 800;173 }174 .radar-sub {175 position: absolute;176 left: 36px;177 top: 2040px;178 font-size: 30px;179 letter-spacing: 1px;180 color: rgba(255,255,255,0.8);181 }182 183 /* Bottom navigation */184 .bottom-nav {185 position: absolute;186 left: 0;187 bottom: 120px;188 width: 1080px;189 height: 180px;190 background: rgba(30, 77, 147, 0.65);191 backdrop-filter: blur(2px);192 box-shadow: 0 -4px 10px rgba(0,0,0,0.15);193 display: flex;194 align-items: center;195 justify-content: space-around;196 color: #eaf2ff;197 }198 .nav-item {199 width: 220px;200 height: 140px;201 display: flex;202 flex-direction: column;203 align-items: center;204 justify-content: center;205 gap: 10px;206 font-size: 30px;207 }208 .nav-item .ni-icon svg { width: 56px; height: 56px; stroke: #fff; stroke-width: 3; }209 .nav-item.active {210 color: #ffffff;211 font-weight: 700;212 }213 214 /* Gesture bar */215 .gesture {216 position: absolute;217 left: 50%;218 transform: translateX(-50%);219 bottom: 36px;220 width: 260px;221 height: 12px;222 background: #ffffff;223 border-radius: 12px;224 opacity: 0.9;225 }226</style>227</head>228<body>229<div id="render-target">230 231 <!-- Status bar -->232 <div class="status-bar">233 <div class="status-left">10:43</div>234 <div class="status-right">235 <span class="icon" title="info">236 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><line x1="12" y1="8" x2="12" y2="8"></line><line x1="12" y1="11" x2="12" y2="16"></line></svg>237 </span>238 <span class="icon" title="upload">239 <svg viewBox="0 0 24 24"><path d="M12 4v10"></path><path d="M8 8l4-4 4 4"></path><path d="M5 20h14"></path></svg>240 </span>241 <span class="icon" title="youtube">242 <svg viewBox="0 0 24 24"><rect x="4" y="7" width="16" height="10" rx="3"></rect><path d="M10 10l6 2-6 2z"></path></svg>243 </span>244 <span class="icon" title="globe">245 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18"></path><path d="M12 3a18 18 0 0 1 0 18"></path></svg>246 </span>247 <span class="icon" title="dot">248 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff" stroke="none"></circle></svg>249 </span>250 <span class="icon" title="wifi">251 <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0"></path><path d="M5 12c3-3 11-3 14 0"></path><path d="M8 16c2-2 6-2 8 0"></path><circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"></circle></svg>252 </span>253 <span class="icon" title="signal">254 <svg viewBox="0 0 24 24"><rect x="4" y="14" width="3" height="6"></rect><rect x="9" y="12" width="3" height="8"></rect><rect x="14" y="9" width="3" height="11"></rect></svg>255 </span>256 <span class="icon" title="battery">257 <svg viewBox="0 0 28 24"><rect x="3" y="6" width="20" height="12" rx="2" ry="2"></rect><rect x="23" y="9" width="3" height="6"></rect><rect x="5" y="8" width="14" height="8" fill="#fff" stroke="none"></rect></svg>258 </span>259 </div>260 </div>261 262 <!-- App bar -->263 <div class="app-bar">264 <div class="menu-btn">265 <svg viewBox="0 0 24 24"><path d="M3 6h18"></path><path d="M3 12h18"></path><path d="M3 18h18"></path></svg>266 </div>267 <div class="header-content">268 <div class="brand-row">269 <span class="icon" style="margin-right:4px">270 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v4"></path><path d="M12 18v4"></path><path d="M2 12h4"></path><path d="M18 12h4"></path><path d="M5 5l3 3"></path><path d="M16 16l3 3"></path><path d="M19 5l-3 3"></path><path d="M5 19l3-3"></path></svg>271 </span>272 <span>AccuWeather</span>273 </div>274 <div class="location-row">275 <span>Ystradgynlais, GB</span>276 <span class="icon">277 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>278 </span>279 </div>280 </div>281 <div class="premium-btn">GET PREMIUM+</div>282 </div>283 284 <!-- Current Conditions -->285 <div class="section-label">CURRENT CONDITIONS</div>286 <div class="card conditions-card">287 <div class="row"><div>Temperature</div><div class="value">60°</div></div>288 <div class="row"><div>RealFeel<sup>®</sup></div><div class="value">54°</div></div>289 <div class="row"><div>RealFeel<sup>®</sup> Shade</div><div class="value">54°</div></div>290 <div class="row"><div>Wind</div><div class="value">WSW 19 mph</div></div>291 <div class="row"><div>Max Wind Gusts</div><div class="value">32 mph</div></div>292 <div class="row"><div>Humidity</div><div class="value">79%</div></div>293 <div class="row"><div>Indoor Humidity</div><div class="value">60% (Ideal Humidity)</div></div>294 <div class="see-more">See More295 <span class="arrow icon">296 <svg viewBox="0 0 24 24"><path d="M5 12h12"></path><path d="M12 5l7 7-7 7"></path></svg>297 </span>298 </div>299 </div>300 301 <!-- Sun & Moon -->302 <div class="section-label sunmoon-label">SUN & MOON</div>303 <div class="card sunmoon-card">304 <div class="sunmoon-inner">305 <div class="column">306 <div class="sm-header">307 <span class="sm-icon icon">308 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v3"></path><path d="M12 19v3"></path><path d="M2 12h3"></path><path d="M19 12h3"></path><path d="M5 5l2 2"></path><path d="M17 17l2 2"></path><path d="M5 19l2-2"></path><path d="M17 7l2-2"></path></svg>309 </span>310 <span class="duration">11 hrs 58 mins</span>311 </div>312 <div class="sm-row"><span>Rise</span><span class="time">7:07 AM</span></div>313 <div class="sm-row"><span>Set</span><span class="time">7:05 PM</span></div>314 </div>315 <div class="column">316 <div class="sm-header">317 <span class="sm-icon icon">318 <svg viewBox="0 0 24 24"><path d="M16 12a6 6 0 1 1-8-8 8 8 0 1 0 8 8z"></path></svg>319 </span>320 <span class="duration">9 hrs 29 mins</span>321 </div>322 <div class="sm-row"><span>Rise</span><span class="time">6:25 PM</span></div>323 <div class="sm-row"><span>Set</span><span class="time">3:54 AM</span></div>324 </div>325 </div>326 </div>327 328 <!-- Radar & Maps heading -->329 <div class="radar-title">Radar & Maps</div>330 <div class="radar-sub">TRACK WEATHER AND ITS IMPACTS</div>331 332 <!-- Bottom Navigation -->333 <div class="bottom-nav">334 <div class="nav-item active">335 <div class="ni-icon icon">336 <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2"></rect><path d="M8 4v4"></path><path d="M16 4v4"></path><path d="M7 11h10"></path></svg>337 </div>338 <div>Today</div>339 </div>340 <div class="nav-item">341 <div class="ni-icon icon">342 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 12l4 2"></path><path d="M12 6v6"></path></svg>343 </div>344 <div>Hourly</div>345 </div>346 <div class="nav-item">347 <div class="ni-icon icon">348 <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2"></rect><path d="M5 9h14"></path><path d="M8 13h4"></path></svg>349 </div>350 <div>Daily</div>351 </div>352 <div class="nav-item">353 <div class="ni-icon icon">354 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 4a8 8 0 0 1 0 16"></path><path d="M12 12l6 2"></path></svg>355 </div>356 <div>Radar & Maps</div>357 </div>358 </div>359 360 <!-- Gesture bar -->361 <div class="gesture"></div>362 363</div>364</body>365</html>