GD-ML/AndroidCode
13.4k
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</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0C0C0C;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 84px;25 padding: 0 40px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #fff;31 font-size: 28px;32 opacity: 0.95;33 }34 .status-right { display: flex; align-items: center; gap: 22px; }35 36 /* Header */37 .header {38 position: absolute;39 top: 84px;40 left: 0;41 width: 1080px;42 height: 150px;43 padding: 0 36px;44 box-sizing: border-box;45 display: flex;46 align-items: center;47 background: #111111;48 border-bottom: 1px solid #262626;49 gap: 24px;50 }51 .header-title {52 font-size: 56px;53 font-weight: 600;54 letter-spacing: 0.3px;55 }56 .icon-btn {57 width: 72px;58 height: 72px;59 display: flex;60 align-items: center;61 justify-content: center;62 border-radius: 36px;63 }64 65 /* Account card */66 .account-card {67 position: absolute;68 top: 234px;69 left: 0;70 width: 1080px;71 padding: 40px 40px 46px 40px;72 box-sizing: border-box;73 background: #0F0F0F;74 border-bottom: 1px solid #262626;75 display: flex;76 align-items: center;77 gap: 34px;78 }79 .img-placeholder {80 width: 180px;81 height: 180px;82 background: #E0E0E0;83 border: 1px solid #BDBDBD;84 display: flex;85 align-items: center;86 justify-content: center;87 color: #757575;88 font-size: 26px;89 border-radius: 16px;90 flex-shrink: 0;91 }92 .account-text h2 {93 margin: 0 0 10px 0;94 font-size: 48px;95 font-weight: 700;96 }97 .account-text p {98 margin: 6px 0 0 0;99 font-size: 32px;100 color: #B9B9B9;101 line-height: 1.35;102 max-width: 720px;103 }104 105 /* Sections */106 .section {107 padding: 44px 40px 22px 40px;108 border-bottom: 1px solid #262626;109 }110 .section-title {111 font-size: 34px;112 font-weight: 700;113 color: #EDEDED;114 letter-spacing: 2px;115 margin-bottom: 6px;116 }117 .rows { margin-top: 18px; }118 119 .setting-row {120 display: flex;121 align-items: center;122 justify-content: space-between;123 padding: 30px 0;124 color: #fff;125 }126 .left {127 display: flex;128 align-items: center;129 gap: 28px;130 }131 .ico {132 width: 70px;133 height: 70px;134 display: inline-flex;135 align-items: center;136 justify-content: center;137 }138 .label {139 font-size: 42px;140 font-weight: 500;141 letter-spacing: 0.2px;142 }143 144 /* Toggle */145 .toggle {146 width: 120px;147 height: 64px;148 background: #3A3A3A;149 border-radius: 32px;150 position: relative;151 box-shadow: inset 0 0 0 1px #4a4a4a;152 }153 .toggle::after {154 content: "";155 position: absolute;156 top: 6px;157 left: 8px;158 width: 52px;159 height: 52px;160 background: #BEBEBE;161 border-radius: 50%;162 box-shadow: 0 1px 3px rgba(0,0,0,0.5);163 }164 165 /* Bottom home indicator */166 .home-indicator {167 position: absolute;168 bottom: 36px;169 left: 50%;170 transform: translateX(-50%);171 width: 380px;172 height: 12px;173 background: #D8D8D8;174 border-radius: 8px;175 opacity: 0.85;176 }177</style>178</head>179<body>180<div id="render-target">181 <!-- Status Bar -->182 <div class="status-bar">183 <div>3:44</div>184 <div class="status-right">185 <!-- Simple WiFi icon -->186 <svg width="38" height="26" viewBox="0 0 38 26" xmlns="http://www.w3.org/2000/svg">187 <g fill="none" stroke="#fff" stroke-width="2.8" stroke-linecap="round">188 <path d="M2 10c8-8 26-8 34 0"/>189 <path d="M7 15c6-6 18-6 24 0"/>190 <path d="M13 20c4-4 12-4 16 0"/>191 <circle cx="19" cy="23" r="2.5" fill="#fff" stroke="none"/>192 </g>193 </svg>194 <!-- Battery icon -->195 <svg width="44" height="22" viewBox="0 0 44 22" xmlns="http://www.w3.org/2000/svg">196 <rect x="1" y="3" width="38" height="16" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2.6"/>197 <rect x="4" y="6" width="26" height="10" rx="2" ry="2" fill="#fff"/>198 <rect x="39" y="7" width="4" height="8" rx="1" fill="#fff"/>199 </svg>200 </div>201 </div>202 203 <!-- Header -->204 <div class="header">205 <div class="icon-btn">206 <svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">207 <g stroke="#fff" stroke-width="4.8" stroke-linecap="round">208 <path d="M8 8 L36 36"/>209 <path d="M36 8 L8 36"/>210 </g>211 </svg>212 </div>213 <div class="header-title">Settings</div>214 </div>215 216 <!-- Account Card -->217 <div class="account-card">218 <div class="img-placeholder">[IMG: User avatar illustration]</div>219 <div class="account-text">220 <h2>You don't have an account yet.</h2>221 <p>Create an account to fully enjoy the Kitchen Stories app.</p>222 </div>223 </div>224 225 <!-- SYSTEM Section -->226 <div class="section" style="top: 0; position: absolute; width: 100%; transform: translateY(0); margin-top: 0; left: 0; right: 0; padding-top: 36px;"></div>227 <div class="section" style="position: absolute; top: 474px; left: 0; width: 100%;">228 <div class="section-title">SYSTEM</div>229 <div class="rows">230 231 <div class="setting-row">232 <div class="left">233 <div class="ico">234 <!-- Globe icon -->235 <svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">236 <g fill="none" stroke="#fff" stroke-width="3.8">237 <circle cx="35" cy="35" r="28"/>238 <path d="M7 35h56"/>239 <path d="M35 7c12 10 12 46 0 56"/>240 <path d="M35 7c-12 10-12 46 0 56"/>241 </g>242 </svg>243 </div>244 <div class="label">Languages</div>245 </div>246 </div>247 248 <div class="setting-row">249 <div class="left">250 <div class="ico">251 <!-- Measuring cup -->252 <svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">253 <g fill="none" stroke="#fff" stroke-width="3.8" stroke-linejoin="round">254 <path d="M20 15h24c4 0 6 3 6 7v24c0 6-4 10-10 10H24c-6 0-10-4-10-10V22c0-4 3-7 6-7z"/>255 <path d="M44 22h10v8c0 6-4 10-10 10"/>256 <path d="M26 24h10M26 30h10M26 36h10"/>257 </g>258 </svg>259 </div>260 <div class="label">Measurement System</div>261 </div>262 </div>263 264 <div class="setting-row">265 <div class="left">266 <div class="ico">267 <!-- Autoplay icon -->268 <svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">269 <g fill="none" stroke="#fff" stroke-width="3.8" stroke-linecap="round">270 <circle cx="30" cy="35" r="16"/>271 <polygon points="26,27 42,35 26,43" fill="#fff" stroke="none"/>272 <path d="M50 20l8 2-3-8"/>273 </g>274 </svg>275 </div>276 <div class="label">Video autoplay</div>277 </div>278 </div>279 280 <div class="setting-row">281 <div class="left">282 <div class="ico">283 <!-- Bell icon -->284 <svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">285 <g fill="none" stroke="#fff" stroke-width="3.8" stroke-linecap="round">286 <path d="M35 58c5 0 9-4 9-9H26c0 5 4 9 9 9z"/>287 <path d="M18 46h34c-4-6-6-10-6-18 0-8-6-12-11-12s-11 4-11 12c0 8-2 12-6 18z"/>288 </g>289 </svg>290 </div>291 <div class="label">Notifications</div>292 </div>293 </div>294 295 <div class="setting-row">296 <div class="left">297 <div class="ico">298 <!-- Display icon -->299 <svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">300 <g fill="none" stroke="#fff" stroke-width="3.8">301 <circle cx="35" cy="35" r="24"/>302 <path d="M35 11v48" />303 </g>304 </svg>305 </div>306 <div class="label">Display</div>307 </div>308 </div>309 310 </div>311 </div>312 313 <!-- APPLIANCES Section -->314 <div class="section" style="position: absolute; top: 1080px; left: 0; width: 100%;">315 <div class="section-title">APPLIANCES</div>316 <div class="rows">317 <div class="setting-row">318 <div class="left">319 <div class="ico">320 <!-- Home connect icon -->321 <svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">322 <g fill="none" stroke="#fff" stroke-width="3.8" stroke-linejoin="round">323 <path d="M18 36l17-12 17 12v16H18z"/>324 <path d="M28 52v-8h14v8"/>325 <path d="M16 25l19-13 19 13"/>326 <path d="M12 48c0 8 4 11 11 11"/>327 </g>328 </svg>329 </div>330 <div class="label">Home Connect</div>331 </div>332 <div class="toggle"></div>333 </div>334 </div>335 </div>336 337 <!-- MORE Section -->338 <div class="section" style="position: absolute; top: 1400px; left: 0; width: 100%;">339 <div class="section-title">MORE</div>340 <div class="rows">341 <div class="setting-row">342 <div class="left">343 <div class="ico">344 <!-- Document icon -->345 <svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">346 <g fill="none" stroke="#fff" stroke-width="3.8" stroke-linejoin="round">347 <path d="M22 14h22l10 10v32H22z"/>348 <path d="M54 24H44V14"/>349 <path d="M28 34h20M28 42h20M28 50h20"/>350 </g>351 </svg>352 </div>353 <div class="label">Recipe creation FAQs</div>354 </div>355 </div>356 357 <div class="setting-row">358 <div class="left">359 <div class="ico">360 <!-- Info icon -->361 <svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">362 <g fill="none" stroke="#fff" stroke-width="3.8" stroke-linecap="round">363 <circle cx="35" cy="35" r="26"/>364 <path d="M35 30v18"/>365 <circle cx="35" cy="22" r="3" fill="#fff" stroke="none"/>366 </g>367 </svg>368 </div>369 <div class="label">About us</div>370 </div>371 </div>372 </div>373 </div>374 375 <!-- Bottom Home Indicator -->376 <div class="home-indicator"></div>377</div>378</body>379</html>