GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1">5<title>Time Picker Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #0b2f5c;14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 94px;24 padding: 0 28px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #fff;30 font-weight: 600;31 letter-spacing: 1px;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 18px;37 }38 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; }39 40 /* App bar */41 .app-bar {42 position: absolute;43 top: 94px;44 left: 0;45 width: 1080px;46 height: 132px;47 background: #103a72;48 display: flex;49 align-items: center;50 padding: 0 28px;51 box-sizing: border-box;52 gap: 26px;53 }54 .hamburger {55 width: 56px; height: 56px; position: relative;56 }57 .hamburger span {58 position: absolute; left: 6px; right: 6px; height: 6px; background: #fff; border-radius: 3px;59 }60 .hamburger span:nth-child(1){ top: 10px; }61 .hamburger span:nth-child(2){ top: 24px; }62 .hamburger span:nth-child(3){ top: 38px; }63 .title {64 font-size: 54px; font-weight: 700; flex: 1;65 }66 .top-icons { display: flex; gap: 32px; }67 .icon {68 width: 58px; height: 58px;69 }70 .icon svg { width: 100%; height: 100%; fill: none; stroke: #cfe3ff; stroke-width: 4; }71 72 /* Content/background list area */73 .content {74 position: absolute;75 top: 226px;76 left: 0;77 width: 1080px;78 height: 2174px;79 background: #0f1217;80 color: #cfd8dc;81 overflow: hidden;82 }83 .section-header {84 background: #20344b;85 color: #a7c1e8;86 padding: 22px 28px;87 font-size: 44px;88 font-weight: 700;89 }90 .card {91 margin: 14px 18px;92 background: #1b1f25;93 border-radius: 14px;94 padding: 26px;95 color: #e6effa;96 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);97 }98 .card .title {99 font-size: 44px; font-weight: 700;100 }101 .meta { margin-top: 16px; color: #9fb1c3; font-size: 32px; display: flex; gap: 26px; align-items: center; }102 .pill {103 position: absolute;104 left: 28px;105 top: 520px;106 right: 28px;107 height: 100px;108 background: #1c5ea7;109 border-radius: 8px;110 display: flex;111 align-items: center;112 padding: 0 22px;113 box-sizing: border-box;114 color: #e7f1ff;115 font-size: 44px;116 font-weight: 700;117 }118 .pill .save {119 margin-left: auto;120 background: #2e6fc9;121 color: #e9f2ff;122 padding: 12px 26px;123 border-radius: 8px;124 font-size: 36px;125 }126 127 /* Dim overlay */128 .overlay {129 position: absolute;130 inset: 0;131 background: rgba(0,0,0,0.55);132 }133 134 /* Time picker dialog */135 .dialog {136 position: absolute;137 top: 670px;138 left: 115px;139 width: 850px;140 height: 560px;141 background: #3a3c41;142 border-radius: 10px;143 box-shadow: 0 20px 60px rgba(0,0,0,0.7);144 padding: 56px 46px 90px;145 box-sizing: border-box;146 color: #fff;147 }148 .selectors {149 display: grid;150 grid-template-columns: 1fr 40px 1fr 1fr;151 column-gap: 24px;152 align-items: center;153 justify-items: center;154 }155 .colon {156 font-size: 84px; color: #9ec8ff; margin-top: 8px;157 }158 .wheel {159 width: 220px;160 text-align: center;161 }162 .wheel .prev,163 .wheel .next {164 color: #9aa0a6;165 font-size: 48px;166 opacity: 0.6;167 }168 .wheel .current {169 font-size: 86px;170 font-weight: 700;171 margin: 10px 0;172 }173 .underline {174 height: 4px;175 background: #5aa9ff;176 margin-top: 8px;177 border-radius: 2px;178 }179 .am-pm .current { font-size: 76px; }180 .actions {181 position: absolute;182 right: 34px;183 bottom: 26px;184 display: flex;185 gap: 44px;186 font-size: 42px;187 color: #77b3ff;188 font-weight: 700;189 }190 191 /* Bottom Ad mock */192 .adbar {193 position: absolute;194 left: 0;195 bottom: 0;196 width: 1080px;197 height: 164px;198 background: #0e1a26;199 border-top: 1px solid rgba(255,255,255,0.08);200 display: flex;201 align-items: center;202 padding: 0 24px;203 box-sizing: border-box;204 color: #d2e7ff;205 gap: 20px;206 }207 .ad-icon {208 width: 120px; height: 120px; background: #E0E0E0;209 border: 1px solid #BDBDBD; border-radius: 24px; color: #555;210 display: flex; align-items: center; justify-content: center; font-weight: 700;211 }212 .ad-title { font-size: 46px; flex: 1; }213 .ad-installed { color: #9be5a5; font-size: 34px; }214 .ad-btn {215 background: #2fc46b;216 color: #063a16;217 padding: 20px 48px;218 border-radius: 60px;219 font-weight: 800;220 font-size: 44px;221 }222</style>223</head>224<body>225<div id="render-target">226 <!-- Status bar -->227 <div class="status-bar">228 <div style="display:flex; align-items:center; gap:14px;">229 <span style="font-size:40px;">6:49</span>230 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>231 </div>232 <div class="status-icons">233 <!-- WiFi -->234 <svg width="42" height="42" viewBox="0 0 24 24">235 <path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18l2 2-2 2-2-2z" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>236 </svg>237 <!-- Battery -->238 <svg width="42" height="42" viewBox="0 0 24 24">239 <rect x="2" y="7" width="18" height="10" rx="2" stroke="#ffffff" fill="none" stroke-width="2"/>240 <rect x="4" y="9" width="10" height="6" fill="#ffffff"/>241 <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>242 </svg>243 </div>244 </div>245 246 <!-- App Bar -->247 <div class="app-bar">248 <div class="hamburger" aria-label="menu">249 <span></span><span></span><span></span>250 </div>251 <div class="title">Tasks</div>252 <div class="top-icons">253 <!-- add/reminder icon -->254 <div class="icon">255 <svg viewBox="0 0 24 24">256 <circle cx="12" cy="12" r="8" stroke-width="2"></circle>257 <path d="M12 8v8M8 12h8" stroke-width="2"></path>258 </svg>259 </div>260 <!-- check icon -->261 <div class="icon">262 <svg viewBox="0 0 24 24">263 <circle cx="12" cy="12" r="9" stroke-width="2"></circle>264 <path d="M7 12l3 3 7-7" stroke-width="2"></path>265 </svg>266 </div>267 <!-- search icon -->268 <div class="icon">269 <svg viewBox="0 0 24 24">270 <circle cx="10" cy="10" r="7" stroke-width="2"></circle>271 <path d="M15 15l6 6" stroke-width="2"></path>272 </svg>273 </div>274 </div>275 </div>276 277 <!-- Content/List -->278 <div class="content">279 <div class="section-header">Tomorrow</div>280 <div class="card">281 <div class="title">Catch Subway</div>282 <div class="meta">283 <span>08:00 AM</span>284 <span>1 day</span>285 <span>Thu, Sep 28, 2023</span>286 </div>287 </div>288 289 <div class="card">290 <div class="title">Yoga classes</div>291 <div class="meta"><span>10:00 AM</span><span>Weekly</span></div>292 </div>293 294 <div class="card">295 <div class="title">Dance performance</div>296 <div class="meta"><span>06:55 PM</span><span>Today</span></div>297 </div>298 299 <div class="card">300 <div class="title">Christmas Dinner with family</div>301 <div class="meta"><span>10:30 PM</span><span>Mon, Dec 25, 2023</span></div>302 </div>303 304 <div class="card">305 <div class="title">Cooking Lunch</div>306 <div class="meta"><span>02:00 PM</span><span>Once</span></div>307 </div>308 </div>309 310 <!-- Floating blue reminder bar behind the dialog -->311 <div class="pill">312 <div style="display:flex; align-items:center; gap:18px;">313 <div style="width:54px;height:54px;border-radius:50%;background:#2b7ddd;display:flex;align-items:center;justify-content:center;">314 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#eaf3ff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>315 </div>316 Add Reminder317 </div>318 <div class="save">SAVE</div>319 </div>320 321 <!-- Dim and dialog -->322 <div class="overlay"></div>323 324 <div class="dialog">325 <div class="selectors">326 <div class="wheel">327 <div class="prev">5</div>328 <div class="current">6</div>329 <div class="next">7</div>330 <div class="underline"></div>331 </div>332 <div class="colon">:</div>333 <div class="wheel">334 <div class="prev">54</div>335 <div class="current">55</div>336 <div class="next">56</div>337 <div class="underline"></div>338 </div>339 <div class="wheel am-pm">340 <div class="prev">AM</div>341 <div class="current">PM</div>342 <div class="next" style="opacity:.15;"> </div>343 <div class="underline"></div>344 </div>345 </div>346 <div class="actions">347 <div>CANCEL</div>348 <div>OK</div>349 </div>350 </div>351 352 <!-- Bottom ad -->353 <div class="adbar">354 <div class="ad-icon">[IMG]</div>355 <div class="ad-title">Omio</div>356 <div class="ad-installed">Installed</div>357 <div class="ad-btn">Open</div>358 </div>359</div>360</body>361</html>