GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile 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;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121418;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: 120px;23 background: #0f2e5b;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 }29 .status-time { font-size: 42px; letter-spacing: 1px; }30 .status-icons {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .status-dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }37 .wifi {38 width: 36px; height: 28px;39 display: inline-block;40 background: transparent;41 position: relative;42 }43 .wifi:before, .wifi:after {44 content: ""; position: absolute; border: 3px solid #fff; border-radius: 50%;45 }46 .wifi:before { width: 34px; height: 34px; top: -6px; left: -2px; border-color: #fff transparent transparent transparent; transform: rotate(45deg); }47 .wifi:after { width: 20px; height: 20px; top: 2px; left: 6px; border-color: #fff transparent transparent transparent; transform: rotate(45deg); }48 .battery {49 width: 44px; height: 24px; border: 3px solid #fff; border-radius: 4px; position: relative;50 }51 .battery:after {52 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px;53 }54 .battery-fill { position: absolute; left: 3px; top: 3px; width: 30px; height: 16px; background: #fff; }55 56 /* App toolbar */57 .toolbar {58 position: absolute;59 top: 120px;60 left: 0;61 width: 1080px;62 height: 160px;63 background: #0e4c8b;64 display: flex;65 align-items: center;66 padding: 0 32px;67 box-sizing: border-box;68 box-shadow: 0 6px 20px rgba(0,0,0,0.35);69 }70 .hamburger { width: 60px; height: 44px; margin-right: 24px; }71 .hamburger span { display: block; height: 8px; background: #fff; border-radius: 4px; margin: 6px 0; }72 .app-title { font-size: 64px; font-weight: 700; }73 .toolbar-actions { margin-left: auto; display: flex; gap: 36px; }74 .toolbar-icon {75 width: 64px; height: 64px; border-radius: 50%;76 border: 2px solid rgba(255,255,255,0.5);77 display: flex; align-items: center; justify-content: center;78 }79 .toolbar-icon svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 5; }80 81 /* Background content hint */82 .list-section {83 position: absolute;84 top: 280px;85 left: 0;86 width: 1080px;87 height: 760px;88 background: #161a20;89 }90 .yellow-banner {91 position: absolute; top: 300px; left: 0; width: 1080px; height: 96px;92 background: #f5b400;93 opacity: 0.35;94 }95 .upcoming-header {96 position: absolute; top: 1180px; left: 0; width: 1080px; height: 86px;97 background: #6fae2f; color: #0b0b0b; display: flex; align-items: center; padding-left: 32px;98 font-size: 48px; font-weight: 700;99 }100 101 /* Modal Sheet */102 .sheet {103 position: absolute;104 left: 36px;105 top: 320px;106 width: 1008px;107 background: #33383e;108 border-radius: 12px;109 box-shadow: 0 18px 60px rgba(0,0,0,0.6);110 overflow: hidden;111 }112 .sheet-header {113 height: 120px; background: #3f86ff; display: flex; align-items: center; padding: 0 24px;114 }115 .close-x {116 width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center; justify-content: center;117 color: #fff; font-size: 44px; margin-right: 24px;118 }119 .sheet-title { font-size: 56px; font-weight: 700; flex: 1; }120 .save-btn {121 background: #e9f6ff; color: #0e4c8b; font-weight: 700; font-size: 40px;122 padding: 18px 30px; border-radius: 16px;123 }124 .sheet-content { padding: 18px 24px 24px 24px; }125 .row {126 display: flex; align-items: center; height: 120px; border-bottom: 1px solid rgba(255,255,255,0.12);127 color: #eaeaea; font-size: 46px;128 }129 .row .icon {130 width: 64px; height: 64px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.4);131 margin-right: 28px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px;132 }133 .row .label { flex: 1; }134 .row .mic {135 width: 60px; height: 60px; border-radius: 50%;136 border: 2px solid rgba(255,255,255,0.4);137 display: flex; align-items: center; justify-content: center; margin-left: 12px;138 }139 .row .right-x {140 width: 56px; height: 56px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.3);141 display: flex; align-items: center; justify-content: center; margin-left: 12px; font-size: 40px;142 }143 .row .arrow {144 width: 40px; height: 40px; border-right: 6px solid #bbb; border-top: 6px solid #bbb;145 transform: rotate(45deg); margin-left: 16px;146 }147 .add-more-time { color: #79a9ff; font-size: 40px; margin-left: 10px; }148 .red-note { color: #ff4b4b; font-size: 40px; margin-top: 16px; }149 .pill { display: inline-block; margin-left: 18px; background: #2a3b5e; color: #cfe0ff; padding: 18px 28px; border-radius: 28px; font-size: 40px; }150 151 /* Keyboard */152 .keyboard {153 position: absolute;154 bottom: 0; left: 0;155 width: 1080px; height: 940px;156 background: #1c1f24;157 box-shadow: 0 -8px 24px rgba(0,0,0,0.6) inset;158 padding: 24px 24px 28px 24px;159 box-sizing: border-box;160 }161 .kb-top-row {162 display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;163 }164 .kb-utility {165 width: 84px; height: 84px; background: #2b2f36; border-radius: 18px; display: flex; align-items: center; justify-content: center;166 color: #cfd3d8; font-size: 36px; border: 1px solid #3b4048;167 }168 .keys {169 display: grid;170 grid-template-columns: repeat(10, 1fr);171 gap: 12px;172 margin-top: 12px;173 }174 .key {175 height: 120px; background: #2b2f36; border-radius: 24px; display: flex; align-items: center; justify-content: center;176 color: #e8edf2; font-size: 52px; border: 1px solid #3b4048;177 }178 .key.wide { grid-column: span 2; }179 .key.extra-wide { grid-column: span 3; }180 .kb-bottom {181 display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 12px; margin-top: 16px;182 }183 .space { height: 120px; background: #2b2f36; border-radius: 24px; border: 1px solid #3b4048; grid-column: span 3; display: flex; align-items: center; justify-content: center; color: #cbd2da; font-size: 46px; }184 .enter { height: 120px; background: #92f6f3; color: #0c3b3a; border-radius: 48px; display: flex; align-items: center; justify-content: center; font-size: 64px; }185 .dot { height: 120px; background: #2b2f36; border-radius: 24px; border: 1px solid #3b4048; display: flex; align-items: center; justify-content: center; font-size: 64px; color: #e8edf2; }186</style>187</head>188<body>189<div id="render-target">190 191 <!-- Status bar -->192 <div class="status-bar">193 <div class="status-time">6:46</div>194 <div class="status-icons">195 <div class="status-dot"></div>196 <div class="status-dot"></div>197 <div class="status-dot"></div>198 <div class="status-dot"></div>199 <div class="status-dot"></div>200 <div class="wifi"></div>201 <div class="battery"><div class="battery-fill"></div></div>202 </div>203 </div>204 205 <!-- App toolbar -->206 <div class="toolbar">207 <div class="hamburger">208 <span></span>209 <span></span>210 <span></span>211 </div>212 <div class="app-title">Tasks</div>213 <div class="toolbar-actions">214 <div class="toolbar-icon">215 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><line x1="12" y1="12" x2="12" y2="6"></line><line x1="12" y1="12" x2="16" y2="14"></line></svg>216 </div>217 <div class="toolbar-icon">218 <svg viewBox="0 0 24 24"><polyline points="5,13 10,18 19,7"></polyline></svg>219 </div>220 <div class="toolbar-icon">221 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><line x1="15" y1="15" x2="22" y2="22"></line></svg>222 </div>223 </div>224 </div>225 226 <!-- Background list hints -->227 <div class="list-section"></div>228 <div class="yellow-banner"></div>229 230 <!-- Modal sheet -->231 <div class="sheet">232 <div class="sheet-header">233 <div class="close-x">✕</div>234 <div class="sheet-title">Add Reminder</div>235 <div class="save-btn">SAVE</div>236 </div>237 <div class="sheet-content">238 <div class="row">239 <div class="label">Remind me to..</div>240 <div class="mic">🎤</div>241 </div>242 <div class="row">243 <div class="label">Write short note</div>244 <div class="mic">🎤</div>245 </div>246 <div class="row">247 <div class="icon">📅</div>248 <div class="label">Wed, Sep 27, 2023</div>249 <div class="right-x">✕</div>250 </div>251 <div class="row">252 <div class="icon">⏱</div>253 <div class="label">06:55 PM</div>254 <div class="add-more-time">+Add more time</div>255 <div class="right-x">✕</div>256 </div>257 <div class="row">258 <div class="icon">⏰</div>259 <div class="label">Remind me before</div>260 <div class="arrow"></div>261 </div>262 <div class="row" style="border-bottom:none;">263 <div class="icon">🔁</div>264 <div class="label">Repeat: No repeat</div>265 <div class="arrow"></div>266 </div>267 <div class="red-note">268 NOTE: You can change a Date Time picker from app settings.269 <span class="pill">Got it</span>270 </div>271 </div>272 </div>273 274 <!-- Upcoming header above keyboard -->275 <div class="upcoming-header">Upcoming</div>276 277 <!-- Keyboard -->278 <div class="keyboard">279 <div class="kb-top-row">280 <div class="kb-utility">🔲</div>281 <div class="kb-utility">🙂</div>282 <div class="kb-utility">GIF</div>283 <div class="kb-utility">🌐</div>284 <div class="kb-utility">⚙</div>285 <div class="kb-utility">🎨</div>286 <div class="kb-utility">🎙</div>287 </div>288 289 <!-- Row 1 -->290 <div class="keys">291 <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>292 <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>293 </div>294 <!-- Row 2 -->295 <div class="keys" style="margin-top: 12px;">296 <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>297 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div><div class="key wide">⌫</div>298 </div>299 <!-- Row 3 -->300 <div class="keys" style="margin-top: 12px;">301 <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>302 <div class="key">N</div><div class="key">M</div><div class="key wide">⌂</div><div class="key">,</div><div class="key">🙂</div>303 </div>304 <!-- Bottom row -->305 <div class="kb-bottom">306 <div class="kb-utility">?123</div>307 <div class="kb-utility">,</div>308 <div class="space">Space</div>309 <div class="dot">.</div>310 <div class="enter">⏎</div>311 </div>312 </div>313 314</div>315</body>316</html>