GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Settings UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F4F7F8;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #111;17 }18 19 /* Status and title bars */20 .status-bar {21 position: absolute;22 top: 0; left: 0; right: 0;23 height: 110px;24 background: #0F0F0F;25 color: #fff;26 font-size: 38px;27 display: flex;28 align-items: center;29 padding: 0 36px;30 box-sizing: border-box;31 }32 .status-left { font-weight: 600; }33 .status-right {34 margin-left: auto;35 display: flex; align-items: center; gap: 22px;36 opacity: 0.9;37 }38 .dot { width: 14px; height: 14px; background:#eaeaea; border-radius: 50%; opacity: 0.9; }39 .battery {40 width: 46px; height: 22px; border: 3px solid #fff; border-radius: 4px; position: relative;41 }42 .battery:after {43 content: ""; position: absolute; right: -8px; top: 5px; width: 6px; height: 12px; background: #fff; border-radius: 2px;44 }45 .title-bar {46 position: absolute;47 top: 110px; left: 0; right: 0;48 height: 160px;49 background: #0F0F0F;50 color: #fff;51 display: flex; align-items: center; justify-content: center;52 font-size: 64px; font-weight: 700;53 }54 55 /* Section headers */56 .section {57 position: absolute; left: 0; right: 0;58 background: #EFF0F3;59 color: #111;60 font-size: 44px;61 font-weight: 800;62 letter-spacing: 1px;63 padding: 34px 36px;64 box-sizing: border-box;65 }66 67 /* Lists */68 .list {69 position: absolute; left: 0; right: 0;70 background: #F4F7F8;71 }72 .row {73 display: flex; align-items: center;74 padding: 34px 36px;75 gap: 28px;76 border-bottom: 1px solid #E2E6E8;77 background: #EEF6F6;78 }79 .row .texts { flex: 1; }80 .title { font-size: 46px; font-weight: 700; color: #111; line-height: 1.2; }81 .sub { font-size: 34px; color: #9AA2A6; margin-top: 8px; }82 83 .icon-circle, .icon-square {84 width: 96px; height: 96px;85 border-radius: 50%;86 display: flex; align-items: center; justify-content: center;87 color: #fff; font-weight: 800;88 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);89 flex: 0 0 auto;90 }91 .icon-square { border-radius: 18px; }92 93 .chev {94 width: 40px; height: 40px; flex: 0 0 auto;95 }96 .chev svg { width: 100%; height: 100%; fill: none; stroke: #111; stroke-width: 8; }97 98 /* Toggle */99 .toggle {100 width: 120px; height: 64px; border-radius: 40px;101 background: #CFCFCF;102 position: relative;103 margin-left: 18px;104 flex: 0 0 auto;105 }106 .toggle::after {107 content: "";108 position: absolute; top: 6px; left: 6px;109 width: 52px; height: 52px; border-radius: 50%;110 background: #2B2B2B;111 }112 113 /* Ad banner placeholder */114 .ad {115 margin: 0 0;116 padding: 0;117 background: #FFFFFF;118 border-top: 1px solid #E2E6E8;119 }120 .ad-inner {121 margin: 22px 18px;122 height: 150px;123 background: #E0E0E0;124 border: 1px solid #BDBDBD;125 display: flex; align-items: center; justify-content: center;126 color: #757575; font-size: 40px; font-weight: 600;127 }128 129 /* Bottom navigation */130 .bottom-nav {131 position: absolute; left: 0; right: 0; bottom: 0;132 height: 220px; background: #0F0F0F; color: #fff;133 display: flex; align-items: center; justify-content: space-around;134 }135 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }136 .nav-icon {137 width: 96px; height: 96px; border-radius: 50%;138 border: 4px solid #BDBDBD; display:flex; align-items:center; justify-content:center;139 }140 .nav-icon.red { border-color: #ff2a2a; }141 .dot-indicator {142 position: absolute; bottom: 230px; left: 50%; transform: translateX(-50%);143 width: 220px; height: 14px; background: #E5E5E5; border-radius: 8px; opacity: 0.9;144 }145 .active-underline {146 position: absolute; bottom: 220px; left: 55%;147 width: 360px; height: 12px; background: #ff2a2a; border-radius: 6px;148 }149 150 /* Positions */151 #basic-header { top: 270px; }152 #basic-list { top: 360px; }153 #advanced-header { top: 1460px; }154 #ad-area { top: 1550px; }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Status bar -->161 <div class="status-bar">162 <div class="status-left">9:11</div>163 <div class="status-right">164 <div class="dot"></div>165 <div class="dot"></div>166 <div style="width:28px; height:28px; border:3px solid #fff; border-radius:50%"></div>167 <div class="dot"></div>168 <div class="battery"></div>169 </div>170 </div>171 172 <!-- Title -->173 <div class="title-bar">Settings</div>174 175 <!-- BASIC section -->176 <div id="basic-header" class="section">BASIC</div>177 178 <div id="basic-list" class="list">179 <!-- Remove ADS -->180 <div class="row">181 <div class="icon-circle" style="background:#FF4D4D; font-size:26px; line-height:1.05; text-align:center;">182 NO<br>ADS183 </div>184 <div class="texts">185 <div class="title">Remove ADS</div>186 </div>187 <div class="chev">188 <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>189 </div>190 </div>191 192 <!-- Microphone Adjustment -->193 <div class="row">194 <div class="icon-circle" style="background:#FF9800;">195 <svg viewBox="0 0 24 24" width="48" height="48">196 <path d="M12 3a4 4 0 014 4v5a4 4 0 11-8 0V7a4 4 0 014-4z" fill="#fff"/>197 <path d="M5 11a7 7 0 0014 0" stroke="#fff" stroke-width="2" fill="none"/>198 <rect x="11" y="18" width="2" height="4" fill="#fff"/>199 </svg>200 </div>201 <div class="texts">202 <div class="title">Microphone Adjustment</div>203 </div>204 <div class="chev">205 <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>206 </div>207 </div>208 209 <!-- Record file type -->210 <div class="row">211 <div class="icon-square" style="background:#7B5CFF;">212 <div style="font-size:30px; text-align:center; line-height:1.1;">213 <div style="font-weight:900;">MP3</div>214 </div>215 </div>216 <div class="texts">217 <div class="title">Record file type</div>218 </div>219 <div class="chev">220 <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>221 </div>222 </div>223 224 <!-- Default File Name -->225 <div class="row">226 <div class="icon-square" style="background:#FF2E96;">227 <svg viewBox="0 0 24 24" width="52" height="52">228 <path d="M6 4h10l4 4v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z" fill="#fff" opacity="0.9"/>229 </svg>230 </div>231 <div class="texts">232 <div class="title">Default File Name</div>233 <div class="sub">2023_12_07_08_02_20</div>234 </div>235 <div class="chev">236 <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>237 </div>238 </div>239 240 <!-- Recording Quality -->241 <div class="row">242 <div class="icon-square" style="background:#268BFF;">243 <div style="font-size:32px; font-weight:800;">kHZ</div>244 </div>245 <div class="texts">246 <div class="title">Recording Quality</div>247 <div class="sub">Mono, 44 kHz</div>248 </div>249 <div class="chev">250 <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>251 </div>252 </div>253 254 <!-- Enable trash function -->255 <div class="row">256 <div class="icon-square" style="background:#26B35A;">257 <svg viewBox="0 0 24 24" width="52" height="52">258 <path d="M3 6h18" stroke="#fff" stroke-width="2"/>259 <path d="M7 6l1-2h8l1 2" stroke="#fff" stroke-width="2"/>260 <path d="M6 8h12l-1 11a2 2 0 01-2 2H9a2 2 0 01-2-2L6 8z" fill="#fff" opacity="0.9"/>261 </svg>262 </div>263 <div class="texts">264 <div class="title">Enable trash function</div>265 <div class="sub">If enable, files will be moved to the trash when they are deleted. Users can go to trash to restore files</div>266 </div>267 <div class="toggle" aria-hidden="true"></div>268 </div>269 270 <!-- Size of the trash -->271 <div class="row" style="background:#FFFFFF;">272 <div style="width:96px; height:96px; border-radius:18px; background:#2E3A59; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900;">273 <svg viewBox="0 0 24 24" width="52" height="52">274 <path d="M4 20h16M10 4v12m6-6H4" stroke="#fff" stroke-width="2" fill="none"/>275 </svg>276 </div>277 <div class="texts">278 <div class="title">Size of the trash</div>279 <div class="sub">20 files</div>280 </div>281 <div class="chev">282 <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>283 </div>284 </div>285 </div>286 287 <!-- ADVANCED section -->288 <div id="advanced-header" class="section">ADVANCED</div>289 290 <!-- Ad area -->291 <div id="ad-area" class="ad">292 <div class="ad-inner">[IMG: Advertisement Banner]</div>293 </div>294 295 <!-- Gesture indicator and active underline -->296 <div class="dot-indicator"></div>297 <div class="active-underline"></div>298 299 <!-- Bottom navigation -->300 <div class="bottom-nav">301 <div class="nav-item">302 <div class="nav-icon">303 <svg viewBox="0 0 24 24" width="56" height="56" stroke="#BDBDBD" fill="none" stroke-width="2">304 <path d="M5 18v-2a5 5 0 015-5h4a5 5 0 015 5v2" />305 <circle cx="8" cy="7" r="3"/>306 <circle cx="16" cy="7" r="3"/>307 </svg>308 </div>309 </div>310 <div class="nav-item">311 <div class="nav-icon">312 <svg viewBox="0 0 24 24" width="50" height="50" stroke="#BDBDBD" fill="none" stroke-width="2">313 <path d="M12 3a4 4 0 014 4v5a4 4 0 11-8 0V7a4 4 0 014-4z"/>314 <path d="M5 11a7 7 0 0014 0"/>315 </svg>316 </div>317 </div>318 <div class="nav-item">319 <div class="nav-icon red">320 <svg viewBox="0 0 24 24" width="50" height="50" stroke="#ff2a2a" fill="none" stroke-width="2">321 <path d="M12 2l2.5 4 4.5 1-3.2 3.4.7 4.6-4-2-4 2 .7-4.6L5 7l4.5-1z"/>322 </svg>323 </div>324 </div>325 </div>326 327</div>328</body>329</html>