GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Weather UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: linear-gradient(#79a7df, #a6c6ee 40%, #cfe3f8 70%, #d7ecff);13 color: #ffffff;14 }15 16 /* Top status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 100%;22 height: 80px;23 padding: 20px 26px;24 box-sizing: border-box;25 font-size: 34px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 letter-spacing: 0.5px;30 color: #fff;31 }32 .status-left { display: flex; gap: 22px; align-items: center; }33 .status-right { display: flex; gap: 22px; align-items: center; }34 .icon {35 width: 34px; height: 34px;36 display: inline-flex; align-items: center; justify-content: center;37 }38 .icon svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 3; }39 40 /* Page title + top actions */41 .title-row {42 position: absolute;43 top: 110px; left: 0; width: 100%;44 padding: 0 40px;45 box-sizing: border-box;46 display: flex; align-items: center; justify-content: space-between;47 }48 .title {49 font-size: 64px; font-weight: 700;50 text-shadow: 0 1px 2px rgba(0,0,0,0.15);51 }52 .top-actions { display: flex; gap: 28px; }53 .top-actions .icon { width: 48px; height: 48px; }54 55 /* Forecast tabs */56 .tabs {57 position: absolute;58 top: 200px; left: 40px; right: 40px;59 display: flex; gap: 18px; align-items: stretch;60 }61 .tab {62 flex: 0 0 auto;63 min-width: 180px;64 padding: 18px 22px;65 border-radius: 22px;66 backdrop-filter: blur(2px);67 background: rgba(255,255,255,0.18);68 border: 1px solid rgba(255,255,255,0.35);69 color: #eaf4ff;70 }71 .tab.active {72 background: rgba(189,218,255,0.45);73 color: #ffffff;74 }75 .tab .day { font-size: 36px; font-weight: 700; }76 .tab .sub { font-size: 28px; opacity: 0.95; }77 .tab .deg { font-size: 38px; font-weight: 700; margin-top: 8px; }78 79 /* Mini hourly strip */80 .hours {81 position: absolute;82 top: 320px; left: 40px; right: 40px;83 display: grid; grid-template-columns: repeat(5, 1fr);84 gap: 18px;85 }86 .hour {87 background: rgba(255,255,255,0.16);88 border: 1px solid rgba(255,255,255,0.35);89 border-radius: 20px;90 padding: 20px;91 text-align: center;92 color: #fff;93 }94 .hour .temp { font-size: 46px; font-weight: 700; }95 .hour .time { font-size: 26px; opacity: 0.9; margin-top: 6px; }96 .hour .miniicon { width: 40px; height: 40px; margin: 8px auto 0; }97 .hour .miniicon svg { width: 100%; height: 100%; stroke: none; fill: #fff; opacity: 0.95; }98 99 /* Main info card */100 .main-card {101 position: absolute;102 top: 420px; left: 20px; right: 20px;103 height: 280px;104 border-radius: 24px;105 background: rgba(255,255,255,0.22);106 border: 1px solid rgba(255,255,255,0.5);107 display: grid; grid-template-columns: 1.2fr 1fr;108 padding: 26px 26px;109 box-sizing: border-box;110 }111 .left-block { padding-right: 10px; }112 .right-block { padding-left: 10px; border-left: 1px dashed rgba(255,255,255,0.4); }113 .time-large { font-size: 72px; font-weight: 700; letter-spacing: 2px; }114 .degree-large { font-size: 120px; font-weight: 700; line-height: 1; }115 .desc { font-size: 40px; margin-top: 10px; }116 .meta { font-size: 34px; margin-top: 8px; display: flex; align-items: center; gap: 10px; }117 .right-block .wind { font-size: 68px; font-weight: 700; text-align: right; }118 .right-block .wind small { font-size: 44px; font-weight: 600; }119 .right-block .more { font-size: 42px; text-align: right; margin-top: 14px; }120 .right-block .more span { display: block; margin-top: 10px; }121 .card-actions {122 position: absolute; right: 26px; bottom: 22px; display: flex; gap: 20px;123 }124 .rounded-btn {125 width: 90px; height: 90px; border-radius: 20px;126 background: rgba(255,255,255,0.25);127 border: 1px solid rgba(255,255,255,0.45);128 display: flex; align-items: center; justify-content: center;129 }130 .rounded-btn svg { width: 48px; height: 48px; stroke: #fff; stroke-width: 3; fill: none; }131 132 /* Big cloud accent */133 .cloud {134 position: absolute;135 top: 800px; right: 70px;136 width: 520px; height: 360px;137 background: rgba(255,255,255,0.95);138 border-radius: 180px;139 filter: blur(0.3px);140 box-shadow: -40px 30px 0 0 rgba(255,255,255,0.9),141 -150px 60px 0 0 rgba(255,255,255,0.92),142 -220px 10px 0 0 rgba(255,255,255,0.92);143 }144 145 /* Countryside illustration placeholder */146 .illustration {147 position: absolute;148 left: 0; right: 0; bottom: 420px;149 height: 620px;150 margin: 0 0;151 display: flex; align-items: center; justify-content: center;152 background: linear-gradient(#a6c6ee, #cfe3f8);153 border-top: 1px solid rgba(255,255,255,0.35);154 }155 .illustration .imgph {156 width: 1000px; height: 540px;157 background: #E0E0E0; border: 1px solid #BDBDBD;158 color: #757575; display: flex; align-items: center; justify-content: center;159 font-size: 36px;160 }161 162 /* Bottom info bar */163 .bottom-bar {164 position: absolute; bottom: 300px; left: 0; right: 0;165 height: 90px;166 background: rgba(0,0,0,0.65);167 display: flex; align-items: center; justify-content: space-between;168 padding: 0 30px; box-sizing: border-box;169 font-size: 44px;170 }171 172 /* Ad banner */173 .ad-banner {174 position: absolute; bottom: 0; left: 0; right: 0;175 height: 300px;176 background: #ffffff;177 color: #222;178 display: grid; grid-template-columns: 1fr 1fr;179 gap: 16px;180 padding: 16px 22px; box-sizing: border-box;181 }182 .promo {183 background: #f7f7f7; border: 1px solid #ddd; border-radius: 14px;184 padding: 16px;185 display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center;186 }187 .promo .ph {188 width: 220px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD;189 color: #757575; display: flex; align-items: center; justify-content: center; font-size: 28px;190 }191 .promo h3 { margin: 0; font-size: 40px; }192 .promo p { margin: 8px 0 0; font-size: 28px; color: #444; }193 .cta {194 display: flex; align-items: center; gap: 18px; flex-wrap: wrap;195 }196 .install {197 background: #1fb267; color: #fff; border: none; border-radius: 40px;198 padding: 18px 40px; font-size: 36px; font-weight: 700;199 }200 .rating { font-size: 28px; color: #666; }201 .brand { display: flex; align-items: center; gap: 16px; }202 .brand .logo {203 width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD;204 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;205 }206 207 /* subtle white captions */208 .caption { opacity: 0.95; }209 210</style>211</head>212<body>213<div id="render-target">214 215 <!-- Status bar -->216 <div class="status-bar">217 <div class="status-left">218 <div>8:04</div>219 <div>0°</div>220 <div>31°</div>221 <div class="icon">222 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M2 12h4M18 12h4M12 2v4M12 18v4"></path></svg>223 </div>224 </div>225 <div class="status-right">226 <div class="icon"><svg viewBox="0 0 24 24"><path d="M3 16l7-7 4 4 7-7"></path></svg></div>227 <div class="icon"><svg viewBox="0 0 24 24"><path d="M2 8h20M2 16h20"></path></svg></div>228 <div class="icon"><svg viewBox="0 0 24 24"><path d="M7 20h10a3 3 0 003-3V7a3 3 0 00-3-3H7a3 3 0 00-3 3v10a3 3 0 003 3z"></path><path d="M16 6v2M12 18a3.5 3.5 0 003.5-3.5"></path></svg></div>229 <div>93%</div>230 </div>231 </div>232 233 <!-- Title and actions -->234 <div class="title-row">235 <div class="title">Australia Plains</div>236 <div class="top-actions">237 <div class="icon">238 <!-- Search -->239 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><path d="M21 21l-5.5-5.5"></path></svg>240 </div>241 <div class="icon">242 <!-- More vertical -->243 <svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="20" r="2"></circle></svg>244 </div>245 </div>246 </div>247 248 <!-- Forecast tabs -->249 <div class="tabs">250 <div class="tab active">251 <div class="day">Th 10</div>252 <div class="sub">Today</div>253 </div>254 <div class="tab">255 <div class="day">Fr 11</div>256 <div class="sub">257 <span class="icon" style="width:28px;height:28px;">258 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="#fff"></circle></svg>259 </span>260 Sunny261 </div>262 <div class="deg">16°</div>263 </div>264 <div class="tab">265 <div class="day">Sa 12</div>266 <div class="sub">267 <span class="icon" style="width:28px;height:28px;">268 <svg viewBox="0 0 24 24"><path d="M6 14a6 6 0 0112 0H6z" fill="#fff"></path><path d="M8 18h8" stroke="#fff" stroke-width="3"></path></svg>269 </span>270 Showers271 </div>272 <div class="deg">13°</div>273 </div>274 <div class="tab">275 <div class="day">Su 13</div>276 <div class="sub">277 <span class="icon" style="width:28px;height:28px;">278 <svg viewBox="0 0 24 24"><path d="M6 14a6 6 0 0112 0H6z" fill="#fff"></path></svg>279 </span>280 Cloudy281 </div>282 <div class="deg">12°</div>283 </div>284 <div class="tab">285 <div class="day">Mo 14</div>286 <div class="sub">—</div>287 <div class="deg">—</div>288 </div>289 </div>290 291 <!-- Hourly strip -->292 <div class="hours">293 <div class="hour">294 <div class="temp">13°</div>295 <div class="miniicon">296 <svg viewBox="0 0 24 24"><path d="M5 14c0-3 3-5 7-5s7 2 7 5H5z" fill="#fff"></path></svg>297 </div>298 <div class="time">9:00</div>299 </div>300 <div class="hour">301 <div class="temp">13°</div>302 <div class="miniicon">303 <svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" fill="#fff"></circle><path d="M4 16h16" stroke="#fff" stroke-width="3"></path></svg>304 </div>305 <div class="time">3:00</div>306 </div>307 <div class="hour">308 <div class="temp">10°</div>309 <div class="miniicon">310 <svg viewBox="0 0 24 24"><path d="M5 14c0-3 3-5 7-5s7 2 7 5H5z" fill="#fff"></path><circle cx="18" cy="6" r="3" fill="#fff"></circle></svg>311 </div>312 <div class="time">6:00</div>313 </div>314 <div class="hour">315 <div class="temp">7°</div>316 <div class="miniicon">317 <svg viewBox="0 0 24 24"><path d="M5 14c0-3 3-5 7-5s7 2 7 5H5z" fill="#fff"></path></svg>318 </div>319 <div class="time">9:00</div>320 </div>321 <div class="hour">322 <div class="temp">5°</div>323 <div class="miniicon">324 <svg viewBox="0 0 24 24"><path d="M5 14c0-3 3-5 7-5s7 2 7 5H5z" fill="#fff"></path></svg>325 </div>326 <div class="time">12:00</div>327 </div>328 </div>329 330 <!-- Main weather card -->331 <div class="main-card">332 <div class="left-block">333 <div class="time-large">12 04</div>334 <div class="degree-large">14°</div>335 <div class="desc">Partly Cloudy</div>336 <div class="meta">337 Pressure 30.3"338 <svg viewBox="0 0 24 24" class="icon" style="width:26px;height:26px;">339 <path d="M8 12l4 4 4-4" stroke="#fff" stroke-width="3" fill="none"></path>340 </svg>341 </div>342 </div>343 <div class="right-block">344 <div class="wind">13 <small>SW mph</small></div>345 <div class="more">346 <span>Feels like 14°</span>347 <span>Humidity 72%</span>348 </div>349 </div>350 351 <div class="card-actions">352 <!-- Gallery icon -->353 <div class="rounded-btn">354 <svg viewBox="0 0 24 24">355 <rect x="4" y="5" width="16" height="14" rx="2"></rect>356 <path d="M7 15l4-4 3 3 3-2" fill="none"></path>357 </svg>358 </div>359 <!-- Power icon -->360 <div class="rounded-btn">361 <svg viewBox="0 0 24 24">362 <path d="M12 2v8" ></path>363 <circle cx="12" cy="14" r="8"></circle>364 </svg>365 </div>366 </div>367 </div>368 369 <!-- Large cloud accent -->370 <div class="cloud"></div>371 372 <!-- Countryside illustration placeholder -->373 <div class="illustration">374 <div class="imgph">[IMG: Countryside Illustration]</div>375 </div>376 377 <!-- Bottom source bar -->378 <div class="bottom-bar">379 <div>Instagram/Yo</div>380 <div>Forecast from MET Norway</div>381 </div>382 383 <!-- Ad banner -->384 <div class="ad-banner">385 <div class="promo">386 <div class="ph">[IMG: App Promo Artwork]</div>387 <div>388 <h3>New Features and an Updated Look</h3>389 <p>Travel safely and flexibly for less!</p>390 <div class="cta">391 <div class="brand">392 <div class="logo">[IMG: Brand]</div>393 <div class="rating">4.5 • FREE</div>394 </div>395 </div>396 </div>397 </div>398 <div class="promo">399 <div class="ph">[IMG: Trip.com Promo]</div>400 <div>401 <h3>Trip.com</h3>402 <p>Book flights, hotels & more.</p>403 <div class="cta">404 <button class="install">INSTALL</button>405 <div class="rating">4.5 • FREE</div>406 </div>407 </div>408 </div>409 </div>410 411</div>412</body>413</html>