GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>AccuWeather UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: linear-gradient(180deg,#4d7ec9 0%, #4a7bc6 25%, #3f73c3 55%, #3a6fc1 100%);13 color: #ffffff;14 }15 .status-bar {16 position: absolute;17 top: 0;18 left: 0;19 width: 1080px;20 height: 90px;21 padding: 22px 28px;22 box-sizing: border-box;23 font-weight: 600;24 display: flex;25 align-items: center;26 justify-content: space-between;27 opacity: 0.95;28 }29 .status-left { display:flex; gap:18px; align-items:center; }30 .status-right { display:flex; gap:28px; align-items:center; }31 .icon { width:32px; height:32px; }32 .hamburger {33 position: absolute;34 top: 132px;35 left: 32px;36 width: 80px;37 height: 80px;38 display:flex; align-items:center; justify-content:center;39 }40 .hamburger span {41 display:block; width:44px; height:4px; background:#fff; margin:4px 0; border-radius:3px;42 }43 .header {44 position:absolute;45 top: 118px;46 left: 110px;47 width: 860px;48 height: 120px;49 display:flex; align-items:center; justify-content:space-between;50 }51 .accu-title { font-weight: 700; font-size: 34px; letter-spacing: 0.2px; display:flex; align-items:center; gap:20px; }52 .location { font-size: 40px; font-weight: 700; }53 .premium-btn {54 background:#ff8a3d; color:#fff; font-weight:800;55 padding: 22px 34px; border-radius: 46px; box-shadow: 0 6px 0 rgba(0,0,0,0.15);56 font-size: 30px;57 }58 .subtitle {59 position:absolute; top: 260px; left: 90px; width: 900px; text-align:center;60 font-size: 46px; font-weight:600; opacity:0.95;61 }62 63 /* Dial / Gauge */64 .dial-wrap { position:absolute; top: 350px; left: 90px; width: 900px; height: 900px; }65 .dial-ring {66 position:absolute; inset:0;67 border-radius: 50%;68 background:69 radial-gradient(ellipse at center, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.05) 75%, rgba(0,0,0,0.10) 100%),70 repeating-conic-gradient(from -8deg, rgba(255,255,255,0.25) 0deg, rgba(255,255,255,0.25) 4deg, rgba(255,255,255,0.05) 4.5deg, rgba(255,255,255,0.05) 12deg);71 box-shadow: inset 0 0 80px rgba(0,0,0,0.15);72 }73 .dial-core {74 position:absolute; left: 90px; top: 110px; width: 720px; height: 720px;75 border-radius: 50%;76 background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.18) 30%, rgba(255,255,255,0.10) 60%, rgba(0,0,0,0.15) 100%);77 box-shadow: 0 30px 60px rgba(0,0,0,0.25), inset 0 0 80px rgba(255,255,255,0.18);78 display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;79 }80 .cloud-sun { width: 120px; height: 80px; margin-bottom: 18px; }81 .big-temp { font-size: 170px; font-weight:800; letter-spacing: 2px; line-height: 1; }82 .unit { font-size: 110px; vertical-align: top; opacity: 0.95; }83 .realfeel { font-size: 46px; font-weight:700; margin-top: 18px; opacity:0.95; }84 .next-hours { margin-top: 38px; font-size: 42px; font-weight:700; display:flex; align-items:center; gap:16px; opacity:0.95; }85 .arrow {86 width: 26px; height: 26px;87 border-right: 4px solid #fff; border-top: 4px solid #fff;88 transform: rotate(45deg); margin-top: 4px;89 }90 .ring-label { position:absolute; font-weight:700; color: rgba(255,255,255,0.85); }91 .ring-label.left { left: -10px; top: 430px; font-size: 40px; }92 .ring-label.right { right: -10px; top: 430px; font-size: 40px; }93 .ring-label.bottom { left: 440px; bottom: -30px; font-size: 40px; }94 95 /* Legend */96 .legend {97 position:absolute; top: 1280px; left: 60px; width: 960px; display:flex; gap:28px; align-items:center; font-size: 34px; font-weight:700;98 }99 .dots { display:flex; gap:14px; align-items:center; }100 .dot { width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); }101 .dot.r1 { background:#88c400; } .dot.r2{ background:#b7d200;} .dot.r3{ background:#ffb300;} .dot.r4{ background:#ff6f00;} .dot.r5{ background:#e53935;}102 .dot.s1 { background:#cfd8dc;} .dot.s2{ background:#90caf9;} .dot.s3{ background:#64b5f6;} .dot.s4{ background:#1e88e5;} .dot.s5{ background:#0d47a1;}103 .dot.i1 { background:#f48fb1;} .dot.i2{ background:#ff8a80;} .dot.i3{ background:#e57373;} .dot.i4{ background:#c62828;} .dot.i5{ background:#ad1457;}104 .dot.m1 { background:#7e57c2;} .dot.m2{ background:#9575cd;} .dot.m3{ background:#ba68c8;} .dot.m4{ background:#ce93d8;} .dot.m5{ background:#8e24aa;}105 106 /* Forecast cards */107 .cards {108 position:absolute; top: 1380px; left: 52px; width: 976px; height: 420px;109 background: rgba(255,255,255,0.08); border-radius: 26px; padding: 26px; box-sizing:border-box;110 display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;111 }112 .card {113 background: rgba(255,255,255,0.06);114 border-radius: 18px;115 padding: 30px;116 box-sizing: border-box;117 display:flex; flex-direction:column; justify-content:space-between;118 }119 .card-title { font-size: 40px; font-weight:800; opacity:0.95; }120 .storm { width: 64px; height: 64px; }121 .card-temp { font-size: 100px; font-weight:800; display:flex; align-items:flex-start; gap:8px; }122 .rf { font-size: 34px; font-weight:700; opacity:0.9; }123 .card-top { display:flex; align-items:center; gap:16px; }124 .card-content { display:flex; flex-direction:column; gap:10px; }125 126 /* Details header */127 .details {128 position:absolute; top: 1840px; left: 60px; width: 960px;129 }130 .details h2 { margin:0; font-size: 70px; font-weight:900; }131 .details p { margin:6px 0 0; font-size: 34px; opacity:0.85; letter-spacing:0.5px; }132 133 /* Bottom nav */134 .bottom-nav {135 position:absolute; bottom:0; left:0; width:1080px; height: 200px;136 background: rgba(27,56,116,0.45);137 display:flex; justify-content:space-around; align-items:center;138 border-top: 1px solid rgba(255,255,255,0.2);139 }140 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#e8efff; }141 .nav-icon { width:70px; height:70px; }142 .nav-label { font-size: 34px; font-weight:700; }143 .active { color:#ffffff; }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Status Bar -->150 <div class="status-bar">151 <div class="status-left">152 <div style="font-size:40px;">2:18</div>153 <!-- Simple cellular icon -->154 <svg class="icon" viewBox="0 0 24 24">155 <rect x="2" y="18" width="3" height="4" fill="#fff"/>156 <rect x="7" y="14" width="3" height="8" fill="#fff"/>157 <rect x="12" y="10" width="3" height="12" fill="#fff"/>158 <rect x="17" y="6" width="3" height="16" fill="#fff"/>159 </svg>160 <!-- Wifi -->161 <svg class="icon" viewBox="0 0 24 24">162 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"/>163 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none"/>164 <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none"/>165 <circle cx="12" cy="19" r="2" fill="#fff"/>166 </svg>167 </div>168 <div class="status-right">169 <!-- Upload icon -->170 <svg class="icon" viewBox="0 0 24 24">171 <path d="M12 3v12M8 7l4-4 4 4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>172 <rect x="4" y="15" width="16" height="6" rx="2" fill="#fff" opacity="0.3"/>173 </svg>174 <!-- Dot -->175 <div style="width:10px;height:10px;background:#fff;border-radius:50%;"></div>176 <!-- Wifi-like icon -->177 <svg class="icon" viewBox="0 0 24 24">178 <path d="M12 20l4-4H8l4 4zM12 4v10" stroke="#fff" stroke-width="2" fill="none"/>179 </svg>180 <!-- Battery -->181 <svg class="icon" viewBox="0 0 28 24">182 <rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff" fill="none" stroke-width="2"/>183 <rect x="4" y="8" width="15" height="8" fill="#fff"/>184 <rect x="22" y="10" width="4" height="8" rx="1" fill="#fff"/>185 </svg>186 </div>187 </div>188 189 <!-- Hamburger -->190 <div class="hamburger">191 <span></span><span></span><span></span>192 </div>193 194 <!-- Header -->195 <div class="header">196 <div class="accu-title">197 <div style="font-size:36px; font-weight:800;">AccuWeather</div>198 <div class="location">Tagore Garden, IN</div>199 <svg viewBox="0 0 24 24" width="28" height="28">200 <path d="M6 9l6 6 6-6" stroke="#fff" stroke-width="2" fill="none"/>201 </svg>202 </div>203 <div class="premium-btn">GET PREMIUM+</div>204 </div>205 206 <!-- Subtitle -->207 <div class="subtitle">No precipitation for at least 60 min</div>208 209 <!-- Circular Dial -->210 <div class="dial-wrap">211 <div class="dial-ring"></div>212 <div class="dial-core">213 <!-- Cloud + Sun icon -->214 <svg class="cloud-sun" viewBox="0 0 120 80">215 <!-- sun -->216 <circle cx="82" cy="22" r="12" fill="#ffd977"/>217 <!-- cloud -->218 <ellipse cx="50" cy="44" rx="30" ry="18" fill="#e9f2ff" opacity="0.95"/>219 <ellipse cx="70" cy="44" rx="20" ry="16" fill="#e9f2ff" opacity="0.95"/>220 <ellipse cx="34" cy="48" rx="12" ry="10" fill="#e9f2ff" opacity="0.95"/>221 </svg>222 223 <div class="big-temp">92<span class="unit">°</span></div>224 <div class="realfeel">RealFeel 105°</div>225 <div class="next-hours">Next 4 Hours <div class="arrow"></div></div>226 </div>227 <div class="ring-label left">45</div>228 <div class="ring-label right">15</div>229 <div class="ring-label bottom">30</div>230 </div>231 232 <!-- Legend -->233 <div class="legend">234 <div>Rain</div>235 <div class="dots">236 <div class="dot r1"></div><div class="dot r2"></div><div class="dot r3"></div><div class="dot r4"></div><div class="dot r5"></div>237 </div>238 <div style="margin-left:24px;">Snow</div>239 <div class="dots">240 <div class="dot s1"></div><div class="dot s2"></div><div class="dot s3"></div><div class="dot s4"></div><div class="dot s5"></div>241 </div>242 <div style="margin-left:24px;">Ice</div>243 <div class="dots">244 <div class="dot i1"></div><div class="dot i2"></div><div class="dot i3"></div><div class="dot i4"></div><div class="dot i5"></div>245 </div>246 <div style="margin-left:24px;">Mix</div>247 <div class="dots">248 <div class="dot m1"></div><div class="dot m2"></div><div class="dot m3"></div><div class="dot m4"></div><div class="dot m5"></div>249 </div>250 </div>251 252 <!-- Forecast Cards -->253 <div class="cards">254 <div class="card">255 <div class="card-top">256 <svg class="storm" viewBox="0 0 64 64">257 <path d="M22 44h8l-6 14 18-20h-10l8-16-18 22z" fill="#fff"/>258 <ellipse cx="18" cy="20" rx="10" ry="8" fill="#e9f2ff" opacity="0.9"/>259 <ellipse cx="32" cy="22" rx="13" ry="9" fill="#e9f2ff" opacity="0.9"/>260 <ellipse cx="46" cy="22" rx="9" ry="7" fill="#e9f2ff" opacity="0.9"/>261 </svg>262 <div class="card-title">AFTERNOON</div>263 </div>264 <div class="card-content">265 <div class="card-temp">96<span class="unit">°</span></div>266 <div class="rf">RealFeel 112°</div>267 </div>268 </div>269 270 <div class="card">271 <div class="card-top">272 <svg class="storm" viewBox="0 0 64 64">273 <path d="M22 44h8l-6 14 18-20h-10l8-16-18 22z" fill="#fff"/>274 <ellipse cx="18" cy="20" rx="10" ry="8" fill="#e9f2ff" opacity="0.9"/>275 <ellipse cx="32" cy="22" rx="13" ry="9" fill="#e9f2ff" opacity="0.9"/>276 <ellipse cx="46" cy="22" rx="9" ry="7" fill="#e9f2ff" opacity="0.9"/>277 </svg>278 <div class="card-title">TONIGHT</div>279 </div>280 <div class="card-content">281 <div class="card-temp">83<span class="unit">°</span></div>282 <div class="rf">RealFeel 95°</div>283 </div>284 </div>285 286 <div class="card">287 <div class="card-top">288 <svg class="storm" viewBox="0 0 64 64">289 <path d="M22 44h8l-6 14 18-20h-10l8-16-18 22z" fill="#fff"/>290 <ellipse cx="18" cy="20" rx="10" ry="8" fill="#e9f2ff" opacity="0.9"/>291 <ellipse cx="32" cy="22" rx="13" ry="9" fill="#e9f2ff" opacity="0.9"/>292 <ellipse cx="46" cy="22" rx="9" ry="7" fill="#e9f2ff" opacity="0.9"/>293 </svg>294 <div class="card-title">SUN</div>295 </div>296 <div class="card-content">297 <div class="card-temp">96<span class="unit">°</span></div>298 <div class="rf">RealFeel 111°</div>299 </div>300 </div>301 </div>302 303 <!-- Details -->304 <div class="details">305 <h2>Today's Details</h2>306 <p>CURRENT CONDITIONS</p>307 </div>308 309 <!-- Bottom Navigation -->310 <div class="bottom-nav">311 <div class="nav-item active">312 <svg class="nav-icon" viewBox="0 0 64 64">313 <rect x="8" y="12" width="48" height="40" rx="6" stroke="#fff" stroke-width="4" fill="none"/>314 <rect x="16" y="24" width="16" height="16" fill="#fff"/>315 </svg>316 <div class="nav-label">Today</div>317 </div>318 <div class="nav-item">319 <svg class="nav-icon" viewBox="0 0 64 64">320 <circle cx="32" cy="32" r="22" stroke="#fff" stroke-width="4" fill="none"/>321 <rect x="30" y="14" width="4" height="18" fill="#fff"/>322 <rect x="32" y="32" width="14" height="4" fill="#fff"/>323 </svg>324 <div class="nav-label">Hourly</div>325 </div>326 <div class="nav-item">327 <svg class="nav-icon" viewBox="0 0 64 64">328 <rect x="10" y="14" width="44" height="36" rx="6" stroke="#fff" stroke-width="4" fill="none"/>329 <rect x="18" y="26" width="28" height="16" fill="#fff"/>330 </svg>331 <div class="nav-label">Daily</div>332 </div>333 <div class="nav-item">334 <svg class="nav-icon" viewBox="0 0 64 64">335 <circle cx="32" cy="32" r="8" fill="#fff"/>336 <circle cx="32" cy="32" r="18" stroke="#fff" stroke-width="4" fill="none"/>337 <circle cx="32" cy="32" r="26" stroke="#fff" stroke-width="2" fill="none" opacity="0.6"/>338 </svg>339 <div class="nav-label">Radar & Maps</div>340 </div>341 </div>342 343</div>344</body>345</html>