GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Settings UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #121212; color: #EDEDED;11  }12 13  /* Status bar */14  .status-bar {15    height: 96px;16    display: flex;17    align-items: center;18    padding: 0 40px;19    box-sizing: border-box;20    color: #EDEDED;21    font-size: 40px;22    letter-spacing: 0.5px;23  }24  .status-spacer { flex: 1; }25  .status-icons { display: flex; align-items: center; gap: 26px; }26 27  /* App bar */28  .app-bar {29    height: 120px;30    border-bottom: 1px solid #2A2A2A;31    display: flex;32    align-items: center;33    padding: 0 32px;34    box-sizing: border-box;35  }36  .app-title { font-size: 52px; font-weight: 500; margin-left: 18px; }37 38  /* Content */39  .content { padding: 24px 0 0 0; }40  .section-title {41    color: #79B9FF;42    font-size: 40px;43    font-weight: 600;44    padding: 20px 40px 16px 40px;45    box-sizing: border-box;46  }47  .row {48    display: flex;49    align-items: center;50    justify-content: space-between;51    padding: 30px 40px;52    box-sizing: border-box;53    border-bottom: 1px solid #2A2A2A;54  }55  .row .text { max-width: 880px; }56  .row .title { font-size: 42px; line-height: 1.25; }57  .row .subtitle { font-size: 30px; color: #9E9E9E; margin-top: 10px; line-height: 1.35; }58 59  /* Checkbox styles */60  .checkbox {61    width: 64px; height: 64px; border-radius: 10px;62    border: 2px solid #7A7A7A;63    display: flex; align-items: center; justify-content: center;64    box-sizing: border-box;65  }66  .checkbox.checked {67    background: #1E88E5;68    border-color: #1E88E5;69  }70  .checkbox svg { width: 38px; height: 38px; }71  .checkbox .tick { stroke: #ffffff; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }72 73  /* Bottom navigation bar pill */74  .home-pill {75    position: absolute;76    bottom: 34px; left: 50%; transform: translateX(-50%);77    width: 320px; height: 14px; border-radius: 8px; background: #E0E0E0; opacity: 0.6;78  }79</style>80</head>81<body>82<div id="render-target">83 84  <!-- Status bar -->85  <div class="status-bar">86    <div>9:23</div>87    <div class="status-spacer"></div>88    <div class="status-icons">89      <!-- Simple cloud icon -->90      <svg width="44" height="44" viewBox="0 0 44 44">91        <path d="M16 28c-5 0-8-3-8-7s4-7 9-6c2-5 8-7 13-4 3 2 5 6 4 9h2c3 0 6 2 6 5s-3 5-6 5H16z" fill="#CFCFCF" opacity="0.8"></path>92      </svg>93      <!-- Wi-Fi icon -->94      <svg width="44" height="44" viewBox="0 0 44 44">95        <path d="M6 16c8-6 24-6 32 0" stroke="#EDEDED" stroke-width="3" fill="none" stroke-linecap="round"/>96        <path d="M10 22c6-4 18-4 24 0" stroke="#EDEDED" stroke-width="3" fill="none" stroke-linecap="round"/>97        <path d="M16 28c4-3 8-3 12 0" stroke="#EDEDED" stroke-width="3" fill="none" stroke-linecap="round"/>98        <circle cx="22" cy="32" r="3" fill="#EDEDED"/>99      </svg>100      <!-- Battery icon -->101      <svg width="44" height="44" viewBox="0 0 44 44">102        <rect x="8" y="12" width="26" height="20" rx="4" stroke="#EDEDED" stroke-width="3" fill="none"/>103        <rect x="12" y="16" width="18" height="12" rx="2" fill="#EDEDED"/>104        <rect x="34" y="18" width="4" height="8" rx="2" fill="#EDEDED"/>105      </svg>106    </div>107  </div>108 109  <!-- App bar -->110  <div class="app-bar">111    <svg width="64" height="64" viewBox="0 0 64 64">112      <polyline points="40,12 20,32 40,52" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>113    </svg>114    <div class="app-title">Settings</div>115  </div>116 117  <!-- Content -->118  <div class="content">119 120    <div class="section-title">General</div>121 122    <div class="row">123      <div class="text">124        <div class="title">Download over Wi‑Fi only</div>125        <div class="subtitle">Reduces data usage</div>126      </div>127      <div class="checkbox checked">128        <svg viewBox="0 0 48 48">129          <polyline class="tick" points="12,26 20,34 36,16"></polyline>130        </svg>131      </div>132    </div>133 134    <div class="row">135      <div class="text">136        <div class="title">Enable PDF uploading</div>137        <div class="subtitle">From downloads, mail, or other apps</div>138      </div>139      <div class="checkbox"></div>140    </div>141 142    <div class="row">143      <div class="text">144        <div class="title">Save notes, highlights, and bookmarks in Google Drive</div>145        <div class="subtitle">Off</div>146      </div>147    </div>148 149    <div class="row">150      <div class="text">151        <div class="title">Offline dictionary</div>152        <div class="subtitle">For use without internet</div>153      </div>154    </div>155 156    <div class="row">157      <div class="text">158        <div class="title">Parental controls</div>159        <div class="subtitle">Off for Books</div>160      </div>161    </div>162 163    <div class="row">164      <div class="text">165        <div class="title">Download new books to SD card</div>166        <div class="subtitle">No SD card available</div>167      </div>168      <div class="checkbox"></div>169    </div>170 171    <div class="section-title" style="margin-top: 14px;">Reading</div>172 173    <div class="row">174      <div class="text">175        <div class="title">Auto-rotate screen</div>176        <div class="subtitle">Use system setting</div>177      </div>178    </div>179 180    <div class="row">181      <div class="text">182        <div class="title">Use volume keys to turn pages</div>183        <div class="subtitle">When Bubble Zoom is on</div>184      </div>185    </div>186 187    <div class="row">188      <div class="text">189        <div class="title">Use 3D effect for page turning</div>190      </div>191      <div class="checkbox"></div>192    </div>193 194    <div class="row">195      <div class="text">196        <div class="title">Automatically read aloud</div>197        <div class="subtitle">When you open a book and accessibility is turned on</div>198      </div>199      <div class="checkbox"></div>200    </div>201 202    <div class="row">203      <div class="text">204        <div class="title">More natural reading voice</div>205        <div class="subtitle">Available only when you're connected to the internet. Carrier charges may apply.</div>206      </div>207      <div class="checkbox"></div>208    </div>209 210    <div class="row" style="border-bottom: none;">211      <div class="text">212        <div class="title">Tools for beginning readers</div>213        <div class="subtitle">Read &amp; listen, tap to hear word, dictionary</div>214      </div>215      <div class="checkbox"></div>216    </div>217 218  </div>219 220  <!-- Bottom navigation pill -->221  <div class="home-pill"></div>222</div>223</body>224</html>