GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Date & time - Android Settings Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #121212;14 color: #EDEDED;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #ECECEC;29 font-size: 40px;30 box-sizing: border-box;31 }32 .status-icons {33 display: flex;34 align-items: center;35 gap: 22px;36 }37 .notif-dot {38 width: 34px; height: 34px; border-radius: 6px; background: #2C2C2C; border: 2px solid #3E3E3E;39 }40 .wifi-icon, .battery-icon {41 width: 46px; height: 30px;42 }43 44 /* Back & Title */45 .back-btn {46 position: absolute;47 top: 138px;48 left: 36px;49 width: 64px;50 height: 64px;51 display: flex;52 align-items: center;53 justify-content: center;54 }55 .title {56 position: absolute;57 top: 210px;58 left: 64px;59 font-size: 110px;60 font-weight: 600;61 color: #F3F3F3;62 letter-spacing: -1px;63 }64 65 /* Content */66 .content {67 position: absolute;68 top: 380px;69 left: 64px;70 width: 952px;71 }72 73 .setting-row {74 display: flex;75 justify-content: space-between;76 align-items: center;77 padding: 38px 0;78 border-bottom: 0px solid #1f1f1f;79 }80 81 .label {82 font-size: 48px;83 color: #F0F0F0;84 }85 .subtext {86 font-size: 36px;87 margin-top: 12px;88 color: #A7A7A7;89 }90 91 .section-title {92 font-size: 34px;93 color: #9BB2FF;94 margin-top: 70px;95 margin-bottom: 10px;96 }97 98 .muted {99 color: #6E6E6E;100 }101 102 /* Toggle */103 .toggle {104 width: 170px;105 height: 96px;106 border-radius: 60px;107 position: relative;108 transition: background 0.2s ease;109 }110 .toggle .knob {111 position: absolute;112 top: 10px;113 width: 76px;114 height: 76px;115 border-radius: 50%;116 transition: left 0.2s ease, background 0.2s ease;117 }118 .toggle.off { background: #494949; }119 .toggle.off .knob { left: 10px; background: #9B9B9B; }120 121 .toggle.on { background: #6F86FF; }122 .toggle.on .knob { left: 84px; background: #DDE4FF; }123 124 .toggle.disabled { background: #2B2B2B; opacity: 0.6; }125 .toggle.disabled .knob { background: #5A5A5A; left: 10px; }126 127 .info-block {128 padding: 32px 0 6px 0;129 border-bottom: 0px solid #1f1f1f;130 }131 132 .info-title {133 font-size: 44px;134 color: #F0F0F0;135 margin-bottom: 10px;136 }137 .info-value {138 font-size: 36px;139 color: #B8B8B8;140 }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status bar -->147 <div class="status-bar">148 <div style="display:flex; align-items:center; gap:18px;">149 <div style="font-weight:600;">12:18</div>150 <div class="notif-dot"></div>151 <div class="notif-dot"></div>152 <div class="notif-dot" style="border-radius:50%;"></div>153 </div>154 <div class="status-icons">155 <!-- simple wifi -->156 <svg class="wifi-icon" viewBox="0 0 24 24" fill="#EAEAEA">157 <path d="M12 20.5c.8 0 1.5-.7 1.5-1.5S12.8 17.5 12 17.5 10.5 18.2 10.5 19 11.2 20.5 12 20.5zM2 8.1l1.4 1.4C6.2 6.7 9 5.5 12 5.5s5.8 1.2 8.6 4l1.4-1.4C19.7 4.7 16 3 12 3S4.3 4.7 2 8.1zm4 4l1.4 1.4C9 11 10.4 10.5 12 10.5s3 .5 4.6 3l1.4-1.4C16.8 9.9 14.6 9 12 9s-4.8.9-6 3.1z"/>158 </svg>159 <!-- battery -->160 <svg class="battery-icon" viewBox="0 0 24 24" fill="#EAEAEA">161 <path d="M16 4H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm2 6h1V10h-1V8zM5 6h11v10H5V6z"/>162 </svg>163 </div>164 </div>165 166 <!-- Back button -->167 <div class="back-btn">168 <svg width="60" height="60" viewBox="0 0 24 24" fill="#EDEDED">169 <path d="M15.5 3.9L7.4 12l8.1 8.1-1.9 1.9L3.6 12l9.9-9.9 2 1.8z"/>170 </svg>171 </div>172 173 <!-- Title -->174 <div class="title">Date & time</div>175 176 <!-- Content -->177 <div class="content">178 179 <!-- Set time automatically -->180 <div class="setting-row">181 <div class="label">Set time automatically</div>182 <div class="toggle off">183 <div class="knob"></div>184 </div>185 </div>186 187 <!-- Date -->188 <div class="info-block">189 <div class="info-title">Date</div>190 <div class="info-value">June 14, 2023</div>191 </div>192 193 <!-- Time -->194 <div class="info-block" style="margin-top: 28px;">195 <div class="info-title">Time</div>196 <div class="info-value">12:18 PM</div>197 </div>198 199 <!-- Time Zone Section -->200 <div class="section-title">Time zone</div>201 202 <div class="setting-row">203 <div class="label">Set time zone automatically</div>204 <div class="toggle on">205 <div class="knob"></div>206 </div>207 </div>208 209 <div class="setting-row" style="padding-top:28px;">210 <div>211 <div class="label">Use location to set time zone</div>212 <div class="subtext">Location is off</div>213 </div>214 <div class="toggle on">215 <div class="knob"></div>216 </div>217 </div>218 219 <div class="info-block" style="opacity:0.7; margin-top: 26px;">220 <div class="info-title muted">Time zone</div>221 <div class="info-value">GMT+05:30 India Standard Time</div>222 </div>223 224 <!-- Time format -->225 <div class="section-title" style="margin-top: 64px;">Time format</div>226 227 <div class="setting-row">228 <div class="label">Use locale default</div>229 <div class="toggle on">230 <div class="knob"></div>231 </div>232 </div>233 234 <div class="setting-row" style="padding-top:28px;">235 <div>236 <div class="label muted">Use 24-hour format</div>237 <div class="subtext">1:00 PM</div>238 </div>239 <div class="toggle disabled">240 <div class="knob"></div>241 </div>242 </div>243 244 </div>245 246</div>247</body>248</html>