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 Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #fff; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: linear-gradient(180deg, #2FA7FF 0%, #2B6DFF 35%, #5A40D8 70%, #5A2EAD 100%);12 border-radius: 38px; box-shadow: 0 30px 80px rgba(0,0,0,0.35);13 }14 15 .header {16 position: absolute; left: 0; right: 0; top: 96px; height: 120px;17 display: flex; align-items: center; justify-content: center;18 }19 .close-btn {20 position: absolute; left: 48px; top: 18px; width: 100px; height: 100px;21 border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff;22 font-size: 76px; line-height: 76px; opacity: 0.9;23 }24 .header-title {25 font-weight: 700; font-size: 60px; letter-spacing: 0.5px;26 }27 28 .profile {29 position: absolute; top: 300px; left: 0; right: 0; text-align: center;30 }31 .avatar {32 margin: 0 auto; width: 240px; height: 240px; border-radius: 50%;33 background: #5b3b2e; display: flex; align-items: center; justify-content: center;34 font-size: 140px; font-weight: 700; color: #fff;35 box-shadow: 0 12px 30px rgba(0,0,0,0.25);36 }37 .profile-name {38 margin-top: 30px; font-size: 54px; font-weight: 600; opacity: 0.95;39 }40 .divider {41 width: 80%; height: 2px; margin: 40px auto 0; background: rgba(255,255,255,0.25);42 }43 44 .actions {45 position: absolute; left: 60px; right: 60px; top: 760px; display: flex; gap: 40px;46 }47 .btn-primary {48 flex: 1; height: 120px; border-radius: 60px; font-size: 44px; font-weight: 700;49 display: flex; align-items: center; justify-content: center;50 background: linear-gradient(180deg, #ff42c6 0%, #b233ff 100%);51 box-shadow: 0 16px 40px rgba(0,0,0,0.30);52 }53 .btn-outline {54 flex: 1; height: 120px; border-radius: 60px; font-size: 44px; font-weight: 700;55 display: flex; align-items: center; justify-content: center;56 border: 3px solid rgba(255,255,255,0.6); color: #fff; background: transparent;57 }58 59 /* Language section */60 .lang-section {61 position: absolute; left: 0; right: 0; top: 980px; padding: 60px;62 background: linear-gradient(180deg, rgba(57,77,231,0.45) 0%, rgba(96,39,186,0.65) 100%);63 }64 .lang-title {65 font-size: 52px; font-weight: 700; margin-bottom: 40px;66 }67 .card-row {68 display: flex; gap: 36px; padding-right: 60px;69 }70 .lang-card {71 width: 318px; height: 460px; border-radius: 30px; position: relative; padding: 28px;72 background: rgba(255,255,255,0.08); border: 3px solid rgba(255,255,255,0.85);73 box-shadow: 0 14px 30px rgba(0,0,0,0.25);74 }75 .lang-card.dark {76 background: linear-gradient(180deg, #163E9D 0%, #0E2D78 100%);77 border: 3px solid #ffffff;78 }79 .lang-name { font-size: 48px; font-weight: 800; margin-top: 20px; }80 .lang-meta { margin-top: 18px; font-size: 34px; opacity: 0.95; }81 .progress {82 width: 85%; height: 8px; background: rgba(255,255,255,0.25); border-radius: 8px; margin-top: 16px;83 }84 .progress > span { display: block; width: 44%; height: 100%; background: #ff7f50; border-radius: 8px; }85 .check-badge {86 position: absolute; left: 26px; bottom: 26px; width: 40px; height: 40px; border-radius: 50%;87 background: #1BCB6B; display: flex; align-items: center; justify-content: center;88 }89 .check-badge svg { width: 26px; height: 26px; }90 .edit-icon {91 position: absolute; right: 26px; bottom: 26px; width: 44px; height: 44px; border-radius: 10px;92 background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center;93 }94 .edit-icon svg { width: 26px; height: 26px; }95 96 .promo-card {97 width: 318px; height: 460px; border-radius: 30px; padding: 28px;98 background: linear-gradient(180deg, #F6B833 0%, #E78F0C 100%); border: 3px solid rgba(255,255,255,0.85);99 color: #1a1a1a; position: relative;100 }101 .promo-card .img {102 width: 100%; height: 190px; background: #E0E0E0; border: 1px solid #BDBDBD;103 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 18px;104 }105 .promo-text { font-weight: 800; font-size: 40px; margin-top: 26px; line-height: 1.15; text-align: center; color: #14244a; }106 .promo-btn {107 position: absolute; left: 28px; right: 28px; bottom: 24px; height: 96px; border-radius: 48px;108 background: linear-gradient(180deg, #ff42c6 0%, #b233ff 100%);109 display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 40px;110 box-shadow: 0 12px 28px rgba(0,0,0,0.25);111 }112 113 .add-card {114 width: 318px; height: 460px; border-radius: 30px; padding: 28px;115 background: linear-gradient(180deg, #6D53E2 0%, #5933B4 100%); border: 3px solid rgba(255,255,255,0.35);116 display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px;117 opacity: 0.95;118 }119 .plus-circle {120 width: 140px; height: 140px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.9);121 display: flex; align-items: center; justify-content: center;122 }123 .plus-circle svg { width: 70px; height: 70px; }124 .add-text { font-size: 40px; font-weight: 700; text-align: center; }125 126 /* Settings list */127 .settings-list {128 position: absolute; left: 0; right: 0; top: 1600px; padding: 40px 60px 140px;129 background: linear-gradient(180deg, rgba(76,32,173,0.95) 0%, rgba(86,34,176,0.9) 100%);130 }131 .setting-row {132 height: 140px; display: flex; align-items: center; justify-content: space-between;133 border-bottom: 1px solid rgba(255,255,255,0.15);134 }135 .left {136 display: flex; align-items: center; gap: 30px;137 }138 .icon-circle {139 width: 96px; height: 96px; border-radius: 48px; background: rgba(255,255,255,0.18);140 display: flex; align-items: center; justify-content: center;141 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1);142 }143 .label { font-size: 44px; font-weight: 700; }144 .chevron {145 width: 28px; height: 28px; margin-right: 10px;146 }147 148 .toggle {149 width: 140px; height: 72px; border-radius: 36px; position: relative;150 background: #e9e9ea;151 }152 .toggle .knob {153 width: 64px; height: 64px; border-radius: 50%; background: #ffffff;154 position: absolute; top: 4px; left: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.25);155 transition: left 0.2s ease;156 }157 .toggle.on { background: #27c461; }158 .toggle.on .knob { left: 72px; }159 160 /* Home indicator */161 .home-indicator {162 position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);163 width: 360px; height: 14px; background: rgba(255,255,255,0.9); border-radius: 7px;164 }165</style>166</head>167<body>168<div id="render-target">169 170 <div class="header">171 <div class="close-btn">×</div>172 <div class="header-title">Settings</div>173 </div>174 175 <div class="profile">176 <div class="avatar">F</div>177 <div class="profile-name">Fabio</div>178 <div class="divider"></div>179 </div>180 181 <div class="actions">182 <div class="btn-primary">My Account</div>183 <div class="btn-outline">Go Premium</div>184 </div>185 186 <div class="lang-section">187 <div class="lang-title">Select your language:</div>188 <div class="card-row">189 190 <!-- Portuguese card -->191 <div class="lang-card dark">192 <div style="display:flex; align-items:center; gap:10px;">193 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">194 <path d="M12 21c4.97 0 9-3.58 9-8s-4.03-8-9-8-9 3.58-9 8c0 2.63 1.39 4.98 3.6 6.49L6 22l4.02-1.48c.63.13 1.3.2 1.98.2z" stroke="#FFFFFF" stroke-width="1.6" opacity="0.9"/>195 </svg>196 <span style="font-size:34px; opacity:0.9;">Chat</span>197 </div>198 <div class="lang-name">Portuguese</div>199 <div class="lang-meta">Level 2</div>200 <div class="progress"><span></span></div>201 <div class="lang-meta" style="margin-top:18px;">47 points</div>202 <div class="lang-meta">1 days</div>203 <div class="check-badge">204 <svg viewBox="0 0 24 24" fill="none">205 <path d="M5 13l4 4L19 7" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>206 </svg>207 </div>208 <div class="edit-icon">209 <svg viewBox="0 0 24 24" fill="none">210 <path d="M4 20l4-1 9-9-3-3-9 9-1 4zM14 5l3 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>211 </svg>212 </div>213 </div>214 215 <!-- Promo card -->216 <div class="promo-card">217 <div class="img">[IMG: Language icons collage]</div>218 <div class="promo-text">Get access<br>to all<br>languages</div>219 <div class="promo-btn">See more</div>220 </div>221 222 <!-- Add new language card -->223 <div class="add-card">224 <div class="plus-circle">225 <svg viewBox="0 0 24 24" fill="none">226 <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round"/>227 </svg>228 </div>229 <div class="add-text">Add a new<br>language</div>230 </div>231 232 </div>233 </div>234 235 <!-- Settings options -->236 <div class="settings-list">237 <div class="setting-row">238 <div class="left">239 <div class="icon-circle">240 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">241 <path d="M18 10a6 6 0 10-12 0c0 6-3 6-3 6h18s-3 0-3-6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>242 <path d="M9 19c1.5 1 4.5 1 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.8"/>243 </svg>244 </div>245 <div class="label">Learning reminders</div>246 </div>247 <svg class="chevron" viewBox="0 0 24 24" fill="none">248 <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>249 </svg>250 </div>251 252 <div class="setting-row">253 <div class="left">254 <div class="icon-circle">255 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">256 <path d="M9 18V5l8 2v13" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>257 <path d="M5 19a2 2 0 100-4 2 2 0 000 4z" stroke="#fff" stroke-width="2" opacity="0.9"/>258 </svg>259 </div>260 <div class="label">Sound effects</div>261 </div>262 <div class="toggle">263 <div class="knob"></div>264 </div>265 </div>266 267 <div class="setting-row">268 <div class="left">269 <div class="icon-circle">270 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">271 <path d="M4 10v4h4l5 5V5L8 10H4z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>272 <path d="M16 8.5a3.5 3.5 0 010 7" stroke="#fff" stroke-width="2" opacity="0.8" stroke-linecap="round"/>273 </svg>274 </div>275 <div class="label">Auto play voice</div>276 </div>277 <div class="toggle on">278 <div class="knob"></div>279 </div>280 </div>281 282 <div class="setting-row">283 <div class="left">284 <div class="icon-circle">285 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">286 <circle cx="12" cy="12" r="8" stroke="#fff" stroke-width="2" opacity="0.9"/>287 <path d="M8.5 12.5l2.3 2.3L15.5 10" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>288 </svg>289 </div>290 <div class="label">Auto check answer</div>291 </div>292 <div class="toggle">293 <div class="knob"></div>294 </div>295 </div>296 </div>297 298 <div class="home-indicator"></div>299</div>300</body>301</html>