GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Tasks UI - Add Reminder</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#0a2c55;11 border-radius:20px;12 box-shadow:0 10px 30px rgba(0,0,0,0.35);13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; right:0;18 height:120px;19 background:#0e3563;20 color:#fff;21 display:flex; align-items:center;22 padding:0 30px;23 font-weight:600; font-size:36px;24 }25 .status-right {26 margin-left:auto; display:flex; align-items:center; gap:22px;27 }28 .notif-dot { width:16px; height:16px; background:#fff; border-radius:50%; margin:0 6px; opacity:0.95; display:inline-block; }29 .wifi-icon, .battery-icon {30 width:46px; height:32px; position:relative;31 }32 .wifi-icon::before {33 content:""; position:absolute; left:0; right:0; top:2px; height:32px;34 border-top:4px solid #fff; border-left:4px solid transparent; border-right:4px solid transparent;35 border-radius:26px;36 }37 .battery-icon {38 border:4px solid #fff; border-radius:6px;39 }40 .battery-icon::after {41 content:""; position:absolute; right:-10px; top:8px; width:10px; height:16px; background:#fff; border-radius:2px;42 }43 .battery-level {44 position:absolute; left:4px; top:4px; bottom:4px; width:28px; background:#fff;45 }46 47 /* App bar */48 .app-bar {49 position:absolute; top:120px; left:0; right:0;50 height:160px; background:#143a6d; color:#cfe3ff;51 display:flex; align-items:center; padding:0 32px;52 }53 .hamburger {54 width:72px; height:72px; margin-right:24px;55 }56 .hamburger svg { width:100%; height:100%; }57 .app-title { font-size:64px; color:#cfe3ff; font-weight:700; }58 .app-actions { margin-left:auto; display:flex; align-items:center; gap:40px; }59 .app-actions svg { width:72px; height:72px; fill:none; stroke:#cfe3ff; stroke-width:6; }60 61 /* Content area */62 .content {63 position:absolute; top:280px; left:0; right:0; bottom:0;64 background:#0d141b;65 color:#e5e8ec;66 padding:20px 24px 180px 24px;67 }68 .section-label {69 background:#a67c00; color:#fff; font-weight:700;70 padding:18px 24px; border-radius:8px;71 font-size:46px; margin-bottom:16px; width:100%;72 }73 .card {74 background:#0e0f12; border-radius:12px; padding:28px; margin-bottom:22px;75 box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset;76 }77 .card-title { font-size:60px; font-weight:700; color:#e9edf5; margin-bottom:18px; }78 .small-row { display:flex; align-items:center; gap:18px; color:#bfc6d1; font-size:36px; margin:10px 0; }79 .small-row svg { width:40px; height:40px; stroke:#bfc6d1; }80 81 /* Floating action button */82 .fab {83 position:absolute; right:40px; bottom:540px;84 width:160px; height:160px; border-radius:50%;85 background:#1f65c3; box-shadow:0 12px 24px rgba(0,0,0,0.35);86 display:flex; justify-content:center; align-items:center;87 }88 .fab svg { width:96px; height:96px; stroke:#fff; stroke-width:8; fill:none; }89 90 /* Modal / Add Reminder */91 .modal {92 position:absolute;93 left:40px; right:40px; top:640px;94 height:980px;95 border-radius:12px;96 background:#2f3136;97 box-shadow:0 20px 50px rgba(0,0,0,0.6);98 overflow:hidden;99 color:#f4f6fb;100 }101 .modal-header {102 height:120px; background:#3478ff; display:flex; align-items:center;103 padding:0 28px; font-size:56px; font-weight:700; color:#fff;104 }105 .save-btn {106 margin-left:auto; background:#fff; color:#2b63e6;107 padding:16px 28px; border-radius:10px; font-size:42px; font-weight:800;108 }109 .modal-body { padding:20px 26px; }110 .field {111 background:#3a3d42; border-radius:10px; padding:26px; margin:16px 0;112 display:flex; align-items:center; gap:20px; position:relative;113 }114 .field.input { background:#3a3d42; }115 .field .label { font-size:52px; font-weight:700; color:#fff; }116 .field .subtext { font-size:44px; color:#d9dde5; line-height:1.25; }117 .right-icon { position:absolute; right:20px; top:50%; transform:translateY(-50%); opacity:0.9; }118 .note {119 color:#ff5a52; font-size:40px; margin:32px 10px 0 10px;120 }121 .action-row { display:flex; justify-content:flex-end; padding:20px; }122 .pill {123 background:#1f2329; border-radius:26px; color:#4aa3ff; padding:18px 28px; font-size:42px; font-weight:700;124 border:1px solid #394049;125 }126 .link { color:#5aa8ff; font-weight:700; margin-left:18px; }127 128 /* Ad banner */129 .ad-banner {130 position:absolute; left:0; right:0; bottom:260px;131 height:180px; background:#ffffff; border-top:1px solid #d7d7d7;132 display:flex; align-items:center; padding:0 24px; gap:24px;133 }134 .ad-icon {135 width:150px; height:150px; border-radius:26px; background:#E0E0E0; border:1px solid #BDBDBD;136 display:flex; justify-content:center; align-items:center; color:#757575; font-size:36px; font-weight:700;137 }138 .ad-text { font-size:44px; color:#1d1f23; }139 .ad-sub { color:#079d56; font-weight:700; margin-left:10px; font-size:40px; }140 .ad-actions { margin-left:auto; }141 .open-btn {142 background:#1fb45b; color:#fff; font-size:46px; font-weight:800;143 padding:18px 34px; border-radius:16px;144 }145 146 /* Home indicator */147 .home-indicator {148 position:absolute; bottom:100px; left:50%; transform:translateX(-50%);149 width:420px; height:16px; background:#eaeaea; border-radius:8px;150 opacity:0.8;151 }152 153 /* Simple icons */154 .icon { width:56px; height:56px; stroke:#cfe3ff; stroke-width:6; fill:none; }155 .field svg { width:54px; height:54px; stroke:#d7dbea; stroke-width:6; }156 157</style>158</head>159<body>160<div id="render-target">161 162 <!-- Status bar -->163 <div class="status-bar">164 <div>6:49</div>165 <div style="margin-left:24px;">166 <span class="notif-dot"></span>167 <span class="notif-dot"></span>168 <span class="notif-dot"></span>169 <span class="notif-dot"></span>170 <span class="notif-dot"></span>171 <span class="notif-dot" style="width:10px;height:10px;opacity:0.7;"></span>172 </div>173 <div class="status-right">174 <div class="wifi-icon"></div>175 <div class="battery-icon"><div class="battery-level"></div></div>176 </div>177 </div>178 179 <!-- App bar -->180 <div class="app-bar">181 <div class="hamburger">182 <svg viewBox="0 0 100 100">183 <rect x="12" y="18" width="76" height="10" fill="#cfe3ff"></rect>184 <rect x="12" y="44" width="76" height="10" fill="#cfe3ff"></rect>185 <rect x="12" y="70" width="76" height="10" fill="#cfe3ff"></rect>186 </svg>187 </div>188 <div class="app-title">Tasks</div>189 <div class="app-actions">190 <!-- alarm + -->191 <svg viewBox="0 0 100 100">192 <circle cx="50" cy="56" r="28"></circle>193 <path d="M50 42 L50 70 M36 56 L64 56" stroke-linecap="round"></path>194 <path d="M20 28 L32 16 M80 28 L68 16" stroke-linecap="round"></path>195 </svg>196 <!-- check icon -->197 <svg viewBox="0 0 100 100">198 <circle cx="50" cy="50" r="36"></circle>199 <path d="M30 52 L45 66 L72 38" stroke-linecap="round"></path>200 </svg>201 <!-- search icon -->202 <svg viewBox="0 0 100 100">203 <circle cx="42" cy="42" r="26"></circle>204 <line x1="66" y1="66" x2="88" y2="88"></line>205 </svg>206 </div>207 </div>208 209 <!-- Content list -->210 <div class="content">211 <div class="section-label">Tomorrow</div>212 213 <div class="card">214 <div class="card-title">Catch Subway</div>215 <div class="small-row">216 <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="36" fill="none"></circle><line x1="50" y1="50" x2="50" y2="28"></line><line x1="50" y1="50" x2="72" y2="50"></line></svg>217 <span>08:00 AM</span>218 <span style="opacity:0.7;">•</span>219 <span>1 day</span>220 </div>221 <div class="small-row">222 <svg viewBox="0 0 100 100"><rect x="18" y="26" width="64" height="52" fill="none"></rect><line x1="18" y1="36" x2="82" y2="36"></line></svg>223 <span>Thu, Sep 28, 2023</span>224 </div>225 </div>226 227 <div class="card">228 <div class="card-title">Yoga classes</div>229 </div>230 231 <div class="card">232 <div class="card-title" style="color:#9be27a;">Christmas Dinner with family</div>233 <div class="small-row"><span>10:30 PM</span> <span style="opacity:0.7;">• Once</span></div>234 <div class="small-row"><span>Mon, Dec 25, 2023</span></div>235 </div>236 237 <div class="card">238 <div class="card-title">Cooking Lunch</div>239 <div class="small-row"><span>02:00 PM</span> <span style="opacity:0.7;">• Once</span></div>240 </div>241 </div>242 243 <!-- Floating button -->244 <div class="fab">245 <svg viewBox="0 0 100 100">246 <circle cx="50" cy="50" r="28"></circle>247 <line x1="50" y1="34" x2="50" y2="58" stroke-linecap="round"></line>248 <line x1="50" y1="50" x2="68" y2="50" stroke-linecap="round"></line>249 </svg>250 </div>251 252 <!-- Modal Add Reminder -->253 <div class="modal">254 <div class="modal-header">255 <div>Add Reminder</div>256 <div class="save-btn">SAVE</div>257 </div>258 <div class="modal-body">259 260 <!-- Title field -->261 <div class="field input">262 <div class="label">Dance performance</div>263 <div class="right-icon">264 <svg viewBox="0 0 100 100">265 <rect x="40" y="20" width="20" height="34" rx="6" fill="none" stroke="#d7dbea" stroke-width="6"></rect>266 <rect x="38" y="60" width="24" height="16" rx="4" fill="none" stroke="#d7dbea" stroke-width="6"></rect>267 </svg>268 </div>269 </div>270 271 <!-- Description field -->272 <div class="field input" style="align-items:flex-start;">273 <div class="subtext">Contemporary dance performance at<br>the Teatro Carignano</div>274 <div class="right-icon" style="top:36px; transform:none;">275 <svg viewBox="0 0 100 100">276 <rect x="40" y="20" width="20" height="34" rx="6" fill="none" stroke="#d7dbea" stroke-width="6"></rect>277 <rect x="38" y="60" width="24" height="16" rx="4" fill="none" stroke="#d7dbea" stroke-width="6"></rect>278 </svg>279 </div>280 </div>281 282 <!-- Date row -->283 <div class="field">284 <svg viewBox="0 0 100 100">285 <rect x="18" y="26" width="64" height="52" rx="8" fill="none"></rect>286 <line x1="18" y1="38" x2="82" y2="38"></line>287 </svg>288 <div class="subtext" style="font-size:48px;">Sat, Oct 07, 2023</div>289 <div class="right-icon">290 <svg viewBox="0 0 100 100">291 <line x1="26" y1="26" x2="74" y2="74" stroke="#cfd6e4" stroke-width="8"></line>292 <line x1="74" y1="26" x2="26" y2="74" stroke="#cfd6e4" stroke-width="8"></line>293 </svg>294 </div>295 </div>296 297 <!-- Time row -->298 <div class="field">299 <svg viewBox="0 0 100 100">300 <circle cx="50" cy="50" r="32" fill="none"></circle>301 <line x1="50" y1="50" x2="50" y2="30"></line>302 <line x1="50" y1="50" x2="70" y2="50"></line>303 </svg>304 <div class="subtext" style="font-size:48px;">06:55 PM</div>305 <div class="link">+Add more time</div>306 <div class="right-icon">307 <svg viewBox="0 0 100 100">308 <line x1="26" y1="26" x2="74" y2="74" stroke="#cfd6e4" stroke-width="8"></line>309 <line x1="74" y1="26" x2="26" y2="74" stroke="#cfd6e4" stroke-width="8"></line>310 </svg>311 </div>312 </div>313 314 <!-- Remind me before -->315 <div class="field">316 <svg viewBox="0 0 100 100">317 <circle cx="50" cy="50" r="32" fill="none"></circle>318 <polyline points="50,30 50,50 66,60" fill="none"></polyline>319 </svg>320 <div class="subtext" style="font-size:48px;">Remind me before</div>321 <div class="right-icon">322 <svg viewBox="0 0 100 100">323 <polyline points="36,28 66,50 36,72" fill="none" stroke="#cfd6e4" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></polyline>324 </svg>325 </div>326 </div>327 328 <!-- Repeat -->329 <div class="field">330 <svg viewBox="0 0 100 100">331 <polyline points="28,36 50,18 72,36" fill="none"></polyline>332 <polyline points="28,64 50,82 72,64" fill="none"></polyline>333 </svg>334 <div class="subtext" style="font-size:48px;">Repeat: No repeat</div>335 <div class="right-icon">336 <svg viewBox="0 0 100 100">337 <polyline points="36,28 66,50 36,72" fill="none" stroke="#cfd6e4" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></polyline>338 </svg>339 </div>340 </div>341 342 <div class="note">NOTE: You can change a Date Time picker from app settings.</div>343 344 <div class="action-row">345 <div class="pill">Got it</div>346 </div>347 348 </div>349 </div>350 351 <!-- Ad banner -->352 <div class="ad-banner">353 <div class="ad-icon">[IMG: Omio]</div>354 <div class="ad-text">Omio <span class="ad-sub">Installed</span></div>355 <div class="ad-actions">356 <div class="open-btn">Open</div>357 </div>358 </div>359 360 <!-- Home indicator -->361 <div class="home-indicator"></div>362 363</div>364</body>365</html>