GD-ML/AndroidCode
13.4k
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>Date & time Settings Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F4F5F6;15 color: #1c1c1c;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 24px;22 left: 40px;23 right: 40px;24 height: 60px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #3b3b3b;29 font-size: 34px;30 letter-spacing: 0.5px;31 }32 .status-icons {33 display: flex;34 gap: 24px;35 align-items: center;36 }37 .status-icons svg { width: 40px; height: 40px; fill: #616161; }38 39 /* Header / Title */40 .back-btn {41 position: absolute;42 top: 190px;43 left: 40px;44 width: 72px;45 height: 72px;46 }47 .back-btn svg { width: 72px; height: 72px; stroke: #2c2c2c; stroke-width: 6; fill: none; }48 .title {49 position: absolute;50 top: 280px;51 left: 40px;52 font-size: 88px;53 font-weight: 500;54 color: #202124;55 }56 57 /* Content list */58 .content {59 position: absolute;60 top: 500px;61 left: 40px;62 right: 40px;63 }64 .row {65 display: flex;66 align-items: center;67 justify-content: space-between;68 padding: 42px 0;69 border-bottom: 1px solid transparent;70 }71 .row .label {72 font-size: 44px;73 color: #202124;74 }75 76 /* Sub rows (disabled-looking) */77 .sub {78 display: block;79 margin-top: 14px;80 font-size: 34px;81 color: #9E9E9E;82 }83 .muted-title {84 font-size: 44px;85 color: #B0B0B0;86 }87 88 /* Section headers */89 .section-header {90 font-size: 36px;91 color: #5E6E76;92 font-weight: 600;93 margin: 54px 0 10px 0;94 }95 96 /* Switch styles */97 .switch {98 width: 150px;99 height: 76px;100 border-radius: 38px;101 position: relative;102 background: #5b6871;103 }104 .switch .knob {105 position: absolute;106 top: 6px;107 width: 64px;108 height: 64px;109 border-radius: 50%;110 background: #dfe7ec;111 box-shadow: 0 1px 2px rgba(0,0,0,0.25);112 left: 8px;113 transition: left 0.2s;114 }115 .switch.on .knob { left: 78px; }116 .switch.off { background: #787878; }117 .switch.off .knob { background: #bfbfbf; left: 8px; }118 .switch.disabled { background: #E0E0E0; opacity: 0.6; }119 .switch.disabled .knob { background: #F0F0F0; }120 121 /* Gesture bar at bottom */122 .gesture-bar {123 position: absolute;124 bottom: 42px;125 left: 50%;126 transform: translateX(-50%);127 width: 300px;128 height: 14px;129 background: #8E8E8E;130 border-radius: 7px;131 opacity: 0.8;132 }133</style>134</head>135<body>136<div id="render-target">137 138 <!-- Status Bar -->139 <div class="status-bar">140 <div>1:19</div>141 <div class="status-icons">142 <!-- Wi-Fi icon -->143 <svg viewBox="0 0 24 24">144 <path d="M12 18.5l2.2-2.2a3.1 3.1 0 0 0-4.4 0L12 18.5zm-5.5-5.5a8 8 0 0 1 11 0l1.5-1.5a10.5 10.5 0 0 0-14 0l1.5 1.5zm-3.2-3.2a13 13 0 0 1 20.4 0l1.3-1.3A15 15 0 0 0 .9 8.5l1.4 1.3z"/>145 </svg>146 <!-- Battery icon -->147 <svg viewBox="0 0 24 24">148 <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>149 <rect x="20" y="10" width="2" height="4" rx="1"></rect>150 <rect x="4" y="8" width="12" height="8" fill="#9E9E9E"></rect>151 </svg>152 </div>153 </div>154 155 <!-- Back button -->156 <div class="back-btn">157 <svg viewBox="0 0 24 24">158 <path d="M15 4 L7 12 L15 20" />159 </svg>160 </div>161 162 <!-- Title -->163 <div class="title">Date & time</div>164 165 <!-- Content -->166 <div class="content">167 <!-- Set time automatically -->168 <div class="row">169 <div class="label">Set time automatically</div>170 <div class="switch on">171 <div class="knob"></div>172 </div>173 </div>174 175 <!-- Date (disabled-looking) -->176 <div class="row">177 <div>178 <div class="muted-title">Date</div>179 <span class="sub">June 14, 2023</span>180 </div>181 </div>182 183 <!-- Time (disabled-looking) -->184 <div class="row">185 <div>186 <div class="muted-title">Time</div>187 <span class="sub">1:19 PM</span>188 </div>189 </div>190 191 <!-- Time zone section header -->192 <div class="section-header">Time zone</div>193 194 <!-- Set time zone automatically -->195 <div class="row">196 <div class="label">Set time zone automatically</div>197 <div class="switch on">198 <div class="knob"></div>199 </div>200 </div>201 202 <!-- Use location to set time zone -->203 <div class="row">204 <div class="label">Use location to set time zone</div>205 <div class="switch off">206 <div class="knob"></div>207 </div>208 </div>209 210 <!-- Current time zone (disabled-looking) -->211 <div class="row">212 <div>213 <div class="muted-title">Time zone</div>214 <span class="sub">GMT+05:30 India Standard Time</span>215 </div>216 </div>217 218 <!-- Time format header -->219 <div class="section-header">Time format</div>220 221 <!-- Use locale default -->222 <div class="row">223 <div class="label">Use locale default</div>224 <div class="switch on">225 <div class="knob"></div>226 </div>227 </div>228 229 <!-- Use 24-hour format (disabled) -->230 <div class="row">231 <div>232 <div class="muted-title">Use 24-hour format</div>233 <span class="sub">1:00 PM</span>234 </div>235 <div class="switch disabled">236 <div class="knob"></div>237 </div>238 </div>239 </div>240 241 <!-- Gesture bar -->242 <div class="gesture-bar"></div>243</div>244</body>245</html>