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>Calendar Time Picker UI</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #f6f6f6;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 padding: 28px 36px 0 36px;25 box-sizing: border-box;26 color: #fff;27 display: flex;28 align-items: center;29 justify-content: space-between;30 font-weight: 600;31 letter-spacing: 0.2px;32 }33 .status-left { font-size: 36px; }34 .status-right {35 display: flex;36 align-items: center;37 gap: 18px;38 color: #fff;39 font-size: 32px;40 }41 .icon {42 display: inline-flex;43 align-items: center;44 justify-content: center;45 }46 .icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 4; }47 48 /* Top app bar */49 .app-bar {50 position: absolute;51 top: 110px;52 left: 0;53 width: 1080px;54 height: 140px;55 padding: 26px 36px;56 box-sizing: border-box;57 display: flex;58 align-items: center;59 justify-content: space-between;60 color: #222;61 }62 .app-left {63 display: flex;64 align-items: center;65 gap: 26px;66 }67 .calendar-square {68 width: 62px; height: 62px; border-radius: 12px; border: 3px solid #707070; position: relative;69 }70 .calendar-square::after {71 content: "";72 position: absolute;73 width: 18px; height: 18px; background: #d74b4b; border-radius: 50%;74 top: -6px; left: -6px;75 }76 .hamburger { width: 72px; height: 60px; }77 .hamburger svg { width: 72px; height: 60px; stroke: #7a7a7a; stroke-width: 8; }78 .month-title {79 position: absolute; left: 50%; transform: translateX(-50%);80 font-size: 46px; font-weight: 700;81 }82 .month-title .chev {83 display: inline-block; margin-left: 10px; width: 18px; height: 18px; border: 2px solid #666; border-top: none; border-left: none;84 transform: rotate(45deg); position: relative; top: -8px;85 }86 .overflow-btn {87 width: 72px; height: 72px; border-radius: 50%; border: 2px solid #bbb; display: flex; align-items: center; justify-content: center; color: #777; font-size: 46px;88 }89 90 /* Form card (underlay content) */91 .form-card {92 position: absolute;93 top: 250px;94 left: 0;95 width: 1080px;96 height: 2080px;97 background: #ffffff;98 border-top-left-radius: 40px;99 border-top-right-radius: 40px;100 box-shadow: 0 2px 14px rgba(0,0,0,0.04);101 padding: 50px 60px 120px;102 box-sizing: border-box;103 color: #222;104 }105 .right-action {106 position: absolute; right: 40px; top: 40px; font-size: 40px; font-weight: 700; color: #4d4d4d;107 }108 .section-label {109 font-size: 24px; color: #666; letter-spacing: 1px; margin-top: 20px; margin-bottom: 16px;110 }111 h1.title {112 font-size: 86px; margin: 10px 0 40px; font-weight: 800; color: #111;113 }114 .row {115 display: flex; align-items: center; justify-content: space-between;116 padding: 24px 0; font-size: 34px; border-bottom: 1px solid #e5e5e5; color: #111;117 }118 .toggle {119 width: 120px; height: 60px; background: #e0e0e0; border-radius: 60px; position: relative;120 }121 .toggle::after {122 content: ""; position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; background: #bdbdbd; border-radius: 50%;123 }124 125 .img-placeholder {126 background: #E0E0E0;127 border: 1px solid #BDBDBD;128 color: #757575;129 display: flex; align-items: center; justify-content: center;130 font-size: 30px;131 }132 .location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }133 .invitee { width: 420px; height: 420px; border-radius: 16px; }134 135 /* Overlay and dialog */136 .overlay {137 position: absolute; left: 0; top: 0; width: 100%; height: 100%;138 background: rgba(0,0,0,0.45);139 }140 .time-dialog {141 position: absolute;142 left: 50%;143 top: 680px;144 transform: translateX(-50%);145 width: 840px;146 height: 980px;147 background: #fff;148 border-radius: 12px;149 box-shadow: 0 10px 30px rgba(0,0,0,0.3);150 overflow: hidden;151 }152 .time-head {153 height: 190px; background: #4285f4; color: #fff; display: flex; align-items: center; padding: 0 40px; box-sizing: border-box;154 }155 .time-head .main {156 font-size: 150px; font-weight: 700; line-height: 1; margin-right: 16px;157 }158 .time-head .half { font-size: 42px; font-weight: 700; margin-left: 22px; align-self: flex-end; margin-bottom: 18px; }159 .time-head .pm { color: rgba(255,255,255,0.6); margin-left: 16px; }160 161 .time-body {162 padding: 40px;163 }164 .clock {165 position: relative;166 width: 600px; height: 600px;167 margin: 0 auto 40px;168 background: #f0f0f0;169 border-radius: 50%;170 }171 .clock .num {172 position: absolute;173 font-size: 34px; color: #222;174 }175 /* approximate positions around the dial */176 .n12 { left: 290px; top: 52px; }177 .n1 { left: 470px; top: 120px; }178 .n2 { left: 568px; top: 220px; }179 .n3 { left: 620px; top: 300px; }180 .n4 { left: 580px; top: 420px; }181 .n5 { left: 470px; top: 510px; }182 .n6 { left: 290px; top: 560px; }183 .n7 { left: 110px; top: 510px; }184 .n8 { left: 24px; top: 420px; }185 .n9 { left: 20px; top: 300px; }186 .n10 { left: 62px; top: 220px; }187 .n11 { left: 160px; top: 120px; }188 189 /* selection hand pointing to 9 */190 .hand {191 position: absolute;192 left: 100px; top: 300px;193 width: 220px; height: 4px; background: #3f79f6;194 }195 .knob {196 position: absolute;197 left: 60px; top: 270px;198 width: 64px; height: 64px; background: #3f79f6; border-radius: 50%;199 }200 .center-dot {201 position: absolute; left: 296px; top: 296px;202 width: 16px; height: 16px; background: #3f79f6; border-radius: 50%;203 }204 205 .dialog-actions {206 display: flex; align-items: center; justify-content: space-between;207 padding: 0 46px 40px; box-sizing: border-box;208 }209 .btn-flat {210 font-size: 40px; color: #3f79f6; font-weight: 700; letter-spacing: 1px;211 }212 213 /* Bottom gesture bar */214 .gesture-bar {215 position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);216 width: 300px; height: 12px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 2px rgba(0,0,0,0.1) inset;217 }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Status bar (tinted under overlay) -->224 <div class="status-bar">225 <div class="status-left">8:56</div>226 <div class="status-right">227 <span class="icon" aria-label="wifi">228 <svg viewBox="0 0 24 24">229 <path d="M2 8c5-4 15-4 20 0"/>230 <path d="M5 12c3-3 11-3 14 0"/>231 <path d="M9 16c2-2 4-2 6 0"/>232 <circle cx="12" cy="20" r="2" fill="#fff" stroke="none"/>233 </svg>234 </span>235 <span class="icon" aria-label="battery">236 <svg viewBox="0 0 28 18">237 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>238 <rect x="3" y="5" width="18" height="8" rx="1" ry="1" fill="#fff" stroke="none"/>239 <rect x="23" y="7" width="3" height="6" rx="1" ry="1" fill="#fff" stroke="none"/>240 </svg>241 </span>242 <span>100%</span>243 </div>244 </div>245 246 <!-- App bar -->247 <div class="app-bar">248 <div class="app-left">249 <div class="calendar-square"></div>250 <div class="hamburger">251 <svg viewBox="0 0 100 80">252 <line x1="10" y1="15" x2="90" y2="15"/>253 <line x1="10" y1="40" x2="70" y2="40"/>254 <line x1="10" y1="65" x2="60" y2="65"/>255 </svg>256 </div>257 </div>258 <div class="month-title">Aug 2023 <span class="chev"></span></div>259 <div class="overflow-btn">···</div>260 </div>261 262 <!-- Underlay form content -->263 <div class="form-card">264 <div class="right-action">SAVE</div>265 266 <div class="section-label">EVENT TITLE</div>267 <h1 class="title">HR meeting</h1>268 269 <div class="section-label">EVENT TIME</div>270 <div class="row">271 <div>Fri, Aug 18 · 9:30 AM</div>272 <div>Fri, Aug 18 · 9:30 AM</div>273 </div>274 275 <div class="row">276 <div>ALL DAY</div>277 <div class="toggle"></div>278 </div>279 280 <div class="section-label" style="margin-top:40px;">LOCATION</div>281 <div class="location-grid" style="margin-top:20px;">282 <div class="img-placeholder" style="height:240px; border-radius:16px;">[IMG: Map Preview]</div>283 <div class="img-placeholder" style="height:240px; border-radius:16px;">[IMG: Map Preview]</div>284 </div>285 286 <div class="section-label" style="margin-top:60px;">INVITEES</div>287 <div class="img-placeholder invitee">+ Add Invitee</div>288 289 <div class="section-label" style="margin-top:80px;">ALARM</div>290 <div style="font-size:48px; font-weight:700; color:#111; margin-top:10px;">30 minutes before</div>291 </div>292 293 <!-- Modal overlay and time picker dialog -->294 <div class="overlay"></div>295 296 <div class="time-dialog" role="dialog" aria-label="Time picker">297 <div class="time-head">298 <div class="main">9:30</div>299 <div class="half">AM</div>300 <div class="half pm">PM</div>301 </div>302 <div class="time-body">303 <div class="clock">304 <div class="num n12">12</div>305 <div class="num n1">1</div>306 <div class="num n2">2</div>307 <div class="num n3">3</div>308 <div class="num n4">4</div>309 <div class="num n5">5</div>310 <div class="num n6">6</div>311 <div class="num n7">7</div>312 <div class="num n8">8</div>313 <div class="num n9">9</div>314 <div class="num n10">10</div>315 <div class="num n11">11</div>316 317 <div class="hand"></div>318 <div class="knob"></div>319 <div class="center-dot"></div>320 </div>321 322 <div class="dialog-actions">323 <div class="btn-flat">CANCEL</div>324 <div class="btn-flat">OK</div>325 </div>326 </div>327 </div>328 329 <div class="gesture-bar"></div>330</div>331</body>332</html>