GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Settings UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #000000;18    color: #ffffff;19  }20 21  /* Top marketing banner */22  .banner {23    position: relative;24    width: 100%;25    height: 560px;26    background: linear-gradient(90deg, #f4d6a8 0%, #f0b6ad 50%, #efb0b3 100%);27    padding: 40px 60px 60px;28    box-sizing: border-box;29  }30  .banner-text {31    font-size: 44px;32    line-height: 60px;33    color: #2b2b2b;34    letter-spacing: 0.2px;35    margin-top: 30px;36  }37  .cta {38    margin-top: 40px;39    width: 620px;40    height: 128px;41    background: #3a976a;42    border-radius: 64px;43    display: flex;44    justify-content: center;45    align-items: center;46    color: #ffffff;47    font-weight: 700;48    font-size: 44px;49    box-shadow: 0 8px 16px rgba(0,0,0,0.15);50  }51 52  /* Sections */53  .section {54    padding: 36px 60px 0 60px;55  }56  .sec-title {57    font-size: 38px;58    color: #bdbdbd;59    letter-spacing: 6px;60    margin: 14px 0 28px;61  }62 63  /* Rows */64  .row {65    display: flex;66    align-items: center;67    justify-content: space-between;68    padding: 26px 0;69    border-bottom: 1px solid #1c1c1c;70  }71  .row-content {72    display: flex;73    align-items: center;74    gap: 34px;75  }76  .label {77    font-size: 56px;78  }79  .subtle {80    color: #9e9e9e;81    font-size: 54px;82  }83 84  /* Pills and toggles */85  .pill {86    display: inline-flex;87    align-items: center;88    justify-content: center;89    padding: 26px 40px;90    font-size: 42px;91    font-weight: 700;92    color: #000000;93    background: #f6d255;94    border-radius: 64px;95  }96 97  .toggle {98    width: 160px;99    display: flex;100    justify-content: space-between;101    align-items: center;102  }103  .tog-dot {104    width: 64px;105    height: 64px;106    border-radius: 50%;107    background: #9c9c9c;108    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);109  }110 111  /* Icons */112  .icon {113    width: 96px;114    height: 96px;115    border: 3px solid #ffffff;116    border-radius: 50%;117    display: flex;118    justify-content: center;119    align-items: center;120  }121  .icon svg {122    width: 56px;123    height: 56px;124    fill: none;125    stroke: #ffffff;126    stroke-width: 5;127    stroke-linecap: round;128    stroke-linejoin: round;129  }130 131  /* Status overlay simulation */132  .status-overlay {133    position: absolute;134    top: 0;135    left: 0;136    width: 100%;137    height: 92px;138    background: rgba(255,255,255,0.06);139    display: flex;140    align-items: center;141    justify-content: space-between;142    padding: 0 30px;143    box-sizing: border-box;144  }145  .status-time {146    color: #ffffff;147    font-size: 42px;148    font-weight: 600;149  }150  .status-icons {151    display: flex;152    gap: 24px;153  }154  .status-dot {155    width: 18px;156    height: 18px;157    background: #ffffff;158    border-radius: 50%;159    opacity: 0.9;160  }161 162  /* Home indicator */163  .home-indicator {164    position: absolute;165    bottom: 28px;166    left: 50%;167    transform: translateX(-50%);168    width: 520px;169    height: 14px;170    background: #e6e6e6;171    border-radius: 14px;172    opacity: 0.7;173  }174</style>175</head>176<body>177<div id="render-target">178 179  <div class="status-overlay">180    <div class="status-time">8:42</div>181    <div class="status-icons">182      <div class="status-dot"></div>183      <div class="status-dot"></div>184      <div class="status-dot"></div>185      <div class="status-dot"></div>186      <div class="status-dot"></div>187    </div>188  </div>189 190  <div class="banner">191    <div class="banner-text">192      Search, collect, and save unlimited recipes<br>193      from all around the web to your Kitchen Stories<br>194      cookbooks.195    </div>196    <div class="cta">Unlock cookbook+</div>197  </div>198 199  <div class="section">200    <div class="sec-title">ACCOUNT</div>201 202    <div class="row">203      <div class="row-content">204        <div class="label">Current Plan</div>205      </div>206      <div class="subtle">Free</div>207    </div>208 209    <div class="row" style="border-bottom:none; padding-top:34px; padding-bottom:10px;">210      <div class="pill">TRY COOKBOOK+</div>211    </div>212  </div>213 214  <div class="section">215    <div class="sec-title">SYSTEM</div>216 217    <div class="row">218      <div class="row-content">219        <div class="icon">220          <!-- Globe icon -->221          <svg viewBox="0 0 24 24">222            <circle cx="12" cy="12" r="9"></circle>223            <path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"></path>224          </svg>225        </div>226        <div class="label">Languages</div>227      </div>228    </div>229 230    <div class="row">231      <div class="row-content">232        <div class="icon">233          <!-- Measuring cup icon -->234          <svg viewBox="0 0 24 24">235            <path d="M5 5h10l3 3v3"></path>236            <path d="M7 5v12a3 3 0 0 0 3 3h4a3 3 0 0 0 3-3V8"></path>237            <path d="M9 9h6M9 12h6"></path>238          </svg>239        </div>240        <div class="label">Measurement System</div>241      </div>242    </div>243 244    <div class="row">245      <div class="row-content">246        <div class="icon">247          <!-- Play icon -->248          <svg viewBox="0 0 24 24">249            <circle cx="12" cy="12" r="9"></circle>250            <path d="M10 8l6 4-6 4z"></path>251          </svg>252        </div>253        <div class="label">Video autoplay</div>254      </div>255    </div>256 257    <div class="row">258      <div class="row-content">259        <div class="icon">260          <!-- Bell icon -->261          <svg viewBox="0 0 24 24">262            <path d="M6 10a6 6 0 0 1 12 0v5l2 2H4l2-2z"></path>263            <path d="M10 19a2 2 0 0 0 4 0"></path>264          </svg>265        </div>266        <div class="label">Notifications</div>267      </div>268    </div>269 270    <div class="row">271      <div class="row-content">272        <div class="icon">273          <!-- Half circle / display icon -->274          <svg viewBox="0 0 24 24">275            <path d="M3 12a9 9 0 0 1 18 0"></path>276            <path d="M4 16h16"></path>277          </svg>278        </div>279        <div class="label">Display</div>280      </div>281    </div>282  </div>283 284  <div class="section">285    <div class="sec-title">APPLIANCES</div>286 287    <div class="row">288      <div class="row-content">289        <div class="icon">290          <!-- Home connect (house) icon -->291          <svg viewBox="0 0 24 24">292            <path d="M4 11l8-6 8 6"></path>293            <path d="M6 10v8h12v-8"></path>294            <path d="M10 18v-4h4v4"></path>295          </svg>296        </div>297        <div class="label">Home Connect</div>298      </div>299      <div class="toggle">300        <div class="tog-dot"></div>301        <div class="tog-dot" style="opacity:0.6;"></div>302      </div>303    </div>304  </div>305 306  <div class="section">307    <div class="sec-title">MORE</div>308  </div>309 310  <div class="home-indicator"></div>311</div>312</body>313</html>