GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #111316;14 color: #EDEEF0;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 }17 18 /* Status bar */19 .status {20 position: absolute;21 top: 0;22 left: 0;23 right: 0;24 height: 110px;25 padding: 24px 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #ffffff;30 font-weight: 600;31 font-size: 40px;32 opacity: 0.95;33 }34 .status .right {35 display: flex;36 align-items: center;37 gap: 22px;38 font-size: 32px;39 opacity: 0.85;40 }41 .icon {42 width: 52px;43 height: 52px;44 display: inline-flex;45 align-items: center;46 justify-content: center;47 }48 .icon svg { width: 100%; height: 100%; fill: #C9CDD4; }49 50 /* Header */51 .header {52 position: absolute;53 top: 110px;54 left: 0;55 right: 0;56 height: 120px;57 padding: 0 36px;58 display: flex;59 align-items: center;60 gap: 26px;61 color: #D1D4DA;62 }63 .header .title {64 font-size: 54px;65 font-weight: 700;66 letter-spacing: 0.2px;67 margin-right: auto;68 }69 .kebab {70 width: 72px;71 height: 72px;72 display: inline-flex;73 align-items: center;74 justify-content: center;75 opacity: 0.8;76 }77 .kebab svg { fill: #C9CDD4; }78 79 /* Main content */80 .content {81 position: absolute;82 top: 260px;83 left: 36px;84 right: 36px;85 }86 .task-row {87 display: flex;88 align-items: center;89 gap: 20px;90 margin-bottom: 22px;91 }92 .circle {93 width: 56px; height: 56px;94 border-radius: 50%;95 border: 3px solid #6E7A8A;96 opacity: 0.9;97 }98 .task-title {99 font-size: 64px;100 font-weight: 600;101 color: #EDEEF2;102 letter-spacing: 0.2px;103 position: relative;104 }105 .caret {106 display: inline-block;107 width: 2px;108 height: 64px;109 background: #9A7CF7;110 margin-left: 6px;111 border-radius: 2px;112 vertical-align: middle;113 }114 .subtext {115 margin-top: 18px;116 font-size: 34px;117 color: #7E8591;118 }119 120 .form-row {121 display: flex;122 align-items: center;123 gap: 22px;124 margin-top: 56px;125 }126 .row-icon {127 width: 60px; height: 60px;128 display: inline-flex;129 align-items: center;130 justify-content: center;131 opacity: 0.9;132 }133 .row-icon svg { fill: #C9CDD4; }134 135 .chip {136 display: inline-flex;137 align-items: center;138 gap: 18px;139 background: #23262B;140 padding: 22px 28px;141 border-radius: 44px;142 color: #C9CDD4;143 font-size: 36px;144 }145 .chip .close {146 width: 36px; height: 36px;147 display: inline-flex; align-items: center; justify-content: center;148 opacity: 0.8;149 }150 .chip .close svg { fill: #B0B6BE; }151 152 .warning {153 display: flex;154 align-items: center;155 gap: 14px;156 margin-top: 44px;157 color: #E6A7A0;158 font-size: 36px;159 }160 .warning svg { fill: #E6A7A0; width: 40px; height: 40px; }161 162 .add-reminder {163 margin-top: 26px;164 font-size: 38px;165 color: #90A6F9;166 display: flex;167 align-items: center;168 gap: 18px;169 }170 .plus {171 width: 40px; height: 40px;172 border-radius: 50%;173 background: transparent;174 color: #90A6F9;175 border: 2px solid #90A6F9;176 display: inline-flex; align-items: center; justify-content: center;177 font-weight: 700;178 }179 180 /* Bottom sheet */181 .sheet {182 position: absolute;183 left: 0;184 right: 0;185 bottom: 120px;186 height: 1050px;187 background: #1A1D22;188 border-top-left-radius: 36px;189 border-top-right-radius: 36px;190 box-shadow: 0 -10px 30px rgba(0,0,0,0.4);191 padding: 40px 40px 60px;192 }193 .handle {194 width: 160px; height: 12px;195 background: #2A2E35;196 border-radius: 8px;197 margin: 0 auto 34px auto;198 }199 .sheet-title {200 font-size: 56px;201 font-weight: 700;202 margin-bottom: 34px;203 }204 .seg {205 background: #2A2E35;206 border-radius: 60px;207 padding: 10px;208 display: flex;209 gap: 10px;210 margin-bottom: 40px;211 }212 .seg-item {213 flex: 1;214 text-align: center;215 padding: 26px 0;216 border-radius: 48px;217 font-size: 40px;218 color: #C9CDD4;219 }220 .seg-item.active {221 background: #1E2126;222 color: #FFFFFF;223 box-shadow: inset 0 0 0 2px #3A3F47;224 }225 226 .picker {227 display: flex;228 align-items: center;229 justify-content: space-between;230 padding: 26px 14px;231 margin-top: 22px;232 margin-bottom: 26px;233 }234 .col {235 width: 28%;236 text-align: center;237 position: relative;238 }239 .fade-top, .fade-bottom {240 font-size: 40px;241 color: #6D727B;242 opacity: 0.5;243 margin-bottom: 12px;244 }245 .value {246 font-size: 66px;247 font-weight: 700;248 color: #DDE1EA;249 letter-spacing: 2px;250 margin-bottom: 8px;251 }252 .unit {253 font-size: 42px;254 color: #88A0F5;255 letter-spacing: 4px;256 margin-bottom: 12px;257 }258 259 .reminder-line {260 margin-top: 26px;261 font-size: 36px;262 color: #C9CDD4;263 }264 .reminder-line .accent {265 color: #90A6F9;266 font-weight: 600;267 margin-left: 6px;268 }269 270 .btn {271 position: absolute;272 left: 40px;273 right: 40px;274 bottom: 40px;275 background: #9AB7FF;276 color: #14305F;277 font-weight: 700;278 font-size: 44px;279 border-radius: 54px;280 text-align: center;281 padding: 30px 0;282 }283 284 /* Gesture bar */285 .gesture {286 position: absolute;287 bottom: 40px;288 left: 50%;289 transform: translateX(-50%);290 width: 300px;291 height: 12px;292 background: #CCCCCF;293 opacity: 0.75;294 border-radius: 8px;295 }296</style>297</head>298<body>299<div id="render-target">300 301 <!-- Status bar -->302 <div class="status">303 <div>1:35</div>304 <div class="right">305 <span>29°</span>306 <div class="icon">307 <svg viewBox="0 0 24 24"><path d="M12 3l7 7h-4v7h-6v-7H5l7-7z"/></svg>308 </div>309 <div class="icon">310 <svg viewBox="0 0 24 24"><path d="M3 10h18v4H3z"/></svg>311 </div>312 <div class="icon">313 <svg viewBox="0 0 24 24"><path d="M20 6H4c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-7 12H4V8h9v10z"/></svg>314 </div>315 </div>316 </div>317 318 <!-- Header -->319 <div class="header">320 <div class="icon">321 <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7" stroke="#C9CDD4" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>322 </div>323 <div class="icon">324 <svg viewBox="0 0 24 24"><path d="M5 5h14v14H5zM9 12l2 2 4-4" stroke="#C9CDD4" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>325 </div>326 <div class="title">Task details</div>327 <div class="kebab">328 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>329 </div>330 </div>331 332 <!-- Content -->333 <div class="content">334 <div class="task-row">335 <div class="circle"></div>336 <div class="task-title">Driving licence<span class="caret"></span></div>337 </div>338 <div class="subtext">Would you like to add more details?</div>339 340 <div class="form-row" style="margin-top: 70px;">341 <div class="row-icon">342 <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/></svg>343 </div>344 <div class="chip">Select project</div>345 </div>346 347 <div class="form-row">348 <div class="row-icon">349 <svg viewBox="0 0 24 24"><path d="M7 2h10v2H7zM4 6h16v14H4zM7 9h3v3H7z"/></svg>350 </div>351 <div class="chip">Sun, Jul 30 <span class="close"><svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#B0B6BE" stroke-width="2" fill="none" stroke-linecap="round"/></svg></span></div>352 <div class="chip">9:00 AM <span class="close"><svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#B0B6BE" stroke-width="2" fill="none" stroke-linecap="round"/></svg></span></div>353 <div class="row-icon">354 <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#B0B6BE" stroke-width="2" fill="none" stroke-linecap="round"/></svg>355 </div>356 </div>357 358 <div class="form-row">359 <div class="row-icon">360 <svg viewBox="0 0 24 24"><path d="M12 2a2 2 0 012 2v6l3 3-1.4 1.4L12 12.8V4a2 2 0 00-2-2h2z"/></svg>361 </div>362 <div class="chip">1 hour before</div>363 <div class="row-icon">364 <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#B0B6BE" stroke-width="2" fill="none" stroke-linecap="round"/></svg>365 </div>366 </div>367 368 <div class="warning">369 <svg viewBox="0 0 24 24"><path d="M12 2l10 18H2L12 2zm0 5l-1 6h2l-1-6zm0 9a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"/></svg>370 <span>Notifications are disabled</span>371 </div>372 373 <div class="add-reminder">374 <div class="plus">+</div>375 <span>Add reminder</span>376 </div>377 </div>378 379 <!-- Bottom sheet -->380 <div class="sheet">381 <div class="handle"></div>382 <div class="sheet-title">Add reminder</div>383 384 <div class="seg">385 <div class="seg-item active">Before</div>386 <div class="seg-item">On the day</div>387 </div>388 389 <div class="picker">390 <div class="col">391 <div class="fade-top">02</div>392 <div class="value">0</div>393 <div class="unit">D</div>394 <div class="fade-bottom">1</div>395 </div>396 <div class="col">397 <div class="fade-top">04</div>398 <div class="value">03</div>399 <div class="unit">H</div>400 <div class="fade-bottom">05</div>401 </div>402 <div class="col">403 <div class="fade-top">55</div>404 <div class="value">00</div>405 <div class="unit">M</div>406 <div class="fade-bottom">05</div>407 </div>408 </div>409 410 <div class="reminder-line">Reminder <span class="accent">3 hours before</span></div>411 412 <div class="btn">Done</div>413 </div>414 415 <!-- Gesture bar -->416 <div class="gesture"></div>417 418</div>419</body>420</html>