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>Settings UI Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#0f171b; color:#d6e2ea;11  }12 13  /* top bar */14  .topbar{15    position:absolute; left:0; top:0; width:100%; height:150px;16    display:block; border-bottom:1px solid #1f2a31;17  }18  .topbar .title{19    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);20    font-weight:700; font-size:54px; letter-spacing:0.5px; color:#dce8ef;21  }22  .icon-btn{23    position:absolute; top:48px; width:64px; height:64px; display:flex;24    align-items:center; justify-content:center; cursor:default;25  }26  .icon-left{ left:34px; }27  .icon-right{ right:34px; color:#6ec0ff; font-weight:800; font-size:46px; letter-spacing:2px; }28 29  /* content area */30  .content{31    position:absolute; left:0; right:0; top:150px; bottom:0;32    overflow-y:auto; padding:24px 36px 120px;33  }34 35  .label{36    font-size:34px; color:#9eb1bd; margin:32px 10px 12px;37    text-transform:capitalize; letter-spacing:1px;38  }39  .input{40    background:#1a242a; border:2px solid #2d3a43; border-radius:30px;41    padding:32px; color:#eaf3f9; font-size:44px; height:106px;42    display:flex; align-items:center;43  }44 45  .wide-btn{46    margin-top:26px; background:#162028; border:2px solid #2b3a43;47    color:#78c2ff; border-radius:30px; height:112px;48    display:flex; align-items:center; justify-content:center;49    font-size:42px; font-weight:700; letter-spacing:3px;50  }51 52  .section-title{53    margin:44px 10px 22px; font-size:64px; font-weight:800; color:#e7f0f6;54  }55 56  .card{57    background:#111b21; border:2px solid #26343c; border-radius:34px;58    overflow:hidden;59  }60  .row{61    height:140px; display:flex; align-items:center; justify-content:space-between;62    padding:0 30px; border-bottom:1px solid #24323a;63  }64  .row:last-child{ border-bottom:none; }65  .row .text{ font-size:46px; color:#e2edf4; }66  .right-note{ font-size:44px; color:#76c0ff; }67 68  /* toggles */69  .toggle{70    width:188px; height:84px; border-radius:50px; position:relative;71    background:#2a3740; border:2px solid #3a4a54;72    transition:all .2s;73  }74  .toggle.on{ background:#79c5ff; border-color:#79c5ff; }75  .knob{76    width:76px; height:76px; background:#0f171b; border-radius:50%;77    position:absolute; top:2px; left:2px; transition:left .2s;78    box-shadow:0 2px 6px rgba(0,0,0,.5);79  }80  .toggle.on .knob{ left:110px; background:#ffffff; }81 82  /* helper spacing buttons at bottom */83  .footer-btn{84    margin-top:28px; background:#142028; border:2px solid #2b3a43;85    color:#78c2ff; border-radius:28px; height:114px;86    display:flex; align-items:center; justify-content:center;87    font-size:44px; font-weight:800; letter-spacing:3px;88  }89 90  /* subtle scroll indicator style for realism */91  .content::-webkit-scrollbar{ width:8px; }92  .content::-webkit-scrollbar-thumb{ background:#213039; border-radius:8px; }93</style>94</head>95<body>96<div id="render-target">97  <div class="topbar">98    <div class="icon-btn icon-left">99      <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#c9d6de" stroke-width="2.6" stroke-linecap="round">100        <path d="M5 5L19 19M19 5L5 19"></path>101      </svg>102    </div>103    <div class="title">Account</div>104    <div class="icon-btn icon-right">SAVE</div>105  </div>106 107  <div class="content">108    <div class="label">Email</div>109    <div class="input">fabioteixeira00123@gmail.com</div>110 111    <div class="label">Password</div>112    <div class="input">••••••••</div>113 114    <div class="wide-btn">DUOLINGO FOR SCHOOLS</div>115    <div class="wide-btn">SIGN OUT</div>116 117    <div class="section-title">General</div>118 119    <div class="card">120      <div class="row">121        <div class="text">Sound effects</div>122        <div class="toggle"><div class="knob"></div></div>123      </div>124      <div class="row">125        <div class="text">Dark mode</div>126        <div class="right-note">System Default</div>127      </div>128      <div class="row">129        <div class="text">Friends Quest</div>130        <div class="toggle on"><div class="knob"></div></div>131      </div>132      <div class="row">133        <div class="text">Motivational messages</div>134        <div class="toggle on"><div class="knob"></div></div>135      </div>136    </div>137 138    <div class="footer-btn">HELP CENTER</div>139    <div class="footer-btn">MANAGE COURSES</div>140  </div>141</div>142</body>143</html>