GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Time Picker</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;9    position:relative; overflow:hidden;10    background:#121215; color:#e9e7ef;11    box-sizing:border-box;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0;17    height:100px; padding:0 36px;18    display:flex; align-items:center; justify-content:space-between;19    color:#fff; font-size:38px;20  }21  .status-left { display:flex; align-items:center; gap:28px; }22  .status-right { display:flex; align-items:center; gap:26px; font-size:34px; }23  .dot { width:12px; height:12px; background:#fff; border-radius:50%; display:inline-block; opacity:.8; }24 25  /* App header */26  .app-header {27    position:absolute; top:120px; left:0; right:0;28    padding:0 36px;29    height:120px; display:flex; align-items:center; justify-content:space-between;30  }31  .close-btn {32    width:80px; height:80px; border-radius:40px;33    display:flex; align-items:center; justify-content:center;34    color:#bcbcc8; cursor:pointer;35  }36  .close-btn svg { width:44px; height:44px; }37  .save-btn {38    background:#7E57C2; color:#fff;39    padding:22px 36px; border-radius:40px; font-weight:600; font-size:40px;40  }41 42  /* Title field */43  .title-field {44    position:absolute; top:240px; left:36px; right:36px;45    font-size:88px; color:#d7d3e8; border-bottom:2px solid #2a2930;46    padding-bottom:16px;47  }48 49  /* Underlying form (dimmed content to show behind modal) */50  .form-list {51    position:absolute; top:420px; left:36px; right:36px;52    color:#b7b4c6; opacity:.65;53  }54  .form-item {55    display:flex; align-items:center; gap:28px;56    padding:32px 0; border-bottom:1px solid #24232a; font-size:46px;57  }58  .form-item svg { width:46px; height:46px; fill:#b7b4c6; }59 60  /* Modal overlay */61  .overlay {62    position:absolute; inset:0;63    background:rgba(0,0,0,.35);64  }65  .modal {66    position:absolute; left:90px; top:520px;67    width:900px; height:1160px;68    background:#2c2630; border-radius:48px; box-shadow:0 20px 60px rgba(0,0,0,.6);69    padding:48px;70  }71  .modal h3 {72    margin:0 0 32px 0; font-size:46px; color:#cfcbe0; letter-spacing:.5px;73  }74  .time-row {75    display:flex; align-items:center; gap:36px; margin-bottom:36px;76  }77  .time-box {78    width:260px; height:180px; border-radius:28px;79    background:#3a3340; display:flex; align-items:center; justify-content:center;80    font-size:120px; font-weight:700; color:#f0edf9;81  }82  .time-box.minutes { color:#c6a6ff; background:#4a3e54; }83  .ampm {84    display:flex; flex-direction:column; gap:18px;85  }86  .ampm .btn {87    width:150px; height:86px; border-radius:20px;88    display:flex; align-items:center; justify-content:center;89    font-size:42px; font-weight:700;90    background:#4b3c3c; color:#f5e9e9;91    border:2px solid #6a5a5a;92  }93  .ampm .btn.pm { background:#1f1c22; color:#dcd8e8; border-color:#3b3441; }94 95  /* Clock face */96  .clock {97    position:relative; margin:20px auto 40px auto; width:740px; height:740px;98    background:#2b2432; border-radius:50%; border:2px solid #3c3441;99  }100  .mark {101    position:absolute; color:#cfcbe0; font-size:40px;102  }103  /* Positions for minute labels */104  .m05 { left:540px; top:60px; }105  .m10 { left:664px; top:166px; }106  .m15 { left:720px; top:326px; }107  .m20 { left:664px; top:504px; }108  .m25 { left:555px; top:620px; }109  .m30 { left:356px; top:690px; }110  .m35 { left:160px; top:620px; }111  .m40 { left:52px; top:504px; }112  .m45 { left:0px; top:326px; }113  .m50 { left:52px; top:166px; }114  .m55 { left:168px; top:60px; }115  .center-dot {116    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);117    width:140px; height:140px; border-radius:50%;118    background:#c8aef9; color:#2c2630; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:46px;119    box-shadow:0 0 0 12px #c8aef9;120  }121  .hand {122    position:absolute; left:50%; top:50%; transform:translate(-50%, -100%);123    width:12px; height:300px; background:#c8aef9; border-radius:8px;124  }125  .hand-tip {126    position:absolute; left:50%; top:150px; transform:translate(-50%, 0);127    width:28px; height:28px; background:#c8aef9; border-radius:50%;128  }129 130  .modal-footer {131    position:absolute; bottom:40px; left:48px; right:48px;132    display:flex; align-items:center; justify-content:space-between;133  }134  .kbd {135    display:flex; align-items:center; gap:18px; color:#cfcbe0; font-size:40px;136  }137  .kbd-icon {138    width:68px; height:52px; border-radius:10px; border:2px solid #cfcbe0;139  }140  .footer-actions { display:flex; align-items:center; gap:36px; }141  .cancel, .ok {142    font-size:46px; color:#cfcbe0;143  }144  .ok { color:#c6a6ff; font-weight:700; }145</style>146</head>147<body>148<div id="render-target">149  <!-- Status bar -->150  <div class="status-bar">151    <div class="status-left">152      <div>8:41</div>153      <div class="dot"></div>154      <div class="dot" style="opacity:.6;"></div>155      <div class="dot" style="opacity:.45;"></div>156      <div class="dot" style="opacity:.3;"></div>157    </div>158    <div class="status-right">159      <span>◌</span>160      <span>Wi‑Fi</span>161      <span>🔋</span>162    </div>163  </div>164 165  <!-- Header -->166  <div class="app-header">167    <div class="close-btn" title="Close">168      <svg viewBox="0 0 24 24">169        <path d="M6 6 L18 18 M6 18 L18 6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>170      </svg>171    </div>172    <div class="save-btn">Save</div>173  </div>174 175  <!-- Title field -->176  <div class="title-field">Transport</div>177 178  <!-- Underlying list (dimmed) -->179  <div class="form-list">180    <div class="form-item">181      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>182      <div>Events • dbwscratch.test.id4@gmail.com</div>183    </div>184    <div class="form-item">185      <svg viewBox="0 0 24 24"><path d="M12 7 v10 M7 12 h10" stroke="currentColor" stroke-width="2" fill="none"/></svg>186      <div>2:00 AM</div>187    </div>188    <div class="form-item">189      <svg viewBox="0 0 24 24"><path d="M4 12 a8 8 0 1 0 16 0 a8 8 0 1 0 -16 0 M12 6 v6 l4 2" stroke="currentColor" stroke-width="2" fill="none"/></svg>190      <div>Repeat • Does not repeat</div>191    </div>192    <div class="form-item">193      <svg viewBox="0 0 24 24"><path d="M12 2 L2 22 H22 Z" fill="currentColor"/></svg>194      <div>Add guests</div>195    </div>196    <div class="form-item">197      <svg viewBox="0 0 24 24"><path d="M12 2 C7 2 3 6 3 10 c0 8 9 12 9 12 s9-4 9-12 c0-4-4-8-9-8z" fill="currentColor"/></svg>198      <div>Add location</div>199    </div>200    <div class="form-item">201      <svg viewBox="0 0 24 24"><path d="M6 18 h12 M6 6 h12" stroke="currentColor" stroke-width="2" fill="none"/></svg>202      <div>30 minutes before • Add notification</div>203    </div>204    <div class="form-item">205      <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" fill="currentColor"/></svg>206      <div>Default color</div>207    </div>208  </div>209 210  <!-- Modal -->211  <div class="overlay"></div>212  <div class="modal">213    <h3>Select time</h3>214 215    <div class="time-row">216      <div class="time-box">02</div>217      <div class="time-box minutes">00</div>218      <div class="ampm">219        <div class="btn">AM</div>220        <div class="btn pm">PM</div>221      </div>222    </div>223 224    <div class="clock">225      <div class="center-dot">00</div>226      <div class="hand"></div>227      <div class="hand-tip"></div>228 229      <div class="mark m05">05</div>230      <div class="mark m10">10</div>231      <div class="mark m15">15</div>232      <div class="mark m20">20</div>233      <div class="mark m25">25</div>234      <div class="mark m30">30</div>235      <div class="mark m35">35</div>236      <div class="mark m40">40</div>237      <div class="mark m45">45</div>238      <div class="mark m50">50</div>239      <div class="mark m55">55</div>240    </div>241 242    <div class="modal-footer">243      <div class="kbd">244        <div class="kbd-icon"></div>245        <span>Keyboard</span>246      </div>247      <div class="footer-actions">248        <div class="cancel">Cancel</div>249        <div class="ok">OK</div>250      </div>251    </div>252  </div>253</div>254</body>255</html>