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 Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #121212;20    color: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    height: 96px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #EDEDED;31    font-size: 34px;32    letter-spacing: 0.5px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .status-icon {40    width: 32px;41    height: 32px;42    border-radius: 50%;43    border: 2px solid #BDBDBD;44    opacity: 0.8;45  }46  .battery {47    display: inline-flex;48    align-items: center;49    gap: 10px;50    color: #EDEDED;51    font-size: 30px;52  }53  .battery-shape {54    width: 48px;55    height: 22px;56    border: 2px solid #BDBDBD;57    border-radius: 4px;58    position: relative;59  }60  .battery-shape::after {61    content: "";62    position: absolute;63    right: -8px;64    top: 6px;65    width: 6px;66    height: 10px;67    background: #BDBDBD;68    border-radius: 2px;69  }70 71  /* Toolbar */72  .toolbar {73    height: 160px;74    padding: 0 36px;75    display: flex;76    align-items: center;77    justify-content: space-between;78  }79  .toolbar-left {80    display: flex;81    align-items: center;82    gap: 26px;83  }84  .title {85    font-size: 64px;86    font-weight: 500;87    color: #FAFAFA;88  }89  .icon-btn {90    width: 56px;91    height: 56px;92    display: inline-flex;93    align-items: center;94    justify-content: center;95    color: #E0E0E0;96  }97  .icon {98    width: 56px;99    height: 56px;100  }101 102  /* Content list */103  .content {104    padding: 24px 36px 0 36px;105  }106  .list {107    margin-top: 8px;108  }109  .list-item {110    padding: 36px 0;111    border-bottom: 1px solid transparent; /* no visible divider; keeps spacing consistent */112    color: #E0E0E0;113    font-size: 44px;114    line-height: 1.3;115  }116  .list-item + .list-item {117    margin-top: 6px;118  }119 120  /* Bottom gesture bar */121  .gesture-bar {122    position: absolute;123    left: 0;124    right: 0;125    bottom: 18px;126    height: 110px;127    display: flex;128    align-items: flex-start;129    justify-content: center;130  }131  .gesture-pill {132    width: 240px;133    height: 14px;134    border-radius: 8px;135    background: #E0E0E0;136    opacity: 0.9;137  }138</style>139</head>140<body>141<div id="render-target">142  <!-- Status bar -->143  <div class="status-bar">144    <div class="status-left">11:26</div>145    <div class="status-right">146      <div class="status-icon" title="Status icon"></div>147      <div class="status-icon" title="Status icon"></div>148      <div class="status-icon" title="Status icon"></div>149      <div class="battery">150        <div class="battery-shape"></div>151        100%152      </div>153    </div>154  </div>155 156  <!-- Toolbar -->157  <div class="toolbar">158    <div class="toolbar-left">159      <div class="icon-btn" aria-label="Back">160        <svg class="icon" viewBox="0 0 48 48">161          <path d="M28 10 L14 24 L28 38" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>162          <path d="M14 24 L40 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"></path>163        </svg>164      </div>165      <div class="title">Settings</div>166    </div>167    <div class="icon-btn" aria-label="More">168      <svg class="icon" viewBox="0 0 48 48">169        <circle cx="24" cy="10" r="4" fill="currentColor"></circle>170        <circle cx="24" cy="24" r="4" fill="currentColor"></circle>171        <circle cx="24" cy="38" r="4" fill="currentColor"></circle>172      </svg>173    </div>174  </div>175 176  <!-- Content -->177  <div class="content">178    <div class="list">179      <div class="list-item">General settings</div>180      <div class="list-item">dbwscratch.test.id10@gmail.com</div>181      <div class="list-item">kariniversen641@gmail.com</div>182      <div class="list-item">Add account</div>183    </div>184  </div>185 186  <!-- Bottom gesture bar -->187  <div class="gesture-bar">188    <div class="gesture-pill"></div>189  </div>190</div>191</body>192</html>