GD-ML/AndroidCode
13.4k
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 UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Roboto", "Segoe UI", Arial, sans-serif;13 color: #ECECEC;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #16171B;21 border-radius: 24px;22 }23 24 /* Status + Header */25 .status-bar {26 position: absolute;27 top: 0;28 left: 0;29 width: 1080px;30 height: 120px;31 background: #2B2C37;32 color: #EDEDED;33 padding: 0 40px;34 box-sizing: border-box;35 display: flex;36 align-items: center;37 justify-content: space-between;38 letter-spacing: 0.5px;39 font-size: 38px;40 }41 .status-left {42 display: flex;43 align-items: center;44 gap: 16px;45 }46 .status-right {47 display: flex;48 align-items: center;49 gap: 24px;50 }51 .status-icon {52 width: 26px;53 height: 26px;54 background: #E0E0E0;55 border-radius: 50%;56 opacity: 0.9;57 }58 .battery {59 width: 48px;60 height: 24px;61 }62 63 .header {64 position: absolute;65 top: 120px;66 left: 0;67 width: 1080px;68 height: 190px;69 background: #2B2C37;70 display: flex;71 align-items: center;72 padding: 0 40px;73 box-sizing: border-box;74 border-bottom: 1px solid #2A2B33;75 }76 .back {77 width: 72px;78 height: 72px;79 margin-right: 18px;80 }81 .header-title {82 font-size: 64px;83 font-weight: 600;84 letter-spacing: 0.3px;85 }86 87 /* Content area */88 .content {89 position: absolute;90 top: 310px;91 left: 0;92 right: 0;93 bottom: 0;94 padding: 20px 48px 140px 48px;95 box-sizing: border-box;96 overflow: hidden;97 color: #F1F1F1;98 }99 .section {100 margin: 36px 0;101 }102 .setting-item {103 padding: 40px 0;104 border-bottom: 1px solid rgba(255,255,255,0.04);105 }106 .setting-title {107 font-size: 46px;108 font-weight: 500;109 margin: 0 0 12px 0;110 }111 .setting-sub {112 font-size: 32px;113 color: #A8ABB3;114 line-height: 1.4;115 max-width: 900px;116 }117 .label-small {118 color: #B9B4FF;119 font-size: 34px;120 font-weight: 500;121 margin: 44px 0 8px 0;122 }123 .no-sub {124 padding: 46px 0;125 font-size: 44px;126 font-weight: 500;127 }128 129 /* Switch */130 .setting-row {131 display: flex;132 align-items: center;133 justify-content: space-between;134 padding: 40px 0;135 }136 .switch {137 width: 170px;138 height: 92px;139 background: #C7C4FF;140 border-radius: 92px;141 position: relative;142 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);143 }144 .switch::after {145 content: "";146 position: absolute;147 width: 84px;148 height: 84px;149 right: 4px;150 top: 4px;151 background: #2E315E;152 border-radius: 50%;153 }154 155 /* Gesture bar */156 .gesture {157 position: absolute;158 bottom: 28px;159 left: 50%;160 transform: translateX(-50%);161 width: 360px;162 height: 12px;163 background: #EDEDED;164 border-radius: 10px;165 opacity: 0.9;166 }167</style>168</head>169<body>170<div id="render-target">171 <!-- Status bar -->172 <div class="status-bar">173 <div class="status-left">174 <div>5:58</div>175 <div class="status-icon"></div>176 <div class="status-icon" style="background:#FFFFFF;"></div>177 <div class="status-icon"></div>178 <div class="status-icon" style="width:18px;height:18px;background:#FFFFFF;opacity:0.6;"></div>179 </div>180 <div class="status-right">181 <!-- WiFi icon -->182 <svg width="40" height="28" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">183 <path d="M12 14l-2-2a3 3 0 014 0l-2 2z" fill="#FFFFFF" opacity="0.9"/>184 <path d="M4 6a10 10 0 0116 0l-1.8 1.2a8 8 0 00-12.4 0L4 6z" fill="#FFFFFF" opacity="0.6"/>185 <path d="M7 9.5a7 7 0 0110 0L15.6 11a5 5 0 00-7.2 0L7 9.5z" fill="#FFFFFF" opacity="0.75"/>186 </svg>187 <!-- Battery -->188 <svg class="battery" viewBox="0 0 30 16" xmlns="http://www.w3.org/2000/svg">189 <rect x="1" y="1" width="25" height="14" rx="3" stroke="#FFFFFF" fill="none" stroke-width="2"/>190 <rect x="3" y="3" width="18" height="10" rx="2" fill="#FFFFFF"/>191 <rect x="26" y="5" width="3" height="6" rx="1" fill="#FFFFFF"/>192 </svg>193 </div>194 </div>195 196 <!-- Header -->197 <div class="header">198 <!-- Back arrow -->199 <svg class="back" viewBox="0 0 24 24">200 <path d="M15.5 19l-7-7 7-7" fill="none" stroke="#ECECEC" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>201 </svg>202 <div class="header-title">Settings</div>203 </div>204 205 <!-- Content -->206 <div class="content">207 <div class="section">208 <div class="setting-item">209 <div class="setting-title">Microphone</div>210 <div class="setting-sub">Use Bluetooth or external mic when available</div>211 </div>212 213 <div class="setting-item">214 <div class="setting-title">Google Location settings</div>215 <div class="setting-sub">Recorder uses location info to improve your experience, like suggested titles & search</div>216 </div>217 218 <div class="label-small">Transcription</div>219 220 <div class="setting-item">221 <div class="setting-title">Transcription language</div>222 <div class="setting-sub">English (US)</div>223 </div>224 225 <div class="setting-row">226 <div>227 <div class="setting-title" style="margin-bottom: 12px;">Keyword scrolling</div>228 <div class="setting-sub">Recorder shows keywords to help you navigate transcription text</div>229 </div>230 <div class="switch" aria-label="Keyword scrolling switch (on)"></div>231 </div>232 233 <div class="label-small">About</div>234 235 <div class="no-sub">Recorder Tips</div>236 <div class="no-sub">Privacy policy</div>237 <div class="no-sub">Terms of service</div>238 <div class="no-sub" style="border-bottom: none;">Open source licenses</div>239 </div>240 </div>241 242 <!-- Gesture bar -->243 <div class="gesture"></div>244</div>245</body>246</html>