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(180deg, #2f7cf6 0%, #2766e0 100%);15 color: #ffffff;16 }17 18 /* Status bar (notch area) */19 .status-bar {20 position: absolute;21 left: 0; top: 0;22 width: 1080px; height: 120px;23 background: #0e1320;24 }25 26 /* Header */27 .app-header {28 position: absolute;29 top: 120px; left: 0; right: 0;30 height: 190px;31 padding: 0 48px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 }36 .header-left {37 display: flex; align-items: center; gap: 28px;38 }39 .brand {40 display: flex; flex-direction: column; line-height: 1.1;41 }42 .brand .small {43 font-size: 34px; opacity: 0.95; font-weight: 700; display: flex; align-items: center; gap: 10px;44 }45 .brand .location {46 font-size: 46px; font-weight: 800;47 }48 .premium-btn {49 background: #ffffff;50 color: #ff6a2b;51 padding: 16px 28px;52 border-radius: 40px;53 font-weight: 800;54 font-size: 34px;55 white-space: nowrap;56 border: 2px solid rgba(0,0,0,0.05);57 }58 .divider {59 position: absolute; left: 0; right: 0; top: 310px; height: 2px; background: rgba(255,255,255,0.2);60 }61 62 /* Controls row */63 .controls {64 position: absolute;65 top: 330px; left: 0; right: 0;66 padding: 30px 48px 10px;67 display: flex;68 align-items: center;69 justify-content: space-between;70 }71 .month {72 font-size: 58px; font-weight: 700;73 }74 .toggle {75 display: flex; align-items: center; gap: 18px;76 }77 .segmented {78 display: flex; align-items: center;79 border: 3px solid rgba(255,255,255,0.6);80 border-radius: 48px;81 overflow: hidden;82 }83 .segmented .seg {84 padding: 18px 34px;85 font-size: 36px;86 font-weight: 800;87 letter-spacing: 1px;88 }89 .segmented .active {90 background: #ffffff; color: #1e5fe0;91 }92 .unit {93 font-size: 40px; opacity: 0.9; margin-left: 10px;94 }95 96 /* Days grid */97 .days {98 position: absolute;99 top: 440px; left: 0; right: 0;100 height: 1030px;101 padding: 0 24px 0 24px;102 display: grid;103 grid-template-columns: repeat(6, 1fr);104 gap: 0;105 }106 .day-col {107 display: flex; flex-direction: column;108 align-items: center;109 border-left: 1px solid rgba(255,255,255,0.18);110 position: relative;111 }112 .day-col:first-child { border-left: none; }113 .day-head {114 height: 120px;115 display: flex; align-items: center; justify-content: center; gap: 16px;116 font-size: 34px; font-weight: 700; opacity: 0.95;117 width: 100%;118 }119 .date-badge {120 width: 76px; height: 76px; border-radius: 50%;121 background: #ffffff; color: #1e5fe0;122 display: flex; align-items: center; justify-content: center;123 font-weight: 800; font-size: 34px;124 }125 .date-plain { font-size: 34px; opacity: 0.8; }126 .weather-icon {127 width: 76px; height: 76px; margin-top: 14px; margin-bottom: 12px;128 opacity: 0.95;129 }130 .temp-top { font-size: 44px; font-weight: 800; margin-bottom: 6px; }131 .bar-wrap {132 height: 720px; width: 120px;133 display: flex; align-items: flex-end; justify-content: center;134 }135 .temp-bar {136 width: 120px; border-radius: 60px;137 background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.45) 60%, rgba(255,255,255,0.25) 100%);138 }139 .temp-bottom { font-size: 34px; opacity: 0.75; margin-top: 10px; }140 .precip {141 position: absolute; bottom: 22px; left: 0; right: 0;142 display: flex; align-items: center; justify-content: center; gap: 10px;143 font-size: 32px; opacity: 0.9;144 }145 .precip svg { opacity: 0.9; }146 147 /* Bottom detail sheet */148 .detail-sheet {149 position: absolute;150 left: 0; right: 0; bottom: 220px;151 height: 430px;152 background: #2d3238;153 border-top-left-radius: 46px;154 border-top-right-radius: 46px;155 color: #e9eef4;156 box-shadow: 0 -8px 20px rgba(0,0,0,0.25);157 }158 .sheet-handle {159 width: 180px; height: 14px; border-radius: 8px;160 background: #6f767d; margin: 20px auto 0;161 }162 .sheet-title {163 text-align: center; font-size: 44px; font-weight: 800; margin-top: 28px;164 }165 .sheet-tabs {166 margin-top: 34px;167 display: flex; justify-content: space-around; align-items: center;168 font-size: 36px;169 }170 .tab {171 position: relative; padding: 12px 18px; color: #e9eef4;172 }173 .tab.active::after {174 content: ""; position: absolute; left: 0; right: 0; bottom: -8px;175 height: 6px; background: #ff7a2e; border-radius: 4px;176 }177 178 /* Bottom navigation */179 .bottom-nav {180 position: absolute; left: 0; right: 0; bottom: 70px;181 height: 180px;182 background: rgba(24,96,220,0.9);183 display: grid; grid-template-columns: repeat(4, 1fr);184 align-items: center; text-align: center;185 color: rgba(255,255,255,0.85);186 }187 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }188 .nav-item svg { width: 64px; height: 64px; }189 .nav-item span { font-size: 32px; }190 .nav-item.active span { color: #ffffff; font-weight: 800; }191 192 /* Home indicator area */193 .gesture-area {194 position: absolute; left: 0; bottom: 0; width: 1080px; height: 70px; background: #000000;195 }196 .home-indicator {197 position: absolute; left: 50%; transform: translateX(-50%);198 bottom: 18px; width: 320px; height: 10px; background: #e9e9e9; border-radius: 8px;199 }200</style>201</head>202<body>203<div id="render-target">204 <!-- Status bar -->205 <div class="status-bar"></div>206 207 <!-- Header -->208 <div class="app-header">209 <div class="header-left">210 <!-- Hamburger -->211 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">212 <rect x="3" y="6" width="18" height="2" fill="white"></rect>213 <rect x="3" y="11" width="18" height="2" fill="white"></rect>214 <rect x="3" y="16" width="18" height="2" fill="white"></rect>215 </svg>216 <div class="brand">217 <div class="small">218 <!-- small sun gear icon -->219 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">220 <circle cx="12" cy="12" r="4" stroke="white" stroke-width="2"></circle>221 <g stroke="white" stroke-width="2">222 <line x1="12" y1="1.5" x2="12" y2="4.5"></line>223 <line x1="12" y1="19.5" x2="12" y2="22.5"></line>224 <line x1="1.5" y1="12" x2="4.5" y2="12"></line>225 <line x1="19.5" y1="12" x2="22.5" y2="12"></line>226 <line x1="4.2" y1="4.2" x2="6.4" y2="6.4"></line>227 <line x1="17.6" y1="17.6" x2="19.8" y2="19.8"></line>228 <line x1="17.6" y1="6.4" x2="19.8" y2="4.2"></line>229 <line x1="4.2" y1="19.8" x2="6.4" y2="17.6"></line>230 </g>231 </svg>232 AccuWeather233 </div>234 <div class="location">235 Orléans, FR236 <svg width="22" height="22" viewBox="0 0 24 24" style="vertical-align: middle;">237 <path fill="white" d="M7 10l5 5 5-5H7z"></path>238 </svg>239 </div>240 </div>241 </div>242 <div class="premium-btn">GET PREMIUM+</div>243 </div>244 <div class="divider"></div>245 246 <!-- Controls -->247 <div class="controls">248 <div class="month">September</div>249 <div class="toggle">250 <div class="segmented">251 <div class="seg active">BY DAY</div>252 <div class="seg" style="color:#ffffff;">45 DAYS</div>253 </div>254 <div class="unit">°F</div>255 </div>256 </div>257 258 <!-- Days grid -->259 <div class="days">260 <!-- Day 1 -->261 <div class="day-col">262 <div class="day-head">263 <div>S</div>264 <div class="date-badge">23</div>265 </div>266 <!-- icon: sun behind small cloud -->267 <svg class="weather-icon" viewBox="0 0 48 48">268 <circle cx="20" cy="20" r="9" stroke="white" stroke-width="3" fill="none"></circle>269 <path d="M30 28c-4 0-6 2-6 5h16c0-4-3-5-5-5h-5z" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"></path>270 </svg>271 <div class="temp-top">64°</div>272 <div class="bar-wrap">273 <div class="temp-bar" style="height: 520px;"></div>274 </div>275 <div class="temp-bottom">41°</div>276 <div class="precip">277 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">278 <path d="M12 3l4 6a5 5 0 11-8 0l4-6z" stroke="white" stroke-width="2" fill="none"></path>279 </svg>280 <span>25%</span>281 </div>282 </div>283 284 <!-- Day 2 -->285 <div class="day-col">286 <div class="day-head">287 <div>S</div>288 <div class="date-plain">24</div>289 </div>290 <!-- sun icon -->291 <svg class="weather-icon" viewBox="0 0 48 48">292 <circle cx="24" cy="24" r="9" stroke="white" stroke-width="3" fill="none"></circle>293 <g stroke="white" stroke-width="3">294 <line x1="24" y1="6" x2="24" y2="12"></line>295 <line x1="24" y1="36" x2="24" y2="42"></line>296 <line x1="6" y1="24" x2="12" y2="24"></line>297 <line x1="36" y1="24" x2="42" y2="24"></line>298 </g>299 </svg>300 <div class="temp-top">72°</div>301 <div class="bar-wrap">302 <div class="temp-bar" style="height: 600px;"></div>303 </div>304 <div class="temp-bottom">44°</div>305 <div class="precip">306 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">307 <path d="M12 3l4 6a5 5 0 11-8 0l4-6z" stroke="white" stroke-width="2" fill="none"></path>308 </svg>309 <span>0%</span>310 </div>311 </div>312 313 <!-- Day 3 -->314 <div class="day-col">315 <div class="day-head">316 <div>M</div>317 <div class="date-plain">25</div>318 </div>319 <!-- sun icon -->320 <svg class="weather-icon" viewBox="0 0 48 48">321 <circle cx="24" cy="24" r="9" stroke="white" stroke-width="3" fill="none"></circle>322 <g stroke="white" stroke-width="3">323 <line x1="24" y1="6" x2="24" y2="12"></line>324 <line x1="24" y1="36" x2="24" y2="42"></line>325 <line x1="6" y1="24" x2="12" y2="24"></line>326 <line x1="36" y1="24" x2="42" y2="24"></line>327 </g>328 </svg>329 <div class="temp-top">77°</div>330 <div class="bar-wrap">331 <div class="temp-bar" style="height: 680px;"></div>332 </div>333 <div class="temp-bottom">49°</div>334 <div class="precip">335 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">336 <path d="M12 3l4 6a5 5 0 11-8 0l4-6z" stroke="white" stroke-width="2" fill="none"></path>337 </svg>338 <span>1%</span>339 </div>340 </div>341 342 <!-- Day 4 -->343 <div class="day-col">344 <div class="day-head">345 <div>T</div>346 <div class="date-plain">26</div>347 </div>348 <!-- sun + cloud -->349 <svg class="weather-icon" viewBox="0 0 48 48">350 <circle cx="20" cy="20" r="9" stroke="white" stroke-width="3" fill="none"></circle>351 <path d="M30 28c-4 0-6 2-6 5h16c0-4-3-5-5-5h-5z" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"></path>352 </svg>353 <div class="temp-top">78°</div>354 <div class="bar-wrap">355 <div class="temp-bar" style="height: 700px;"></div>356 </div>357 <div class="temp-bottom">54°</div>358 <div class="precip">359 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">360 <path d="M12 3l4 6a5 5 0 11-8 0l4-6z" stroke="white" stroke-width="2" fill="none"></path>361 </svg>362 <span>1%</span>363 </div>364 </div>365 366 <!-- Day 5 -->367 <div class="day-col">368 <div class="day-head">369 <div>W</div>370 <div class="date-plain">27</div>371 </div>372 <!-- cloud -->373 <svg class="weather-icon" viewBox="0 0 48 48">374 <path d="M16 28c0-4 3-8 8-8 4 0 7 2 8 6 3 0 6 2 6 6 0 3-2 6-6 6H20a6 6 0 01-4-10z" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>375 </svg>376 <div class="temp-top">74°</div>377 <div class="bar-wrap">378 <div class="temp-bar" style="height: 580px;"></div>379 </div>380 <div class="temp-bottom">56°</div>381 <div class="precip">382 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">383 <path d="M12 3l4 6a5 5 0 11-8 0l4-6z" stroke="white" stroke-width="2" fill="none"></path>384 </svg>385 <span>18%</span>386 </div>387 </div>388 389 <!-- Day 6 -->390 <div class="day-col">391 <div class="day-head">392 <div>T</div>393 <div class="date-plain">28</div>394 </div>395 <!-- cloud -->396 <svg class="weather-icon" viewBox="0 0 48 48">397 <path d="M16 28c0-4 3-8 8-8 4 0 7 2 8 6 3 0 6 2 6 6 0 3-2 6-6 6H20a6 6 0 01-4-10z" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>398 </svg>399 <div class="temp-top">76°</div>400 <div class="bar-wrap">401 <div class="temp-bar" style="height: 620px;"></div>402 </div>403 <div class="temp-bottom">55°</div>404 <div class="precip">405 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">406 <path d="M12 3l4 6a5 5 0 11-8 0l4-6z" stroke="white" stroke-width="2" fill="none"></path>407 </svg>408 <span>9%</span>409 </div>410 </div>411 </div>412 413 <!-- Bottom detail sheet -->414 <div class="detail-sheet">415 <div class="sheet-handle"></div>416 <div class="sheet-title">Saturday, September 23</div>417 <div class="sheet-tabs">418 <div class="tab">Day</div>419 <div class="tab">Night</div>420 <div class="tab active">History</div>421 </div>422 </div>423 424 <!-- Bottom navigation -->425 <div class="bottom-nav">426 <div class="nav-item">427 <!-- calendar outline -->428 <svg viewBox="0 0 24 24" fill="none">429 <rect x="3" y="5" width="18" height="16" rx="2" stroke="white" stroke-width="2" fill="none"></rect>430 <line x1="3" y1="9" x2="21" y2="9" stroke="white" stroke-width="2"></line>431 <line x1="8" y1="3" x2="8" y2="7" stroke="white" stroke-width="2"></line>432 <line x1="16" y1="3" x2="16" y2="7" stroke="white" stroke-width="2"></line>433 </svg>434 <span>Today</span>435 </div>436 <div class="nav-item">437 <!-- clock -->438 <svg viewBox="0 0 24 24" fill="none">439 <circle cx="12" cy="12" r="9" stroke="white" stroke-width="2"></circle>440 <line x1="12" y1="7" x2="12" y2="12" stroke="white" stroke-width="2"></line>441 <line x1="12" y1="12" x2="16" y2="14" stroke="white" stroke-width="2"></line>442 </svg>443 <span>Hourly</span>444 </div>445 <div class="nav-item active">446 <!-- calendar filled style -->447 <svg viewBox="0 0 24 24" fill="white">448 <path d="M7 2h2v3H7V2zm8 0h2v3h-2V2z"></path>449 <rect x="3" y="5" width="18" height="16" rx="2" fill="white" opacity="0.9"></rect>450 <rect x="5" y="11" width="3" height="3" fill="#2766e0"></rect>451 <rect x="10" y="11" width="3" height="3" fill="#2766e0"></rect>452 </svg>453 <span>Daily</span>454 </div>455 <div class="nav-item">456 <!-- radar target -->457 <svg viewBox="0 0 24 24" fill="none">458 <circle cx="12" cy="12" r="8" stroke="white" stroke-width="2"></circle>459 <circle cx="12" cy="12" r="4" stroke="white" stroke-width="2"></circle>460 <line x1="12" y1="12" x2="20" y2="12" stroke="white" stroke-width="2"></line>461 </svg>462 <span>Radar & Maps</span>463 </div>464 </div>465 466 <!-- Gesture area -->467 <div class="gesture-area">468 <div class="home-indicator"></div>469 </div>470</div>471</body>472</html>