GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">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: "Roboto", Arial, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #111316;14 border-radius: 0;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 84px;24 background: #0e3e6e;25 color: #fff;26 }27 .status-time {28 position: absolute; left: 30px; top: 20px;29 font-size: 34px; font-weight: 500;30 }31 .status-icons {32 position: absolute; right: 24px; top: 24px; display: flex; gap: 26px; align-items: center;33 }34 .dot { width: 12px; height: 12px; background: #cfe2ff; border-radius: 50%; opacity: 0.8; }35 .battery {36 width: 36px; height: 18px; border: 2px solid #fff; border-radius: 3px; position: relative;37 }38 .battery::after {39 content: ""; position: absolute; right: -6px; top: 5px; width: 6px; height: 8px; background: #fff; border-radius: 1px;40 }41 .battery .level { position: absolute; left: 2px; top: 2px; height: 12px; width: 22px; background: #fff; }42 43 /* App bar */44 .app-bar {45 position: absolute; top: 84px; left: 0; width: 1080px; height: 156px;46 background: #145088;47 color: #e6f2ff;48 box-shadow: 0 2px 0 rgba(0,0,0,0.4);49 }50 .app-bar .title {51 position: absolute; left: 140px; top: 54px; font-size: 54px; font-weight: 600;52 }53 .app-bar .menu {54 position: absolute; left: 36px; top: 50px; width: 72px; height: 56px;55 }56 .app-bar .actions {57 position: absolute; right: 24px; top: 46px; display: flex; gap: 40px; align-items: center;58 }59 .icon-btn svg { width: 64px; height: 64px; fill: none; stroke: #e6f2ff; stroke-width: 6; }60 61 /* Background content (faint) */62 .page-content {63 position: absolute; top: 240px; left: 0; width: 1080px; height: 2160px; color: #9fb7ce;64 }65 .notice {66 position: absolute; top: 40px; left: 30px; right: 30px; padding: 24px;67 background: #1a1d21; border-left: 6px solid #e85b5b; color: #e85b5b; font-size: 32px; border-radius: 8px; opacity: 0.6;68 }69 .primary-btn {70 position: absolute; top: 800px; left: 360px; width: 360px; height: 96px;71 background: #1f78c8; border-radius: 8px; color: #fff; font-size: 36px; display: flex; align-items: center; justify-content: center; opacity: 0.7;72 }73 74 /* Overlay */75 .overlay {76 position: absolute; top: 240px; left: 0; width: 1080px; height: 1260px;77 background: rgba(0,0,0,0.55);78 }79 80 /* Modal card */81 .modal {82 position: absolute; top: 340px; left: 30px; width: 1020px;83 background: #3a3b3e; color: #f2f2f2; border-radius: 12px;84 box-shadow: 0 24px 60px rgba(0,0,0,0.6);85 overflow: hidden;86 }87 .modal-header {88 background: #2aa1ff;89 height: 120px;90 display: flex;91 align-items: center;92 padding: 0 24px;93 position: relative;94 }95 .modal-header .title { font-size: 44px; font-weight: 700; margin-left: 20px; }96 .close-x { width: 56px; height: 56px; }97 .save-btn {98 position: absolute; right: 24px; top: 24px;99 padding: 18px 28px;100 background: #ffffff;101 color: #2aa1ff; font-weight: 700; font-size: 34px;102 border-radius: 12px;103 box-shadow: 0 4px 0 rgba(0,0,0,0.15);104 }105 106 .modal-row {107 display: flex; align-items: center; height: 120px; padding: 0 24px;108 border-top: 1px solid #2c2d30;109 }110 .modal-row:first-of-type { border-top: none; }111 .row-icon { width: 90px; display: flex; align-items: center; justify-content: center; }112 .row-text { flex: 1; font-size: 40px; color: #e0e0e0; }113 .row-secondary { font-size: 36px; color: #60a9ff; margin-left: 12px; }114 .row-action { width: 90px; display: flex; align-items: center; justify-content: center; }115 .input-highlight { border-left: 6px solid #2aa1ff; padding-left: 18px; }116 .muted { color: #bfbfbf; }117 118 .chevron svg, .xicon svg { width: 44px; height: 44px; stroke: #bdbdbd; stroke-width: 6; fill: none; }119 .mic svg, .cal svg, .alarm svg, .repeat svg, .remind svg { width: 54px; height: 54px; stroke: #c9c9c9; stroke-width: 6; fill: none; opacity: 0.9; }120 121 /* Keyboard */122 .keyboard {123 position: absolute; bottom: 110px; left: 0; width: 1080px; height: 900px;124 background: #1d1f23; border-top: 1px solid #2a2c31; box-shadow: 0 -12px 24px rgba(0,0,0,0.35);125 padding: 24px 20px;126 }127 .kb-topbar { display: flex; gap: 34px; align-items: center; color: #cdd4dd; margin-bottom: 12px; }128 .kb-topkey {129 width: 90px; height: 90px; border-radius: 16px; background: #2c2e33; display: flex; align-items: center; justify-content: center; font-size: 30px;130 }131 .kb-row { display: flex; gap: 16px; margin-top: 18px; }132 .key {133 flex: 0 0 88px; height: 110px; border-radius: 18px;134 background: #2a2c31; color: #eef0f3; font-size: 38px; display: flex; align-items: center; justify-content: center;135 box-shadow: inset 0 -4px 0 rgba(0,0,0,0.25);136 }137 .key-wide { flex: 0 0 180px; }138 .space { flex: 1 1 auto; min-width: 420px; }139 .enter { background: #b7d6f7; color: #000; }140 .special { background: #c6d7e8; color: #0b2037; }141 .backspace svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 6; fill: none; }142 .gesture {143 position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);144 width: 300px; height: 10px; border-radius: 6px; background: #e6e6e6; opacity: 0.9;145 }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status bar -->152 <div class="status-bar">153 <div class="status-time">6:06</div>154 <div class="status-icons">155 <div class="dot"></div>156 <div class="dot"></div>157 <div class="dot"></div>158 <div class="battery"><div class="level"></div></div>159 </div>160 </div>161 162 <!-- App bar -->163 <div class="app-bar">164 <div class="menu">165 <svg viewBox="0 0 100 70">166 <path d="M8 10 H92 M8 35 H92 M8 60 H92" stroke="#e6f2ff" stroke-width="8" stroke-linecap="round"/>167 </svg>168 </div>169 <div class="title">Tasks</div>170 <div class="actions">171 <div class="icon-btn">172 <svg viewBox="0 0 100 100">173 <circle cx="50" cy="50" r="34" stroke="#e6f2ff" stroke-width="6" fill="none"/>174 <path d="M50 34 V66 M34 50 H66" stroke="#e6f2ff" stroke-width="6" stroke-linecap="round"/>175 </svg>176 </div>177 <div class="icon-btn">178 <svg viewBox="0 0 100 100">179 <circle cx="50" cy="50" r="34" stroke="#e6f2ff" stroke-width="6" fill="none"/>180 <path d="M30 52 L44 66 L72 38" stroke="#e6f2ff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>181 </svg>182 </div>183 <div class="icon-btn">184 <svg viewBox="0 0 100 100">185 <circle cx="44" cy="44" r="26" />186 <path d="M68 68 L90 90" />187 </svg>188 </div>189 </div>190 </div>191 192 <!-- Background content -->193 <div class="page-content">194 <div class="notice">Please allow app to send you notifications</div>195 <div class="primary-btn">Add Reminder</div>196 </div>197 198 <!-- Overlay and Modal -->199 <div class="overlay"></div>200 <div class="modal">201 <div class="modal-header">202 <div class="close-x">203 <svg viewBox="0 0 80 80">204 <path d="M18 18 L62 62 M62 18 L18 62" stroke="#fff" stroke-width="8" stroke-linecap="round"/>205 </svg>206 </div>207 <div class="title">Add Reminder</div>208 <div class="save-btn">SAVE</div>209 </div>210 211 <!-- Row: Remind me to.. -->212 <div class="modal-row input-highlight">213 <div class="row-icon mic">214 <svg viewBox="0 0 64 64">215 <rect x="22" y="12" width="20" height="26" rx="10"/>216 <path d="M32 42 V54 M22 34 C22 46 42 46 42 34" />217 </svg>218 </div>219 <div class="row-text">Remind me to..</div>220 <div class="row-action mic">221 <svg viewBox="0 0 64 64">222 <rect x="22" y="12" width="20" height="26" rx="10"/>223 <path d="M32 42 V54 M22 34 C22 46 42 46 42 34" />224 </svg>225 </div>226 </div>227 228 <!-- Row: Write short note -->229 <div class="modal-row">230 <div class="row-icon mic">231 <svg viewBox="0 0 64 64">232 <rect x="22" y="12" width="20" height="26" rx="10"/>233 <path d="M32 42 V54 M22 34 C22 46 42 46 42 34" />234 </svg>235 </div>236 <div class="row-text muted">Write short note</div>237 <div class="row-action mic">238 <svg viewBox="0 0 64 64">239 <rect x="22" y="12" width="20" height="26" rx="10"/>240 <path d="M32 42 V54 M22 34 C22 46 42 46 42 34" />241 </svg>242 </div>243 </div>244 245 <!-- Row: Date -->246 <div class="modal-row">247 <div class="row-icon cal">248 <svg viewBox="0 0 64 64">249 <rect x="10" y="16" width="44" height="36" rx="6"/>250 <path d="M10 24 H54"/>251 <path d="M20 12 V20 M44 12 V20"/>252 </svg>253 </div>254 <div class="row-text">Wed, Oct 11, 2023</div>255 <div class="row-action xicon">256 <svg viewBox="0 0 64 64">257 <path d="M18 18 L46 46 M46 18 L18 46"/>258 </svg>259 </div>260 </div>261 262 <!-- Row: Time -->263 <div class="modal-row">264 <div class="row-icon alarm">265 <svg viewBox="0 0 64 64">266 <circle cx="32" cy="34" r="16"/>267 <path d="M32 34 L32 24 M32 34 L42 34"/>268 <path d="M16 14 L26 20 M48 14 L38 20"/>269 </svg>270 </div>271 <div class="row-text">06:15 PM <span class="row-secondary">+Add more time</span></div>272 <div class="row-action xicon">273 <svg viewBox="0 0 64 64">274 <path d="M18 18 L46 46 M46 18 L18 46"/>275 </svg>276 </div>277 </div>278 279 <!-- Row: Remind me before -->280 <div class="modal-row">281 <div class="row-icon remind">282 <svg viewBox="0 0 64 64">283 <circle cx="32" cy="32" r="20"/>284 <path d="M32 18 V32 L44 36" />285 </svg>286 </div>287 <div class="row-text">Remind me before</div>288 <div class="row-action chevron">289 <svg viewBox="0 0 64 64">290 <path d="M22 18 L42 32 L22 46"/>291 </svg>292 </div>293 </div>294 295 <!-- Row: Repeat -->296 <div class="modal-row">297 <div class="row-icon repeat">298 <svg viewBox="0 0 64 64">299 <path d="M18 24 C18 18 26 16 32 16 H40 L34 10 M46 40 C46 46 38 48 32 48 H24 L30 54" />300 </svg>301 </div>302 <div class="row-text">Repeat: No repeat</div>303 <div class="row-action chevron">304 <svg viewBox="0 0 64 64">305 <path d="M22 18 L42 32 L22 46"/>306 </svg>307 </div>308 </div>309 </div>310 311 <!-- Keyboard -->312 <div class="keyboard">313 <div class="kb-topbar">314 <div class="kb-topkey">GIF</div>315 <div class="kb-topkey">⚙️</div>316 <div class="kb-topkey">🎨</div>317 <div class="kb-topkey">🎤</div>318 </div>319 <div class="kb-row">320 <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>321 <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>322 </div>323 <div class="kb-row">324 <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>325 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>326 </div>327 <div class="kb-row">328 <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>329 <div class="key">N</div><div class="key">M</div>330 <div class="key backspace">331 <svg viewBox="0 0 64 64">332 <path d="M20 16 L8 32 L20 48 H52 V16 Z"/>333 <path d="M30 24 L42 36 M42 24 L30 36"/>334 </svg>335 </div>336 </div>337 <div class="kb-row">338 <div class="key special key-wide">?123</div>339 <div class="key">,</div>340 <div class="key">😊</div>341 <div class="key space">SPACE</div>342 <div class="key">.</div>343 <div class="key enter key-wide">↵</div>344 </div>345 </div>346 347 <div class="gesture"></div>348</div>349</body>350</html>