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 App Drawer UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #123e56;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;16 color: #ffffff;17 }18 19 /* Top system/status area */20 .system-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 120px;26 background: #103a51;27 display: flex;28 align-items: center;29 padding: 0 32px;30 box-sizing: border-box;31 z-index: 1;32 }33 .sys-left { font-weight: 600; font-size: 42px; }34 .sys-center {35 margin: 0 auto;36 display: flex;37 align-items: center;38 gap: 24px;39 opacity: 0.95;40 font-size: 38px;41 }42 .dot { width: 16px; height: 16px; border-radius: 50%; background: #ffffff; display: inline-block; opacity: 0.9; }43 .sys-right {44 display: flex;45 align-items: center;46 gap: 22px;47 }48 .sys-icon { width: 44px; height: 44px; }49 50 /* Simulated underlying app content */51 .app-content {52 position: absolute;53 top: 120px;54 left: 0;55 right: 0;56 bottom: 0;57 background: #e9eef2;58 }59 .content-placeholder {60 position: absolute;61 right: 24px;62 top: 220px;63 width: 640px;64 height: 800px;65 background: #E0E0E0;66 border: 1px solid #BDBDBD;67 color: #757575;68 display: flex;69 align-items: center;70 justify-content: center;71 font-size: 36px;72 }73 .scrim {74 position: absolute;75 top: 0; left: 760px;76 width: 320px; height: 100%;77 background: rgba(0,0,0,0.4);78 z-index: 3;79 }80 81 /* Drawer */82 .drawer {83 position: absolute;84 top: 0;85 left: 0;86 width: 760px;87 height: 100%;88 background: #2b5f7c;89 box-shadow: 10px 0 26px rgba(0,0,0,0.45);90 z-index: 4;91 }92 /* subtle topo-like overlay */93 .drawer::before {94 content: "";95 position: absolute;96 inset: 0;97 background:98 radial-gradient(800px 520px at 40% 20%, rgba(255,255,255,0.04) 1px, transparent 2px) repeat,99 radial-gradient(640px 420px at 70% 70%, rgba(255,255,255,0.03) 1px, transparent 2px) repeat;100 opacity: 0.35;101 pointer-events: none;102 }103 .drawer-header {104 position: relative;105 background: #cfcfcf;106 height: 320px;107 padding: 140px 40px 30px 40px; /* leave space under status bar */108 box-sizing: border-box;109 color: #2b3b45;110 }111 .hdr-row {112 display: flex;113 align-items: center;114 gap: 18px;115 }116 .hdr-title {117 font-size: 46px;118 font-weight: 600;119 }120 .hdr-sub {121 margin-top: 16px;122 font-size: 50px;123 color: #4b4b4b;124 }125 .separator {126 height: 6px;127 background: #d6a743;128 width: 100%;129 }130 .drawer-body {131 position: relative;132 padding: 24px 0 140px;133 }134 .menu {135 list-style: none;136 margin: 0;137 padding: 0;138 }139 .menu-item {140 position: relative;141 display: flex;142 align-items: center;143 gap: 28px;144 padding: 28px 40px;145 height: 112px;146 box-sizing: border-box;147 color: #eaf6ff;148 font-size: 44px;149 }150 .menu-item .icon-wrap {151 width: 78px;152 height: 78px;153 display: flex;154 align-items: center;155 justify-content: center;156 }157 .menu-item svg { width: 78px; height: 78px; }158 .menu-item .label { flex: 1; }159 .badge-new {160 font-size: 30px;161 background: #e45555;162 color: #fff;163 padding: 8px 18px;164 border-radius: 999px;165 margin-left: 16px;166 }167 .section-divider { margin: 12px 0; height: 6px; background: #d6a743; }168 169 /* Special coloring for star icon row */170 .star svg path { fill: #f5c144; stroke: #f5c144; }171 172 /* Bottom website row styling */173 .footer-link {174 position: absolute;175 bottom: 48px;176 left: 0;177 width: 100%;178 padding: 24px 40px;179 box-sizing: border-box;180 display: flex;181 align-items: center;182 gap: 28px;183 color: #eaf6ff;184 font-size: 42px;185 }186 187 /* Home indicator */188 .home-indicator {189 position: absolute;190 bottom: 30px;191 left: 50%;192 transform: translateX(-50%);193 width: 240px;194 height: 10px;195 background: #ffffff;196 border-radius: 10px;197 opacity: 0.9;198 z-index: 5;199 }200</style>201</head>202<body>203<div id="render-target">204 <!-- Status / system bar -->205 <div class="system-bar">206 <div class="sys-left">12:47</div>207 <div class="sys-center">208 <span>87°</span>209 <div class="dot"></div>210 <span>90°</span>211 <div class="dot"></div>212 </div>213 <div class="sys-right">214 <!-- WiFi -->215 <svg class="sys-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">216 <path d="M2 8c5-5 15-5 20 0" />217 <path d="M5 11c3.5-3.5 10.5-3.5 14 0" />218 <path d="M8 14c2-2 6-2 8 0" />219 <circle cx="12" cy="18" r="2" fill="#fff" stroke="none" />220 </svg>221 <!-- Battery -->222 <svg class="sys-icon" viewBox="0 0 28 24" fill="none" stroke="#ffffff" stroke-width="2">223 <rect x="2" y="6" width="20" height="12" rx="2"></rect>224 <rect x="23" y="10" width="3" height="4" rx="1" fill="#ffffff" stroke="none"></rect>225 <rect x="4.5" y="8.5" width="13" height="7" fill="#ffffff" stroke="none"></rect>226 </svg>227 </div>228 </div>229 230 <!-- Underlying content -->231 <div class="app-content">232 <div class="content-placeholder">[IMG: Weather screen content]</div>233 </div>234 235 <!-- Right-side scrim over content -->236 <div class="scrim"></div>237 238 <!-- Drawer -->239 <div class="drawer">240 <div class="drawer-header">241 <div class="hdr-row">242 <!-- Location pin -->243 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#4b4b4b" stroke-width="2">244 <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12z"></path>245 <circle cx="12" cy="10" r="3"></circle>246 </svg>247 <div class="hdr-title">Delhi</div>248 </div>249 <div class="hdr-sub">90° smog</div>250 </div>251 <div class="separator"></div>252 253 <div class="drawer-body">254 <ul class="menu">255 <li class="menu-item">256 <div class="icon-wrap">257 <!-- Search -->258 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">259 <circle cx="11" cy="11" r="6"></circle>260 <path d="M20 20l-4.2-4.2"></path>261 </svg>262 </div>263 <div class="label">My Locations</div>264 </li>265 266 <li class="menu-item">267 <div class="icon-wrap">268 <!-- Sun behind cloud -->269 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">270 <circle cx="7" cy="8" r="3"></circle>271 <path d="M4 8H2M7 5V3M10 8h2M5.5 10.5a5 5 0 1 1 0 0"/>272 <path d="M9 18h7a4 4 0 1 0-1.2-7.8 3.5 3.5 0 0 0-6.7 2.1"></path>273 </svg>274 </div>275 <div class="label">Weather Delhi</div>276 </li>277 278 <li class="menu-item">279 <div class="icon-wrap">280 <!-- Cloud -->281 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">282 <path d="M6 18h10a4 4 0 1 0-1.2-7.8 5 5 0 0 0-9.6 2.3A3 3 0 0 0 6 18z"></path>283 </svg>284 </div>285 <div class="label">WeatherRadar</div>286 </li>287 288 <li class="menu-item">289 <div class="icon-wrap">290 <!-- Raindrop -->291 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">292 <path d="M12 3s5 6 5 10a5 5 0 0 1-10 0c0-4 5-10 5-10z"></path>293 </svg>294 </div>295 <div class="label">RainRadar</div>296 </li>297 298 <li class="menu-item">299 <div class="icon-wrap">300 <!-- Thermometer -->301 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">302 <path d="M10 14V6a2 2 0 1 1 4 0v8a5 5 0 1 1-4 0z"></path>303 <circle cx="12" cy="18" r="2" fill="#ffffff" stroke="none"></circle>304 </svg>305 </div>306 <div class="label">TemperatureRadar</div>307 </li>308 309 <li class="menu-item">310 <div class="icon-wrap">311 <!-- Wind gauge -->312 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">313 <circle cx="12" cy="12" r="7"></circle>314 <path d="M12 12l5-2"></path>315 <circle cx="12" cy="12" r="1.5" fill="#ffffff" stroke="none"></circle>316 </svg>317 </div>318 <div class="label">WindRadar</div>319 </li>320 321 <li class="menu-item">322 <div class="icon-wrap">323 <!-- Lightning -->324 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">325 <path d="M13 2L6 13h5l-1 9 7-12h-5l1-8z"></path>326 </svg>327 </div>328 <div class="label">LightningRadar</div>329 <span class="badge-new">NEW</span>330 </li>331 332 <li class="menu-item">333 <div class="icon-wrap">334 <!-- Chat bubble -->335 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">336 <path d="M4 5h16v10H8l-4 4V5z"></path>337 </svg>338 </div>339 <div class="label">WeatherNews</div>340 </li>341 </ul>342 343 <div class="section-divider"></div>344 345 <ul class="menu">346 <li class="menu-item star">347 <div class="icon-wrap">348 <!-- Star -->349 <svg viewBox="0 0 24 24">350 <path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 17l-6.3 4 1.2-6.9-5-4.8 7-1L12 2z" fill="#f5c144" stroke="#f5c144"></path>351 </svg>352 </div>353 <div class="label">Remove ads</div>354 </li>355 356 <li class="menu-item">357 <div class="icon-wrap">358 <!-- Gear -->359 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">360 <circle cx="12" cy="12" r="3"></circle>361 <path d="M19 12a7 7 0 0 0-.2-1.6l2.1-1.6-2-3.5-2.6 1A7 7 0 0 0 13.6 4L13 1h-4l-.6 3a7 7 0 0 0-2.7 1.3l-2.6-1-2 3.5 2.1 1.6A7 7 0 0 0 5 12a7 7 0 0 0 .2 1.6L3.1 15.2l2 3.5 2.6-1A7 7 0 0 0 10.4 20l.6 3h4l.6-3a7 7 0 0 0 2.7-1.3l2.6 1 2-3.5-2.1-1.6c.1-.5.2-1 .2-1.6z"></path>362 </svg>363 </div>364 <div class="label">Info & Settings</div>365 </li>366 367 <li class="menu-item">368 <div class="icon-wrap">369 <!-- Thumbs up -->370 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">371 <path d="M2 11h4v10H2z"></path>372 <path d="M6 12h7l2-6 2 1v11H6z"></path>373 </svg>374 </div>375 <div class="label">Rate App</div>376 </li>377 378 <li class="menu-item">379 <div class="icon-wrap">380 <!-- Envelope -->381 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">382 <rect x="3" y="6" width="18" height="12" rx="2"></rect>383 <path d="M3 8l9 6 9-6"></path>384 </svg>385 </div>386 <div class="label">Contact us</div>387 </li>388 </ul>389 390 <div class="section-divider"></div>391 </div>392 393 <!-- Bottom link -->394 <div class="footer-link">395 <div class="icon-wrap" style="width:70px;height:70px;">396 <!-- Globe -->397 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">398 <circle cx="12" cy="12" r="9"></circle>399 <path d="M3 12h18"></path>400 <path d="M12 3a12 12 0 0 1 0 18"></path>401 <path d="M12 3a12 12 0 0 0 0 18"></path>402 </svg>403 </div>404 <div class="label">weatherandradar.com</div>405 </div>406 </div>407 408 <!-- Home indicator -->409 <div class="home-indicator"></div>410</div>411</body>412</html>