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; height:2400px; position:relative; overflow:hidden;9 background:#0d0f12;10 color:#fff;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0; height:96px;16 background:#0b3c64;17 display:flex; align-items:center; padding:0 24px; font-weight:600;18 }19 .status-time { font-size:38px; letter-spacing:1px; }20 .status-icons { margin-left:auto; display:flex; gap:18px; }21 .dot { width:12px; height:12px; background:#fff; border-radius:50%; opacity:.9; }22 .signal {23 width:28px; height:28px; border:2px solid #fff; border-top-color:transparent; border-left-color:transparent;24 transform:rotate(45deg); margin-top:6px;25 }26 .battery {27 width:44px; height:22px; border:3px solid #fff; position:relative; border-radius:4px;28 }29 .battery:after {30 content:""; position:absolute; right:-8px; top:5px; width:6px; height:12px; background:#fff; border-radius:2px;31 }32 33 /* App bar */34 .app-bar {35 position:absolute; top:96px; left:0; right:0; height:132px;36 background:#115a9e; display:flex; align-items:center; padding:0 28px; box-sizing:border-box;37 }38 .menu-icon { width:46px; height:34px; position:relative; margin-right:20px; }39 .menu-icon span { position:absolute; left:0; right:0; height:6px; background:#fff; border-radius:3px; }40 .menu-icon span:nth-child(1){ top:0; } .menu-icon span:nth-child(2){ top:14px; } .menu-icon span:nth-child(3){ top:28px; }41 .title { font-size:60px; font-weight:700; letter-spacing:1px; }42 .app-actions { margin-left:auto; display:flex; gap:40px; align-items:center; }43 .circle-icon {44 width:64px; height:64px; border-radius:50%; border:3px solid rgba(255,255,255,.7);45 display:flex; align-items:center; justify-content:center;46 }47 .circle-icon svg { width:34px; height:34px; fill:#fff; }48 49 /* Background list just for context */50 .list-area {51 position:absolute; top:228px; left:0; right:0; bottom:860px;52 background:#0f1115;53 padding:24px;54 }55 .list-item {56 height:120px; margin:20px 0; background:#1b1f25; border-radius:10px;57 display:flex; align-items:center; padding:0 24px; color:#9aa3ad; font-size:40px;58 }59 60 /* Modal card */61 .modal {62 position:absolute; top:210px; left:30px; width:1020px;63 background:#2c2f34; border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.6); overflow:hidden;64 }65 .modal-header {66 height:120px; background:#3b7be0; display:flex; align-items:center; padding:0 24px;67 }68 .close-x {69 width:52px; height:52px; border:3px solid rgba(255,255,255,.9); border-radius:10px; position:relative; margin-right:18px;70 }71 .close-x:before, .close-x:after {72 content:""; position:absolute; top:50%; left:50%; width:28px; height:3px; background:#fff;73 transform-origin:center;74 }75 .close-x:before { transform:translate(-50%,-50%) rotate(45deg); }76 .close-x:after { transform:translate(-50%,-50%) rotate(-45deg); }77 .modal-title { font-size:52px; font-weight:700; }78 .save-btn {79 margin-left:auto; background:#fff; color:#2d69d9; padding:18px 28px; border-radius:16px; font-weight:800; font-size:38px;80 }81 .modal-body { padding:18px 0 24px 0; }82 .field-row {83 display:flex; align-items:center; padding:26px 28px; border-bottom:1px solid rgba(255,255,255,.07);84 }85 .field-row .icon {86 width:60px; height:60px; display:flex; align-items:center; justify-content:center; margin-right:24px; color:#cfd8dc;87 }88 .field-main { flex:1; }89 .field-title { font-size:50px; font-weight:700; color:#fff; }90 .field-sub { font-size:44px; color:#b0b6bd; }91 .mic, .x-icon, .chev { margin-left:16px; opacity:.9; }92 .mic svg, .x-icon svg, .chev svg { width:44px; height:44px; fill:#9fb1c4; }93 .add-more { color:#5ca7ff; font-size:42px; margin-left:20px; }94 .hint { color:#ff6b6b; font-size:38px; padding:22px 28px 0 28px; }95 .gotit {96 position:absolute; right:24px; bottom:18px; background:#2a2f36; padding:12px 26px; border-radius:40px; color:#cfe0ff; border:1px solid #4a5568; font-size:36px;97 }98 99 /* Keyboard */100 .keyboard {101 position:absolute; left:0; right:0; bottom:0; height:930px; background:#141519; border-top:1px solid #222;102 box-shadow:0 -6px 20px rgba(0,0,0,.6);103 }104 .kbd-toolbar {105 height:120px; display:flex; align-items:center; gap:26px; padding:0 30px; background:#111216;106 }107 .tool { width:84px; height:84px; background:#1e2126; border-radius:22px; display:flex; align-items:center; justify-content:center; color:#cfd8dc; font-weight:700; }108 .keys { padding:24px 18px; }109 .row { display:flex; justify-content:center; gap:16px; margin:18px 0; }110 .key {111 width:84px; height:128px; background:#20252c; border-radius:22px; display:flex; align-items:center; justify-content:center; color:#e8edf2; font-size:46px;112 box-shadow: inset 0 -2px 0 rgba(255,255,255,.06);113 }114 .key.wide { width:120px; }115 .space-row { display:flex; gap:18px; align-items:center; justify-content:center; padding:8px 18px; }116 .pill-key { background:#8fbec5; color:#122; }117 .space { flex:1; height:130px; background:#262b32; border-radius:26px; }118 .enter { width:160px; height:130px; background:#90f3f4; color:#0a1f22; border-radius:52px; font-weight:800; font-size:48px; display:flex; align-items:center; justify-content:center; }119 .key.small { width:110px; }120</style>121</head>122<body>123<div id="render-target">124 125 <!-- Status Bar -->126 <div class="status-bar">127 <div class="status-time">6:47</div>128 <div class="status-icons">129 <div class="dot"></div>130 <div class="dot"></div>131 <div class="dot"></div>132 <div class="dot"></div>133 <div class="signal"></div>134 <div class="battery"></div>135 </div>136 </div>137 138 <!-- App Bar -->139 <div class="app-bar">140 <div class="menu-icon">141 <span></span><span></span><span></span>142 </div>143 <div class="title">Tasks</div>144 <div class="app-actions">145 <div class="circle-icon">146 <svg viewBox="0 0 24 24"><path d="M12 7a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1z"/></svg>147 </div>148 <div class="circle-icon">149 <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>150 </div>151 <div class="circle-icon">152 <svg viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 6.32-3.16l4.42 4.42-1.41 1.41-4.42-4.42A7.96 7.96 0 0 1 10 18zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/></svg>153 </div>154 </div>155 </div>156 157 <!-- Background list area -->158 <div class="list-area">159 <div class="list-item">Upcoming</div>160 <div class="list-item">Task example</div>161 <div class="list-item">Another task</div>162 </div>163 164 <!-- Modal Card -->165 <div class="modal">166 <div class="modal-header">167 <div class="close-x"></div>168 <div class="modal-title">Add Reminder</div>169 <div class="save-btn">SAVE</div>170 </div>171 172 <div class="modal-body">173 <!-- Title -->174 <div class="field-row">175 <div class="field-main field-title">Dance performance</div>176 <div class="mic">177 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V20H9v2h6v-2h-2v-2.08A7 7 0 0 0 19 11h-2z"/></svg>178 </div>179 </div>180 181 <!-- Note -->182 <div class="field-row">183 <div class="field-main field-sub">Write short note</div>184 <div class="mic">185 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V20H9v2h6v-2h-2v-2.08A7 7 0 0 0 19 11h-2z"/></svg>186 </div>187 </div>188 189 <!-- Date -->190 <div class="field-row">191 <div class="icon">192 <svg viewBox="0 0 24 24"><path fill="#cfd8dc" d="M7 2h2v3H7V2zm8 0h2v3h-2V2zM4 7h16v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7zm2 5h12v8H6v-8z"/></svg>193 </div>194 <div class="field-main field-title" style="font-weight:600;">Wed, Sep 27, 2023</div>195 <div class="x-icon">196 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#9fb1c4" stroke-width="2" fill="none" stroke-linecap="round"/></svg>197 </div>198 </div>199 200 <!-- Time -->201 <div class="field-row">202 <div class="icon">203 <svg viewBox="0 0 24 24"><path fill="#cfd8dc" d="M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm1 11.41 4.3 2.48-1 1.73L11 13V6h2v6.41z"/></svg>204 </div>205 <div class="field-main">206 <div class="field-title" style="display:flex; align-items:center;">207 06:55 PM <span class="add-more">+Add more time</span>208 </div>209 </div>210 <div class="x-icon">211 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#9fb1c4" stroke-width="2" fill="none" stroke-linecap="round"/></svg>212 </div>213 </div>214 215 <!-- Remind me before -->216 <div class="field-row">217 <div class="icon">218 <svg viewBox="0 0 24 24"><path fill="#cfd8dc" d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7L4 18v2h16v-2l-2-2z"/></svg>219 </div>220 <div class="field-main field-title" style="font-weight:600;">Remind me before</div>221 <div class="chev">222 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#9fb1c4" stroke-width="2" stroke-linecap="round"/></svg>223 </div>224 </div>225 226 <!-- Repeat -->227 <div class="field-row">228 <div class="icon">229 <svg viewBox="0 0 24 24"><path fill="#cfd8dc" d="M7 7h7V4l5 5-5 5v-3H7a3 3 0 0 0 0 6h2v2H7a5 5 0 1 1 0-10zm10 10h-7v3l-5-5 5-5v3h7a3 3 0 0 0 0-6h-2V5h2a5 5 0 1 1 0 10z"/></svg>230 </div>231 <div class="field-main field-title" style="font-weight:600;">Repeat: No repeat</div>232 <div class="chev">233 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#9fb1c4" stroke-width="2" stroke-linecap="round"/></svg>234 </div>235 </div>236 237 <div class="hint">NOTE: You can change a Date Time picker from app settings.</div>238 <div class="gotit">Got it</div>239 </div>240 </div>241 242 <!-- Keyboard -->243 <div class="keyboard">244 <div class="kbd-toolbar">245 <div class="tool">◻</div>246 <div class="tool">☺</div>247 <div class="tool">GIF</div>248 <div class="tool">G↔</div>249 <div class="tool">⚙</div>250 <div class="tool">🎨</div>251 <div class="tool">🎙</div>252 </div>253 <div class="keys">254 <div class="row">255 <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>256 </div>257 <div class="row">258 <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>259 </div>260 <div class="row">261 <div class="key wide">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>262 <div class="key wide">⌫</div>263 </div>264 <div class="space-row">265 <div class="key small pill-key">?123</div>266 <div class="key small">,</div>267 <div class="key small">☺</div>268 <div class="space"></div>269 <div class="key small">.</div>270 <div class="enter">↵</div>271 </div>272 </div>273 </div>274 275</div>276</body>277</html>