GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Options</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #fff;29    font-weight: 600;30    font-size: 42px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .signal-dots span {38    display: inline-block;39    width: 18px; height: 18px;40    background: #fff; border-radius: 50%;41    margin-right: 8px;42    opacity: 0.9;43  }44  .signal-dots span:nth-child(4) { opacity: 0.6; }45  .wifi-icon svg, .battery-icon svg { display: block; }46  .wifi-icon svg path { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; }47  .battery-icon svg rect, .battery-icon svg path { stroke: #fff; stroke-width: 16; fill: none; }48 49  /* Header */50  .header {51    position: absolute;52    top: 110px;53    left: 0;54    width: 1080px;55    height: 130px;56    display: flex;57    align-items: center;58    justify-content: center;59    border-bottom: 1px solid #1f1f1f;60    background: rgba(0,0,0,0.75);61    font-size: 56px;62    font-weight: 700;63  }64  .header .left, .header .right {65    position: absolute;66    top: 0;67    height: 130px;68    display: flex;69    align-items: center;70    padding: 0 36px;71    font-size: 52px;72    font-weight: 600;73  }74  .header .left { left: 0; color: #ff4b4b; }75  .header .right { right: 0; color: #3b82f6; }76 77  /* List area */78  .list {79    position: absolute;80    top: 240px;81    left: 0;82    width: 1080px;83  }84  .row {85    width: 100%;86    min-height: 120px;87    display: flex;88    align-items: center;89    justify-content: space-between;90    padding: 0 44px;91    border-bottom: 1px solid #1f1f1f;92    background: #0d0d0d;93    box-sizing: border-box;94  }95  .row .label {96    font-size: 50px;97    font-weight: 600;98    color: #eaeaea;99  }100  .row .value { font-size: 46px; color: #bfbfbf; }101  .title-row .label { font-size: 56px; font-weight: 700; }102  .date-row { background: #0b0b0b; }103  .date-row .value { font-size: 50px; color: #6aa0ff; font-weight: 600; }104  .date-row .right {105    display: flex; align-items: center; gap: 16px;106  }107 108  /* Attach/Icons */109  .icon-btn {110    width: 72px; height: 72px;111    border: 1px solid #2b2b2b; border-radius: 16px;112    display: flex; align-items: center; justify-content: center;113    background: #121212;114  }115  .paperclip svg, .pencil svg, .calendar svg { width: 48px; height: 48px; }116  .paperclip svg path, .pencil svg path, .calendar svg rect, .calendar svg line {117    stroke: #9aa0a6; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round;118  }119 120  /* Segmented quick add */121  .segments {122    display: grid;123    grid-template-columns: repeat(4, 1fr);124    gap: 24px;125    padding: 28px 44px 36px 44px;126    background: #0d0d0d;127    border-bottom: 1px solid #1f1f1f;128  }129  .seg {130    height: 92px;131    border-radius: 46px;132    background: #141414;133    border: 1px solid #2a2a2a;134    color: #e5e5e5;135    font-size: 40px;136    font-weight: 600;137    display: flex; align-items: center; justify-content: center;138  }139 140  /* Toggles */141  .toggle {142    width: 176px; height: 92px;143    border-radius: 46px;144    background: #3a3a3a;145    position: relative;146    transition: background .2s ease;147  }148  .toggle.on { background: #ff8c2a; }149  .knob {150    position: absolute;151    top: 8px;152    left: 8px;153    width: 76px; height: 76px;154    border-radius: 50%;155    background: #fff;156    transition: left .2s ease;157  }158  .toggle.on .knob { left: 92px; }159 160  /* Footer / safe area */161  .footer-space {162    width: 100%;163    height: 480px;164    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.85));165  }166  .home-indicator {167    position: absolute;168    bottom: 40px;169    left: 50%;170    transform: translateX(-50%);171    width: 420px; height: 16px;172    background: #e5e5e5;173    border-radius: 10px;174    opacity: 0.8;175  }176</style>177</head>178<body>179<div id="render-target">180 181  <!-- Status bar -->182  <div class="status-bar">183    <div class="time">1:13</div>184    <div class="status-right">185      <div class="signal-dots">186        <span></span><span></span><span></span><span></span>187      </div>188      <div class="wifi-icon">189        <svg width="56" height="40" viewBox="0 0 56 40">190          <path d="M6 16c10-8 34-8 44 0"></path>191          <path d="M12 22c8-6 24-6 32 0"></path>192          <path d="M20 28c6-4 10-4 16 0"></path>193          <path d="M26 34c2-2 2-2 4 0"></path>194        </svg>195      </div>196      <div class="battery-icon">197        <svg width="84" height="40" viewBox="0 0 84 40">198          <rect x="4" y="6" width="64" height="28" rx="6"></rect>199          <path d="M72 14h8v12h-8z"></path>200        </svg>201      </div>202    </div>203  </div>204 205  <!-- Header -->206  <div class="header">207    <div class="left">Cancel</div>208    Options209    <div class="right">Done</div>210  </div>211 212  <!-- List content -->213  <div class="list">214 215    <div class="row title-row">216      <div class="label">Ashu's birthday</div>217    </div>218 219    <div class="row">220      <div class="label">Note</div>221      <div class="icon-btn paperclip">222        <svg viewBox="0 0 48 48">223          <path d="M16 14l14-6c6-2 10 6 4 9L22 24c-10 6-16-8-6-12l18-8"></path>224        </svg>225      </div>226    </div>227 228    <div class="row">229      <div class="label">Subtasks</div>230      <div style="display:flex; align-items:center; gap:18px;">231        <div style="width:56px;height:56px;border-radius:28px;border:1px solid #2b2b2b;display:flex;align-items:center;justify-content:center;background:#121212;font-size:40px;color:#e5e5e5;">1</div>232        <div class="icon-btn pencil">233          <svg viewBox="0 0 48 48">234            <path d="M10 34l10-2 16-16-8-8-16 16-2 10z"></path>235          </svg>236        </div>237      </div>238    </div>239 240    <div class="row">241      <div class="label">Remind me on a day</div>242      <div class="toggle on">243        <div class="knob"></div>244      </div>245    </div>246 247    <div class="row date-row">248      <div class="value">Thursday, Aug 10, 2023, 9:00 PM</div>249      <div class="right">250        <div class="icon-btn calendar">251          <svg viewBox="0 0 48 48">252            <rect x="6" y="10" width="36" height="30" rx="4"></rect>253            <line x1="6" y1="18" x2="42" y2="18"></line>254            <line x1="14" y1="6" x2="14" y2="16"></line>255            <line x1="34" y1="6" x2="34" y2="16"></line>256          </svg>257        </div>258      </div>259    </div>260 261    <div class="segments">262      <div class="seg">+ 5 MIN</div>263      <div class="seg">+ 15 MIN</div>264      <div class="seg">+ 1 HOUR</div>265      <div class="seg">+ 1 DAY</div>266    </div>267 268    <div class="row">269      <div class="label">Reminder before event</div>270    </div>271 272    <div class="row">273      <div class="label">Repeat</div>274      <div class="value">Every year</div>275    </div>276 277    <div class="row">278      <div class="label">At a location</div>279      <div class="toggle">280        <div class="knob"></div>281      </div>282    </div>283 284    <div class="row">285      <div class="label">Important reminder</div>286      <div class="toggle">287        <div class="knob"></div>288      </div>289    </div>290 291    <div class="row">292      <div class="label">Speak in a voice</div>293      <div class="value">Default</div>294    </div>295 296    <div class="row">297      <div class="label">Standard sound</div>298      <div class="value">Default</div>299    </div>300 301    <div class="row" style="border-bottom:none;">302      <div class="label">List</div>303      <div class="value">Reminders</div>304    </div>305 306    <div class="footer-space"></div>307 308  </div>309 310  <div class="home-indicator"></div>311</div>312</body>313</html>