GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>AccuWeather Radar 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: #1e88ff; /* top bar blue shows through above sections */13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 100px;23 padding: 0 32px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #ffffff;29 font-weight: 600;30 letter-spacing: 0.5px;31 }32 .status-right {33 display: flex; gap: 26px; align-items: center;34 }35 .icon {36 width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;37 }38 /* App bar */39 .app-bar {40 position: absolute;41 top: 100px;42 left: 0;43 width: 1080px;44 height: 220px;45 background: #2576ff;46 box-sizing: border-box;47 padding: 24px 32px;48 display: flex;49 align-items: center;50 gap: 26px;51 }52 .hamburger {53 width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center;54 }55 .title-wrap {56 flex: 1;57 }58 .app-name {59 font-size: 44px; font-weight: 700; opacity: 0.95;60 }61 .location {62 font-size: 52px; font-weight: 700; margin-top: 8px;63 }64 .get-premium {65 background: #ff8a00;66 color: #fff;67 padding: 20px 36px;68 font-weight: 800;69 border-radius: 28px;70 font-size: 36px;71 white-space: nowrap;72 }73 .right-status {74 width: 170px; display: flex; gap: 22px; justify-content: flex-end;75 }76 77 /* Legend toolbar */78 .legend-toolbar {79 position: absolute;80 top: 320px;81 left: 0;82 width: 1080px;83 height: 140px;84 background: #222;85 box-sizing: border-box;86 padding: 16px 24px;87 }88 .legend-row {89 display: flex;90 gap: 28px;91 align-items: center;92 height: 50%;93 }94 .legend-item {95 display: flex;96 align-items: center;97 gap: 16px;98 color: #fff;99 font-weight: 700;100 font-size: 32px;101 }102 .bar {103 width: 220px; height: 28px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.2);104 }105 .rain { background: linear-gradient(90deg,#b9f15f,#7bc043,#ff6f1e,#c62828); }106 .snow { background: linear-gradient(90deg,#cfe8ff,#8bbcff,#2b6cff,#0d2a7a); }107 .ice { background: linear-gradient(90deg,#f4c6de,#e27ab5,#c64099,#8b2b70); }108 .mix { background: linear-gradient(90deg,#caa7ea,#9d76df,#6e43c6,#3d1e8f); }109 110 /* Map area */111 .map-area {112 position: absolute;113 top: 460px;114 left: 0;115 width: 1080px;116 height: 1540px;117 background: #E0E0E0;118 color: #555;119 border-top: 1px solid #bdbdbd;120 border-bottom: 1px solid #bdbdbd;121 display: flex;122 align-items: center;123 justify-content: center;124 text-transform: none;125 font-size: 36px;126 }127 .chip-row {128 position: absolute;129 top: 520px;130 left: 56px;131 display: flex;132 gap: 26px;133 z-index: 2;134 }135 .chip {136 background: rgba(0,0,0,0.75);137 color: #fff;138 padding: 24px 28px;139 border-radius: 40px;140 font-weight: 800;141 font-size: 34px;142 box-shadow: 0 2px 6px rgba(0,0,0,0.25);143 }144 145 /* Timeline overlay */146 .timeline {147 position: absolute;148 left: 40px;149 bottom: 300px;150 width: 1000px;151 height: 150px;152 background: #141414;153 border-radius: 80px;154 color: #fff;155 display: flex;156 align-items: center;157 padding: 0 30px;158 box-sizing: border-box;159 gap: 28px;160 z-index: 3;161 }162 .play {163 width: 120px; height: 120px; border-radius: 60px; background: #1f1f1f; display: flex; align-items: center; justify-content: center;164 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);165 }166 .slider-wrap {167 flex: 1;168 display: flex;169 align-items: center;170 gap: 22px;171 }172 .time-label { font-size: 34px; color: #cfd8dc; width: 170px; }173 .slider {174 flex: 1;175 height: 16px;176 border-radius: 10px;177 background: #eaeaea;178 position: relative;179 }180 .slider::after {181 content: "";182 position: absolute;183 right: -4px;184 top: -18px;185 width: 12px;186 height: 36px;187 background: #fff;188 border-radius: 4px;189 }190 .ticks {191 width: 280px;192 height: 40px;193 color: #cfd8dc;194 font-size: 28px;195 display: flex;196 align-items: center;197 justify-content: center;198 }199 .now {200 font-size: 40px; font-weight: 800;201 }202 203 /* Bottom navigation */204 .bottom-nav {205 position: absolute;206 bottom: 0;207 left: 0;208 width: 1080px;209 height: 200px;210 background: #2a6cff;211 border-top: 1px solid rgba(255,255,255,0.15);212 display: grid;213 grid-template-columns: repeat(4, 1fr);214 color: #e0edff;215 }216 .nav-item {217 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;218 font-size: 34px; font-weight: 700;219 position: relative;220 }221 .nav-item.active {222 background: rgba(255,255,255,0.12);223 color: #ffffff;224 }225 .nav-icon {226 width: 60px; height: 60px; background: transparent;227 display: flex; align-items: center; justify-content: center;228 }229</style>230</head>231<body>232<div id="render-target">233 234 <!-- Status Bar -->235 <div class="status-bar">236 <div style="font-size:46px;">5:20</div>237 <div class="status-right">238 <!-- Location pin -->239 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">240 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>241 </svg>242 <!-- WiFi -->243 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">244 <path d="M12 18.5c.9 0 1.5.6 1.5 1.5S12.9 21.5 12 21.5 10.5 20.9 10.5 20s.6-1.5 1.5-1.5zM2 8.6l2.1 2.1C6.4 8.4 9.1 7.3 12 7.3s5.6 1.1 7.9 3.4L22 8.6C19.2 5.8 15.7 4.3 12 4.3S4.8 5.8 2 8.6zm4.2 4.2l2.1 2.1c1.1-1.1 2.8-1.8 3.7-1.8.9 0 2.6.7 3.7 1.8l2.1-2.1C16.4 10.9 14.2 10 12 10s-4.4.9-5.8 2.8z"/>245 </svg>246 <!-- Battery -->247 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">248 <path d="M2 8h15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm20 2v4h2v-4h-2z"/>249 </svg>250 </div>251 </div>252 253 <!-- App Bar -->254 <div class="app-bar">255 <div class="hamburger">256 <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff">257 <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>258 </svg>259 </div>260 <div class="title-wrap">261 <div class="app-name">AccuWeather</div>262 <div class="location">Berlin, DE ▾</div>263 </div>264 <div class="get-premium">GET PREMIUM+</div>265 </div>266 267 <!-- Legend Toolbar -->268 <div class="legend-toolbar">269 <div class="legend-row" style="margin-bottom:10px;">270 <div class="legend-item"><div class="bar rain"></div>RAIN</div>271 <div class="legend-item"><div class="bar snow"></div>SNOW</div>272 <div class="legend-item"><div class="bar ice"></div>ICE</div>273 <div class="legend-item"><div class="bar mix"></div>MIX</div>274 </div>275 </div>276 277 <!-- Chips above map -->278 <div class="chip-row">279 <div class="chip">280 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" style="margin-right:8px;vertical-align:middle;">281 <path d="M3 5h18v2H3zm3 4h12v2H6zm-3 4h18v2H3zm4 4h10v2H4z"/>282 </svg>283 ALL MAPS284 </div>285 <div class="chip">286 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" style="margin-right:8px;vertical-align:middle;">287 <path d="M3 15c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2v2H3v-2zM6 9c1.2 0 1.6-.8 2.5-.8S9.8 9 11 9s1.6-.8 2.5-.8S15.2 9 16.5 9H6z"/>288 </svg>289 CLOUDS290 </div>291 <div class="chip">292 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" style="margin-right:8px;vertical-align:middle;">293 <path d="M3 17h18v2H3zM3 11h18v2H3zM3 5h18v2H3z"/>294 </svg>295 TEMPERATURE296 </div>297 </div>298 299 <!-- Map Placeholder -->300 <div class="map-area">301 <div style="border:1px solid #BDBDBD; padding:16px 26px; border-radius:12px; background:#f3f3f3; color:#757575;">302 [IMG: Google-style Weather Radar Map of Berlin and surrounding cities]303 </div>304 </div>305 306 <!-- Timeline Overlay -->307 <div class="timeline">308 <div class="play">309 <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff">310 <path d="M8 5v14l11-7z"/>311 </svg>312 </div>313 <div class="slider-wrap">314 <div class="time-label">1:55 PM</div>315 <div class="slider"></div>316 <div class="ticks">3:40 PM</div>317 <div class="now">NOW</div>318 </div>319 </div>320 321 <!-- Bottom Navigation -->322 <div class="bottom-nav">323 <div class="nav-item">324 <div class="nav-icon">325 <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff">326 <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>327 </svg>328 </div>329 Today330 </div>331 <div class="nav-item">332 <div class="nav-icon">333 <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff">334 <path d="M7 10h10v2H7zm0 4h10v2H7zM6 2h2v2h8V2h2v2h2v18H4V4h2z"/>335 </svg>336 </div>337 Hourly338 </div>339 <div class="nav-item">340 <div class="nav-icon">341 <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff">342 <path d="M7 11h3V8H7v3zm0 5h3v-3H7v3zm5-5h3V8h-3v3zm5-8H7a2 2 0 0 0-2 2v16l5-3 5 3 5-3 5 3V5a2 2 0 0 0-2-2z"/>343 </svg>344 </div>345 Daily346 </div>347 <div class="nav-item active">348 <div class="nav-icon">349 <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff">350 <path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 15h-2v-5h2v5zm0-7h-2V8h2v2z"/>351 </svg>352 </div>353 Radar & Maps354 </div>355 </div>356 357</div>358</body>359</html>