GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Account Settings Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target{9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#0f171b; color:#e6f1f5;12  }13 14  /* Status bar */15  .status-bar{16    position:absolute; left:0; top:0; width:100%; height:70px;17    padding:0 32px; box-sizing:border-box;18    display:flex; align-items:center; justify-content:space-between;19    color:#d8e6ee; font-size:32px; letter-spacing:1px;20    opacity:0.9;21  }22  .status-left{ display:flex; align-items:center; gap:16px; }23  .dot{ width:8px; height:8px; background:#8aa2ad; border-radius:50%; display:inline-block; }24  .status-right{ display:flex; align-items:center; gap:18px; }25  .battery{26    width:54px; height:24px; border:3px solid #d8e6ee; border-radius:5px; position:relative;27  }28  .battery::after{29    content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#d8e6ee; border-radius:2px;30  }31  .battery .level{ position:absolute; left:2px; top:2px; bottom:2px; width:70%; background:#d8e6ee; }32  .wifi{ width:26px; height:26px; border:3px solid #d8e6ee; border-radius:50%; border-top-color:transparent; border-left-color:transparent; transform:rotate(45deg); box-sizing:border-box; }33 34  /* Header */35  .header{36    position:absolute; left:0; top:70px; width:100%; height:110px;37    display:flex; align-items:center; justify-content:center;38  }39  .header h1{40    margin:0; font-size:54px; font-weight:800; letter-spacing:1px; color:#cfe7f6;41  }42  .save-btn{43    position:absolute; right:32px; top:28px;44    font-size:42px; color:#6fc3ff; font-weight:800; letter-spacing:1px;45  }46  .close{47    position:absolute; left:26px; top:26px; width:72px; height:72px; display:flex; align-items:center; justify-content:center;48  }49  .close svg{ width:42px; height:42px; stroke:#a7c3d2; stroke-width:6; fill:none; }50 51  /* Content area */52  .content{53    position:absolute; left:0; top:190px; right:0; bottom:0;54    padding:24px 32px 32px; box-sizing:border-box;55    overflow:hidden;56  }57 58  .label{59    font-size:42px; color:#9db7c3; margin:26px 8px 18px;60  }61  .input{62    height:120px; border-radius:32px;63    background:#1a242a; border:2px solid #2a3a41; color:#eaf6ff;64    display:flex; align-items:center; padding:0 30px; font-size:40px; letter-spacing:0.5px;65    box-sizing:border-box;66  }67 68  .line-btn{69    height:118px; border-radius:30px; margin-top:26px;70    border:3px solid #2b4e5f; color:#78c6ff; font-weight:800; letter-spacing:2px;71    display:flex; align-items:center; justify-content:center; font-size:40px; background:#101a1e;72  }73 74  .section-title{75    font-size:58px; font-weight:800; margin:56px 8px 24px; color:#e5f2fb;76  }77 78  .card{79    background:#0f191d; border:3px solid #273940; border-radius:34px;80    padding:10px 0; box-sizing:border-box;81  }82 83  .row{84    display:flex; align-items:center; justify-content:space-between;85    padding:36px 28px; box-sizing:border-box;86    border-bottom:1px solid #213239;87  }88  .row:last-child{ border-bottom:none; }89  .row .name{ font-size:44px; color:#e8f4fb; }90  .caption{ font-size:44px; color:#79c7ff; font-weight:700; }91 92  /* Toggle mock similar to screenshot (pill + small rounded square) */93  .toggle-wrap{ display:flex; align-items:center; gap:24px; }94  .toggle{95    width:190px; height:88px; background:#79c9ff; border-radius:50px; position:relative;96    box-shadow: inset 0 0 0 6px rgba(20,40,50,0.25);97  }98  .toggle::before{99    content:""; position:absolute; right:10px; top:10px; width:68px; height:68px; background:#e9f7ff; border-radius:50%;100    box-shadow:0 2px 0 rgba(0,0,0,0.25);101  }102  .toggle-square{103    width:110px; height:90px; border-radius:22px; border:8px solid #79c9ff; background:#0f171b;104  }105 106  .help{107    margin-top:30px;108    height:118px; border-radius:30px;109    border:3px solid #2b4e5f; color:#78c6ff; font-weight:800; letter-spacing:2px;110    display:flex; align-items:center; justify-content:center; font-size:42px; background:#101a1e;111  }112 113  .bottom-area{114    position:absolute; left:0; right:0; bottom:18px;115    padding:0 32px; box-sizing:border-box;116  }117  .manage{118    height:124px; border-radius:34px; border:3px solid #2b4e5f;119    display:flex; align-items:center; justify-content:center;120    color:#78c6ff; font-size:48px; font-weight:800; letter-spacing:2px; background:#0f191d;121  }122 123</style>124</head>125<body>126<div id="render-target">127 128  <!-- Status bar -->129  <div class="status-bar">130    <div class="status-left">131      <span>5:53</span>132      <span class="dot"></span>133      <span class="dot"></span>134      <span class="dot"></span>135    </div>136    <div class="status-right">137      <div class="wifi"></div>138      <span>96%</span>139      <div class="battery"><div class="level"></div></div>140    </div>141  </div>142 143  <!-- Header -->144  <div class="header">145    <div class="close">146      <svg viewBox="0 0 24 24">147        <path d="M4 4 L20 20 M20 4 L4 20"></path>148      </svg>149    </div>150    <h1>Account</h1>151    <div class="save-btn">SAVE</div>152  </div>153 154  <!-- Content -->155  <div class="content">156 157    <div class="label">Email</div>158    <div class="input">fabioteixeira00123@gmail.com</div>159 160    <div class="label">Password</div>161    <div class="input">••••••••</div>162 163    <div class="line-btn">DUOLINGO FOR SCHOOLS</div>164    <div class="line-btn">SIGN OUT</div>165 166    <div class="section-title">General</div>167 168    <div class="card">169      <div class="row">170        <div class="name">Sound effects</div>171        <div class="toggle-wrap">172          <div class="toggle"></div>173          <div class="toggle-square"></div>174        </div>175      </div>176 177      <div class="row">178        <div class="name">Dark mode</div>179        <div class="caption">System Default</div>180      </div>181 182      <div class="row">183        <div class="name">Friends Quest</div>184        <div class="toggle-wrap">185          <div class="toggle"></div>186          <div class="toggle-square"></div>187        </div>188      </div>189 190      <div class="row">191        <div class="name">Motivational messages</div>192        <div class="toggle-wrap">193          <div class="toggle"></div>194          <div class="toggle-square"></div>195        </div>196      </div>197    </div>198 199    <div class="help">HELP CENTER</div>200 201  </div>202 203  <div class="bottom-area">204    <div class="manage">MANAGE COURSES</div>205  </div>206 207</div>208</body>209</html>