GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Weather UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: linear-gradient(180deg, #163953 0%, #0d2740 45%, #0a2339 100%);14 color: #e8f0f7;15 }16 17 /* Top App Bar */18 .app-bar {19 position: absolute;20 left: 0;21 right: 0;22 top: 90px;23 height: 140px;24 padding: 0 40px;25 }26 .app-bar .row {27 display: flex;28 align-items: center;29 justify-content: space-between;30 }31 .menu-icon {32 width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;33 }34 .menu-icon svg rect { fill: #e8f0f7; }35 .brand {36 display: flex; flex-direction: column;37 margin-left: 12px;38 }39 .brand .appname { font-weight: 600; font-size: 30px; opacity: 0.85; }40 .brand .location { font-size: 44px; font-weight: 700; margin-top: 6px; }41 .brand .location .chev {42 display: inline-block; vertical-align: middle; margin-left: 10px;43 }44 .premium-btn {45 background: #ff7a44; color: #fff; padding: 18px 28px; border-radius: 30px;46 font-weight: 800; font-size: 28px; box-shadow: 0 6px 12px rgba(0,0,0,0.25);47 }48 .divider {49 position: absolute; left: 0; right: 0; top: 230px; height: 1px; background: #34536c; opacity: 0.7;50 }51 52 /* Precipitation message */53 .precip-msg {54 position: absolute; top: 270px; left: 0; right: 0; text-align: center;55 font-size: 44px; font-weight: 600; opacity: 0.9;56 }57 .time-marker {58 position: absolute; top: 370px; left: 0; right: 0; text-align: center; font-size: 30px; opacity: 0.9;59 }60 .time-marker:after {61 content: ""; display: block; margin: 12px auto 0; width: 2px; height: 40px; background: #c9d6df; opacity: 0.7;62 }63 64 /* Dial */65 .dial {66 position: absolute;67 top: 420px; left: 50%; transform: translateX(-50%);68 width: 880px; height: 880px;69 }70 .dial .ticks {71 position: absolute; inset: 0; border-radius: 50%;72 background:73 radial-gradient(closest-side, transparent 72%, transparent 73%, rgba(255,255,255,0.06) 73.5%, transparent 74%),74 repeating-conic-gradient(from -8deg,75 rgba(255,255,255,0.22) 0deg 6deg,76 transparent 6deg 16deg);77 filter: blur(0.2px);78 }79 .dial .core {80 position: absolute; top: 80px; left: 80px; width: 720px; height: 720px; border-radius: 50%;81 background: radial-gradient(120% 120% at 30% 20%, #2c5473 0%, #1d445f 35%, #163953 60%, #0f304b 100%);82 box-shadow: inset 0 80px 180px rgba(0,0,0,0.35);83 display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;84 }85 .weather-icon { width: 120px; height: 120px; margin-bottom: 24px; opacity: 0.9; }86 .temp { font-size: 160px; font-weight: 700; line-height: 1; letter-spacing: 2px; }87 .temp .unit { font-size: 60px; font-weight: 600; margin-left: 14px; opacity: 0.9; }88 .realfeel { margin-top: 20px; font-size: 40px; opacity: 0.9; }89 .next { margin-top: 36px; font-size: 40px; font-weight: 700; display: inline-flex; align-items: center; gap: 12px; }90 .next svg { width: 26px; height: 26px; }91 92 .dial .label {93 position: absolute; color: #a9b9c7; font-size: 32px; opacity: 0.45;94 }95 .dial .label.l45 { left: -20px; top: 50%; transform: translateY(-50%); }96 .dial .label.l30 { left: 50%; transform: translateX(-50%); bottom: -40px; }97 .dial .label.l15 { right: -20px; top: 50%; transform: translateY(-50%); }98 99 /* Legend */100 .legend {101 position: absolute; top: 1330px; left: 60px; right: 60px; display: flex; align-items: center; gap: 40px;102 font-size: 30px; opacity: 0.9;103 }104 .legend .group { display: flex; align-items: center; gap: 16px; }105 .dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 2px solid rgba(255,255,255,0.25); }106 .rain1{background:#9ad935} .rain2{background:#f6cc2d} .rain3{background:#ff9f1c} .rain4{background:#ff6b6b} .rain5{background:#ff3b3b}107 .snow1{background:#a7caf3} .snow2{background:#79aef0} .snow3{background:#3d8fe6} .snow4{background:#0066cc}108 .ice1{background:#f7a1c8} .ice2{background:#f48fb1} .ice3{background:#ee6fa5}109 .mix1{background:#b688ff} .mix2{background:#a066ff} .mix3{background:#8a49ff}110 111 /* Forecast Cards */112 .forecast {113 position: absolute; top: 1410px; left: 50px; right: 50px; background: rgba(12, 34, 54, 0.85);114 border-radius: 28px; padding: 34px 30px; box-shadow: 0 10px 24px rgba(0,0,0,0.35);115 display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;116 }117 .card { border-right: 1px solid rgba(255,255,255,0.1); padding: 0 24px; }118 .card:last-child { border-right: none; }119 .card .title { font-size: 30px; font-weight: 800; letter-spacing: 1px; opacity: 0.85; margin-bottom: 26px; }120 .card .line { display: flex; align-items: center; gap: 18px; }121 .card .line svg { width: 44px; height: 44px; opacity: 0.9; }122 .card .temp { font-size: 64px; font-weight: 800; }123 .card .rf { margin-top: 8px; font-size: 28px; opacity: 0.8; }124 125 /* Details Heading */126 .details {127 position: absolute; top: 1680px; left: 60px;128 }129 .details h2 { margin: 0; font-size: 64px; font-weight: 800; }130 .details .sub { margin-top: 12px; font-size: 32px; letter-spacing: 1px; color: #93a7b7; }131 132 /* Bottom Nav */133 .bottom-nav {134 position: absolute; bottom: 130px; left: 0; right: 0; height: 160px;135 background: rgba(10, 27, 43, 0.96); border-top: 1px solid rgba(255,255,255,0.07);136 display: grid; grid-template-columns: repeat(4, 1fr);137 align-items: center; padding: 0 40px;138 }139 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #cfe0ee; }140 .nav-item.active { color: #ffffff; font-weight: 800; }141 .nav-item svg { width: 64px; height: 64px; opacity: 0.9; }142 .nav-item .label { font-size: 28px; }143 144 /* Home indicator */145 .home-indicator {146 position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);147 width: 220px; height: 12px; background: rgba(255,255,255,0.85); border-radius: 8px;148 }149</style>150</head>151<body>152<div id="render-target">153 <!-- Top Bar -->154 <div class="app-bar">155 <div class="row">156 <div style="display:flex; align-items:center;">157 <div class="menu-icon" aria-label="Menu">158 <svg viewBox="0 0 24 24">159 <rect x="3" y="5" width="18" height="2"></rect>160 <rect x="3" y="11" width="14" height="2"></rect>161 <rect x="3" y="17" width="10" height="2"></rect>162 </svg>163 </div>164 <div class="brand">165 <div class="appname">AccuWeather</div>166 <div class="location">Berlin, DE167 <span class="chev">168 <svg viewBox="0 0 24 24" width="30" height="30">169 <path d="M6 9l6 6 6-6" fill="none" stroke="#e8f0f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>170 </svg>171 </span>172 </div>173 </div>174 </div>175 <div class="premium-btn">GET PREMIUM+</div>176 </div>177 </div>178 <div class="divider"></div>179 180 <!-- Center message -->181 <div class="precip-msg">No precipitation for at least 60 min</div>182 <div class="time-marker">7:26 PM</div>183 184 <!-- Dial -->185 <div class="dial">186 <div class="ticks"></div>187 <div class="core">188 <svg class="weather-icon" viewBox="0 0 24 24">189 <path d="M9 17a5 5 0 1 1 6.2-7.8 7 7 0 0 0 5.3 9.6 8 8 0 0 1-11.5-1.8z" fill="none" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>190 <path d="M16.2 9.2c.6-1.6 2.2-2.8 4-2.8-1 2.5-3.2 3.6-5.1 3.2" fill="none" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>191 </svg>192 <div class="temp">19° <span class="unit">C</span></div>193 <div class="realfeel">RealFeel 17°</div>194 <div class="next">Next 4 Hours195 <svg viewBox="0 0 24 24">196 <path d="M9 5l7 7-7 7" fill="none" stroke="#e8f0f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>197 </svg>198 </div>199 </div>200 <div class="label l45">45</div>201 <div class="label l30">30</div>202 <div class="label l15">15</div>203 </div>204 205 <!-- Legend -->206 <div class="legend">207 <div class="group">208 <span>Rain</span>209 <span class="dot rain1"></span>210 <span class="dot rain2"></span>211 <span class="dot rain3"></span>212 <span class="dot rain4"></span>213 <span class="dot rain5"></span>214 </div>215 <div class="group">216 <span>Snow</span>217 <span class="dot snow1"></span>218 <span class="dot snow2"></span>219 <span class="dot snow3"></span>220 <span class="dot snow4"></span>221 </div>222 <div class="group">223 <span>Ice</span>224 <span class="dot ice1"></span>225 <span class="dot ice2"></span>226 <span class="dot ice3"></span>227 </div>228 <div class="group">229 <span>Mix</span>230 <span class="dot mix1"></span>231 <span class="dot mix2"></span>232 <span class="dot mix3"></span>233 </div>234 </div>235 236 <!-- Forecast cards -->237 <div class="forecast">238 <div class="card">239 <div class="title">TONIGHT</div>240 <div class="line">241 <svg viewBox="0 0 24 24">242 <path d="M11 18a6 6 0 1 1 7.3-9.2 7 7 0 0 0 5 9.2 8 8 0 0 1-12.3 0z" fill="none" stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>243 </svg>244 <div class="temp">12°</div>245 </div>246 <div class="rf">RealFeel 11°</div>247 </div>248 <div class="card">249 <div class="title">TUE</div>250 <div class="line">251 <svg viewBox="0 0 24 24">252 <circle cx="12" cy="12" r="4.5" fill="none" stroke="#ffffff" stroke-width="1.6"></circle>253 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1" stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" fill="none"/>254 </svg>255 <div class="temp">25°</div>256 </div>257 <div class="rf">RealFeel 26°</div>258 </div>259 <div class="card">260 <div class="title">TUE NIGHT</div>261 <div class="line">262 <svg viewBox="0 0 24 24">263 <path d="M10.5 18a6 6 0 1 1 7.3-9.2 7 7 0 0 0 5 9.2 8 8 0 0 1-12.3 0z" fill="none" stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>264 </svg>265 <div class="temp">15°</div>266 </div>267 <div class="rf">RealFeel 15°</div>268 </div>269 </div>270 271 <!-- Details section -->272 <div class="details">273 <h2>Today's Details</h2>274 <div class="sub">CURRENT CONDITIONS</div>275 </div>276 277 <!-- Bottom navigation -->278 <div class="bottom-nav">279 <div class="nav-item active">280 <svg viewBox="0 0 24 24">281 <rect x="4" y="3" width="16" height="18" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="1.6"/>282 <rect x="7" y="7" width="4" height="4" fill="#ffffff"/>283 </svg>284 <div class="label">Today</div>285 </div>286 <div class="nav-item">287 <svg viewBox="0 0 24 24">288 <circle cx="12" cy="12" r="8" fill="none" stroke="#ffffff" stroke-width="1.6"/>289 <path d="M12 6v6l4 2" stroke="#ffffff" stroke-width="1.6" fill="none" stroke-linecap="round"/>290 </svg>291 <div class="label">Hourly</div>292 </div>293 <div class="nav-item">294 <svg viewBox="0 0 24 24">295 <rect x="3" y="4" width="18" height="15" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="1.6"/>296 <path d="M7 2v4M17 2v4M3 9h18" stroke="#ffffff" stroke-width="1.6"/>297 <rect x="7" y="11" width="4" height="4" fill="#ffffff"/>298 </svg>299 <div class="label">Daily</div>300 </div>301 <div class="nav-item">302 <svg viewBox="0 0 24 24">303 <circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="1.6"/>304 <path d="M12 12c2.5-.5 4.5-2.5 5-5M12 12c-2.5.5-4.5 2.5-5 5" stroke="#ffffff" stroke-width="1.6" fill="none" stroke-linecap="round"/>305 </svg>306 <div class="label">Radar & Maps</div>307 </div>308 </div>309 310 <div class="home-indicator"></div>311</div>312</body>313</html>