GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Settings Screen UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #F7EFE6;13    color: #1a1a1a;14  }15 16  /* General layout */17  .content {18    position: absolute;19    top: 140px; /* leave small space for status area */20    left: 0;21    right: 0;22    padding: 0 64px 120px;23  }24  .section-title {25    font-size: 56px;26    font-weight: 700;27    margin: 26px 0 22px;28  }29  .row {30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 22px 0;34  }35  .row-left {36    display: flex;37    align-items: center;38    gap: 32px;39  }40  .label {41    font-size: 42px;42    font-weight: 600;43  }44  .value {45    font-size: 42px;46    font-weight: 600;47  }48  .divider {49    height: 2px;50    background: #E3E0DB;51    margin: 28px 0;52  }53 54  /* Icon base */55  .icon {56    width: 92px;57    height: 92px;58    border-radius: 50%;59    background: #fff;60    display: inline-flex;61    align-items: center;62    justify-content: center;63    box-shadow: inset 0 0 0 6px #111;64  }65  .icon svg { width: 60px; height: 60px; stroke: #111; fill: none; stroke-width: 6px; }66 67  /* Display icon needs half-fill look */68  .icon.display svg { stroke-width: 8px; }69 70  /* Toggle */71  .toggle {72    position: relative;73    width: 240px;74    height: 112px;75    background: #BDBDBD;76    border-radius: 56px;77    box-shadow: inset 0 0 0 4px rgba(0,0,0,0.08);78  }79  .toggle .knob {80    position: absolute;81    top: 10px;82    left: 10px; /* OFF position */83    width: 92px;84    height: 92px;85    background: #fff;86    border-radius: 46px;87    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2), inset 0 0 0 6px #9E9E9E;88  }89 90  /* More section icons slightly different boxes */91  .square-icon {92    width: 92px;93    height: 92px;94    border-radius: 16px;95    background: #fff;96    display: inline-flex;97    align-items: center;98    justify-content: center;99    box-shadow: inset 0 0 0 6px #111;100  }101  .square-icon svg { width: 60px; height: 60px; stroke: #111; fill: none; stroke-width: 6px; }102 103  /* Status bar simulation */104  .status-bar {105    position: absolute;106    top: 0;107    left: 0;108    right: 0;109    height: 120px;110    padding: 0 40px;111    display: flex;112    align-items: center;113    justify-content: space-between;114    color: #333;115    font-size: 36px;116  }117  .gesture-pill {118    position: absolute;119    bottom: 40px;120    left: 50%;121    transform: translateX(-50%);122    width: 480px;123    height: 14px;124    background: #BDBDBD;125    border-radius: 7px;126  }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- Simple status bar -->133  <div class="status-bar">134    <div>6:01</div>135    <div>• • •</div>136  </div>137 138  <div class="content">139    <!-- Account -->140    <div class="section-title">Account</div>141    <div class="row">142      <div class="label">Current Plan</div>143      <div class="value">Free</div>144    </div>145    <div class="divider"></div>146 147    <!-- System -->148    <div class="section-title">System</div>149 150    <div class="row">151      <div class="row-left">152        <div class="icon" aria-label="Globe icon">153          <svg viewBox="0 0 100 100">154            <circle cx="50" cy="50" r="34"></circle>155            <path d="M16,50 H84"></path>156            <path d="M50,16 V84"></path>157            <path d="M20,35 C35,42 65,42 80,35"></path>158            <path d="M20,65 C35,58 65,58 80,65"></path>159          </svg>160        </div>161        <div class="label">Languages</div>162      </div>163    </div>164 165    <div class="row">166      <div class="row-left">167        <div class="icon" aria-label="Measuring cup icon">168          <svg viewBox="0 0 100 100">169            <path d="M30 20 H70 L70 42 Q70 48 63 48 H55 V82 Q55 88 48 88 H34 Q28 88 28 82 V24 Q28 20 30 20 Z"></path>170            <path d="M60 28 H70"></path>171            <path d="M58 34 H70"></path>172            <path d="M56 40 H70"></path>173          </svg>174        </div>175        <div class="label">Measurement System</div>176      </div>177    </div>178 179    <div class="row">180      <div class="row-left">181        <div class="icon" aria-label="Autoplay icon">182          <svg viewBox="0 0 100 100">183            <path d="M50 22 A28 28 0 1 1 28 32" stroke-linecap="round"></path>184            <polygon points="44,36 70,50 44,64" fill="#111" stroke="none"></polygon>185          </svg>186        </div>187        <div class="label">Video autoplay</div>188      </div>189    </div>190 191    <div class="row">192      <div class="row-left">193        <div class="icon" aria-label="Bell icon">194          <svg viewBox="0 0 100 100">195            <path d="M50 20 C36 20 30 34 30 48 V62 L24 68 H76 L70 62 V48 C70 34 64 20 50 20 Z"></path>196            <circle cx="50" cy="76" r="6"></circle>197          </svg>198        </div>199        <div class="label">Notifications</div>200      </div>201    </div>202 203    <div class="row">204      <div class="row-left">205        <div class="icon display" aria-label="Display icon">206          <svg viewBox="0 0 100 100">207            <circle cx="50" cy="50" r="32"></circle>208            <path d="M50 18 V82" stroke="#111"></path>209          </svg>210        </div>211        <div class="label">Display</div>212      </div>213    </div>214 215    <div class="divider"></div>216 217    <!-- Appliances -->218    <div class="section-title">Appliances</div>219    <div class="row">220      <div class="row-left">221        <div class="icon" aria-label="Home Connect icon">222          <svg viewBox="0 0 100 100">223            <path d="M20 60 Q20 84 44 84 H56 Q80 84 80 60 V40 L50 20 L20 40 Z"></path>224            <path d="M40 68 H60 V52 H40 Z"></path>225          </svg>226        </div>227        <div class="label">Home Connect</div>228      </div>229      <div class="toggle" aria-label="Toggle off">230        <div class="knob"></div>231      </div>232    </div>233 234    <div class="divider"></div>235 236    <!-- More -->237    <div class="section-title">More</div>238 239    <div class="row">240      <div class="row-left">241        <div class="square-icon" aria-label="Document icon">242          <svg viewBox="0 0 100 100">243            <path d="M30 20 H60 L74 34 V80 H30 Z"></path>244            <path d="M60 20 V34 H74"></path>245            <path d="M40 46 H64"></path>246            <path d="M40 58 H64"></path>247          </svg>248        </div>249        <div class="label">Recipe creation FAQs</div>250      </div>251    </div>252 253    <div class="row">254      <div class="row-left">255        <div class="square-icon" aria-label="Info icon">256          <svg viewBox="0 0 100 100">257            <circle cx="50" cy="50" r="32"></circle>258            <circle cx="50" cy="32" r="6"></circle>259            <path d="M50 44 V72"></path>260          </svg>261        </div>262        <div class="label">About us</div>263      </div>264    </div>265 266    <div class="row">267      <div class="row-left">268        <div class="square-icon" aria-label="Star icon">269          <svg viewBox="0 0 100 100">270            <path d="M50 22 L60 44 L84 46 L66 60 L72 82 L50 70 L28 82 L34 60 L16 46 L40 44 Z"></path>271          </svg>272        </div>273        <div class="label">Rate app</div>274      </div>275    </div>276 277  </div>278 279  <!-- gesture bar -->280  <div class="gesture-pill"></div>281</div>282</body>283</html>