GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Settings Screen</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 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0A0A0A;13 color: #fff;14 }15 16 /* Generic */17 .screen-padding { padding: 36px; }18 .section-title {19 color: #c9c9c9;20 font-weight: 800;21 letter-spacing: 3px;22 font-size: 36px;23 margin: 18px 0 8px 0;24 }25 .divider { height: 1px; background: #242424; margin: 20px 0; }26 27 /* Promo */28 .promo {29 width: 100%;30 height: 430px;31 background: linear-gradient(90deg, #f3d79a, #f0bf9f, #f0b0b0);32 display: flex;33 flex-direction: column;34 justify-content: center;35 align-items: center;36 padding: 40px 60px;37 box-sizing: border-box;38 }39 .promo .copy {40 color: #2b2b2b;41 font-size: 42px;42 line-height: 1.3;43 text-align: center;44 font-weight: 700;45 max-width: 940px;46 margin-bottom: 26px;47 }48 .promo .cta {49 background: #2f8b60;50 color: #eaffef;51 padding: 28px 60px;52 border-radius: 80px;53 font-size: 48px;54 font-weight: 800;55 letter-spacing: 1px;56 }57 58 /* Rows */59 .row {60 display: flex;61 align-items: center;62 height: 140px;63 border-bottom: 1px solid #1d1d1d;64 }65 .row .left {66 display: flex;67 align-items: center;68 gap: 28px;69 flex: 1;70 }71 .row .title {72 font-size: 44px;73 font-weight: 700;74 }75 .row .sub {76 font-size: 40px;77 color: #b5b5b5;78 }79 .row .right {80 font-size: 44px;81 color: #bfbfbf;82 }83 84 /* Small button */85 .pill-btn {86 display: inline-block;87 background: #f3cc4a;88 color: #000;89 font-weight: 800;90 border-radius: 60px;91 padding: 24px 40px;92 font-size: 40px;93 margin-top: 26px;94 }95 96 /* Icons */97 .icon {98 width: 84px;99 height: 84px;100 display: inline-flex;101 align-items: center;102 justify-content: center;103 color: #fff;104 }105 .icon svg { width: 84px; height: 84px; fill: none; stroke: #ffffff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }106 107 /* Toggle */108 .toggle {109 width: 140px;110 height: 64px;111 background: #3a3a3a;112 border-radius: 40px;113 position: relative;114 }115 .toggle .knob {116 width: 60px;117 height: 60px;118 background: #a9a9a9;119 border-radius: 50%;120 position: absolute;121 right: 8px;122 top: 2px;123 }124 125 /* Spacing tweaks */126 .mt-8 { margin-top: 8px; }127 .mt-16 { margin-top: 16px; }128</style>129</head>130<body>131<div id="render-target">132 133 <!-- Promo Banner -->134 <div class="promo">135 <div class="copy">Search, collect, and save unlimited recipes from all around the web to your Kitchen Stories cookbooks.</div>136 <div class="cta">Unlock cookbook+</div>137 </div>138 139 <div class="screen-padding">140 <!-- ACCOUNT -->141 <div class="section-title">ACCOUNT</div>142 143 <div class="row" style="border-bottom:none; height: 120px;">144 <div class="left">145 <div class="title" style="font-size:48px;">Current Plan</div>146 </div>147 <div class="right">Free</div>148 </div>149 150 <div class="pill-btn">TRY COOKBOOK+</div>151 152 <div class="divider"></div>153 154 <!-- SYSTEM -->155 <div class="section-title">SYSTEM</div>156 157 <div class="row">158 <div class="left">159 <div class="icon">160 <!-- Globe -->161 <svg viewBox="0 0 24 24">162 <circle cx="12" cy="12" r="9"></circle>163 <path d="M3 12h18"></path>164 <path d="M12 3c3 3 3 15 0 18"></path>165 <path d="M12 3c-3 3-3 15 0 18"></path>166 </svg>167 </div>168 <div class="title">Languages</div>169 </div>170 </div>171 172 <div class="row">173 <div class="left">174 <div class="icon">175 <!-- Beaker -->176 <svg viewBox="0 0 24 24">177 <path d="M7 3h10"></path>178 <path d="M9 3v5l-4 9a3 3 0 0 0 3 4h8a3 3 0 0 0 3-4l-4-9V3"></path>179 <path d="M8 14h8"></path>180 </svg>181 </div>182 <div class="title">Measurement System</div>183 </div>184 </div>185 186 <div class="row">187 <div class="left">188 <div class="icon">189 <!-- Play -->190 <svg viewBox="0 0 24 24">191 <circle cx="12" cy="12" r="9"></circle>192 <path d="M10 8l6 4-6 4z" fill="#ffffff" stroke="none"></path>193 </svg>194 </div>195 <div class="title">Video autoplay</div>196 </div>197 </div>198 199 <div class="row">200 <div class="left">201 <div class="icon">202 <!-- Bell -->203 <svg viewBox="0 0 24 24">204 <path d="M18 16v-5a6 6 0 0 0-12 0v5"></path>205 <path d="M5 16h14"></path>206 <path d="M9 19a3 3 0 0 0 6 0"></path>207 </svg>208 </div>209 <div class="title">Notifications</div>210 </div>211 </div>212 213 <div class="row" style="border-bottom: 1px solid #1d1d1d;">214 <div class="left">215 <div class="icon">216 <!-- Half display -->217 <svg viewBox="0 0 24 24">218 <circle cx="12" cy="12" r="9"></circle>219 <path d="M12 3v18"></path>220 </svg>221 </div>222 <div class="title">Display</div>223 </div>224 </div>225 226 <div class="divider"></div>227 228 <!-- APPLIANCES -->229 <div class="section-title">APPLIANCES</div>230 231 <div class="row" style="border-bottom:none;">232 <div class="left">233 <div class="icon">234 <!-- Home -->235 <svg viewBox="0 0 24 24">236 <path d="M3 11l9-7 9 7"></path>237 <path d="M5 10v9h14v-9"></path>238 </svg>239 </div>240 <div class="title">Home Connect</div>241 </div>242 <div class="right">243 <div class="toggle">244 <div class="knob"></div>245 </div>246 </div>247 </div>248 249 <div class="divider"></div>250 251 <!-- MORE -->252 <div class="section-title">MORE</div>253 </div>254 255</div>256</body>257</html>