GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Weather & Radar UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #0e4f66 0%, #5e7c92 30%, #9fb2bf 60%, #bfc6cb 100%);13 color: #fff;14 }15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 92px;22 background: rgba(8, 52, 70, 0.9);23 display: flex;24 align-items: center;25 padding: 0 28px;26 box-sizing: border-box;27 font-size: 34px;28 letter-spacing: 0.5px;29 }30 .status-left, .status-right { display: flex; align-items: center; }31 .status-left { gap: 24px; }32 .status-right { margin-left: auto; gap: 22px; }33 .sb-icon {34 width: 34px; height: 34px; border-radius: 6px; background: rgba(255,255,255,0.35);35 }36 .battery {37 width: 46px; height: 26px; border: 2px solid rgba(255,255,255,0.8); border-radius: 4px; position: relative;38 }39 .battery:after {40 content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 10px; background: rgba(255,255,255,0.8); border-radius: 2px;41 }42 .battery .lvl { position: absolute; left: 3px; top: 4px; height: 16px; width: 28px; background: rgba(255,255,255,0.8); }43 /* App header */44 .app-header {45 position: absolute;46 top: 92px; left: 0;47 width: 1080px; height: 140px;48 background: #0d617b;49 display: flex; align-items: center;50 padding: 0 32px; box-sizing: border-box;51 }52 .brand { font-size: 52px; font-weight: 700; flex: 1; text-align: center; }53 .hamburger, .search {54 width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;55 }56 .hamburger svg, .search svg { fill: none; stroke: #fff; stroke-width: 8; }57 /* Content area */58 .content {59 position: absolute;60 top: 232px; left: 0;61 width: 100%; height: 2168px;62 padding: 36px 42px; box-sizing: border-box;63 }64 .top-row {65 font-size: 32px; opacity: 0.95; display: flex; align-items: center;66 }67 .top-row .right { margin-left: auto; }68 .city { margin-top: 14px; font-size: 58px; font-weight: 700; }69 .temp-row {70 margin-top: 30px; display: flex; align-items: flex-end; gap: 22px;71 }72 .big-temp { font-size: 160px; font-weight: 700; line-height: 1; }73 .wind-flag {74 width: 70px; height: 70px;75 }76 .feels { font-size: 36px; margin-top: 10px; opacity: 0.95; }77 /* 90 min tile */78 .video-tile {79 position: absolute; right: 42px; top: 430px;80 width: 486px; height: 136px; background: #ffffff; color: #0d617b;81 border-radius: 24px; box-shadow: 0 8px 18px rgba(0,0,0,0.18);82 display: flex; align-items: center; padding: 20px 26px; box-sizing: border-box;83 gap: 22px;84 }85 .play {86 width: 86px; height: 86px; border-radius: 50%; background: #0d617b; display: flex; align-items: center; justify-content: center;87 }88 .play svg { fill: #fff; }89 .tile-text { display: flex; flex-direction: column; gap: 8px; }90 .tile-title { font-size: 32px; font-weight: 700; }91 .tile-sub { font-size: 30px; color: #2b2b2b; }92 /* sunrise/sunset row */93 .day-row { margin-top: 190px; border-top: 2px solid rgba(255,255,255,0.4); padding-top: 18px; display: flex; align-items: center; font-size: 34px; }94 .day-row .sun { width: 38px; height: 38px; margin-right: 10px; }95 .day-row .times { margin-left: auto; display: flex; gap: 24px; align-items: center; }96 .mini-arrow {97 width: 0; height: 0;98 border-left: 9px solid transparent;99 border-right: 9px solid transparent;100 border-top: 14px solid #fff;101 margin-left: 6px;102 }103 /* hourly forecast */104 .hourly {105 margin-top: 24px;106 display: grid;107 grid-template-columns: repeat(5, 1fr);108 gap: 18px;109 }110 .hour-card { background: rgba(255,255,255,0.08); border-radius: 18px; padding: 18px; box-sizing: border-box; text-align: center; }111 .hour-time { font-size: 30px; color: #eaeaea; }112 .hour-temp { margin-top: 6px; font-size: 68px; font-weight: 700; }113 .wx-icon { margin: 8px auto 6px auto; width: 92px; height: 54px; }114 .precip { font-size: 30px; display: flex; justify-content: center; align-items: center; gap: 8px; color: #eaeaea; }115 .drop {116 width: 12px; height: 16px; background: #eaeaea; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;117 transform: rotate(20deg);118 }119 .divider-text {120 margin-top: 24px; font-size: 34px; color: #f0f0f0;121 border-top: 2px solid rgba(255,255,255,0.35); padding-top: 16px;122 }123 /* stats */124 .stats {125 margin-top: 24px;126 display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 20px;127 color: #fff; font-size: 34px;128 }129 .stat { display: flex; align-items: center; gap: 18px; }130 .circle-icon {131 width: 44px; height: 44px; border: 3px solid rgba(255,255,255,0.85); border-radius: 50%;132 display: inline-block;133 }134 /* Ad block */135 .ad {136 margin-top: 60px;137 width: 996px; height: 860px;138 border-radius: 16px;139 overflow: hidden;140 border: 1px solid rgba(255,255,255,0.3);141 }142 .ad .img {143 width: 100%; height: 100%;144 background: #E0E0E0; color: #2b2b2b; border: 1px solid #BDBDBD;145 display: flex; align-items: center; justify-content: center; font-size: 36px;146 }147 /* Bottom gesture bar */148 .gesture {149 position: absolute; bottom: 28px; left: 50%;150 transform: translateX(-50%);151 width: 340px; height: 14px; border-radius: 8px; background: rgba(255,255,255,0.8);152 }153 /* Simple weather icons via SVG */154 .sun-icon svg { fill: #ffd84d; stroke: none; }155 .cloud-sun svg, .cloud-rain svg, .moon-cloud svg, .cloud svg { fill: #fff; }156</style>157</head>158<body>159<div id="render-target">160 161 <!-- Status Bar -->162 <div class="status-bar">163 <div class="status-left">164 <div>8:42</div>165 <div class="sb-icon"></div>166 <div class="sb-icon"></div>167 <div class="sb-icon"></div>168 <div class="sb-icon"></div>169 </div>170 <div class="status-right">171 <div class="sb-icon"></div>172 <div class="sb-icon"></div>173 <div class="battery"><div class="lvl"></div></div>174 </div>175 </div>176 177 <!-- App Header -->178 <div class="app-header">179 <div class="hamburger">180 <svg viewBox="0 0 100 100" width="54" height="54">181 <path d="M12 22 H88 M12 50 H88 M12 78 H88" />182 </svg>183 </div>184 <div class="brand">weather&radr</div>185 <div class="search">186 <svg viewBox="0 0 100 100" width="54" height="54">187 <circle cx="42" cy="42" r="26"></circle>188 <path d="M62 62 L90 90"></path>189 </svg>190 </div>191 </div>192 193 <!-- Main Content -->194 <div class="content">195 <div class="top-row">196 <div>Wales, United Kingdom</div>197 <div class="right">Tue 09/26 4:12 PM</div>198 </div>199 <div class="city">Ystradgynlais</div>200 201 <div class="temp-row">202 <div class="big-temp">62°</div>203 <svg class="wind-flag" viewBox="0 0 100 100">204 <path d="M12 12 V88" stroke="#fff" stroke-width="8" fill="none"></path>205 <path d="M20 20 L80 32 L20 44 Z" fill="#fff"></path>206 <path d="M20 52 L60 60 L20 68 Z" fill="#fff" opacity="0.8"></path>207 </svg>208 </div>209 <div class="feels">feels like 62°</div>210 211 <!-- 90-minute weather tile -->212 <div class="video-tile">213 <div class="play">214 <svg viewBox="0 0 100 100" width="60" height="60">215 <path d="M36 26 L76 50 L36 74 Z"></path>216 </svg>217 </div>218 <div class="tile-text">219 <div class="tile-title">90 Min. Weather:</div>220 <div class="tile-sub">variable clouds</div>221 </div>222 </div>223 224 <!-- Sunrise / Sunset -->225 <div class="day-row">226 <div class="sun">227 <svg viewBox="0 0 100 100">228 <circle cx="50" cy="50" r="24" fill="#ffd84d"></circle>229 </svg>230 </div>231 today232 <div class="times">233 <div>↑ 7:07 AM</div>234 <div>↓ 7:05 PM</div>235 </div>236 </div>237 238 <!-- Hourly Forecast Cards -->239 <div class="hourly">240 <div class="hour-card">241 <div class="hour-time">5:00 PM</div>242 <div class="hour-temp">62°</div>243 <div class="wx-icon sun-icon">244 <svg viewBox="0 0 120 80" width="92" height="54">245 <circle cx="40" cy="40" r="22" fill="#ffd84d"></circle>246 </svg>247 </div>248 <div class="precip"><div class="drop"></div>20%</div>249 </div>250 <div class="hour-card">251 <div class="hour-time">6:00 PM</div>252 <div class="hour-temp">61°</div>253 <div class="wx-icon cloud-sun">254 <svg viewBox="0 0 120 80" width="92" height="54">255 <circle cx="38" cy="28" r="18" fill="#ffd84d"></circle>256 <ellipse cx="78" cy="50" rx="36" ry="20" fill="#fff"></ellipse>257 <ellipse cx="50" cy="56" rx="28" ry="16" fill="#fff"></ellipse>258 </svg>259 </div>260 <div class="precip"><div class="drop"></div>20%</div>261 </div>262 <div class="hour-card">263 <div class="hour-time">7:00 PM</div>264 <div class="hour-temp">60°</div>265 <div class="wx-icon cloud-rain">266 <svg viewBox="0 0 120 80" width="92" height="54">267 <ellipse cx="70" cy="40" rx="36" ry="20" fill="#fff"></ellipse>268 <ellipse cx="40" cy="46" rx="26" ry="16" fill="#fff"></ellipse>269 <rect x="30" y="62" width="6" height="18" fill="#6ec0ff"></rect>270 </svg>271 </div>272 <div class="precip"><div class="drop"></div>50%</div>273 </div>274 <div class="hour-card">275 <div class="hour-time">8:00 PM</div>276 <div class="hour-temp">58°</div>277 <div class="wx-icon moon-cloud">278 <svg viewBox="0 0 120 80" width="92" height="54">279 <path d="M36 20 A16 16 0 1 0 58 42 A18 18 0 1 1 36 20" fill="#ffd84d"></path>280 <ellipse cx="78" cy="48" rx="34" ry="18" fill="#fff"></ellipse>281 </svg>282 </div>283 <div class="precip"><div class="drop"></div>40%</div>284 </div>285 <div class="hour-card">286 <div class="hour-time">9:00 PM</div>287 <div class="hour-temp">57°</div>288 <div class="wx-icon cloud">289 <svg viewBox="0 0 120 80" width="92" height="54">290 <ellipse cx="70" cy="44" rx="36" ry="20" fill="#fff"></ellipse>291 <ellipse cx="40" cy="50" rx="26" ry="16" fill="#fff"></ellipse>292 </svg>293 </div>294 <div class="precip"><div class="drop"></div>40%</div>295 </div>296 </div>297 298 <div class="divider-text">5:00 PM — variable clouds</div>299 300 <!-- Stats -->301 <div class="stats">302 <div class="stat"><div class="circle-icon"></div><div>pressure: 30 inHg</div></div>303 <div class="stat"><div class="circle-icon"></div><div>feels like: 62°</div></div>304 <div class="stat"><div class="circle-icon"></div><div>humidity: 75%</div></div>305 <div class="stat"><div class="circle-icon"></div><div>moderate wind from SW (14 mph)</div></div>306 <div class="stat"><div class="circle-icon"></div><div>dew point: 55°</div></div>307 </div>308 309 <!-- Ad block placeholder -->310 <div class="ad">311 <div class="img">[IMG: Ad Free banner with water drops]</div>312 </div>313 </div>314 315 <!-- Bottom gesture bar -->316 <div class="gesture"></div>317</div>318</body>319</html>