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>Account Settings UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #333; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #666;25    font-size: 36px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 24px;31  }32  .icon {33    width: 36px;34    height: 36px;35  }36 37  /* Top navigation */38  .top-nav {39    height: 120px;40    display: flex;41    align-items: center;42    justify-content: center;43    position: relative;44    border-bottom: 0;45  }46  .nav-title {47    font-size: 48px;48    font-weight: 700;49    color: #666;50  }51  .nav-action {52    position: absolute;53    right: 36px;54    font-size: 42px;55    font-weight: 700;56    color: #18A8FF;57    letter-spacing: 0.5px;58  }59  .nav-back {60    position: absolute;61    left: 24px;62    width: 80px;63    height: 80px;64    display: flex;65    align-items: center;66    justify-content: center;67  }68  .nav-back svg { width: 44px; height: 44px; stroke: #999; stroke-width: 6; }69 70  /* Content */71  .content {72    padding: 20px 48px 140px 48px;73  }74  .avatar-wrap {75    display: flex;76    flex-direction: column;77    align-items: center;78    margin-top: 40px;79    margin-bottom: 24px;80  }81  .avatar {82    width: 200px;83    height: 200px;84    border-radius: 50%;85    border: 8px dashed #8EA0AA;86    color: #5E6E75;87    font-size: 96px;88    font-weight: 700;89    display: flex;90    align-items: center;91    justify-content: center;92  }93  .change-avatar {94    margin-top: 28px;95    font-size: 44px;96    font-weight: 800;97    color: #14A9FF;98  }99 100  .section-label {101    margin-top: 40px;102    margin-bottom: 18px;103    font-size: 40px;104    font-weight: 800;105    color: #9E9E9E;106  }107  .input {108    height: 128px;109    border-radius: 36px;110    border: 2px solid #E3E6E8;111    background: #F4F5F7;112    display: flex;113    align-items: center;114    padding: 0 36px;115    font-size: 42px;116    color: #333;117    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);118  }119  .dots {120    letter-spacing: 8px;121    font-size: 64px;122  }123 124  .pill-btn {125    height: 128px;126    border-radius: 36px;127    border: 2px solid #E3E6E8;128    background: #FFFFFF;129    display: flex;130    align-items: center;131    justify-content: center;132    margin-top: 34px;133    font-size: 42px;134    font-weight: 800;135    color: #14A9FF;136    letter-spacing: 0.5px;137    text-transform: uppercase;138  }139 140  .subheader {141    margin-top: 56px;142    font-size: 52px;143    font-weight: 800;144    color: #4A4A4A;145  }146 147  .card {148    margin-top: 24px;149    background: #FFFFFF;150    border: 2px solid #E3E6E8;151    border-radius: 36px;152    padding: 36px;153    display: flex;154    align-items: center;155    justify-content: space-between;156  }157  .card-title {158    font-size: 42px;159    color: #666;160  }161 162  /* Toggle */163  .toggle {164    width: 150px;165    height: 80px;166    border-radius: 40px;167    background: #10B8FF;168    position: relative;169    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.05);170  }171  .toggle::after {172    content: "";173    position: absolute;174    right: 6px;175    top: 6px;176    width: 68px;177    height: 68px;178    border-radius: 34px;179    background: #FFFFFF;180    box-shadow: 0 2px 6px rgba(0,0,0,0.2);181  }182 183  /* Home indicator */184  .home-indicator {185    position: absolute;186    bottom: 28px;187    left: 50%;188    transform: translateX(-50%);189    width: 300px;190    height: 16px;191    background: #000;192    border-radius: 8px;193    opacity: 0.14;194  }195</style>196</head>197<body>198<div id="render-target">199  <!-- Status bar -->200  <div class="status-bar">201    <div class="status-left">12:11</div>202    <div class="status-right">203      <!-- WiFi icon -->204      <svg class="icon" viewBox="0 0 24 24">205        <path d="M2 8c5-5 15-5 20 0" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>206        <path d="M5 12c3.5-3.5 10.5-3.5 14 0" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>207        <path d="M9 16c2-2 4-2 6 0" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>208        <circle cx="12" cy="19" r="1.5" fill="#666"/>209      </svg>210      <!-- Battery icon -->211      <svg class="icon" viewBox="0 0 26 24">212        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#666" stroke-width="2" fill="none"/>213        <rect x="4" y="8" width="14" height="8" fill="#666"/>214        <rect x="21" y="9" width="3" height="6" rx="1" fill="#666"/>215      </svg>216      <div>100%</div>217    </div>218  </div>219 220  <!-- Top navigation -->221  <div class="top-nav">222    <div class="nav-back">223      <svg viewBox="0 0 24 24">224        <line x1="4" y1="4" x2="20" y2="20" />225        <line x1="20" y1="4" x2="4" y2="20" />226      </svg>227    </div>228    <div class="nav-title">Account</div>229    <div class="nav-action">SAVE</div>230  </div>231 232  <!-- Content -->233  <div class="content">234    <div class="avatar-wrap">235      <div class="avatar">R</div>236      <div class="change-avatar">CHANGE AVATAR</div>237    </div>238 239    <div class="section-label">Name</div>240    <div class="input">Richard Wagner</div>241 242    <div class="section-label">Username</div>243    <div class="input">RichardWag528920</div>244 245    <div class="section-label">Email</div>246    <div class="input">richardwegnar@gmail.com</div>247 248    <div class="section-label">Password</div>249    <div class="input"><span class="dots">••••••••</span></div>250 251    <div class="pill-btn">DUOLINGO FOR SCHOOLS</div>252    <div class="pill-btn">SIGN OUT</div>253 254    <div class="subheader">General</div>255    <div class="card">256      <div class="card-title">Sound effects</div>257      <div class="toggle"></div>258    </div>259  </div>260 261  <div class="home-indicator"></div>262</div>263</body>264</html>