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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: radial-gradient(ellipse at 50% 20%, rgba(220,225,230,0.9) 0%, rgba(188,196,202,0.95) 50%, #b0b7bd 100%);15 border-radius: 32px;16 box-shadow: 0 10px 40px rgba(0,0,0,0.25);17 color: #ffffff;18 }19 20 /* top status bar */21 .status-bar {22 height: 80px;23 padding: 16px 28px;24 font-size: 30px;25 display: flex;26 align-items: center;27 opacity: 0.9;28 }29 .status-left { flex: 1; }30 .status-right {31 display: flex;32 gap: 24px;33 align-items: center;34 font-size: 28px;35 }36 .status-dot {37 width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.9);38 }39 40 /* header row */41 .header {42 padding: 20px 40px 10px 40px;43 display: flex;44 align-items: center;45 gap: 18px;46 }47 .header .title {48 font-size: 58px;49 font-weight: 500;50 letter-spacing: 0.5px;51 flex: 1;52 }53 .header .action-icons {54 display: flex;55 gap: 30px;56 }57 .icon {58 width: 52px; height: 52px;59 opacity: 0.95;60 }61 62 /* weekly forecast */63 .weekly {64 margin: 12px 40px 0 40px;65 display: flex;66 gap: 24px;67 align-items: stretch;68 }69 .day {70 min-width: 160px;71 padding: 22px 20px;72 border-radius: 18px;73 background: rgba(255,255,255,0.18);74 backdrop-filter: blur(2px);75 border: 1px solid rgba(255,255,255,0.25);76 text-align: center;77 }78 .day.selected {79 background: rgba(255,255,255,0.28);80 }81 .day .label { font-size: 32px; opacity: 0.95; }82 .day .temp { font-size: 40px; margin-top: 8px; font-weight: 500; }83 .day .icon-mini { width: 54px; height: 54px; margin: 8px auto 0; }84 85 /* hourly strip */86 .hourly {87 margin: 16px 40px 0 40px;88 padding: 16px 20px;89 border-radius: 18px;90 background: rgba(255,255,255,0.18);91 border: 1px solid rgba(255,255,255,0.25);92 }93 .hours {94 display: flex;95 justify-content: space-between;96 align-items: center;97 gap: 18px;98 }99 .hour {100 width: 200px;101 text-align: center;102 }103 .hour .time { font-size: 30px; opacity: 0.95; }104 .hour .deg { font-size: 40px; margin-top: 4px; }105 .hour .icon-mini { width: 52px; height: 52px; margin: 8px auto; }106 .hour .bullet {107 width: 16px; height: 16px; border-radius: 50%;108 border: 2px solid rgba(255,255,255,0.8);109 margin: 10px auto 0;110 }111 .hour.active .bullet { background: rgba(255,255,255,0.9); }112 113 /* main card */114 .current-card {115 margin: 22px 40px 0 40px;116 padding: 28px 30px;117 border-radius: 24px;118 background: rgba(255,255,255,0.23);119 border: 1px solid rgba(255,255,255,0.3);120 display: grid;121 grid-template-columns: 1.3fr 0.9fr;122 grid-gap: 10px;123 }124 .current-left {125 display: grid;126 grid-template-columns: 1fr 1fr;127 grid-column-gap: 16px;128 align-items: center;129 }130 .time-big { font-size: 64px; opacity: 0.95; }131 .temp-big { font-size: 150px; line-height: 1; font-weight: 300; text-align: center; }132 .wind {133 font-size: 48px; text-align: right; line-height: 1.2;134 }135 .details {136 margin-top: 16px;137 display: grid;138 grid-template-columns: 1fr 1fr;139 font-size: 38px;140 gap: 10px;141 }142 .dots {143 margin-top: 18px;144 display: flex; gap: 18px; align-items: center;145 }146 .dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.6); }147 .dot.active { background: rgba(255,255,255,0.9); }148 149 /* small tool buttons */150 .tools {151 margin-top: 18px;152 display: flex; gap: 18px;153 }154 .tool {155 width: 120px; height: 120px; border-radius: 16px;156 background: rgba(255,255,255,0.28);157 border: 2px solid rgba(255,255,255,0.5);158 display: flex; align-items: center; justify-content: center;159 }160 .tool svg { width: 72px; height: 72px; opacity: 0.95; }161 162 /* illustration placeholder */163 .illustration {164 margin: 34px 0 0 0;165 width: 100%;166 height: 850px;167 display: flex; align-items: center; justify-content: center;168 background: #E0E0E0;169 border-top: 1px solid #BDBDBD;170 border-bottom: 1px solid #BDBDBD;171 color: #404040;172 font-size: 44px;173 letter-spacing: 0.3px;174 }175 176 /* black banner */177 .banner {178 height: 70px;179 background: #000000;180 display: flex; align-items: center; justify-content: space-between;181 color: #eaeaea;182 font-size: 34px;183 padding: 0 30px;184 }185 186 /* remove ads bar */187 .ads {188 margin-top: 18px;189 height: 160px;190 background: #102131;191 color: #ffffff;192 display: flex; align-items: center;193 padding: 0 36px;194 gap: 28px;195 font-size: 50px;196 border-top: 1px solid rgba(255,255,255,0.15);197 }198 .ads .app-icon {199 width: 96px; height: 96px; border-radius: 20px;200 background: #2C78A0;201 display: flex; justify-content: center; align-items: center;202 border: 2px solid rgba(255,255,255,0.4);203 color: #fff; font-size: 52px;204 }205 206 /* home indicator */207 .home-indicator {208 position: absolute;209 bottom: 24px; left: 50%;210 transform: translateX(-50%);211 width: 360px; height: 12px;212 background: rgba(255,255,255,0.85);213 border-radius: 8px;214 }215 216 /* simple cloud and sun icons (reusable) */217 .cloud path, .sun circle, .sun line { fill: none; stroke: #fff; stroke-width: 5; }218 .cloud path { stroke-linecap: round; }219</style>220</head>221<body>222<div id="render-target">223 224 <div class="status-bar">225 <div class="status-left">1:22</div>226 <div class="status-right">227 <span>33°</span>228 <span>33°</span>229 <div class="status-dot"></div>230 <svg class="icon" viewBox="0 0 24 24" aria-label="Location">231 <path d="M12 2l7 7-7 3-3 7-4-4 7-3z" fill="rgba(255,255,255,0.9)"></path>232 </svg>233 <div class="status-dot"></div>234 </div>235 </div>236 237 <div class="header">238 <svg class="icon" viewBox="0 0 24 24" aria-label="Location arrow">239 <path d="M3 11l18-8-8 18-2-7-8-3z" fill="rgba(255,255,255,0.95)"></path>240 </svg>241 <div class="title">Dera Mãndi</div>242 <div class="action-icons">243 <svg class="icon" viewBox="0 0 24 24" aria-label="Search">244 <circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2" fill="none"></circle>245 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#fff" stroke-width="2" />246 </svg>247 <svg class="icon" viewBox="0 0 24 24" aria-label="More">248 <circle cx="12" cy="5" r="2" fill="#fff"></circle>249 <circle cx="12" cy="12" r="2" fill="#fff"></circle>250 <circle cx="12" cy="19" r="2" fill="#fff"></circle>251 </svg>252 </div>253 </div>254 255 <div class="weekly">256 <div class="day selected">257 <div class="label">Tu 8<br>Today</div>258 </div>259 <div class="day">260 <div class="label">We 9</div>261 <svg class="icon-mini" viewBox="0 0 64 64">262 <circle cx="20" cy="20" r="9" fill="none" stroke="#fff" stroke-width="4"></circle>263 <path d="M16 38c2-7 9-9 14-5 7-6 18 2 14 8H16z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round"></path>264 </svg>265 <div class="temp">94°</div>266 </div>267 <div class="day">268 <div class="label">Th 10</div>269 <svg class="icon-mini" viewBox="0 0 64 64">270 <path d="M16 38c2-7 9-9 14-5 7-6 18 2 14 8H16z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round"></path>271 </svg>272 <div class="temp">93°</div>273 </div>274 <div class="day">275 <div class="label">Fr 11</div>276 <svg class="icon-mini" viewBox="0 0 64 64">277 <circle cx="20" cy="20" r="10" fill="none" stroke="#fff" stroke-width="4"></circle>278 <line x1="20" y1="2" x2="20" y2="10" stroke="#fff" stroke-width="4"></line>279 <line x1="20" y1="30" x2="20" y2="38" stroke="#fff" stroke-width="4"></line>280 <line x1="2" y1="20" x2="10" y2="20" stroke="#fff" stroke-width="4"></line>281 <line x1="30" y1="20" x2="38" y2="20" stroke="#fff" stroke-width="4"></line>282 </svg>283 <div class="temp">91°</div>284 </div>285 <div class="day">286 <div class="label" style="color:#ffd97a;">Sa</div>287 <svg class="icon-mini" viewBox="0 0 64 64">288 <path d="M16 38c2-7 9-9 14-5 7-6 18 2 14 8H16z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round"></path>289 </svg>290 <div class="temp">85°</div>291 </div>292 </div>293 294 <div class="hourly">295 <div class="hours">296 <div class="hour">297 <div class="time">9 am</div>298 </div>299 <div class="hour active">300 <div class="time">12:00</div>301 <div class="bullet"></div>302 <svg class="icon-mini" viewBox="0 0 64 64">303 <path d="M14 38c3-8 10-10 16-6 7-6 18 2 14 8H14z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round"></path>304 </svg>305 <div class="deg">94°</div>306 </div>307 <div class="hour">308 <div class="time">3:00</div>309 <svg class="icon-mini" viewBox="0 0 64 64">310 <circle cx="20" cy="20" r="10" fill="none" stroke="#fff" stroke-width="4"></circle>311 <path d="M12 36c4-7 13-7 18-2 7-6 18 2 14 8H12z" fill="none" stroke="#fff" stroke-width="4"></path>312 </svg>313 <div class="deg">92°</div>314 </div>315 <div class="hour">316 <div class="time">6:00</div>317 <svg class="icon-mini" viewBox="0 0 64 64">318 <path d="M16 38c2-7 9-9 14-5 7-6 18 2 14 8H16z" fill="none" stroke="#fff" stroke-width="4"></path>319 </svg>320 <div class="deg">87°</div>321 </div>322 <div class="hour">323 <div class="time">12 am</div>324 <svg class="icon-mini" viewBox="0 0 64 64">325 <path d="M16 38c2-7 9-9 14-5 7-6 18 2 14 8H16z" fill="none" stroke="#fff" stroke-width="4"></path>326 </svg>327 <div class="deg">85°</div>328 </div>329 </div>330 </div>331 332 <div class="current-card">333 <div class="current-left" style="grid-column: 1 / span 2;">334 <div class="time-big">1:22</div>335 <div class="temp-big">94°</div>336 <div class="wind">11 → W<br><span style="font-size:32px; opacity:0.9;">mph</span></div>337 <div></div>338 </div>339 <div class="details" style="grid-column: 1 / span 2;">340 <div>341 Cloudy<br>342 <span style="opacity:0.9;">Pressure 29.48"</span>343 </div>344 <div style="text-align:right;">345 Feels like 105°<br>346 Humidity 54%347 </div>348 </div>349 <div class="dots" style="grid-column: 1 / span 2;">350 <div class="dot"></div>351 <div class="dot active"></div>352 <div class="dot"></div>353 </div>354 <div class="tools" style="grid-column: 2;">355 <div class="tool" title="Image">356 <svg viewBox="0 0 64 64">357 <rect x="8" y="16" width="48" height="32" fill="none" stroke="#fff" stroke-width="4"></rect>358 <circle cx="20" cy="28" r="5" fill="none" stroke="#fff" stroke-width="4"></circle>359 <path d="M12 44l12-12 10 8 10-6 8 10" fill="none" stroke="#fff" stroke-width="4"></path>360 </svg>361 </div>362 <div class="tool" title="Sun">363 <svg viewBox="0 0 64 64">364 <circle cx="32" cy="32" r="12" fill="none" stroke="#fff" stroke-width="4"></circle>365 <line x1="32" y1="6" x2="32" y2="16" stroke="#fff" stroke-width="4"></line>366 <line x1="32" y1="48" x2="32" y2="58" stroke="#fff" stroke-width="4"></line>367 <line x1="6" y1="32" x2="16" y2="32" stroke="#fff" stroke-width="4"></line>368 <line x1="48" y1="32" x2="58" y2="32" stroke="#fff" stroke-width="4"></line>369 </svg>370 </div>371 <div class="tool" title="Map">372 <svg viewBox="0 0 64 64">373 <path d="M10 18l16-6 16 6 16-6v34l-16 6-16-6-16 6z" fill="none" stroke="#fff" stroke-width="4"></path>374 <line x1="26" y1="12" x2="26" y2="52" stroke="#fff" stroke-width="4"></line>375 <line x1="42" y1="18" x2="42" y2="58" stroke="#fff" stroke-width="4"></line>376 </svg>377 </div>378 </div>379 </div>380 381 <div class="illustration">382 [IMG: Countryside farm illustration with trees, fence, path and wildflowers]383 </div>384 385 <div class="banner">386 <div>facebook/Yo</div>387 <div>Forecast from MET Norway</div>388 </div>389 390 <div class="ads">391 <div class="app-icon">☀️</div>392 <div>Remove ads</div>393 </div>394 395 <div class="home-indicator"></div>396</div>397</body>398</html>