GD-ML/AndroidCode

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: "Inter", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: linear-gradient(180deg, #2FA7FF 0%, #3D6BFF 45%, #6F2BD4 100%);12    color: #fff;13  }14  .content { position: absolute; left: 40px; right: 40px; top: 60px; }15 16  /* Header */17  .header { display: flex; align-items: center; height: 120px; }18  .icon-btn { width: 80px; height: 80px; border: none; background: transparent; padding: 0; cursor: default; }19  .icon-btn svg { width: 48px; height: 48px; stroke: #fff; stroke-width: 6; }20  .title { flex: 1; text-align: center; font-size: 52px; font-weight: 700; letter-spacing: 0.5px; }21 22  /* Profile */23  .profile { display: flex; flex-direction: column; align-items: center; margin-top: 30px; }24  .avatar { width: 220px; height: 220px; border-radius: 50%; background: #5a3a2e; display: flex; align-items: center; justify-content: center; font-size: 120px; font-weight: 700; }25  .name { margin-top: 26px; font-size: 42px; font-weight: 600; }26  .divider { width: 88%; height: 2px; background: rgba(255,255,255,0.25); margin: 28px auto 24px; border-radius: 2px; }27 28  .actions { display: flex; gap: 28px; justify-content: center; }29  .btn {30    min-width: 320px; height: 100px; border-radius: 50px; font-size: 36px; font-weight: 700;31    border: 2px solid rgba(255,255,255,0.6); color: #fff; background: transparent;32  }33  .btn-primary {34    background: linear-gradient(180deg, #FF4EC3 0%, #C63BFF 100%);35    border: none; box-shadow: 0 12px 20px rgba(0,0,0,0.25);36  }37 38  /* Language section */39  .lang-section { margin-top: 70px; }40  .lang-title { font-size: 40px; font-weight: 700; margin-bottom: 26px; }41  .cards { display: flex; gap: 30px; }42  .card {43    width: 320px; height: 430px; border-radius: 36px;44    background: rgba(255,255,255,0.12); border: 3px solid rgba(255,255,255,0.7);45    box-shadow: 0 12px 24px rgba(0,0,0,0.2); position: relative; padding: 26px;46  }47  .card1 { background: linear-gradient(180deg, #163A83 0%, #0E2A62 100%); color: #fff; }48  .flag-placeholder {49    position: absolute; right: 22px; top: 22px; width: 100px; height: 70px;50    background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 10px;51  }52  .card1 .title { font-size: 42px; font-weight: 800; margin-top: 46px; }53  .level { margin-top: 16px; font-size: 28px; opacity: 0.95; }54  .progress { width: 100%; height: 8px; background: rgba(255,255,255,0.25); border-radius: 6px; margin: 12px 0 16px; overflow: hidden; }55  .progress .bar { width: 50%; height: 100%; background: #FF7A66; }56  .stats { font-size: 26px; line-height: 36px; opacity: 0.95; }57  .badge { position: absolute; left: 22px; bottom: 20px; width: 36px; height: 36px; border-radius: 18px; background: #33d17a; display: flex; align-items: center; justify-content: center; }58  .pencil { position: absolute; right: 22px; bottom: 20px; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; }59 60  .card2 { background: linear-gradient(180deg, #FFCA4D 0%, #FF9F2E 100%); color: #00213A; border-color: rgba(255,255,255,0.9); }61  .card2 .all-text { font-size: 36px; font-weight: 800; line-height: 46px; margin-top: 110px; text-align: center; }62  .see-more { position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px;63    width: 220px; height: 86px; border-radius: 44px; background: linear-gradient(180deg, #A246FF 0%, #7A2DF3 100%);64    color: #fff; font-size: 34px; font-weight: 800; border: none;65    box-shadow: 0 12px 20px rgba(0,0,0,0.25);66  }67  .card2 .icons-placeholder {68    position: absolute; top: 22px; left: 22px; right: 22px; height: 90px;69    background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 12px;70  }71 72  .card3 { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; text-align: center; }73  .card3 .plus {74    width: 120px; height: 120px; border-radius: 60px; border: 3px solid rgba(255,255,255,0.7);75    display: flex; align-items: center; justify-content: center; margin-bottom: 18px;76  }77  .card3 .plus svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 10; }78  .card3 .txt { font-size: 32px; color: rgba(255,255,255,0.9); }79 80  /* Settings list */81  .settings-wrap {82    margin-top: 50px; padding-bottom: 140px;83    background: linear-gradient(180deg, rgba(84,50,192,0.45) 0%, rgba(84,50,192,0.0) 100%);84    border-radius: 36px;85  }86  .item { height: 140px; display: flex; align-items: center; padding: 0 20px 0 12px; border-bottom: 1px solid rgba(255,255,255,0.15); }87  .item:last-child { border-bottom: none; }88  .icon-wrap {89    width: 100px; height: 100px; margin-left: 8px; margin-right: 26px; border-radius: 50px;90    background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center;91  }92  .icon-wrap svg { width: 52px; height: 52px; fill: none; stroke: #fff; stroke-width: 6; }93  .item-label { font-size: 38px; font-weight: 600; flex: 1; }94 95  /* Toggle */96  .toggle {97    width: 120px; height: 60px; border-radius: 30px; position: relative;98    background: #bdbdbd; transition: all .2s ease; box-shadow: inset 0 2px 10px rgba(0,0,0,0.25);99  }100  .toggle span {101    position: absolute; width: 54px; height: 54px; border-radius: 27px; background: #fff; top: 3px; left: 3px;102    box-shadow: 0 6px 10px rgba(0,0,0,0.25); transition: all .2s ease;103  }104  .toggle.on { background: #2ecc71; }105  .toggle.on span { left: 63px; }106  .toggle.disabled { opacity: 0.65; }107 108  /* Home indicator */109  .home-indicator {110    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);111    width: 400px; height: 12px; border-radius: 8px; background: rgba(255,255,255,0.65);112  }113</style>114</head>115<body>116<div id="render-target">117  <div class="content">118    <div class="header">119      <button class="icon-btn" aria-label="Close">120        <svg viewBox="0 0 24 24"><path d="M4 4L20 20M20 4L4 20"/></svg>121      </button>122      <div class="title">Settings</div>123      <div style="width:80px;"></div>124    </div>125 126    <div class="profile">127      <div class="avatar">F</div>128      <div class="name">Fabio</div>129      <div class="divider"></div>130      <div class="actions">131        <button class="btn btn-primary">My Account</button>132        <button class="btn">Go Premium</button>133      </div>134    </div>135 136    <div class="lang-section">137      <div class="lang-title">Select your language:</div>138      <div class="cards">139        <div class="card card1">140          <div class="flag-placeholder">[IMG: Brazil flag]</div>141          <div class="title">Portuguese</div>142          <div class="level">Level 2</div>143          <div class="progress"><div class="bar"></div></div>144          <div class="stats">47 points<br>1 days</div>145          <div class="badge">146            <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="4" fill="none"/></svg>147          </div>148          <div class="pencil">149            <svg viewBox="0 0 24 24"><path d="M3 17l2.5 4L9 19l10-10-4-4L5 15l-2 2z" fill="#fff"/></svg>150          </div>151        </div>152 153        <div class="card card2">154          <div class="icons-placeholder">[IMG: Flags of multiple languages]</div>155          <div class="all-text">Get access<br>to all<br>languages</div>156          <button class="see-more">See more</button>157        </div>158 159        <div class="card card3">160          <div>161            <div class="plus">162              <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>163            </div>164            <div class="txt">Add a new<br>language</div>165          </div>166        </div>167      </div>168    </div>169 170    <div class="settings-wrap">171      <div class="item">172        <div class="icon-wrap">173          <svg viewBox="0 0 24 24"><path d="M12 2v4M12 18v4M4.2 7.8l2.8 2.2M17 14l2.8 2.2M2 12h4M18 12h4M6.2 16.2l2.8-2.2M14.8 9.8l2.8-2.2"/></svg>174        </div>175        <div class="item-label">Learning reminders</div>176      </div>177 178      <div class="item">179        <div class="icon-wrap">180          <svg viewBox="0 0 24 24"><path d="M12 4v16M6 8v8M18 10v4"/></svg>181        </div>182        <div class="item-label">Sound effects</div>183        <div class="toggle on"><span></span></div>184      </div>185 186      <div class="item">187        <div class="icon-wrap">188          <svg viewBox="0 0 24 24"><path d="M4 9v6l4-2 4 2 8-4V7l-8 4-4-2-4 2z"/></svg>189        </div>190        <div class="item-label">Auto play voice</div>191        <div class="toggle on"><span></span></div>192      </div>193 194      <div class="item">195        <div class="icon-wrap">196          <svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" /></svg>197        </div>198        <div class="item-label">Auto check answer</div>199        <div class="toggle"><span></span></div>200      </div>201    </div>202  </div>203 204  <div class="home-indicator"></div>205</div>206</body>207</html>