GD-ML/AndroidCode
13.4k
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: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 color: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #EDEDED;25 font-size: 40px;26 letter-spacing: 0.5px;27 }28 .status-left { display: flex; align-items: center; gap: 18px; }29 .status-right { display: flex; align-items: center; gap: 24px; }30 .icon-wifi svg, .icon-battery svg { display: block; }31 32 /* Ad banner placeholder */33 .ad-banner {34 margin: 10px 48px 0 48px;35 height: 170px;36 background: #E0E0E0;37 border: 1px solid #BDBDBD;38 border-radius: 10px;39 color: #757575;40 display: flex;41 align-items: center;42 justify-content: center;43 font-size: 40px;44 }45 46 /* Header / toolbar */47 .toolbar {48 height: 120px;49 display: flex;50 align-items: center;51 padding: 0 36px;52 gap: 24px;53 color: #F5F5F5;54 font-size: 54px;55 font-weight: 600;56 }57 58 /* Sections and rows */59 .content { margin-top: 10px; }60 .section-label {61 color: #BDBDBD;62 font-size: 32px;63 letter-spacing: 1.2px;64 text-transform: uppercase;65 padding: 32px 36px 20px 36px;66 }67 .row {68 border-top: 1px solid #1E1E1E;69 border-bottom: 1px solid #1E1E1E;70 padding: 34px 36px;71 display: flex;72 align-items: center;73 justify-content: space-between;74 background: #121212;75 }76 .row-title {77 font-size: 44px;78 color: #FFFFFF;79 }80 .row-subtitle {81 margin-top: 12px;82 font-size: 32px;83 color: #9E9E9E;84 }85 .row-right { display: flex; align-items: center; gap: 16px; }86 87 .chevron svg { display: block; }88 89 /* Toggles */90 .toggle {91 width: 128px;92 height: 64px;93 border-radius: 32px;94 background: #5E5E5E;95 position: relative;96 }97 .toggle .knob {98 width: 56px;99 height: 56px;100 border-radius: 50%;101 background: #BDBDBD;102 position: absolute;103 top: 4px;104 left: 6px;105 }106 .toggle.on { background: #FF8A65; }107 .toggle.on .knob { background: #FF9E82; left: 66px; }108 109 /* Bottom spacer and navigation pill */110 .bottom-spacer {111 height: 850px;112 background: #101010;113 border-top: 1px solid #1E1E1E;114 margin-top: 20px;115 }116 .home-pill {117 position: absolute;118 left: 50%;119 bottom: 30px;120 transform: translateX(-50%);121 width: 240px;122 height: 16px;123 background: #EDEDED;124 border-radius: 16px;125 opacity: 0.9;126 }127</style>128</head>129<body>130<div id="render-target">131 <!-- Status bar -->132 <div class="status-bar">133 <div class="status-left">134 <span>1:28</span>135 <span style="font-weight:700;">M</span>136 <span style="font-weight:700;">DH</span>137 </div>138 <div class="status-right">139 <div class="icon-wifi">140 <svg width="44" height="44" viewBox="0 0 24 24">141 <path d="M2 9c5-5 15-5 20 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>142 <path d="M5 12c3-3 11-3 14 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>143 <circle cx="12" cy="16.5" r="1.8" fill="#FFFFFF"/>144 </svg>145 </div>146 <div class="icon-battery">147 <svg width="44" height="44" viewBox="0 0 24 24">148 <rect x="3" y="7" width="16" height="10" rx="2" stroke="#FFFFFF" stroke-width="2" fill="none"/>149 <rect x="5" y="9" width="10" height="6" fill="#FFFFFF"/>150 <rect x="19" y="10" width="2" height="4" fill="#FFFFFF"/>151 </svg>152 </div>153 </div>154 </div>155 156 <!-- Ad banner placeholder -->157 <div class="ad-banner">[IMG: Spotify Ad Banner]</div>158 159 <!-- Toolbar header -->160 <div class="toolbar">161 <svg width="56" height="56" viewBox="0 0 24 24">162 <path d="M15 18l-6-6 6-6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>163 </svg>164 <div>Settings</div>165 </div>166 167 <!-- Content -->168 <div class="content">169 <div class="section-label">OTHER</div>170 171 <div class="row">172 <div>173 <div class="row-title">Recording format</div>174 <div class="row-subtitle">AAC</div>175 </div>176 <div class="row-right chevron">177 <svg width="48" height="48" viewBox="0 0 24 24">178 <path d="M9 6l6 6-6 6" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>179 </svg>180 </div>181 </div>182 183 <div class="row">184 <div>185 <div class="row-title">Recording quality</div>186 <div class="row-subtitle">128 kbps, 44.1kHz (recommended)</div>187 </div>188 <div class="row-right chevron">189 <svg width="48" height="48" viewBox="0 0 24 24">190 <path d="M9 6l6 6-6 6" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>191 </svg>192 </div>193 </div>194 195 <div class="row">196 <div class="row-title">Noise suppression</div>197 <div class="row-right">198 <div class="toggle on"><span class="knob"></span></div>199 </div>200 </div>201 202 <div class="section-label">GENERAL</div>203 204 <div class="row">205 <div>206 <div class="row-title">File location</div>207 <div class="row-subtitle">Change save folder</div>208 </div>209 <div class="row-right chevron">210 <svg width="48" height="48" viewBox="0 0 24 24">211 <path d="M9 6l6 6-6 6" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>212 </svg>213 </div>214 </div>215 216 <div class="row">217 <div class="row-title">Keep display on while recording</div>218 <div class="row-right">219 <div class="toggle on"><span class="knob"></span></div>220 </div>221 </div>222 223 <div class="row">224 <div class="row-title">Pause recording during the call</div>225 <div class="row-right">226 <div class="toggle"><span class="knob"></span></div>227 </div>228 </div>229 230 <div class="bottom-spacer"></div>231 </div>232 233 <!-- bottom navigation pill -->234 <div class="home-pill"></div>235</div>236</body>237</html>