GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Alarm Edit - Numeric Time Picker</title>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: #121212; color: #E0E0E0;12    border-radius: 0; box-shadow: none;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 110px; background: #111; color: #fff;19    padding: 0 32px; display: flex; align-items: center; justify-content: space-between;20    font-size: 42px; letter-spacing: 0.5px;21  }22  .status-left { display: flex; align-items: center; gap: 20px; }23  .status-right { display: flex; align-items: center; gap: 24px; }24  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }25  .icon-wifi, .icon-battery {26    width: 46px; height: 46px; display: inline-block;27  }28  .icon-battery { border: 4px solid #fff; border-radius: 6px; position: relative; }29  .icon-battery::after {30    content: ""; position: absolute; right: -10px; top: 10px; width: 10px; height: 18px; background: #fff; border-radius: 3px;31  }32  .icon-wifi {33    border: 4px solid transparent; border-top-color: #fff; border-left-color: #fff; transform: rotate(45deg);34  }35 36  /* App bar */37  .app-bar {38    position: absolute; top: 110px; left: 0; right: 0;39    height: 120px; background: #1A1A1A; display: flex; align-items: center;40    padding: 0 32px; color: #EDEDED;41    border-bottom: 1px solid #1f1f1f;42  }43  .app-bar .title { font-size: 54px; margin-left: 24px; }44  .app-bar .menu { margin-left: auto; display: flex; gap: 10px; padding-right: 8px; }45  .ellipsis-dot { width: 12px; height: 12px; background: #9E9E9E; border-radius: 50%; display: block; margin: 6px 0; }46 47  .back-icon { width: 60px; height: 60px; }48  .back-icon svg { width: 100%; height: 100%; }49 50  /* Content area */51  .content {52    position: absolute; top: 230px; left: 0; right: 0; bottom: 0;53    padding: 40px 32px;54  }55  .time-row {56    display: flex; align-items: center; justify-content: space-between;57    padding: 40px 0 20px; border-bottom: 1px solid #252525;58  }59  .time-big { font-size: 160px; color: #bdbdbd; font-weight: 300; }60  .time-big .suffix { font-size: 70px; vertical-align: top; margin-left: 18px; color: #9E9E9E; }61  .toggle {62    width: 120px; height: 60px; border-radius: 34px; background: #3a3a3a; position: relative; margin-left: 12px;63  }64  .toggle::after {65    content: ""; position: absolute; left: 6px; top: 6px;66    width: 48px; height: 48px; background: #6b6b6b; border-radius: 50%;67  }68  .check {69    margin-left: 24px; width: 48px; height: 48px;70  }71  .check svg { width: 100%; height: 100%; opacity: 0.35; }72 73  .list {74    margin-top: 24px;75  }76  .list-item {77    padding: 40px 0; border-bottom: 1px solid #252525;78    display: flex; align-items: center; justify-content: space-between;79  }80  .label {81    color: #C29A3A; font-size: 58px; font-weight: 500;82  }83  .sub {84    color: #9E9E9E; font-size: 46px; margin-top: 8px;85  }86  .right-small {87    color: #9E9E9E; font-size: 46px;88  }89  .checkbox {90    width: 44px; height: 44px; border: 3px solid #707070; border-radius: 6px;91  }92 93  /* Bottom action placeholders (behind dialog) */94  .bottom-actions {95    position: absolute; bottom: 130px; left: 32px; right: 32px;96    display: flex; justify-content: space-between; color: #C29A3A;97    font-size: 54px;98  }99 100  /* Modal overlay */101  .scrim {102    position: absolute; top: 0; left: 0; right: 0; bottom: 0;103    background: rgba(0,0,0,0.35);104  }105  .dialog {106    position: absolute; left: 90px; top: 820px;107    width: 900px; height: 1060px;108    background: #212121; border-radius: 18px;109    box-shadow: 0 30px 60px rgba(0,0,0,0.6);110    color: #fff;111  }112  .dialog-header {113    display: flex; align-items: center; justify-content: space-between;114    padding: 40px 44px 14px;115  }116  .dialog-time {117    font-size: 120px; font-weight: 300; letter-spacing: 1px;118  }119  .dialog-time .pm { font-size: 52px; margin-left: 12px; color: #BDBDBD; }120  .close-chip {121    display: inline-flex; align-items: center; justify-content: center;122    width: 72px; height: 52px; background: #E0E0E0; color: #222;123    border-radius: 8px; font-weight: 700; font-size: 40px;124  }125 126  .keypad {127    padding: 10px 80px 0; display: grid; grid-template-columns: repeat(3, 1fr);128    grid-row-gap: 34px; grid-column-gap: 34px;129  }130  .num {131    display: flex; align-items: center; justify-content: center;132    height: 160px; font-size: 136px; color: #9E9E9E; font-weight: 300;133  }134  .num.small { font-size: 70px; color: #8A8A8A; }135 136  .dialog-actions {137    position: absolute; bottom: 36px; left: 40px; right: 40px;138    display: flex; justify-content: space-between; font-size: 56px; color: #C29A3A; font-weight: 600;139  }140 141  /* Gesture pill */142  .gesture-pill {143    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);144    width: 240px; height: 12px; background: #E0E0E0; border-radius: 10px; opacity: 0.9;145  }146</style>147</head>148<body>149<div id="render-target">150 151  <!-- Status bar -->152  <div class="status-bar">153    <div class="status-left">154      <div>12:41</div>155      <div>66°</div>156      <div class="dot"></div>157      <div class="icon-wifi"></div>158    </div>159    <div class="status-right">160      <div class="dot"></div>161      <div class="icon-battery"></div>162    </div>163  </div>164 165  <!-- App bar -->166  <div class="app-bar">167    <div class="back-icon">168      <svg viewBox="0 0 24 24">169        <path d="M15 6 L9 12 L15 18" stroke="#E0E0E0" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>170      </svg>171    </div>172    <div class="title">Alarms</div>173    <div class="menu">174      <span class="ellipsis-dot"></span>175      <span class="ellipsis-dot"></span>176      <span class="ellipsis-dot"></span>177    </div>178  </div>179 180  <!-- Content -->181  <div class="content">182    <div class="time-row">183      <div class="time-big">12:40<span class="suffix">PM</span></div>184      <div style="display:flex; align-items:center; gap:20px;">185        <div class="toggle"></div>186        <div class="check">187          <svg viewBox="0 0 24 24">188            <path d="M5 12 L10 17 L19 8" stroke="#E0E0E0" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>189          </svg>190        </div>191      </div>192    </div>193 194    <div class="list">195      <div class="list-item">196        <div>197          <div class="label">Repeat</div>198          <div class="sub">Never</div>199        </div>200      </div>201 202      <div class="list-item">203        <div>204          <div class="label">Ringtone</div>205          <div class="sub">Default</div>206        </div>207        <div class="right-small">•••</div>208      </div>209 210      <div class="list-item">211        <div class="label">Gentle</div>212        <div class="checkbox"></div>213      </div>214 215      <div class="list-item">216        <div class="label">Label</div>217      </div>218    </div>219  </div>220 221  <!-- Behind-dialog bottom actions -->222  <div class="bottom-actions">223    <div>Cancel</div>224    <div>OK</div>225  </div>226 227  <!-- Modal overlay and dialog -->228  <div class="scrim"></div>229  <div class="dialog">230    <div class="dialog-header">231      <div class="dialog-time">-5:30<span class="pm">PM</span></div>232      <div class="close-chip">×</div>233    </div>234 235    <div class="keypad">236      <div class="num">1</div>237      <div class="num">2</div>238      <div class="num">3</div>239 240      <div class="num">4</div>241      <div class="num">5</div>242      <div class="num">6</div>243 244      <div class="num">7</div>245      <div class="num">8</div>246      <div class="num">9</div>247 248      <div class="num small">AM</div>249      <div class="num">0</div>250      <div class="num small">PM</div>251    </div>252 253    <div class="dialog-actions">254      <div>CANCEL</div>255      <div>OK</div>256    </div>257  </div>258 259  <!-- Gesture pill -->260  <div class="gesture-pill"></div>261</div>262</body>263</html>