GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Settings UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #202124;27 font-size: 36px;28 background: #ffffff;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 28px;34 color: #202124;35 }36 .status-icons svg { width: 40px; height: 40px; }37 38 /* App bar */39 .app-bar {40 position: absolute;41 top: 110px;42 left: 0;43 width: 1080px;44 height: 140px;45 display: flex;46 align-items: center;47 padding: 0 32px;48 background: #ffffff;49 box-sizing: border-box;50 border-bottom: 1px solid #e6e6e6;51 }52 .back-btn {53 width: 88px;54 height: 88px;55 display: flex;56 align-items: center;57 justify-content: center;58 margin-right: 12px;59 }60 .app-title {61 font-size: 64px;62 font-weight: 600;63 color: #202124;64 }65 66 /* Content area */67 .content {68 position: absolute;69 top: 250px;70 left: 0;71 width: 1080px;72 height: 2020px;73 overflow: hidden;74 background: #f7f9fc;75 }76 .content-inner {77 width: 100%;78 height: 100%;79 overflow-y: auto;80 box-sizing: border-box;81 padding: 36px 40px 160px 40px;82 }83 84 .section-title {85 font-size: 42px;86 font-weight: 700;87 color: #1a73e8;88 margin: 22px 0 32px;89 }90 91 .row {92 position: relative;93 padding: 28px 0;94 border-bottom: 1px solid #eef1f5;95 }96 .row:last-child { border-bottom: none; }97 98 .label {99 font-size: 40px;100 color: #202124;101 margin-bottom: 16px;102 }103 .value {104 font-size: 38px;105 color: #6b6f76;106 }107 108 .avatar {109 position: absolute;110 right: 36px;111 top: 20px;112 width: 140px;113 height: 140px;114 border-radius: 50%;115 background: #5d4037;116 color: #ffffff;117 display: flex;118 align-items: center;119 justify-content: center;120 font-size: 64px;121 font-weight: 600;122 letter-spacing: 1px;123 }124 125 .link-row .label {126 font-size: 40px;127 color: #202124;128 }129 130 .subtle {131 color: #a7adb5;132 }133 134 .divider-space {135 height: 24px;136 background: transparent;137 }138 139 /* Gesture bar */140 .gesture-bar {141 position: absolute;142 bottom: 24px;143 left: 50%;144 transform: translateX(-50%);145 width: 420px;146 height: 16px;147 background: #9e9e9e;148 border-radius: 12px;149 opacity: 0.6;150 }151</style>152</head>153<body>154<div id="render-target">155 156 <!-- Status Bar -->157 <div class="status-bar">158 <div class="time">6:12</div>159 <div class="status-icons">160 <!-- Lock icon -->161 <svg viewBox="0 0 24 24">162 <path d="M7 10V7a5 5 0 0110 0v3h1a2 2 0 012 2v7a2 2 0 01-2 2H6a2 2 0 01-2-2v-7a2 2 0 012-2h1zm2 0h6V7a3 3 0 00-6 0v3z" fill="#202124"/>163 </svg>164 <!-- Dot icon -->165 <svg viewBox="0 0 24 24">166 <circle cx="12" cy="12" r="3" fill="#202124"/>167 </svg>168 <!-- Search icon -->169 <svg viewBox="0 0 24 24">170 <circle cx="11" cy="11" r="7" stroke="#202124" stroke-width="2" fill="none"/>171 <path d="M20 20l-4-4" stroke="#202124" stroke-width="2" fill="none" stroke-linecap="round"/>172 </svg>173 <!-- Wifi icon -->174 <svg viewBox="0 0 24 24">175 <path d="M2 9a16 16 0 0120 0M5 12a12 12 0 0114 0M8 15a8 8 0 018 0" stroke="#202124" stroke-width="2" fill="none" stroke-linecap="round"/>176 <circle cx="12" cy="18" r="2" fill="#202124"/>177 </svg>178 <!-- Battery with percentage -->179 <div style="display:flex; align-items:center; gap:10px;">180 <svg viewBox="0 0 28 18" width="56" height="36">181 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#202124" stroke-width="2" fill="none"/>182 <rect x="3" y="5" width="16" height="8" fill="#202124"/>183 <rect x="23" y="6" width="4" height="6" rx="1" fill="#202124"/>184 </svg>185 <span style="font-size:32px;">100%</span>186 </div>187 </div>188 </div>189 190 <!-- App Bar -->191 <div class="app-bar">192 <div class="back-btn">193 <svg viewBox="0 0 24 24">194 <path d="M15 5l-7 7 7 7" stroke="#202124" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>195 </svg>196 </div>197 <div class="app-title">Settings</div>198 </div>199 200 <!-- Content -->201 <div class="content">202 <div class="content-inner">203 204 <div class="section-title">Account</div>205 206 <div class="row">207 <div class="label">Name</div>208 <div class="value">Fabio Teixeira</div>209 </div>210 211 <div class="row" style="min-height: 180px;">212 <div class="label">Photo</div>213 <div class="avatar">F</div>214 </div>215 216 <div class="row">217 <div class="label">About me</div>218 <div class="value subtle">Write a bit about yourself</div>219 </div>220 221 <div class="row">222 <div class="label">Email</div>223 <div class="value">fabioteixeira00123@gmail.com</div>224 </div>225 226 <div class="row">227 <div class="label">Country/Region</div>228 <div class="value">India</div>229 </div>230 231 <div class="row">232 <div class="label">I speak</div>233 <div class="value">English</div>234 </div>235 236 <div class="row link-row">237 <div class="label">Take Portuguese Placement Test</div>238 </div>239 240 <div class="row link-row">241 <div class="label">Study Plan</div>242 </div>243 244 <div class="divider-space"></div>245 246 <div class="section-title">General</div>247 248 <div class="row link-row">249 <div class="label">Notifications</div>250 </div>251 252 </div>253 </div>254 255 <!-- Gesture bar -->256 <div class="gesture-bar"></div>257</div>258</body>259</html>