GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Date & time - Mock UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #EAEAEA;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0; left: 0; right: 0;20    height: 110px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    box-sizing: border-box;26  }27  .status-time { font-size: 44px; letter-spacing: 1px; }28  .status-icons { display: flex; align-items: center; gap: 18px; }29  .icon-dot {30    width: 26px; height: 26px; border-radius: 6px;31    background: #E0E0E0; opacity: 0.85;32  }33  .icon-signal, .icon-battery {34    width: 40px; height: 24px; border: 2px solid #E0E0E0; border-radius: 4px; opacity: 0.9;35  }36 37  /* Top app area */38  .back-btn {39    position: absolute;40    top: 120px;41    left: 32px;42    width: 96px; height: 96px;43    display: flex; align-items: center; justify-content: center;44  }45  .back-btn svg { width: 56px; height: 56px; fill: #EAEAEA; }46 47  .title {48    position: absolute;49    top: 220px;50    left: 48px;51    right: 48px;52    font-size: 96px;53    font-weight: 700;54    line-height: 1.1;55    color: #EDEDED;56  }57 58  /* Content area */59  .content {60    position: absolute;61    top: 400px;62    left: 36px;63    right: 36px;64    padding-bottom: 120px;65  }66 67  .row {68    display: flex;69    align-items: center;70    justify-content: space-between;71    padding: 36px 12px;72    box-sizing: border-box;73  }74  .row .label {75    font-size: 46px;76    color: #EAEAEA;77  }78  .row .subtext {79    font-size: 32px;80    color: #9AA0A6;81    margin-top: 10px;82  }83 84  .subrow {85    padding: 18px 12px;86  }87  .subrow .small-label {88    color: #9AA0A6;89    font-size: 34px;90  }91  .subrow .value {92    color: #DDDDDD;93    font-size: 42px;94    margin-top: 8px;95  }96  .dim { opacity: 0.45; }97 98  .section-title {99    color: #9EB7FF;100    font-size: 34px;101    margin: 58px 12px 6px 12px;102    letter-spacing: 0.5px;103  }104 105  /* Toggles */106  .toggle {107    width: 180px; height: 96px;108    border-radius: 60px;109    padding: 8px;110    box-sizing: border-box;111    display: flex; align-items: center;112    background: #7B7F89;113  }114  .toggle .knob {115    width: 80px; height: 80px; border-radius: 50%;116    background: #DADFE6;117    box-shadow: 0 0 0 6px rgba(255,255,255,0.24) inset;118  }119  .toggle.on { justify-content: flex-end; background: #8C90A0; }120  .toggle.off { justify-content: flex-start; background: #5B6067; }121  .toggle.disabled { opacity: 0.35; }122 123  .caption {124    color: #8D8D8D;125    font-size: 32px;126    margin: 8px 12px 0 12px;127  }128 129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status bar -->135  <div class="status-bar">136    <div class="status-time">12:19</div>137    <div class="status-icons">138      <div class="icon-dot"></div>139      <div class="icon-dot"></div>140      <div class="icon-dot"></div>141      <div class="icon-signal"></div>142      <div class="icon-battery"></div>143    </div>144  </div>145 146  <!-- Back button -->147  <div class="back-btn" aria-label="Back">148    <svg viewBox="0 0 24 24"><path d="M15.5 3.5 7 12l8.5 8.5-2.1 2.1L2.8 12l10.6-10.6 2.1 2.1z"/></svg>149  </div>150 151  <!-- Title -->152  <div class="title">Date & time</div>153 154  <!-- Content -->155  <div class="content">156 157    <!-- Set time automatically -->158    <div class="row">159      <div class="label">Set time automatically</div>160      <div class="toggle on">161        <div class="knob"></div>162      </div>163    </div>164 165    <!-- Date & Time (disabled while automatic) -->166    <div class="subrow dim">167      <div class="small-label">Date</div>168      <div class="value">June 14, 2023</div>169    </div>170    <div class="subrow dim">171      <div class="small-label">Time</div>172      <div class="value">12:19 PM</div>173    </div>174 175    <!-- Time zone section -->176    <div class="section-title">Time zone</div>177 178    <div class="row">179      <div class="label">Set time zone automatically</div>180      <div class="toggle on">181        <div class="knob"></div>182      </div>183    </div>184 185    <div class="row" style="align-items:flex-start;">186      <div>187        <div class="label">Use location to set time zone</div>188        <div class="subtext">Location is off</div>189      </div>190      <div class="toggle on" style="margin-top:8px;">191        <div class="knob"></div>192      </div>193    </div>194 195    <div class="subrow dim">196      <div class="small-label">Time zone</div>197      <div class="value">GMT+05:30 India Standard Time</div>198    </div>199 200    <!-- Time format section -->201    <div class="section-title">Time format</div>202 203    <div class="row">204      <div class="label">Use locale default</div>205      <div class="toggle on">206        <div class="knob"></div>207      </div>208    </div>209 210    <div class="row dim">211      <div class="label">Use 24-hour format</div>212      <div class="toggle off disabled">213        <div class="knob"></div>214      </div>215    </div>216    <div class="caption dim">1:00 PM</div>217 218  </div>219 220</div>221</body>222</html>