GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Tasks - Add Reminder Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0f345e;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 background: #123a67;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 font-size: 36px;29 letter-spacing: 0.5px;30 }31 .status-left {32 display: flex;33 align-items: center;34 gap: 18px;35 }36 .ghost-dot {37 width: 26px;38 height: 26px;39 border-radius: 50%;40 background: #ffffffcc;41 }42 .status-right {43 margin-left: auto;44 display: flex;45 align-items: center;46 gap: 24px;47 }48 .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 4; }49 50 /* App bar */51 .app-bar {52 position: absolute;53 top: 90px;54 left: 0;55 width: 1080px;56 height: 160px;57 background: #143b69;58 display: flex;59 align-items: center;60 padding: 0 28px;61 box-sizing: border-box;62 }63 .app-title {64 font-size: 64px;65 font-weight: 700;66 margin-left: 24px;67 }68 .app-actions {69 margin-left: auto;70 display: flex;71 gap: 40px;72 align-items: center;73 }74 .icon-btn svg { width: 60px; height: 60px; stroke: #fff; stroke-width: 4; fill: none; }75 76 /* Content background */77 .content {78 position: absolute;79 top: 250px;80 left: 0;81 width: 1080px;82 height: 2150px;83 background: #0c0f13;84 }85 86 /* Section header */87 .section-header {88 height: 90px;89 display: flex;90 align-items: center;91 padding: 0 32px;92 box-sizing: border-box;93 font-size: 46px;94 color: #f4c54b;95 background: rgba(244, 197, 75, 0.08);96 }97 98 /* List item card */99 .task-card {100 margin: 16px 24px;101 padding: 24px;102 border-radius: 16px;103 background: #15181d;104 color: #eaeaea;105 box-shadow: 0 4px 12px rgba(0,0,0,0.5);106 }107 .task-title {108 font-size: 56px;109 margin-bottom: 8px;110 }111 .task-row {112 display: flex;113 align-items: center;114 gap: 16px;115 color: #9aa3ad;116 font-size: 40px;117 }118 .task-row svg { width: 40px; height: 40px; stroke: #9aa3ad; }119 120 /* Modal / Sheet */121 .modal {122 position: absolute;123 left: 32px;124 top: 580px;125 width: 1016px;126 border-radius: 16px;127 overflow: hidden;128 background: #2a2f36;129 box-shadow: 0 10px 24px rgba(0,0,0,0.6);130 color: #eaeaea;131 }132 .modal-header {133 background: #3f89f6;134 height: 120px;135 display: flex;136 align-items: center;137 padding: 0 24px;138 box-sizing: border-box;139 font-size: 52px;140 font-weight: 700;141 }142 .modal-header .close-x {143 margin-right: 16px;144 width: 48px;145 height: 48px;146 border-radius: 6px;147 display: flex;148 align-items: center;149 justify-content: center;150 }151 .modal-header .save-btn {152 margin-left: auto;153 background: #5aa1ff;154 color: #fff;155 padding: 18px 28px;156 border-radius: 12px;157 font-size: 44px;158 font-weight: 700;159 }160 .modal-body {161 padding: 16px 24px 24px 24px;162 box-sizing: border-box;163 }164 .input-row {165 background: #2a2f36;166 border-bottom: 1px solid #3d434c;167 padding: 26px 12px;168 display: flex;169 align-items: center;170 gap: 18px;171 }172 .input-text {173 font-size: 54px;174 flex: 1;175 }176 .subtext {177 font-size: 48px;178 color: #cfd6de;179 flex: 1;180 line-height: 1.3;181 }182 .input-row .right-icon {183 width: 52px;184 height: 52px;185 }186 .field-row {187 display: flex;188 align-items: center;189 padding: 26px 12px;190 border-bottom: 1px solid #3d434c;191 gap: 18px;192 font-size: 50px;193 color: #eef1f5;194 }195 .field-row .value { flex: 1; }196 .link {197 color: #60a6ff;198 font-size: 42px;199 margin-right: 18px;200 }201 .chevron, .dismiss-x {202 width: 46px;203 height: 46px;204 }205 206 .note-row {207 display: flex;208 align-items: center;209 justify-content: space-between;210 padding: 22px 12px 28px;211 color: #f06262;212 font-size: 40px;213 }214 .pill {215 background: #2e7af8;216 color: #eaf1ff;217 padding: 16px 26px;218 border-radius: 30px;219 font-size: 42px;220 }221 222 /* Floating action button */223 .fab {224 position: absolute;225 right: 40px;226 bottom: 360px;227 width: 132px;228 height: 132px;229 border-radius: 50%;230 background: #2e7af8;231 display: flex;232 align-items: center;233 justify-content: center;234 box-shadow: 0 12px 22px rgba(0,0,0,0.5);235 }236 .fab svg { width: 72px; height: 72px; stroke: #fff; stroke-width: 4; fill: none; }237 238 /* Bottom ad banner */239 .ad-banner {240 position: absolute;241 left: 0;242 bottom: 130px;243 width: 1080px;244 height: 210px;245 background: #1a1e24;246 border-top: 1px solid #2f3440;247 display: flex;248 align-items: center;249 padding: 0 24px;250 box-sizing: border-box;251 color: #eaeaea;252 }253 .ad-img {254 width: 250px;255 height: 180px;256 background: #E0E0E0;257 border: 1px solid #BDBDBD;258 display: flex;259 justify-content: center;260 align-items: center;261 color: #757575;262 margin-right: 18px;263 }264 .ad-content { flex: 1; }265 .ad-title { font-size: 56px; font-weight: 700; }266 .ad-sub { font-size: 38px; color: #b9c2cc; margin-top: 6px; }267 .ad-cta {268 background: #1ca463;269 color: #fff;270 padding: 22px 34px;271 border-radius: 16px;272 font-size: 46px;273 font-weight: 700;274 margin-left: 24px;275 }276 277 /* Gesture pill */278 .gesture-pill {279 position: absolute;280 left: 50%;281 transform: translateX(-50%);282 bottom: 40px;283 width: 240px;284 height: 16px;285 border-radius: 10px;286 background: #dcdcdc;287 }288</style>289</head>290<body>291<div id="render-target">292 293 <!-- Status Bar -->294 <div class="status-bar">295 <div class="status-left">296 <div>6:51</div>297 <div class="ghost-dot"></div>298 <div class="ghost-dot"></div>299 <div class="ghost-dot"></div>300 <div class="ghost-dot"></div>301 </div>302 <div class="status-right">303 <div class="status-icon">304 <!-- Wi-Fi icon -->305 <svg viewBox="0 0 24 24">306 <path d="M2 8c5-4 15-4 20 0"/>307 <path d="M5 12c3-3 11-3 14 0"/>308 <path d="M8 16c2-2 6-2 8 0"/>309 <circle cx="12" cy="19" r="1.5" fill="#fff"></circle>310 </svg>311 </div>312 <div class="status-icon">313 <!-- Battery icon -->314 <svg viewBox="0 0 28 24">315 <rect x="2" y="6" width="20" height="12" rx="2"></rect>316 <rect x="4" y="8" width="16" height="8" fill="#fff"></rect>317 <rect x="22" y="10" width="4" height="4" rx="1"></rect>318 </svg>319 </div>320 </div>321 </div>322 323 <!-- App Bar -->324 <div class="app-bar">325 <!-- Hamburger -->326 <div class="icon-btn">327 <svg viewBox="0 0 24 24">328 <path d="M3 6h18M3 12h18M3 18h18"></path>329 </svg>330 </div>331 <div class="app-title">Tasks</div>332 <div class="app-actions">333 <!-- Alarm plus -->334 <div class="icon-btn">335 <svg viewBox="0 0 24 24">336 <circle cx="12" cy="13" r="7"></circle>337 <path d="M12 10v6M9 13h6"></path>338 <path d="M5 5l3 2M19 5l-3 2"></path>339 </svg>340 </div>341 <!-- Check circle -->342 <div class="icon-btn">343 <svg viewBox="0 0 24 24">344 <circle cx="12" cy="12" r="9"></circle>345 <path d="M7 12l3 3 6-6"></path>346 </svg>347 </div>348 <!-- Search -->349 <div class="icon-btn">350 <svg viewBox="0 0 24 24">351 <circle cx="10" cy="10" r="7"></circle>352 <path d="M15 15l6 6"></path>353 </svg>354 </div>355 </div>356 </div>357 358 <!-- Content Background -->359 <div class="content">360 <div class="section-header">Tomorrow</div>361 362 <!-- Example tasks behind the modal -->363 <div class="task-card">364 <div class="task-title">Catch Subway</div>365 <div class="task-row">366 <svg viewBox="0 0 24 24"><path d="M4 6h16M4 6v8a3 3 0 003 3h10a3 3 0 003-3V6"></path></svg>367 <div>08:00 AM • 1 day</div>368 </div>369 <div class="task-row" style="margin-top:8px;">370 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M7 3v4M17 3v4M3 10h18"></path></svg>371 <div>Thu, Sep 28, 2023</div>372 </div>373 </div>374 375 <div class="task-card">376 <div class="task-title">Yoga classes</div>377 </div>378 </div>379 380 <!-- Add Reminder Modal -->381 <div class="modal">382 <div class="modal-header">383 <div class="close-x">384 <svg viewBox="0 0 24 24" class="chevron">385 <path d="M4 4l16 16M20 4l-16 16" stroke="#fff" stroke-width="3" fill="none"></path>386 </svg>387 </div>388 <div>Add Reminder</div>389 <div class="save-btn">SAVE</div>390 </div>391 <div class="modal-body">392 <!-- Title input -->393 <div class="input-row">394 <div class="input-text">Dance performance</div>395 <div class="right-icon">396 <!-- Mic icon -->397 <svg viewBox="0 0 24 24">398 <rect x="9" y="4" width="6" height="10" rx="3" stroke="#cfd6de" fill="none"></rect>399 <path d="M5 11a7 7 0 0014 0M12 18v3M9 21h6" stroke="#cfd6de"></path>400 </svg>401 </div>402 </div>403 <!-- Description input -->404 <div class="input-row">405 <div class="subtext">Contemporary dance performance at<br>the Teatro Carignano</div>406 <div class="right-icon">407 <svg viewBox="0 0 24 24">408 <rect x="9" y="4" width="6" height="10" rx="3" stroke="#cfd6de" fill="none"></rect>409 <path d="M5 11a7 7 0 0014 0M12 18v3M9 21h6" stroke="#cfd6de"></path>410 </svg>411 </div>412 </div>413 <!-- Date row -->414 <div class="field-row">415 <svg viewBox="0 0 24 24">416 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#cfd6de" fill="none"></rect>417 <path d="M7 3v4M17 3v4M3 10h18" stroke="#cfd6de"></path>418 </svg>419 <div class="value">Sat, Oct 07, 2023</div>420 <svg viewBox="0 0 24 24" class="dismiss-x">421 <path d="M5 5l14 14M19 5l-14 14" stroke="#cfd6de"></path>422 </svg>423 </div>424 <!-- Time row -->425 <div class="field-row">426 <svg viewBox="0 0 24 24">427 <circle cx="12" cy="12" r="9" stroke="#cfd6de" fill="none"></circle>428 <path d="M12 7v6l4 2" stroke="#cfd6de"></path>429 </svg>430 <div class="value">01:30 PM</div>431 <div class="link">+Add more time</div>432 <svg viewBox="0 0 24 24" class="dismiss-x">433 <path d="M5 5l14 14M19 5l-14 14" stroke="#cfd6de"></path>434 </svg>435 </div>436 <!-- Remind me before -->437 <div class="field-row">438 <svg viewBox="0 0 24 24">439 <circle cx="12" cy="12" r="9" stroke="#cfd6de" fill="none"></circle>440 <path d="M12 7v6l4 2" stroke="#cfd6de"></path>441 </svg>442 <div class="value">Remind me before</div>443 <svg viewBox="0 0 24 24" class="chevron">444 <path d="M9 6l6 6-6 6" stroke="#cfd6de" fill="none"></path>445 </svg>446 </div>447 <!-- Repeat -->448 <div class="field-row">449 <svg viewBox="0 0 24 24">450 <path d="M6 7h8a4 4 0 014 4v2" stroke="#cfd6de" fill="none"></path>451 <path d="M18 17H10a4 4 0 01-4-4v-2" stroke="#cfd6de" fill="none"></path>452 <path d="M7 3v4h4M17 21v-4h-4" stroke="#cfd6de" fill="none"></path>453 </svg>454 <div class="value">Repeat: No repeat</div>455 <svg viewBox="0 0 24 24" class="chevron">456 <path d="M9 6l6 6-6 6" stroke="#cfd6de" fill="none"></path>457 </svg>458 </div>459 <!-- Note -->460 <div class="note-row">461 <div>NOTE: You can change a Date Time picker from app settings.</div>462 <div class="pill">Got it</div>463 </div>464 </div>465 </div>466 467 <!-- Floating action button -->468 <div class="fab">469 <svg viewBox="0 0 24 24">470 <circle cx="12" cy="13" r="7"></circle>471 <path d="M12 10v6M9 13h6"></path>472 <path d="M5 5l3 2M19 5l-3 2"></path>473 </svg>474 </div>475 476 <!-- Bottom Ad Banner -->477 <div class="ad-banner">478 <div class="ad-img">[IMG: Station illustration]</div>479 <div class="ad-content">480 <div class="ad-title">Omio</div>481 <div class="ad-sub">4.6 • FREE</div>482 </div>483 <div class="ad-cta">Open</div>484 </div>485 486 <!-- Gesture pill -->487 <div class="gesture-pill"></div>488 489</div>490</body>491</html>