GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Edit Task - Time Picker</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0b0b0d; color: #cfd8dc;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0;17    width: 100%; height: 120px;18    padding: 0 36px;19    display: flex; align-items: center; justify-content: space-between;20    color: #b0bec5; font-size: 36px; letter-spacing: 0.5px;21  }22  .status-icons { display: flex; gap: 28px; align-items: center; }23  .icon {24    width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;25    fill: #b0bec5;26  }27 28  /* App bar */29  .app-bar {30    position: absolute; top: 120px; left: 0;31    width: 100%; height: 140px;32    display: flex; align-items: center; justify-content: space-between;33    padding: 0 36px;34  }35  .title { font-size: 64px; color: #e0e6ea; }36  .action-icons { display: flex; gap: 32px; align-items: center; }37 38  /* Content */39  .section-label {40    position: absolute; top: 300px; left: 36px;41    font-size: 36px; color: #8fa3ad; letter-spacing: 1px;42  }43  .card {44    position: absolute; top: 360px; left: 36px;45    width: 1008px; height: 170px;46    background: #151619; border-radius: 40px;47    box-shadow: 0 6px 24px rgba(0,0,0,0.6);48    display: flex; align-items: center; padding: 0 40px; gap: 24px;49  }50  .input-text {51    flex: 1; font-size: 46px; color: #e5eaee;52  }53  .mic { width: 60px; height: 60px; fill: #8fa3ad; }54 55  /* Time picker modal */56  .modal {57    position: absolute; left: 80px; top: 520px;58    width: 920px; height: 1200px;59    background: #1b1c20; border-radius: 40px;60    box-shadow: 0 18px 80px rgba(0,0,0,0.8);61    padding: 50px 40px;62  }63  .time-readout {64    font-size: 160px; line-height: 1; color: #c7d2e2;65    letter-spacing: 2px; margin-bottom: 10px;66  }67  .ampm { font-size: 50px; color: #8593a5; margin-right: 24px; }68  .readout-row { display: flex; align-items: baseline; gap: 24px; }69 70  .clock {71    position: relative; width: 740px; height: 740px; margin: 30px auto 20px;72    background: #16171b; border-radius: 50%;73    border: 2px solid #2c2f36;74  }75  .hour { position: absolute; color: #a5b0c0; font-size: 54px; }76  /* Hour positions (approx) */77  .h12 { left: 50%; top: 20px; transform: translateX(-50%); }78  .h1  { left: 70%; top: 120px; transform: translateX(-50%); }79  .h2  { left: 82%; top: 260px; transform: translateX(-50%); }80  .h3  { left: 90%; top: 380px; transform: translateX(-50%); }81  .h4  { left: 80%; top: 520px; transform: translateX(-50%); }82  .h5  { left: 72%; top: 660px; transform: translateX(-50%); }83  .h6  { left: 50%; top: 700px; transform: translate(-50%, -50%); }84  .h7  { left: 28%; top: 660px; transform: translateX(-50%); }85  .h8  { left: 18%; top: 520px; transform: translateX(-50%); }86  .h9  { left: 8%; top: 380px; transform: translateX(-50%); }87  .h10 { left: 18%; top: 260px; transform: translateX(-50%); }88  .h11 { left: 30%; top: 120px; transform: translateX(-50%); }89 90  .clock-center {91    position: absolute; left: 50%; top: 50%;92    width: 20px; height: 20px; background: #aab4c6; border-radius: 50%;93    transform: translate(-50%, -50%);94  }95  .hand {96    position: absolute; left: 50%; top: 50%;97    width: 6px; height: 280px; background: #7f8da4;98    transform-origin: center bottom; transform: translate(-50%, -100%) rotate(30deg);99    border-radius: 3px;100  }101 102  .modal-actions {103    position: absolute; bottom: 40px; left: 40px; right: 40px;104    display: flex; align-items: center; justify-content: space-between;105  }106  .left-tools { display: flex; align-items: center; gap: 26px; }107  .pill {108    display: inline-flex; align-items: center; gap: 16px;109    background: #202126; color: #9aa8b7; padding: 16px 24px; border-radius: 26px;110    font-size: 40px;111  }112  .toggle {113    width: 86px; height: 44px; background: #2b2d33; border-radius: 22px; position: relative;114  }115  .toggle::after {116    content: ""; position: absolute; width: 38px; height: 38px; background: #6c7687;117    border-radius: 50%; left: 6px; top: 3px;118  }119  .tool-btn {120    display: inline-flex; align-items: center; justify-content: center;121    width: 160px; height: 90px; border-radius: 28px; background: #23252b; color: #b5c1cf;122    gap: 16px; font-size: 40px;123    border: 1px solid #31343b;124  }125  .tool-btn.active { background: #2c3646; }126  .tool-icon { width: 56px; height: 56px; fill: #b5c1cf; }127  .action-btns { display: flex; gap: 24px; }128  .btn {129    min-width: 220px; height: 96px; border-radius: 28px; font-size: 48px;130    display: inline-flex; align-items: center; justify-content: center;131    padding: 0 40px; cursor: default;132  }133  .btn-cancel { background: transparent; color: #aeb9c7; border: 2px solid #3a3d44; }134  .btn-ok { background: #6f89af; color: #fff; }135 136  /* Bottom Save button */137  .save-btn {138    position: absolute; left: 36px; bottom: 120px;139    width: 300px; height: 110px; border-radius: 28px;140    background: #5f6e84; color: #eaf0f6; font-size: 48px;141    display: flex; align-items: center; justify-content: center; gap: 18px;142  }143  .save-icon { width: 48px; height: 48px; fill: #eaf0f6; }144 145  /* Floating action button */146  .fab {147    position: absolute; right: 36px; bottom: 120px;148    width: 160px; height: 160px; border-radius: 40px;149    background: #b9635e; display: flex; align-items: center; justify-content: center;150    box-shadow: 0 14px 40px rgba(0,0,0,0.6);151  }152  .fab svg { width: 96px; height: 96px; fill: #fff; }153 154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status Bar -->160  <div class="status-bar">161    <div>12:55</div>162    <div class="status-icons">163      <span>70°</span>164      <svg class="icon" viewBox="0 0 24 24">165        <path d="M12 2l4 4-4 4-4-4 4-4zm0 10l7 7H5l7-7z"/>166      </svg>167      <svg class="icon" viewBox="0 0 24 24">168        <path d="M20 7V5a2 2 0 0 0-2-2h-1V1h-2v2H9V1H7v2H6a2 2 0 0 0-2 2v2h16zM4 9h16v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9z"/>169      </svg>170      <svg class="icon" viewBox="0 0 24 24"><path d="M18 8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-2 14H8a6 6 0 0 1-6-6v-1h20v1a6 6 0 0 1-6 6z"/></svg>171      <svg class="icon" viewBox="0 0 24 24"><path d="M18 8H6v8h12V8zm-3 11H9v2h6v-2z"/></svg>172    </div>173  </div>174 175  <!-- App Bar -->176  <div class="app-bar">177    <svg class="icon" viewBox="0 0 24 24">178      <path d="M15 6l-6 6 6 6" stroke="#cfd8dc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>179    </svg>180    <div class="title">Edit task</div>181    <div class="action-icons">182      <svg class="icon" viewBox="0 0 24 24">183        <path d="M9 12l2 2 4-4" stroke="#cfd8dc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>184      </svg>185      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>186    </div>187  </div>188 189  <!-- Task Section -->190  <div class="section-label">TASK:</div>191  <div class="card">192    <div class="input-text">Buy New Balance hiking shoes</div>193    <svg class="mic" viewBox="0 0 24 24">194      <path d="M12 3a3 3 0 0 1 3 3v4a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm6 7a6 6 0 0 1-12 0H4a8 8 0 0 0 7 7v3h2v-3a8 8 0 0 0 7-7h-2z"/>195    </svg>196  </div>197 198  <!-- Time Picker Modal -->199  <div class="modal">200    <div class="readout-row">201      <div class="time-readout">1:00</div>202      <div class="ampm">AM</div>203      <div class="ampm" style="color:#b7c5d8;">PM</div>204    </div>205 206    <div class="clock">207      <div class="hour h12">12</div>208      <div class="hour h1">1</div>209      <div class="hour h2">2</div>210      <div class="hour h3">3</div>211      <div class="hour h4">4</div>212      <div class="hour h5">5</div>213      <div class="hour h6">6</div>214      <div class="hour h7">7</div>215      <div class="hour h8">8</div>216      <div class="hour h9">9</div>217      <div class="hour h10">10</div>218      <div class="hour h11">11</div>219 220      <div class="hand"></div>221      <div class="clock-center"></div>222    </div>223 224    <div class="modal-actions">225      <div class="left-tools">226        <div class="pill">No time <span class="toggle"></span></div>227        <div class="tool-btn active">228          <svg class="tool-icon" viewBox="0 0 24 24">229            <path d="M12 6a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm0-3l3-2 1 2-2 1H10L8 3l1-2 3 2zm1 7H8v2h5v-2z"/>230          </svg>231          Alarm232        </div>233        <div class="tool-btn">234          <svg class="tool-icon" viewBox="0 0 24 24">235            <path d="M7 2v2H6a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1V2h-2v2H9V2H7zm0 6h10v11H7V8zm2 3h6v5H9v-5z"/>236          </svg>237          Date238        </div>239      </div>240      <div class="action-btns">241        <div class="btn btn-cancel">Cancel</div>242        <div class="btn btn-ok">OK</div>243      </div>244    </div>245  </div>246 247  <!-- Bottom Save Button -->248  <div class="save-btn">249    <svg class="save-icon" viewBox="0 0 24 24">250      <path d="M9 12l2 2 4-4" stroke="#eaf0f6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>251    </svg>252    <span>Save</span>253  </div>254 255  <!-- Floating action button -->256  <div class="fab">257    <svg viewBox="0 0 24 24">258      <path d="M7 3l2-2 3 3 3-3 2 2-3 3h-4L7 3zm5 4a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm1 3h-2v3H8v2h3v3h2v-3h3v-2h-3V10z"/>259    </svg>260  </div>261 262</div>263</body>264</html>