GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Android Settings UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #fff;15  }16 17  /* Status bar */18  .statusbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    padding: 22px 36px;25    box-sizing: border-box;26    color: #ffffff;27    font-weight: 600;28    font-size: 36px;29    display: flex;30    align-items: center;31    justify-content: space-between;32  }33  .sb-right {34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .mini-icon {39    width: 34px;40    height: 24px;41    border-radius: 4px;42    background: #e0e0e0;43    opacity: 0.9;44  }45  .wifi-icon, .battery-icon {46    display: inline-block;47  }48  .wifi-icon svg, .battery-icon svg {49    display: block;50  }51 52  /* Search bar */53  .search-wrap {54    position: absolute;55    left: 36px;56    right: 36px;57    top: 130px;58    height: 120px;59  }60  .search-bar {61    width: 100%;62    height: 120px;63    background: #2a2a2a;64    border-radius: 60px;65    box-sizing: border-box;66    padding: 0 40px;67    display: flex;68    align-items: center;69    gap: 24px;70    color: #cfcfcf;71    font-size: 44px;72    font-weight: 500;73  }74  .search-bar svg { fill: #cfcfcf; }75 76  /* List section */77  .section {78    position: absolute;79    left: 36px;80    right: 36px;81    top: 280px;82  }83  .item {84    display: flex;85    align-items: flex-start;86    gap: 36px;87    padding: 30px 0;88    border-bottom: 0px solid #1f1f1f;89  }90  .icon {91    width: 70px;92    height: 70px;93    display: flex;94    align-items: center;95    justify-content: center;96  }97  .icon svg { width: 70px; height: 70px; fill: #E8EAED; }98  .text .title {99    font-size: 52px;100    font-weight: 700;101    letter-spacing: -0.3px;102    color: #FFFFFF;103    line-height: 1.2;104  }105  .text .subtitle {106    margin-top: 10px;107    font-size: 32px;108    color: #A8ADB3;109    line-height: 1.35;110  }111 112  /* Bottom gesture bar */113  .gesture-bar {114    position: absolute;115    bottom: 36px;116    left: 50%;117    transform: translateX(-50%);118    width: 360px;119    height: 12px;120    background: #9E9E9E;121    opacity: 0.55;122    border-radius: 8px;123  }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Status Bar -->130  <div class="statusbar">131    <div>12:17</div>132    <div class="sb-right">133      <div class="mini-icon"></div>134      <div class="mini-icon"></div>135      <div class="mini-icon" style="border-radius:50%;"></div>136      <span class="wifi-icon">137        <svg width="40" height="28" viewBox="0 0 24 24">138          <path fill="#E8EAED" d="M12 18.5c.9 0 1.5.6 1.5 1.5s-.6 1.5-1.5 1.5-1.5-.6-1.5-1.5.6-1.5 1.5-1.5zm-5.3-5.1 1.4 1.4c2.1-2.1 5.6-2.1 7.7 0l1.4-1.4c-2.9-2.9-7.6-2.9-10.5 0zm-3.6-3.6 1.4 1.4c4-4 10.5-4 14.5 0l1.4-1.4c-4.8-4.8-12.5-4.8-17.3 0z"/>139        </svg>140      </span>141      <span class="battery-icon">142        <svg width="46" height="24" viewBox="0 0 28 14">143          <rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="#E8EAED"></rect>144          <rect x="24" y="5" width="3" height="4" rx="1" fill="#E8EAED"></rect>145        </svg>146      </span>147    </div>148  </div>149 150  <!-- Search Bar -->151  <div class="search-wrap">152    <div class="search-bar">153      <svg width="56" height="56" viewBox="0 0 24 24">154        <path d="M15.5 14h-.79l-.28-.27a6.471 6.471 0 0 0 1.57-4.23A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>155      </svg>156      <span>Search settings</span>157    </div>158  </div>159 160  <!-- Settings List -->161  <div class="section">162 163    <!-- Location -->164    <div class="item">165      <div class="icon">166        <svg viewBox="0 0 24 24">167          <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 10.5c-1.93 0-3.5-1.57-3.5-3.5S10.07 5.5 12 5.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path>168        </svg>169      </div>170      <div class="text">171        <div class="title">Location</div>172        <div class="subtitle">Off</div>173      </div>174    </div>175 176    <!-- Safety & emergency -->177    <div class="item">178      <div class="icon">179        <svg viewBox="0 0 24 24">180          <path d="M11 2h2v7l6-3.5 1 1.73L14.5 11l5.5 3.77-1 1.73L13 13v9h-2v-9l-6 3.5-1-1.73L9.5 11 4 7.23l1-1.73L11 9z"></path>181        </svg>182      </div>183      <div class="text">184        <div class="title">Safety &amp; emergency</div>185        <div class="subtitle">Emergency SOS, medical info, alerts</div>186      </div>187    </div>188 189    <!-- Passwords & accounts -->190    <div class="item">191      <div class="icon">192        <svg viewBox="0 0 24 24">193          <path d="M4 4h16v14H4V4zm2 2v10h12V6H6zm3 2h6v2H9V8zm-1 5h8v2H8v-2z"></path>194        </svg>195      </div>196      <div class="text">197        <div class="title">Passwords &amp; accounts</div>198        <div class="subtitle">Saved passwords, autofill, synced accounts</div>199      </div>200    </div>201 202    <!-- Digital Wellbeing & parental controls -->203    <div class="item">204      <div class="icon">205        <svg viewBox="0 0 24 24">206          <path d="M12.1 21.35l-1.1-.99C5.14 15.28 2 12.36 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.86-3.14 6.78-9 11.86l-0.9.99z"></path>207        </svg>208      </div>209      <div class="text">210        <div class="title">Digital Wellbeing &amp; parental controls</div>211        <div class="subtitle">Screen time, app timers, bedtime schedules</div>212      </div>213    </div>214 215    <!-- Google -->216    <div class="item">217      <div class="icon">218        <svg viewBox="0 0 24 24">219          <path d="M12 2a10 10 0 1 0 0 20c5.4 0 9.88-4.1 9.99-9.3H12v-3h8.8A10 10 0 0 0 12 2z"></path>220        </svg>221      </div>222      <div class="text">223        <div class="title">Google</div>224        <div class="subtitle">Services &amp; preferences</div>225      </div>226    </div>227 228    <!-- System -->229    <div class="item">230      <div class="icon">231        <svg viewBox="0 0 24 24">232          <path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>233        </svg>234      </div>235      <div class="text">236        <div class="title">System</div>237        <div class="subtitle">Languages, gestures, time, backup</div>238      </div>239    </div>240 241    <!-- About phone -->242    <div class="item">243      <div class="icon">244        <svg viewBox="0 0 24 24">245          <rect x="6" y="2.5" width="12" height="19" rx="2" ry="2"></rect>246          <rect x="10" y="18" width="4" height="1.5" fill="#121212"></rect>247        </svg>248      </div>249      <div class="text">250        <div class="title">About phone</div>251        <div class="subtitle">Pixel 5a</div>252      </div>253    </div>254 255    <!-- Tips & support -->256    <div class="item" style="padding-bottom: 60px;">257      <div class="icon">258        <svg viewBox="0 0 24 24">259          <path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 16h-2v-2h2v2zm1.9-8.1c0 2-2 2.5-2 3.3V14h-2v-.9c0-1.5 2-2 2-3.3 0-.8-.7-1.4-1.5-1.4-.9 0-1.6.6-1.6 1.6H7.3c0-2.1 1.7-3.6 3.7-3.6 2 0 3.9 1.2 3.9 3.3z"></path>260        </svg>261      </div>262      <div class="text">263        <div class="title">Tips &amp; support</div>264        <div class="subtitle">Help articles, phone &amp; chat</div>265      </div>266    </div>267 268  </div>269 270  <!-- Bottom gesture pill -->271  <div class="gesture-bar"></div>272 273</div>274</body>275</html>