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>Event Edit - HR meeting</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #111; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f1f1f2;15 }16 17 /* Top status/header area behind the sheet */18 .top-bg {19 position: absolute;20 top: 0;21 left: 0;22 right: 0;23 height: 380px;24 background: #e3e3e5;25 }26 .status-bar {27 position: absolute;28 top: 24px;29 left: 36px;30 right: 36px;31 height: 80px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #1b1b1b;36 font-size: 40px;37 opacity: 0.9;38 }39 .status-right {40 display: flex;41 align-items: center;42 gap: 18px;43 }44 .header-row {45 position: absolute;46 top: 120px;47 left: 28px;48 right: 28px;49 height: 120px;50 display: flex;51 align-items: center;52 justify-content: space-between;53 color: #0f0f0f;54 }55 .header-left {56 display: flex;57 align-items: center;58 gap: 28px;59 padding-left: 20px;60 }61 .month-title {62 position: absolute;63 left: 50%;64 transform: translateX(-50%);65 top: 8px;66 font-weight: 800;67 font-size: 52px;68 }69 .month-handle {70 position: absolute;71 left: 50%;72 transform: translateX(-50%);73 top: 92px;74 width: 120px;75 height: 16px;76 background: #ffffff;77 border-radius: 10px;78 }79 .circle-btn {80 width: 88px;81 height: 88px;82 border-radius: 50%;83 border: 2px solid #bfbfbf;84 display: flex;85 align-items: center;86 justify-content: center;87 margin-right: 10px;88 background: rgba(255,255,255,0.2);89 }90 91 /* Bottom sheet */92 .sheet {93 position: absolute;94 top: 240px;95 left: 0;96 right: 0;97 bottom: 0;98 background: #ffffff;99 border-top-left-radius: 42px;100 border-top-right-radius: 42px;101 box-shadow: 0 -8px 24px rgba(0,0,0,0.08);102 }103 .sheet-inner {104 position: absolute;105 top: 28px;106 left: 48px;107 right: 48px;108 bottom: 0;109 overflow-y: auto;110 padding-bottom: 180px;111 }112 .save-btn {113 position: absolute;114 top: 32px;115 right: 48px;116 font-size: 42px;117 font-weight: 700;118 color: #6d6d6d;119 letter-spacing: 1px;120 }121 122 .section {123 margin-top: 44px;124 }125 .label {126 color: #555;127 font-size: 34px;128 letter-spacing: 1px;129 margin-bottom: 18px;130 }131 .title-input {132 font-size: 110px;133 font-weight: 800;134 line-height: 1.05;135 display: inline-flex;136 align-items: baseline;137 }138 .caret {139 width: 6px;140 height: 110px;141 background: #1aa197;142 margin-left: 10px;143 border-radius: 2px;144 }145 146 .time-grid {147 margin-top: 36px;148 }149 .time-row {150 display: flex;151 align-items: center;152 justify-content: space-between;153 padding: 16px 0;154 }155 .time-left {156 font-size: 46px;157 font-weight: 700;158 }159 .time-right {160 font-size: 46px;161 font-weight: 700;162 color: #1b1b1b;163 }164 165 .toggle-row {166 margin-top: 44px;167 display: flex;168 align-items: center;169 justify-content: space-between;170 }171 .toggle {172 position: relative;173 width: 136px;174 height: 72px;175 background: #e5e5e5;176 border-radius: 36px;177 box-shadow: inset 0 0 0 1px #d6d6d6;178 }179 .toggle .knob {180 position: absolute;181 top: 8px;182 left: 8px;183 width: 56px;184 height: 56px;185 background: #ffffff;186 border-radius: 50%;187 box-shadow: 0 1px 2px rgba(0,0,0,0.2);188 }189 190 .divider {191 height: 2px;192 background: #e5e5e5;193 margin: 44px 0 32px;194 }195 196 .map-placeholder {197 width: 984px;198 height: 250px;199 background: #E0E0E0;200 border: 1px solid #BDBDBD;201 border-radius: 28px;202 display: flex;203 align-items: center;204 justify-content: center;205 color: #555;206 font-size: 44px;207 text-align: center;208 }209 210 .invite-card {211 width: 600px;212 height: 360px;213 background: #E0E0E0;214 border: 1px solid #BDBDBD;215 border-radius: 24px;216 display: flex;217 align-items: center;218 justify-content: center;219 color: #6b6b6b;220 font-size: 44px;221 }222 223 .alarm-value {224 font-size: 64px;225 font-weight: 800;226 margin-top: 12px;227 }228 229 /* Bottom gesture/nav area */230 .bottom-bar {231 position: absolute;232 left: 0;233 right: 0;234 bottom: 0;235 height: 140px;236 background: #000;237 display: flex;238 align-items: center;239 justify-content: center;240 }241 .home-indicator {242 width: 240px;243 height: 14px;244 background: #e5e5e5;245 border-radius: 10px;246 opacity: 0.9;247 }248 249 /* Utility icons */250 .icon {251 width: 64px;252 height: 64px;253 }254 .icon-small {255 width: 52px;256 height: 52px;257 }258</style>259</head>260<body>261<div id="render-target">262 <div class="top-bg"></div>263 264 <!-- Status bar -->265 <div class="status-bar">266 <div>8:58</div>267 <div class="status-right">268 <!-- WiFi icon -->269 <svg class="icon-small" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">270 <path d="M2 8c5.5-4.5 14.5-4.5 20 0"/>271 <path d="M5 11c4-3 10-3 14 0"/>272 <path d="M8 14c2.5-2 5.5-2 8 0"/>273 <circle cx="12" cy="18" r="1.5" fill="#111" stroke="none"></circle>274 </svg>275 <!-- Battery with 100% -->276 <svg class="icon-small" viewBox="0 0 32 18">277 <rect x="1" y="3" width="26" height="12" rx="2" ry="2" fill="none" stroke="#111" stroke-width="2"></rect>278 <rect x="28" y="7" width="3" height="4" fill="#111"></rect>279 <rect x="3" y="5" width="22" height="8" fill="#111"></rect>280 </svg>281 <div style="font-size:36px;">100%</div>282 </div>283 </div>284 285 <!-- Header row -->286 <div class="header-row">287 <div class="header-left">288 <!-- little square calendar icon -->289 <svg class="icon" viewBox="0 0 24 24">290 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"></rect>291 <line x1="3" y1="9" x2="21" y2="9" stroke="#333" stroke-width="2"></line>292 </svg>293 <!-- hamburger -->294 <svg class="icon" viewBox="0 0 24 24">295 <line x1="3" y1="6" x2="21" y2="6" stroke="#333" stroke-width="2"></line>296 <line x1="3" y1="12" x2="21" y2="12" stroke="#333" stroke-width="2"></line>297 <line x1="3" y1="18" x2="15" y2="18" stroke="#333" stroke-width="2"></line>298 </svg>299 </div>300 <div class="month-title">Aug 2023</div>301 <div class="circle-btn">302 <!-- more icon -->303 <svg class="icon-small" viewBox="0 0 24 24" fill="#333">304 <circle cx="5" cy="12" r="2"></circle>305 <circle cx="12" cy="12" r="2"></circle>306 <circle cx="19" cy="12" r="2"></circle>307 </svg>308 </div>309 <div class="month-handle"></div>310 </div>311 312 <!-- Bottom sheet content -->313 <div class="sheet">314 <div class="save-btn">SAVE</div>315 <div class="sheet-inner">316 <div class="section">317 <div class="label">EVENT TITLE</div>318 <div class="title-input">319 HR meeting320 <div class="caret"></div>321 </div>322 </div>323 324 <div class="section time-grid">325 <div class="label">EVENT TIME</div>326 <div class="time-row">327 <div class="time-left">Fri, Aug 11, 2023</div>328 <div class="time-right">11:30 AM</div>329 </div>330 <div class="time-row">331 <div class="time-left">Fri, Aug 11, 2023</div>332 <div class="time-right">12:30 PM</div>333 </div>334 </div>335 336 <div class="toggle-row">337 <div class="label" style="margin:0;">ALL DAY EVENT</div>338 <div class="toggle">339 <div class="knob"></div>340 </div>341 </div>342 343 <div class="divider"></div>344 345 <div class="section">346 <div class="label">LOCATION</div>347 <div class="map-placeholder">[IMG: Tap to add location]</div>348 </div>349 350 <div class="section">351 <div class="label">INVITEES</div>352 <div class="invite-card">+ Add Invitee</div>353 </div>354 355 <div class="section">356 <div class="label">ALARM</div>357 <div class="alarm-value">30 minutes before</div>358 </div>359 </div>360 </div>361 362 <!-- Bottom gesture -->363 <div class="bottom-bar">364 <div class="home-indicator"></div>365 </div>366</div>367</body>368</html>