GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Alarm Time Picker (Mock)</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #E0E0E0;12  }13  /* Status bar */14  .status-bar {15    height: 110px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between;16    color: #F5F5F5; font-weight: 500; font-size: 44px;17  }18  .sb-left { display: flex; align-items: center; gap: 18px; }19  .sb-right { display: flex; align-items: center; gap: 26px; }20  .sb-icon svg { fill: #E0E0E0; stroke: #E0E0E0; }21  /* App bar */22  .app-bar {23    height: 120px; display: flex; align-items: center; justify-content: space-between;24    padding: 0 30px; color: #E0E0E0;25  }26  .app-title { font-size: 50px; font-weight: 500; margin-left: 12px; }27  .app-left { display: flex; align-items: center; gap: 14px; }28  .app-right { display: flex; align-items: center; }29  /* Content */30  .content { padding: 40px 30px; }31  .time-row {32    display: flex; align-items: center; justify-content: space-between;33    padding: 40px 6px 20px;34  }35  .time-left { display: flex; align-items: baseline; gap: 18px; }36  .time-text { font-size: 160px; color: #BDBDBD; font-weight: 300; letter-spacing: 2px; }37  .ampm { font-size: 56px; color: #8C8C8C; margin-top: 30px; }38  .toggle {39    width: 140px; height: 72px; border-radius: 36px; background: #2A2A2A; position: relative;40  }41  .toggle::after {42    content: ""; position: absolute; top: 8px; left: 8px; width: 56px; height: 56px; border-radius: 50%;43    background: #4A4A4A;44  }45  .list {46    margin-top: 30px; border-top: 1px solid #1E1E1E;47  }48  .row {49    padding: 30px 0; border-bottom: 1px solid #1E1E1E;50  }51  .row-title { color: #C39A38; font-size: 46px; margin-bottom: 10px; }52  .row-sub { color: #8A8A8A; font-size: 40px; }53  .row-inline { display: flex; align-items: center; justify-content: space-between; }54  .checkbox {55    width: 42px; height: 42px; border: 2px solid #666; border-radius: 6px; margin-right: 12px;56  }57  /* Bottom action bar */58  .bottom-actions {59    position: absolute; bottom: 140px; left: 30px; right: 30px;60    display: flex; justify-content: space-between; color: #C39A38; font-size: 48px;61    border-top: 1px solid #1E1E1E; padding-top: 24px;62  }63  .ok-dim { color: #6E6E6E; }64  /* Scrim + Dialog */65  .scrim {66    position: absolute; inset: 0; background: rgba(0,0,0,0.35);67  }68  .dialog {69    position: absolute; top: 580px; left: 110px; width: 860px; height: 1040px;70    background: #1E1E1E; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);71    display: flex; flex-direction: column; overflow: hidden;72  }73  .dialog-header {74    height: 130px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px;75  }76  .segments {77    color: #D3D3D3; font-size: 46px; letter-spacing: 10px;78  }79  .close-btn {80    width: 60px; height: 60px; background: #3A3A3A; border-radius: 8px; display: flex; align-items: center; justify-content: center;81  }82  .close-btn svg { stroke: #D0D0D0; }83  .keypad {84    flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr);85    padding: 10px 40px 0;86    gap: 10px 10px;87  }88  .key {89    display: flex; align-items: center; justify-content: center; color: #ECECEC; font-size: 120px; font-weight: 300;90  }91  .key.dim { color: #757575; font-size: 68px; }92  .dialog-actions {93    height: 120px; border-top: 1px solid #2A2A2A; display: flex; align-items: center; justify-content: space-between;94    padding: 0 40px; font-size: 46px;95  }96  .accent { color: #C39A38; }97  .muted { color: #707070; }98  /* Home indicator */99  .home-indicator {100    position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);101    width: 240px; height: 12px; background: #F0F0F0; opacity: 0.8; border-radius: 8px;102  }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status bar -->109  <div class="status-bar">110    <div class="sb-left">111      <div>12:40</div>112      <!-- Location/weather placeholder to mimic small text cluster -->113      <div style="font-size:34px; color:#CFCFCF;">66°</div>114    </div>115    <div class="sb-right">116      <!-- Do-not-disturb icon -->117      <div class="sb-icon">118        <svg width="42" height="42" viewBox="0 0 42 42">119          <circle cx="21" cy="21" r="18" fill="none" stroke="#E0E0E0" stroke-width="4"/>120          <rect x="10" y="18" width="22" height="6" fill="#E0E0E0"/>121        </svg>122      </div>123      <!-- Wifi icon -->124      <div class="sb-icon">125        <svg width="44" height="44" viewBox="0 0 44 44">126          <path d="M6 16c8-6 24-6 32 0" stroke="#E0E0E0" stroke-width="3" fill="none"/>127          <path d="M11 22c6-4 16-4 22 0" stroke="#E0E0E0" stroke-width="3" fill="none"/>128          <circle cx="22" cy="29" r="3" fill="#E0E0E0"/>129        </svg>130      </div>131      <!-- Battery icon -->132      <div class="sb-icon">133        <svg width="56" height="42" viewBox="0 0 56 42">134          <rect x="2" y="10" width="46" height="22" rx="4" ry="4" fill="none" stroke="#E0E0E0" stroke-width="3"/>135          <rect x="6" y="14" width="32" height="14" fill="#E0E0E0"/>136          <rect x="50" y="16" width="4" height="10" fill="#E0E0E0"/>137        </svg>138      </div>139    </div>140  </div>141 142  <!-- App bar -->143  <div class="app-bar">144    <div class="app-left">145      <svg width="64" height="64" viewBox="0 0 64 64">146        <path d="M36 14 L18 32 L36 50" stroke="#E0E0E0" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>147      </svg>148      <div class="app-title">Alarms</div>149    </div>150    <div class="app-right">151      <!-- Overflow vertical dots -->152      <svg width="48" height="48" viewBox="0 0 48 48" fill="#BDBDBD">153        <circle cx="24" cy="10" r="4"/><circle cx="24" cy="24" r="4"/><circle cx="24" cy="38" r="4"/>154      </svg>155    </div>156  </div>157 158  <!-- Content -->159  <div class="content">160    <div class="time-row">161      <div class="time-left">162        <div class="time-text">12:40</div>163        <div class="ampm">PM</div>164      </div>165      <div class="toggle"></div>166    </div>167 168    <div class="list">169      <div class="row">170        <div class="row-title">Repeat</div>171        <div class="row-sub">Never</div>172      </div>173      <div class="row">174        <div class="row-title">Ringtone</div>175        <div class="row-sub">Default</div>176      </div>177      <div class="row row-inline">178        <div>179          <div class="row-title">Gentle</div>180          <div class="row-sub">Soft start</div>181        </div>182        <div class="checkbox"></div>183      </div>184      <div class="row">185        <div class="row-title">Label</div>186        <div class="row-sub">Alarm</div>187      </div>188    </div>189  </div>190 191  <!-- Scrim and Dialog -->192  <div class="scrim"></div>193  <div class="dialog">194    <div class="dialog-header">195      <div class="segments">-- : --</div>196      <div class="close-btn">197        <svg width="34" height="34" viewBox="0 0 34 34">198          <path d="M8 8 L26 26 M26 8 L8 26" stroke-width="3" stroke-linecap="round" fill="none"/>199        </svg>200      </div>201    </div>202 203    <div class="keypad">204      <div class="key">1</div>205      <div class="key">2</div>206      <div class="key">3</div>207 208      <div class="key">4</div>209      <div class="key">5</div>210      <div class="key">6</div>211 212      <div class="key">7</div>213      <div class="key">8</div>214      <div class="key">9</div>215 216      <div class="key dim">AM</div>217      <div class="key">0</div>218      <div class="key dim">PM</div>219    </div>220 221    <div class="dialog-actions">222      <div class="accent">CANCEL</div>223      <div class="muted">OK</div>224    </div>225  </div>226 227  <!-- Bottom action bar (page level) -->228  <div class="bottom-actions">229    <div class="accent">CANCEL</div>230    <div class="ok-dim">OK</div>231  </div>232 233  <div class="home-indicator"></div>234</div>235</body>236</html>