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 Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13    color: #212121;14  }15 16  #render-target {17    width: 1080px;18    height: 2400px;19    position: relative;20    overflow: hidden;21    background: #ffffff;22  }23 24  /* Status bar */25  .status-bar {26    height: 110px;27    padding: 0 36px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #666;32    font-size: 38px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .status-icon {40    width: 38px;41    height: 38px;42    background: #9e9e9e;43    border-radius: 6px;44  }45  .dot {46    width: 12px;47    height: 12px;48    background: #9e9e9e;49    border-radius: 50%;50    margin: 0 10px;51  }52 53  /* Header */54  .header {55    position: relative;56    height: 150px;57    display: flex;58    align-items: center;59    justify-content: center;60  }61  .title {62    font-weight: 700;63    font-size: 64px;64    letter-spacing: 0.5px;65  }66  .back-btn {67    position: absolute;68    left: 24px;69    top: 50%;70    transform: translateY(-50%);71    width: 80px;72    height: 80px;73    display: flex;74    align-items: center;75    justify-content: center;76  }77  .back-btn svg {78    width: 52px;79    height: 52px;80    fill: none;81    stroke: #212121;82    stroke-width: 8;83    stroke-linecap: round;84    stroke-linejoin: round;85  }86 87  /* Content list */88  .content {89    padding: 0 40px;90  }91  .row {92    display: flex;93    align-items: center;94    justify-content: space-between;95    padding: 36px 0;96  }97  .label {98    font-size: 48px;99    font-weight: 600;100  }101  .divider {102    height: 2px;103    background: #e0e0e0;104    margin: 16px 0 0 0;105  }106  .subtext {107    font-size: 42px;108    color: #E76A2A;109    margin-top: 18px;110  }111 112  /* Switch */113  .switch {114    width: 124px;115    height: 64px;116    background: #F7CDB8;117    border-radius: 32px;118    position: relative;119  }120  .switch .knob {121    position: absolute;122    right: 6px;123    top: 6px;124    width: 52px;125    height: 52px;126    background: #E86C2F;127    border-radius: 50%;128    box-shadow: 0 3px 6px rgba(0,0,0,0.2);129  }130 131  /* Bottom navigation pill on black bar */132  .nav-bar {133    position: absolute;134    left: 0;135    bottom: 0;136    width: 1080px;137    height: 130px;138    background: #000000;139    display: flex;140    align-items: center;141    justify-content: center;142  }143  .pill {144    width: 320px;145    height: 14px;146    background: #e0e0e0;147    border-radius: 10px;148  }149</style>150</head>151<body>152<div id="render-target">153  <!-- Status Bar -->154  <div class="status-bar">155    <div style="display:flex; align-items:center; gap:16px;">156      <span>8:27</span>157      <div class="status-icon"></div>158      <div class="status-icon"></div>159      <div class="status-icon"></div>160      <div class="status-icon"></div>161      <div class="dot"></div>162    </div>163    <div class="status-right">164      <div class="status-icon"></div>165      <div class="status-icon"></div>166    </div>167  </div>168 169  <!-- Header -->170  <div class="header">171    <div class="back-btn">172      <svg viewBox="0 0 24 24">173        <path d="M15 6l-6 6 6 6"></path>174      </svg>175    </div>176    <div class="title">Settings</div>177  </div>178 179  <!-- Content -->180  <div class="content">181    <div class="row">182      <div class="label">Notifications</div>183      <div class="switch">184        <div class="knob"></div>185      </div>186    </div>187    <div class="divider"></div>188 189    <div style="padding: 36px 0 24px 0;">190      <div class="label">Language</div>191      <div class="subtext">English</div>192    </div>193 194    <div class="divider" style="opacity:0;"></div>195 196    <div style="padding: 36px 0 24px 0;">197      <div class="label">Country</div>198      <div class="subtext">Jordan</div>199    </div>200 201    <div style="padding: 36px 0;">202      <div class="label">Login</div>203    </div>204  </div>205 206  <!-- Bottom Navigation Bar -->207  <div class="nav-bar">208    <div class="pill"></div>209  </div>210</div>211</body>212</html>