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; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121212;15    color: #FFFFFF;16    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 96px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31    color: #EDEDED;32    font-weight: 600;33    font-size: 42px;34    letter-spacing: 0.5px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .status-icon svg { width: 48px; height: 48px; fill: none; stroke: #EDEDED; stroke-width: 3.5; }42 43  /* Search bar */44  .search-bar {45    position: absolute;46    top: 120px;47    left: 40px;48    width: 1000px;49    height: 124px;50    background: #3A3A3A;51    border-radius: 62px;52    display: flex;53    align-items: center;54    padding: 0 40px;55    box-sizing: border-box;56  }57  .search-bar .icon {58    margin-right: 28px;59  }60  .search-bar svg {61    width: 56px; height: 56px; fill: none; stroke: #CFCFCF; stroke-width: 5;62  }63  .search-bar .placeholder {64    color: #CFCFCF;65    font-size: 46px;66    font-weight: 500;67  }68 69  /* List container */70  .list {71    position: absolute;72    top: 300px;73    left: 0;74    width: 100%;75    padding: 0 40px 160px;76    box-sizing: border-box;77  }78  .item {79    display: flex;80    align-items: flex-start;81    gap: 40px;82    padding: 46px 0;83  }84  .icon-box {85    width: 74px;86    height: 74px;87    display: flex;88    align-items: center;89    justify-content: center;90  }91  .icon-box svg {92    width: 74px;93    height: 74px;94    fill: none;95    stroke: #DADADA;96    stroke-width: 4.5;97  }98  .text .title {99    font-size: 54px;100    font-weight: 600;101    color: #F1F1F1;102    line-height: 1.2;103  }104  .text .subtitle {105    margin-top: 16px;106    font-size: 34px;107    color: #A9A9A9;108  }109 110  /* Bottom home indicator */111  .home-indicator {112    position: absolute;113    bottom: 48px;114    left: 50%;115    transform: translateX(-50%);116    width: 360px;117    height: 12px;118    background: #CFCFCF;119    border-radius: 8px;120    opacity: 0.8;121  }122</style>123</head>124<body>125<div id="render-target">126  <!-- Status bar -->127  <div class="status-bar">128    <div class="status-left">10:20</div>129    <div class="status-right">130      <div class="status-icon">131        <!-- Wi-Fi icon -->132        <svg viewBox="0 0 24 24">133          <path d="M2.5 8.5C7 4.5 17 4.5 21.5 8.5" />134          <path d="M6 12c4-3 8-3 12 0" />135          <path d="M10 15.5c2-1.6 4-1.6 6 0" />136          <circle cx="12" cy="18.5" r="1.7" fill="#EDEDED" stroke="none"/>137        </svg>138      </div>139      <div class="status-icon">140        <!-- Battery icon -->141        <svg viewBox="0 0 26 24">142          <rect x="1.5" y="5" width="18" height="14" rx="2.5" />143          <rect x="21" y="9" width="3.5" height="6" rx="1.2" />144          <rect x="4" y="7.5" width="12" height="9" fill="#EDEDED" stroke="none"/>145        </svg>146      </div>147    </div>148  </div>149 150  <!-- Search bar -->151  <div class="search-bar">152    <div class="icon">153      <svg viewBox="0 0 24 24">154        <circle cx="10" cy="10" r="7"/>155        <path d="M15.5 15.5 L22 22"/>156      </svg>157    </div>158    <div class="placeholder">Search settings</div>159  </div>160 161  <!-- Settings list -->162  <div class="list">163    <div class="item">164      <div class="icon-box">165        <!-- Location pin -->166        <svg viewBox="0 0 24 24">167          <path d="M12 21c-4-6-6.5-8.5-6.5-11.5a6.5 6.5 0 1 1 13 0C18.5 12.5 16 15 12 21z"/>168          <circle cx="12" cy="9.5" r="2.5"/>169        </svg>170      </div>171      <div class="text">172        <div class="title">Location</div>173        <div class="subtitle">On - 8 apps have access to location</div>174      </div>175    </div>176 177    <div class="item">178      <div class="icon-box">179        <!-- Emergency asterisk -->180        <svg viewBox="0 0 24 24">181          <path d="M12 3 L12 21"/>182          <path d="M3 12 L21 12"/>183          <path d="M5.2 5.2 L18.8 18.8"/>184          <path d="M18.8 5.2 L5.2 18.8"/>185        </svg>186      </div>187      <div class="text">188        <div class="title">Safety &amp; emergency</div>189        <div class="subtitle">Emergency SOS, medical info, alerts</div>190      </div>191    </div>192 193    <div class="item">194      <div class="icon-box">195        <!-- Passwords & accounts (id card/image) -->196        <svg viewBox="0 0 24 24">197          <rect x="3" y="4" width="18" height="14" rx="2"/>198          <rect x="5.5" y="6.5" width="6" height="6" rx="1.2"/>199          <path d="M13.5 9.5h5M13.5 12.5h5"/>200        </svg>201      </div>202      <div class="text">203        <div class="title">Passwords &amp; accounts</div>204        <div class="subtitle">Saved passwords, autofill, synced accounts</div>205      </div>206    </div>207 208    <div class="item">209      <div class="icon-box">210        <!-- Digital Wellbeing (heart) -->211        <svg viewBox="0 0 24 24">212          <path d="M12 20s-7-4.8-7-9.2A4.8 4.8 0 0 1 9.8 6c1.3 0 2.3.6 3.2 1.6C13.9 6.6 15 6 16.2 6A4.8 4.8 0 0 1 19 10.8C19 15.2 12 20 12 20z"/>213        </svg>214      </div>215      <div class="text">216        <div class="title">Digital Wellbeing &amp; parental controls</div>217        <div class="subtitle">Screen time, app timers, bedtime schedules</div>218      </div>219    </div>220 221    <div class="item">222      <div class="icon-box">223        <!-- Google (G letter inside circle) -->224        <svg viewBox="0 0 24 24">225          <circle cx="12" cy="12" r="9"/>226          <path d="M9 8.5h4.5a3 3 0 1 1 0 6H11" />227        </svg>228      </div>229      <div class="text">230        <div class="title">Google</div>231        <div class="subtitle">Services &amp; preferences</div>232      </div>233    </div>234 235    <div class="item">236      <div class="icon-box">237        <!-- Info circle -->238        <svg viewBox="0 0 24 24">239          <circle cx="12" cy="12" r="9"/>240          <path d="M12 10v6"/>241          <circle cx="12" cy="7" r="1.6"/>242        </svg>243      </div>244      <div class="text">245        <div class="title">System</div>246        <div class="subtitle">Languages, gestures, time, backup</div>247      </div>248    </div>249 250    <div class="item">251      <div class="icon-box">252        <!-- Phone in rectangle -->253        <svg viewBox="0 0 24 24">254          <rect x="5" y="3.5" width="14" height="17" rx="2"/>255          <rect x="10" y="17.5" width="4" height="1.8" rx="0.9" fill="#DADADA" stroke="none"/>256        </svg>257      </div>258      <div class="text">259        <div class="title">About phone</div>260        <div class="subtitle">Pixel 5a</div>261      </div>262    </div>263 264    <div class="item">265      <div class="icon-box">266        <!-- Help / question mark -->267        <svg viewBox="0 0 24 24">268          <circle cx="12" cy="12" r="9"/>269          <path d="M9.5 9.3a3 3 0 0 1 5 1.7c0 1.7-1.5 2.3-2.2 2.8-.6.4-.8.8-.8 1.5"/>270          <circle cx="12" cy="17.8" r="1.3"/>271        </svg>272      </div>273      <div class="text">274        <div class="title">Tips &amp; support</div>275        <div class="subtitle">Help articles, phone &amp; chat</div>276      </div>277    </div>278  </div>279 280  <!-- Home indicator -->281  <div class="home-indicator"></div>282</div>283</body>284</html>