GD-ML/AndroidCode

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>Settings UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Top bars */18  .topbar {19    background: #0D84E6;20    color: #fff;21    width: 100%;22    height: 320px;23    position: relative;24  }25  .statusbar {26    height: 100px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 40px;31    font-size: 44px;32    letter-spacing: 0.5px;33  }34  .battery {35    display: flex;36    align-items: center;37    gap: 18px;38  }39  .appbar {40    height: 220px;41    display: flex;42    align-items: center;43    padding: 0 40px;44    gap: 28px;45    color: #fff;46  }47  .appbar .title {48    font-size: 72px;49    font-weight: 600;50  }51  .icon-btn svg { display: block; }52 53  /* Content */54  .content {55    position: absolute;56    top: 320px;57    left: 0;58    right: 0;59  }60  .section-title {61    color: #D53A35;62    font-size: 50px;63    font-weight: 600;64    padding: 36px 40px 18px 40px;65  }66  .divider {67    height: 2px;68    background: #E5E5E5;69    margin: 16px 40px;70  }71  .row {72    display: flex;73    align-items: center;74    padding: 28px 40px;75    gap: 28px;76  }77  .row.compact { padding-top: 10px; padding-bottom: 10px; }78  .icon {79    width: 110px;80    height: 110px;81    display: flex;82    align-items: center;83    justify-content: center;84  }85  .text-block {86    flex: 1;87    min-width: 0;88  }89  .text-block .title {90    font-size: 46px;91    color: #212121;92  }93  .text-block .sub {94    font-size: 36px;95    color: #9E9E9E;96    margin-top: 8px;97    line-height: 1.2;98  }99  .value-right {100    font-size: 42px;101    color: #D5433A;102    margin-left: 20px;103  }104 105  /* Toggles and checkbox */106  .toggle {107    width: 170px;108    height: 88px;109    border-radius: 44px;110    position: relative;111    margin-left: 10px;112  }113  .toggle.on { background: #F3C7C7; }114  .toggle.off { background: #E5E5E5; }115  .toggle .knob {116    width: 84px;117    height: 84px;118    border-radius: 50%;119    position: absolute;120    top: 2px;121  }122  .toggle.on .knob { right: 2px; background: #C62828; }123  .toggle.off .knob { left: 2px; background: #CFCFCF; }124 125  .checkbox {126    width: 64px;127    height: 64px;128    border: 6px solid #BDBDBD;129    border-radius: 8px;130    margin-left: 10px;131  }132 133  /* Others rows icon style */134  .outline-icon svg { stroke: #111; }135 136  /* Bottom navigation bar */137  .bottom-nav {138    position: absolute;139    bottom: 0;140    left: 0;141    width: 1080px;142    height: 140px;143    background: #000;144  }145  .gesture-pill {146    width: 300px;147    height: 14px;148    background: #FFFFFF;149    border-radius: 7px;150    position: absolute;151    left: 50%;152    top: 50%;153    transform: translate(-50%, -50%);154    opacity: 0.95;155  }156</style>157</head>158<body>159<div id="render-target">160 161  <!-- Top header -->162  <div class="topbar">163    <div class="statusbar">164      <div>8:32</div>165      <div class="battery">166        <span>100%</span>167        <svg width="54" height="34" viewBox="0 0 54 34">168          <rect x="2" y="6" width="44" height="22" rx="5" fill="none" stroke="#fff" stroke-width="4"></rect>169          <rect x="48" y="12" width="6" height="10" rx="2" fill="#fff"></rect>170          <rect x="6" y="10" width="36" height="14" fill="#fff"></rect>171        </svg>172      </div>173    </div>174    <div class="appbar">175      <div class="icon-btn">176        <svg width="64" height="64" viewBox="0 0 64 64">177          <path d="M40 8 L16 32 L40 56" stroke="#fff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>178        </svg>179      </div>180      <div class="title">Settings</div>181    </div>182  </div>183 184  <!-- Content -->185  <div class="content">186 187    <!-- General -->188    <div class="section-title">General</div>189    <div class="row">190      <div class="icon">191        <svg width="88" height="88" viewBox="0 0 88 88">192          <rect x="8" y="8" width="28" height="28" rx="6" fill="none" stroke="#111" stroke-width="6"></rect>193          <rect x="52" y="8" width="28" height="28" rx="6" fill="none" stroke="#111" stroke-width="6"></rect>194          <rect x="8" y="52" width="28" height="28" rx="6" fill="none" stroke="#111" stroke-width="6"></rect>195          <rect x="52" y="52" width="28" height="28" rx="6" fill="none" stroke="#111" stroke-width="6"></rect>196        </svg>197      </div>198      <div class="text-block">199        <div class="title">Widget</div>200        <div class="sub">Sticky notes/ Quick access toolbar</div>201      </div>202    </div>203 204    <div class="row">205      <div class="icon">206        <svg width="88" height="88" viewBox="0 0 88 88">207          <rect x="10" y="10" width="68" height="68" rx="10" fill="none" stroke="#111" stroke-width="6"></rect>208          <text x="28" y="50" font-size="28" fill="#111" font-family="Arial" font-weight="700">A</text>209          <text x="50" y="50" font-size="28" fill="#111" font-family="Arial" font-weight="700">Z</text>210        </svg>211      </div>212      <div class="text-block">213        <div class="title">Language</div>214      </div>215      <div class="value-right">English</div>216    </div>217 218    <div class="divider"></div>219 220    <!-- Calendar -->221    <div class="section-title">Calendar</div>222 223    <div class="row">224      <div class="icon">225        <svg width="88" height="88" viewBox="0 0 88 88">226          <rect x="10" y="18" width="68" height="56" rx="8" fill="none" stroke="#111" stroke-width="6"></rect>227          <rect x="10" y="10" width="68" height="16" fill="none" stroke="#111" stroke-width="6"></rect>228          <path d="M30 52 L38 60 L54 44" stroke="#111" stroke-width="6" fill="none" stroke-linecap="round"></path>229        </svg>230      </div>231      <div class="text-block">232        <div class="title">Start of the week</div>233        <div class="sub">Monday</div>234      </div>235    </div>236 237    <div class="row">238      <div class="icon">239        <svg width="88" height="88" viewBox="0 0 88 88">240          <rect x="10" y="18" width="68" height="56" rx="8" fill="none" stroke="#111" stroke-width="6"></rect>241          <rect x="10" y="10" width="68" height="16" fill="none" stroke="#111" stroke-width="6"></rect>242          <path d="M44 44 L48 56 L60 56 L50 64 L54 76 L44 68 L34 76 L38 64 L28 56 L40 56 Z" stroke="#111" stroke-width="4" fill="none"></path>243        </svg>244      </div>245      <div class="text-block">246        <div class="title">Show week number</div>247      </div>248      <div class="toggle on">249        <div class="knob"></div>250      </div>251    </div>252 253    <div class="row">254      <div class="icon">255        <svg width="88" height="88" viewBox="0 0 88 88">256          <rect x="10" y="18" width="68" height="56" rx="8" fill="none" stroke="#111" stroke-width="6"></rect>257          <rect x="10" y="10" width="68" height="16" fill="none" stroke="#111" stroke-width="6"></rect>258          <path d="M44 36 L36 56 L52 56 Z" fill="none" stroke="#111" stroke-width="6"></path>259        </svg>260      </div>261      <div class="text-block">262        <div class="title">Add Holiday263          <svg width="36" height="24" viewBox="0 0 60 40" style="vertical-align: middle; margin-left: 10px;">264            <path d="M6 34 L16 10 L26 34 L36 10 L46 34" fill="#FFC107" stroke="#FFC107" stroke-width="4"></path>265          </svg>266        </div>267        <div class="sub">Choose which country’s holidays will be shown in calendar</div>268      </div>269    </div>270 271    <div class="divider"></div>272 273    <!-- Calendar Sync -->274    <div class="section-title">Calendar Sync</div>275 276    <div class="row">277      <div class="icon">278        <svg width="88" height="88" viewBox="0 0 88 88">279          <rect x="10" y="18" width="68" height="56" rx="8" fill="none" stroke="#111" stroke-width="6"></rect>280          <rect x="10" y="10" width="68" height="16" fill="none" stroke="#111" stroke-width="6"></rect>281          <path d="M32 54 A16 16 0 0 1 56 50" stroke="#111" stroke-width="6" fill="none"></path>282          <path d="M56 50 L50 46 L58 40" stroke="#111" stroke-width="6" fill="none" stroke-linecap="round"></path>283        </svg>284      </div>285      <div class="text-block">286        <div class="title">Calendar Sync</div>287        <div class="sub">Synchronize events via calendar</div>288      </div>289      <div class="toggle off">290        <div class="knob"></div>291      </div>292    </div>293 294    <div class="row">295      <div class="icon" style="width:110px;"></div>296      <div class="text-block">297        <div class="title">Enable pull-to-refresh from the top</div>298      </div>299      <div class="checkbox"></div>300    </div>301 302    <div class="row">303      <div class="icon" style="width:110px;"></div>304      <div class="text-block">305        <div class="title" style="color:#9E9E9E;">Manager synced calendars</div>306      </div>307    </div>308 309    <div class="divider"></div>310 311    <!-- Others -->312    <div class="section-title">Others</div>313 314    <div class="row">315      <div class="icon outline-icon">316        <svg width="88" height="88" viewBox="0 0 88 88" fill="none">317          <path d="M44 14 L52 36 L76 36 L56 50 L64 72 L44 58 L24 72 L32 50 L12 36 L36 36 Z" stroke="#111" stroke-width="6" fill="none"></path>318        </svg>319      </div>320      <div class="text-block">321        <div class="title">Rate</div>322      </div>323    </div>324 325    <div class="row">326      <div class="icon outline-icon">327        <svg width="88" height="88" viewBox="0 0 88 88" fill="none">328          <circle cx="24" cy="44" r="10" stroke="#111" stroke-width="6"></circle>329          <circle cx="64" cy="24" r="10" stroke="#111" stroke-width="6"></circle>330          <circle cx="64" cy="64" r="10" stroke="#111" stroke-width="6"></circle>331          <path d="M34 42 L54 28" stroke="#111" stroke-width="6"></path>332          <path d="M34 46 L54 60" stroke="#111" stroke-width="6"></path>333        </svg>334      </div>335      <div class="text-block">336        <div class="title">Share</div>337      </div>338    </div>339 340    <div class="row">341      <div class="icon outline-icon">342        <svg width="88" height="88" viewBox="0 0 88 88" fill="none">343          <path d="M30 52 H52 C60 52 62 44 62 40 V28 H52 C48 28 46 30 44 32 V22 H38 C34 22 30 26 30 30 V52 Z" stroke="#111" stroke-width="6" fill="none" stroke-linejoin="round"></path>344        </svg>345      </div>346      <div class="text-block">347        <div class="title">Like facebook</div>348      </div>349    </div>350 351    <div class="row">352      <div class="icon outline-icon">353        <svg width="88" height="88" viewBox="0 0 88 88">354          <rect x="8" y="8" width="28" height="28" rx="6" fill="none" stroke="#111" stroke-width="6"></rect>355          <rect x="52" y="8" width="28" height="28" rx="6" fill="none" stroke="#111" stroke-width="6"></rect>356          <rect x="8" y="52" width="28" height="28" rx="6" fill="none" stroke="#111" stroke-width="6"></rect>357          <rect x="52" y="52" width="28" height="28" rx="6" fill="none" stroke="#111" stroke-width="6"></rect>358        </svg>359      </div>360      <div class="text-block">361        <div class="title">More app (ad)</div>362      </div>363    </div>364 365  </div>366 367  <!-- Bottom navigation/Pill -->368  <div class="bottom-nav">369    <div class="gesture-pill"></div>370  </div>371 372</div>373</body>374</html>