GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Easy Timezones - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0f0f10;15 color: #eaeaea;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 height: 96px;22 padding: 18px 24px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #eaeaea;27 font-size: 38px;28 box-sizing: border-box;29 }30 .sb-left, .sb-right {31 display: flex; align-items: center; gap: 18px;32 }33 .dot { width: 10px; height: 10px; background: #bdbdbd; border-radius: 50%; display: inline-block; }34 .icon { width: 40px; height: 40px; fill: #e0e0e0; }35 36 /* App header */37 .app-header {38 display: flex; align-items: center; justify-content: space-between;39 padding: 10px 32px 0 32px;40 }41 .app-brand {42 display: flex; align-items: center; gap: 18px;43 }44 .logo {45 width: 84px; height: 84px; border-radius: 50%;46 background: #E0E0E0; color: #757575; border: 1px solid #BDBDBD;47 display: flex; align-items: center; justify-content: center;48 font-size: 20px;49 }50 .title {51 font-weight: 700;52 font-size: 56px;53 letter-spacing: .2px;54 background: linear-gradient(90deg, #37b2ff, #d64aa7);55 -webkit-background-clip: text;56 background-clip: text;57 color: transparent;58 }59 .header-actions { display: flex; align-items: center; gap: 26px; }60 .header-actions .icon { width: 48px; height: 48px; fill: #eaeaea; opacity: .9; }61 62 /* Group selector */63 .group-line {64 margin: 18px 32px 0 32px;65 padding-bottom: 16px;66 border-bottom: 1px solid #3a3a3a;67 display: flex; align-items: center; justify-content: space-between;68 color: #d9d9d9;69 }70 .group-left { display: flex; align-items: center; gap: 16px; font-size: 40px; }71 .group-right .chev { width: 28px; height: 28px; border: solid #9e9e9e; border-width: 0 4px 4px 0; display: inline-block; transform: rotate(45deg); margin-right: 4px; }72 73 /* Date selector row */74 .toolbar {75 display: flex; align-items: center; gap: 26px;76 padding: 26px 32px 10px 32px;77 }78 .pill {79 flex: 1;80 height: 128px;81 background: #282a2d;82 border-radius: 64px;83 display: flex; align-items: center; justify-content: space-between;84 padding: 0 24px;85 box-sizing: border-box;86 }87 .pill .left, .pill .right { display: flex; align-items: center; gap: 18px; }88 .badge-icon {89 width: 64px; height: 64px; border-radius: 14px;90 border: 2px solid #cfcfcf; display: flex; align-items: center; justify-content: center;91 }92 .date-text { font-size: 40px; color: #e8e8e8; }93 .edit-btn {94 height: 122px;95 padding: 0 38px;96 border-radius: 62px;97 background: #49aee2;98 color: #fff;99 font-size: 40px;100 font-weight: 700;101 display: flex; align-items: center; gap: 18px;102 border: 1px solid rgba(255,255,255,.15);103 }104 .plus {105 width: 54px; height: 54px; border-radius: 50%;106 background: rgba(255,255,255,.2);107 display: flex; align-items: center; justify-content: center;108 }109 110 /* City rows */111 .section { padding: 18px 24px 0 24px; }112 .city-head {113 display: flex; align-items: center; justify-content: space-between;114 padding: 10px 8px;115 }116 .city-left { display: flex; align-items: center; gap: 16px; }117 .city-name { font-size: 44px; font-weight: 700; color: #e7e7e7; }118 .city-chip {119 background: #2b2d31; color: #d7d7d7; font-size: 30px;120 padding: 12px 18px; border-radius: 20px;121 }122 .tag { color: #53b0ff; font-size: 36px; margin-right: 10px; }123 124 .timeline {125 position: relative;126 height: 230px;127 border-radius: 34px;128 overflow: hidden;129 display: grid;130 grid-template-columns: repeat(6, 1fr);131 margin: 8px 8px 24px 8px;132 box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);133 }134 .timeline.dark {135 background: linear-gradient(90deg, #305b6f, #263f4d);136 }137 .timeline.light {138 background: #bdbdbd;139 color: #2e2e2e;140 }141 .cell {142 display: flex; flex-direction: column; align-items: center; justify-content: center;143 color: #e9f0f3;144 }145 .light .cell { color: #2f2f2f; }146 .cell .h { font-size: 48px; font-weight: 600; }147 .cell .ampm { font-size: 30px; opacity: .9; margin-top: 4px; }148 149 .timeline .date-label {150 position: absolute; right: 18px; top: 14px; font-size: 30px; color: rgba(255,255,255,.85);151 }152 .light .date-label { color: rgba(0,0,0,.6); }153 154 /* Now vertical indicator spanning both timelines */155 .now-line {156 position: absolute;157 left: 540px; /* aligned over both bars to visually match screenshot center-ish */158 top: 640px; /* first timeline approximate top */159 width: 2px;160 height: 520px; /* spans both timelines */161 background: #d38bdc;162 box-shadow: 0 0 8px rgba(211,139,220,.6);163 pointer-events: none;164 }165 166 /* Bottom spacer */167 .spacer { height: 900px; }168 169 /* Ad banner */170 .ad {171 position: absolute;172 left: 48px; right: 48px; bottom: 118px;173 height: 170px;174 background: #ffffff;175 color: #222;176 border-radius: 22px;177 box-shadow: 0 8px 22px rgba(0,0,0,.32);178 display: flex; align-items: center; padding: 18px 24px; gap: 22px;179 }180 .ad .img {181 width: 120px; height: 120px;182 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 26px;183 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; text-align: center; padding: 8px;184 }185 .ad .info { flex: 1; }186 .ad .title { font-size: 44px; font-weight: 600; }187 .ad .sub { font-size: 30px; color: #3e7b43; display: flex; align-items: center; gap: 10px; margin-top: 6px; }188 .ad .open {189 background: #2b9e5a; color: #fff; border: none; font-weight: 700;190 font-size: 40px; border-radius: 44px; padding: 26px 44px;191 }192 193 /* Home indicator */194 .home-ind {195 position: absolute; bottom: 36px; left: 50%;196 width: 300px; height: 10px; transform: translateX(-50%);197 background: #d9d9d9; border-radius: 10px; opacity: .9;198 }199 200 /* Small helpers for icons */201 .icon-btn { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }202 .muted { opacity: .85; }203</style>204</head>205<body>206<div id="render-target">207 208 <!-- Status Bar -->209 <div class="status-bar">210 <div class="sb-left">211 <div>9:31</div>212 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2c-2 0-3 1-3 3v2H7l1 12h8l1-12h-2V5c0-2-1-3-3-3zm0 2c1 0 1 .5 1 1v2h-2V5c0-.5 0-1 1-1z"/></svg>213 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3a6 6 0 016 6v3l2 3H4l2-3V9a6 6 0 016-6zM9 19a3 3 0 006 0H9z"/></svg>214 <svg class="icon" viewBox="0 0 24 24"><path d="M10 20l6-8-6-8v16z"/></svg>215 <svg class="icon" viewBox="0 0 24 24"><path d="M10 18l6-6-6-6v12z"/></svg>216 <span class="dot"></span>217 </div>218 <div class="sb-right">219 <svg class="icon" viewBox="0 0 24 24"><path d="M4 10h16v4H4z"/></svg>220 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l8 6H4l8-6zm0 18a9 9 0 009-9H3a9 9 0 009 9z"/></svg>221 <svg class="icon" viewBox="0 0 24 24"><path d="M7 18h10v2H7zM9 4h6l1 12H8L9 4z"/></svg>222 </div>223 </div>224 225 <!-- App Header -->226 <div class="app-header">227 <div class="app-brand">228 <div class="logo">App</div>229 <div class="title">Easy Timezones</div>230 </div>231 <div class="header-actions">232 <!-- Share -->233 <svg class="icon" viewBox="0 0 24 24"><path d="M18 8a3 3 0 10-2.8-4H15a3 3 0 00.2 1L8.9 9a3 3 0 100 6l6.3 4a3 3 0 10.8-1.8l-6.3-4a3 3 0 000-1.6l6.3-4A3 3 0 0018 8z"/></svg>234 <!-- Gear -->235 <svg class="icon" viewBox="0 0 24 24"><path d="M12 8a4 4 0 110 8 4 4 0 010-8zm8 4l2 1-1 2-2-1a7 7 0 01-1 1l1 2-2 1-1-2a7 7 0 01-2 0l-1 2-2-1 1-2a7 7 0 01-1-1l-2 1-1-2 2-1a7 7 0 010-2l-2-1 1-2 2 1a7 7 0 011-1L9 3l2-1 1 2a7 7 0 012 0l1-2 2 1-1 2a7 7 0 011 1l2-1 1 2-2 1a7 7 0 010 2z"/></svg>236 </div>237 </div>238 239 <!-- Group selector line -->240 <div class="group-line">241 <div class="group-left">242 <svg class="icon" viewBox="0 0 24 24"><path d="M3 17h18v2H3zM5 7h10v2H5zM5 11h14v2H5z"/></svg>243 <div>Main Group</div>244 </div>245 <div class="group-right"><i class="chev"></i></div>246 </div>247 248 <!-- Toolbar -->249 <div class="toolbar">250 <div class="pill">251 <div class="left">252 <svg class="icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>253 <div class="badge-icon">254 <svg class="icon" viewBox="0 0 24 24"><path d="M7 3h2v2h6V3h2v2h3v16H4V5h3V3zm0 6h10v10H7V9z"/></svg>255 </div>256 <div class="date-text">Mon, Jan 8, 2024</div>257 </div>258 <div class="right">259 <svg class="icon" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>260 </div>261 </div>262 <div class="icon-btn">263 <svg class="icon" viewBox="0 0 24 24"><path d="M12 5v2a5 5 0 015 5h2a7 7 0 00-7-7zm0 14a7 7 0 01-7-7H3a9 9 0 009 9v-2z"/></svg>264 </div>265 <div class="edit-btn">266 Edit267 <div class="plus">268 <svg class="icon" viewBox="0 0 24 24"><path d="M11 5h2v14h-2zM5 11h14v2H5z" fill="#fff"/></svg>269 </div>270 </div>271 </div>272 273 <!-- Dawson Creek -->274 <div class="section">275 <div class="city-head">276 <div class="city-left">277 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l8 6v12h-6v-6H10v6H4V9l8-6z"/></svg>278 <div class="city-name">Dawson Creek</div>279 </div>280 <div class="city-chip">9:01pm | Mon 08 | MST</div>281 </div>282 <div class="timeline dark">283 <div class="date-label">Monday, January 8, 2024</div>284 <div class="cell"><div class="h">6</div><div class="ampm">pm</div></div>285 <div class="cell"><div class="h">7</div><div class="ampm">pm</div></div>286 <div class="cell"><div class="h">8</div><div class="ampm">pm</div></div>287 <div class="cell"><div class="h">9</div><div class="ampm">pm</div></div>288 <div class="cell"><div class="h">10</div><div class="ampm">pm</div></div>289 <div class="cell"><div class="h">11</div><div class="ampm">pm</div></div>290 </div>291 </div>292 293 <!-- Sydney -->294 <div class="section">295 <div class="city-head">296 <div class="city-left">297 <div class="tag">+18</div>298 <div class="city-name">Sydney</div>299 </div>300 <div class="city-chip">3:01pm | Tue 09 | AEDT</div>301 </div>302 <div class="timeline light">303 <div class="date-label">Tuesday, January 9, 2024</div>304 <div class="cell"><div class="h">12</div><div class="ampm">pm</div></div>305 <div class="cell"><div class="h">1</div><div class="ampm">pm</div></div>306 <div class="cell"><div class="h">2</div><div class="ampm">pm</div></div>307 <div class="cell"><div class="h">3</div><div class="ampm">pm</div></div>308 <div class="cell"><div class="h">4</div><div class="ampm">pm</div></div>309 <div class="cell"><div class="h">5</div><div class="ampm">pm</div></div>310 </div>311 </div>312 313 <!-- Vertical now line -->314 <div class="now-line"></div>315 316 <div class="spacer"></div>317 318 <!-- Ad banner -->319 <div class="ad">320 <div class="img">[IMG: App Icon]</div>321 <div class="info">322 <div class="title">Hong’s Kitchen</div>323 <div class="sub">324 <svg class="icon" viewBox="0 0 24 24" style="width:30px;height:30px;fill:#2e7d32;"><path d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z"/></svg>325 Installed326 </div>327 </div>328 <button class="open">Open</button>329 </div>330 331 <!-- Home indicator -->332 <div class="home-ind"></div>333</div>334</body>335</html>