GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Date & time Settings Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F5F5F5;15    font-family: Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    padding: 0 40px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #4a4a4a;32    font-size: 40px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .status-icons svg { width: 42px; height: 42px; }40 41  /* Toolbar back */42  .toolbar {43    position: absolute;44    top: 140px;45    left: 36px;46    height: 80px;47    display: flex;48    align-items: center;49    gap: 24px;50    color: #212121;51  }52  .toolbar svg { width: 64px; height: 64px; }53 54  /* Title */55  .title {56    position: absolute;57    top: 240px;58    left: 60px;59    font-size: 96px;60    font-weight: 700;61    letter-spacing: -0.5px;62  }63 64  /* Content list */65  .content {66    position: absolute;67    top: 420px;68    left: 0;69    width: 100%;70    box-sizing: border-box;71    padding: 0 60px;72  }73  .row {74    display: flex;75    align-items: center;76    justify-content: space-between;77    padding: 40px 0;78    font-size: 52px;79  }80  .label { font-size: 52px; }81  .sub {82    font-size: 40px;83    color: #7a7a7a;84    margin-top: 14px;85  }86 87  .section-title {88    font-size: 42px;89    color: #5D6E77;90    font-weight: 600;91    margin-top: 60px;92    margin-bottom: 10px;93  }94 95  /* Switch */96  .switch {97    position: relative;98    width: 160px;99    height: 84px;100    border-radius: 42px;101    background: #777;102    transition: all 0.2s ease;103  }104  .switch .knob {105    position: absolute;106    top: 10px;107    left: 10px;108    width: 64px;109    height: 64px;110    border-radius: 50%;111    background: #BDBDBD;112    transition: all 0.2s ease;113  }114  .switch.on { background: #546E7A; }115  .switch.on .knob {116    left: 86px;117    background: #DCE7EE;118  }119  .switch.disabled {120    opacity: 0.4;121  }122 123  .disabled-text { color: #C9C9C9; }124 125  /* Gesture pill */126  .gesture {127    position: absolute;128    bottom: 28px;129    left: 50%;130    transform: translateX(-50%);131    width: 360px;132    height: 16px;133    border-radius: 12px;134    background: #707070;135    opacity: 0.8;136  }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status bar -->143  <div class="status-bar">144    <div>1:18</div>145    <div class="status-icons">146      <!-- Wi-Fi icon -->147      <svg viewBox="0 0 24 24">148        <path d="M12 20l2-2-2-2-2 2 2 2zm-7-9c4-3 10-3 14 0l-2 2c-3-2-7-2-10 0l-2-2zm3 4c3-2 7-2 10 0l-2 2c-2-1-4-1-6 0l-2-2z" fill="#4a4a4a"/>149      </svg>150      <!-- Battery icon -->151      <svg viewBox="0 0 24 24">152        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#4a4a4a"></rect>153        <rect x="20" y="10" width="2" height="4" fill="#4a4a4a"></rect>154        <rect x="4" y="8" width="12" height="8" fill="#F5F5F5"></rect>155      </svg>156    </div>157  </div>158 159  <!-- Toolbar with back arrow -->160  <div class="toolbar">161    <svg viewBox="0 0 24 24">162      <path d="M15 6L9 12l6 6" stroke="#212121" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>163    </svg>164  </div>165 166  <!-- Title -->167  <div class="title">Date & time</div>168 169  <!-- Content -->170  <div class="content">171 172    <div class="row">173      <div class="label">Set time automatically</div>174      <div class="switch"><div class="knob"></div></div>175    </div>176 177    <div class="row" style="flex-direction: column; align-items: flex-start;">178      <div class="label">Date</div>179      <div class="sub">June 14, 2023</div>180    </div>181 182    <div class="row" style="flex-direction: column; align-items: flex-start;">183      <div class="label">Time</div>184      <div class="sub">1:18 PM</div>185    </div>186 187    <div class="section-title">Time zone</div>188 189    <div class="row">190      <div class="label">Set time zone automatically</div>191      <div class="switch on"><div class="knob"></div></div>192    </div>193 194    <div class="row">195      <div class="label">Use location to set time zone</div>196      <div class="switch"><div class="knob"></div></div>197    </div>198 199    <div class="row" style="flex-direction: column; align-items: flex-start; opacity: 0.6;">200      <div class="label disabled-text">Time zone</div>201      <div class="sub disabled-text">GMT+05:30 India Standard Time</div>202    </div>203 204    <div class="section-title">Time format</div>205 206    <div class="row">207      <div class="label">Use locale default</div>208      <div class="switch on"><div class="knob"></div></div>209    </div>210 211    <div class="row" style="align-items: flex-start;">212      <div>213        <div class="label disabled-text">Use 24-hour format</div>214        <div class="sub disabled-text">1:00 PM</div>215      </div>216      <div class="switch disabled"><div class="knob"></div></div>217    </div>218 219  </div>220 221  <div class="gesture"></div>222</div>223</body>224</html>