GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Weather UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Arial, sans-serif; }8 #render-target{9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background: linear-gradient(#8fd0f5 0%, #6db6f2 28%, #4d86ef 60%, #3366e9 100%);11 color:#ffffff;12 }13 14 /* Status bar */15 .status-bar{16 position:absolute; top:0; left:0; right:0; height:96px; padding:0 36px;17 display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:40px; opacity:0.95;18 }19 .status-icons{ display:flex; gap:26px; align-items:center; }20 .icon-dot{ width:18px; height:18px; border-radius:50%; background:#fff; opacity:.9; }21 .icon-battery{ width:48px; height:28px; border:3px solid #fff; border-radius:6px; position:relative; }22 .icon-battery:after{ content:""; position:absolute; right:-8px; top:7px; width:6px; height:12px; background:#fff; border-radius:2px; }23 .icon-wifi{24 width:32px; height:22px; position:relative;25 }26 .icon-wifi:before, .icon-wifi:after{27 content:""; position:absolute; left:0; right:0; margin:auto; border:3px solid #fff; border-top:none; border-left-color:transparent; border-right-color:transparent; border-bottom-left-radius:28px; border-bottom-right-radius:28px;28 }29 .icon-wifi:before{ width:32px; height:16px; bottom:0; opacity:.85; }30 .icon-wifi:after{ width:18px; height:10px; bottom:2px; }31 32 /* Top app bar */33 .top-bar{34 position:absolute; top:110px; left:0; right:0; padding:0 36px; height:108px; display:flex; align-items:center; justify-content:space-between;35 }36 .hamburger{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; }37 .hamburger span, .hamburger span:before, .hamburger span:after{38 content:""; display:block; width:44px; height:4px; background:#ffffff; border-radius:3px; position:relative;39 }40 .hamburger span:before{ position:absolute; top:-12px; }41 .hamburger span:after{ position:absolute; top:12px; }42 .brand{43 text-align:center; flex:1; line-height:1.1;44 }45 .brand .logo{ font-weight:700; font-size:38px; opacity:.95; }46 .brand .location{ font-weight:800; font-size:44px; }47 .chev{ display:inline-block; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:14px solid #fff; margin-left:10px; transform:translateY(-6px); opacity:.9;}48 .premium-btn{49 background:#ff7c5c; color:#fff; font-weight:800; padding:18px 34px; border-radius:50px; font-size:34px;50 box-shadow:0 6px 0 rgba(0,0,0,0.08) inset, 0 8px 18px rgba(0,0,0,0.15);51 }52 53 /* Message */54 .precip-msg{55 position:absolute; top:250px; left:0; right:0; text-align:center; font-size:48px; font-weight:700; opacity:.95;56 }57 58 /* Sun dial section */59 .hero{ position:absolute; top:350px; left:0; right:0; }60 .tick-ring{61 width:920px; height:920px; margin:0 auto; border-radius:50%;62 background: repeating-conic-gradient(rgba(255,255,255,0.42) 0deg 6deg, rgba(255,255,255,0) 6deg 14deg);63 -webkit-mask: radial-gradient(circle at center, rgba(0,0,0,0) 0 62%, rgba(0,0,0,1) 62%, rgba(0,0,0,1) 100%);64 mask: radial-gradient(circle at center, rgba(0,0,0,0) 0 62%, rgba(0,0,0,1) 62%, rgba(0,0,0,1) 100%);65 opacity:.35;66 }67 .glow-sphere{68 position:absolute; top:40px; left:50%; transform:translateX(-50%);69 width:800px; height:800px; border-radius:50%;70 background: radial-gradient(circle at 50% 40%, #7ab6ff 0%, #5a91ff 50%, #4b7cf0 70%, #3e6cea 100%);71 box-shadow: 0 50px 120px rgba(0,40,200,0.35);72 display:flex; align-items:center; justify-content:center; text-align:center;73 color:#fff;74 }75 .sphere-content .temp{ font-size:170px; font-weight:800; margin-top:10px; }76 .sphere-content .unit{ font-size:60px; vertical-align:top; opacity:.95;}77 .sun-icon{78 width:110px; height:110px; margin:0 auto 10px auto;79 }80 .sun-icon svg{ width:100%; height:100%; }81 .realfeel{ font-size:54px; font-weight:700; margin-top:10px; opacity:.95; }82 .next-hours{ margin-top:34px; font-size:52px; font-weight:800; display:inline-flex; align-items:center; gap:12px; }83 .arrow{ width:18px; height:18px; border-right:6px solid #fff; border-top:6px solid #fff; transform:rotate(45deg); display:inline-block; }84 85 .scale-numbers{86 position:absolute; left:0; right:0; top:910px; text-align:center; font-weight:700; color:rgba(255,255,255,0.8); letter-spacing:2px;87 }88 .scale-left, .scale-right{89 position:absolute; top:520px; font-weight:700; color:rgba(255,255,255,0.65); font-size:40px;90 }91 .scale-left{ left:68px; }92 .scale-right{ right:68px; }93 94 /* Legend dots */95 .legend{96 position:absolute; top:1160px; left:40px; right:40px; display:flex; justify-content:space-around; align-items:center;97 font-size:42px; font-weight:700;98 }99 .legend .row{ display:flex; align-items:center; gap:16px; }100 .dot{ width:22px; height:22px; border-radius:50%; display:inline-block; }101 102 /* Three forecast cards */103 .cards{104 position:absolute; top:1260px; left:40px; right:40px; background:rgba(255,255,255,0.08);105 border-radius:28px; padding:30px; display:flex; gap:26px;106 }107 .card{108 flex:1; background:rgba(255,255,255,0.06); border-radius:22px; padding:36px; min-height:260px;109 display:flex; flex-direction:column; justify-content:space-between;110 }111 .card h4{ margin:0 0 18px 0; font-size:40px; letter-spacing:1px; color:rgba(255,255,255,0.9); }112 .card .big{ font-size:108px; font-weight:900; }113 .card .rf{ font-size:36px; opacity:.95; }114 .cloud-icon{ width:72px; height:54px; margin-bottom:8px; }115 .cloud-icon svg{ width:100%; height:100%; }116 117 /* Today details */118 .details{119 position:absolute; top:1610px; left:40px; right:40px;120 }121 .details h2{ margin:0; font-size:78px; font-weight:900; }122 .details .sub{ margin-top:10px; font-size:42px; letter-spacing:1px; color:rgba(255,255,255,0.9); }123 124 /* Bottom navigation */125 .bottom-bar{126 position:absolute; left:0; right:0; bottom:0; height:190px; background:rgba(0,0,0,0.18);127 display:flex; justify-content:space-around; align-items:center; backdrop-filter: blur(6px);128 }129 .nav-item{ color:#cfe2ff; text-align:center; font-size:36px; }130 .nav-item.active{ color:#ffffff; font-weight:800; }131 .nav-icon{132 width:72px; height:72px; margin:0 auto 12px auto; border-radius:16px; border:3px solid rgba(255,255,255,0.8);133 }134 .nav-item.active .nav-icon{ background:rgba(255,255,255,0.15); }135 136</style>137</head>138<body>139<div id="render-target">140 141 <!-- Status Bar -->142 <div class="status-bar">143 <div>5:19</div>144 <div class="status-icons">145 <div class="icon-dot" title="location"></div>146 <div class="icon-wifi"></div>147 <div class="icon-battery"></div>148 </div>149 </div>150 151 <!-- Top bar -->152 <div class="top-bar">153 <div class="hamburger"><span></span></div>154 155 <div class="brand">156 <div class="logo">AccuWeather</div>157 <div class="location">Berlin, DE <span class="chev"></span></div>158 </div>159 160 <div class="premium-btn">GET PREMIUM+</div>161 </div>162 163 <div class="precip-msg">No precipitation for at least 60 min</div>164 165 <!-- Sun dial hero -->166 <div class="hero">167 <div class="scale-left">45</div>168 <div class="scale-right">15</div>169 170 <div class="tick-ring"></div>171 172 <div class="glow-sphere">173 <div class="sphere-content">174 <div class="sun-icon">175 <svg viewBox="0 0 64 64" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round">176 <circle cx="32" cy="32" r="10" />177 <line x1="32" y1="4" x2="32" y2="14"/>178 <line x1="32" y1="50" x2="32" y2="60"/>179 <line x1="4" y1="32" x2="14" y2="32"/>180 <line x1="50" y1="32" x2="60" y2="32"/>181 <line x1="12" y1="12" x2="18" y2="18"/>182 <line x1="46" y1="46" x2="52" y2="52"/>183 <line x1="12" y1="52" x2="18" y2="46"/>184 <line x1="46" y1="18" x2="52" y2="12"/>185 </svg>186 </div>187 <div class="temp">73<span class="unit">°F</span></div>188 <div class="realfeel">RealFeel 75°</div>189 <div class="next-hours">Next 4 Hours <span class="arrow"></span></div>190 </div>191 </div>192 193 <div class="scale-numbers">30</div>194 </div>195 196 <!-- Legend -->197 <div class="legend">198 <div class="row">199 <div>Rain</div>200 <span class="dot" style="background:#93d10b"></span>201 <span class="dot" style="background:#b0e207"></span>202 <span class="dot" style="background:#ffb100"></span>203 <span class="dot" style="background:#ff6d00"></span>204 <span class="dot" style="background:#e43535"></span>205 </div>206 <div class="row">207 <div>Snow</div>208 <span class="dot" style="background:#b7ddf9"></span>209 <span class="dot" style="background:#9cc9ff"></span>210 <span class="dot" style="background:#6a93ff"></span>211 <span class="dot" style="background:#1c44ff"></span>212 </div>213 <div class="row">214 <div>Ice</div>215 <span class="dot" style="background:#fec1d0"></span>216 <span class="dot" style="background:#ff8fb2"></span>217 <span class="dot" style="background:#f35a8d"></span>218 <span class="dot" style="background:#c8346a"></span>219 </div>220 <div class="row">221 <div>Mix</div>222 <span class="dot" style="background:#c59dff"></span>223 <span class="dot" style="background:#9d81ff"></span>224 <span class="dot" style="background:#7a67ff"></span>225 <span class="dot" style="background:#564bd7"></span>226 <span class="dot" style="background:#3d2da7"></span>227 </div>228 </div>229 230 <!-- Forecast Cards -->231 <div class="cards">232 <div class="card">233 <h4>AFTERNOON</h4>234 <div>235 <div class="cloud-icon">236 <svg viewBox="0 0 64 40" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">237 <path d="M18 30h28a10 10 0 0 0 0-20 13 13 0 0 0-25-2A11 11 0 1 0 18 30z" />238 </svg>239 </div>240 <div class="big">77°</div>241 </div>242 <div class="rf">RealFeel 77°</div>243 </div>244 <div class="card">245 <h4>TONIGHT</h4>246 <div>247 <div class="cloud-icon">248 <svg viewBox="0 0 64 40" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">249 <path d="M20 30h26a10 10 0 0 0 0-20 13 13 0 0 0-22-6 9 9 0 1 0-4 26z" />250 </svg>251 </div>252 <div class="big">57°</div>253 </div>254 <div class="rf">RealFeel 58°</div>255 </div>256 <div class="card">257 <h4>WED</h4>258 <div>259 <div class="cloud-icon">260 <svg viewBox="0 0 64 40" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">261 <path d="M18 30h28a10 10 0 0 0 0-20 13 13 0 0 0-25-2A11 11 0 1 0 18 30z" />262 </svg>263 </div>264 <div class="big">80°</div>265 </div>266 <div class="rf">RealFeel 82°</div>267 </div>268 </div>269 270 <!-- Details -->271 <div class="details">272 <h2>Today's Details</h2>273 <div class="sub">CURRENT CONDITIONS</div>274 </div>275 276 <!-- Bottom navigation -->277 <div class="bottom-bar">278 <div class="nav-item active">279 <div class="nav-icon"></div>280 Today281 </div>282 <div class="nav-item">283 <div class="nav-icon"></div>284 Hourly285 </div>286 <div class="nav-item">287 <div class="nav-icon"></div>288 Daily289 </div>290 <div class="nav-item">291 <div class="nav-icon"></div>292 Radar & Maps293 </div>294 </div>295 296</div>297</body>298</html>