GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Account Settings Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f1920;13    color: #E6EDF3;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    right: 0;22    height: 80px;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #DDE6EC;28    font-size: 34px;29    opacity: 0.9;30  }31  .status-right {32    display: flex;33    gap: 18px;34    align-items: center;35  }36  .icon-dot {37    width: 10px;38    height: 10px;39    background: #C9D3DA;40    border-radius: 50%;41  }42  .battery {43    width: 48px;44    height: 24px;45    border: 3px solid #C9D3DA;46    border-radius: 6px;47    position: relative;48  }49  .battery::after {50    content: "";51    position: absolute;52    right: -8px;53    top: 5px;54    width: 6px;55    height: 14px;56    background: #C9D3DA;57    border-radius: 2px;58  }59  .battery-level {60    position: absolute;61    left: 3px;62    top: 3px;63    bottom: 3px;64    width: 70%;65    background: #C9D3DA;66    border-radius: 2px;67  }68 69  /* App header */70  .app-bar {71    position: absolute;72    top: 80px;73    left: 0;74    right: 0;75    height: 120px;76    display: flex;77    align-items: center;78    justify-content: center;79    color: #CFE3EF;80  }81  .app-title {82    font-weight: 700;83    font-size: 56px;84    letter-spacing: 1px;85  }86  .action-save {87    position: absolute;88    right: 36px;89    top: 34px;90    color: #59A7FF;91    font-weight: 700;92    font-size: 48px;93    letter-spacing: 1px;94  }95  .action-close {96    position: absolute;97    left: 24px;98    top: 34px;99    width: 64px;100    height: 64px;101  }102 103  /* Content */104  .content {105    position: absolute;106    top: 220px;107    left: 0;108    right: 0;109    bottom: 0;110    padding: 0 48px 48px 48px;111    overflow: hidden;112  }113 114  .avatar-wrap {115    display: flex;116    flex-direction: column;117    align-items: center;118    margin-top: 40px;119    margin-bottom: 40px;120  }121  .avatar {122    width: 240px;123    height: 240px;124    border-radius: 50%;125    background: #523B34;126    display: flex;127    align-items: center;128    justify-content: center;129    font-size: 140px;130    font-weight: 700;131    color: #FFFFFF;132    box-shadow: 0 0 0 6px rgba(255,255,255,0.04) inset;133  }134  .change-avatar {135    margin-top: 28px;136    color: #5AB0FF;137    font-weight: 800;138    font-size: 44px;139    letter-spacing: 1px;140  }141 142  .label {143    color: #8CA1AD;144    font-size: 38px;145    margin: 28px 8px 16px 8px;146  }147  .input {148    width: 100%;149    height: 120px;150    border-radius: 28px;151    background: #15232A;152    border: 2px solid #23343D;153    color: #DDE6EC;154    font-size: 46px;155    padding: 0 36px;156    display: flex;157    align-items: center;158    box-sizing: border-box;159  }160  .dot-pass {161    letter-spacing: 8px;162  }163 164  .btn-outline {165    width: 100%;166    height: 120px;167    border-radius: 28px;168    background: #132127;169    border: 2px solid #2B3C45;170    color: #5AB0FF;171    font-size: 44px;172    font-weight: 800;173    letter-spacing: 2px;174    display: flex;175    align-items: center;176    justify-content: center;177    margin-top: 26px;178  }179 180  .section-title {181    margin-top: 36px;182    font-size: 58px;183    font-weight: 800;184    color: #DDE6EC;185  }186 187  .row {188    margin-top: 28px;189    display: flex;190    align-items: center;191    justify-content: space-between;192  }193  .row .title {194    font-size: 48px;195    color: #E3EDF4;196  }197 198  /* Toggle */199  .toggle {200    width: 220px;201    height: 88px;202    background: #3FA2FF;203    border-radius: 44px;204    position: relative;205    box-shadow: inset 0 0 0 6px rgba(255,255,255,0.06);206  }207  .toggle .knob {208    position: absolute;209    right: 4px;210    top: 4px;211    width: 80px;212    height: 80px;213    background: #FFFFFF;214    border-radius: 50%;215  }216 217  /* subtle separators */218  .spacer { height: 10px; }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- Status bar -->225  <div class="status-bar">226    <div>5:52</div>227    <div class="status-right">228      <div class="icon-dot"></div>229      <div class="icon-dot"></div>230      <div class="battery">231        <div class="battery-level"></div>232      </div>233      <div style="font-size:32px;">96%</div>234    </div>235  </div>236 237  <!-- App header -->238  <div class="app-bar">239    <div class="app-title">Account</div>240    <div class="action-save">SAVE</div>241    <svg class="action-close" viewBox="0 0 24 24">242      <path d="M5 5 L19 19 M19 5 L5 19" stroke="#CFE3EF" stroke-width="2.5" stroke-linecap="round"/>243    </svg>244  </div>245 246  <!-- Content area -->247  <div class="content">248    <div class="avatar-wrap">249      <div class="avatar">F</div>250      <div class="change-avatar">CHANGE AVATAR</div>251    </div>252 253    <div class="label">Name</div>254    <div class="input">Fabio Teixeira</div>255 256    <div class="label">Username</div>257    <div class="input">FabioTeixe5546</div>258 259    <div class="label">Email</div>260    <div class="input">fabioteixeira00123@gmail.com</div>261 262    <div class="label">Password</div>263    <div class="input dot-pass">••••••••</div>264 265    <div class="btn-outline">DUOLINGO FOR SCHOOLS</div>266    <div class="btn-outline">SIGN OUT</div>267 268    <div class="section-title">General</div>269 270    <div class="row">271      <div class="title">Sound effects</div>272      <div class="toggle">273        <div class="knob"></div>274      </div>275    </div>276 277  </div>278 279</div>280</body>281</html>