GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - General Settings</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: #EDEDED;14 }15 16 /* Status bar */17 .status-bar {18 height: 100px;19 padding: 0 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #DADADA;24 font-weight: 600;25 font-size: 40px;26 }27 .status-right {28 display: flex;29 align-items: center;30 gap: 28px;31 }32 .status-icon {33 width: 40px;34 height: 40px;35 background: #DADADA;36 border-radius: 6px;37 }38 39 /* App bar */40 .app-bar {41 height: 120px;42 display: flex;43 align-items: center;44 padding: 0 28px;45 gap: 24px;46 }47 .app-title {48 font-size: 56px;49 font-weight: 600;50 letter-spacing: 0.2px;51 }52 .icon-btn {53 width: 72px; height: 72px;54 display: flex; align-items: center; justify-content: center;55 border-radius: 36px;56 }57 .icon-btn svg { fill: #EDEDED; }58 59 /* Content list */60 .content {61 padding: 12px 40px 120px 40px;62 }63 .item {64 padding: 40px 0;65 border-bottom: 1px solid #1F1F1F;66 display: flex;67 align-items: center;68 justify-content: space-between;69 }70 .item .labels {71 max-width: 720px;72 }73 .item .title {74 font-size: 46px;75 font-weight: 600;76 color: #ECECEC;77 margin-bottom: 12px;78 }79 .item .subtitle {80 font-size: 36px;81 color: #9AA0A6;82 }83 84 /* Switch */85 .switch {86 width: 190px;87 height: 92px;88 background: #2A2A2A;89 border-radius: 46px;90 position: relative;91 box-shadow: inset 0 0 0 2px #3A3A3A;92 }93 .switch::after {94 content: "";95 width: 82px; height: 82px;96 background: #7A7A7A;97 border-radius: 41px;98 position: absolute;99 left: 6px; top: 5px;100 }101 .tz-row {102 display: flex; align-items: center; gap: 18px;103 }104 .sun-icon {105 width: 40px; height: 40px; border-radius: 50%;106 background: #FFC107;107 box-shadow: 0 0 0 3px rgba(255,193,7,0.25);108 }109 110 .section-spacer {111 height: 28px;112 background: transparent;113 }114 115 .faded-item { color: #C9C9C9; }116 .small-note { font-size: 36px; color: #A7A7A7; }117 118 /* Overlay dialog */119 .overlay {120 position: absolute;121 inset: 0;122 background: rgba(0,0,0,0.55);123 }124 .dialog {125 position: absolute;126 left: 50%;127 top: 1200px;128 transform: translateX(-50%);129 width: 1030px;130 background: #1F1F1F;131 border-radius: 36px;132 box-shadow: 0 20px 60px rgba(0,0,0,0.65);133 padding: 44px 48px 48px 48px;134 color: #EAEAEA;135 }136 .dialog-title {137 font-size: 52px;138 font-weight: 700;139 margin-bottom: 26px;140 }141 .radio-row {142 display: flex; align-items: center; gap: 28px;143 padding: 22px 0;144 font-size: 44px;145 }146 .radio {147 width: 54px; height: 54px; border-radius: 50%;148 box-shadow: inset 0 0 0 4px #8B8B8B;149 position: relative;150 }151 .radio.checked {152 box-shadow: inset 0 0 0 6px #8B8B8B;153 }154 .radio.checked::after {155 content: "";156 position: absolute;157 left: 11px; top: 11px;158 width: 32px; height: 32px;159 background: #9BB1FF;160 border-radius: 50%;161 box-shadow: 0 0 0 3px rgba(155,177,255,0.35);162 }163 .dialog-actions {164 display: flex;165 justify-content: flex-end;166 margin-top: 22px;167 }168 .btn {169 font-size: 40px;170 color: #9DB7FF;171 padding: 20px 24px;172 }173</style>174</head>175<body>176<div id="render-target">177 178 <!-- Status bar -->179 <div class="status-bar">180 <div>6:56</div>181 <div class="status-right">182 <div class="status-icon"></div>183 <div class="status-icon"></div>184 <div class="status-icon"></div>185 </div>186 </div>187 188 <!-- App bar -->189 <div class="app-bar">190 <div class="icon-btn">191 <svg viewBox="0 0 24 24" width="54" height="54">192 <path d="M15.5 5l-7 7 7 7 1.5-1.5L11.5 12 17 6.5 15.5 5z"></path>193 </svg>194 </div>195 <div class="app-title">General</div>196 <div style="margin-left:auto" class="icon-btn">197 <svg viewBox="0 0 24 24" width="54" height="54">198 <circle cx="12" cy="5" r="2"></circle>199 <circle cx="12" cy="12" r="2"></circle>200 <circle cx="12" cy="19" r="2"></circle>201 </svg>202 </div>203 </div>204 205 <!-- Content -->206 <div class="content">207 <div class="item">208 <div class="labels">209 <div class="title">Start of the week</div>210 <div class="subtitle">Sunday</div>211 </div>212 </div>213 214 <div class="item">215 <div class="labels">216 <div class="title">Use device time zone</div>217 </div>218 <div class="switch"></div>219 </div>220 221 <div class="item">222 <div class="labels">223 <div class="title">Time zone</div>224 <div class="tz-row subtitle">225 <div>Eastern Daylight Time GMT-4</div>226 <div class="sun-icon" title="sun"></div>227 </div>228 </div>229 </div>230 231 <div class="section-spacer"></div>232 233 <div class="item">234 <div class="labels">235 <div class="title faded-item">Default event duration</div>236 </div>237 </div>238 239 <div class="item">240 <div class="labels">241 <div class="title">Adding invitations</div>242 </div>243 </div>244 245 <div class="item">246 <div class="labels">247 <div class="title">Add video conferencing</div>248 </div>249 </div>250 251 <div class="item">252 <div class="labels">253 <div class="title">Theme</div>254 <div class="subtitle">System default</div>255 </div>256 </div>257 258 <div class="item">259 <div class="labels">260 <div class="title">Notifications</div>261 <div class="small-note">Notify on this device</div>262 </div>263 </div>264 </div>265 266 <!-- Modal overlay -->267 <div class="overlay">268 <div class="dialog">269 <div class="dialog-title">Start of the week</div>270 271 <div class="radio-row">272 <div class="radio"></div>273 <div>Saturday</div>274 </div>275 <div class="radio-row">276 <div class="radio checked"></div>277 <div>Sunday</div>278 </div>279 <div class="radio-row">280 <div class="radio"></div>281 <div>Monday</div>282 </div>283 284 <div class="dialog-actions">285 <div class="btn">Cancel</div>286 </div>287 </div>288 </div>289 290</div>291</body>292</html>