GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Tasks - Add Reminder</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0b0e11;14 border-radius: 0;15 box-shadow: none;16 color: #fff;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 95px;26 background: #0f4a86;27 color: #ffffff;28 display: flex;29 align-items: center;30 padding: 0 28px;31 box-sizing: border-box;32 font-size: 36px;33 }34 .status-right {35 margin-left: auto;36 display: flex;37 gap: 28px;38 align-items: center;39 }40 .status-dot {41 width: 10px; height: 10px; background: #fff; border-radius: 50%;42 margin: 0 8px;43 }44 .icon-small svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 3; }45 46 /* App bar */47 .app-bar {48 position: absolute;49 top: 95px;50 left: 0;51 width: 1080px;52 height: 165px;53 background: #1976D2;54 display: flex;55 align-items: center;56 box-sizing: border-box;57 padding: 0 30px;58 color: #fff;59 }60 .app-title {61 font-size: 54px;62 font-weight: 600;63 margin-left: 24px;64 }65 .app-actions {66 margin-left: auto;67 display: flex;68 gap: 40px;69 }70 .circle-icon {71 width: 92px; height: 92px; border-radius: 50%;72 border: 3px solid rgba(255,255,255,0.5);73 display: flex; align-items: center; justify-content: center;74 }75 .circle-icon svg { width: 48px; height: 48px; stroke: #fff; stroke-width: 5; fill: none; }76 77 /* Content background */78 .content {79 position: absolute;80 top: 260px;81 left: 0;82 right: 0;83 bottom: 0;84 background: #141414;85 }86 87 /* Modal overlay card */88 .overlay {89 position: absolute;90 top: 260px; left: 0; right: 0; bottom: 740px; /* leaves space for keyboard */91 background: rgba(0,0,0,0.55);92 }93 .modal {94 position: absolute;95 top: 390px;96 left: 30px;97 width: 1020px;98 background: #2f2f2f;99 border-radius: 16px;100 box-shadow: 0 12px 28px rgba(0,0,0,0.6);101 overflow: hidden;102 }103 .modal-header {104 height: 118px;105 background: #2196F3;106 display: flex;107 align-items: center;108 padding: 0 24px;109 box-sizing: border-box;110 }111 .modal-header .title {112 font-size: 44px;113 font-weight: 600;114 margin-left: 20px;115 }116 .modal-header .save-btn {117 margin-left: auto;118 background: #ffffff;119 color: #1976D2;120 font-weight: 700;121 font-size: 36px;122 padding: 12px 28px;123 border-radius: 14px;124 }125 .close-icon svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 5; }126 127 .modal-body { padding: 0; }128 .field {129 display: flex;130 align-items: center;131 padding: 26px 28px;132 border-bottom: 1px solid #444;133 box-sizing: border-box;134 color: #eee;135 }136 .field .label {137 font-size: 42px;138 flex: 1;139 }140 .field .placeholder { color: #9E9E9E; font-size: 38px; flex: 1; }141 .field .value { font-size: 40px; flex: 1; }142 .field .right {143 display: flex; align-items: center; gap: 20px;144 color: #90CAF9; font-size: 36px;145 }146 .left-icon {147 width: 60px; height: 60px; margin-right: 26px;148 display: flex; align-items: center; justify-content: center;149 }150 .left-icon svg { width: 54px; height: 54px; stroke: #b0bec5; stroke-width: 4; fill: none; }151 .mic { margin-left: 18px; }152 .mic svg { width: 34px; height: 34px; stroke: #b0bec5; stroke-width: 4; fill: none; }153 .chevron svg, .x-icon svg { width: 40px; height: 40px; stroke: #b0bec5; stroke-width: 5; fill: none; }154 155 /* Add Reminder button behind */156 .under-btn {157 position: absolute;158 top: 1250px;159 left: 390px;160 width: 300px;161 height: 90px;162 background: #1976D2;163 border-radius: 12px;164 display: flex; align-items: center; justify-content: center;165 font-size: 36px; font-weight: 600;166 }167 168 /* Keyboard */169 .keyboard {170 position: absolute;171 left: 0;172 bottom: 0;173 width: 1080px;174 height: 740px;175 background: #202225;176 color: #fff;177 box-shadow: 0 -6px 18px rgba(0,0,0,0.4);178 }179 .kb-top {180 height: 110px;181 display: flex; align-items: center;182 padding: 0 24px; box-sizing: border-box;183 border-bottom: 1px solid #333;184 }185 .kb-top .pill {186 background: #2b2d30; padding: 8px 18px; border-radius: 20px;187 margin-right: 12px; font-size: 34px; color: #d0d0d0;188 }189 .kb-grid {190 display: grid;191 grid-template-columns: repeat(10, 1fr);192 gap: 12px;193 padding: 18px 20px 0 20px;194 box-sizing: border-box;195 }196 .key {197 height: 100px; background: #2a2c2f; border-radius: 14px;198 display: flex; align-items: center; justify-content: center;199 font-size: 40px; color: #eaeaea;200 }201 .kb-row { margin-top: 14px; }202 .key.small { font-size: 34px; }203 .key.wide { grid-column: span 2; }204 .kb-bottom {205 display: grid; grid-template-columns: 1.6fr 1fr 0.8fr 2.6fr 1.4fr 1.6fr;206 gap: 12px; padding: 18px 20px; box-sizing: border-box;207 }208 .enter { background: #bcd9f6; color: #0b3559; font-weight: 700; }209</style>210</head>211<body>212<div id="render-target">213 214 <!-- Status bar -->215 <div class="status-bar">216 <div>6:10</div>217 <div class="status-right">218 <div class="icon-small">219 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 6v6l4 2"></path></svg>220 </div>221 <div class="icon-small">222 <svg viewBox="0 0 24 24"><circle cx="9" cy="12" r="3"></circle><circle cx="15" cy="12" r="3"></circle></svg>223 </div>224 <div class="icon-small">225 <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="2"></rect></svg>226 </div>227 <div class="status-dot"></div>228 <div class="icon-small">229 <svg viewBox="0 0 24 24"><path d="M3 6h18"></path><path d="M3 12h18"></path><path d="M3 18h18"></path></svg>230 </div>231 <div class="icon-small">232 <svg viewBox="0 0 24 24"><path d="M6 8l6-6 6 6"></path><path d="M12 2v13"></path></svg>233 </div>234 </div>235 </div>236 237 <!-- App bar -->238 <div class="app-bar">239 <div class="hamburger">240 <svg width="64" height="64" viewBox="0 0 24 24">241 <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>242 </svg>243 </div>244 <div class="app-title">Tasks</div>245 <div class="app-actions">246 <div class="circle-icon">247 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>248 </div>249 <div class="circle-icon">250 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 8v5l3 2"></path></svg>251 </div>252 <div class="circle-icon">253 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"></path></svg>254 </div>255 <div class="circle-icon">256 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M16 16l5 5"></path></svg>257 </div>258 </div>259 </div>260 261 <div class="content"></div>262 263 <!-- Dark overlay and modal -->264 <div class="overlay"></div>265 <div class="modal">266 <div class="modal-header">267 <div class="close-icon">268 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"></path></svg>269 </div>270 <div class="title">Add Reminder</div>271 <div class="save-btn">SAVE</div>272 </div>273 274 <div class="modal-body">275 <!-- Title field -->276 <div class="field">277 <div class="label" style="font-size:42px;">Roslyn Flower Show</div>278 <div class="mic">279 <svg viewBox="0 0 24 24"><rect x="9" y="5" width="6" height="9" rx="3"></rect><path d="M6 11c0 3 3 5 6 5s6-2 6-5M12 16v4M8 20h8"></path></svg>280 </div>281 </div>282 283 <!-- Note field -->284 <div class="field">285 <div class="placeholder">Write short note</div>286 <div class="mic">287 <svg viewBox="0 0 24 24"><rect x="9" y="5" width="6" height="9" rx="3"></rect><path d="M6 11c0 3 3 5 6 5s6-2 6-5M12 16v4M8 20h8"></path></svg>288 </div>289 </div>290 291 <!-- Date row -->292 <div class="field">293 <div class="left-icon">294 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M7 3v4M17 3v4M3 9h18"></path></svg>295 </div>296 <div class="value">Wed, Oct 11, 2023</div>297 <div class="right">298 <div class="x-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"></path></svg></div>299 </div>300 </div>301 302 <!-- Time row -->303 <div class="field">304 <div class="left-icon">305 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 6v7l4 2"></path></svg>306 </div>307 <div class="value">06:15 PM</div>308 <div class="right">309 <div style="color:#64B5F6;">+Add more time</div>310 <div class="x-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"></path></svg></div>311 </div>312 </div>313 314 <!-- Remind me before -->315 <div class="field">316 <div class="left-icon">317 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5"></path><path d="M12 12l4 2"></path></svg>318 </div>319 <div class="label">Remind me before</div>320 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg></div>321 </div>322 323 <!-- Repeat -->324 <div class="field" style="border-bottom:none;">325 <div class="left-icon">326 <svg viewBox="0 0 24 24"><path d="M3 12a7 7 0 0 1 11-5l2-2v6h-6l2-2a5 5 0 1 0 6 6"></path></svg>327 </div>328 <div class="label">Repeat: No repeat</div>329 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg></div>330 </div>331 </div>332 </div>333 334 <!-- Button partially behind modal/keyboard -->335 <div class="under-btn">Add Reminder</div>336 337 <!-- Keyboard -->338 <div class="keyboard">339 <div class="kb-top">340 <div class="icon-small" style="margin-right:10px;">341 <svg viewBox="0 0 24 24"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" stroke="#cbd3d9" stroke-width="2"></path></svg>342 </div>343 <div class="pill">Show</div>344 <div class="pill">Shower</div>345 <div class="pill">Showing</div>346 <div style="margin-left:auto;">347 <svg width="48" height="48" viewBox="0 0 24 24">348 <rect x="9" y="5" width="6" height="9" rx="3" stroke="#cbd3d9" stroke-width="2" fill="none"></rect>349 <path d="M6 11c0 3 3 5 6 5s6-2 6-5M12 16v4M8 20h8" stroke="#cbd3d9" stroke-width="2" fill="none"></path>350 </svg>351 </div>352 </div>353 354 <!-- Letter rows -->355 <div class="kb-grid">356 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>357 </div>358 <div class="kb-grid kb-row" style="grid-template-columns: repeat(9, 1fr); padding-left:80px; padding-right:20px;">359 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>360 </div>361 <div class="kb-grid kb-row" style="grid-template-columns: 1.5fr repeat(7, 1fr) 1.5fr; padding-left:20px; padding-right:20px;">362 <div class="key small">⇧</div>363 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>364 <div class="key small">365 <svg width="34" height="34" viewBox="0 0 24 24">366 <path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2" fill="none"></path>367 </svg>368 </div>369 </div>370 371 <div class="kb-bottom">372 <div class="key small" style="background:#3a3d40; color:#cfe1f9;">?123</div>373 <div class="key small">,</div>374 <div class="key small">🙂</div>375 <div class="key small">space</div>376 <div class="key small">.</div>377 <div class="key enter">↵</div>378 </div>379 </div>380 381</div>382</body>383</html>