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>Settings - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1412;15    color: #E7ECE8;16  }17  .status-bar {18    position: absolute;19    top: 18px;20    left: 36px;21    right: 36px;22    height: 72px;23    color: #E7ECE8;24    font-size: 34px;25    opacity: 0.95;26    display: flex;27    align-items: center;28    justify-content: space-between;29  }30  .status-right { display: flex; align-items: center; gap: 22px; }31  .sb-dot { width: 10px; height: 10px; background: #E7ECE8; border-radius: 50%; opacity: .8; }32  .sb-icon {33    width: 28px; height: 28px; border: 2px solid #E7ECE8; border-radius: 4px; opacity: .85;34  }35  .battery {36    width: 40px; height: 22px; border: 3px solid #E7ECE8; border-radius: 4px; position: relative;37  }38  .battery::after { content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #E7ECE8; border-radius: 1px; }39  .battery .charge { position: absolute; left: 3px; top: 3px; bottom: 3px; right: 8px; background: #E7ECE8; }40 41  .top-actions {42    position: absolute;43    top: 120px;44    left: 36px;45    right: 36px;46    height: 72px;47    display: flex;48    align-items: center;49    justify-content: space-between;50    color: #E7ECE8;51  }52  .back {53    width: 48px; height: 48px;54  }55  .more {56    position: relative; width: 48px; height: 48px;57  }58  .more .dot { position: absolute; right: 20px; width: 8px; height: 8px; background: #E7ECE8; border-radius: 50%; }59  .more .d1 { top: 8px; } .more .d2 { top: 20px; } .more .d3 { top: 32px; }60 61  .content {62    position: absolute;63    left: 72px;64    right: 72px;65    top: 210px;66  }67  .title {68    font-size: 110px;69    font-weight: 600;70    letter-spacing: -1px;71    margin: 40px 0 30px;72  }73 74  .section-label {75    color: #8BD39A;76    font-size: 38px;77    margin-top: 30px;78    margin-bottom: 24px;79  }80 81  .row,82  .row-with-toggle {83    padding: 36px 0;84    border-bottom: 1px solid rgba(255,255,255,0.06);85  }86  .row:last-child { border-bottom: none; }87  .row .label,88  .row-with-toggle .label {89    font-size: 54px;90    line-height: 1.1;91    margin-bottom: 10px;92  }93  .subtext {94    color: #B1B7B3;95    font-size: 34px;96  }97 98  .row-with-toggle {99    display: flex;100    align-items: center;101    justify-content: space-between;102    gap: 24px;103  }104 105  /* Toggle */106  .switch {107    width: 176px;108    height: 92px;109    background: #26312B;110    border-radius: 46px;111    position: relative;112    transition: background .2s ease;113  }114  .switch .knob {115    width: 70px;116    height: 70px;117    position: absolute;118    top: 11px;119    left: 11px;120    border-radius: 50%;121    background: #C8D7C5;122    transition: left .2s ease, background .2s ease;123    box-shadow: 0 2px 6px rgba(0,0,0,.4);124  }125  .switch.on { background: #285E39; }126  .switch.on .knob { left: 95px; background: #BFE7B9; }127 128  .divider {129    height: 2px;130    background: rgba(255,255,255,0.08);131    margin: 26px 0 26px;132  }133 134  /* Alarm volume area */135  .volume-area {136    margin-top: 40px;137    padding-bottom: 40px;138  }139  .volume-header {140    display: flex;141    align-items: center;142    gap: 18px;143    margin-bottom: 26px;144  }145  .alarm-ico {146    width: 44px; height: 44px; position: relative; margin-right: 8px;147  }148  .alarm-ico svg { width: 44px; height: 44px; }149  .volume-title { font-size: 48px; }150 151  .slider {152    position: relative;153    height: 18px;154    background: #3A433F;155    border-radius: 9px;156    overflow: hidden;157    margin: 0 24px 0 0;158  }159  .slider .track {160    position: absolute; left: 0; top: 0; bottom: 0; width: 100%;161    background: #E9ECEB;162    opacity: 0.85;163  }164  .slider .progress {165    position: absolute; left: 0; top: 0; bottom: 0; width: 82%;166    background: #8BD39A;167  }168  .slider .thumb {169    position: absolute; top: 50%; left: 82%;170    transform: translate(-50%, -50%);171    width: 40px; height: 40px; background: #8BD39A; border-radius: 50%;172    box-shadow: 0 2px 8px rgba(0,0,0,.35);173  }174 175  /* Bottom gesture pill */176  .gesture-pill {177    position: absolute;178    bottom: 30px;179    left: 50%;180    transform: translateX(-50%);181    width: 420px;182    height: 14px;183    background: #EDEDED;184    border-radius: 8px;185    opacity: 0.9;186  }187</style>188</head>189<body>190<div id="render-target">191  <!-- Status bar -->192  <div class="status-bar">193    <div class="sb-time">3:02</div>194    <div class="status-right">195      <div class="sb-icon"></div>196      <div class="sb-icon"></div>197      <div class="sb-dot"></div>198      <div class="sb-dot"></div>199      <div class="battery"><div class="charge"></div></div>200    </div>201  </div>202 203  <!-- Top actions -->204  <div class="top-actions">205    <svg class="back" viewBox="0 0 24 24" fill="none" stroke="#E7ECE8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">206      <polyline points="15 4 7 12 15 20"></polyline>207    </svg>208    <div class="more">209      <div class="dot d1"></div>210      <div class="dot d2"></div>211      <div class="dot d3"></div>212    </div>213  </div>214 215  <div class="content">216    <div class="title">Settings</div>217 218    <div class="section-label">Clock</div>219 220    <div class="row">221      <div class="label">Style</div>222      <div class="subtext">Digital</div>223    </div>224 225    <div class="row-with-toggle">226      <div>227        <div class="label">Display time with seconds</div>228      </div>229      <div class="switch">230        <div class="knob"></div>231      </div>232    </div>233 234    <div class="row-with-toggle">235      <div>236        <div class="label">Automatic home clock</div>237        <div class="subtext">While traveling in an area where the time is different, add a clock for home</div>238      </div>239      <div class="switch on">240        <div class="knob"></div>241      </div>242    </div>243 244    <div class="row">245      <div class="label">Home time zone</div>246      <div class="subtext">(GMT+9:00) Tokyo, Osaka</div>247    </div>248 249    <div class="row" style="border-bottom:none;">250      <div class="label">Change date &amp; time</div>251    </div>252 253    <div class="divider"></div>254 255    <div class="section-label" style="margin-top: 18px;">Alarms</div>256 257    <div class="row">258      <div class="label">Silence after</div>259      <div class="subtext">10 minutes</div>260    </div>261 262    <div class="row" style="border-bottom:none;">263      <div class="label">Snooze length</div>264      <div class="subtext">10 minutes</div>265    </div>266 267    <div class="volume-area">268      <div class="