GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Settings UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;14 color: #EDEDED;15 }16 .status-bar {17 position: absolute;18 top: 24px;19 left: 48px;20 right: 48px;21 height: 64px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #EDEDED;26 font-size: 36px;27 }28 .status-left, .status-right {29 display: flex;30 align-items: center;31 gap: 18px;32 }33 .status-icon {34 width: 36px;35 height: 28px;36 background: #2A2A2A;37 border-radius: 4px;38 }39 .cloud {40 width: 40px; height: 28px; position: relative;41 border-radius: 14px; background: #2A2A2A;42 }43 .title {44 position: absolute;45 top: 120px;46 left: 48px;47 font-size: 96px;48 font-weight: 600;49 letter-spacing: 0.5px;50 }51 .avatar {52 position: absolute;53 top: 150px;54 right: 60px;55 width: 120px;56 height: 120px;57 border-radius: 60px;58 background: #6A39D8;59 display: flex;60 align-items: center;61 justify-content: center;62 font-weight: 700;63 font-size: 64px;64 }65 .search {66 position: absolute;67 top: 320px;68 left: 48px;69 width: 984px;70 height: 116px;71 border-radius: 58px;72 background: #242424;73 display: flex;74 align-items: center;75 padding: 0 36px;76 box-sizing: border-box;77 color: #BDBDBD;78 font-size: 40px;79 gap: 24px;80 }81 .search svg { width: 54px; height: 54px; fill: #BDBDBD; }82 .list {83 position: absolute;84 top: 520px;85 left: 48px;86 right: 48px;87 }88 .item {89 display: grid;90 grid-template-columns: 100px 1fr;91 column-gap: 36px;92 padding: 34px 0;93 border-radius: 16px;94 }95 .item + .item { margin-top: 16px; }96 .icon-box { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }97 .icon-box svg { width: 72px; height: 72px; fill: #D0D0D0; }98 .item-title {99 font-size: 56px;100 margin-top: 4px;101 color: #F1F1F1;102 }103 .item-sub {104 font-size: 36px;105 color: #A6A6A6;106 margin-top: 12px;107 }108 /* bottom gesture pill */109 .gesture-pill {110 position: absolute;111 bottom: 48px;112 left: 50%;113 transform: translateX(-50%);114 width: 220px;115 height: 12px;116 background: #EDEDED;117 border-radius: 8px;118 opacity: 0.85;119 }120</style>121</head>122<body>123<div id="render-target">124 125 <!-- Status Bar -->126 <div class="status-bar">127 <div class="status-left">128 <div style="font-weight:600;">12:15</div>129 <div class="status-icon"></div>130 <div class="status-icon"></div>131 <div class="cloud"></div>132 </div>133 <div class="status-right">134 <!-- wifi icon -->135 <svg viewBox="0 0 24 24" width="40" height="40">136 <path fill="#EDEDED" d="M12 20l3-3-3-3-3 3 3 3zm-7-8c4-4 14-4 18 0l-2 2c-3-3-11-3-14 0l-2-2zm3 3c2.8-2.8 9.2-2.8 12 0l-2 2c-2-2-6-2-8 0l-2-2z"/>137 </svg>138 <!-- battery icon -->139 <svg viewBox="0 0 24 24" width="44" height="44">140 <path fill="#EDEDED" d="M16 6h2v2h2v8h-2v2h-2v-2H4V8h12V6zm-1 10V9H5v7h10z"/>141 </svg>142 </div>143 </div>144 145 <!-- Title -->146 <div class="title">Settings</div>147 148 <!-- Avatar -->149 <div class="avatar">C</div>150 151 <!-- Search Bar -->152 <div class="search">153 <svg viewBox="0 0 24 24">154 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 119.5 5a4.5 4.5 0 010 9z"/>155 </svg>156 <div>Search settings</div>157 </div>158 159 <!-- List Items -->160 <div class="list">161 162 <div class="item">163 <div class="icon-box">164 <!-- Network & internet -->165 <svg viewBox="0 0 24 24">166 <path d="M12 20l3-3-3-3-3 3 3 3zm-7-8c4-4 14-4 18 0l-2 2c-3-3-11-3-14 0l-2-2z"/>167 </svg>168 </div>169 <div>170 <div class="item-title">Network & internet</div>171 <div class="item-sub">Mobile, Wi‑Fi, hotspot</div>172 </div>173 </div>174 175 <div class="item">176 <div class="icon-box">177 <!-- Connected devices -->178 <svg viewBox="0 0 24 24">179 <path d="M4 6h10v8H4V6zm1 1v6h8V7H5zm13 11H8v-2h10v2zm-1-9h3v8h-3V9z"/>180 </svg>181 </div>182 <div>183 <div class="item-title">Connected devices</div>184 <div class="item-sub">Bluetooth, pairing</div>185 </div>186 </div>187 188 <div class="item">189 <div class="icon-box">190 <!-- Apps -->191 <svg viewBox="0 0 24 24">192 <path d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z"/>193 </svg>194 </div>195 <div>196 <div class="item-title">Apps</div>197 <div class="item-sub">Assistant, recent apps, default apps</div>198 </div>199 </div>200 201 <div class="item">202 <div class="icon-box">203 <!-- Notifications -->204 <svg viewBox="0 0 24 24">205 <path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 002 2zm6-6V9a6 6 0 00-12 0v7L4 18v2h16v-2l-2-2z"/>206 </svg>207 </div>208 <div>209 <div class="item-title">Notifications</div>210 <div class="item-sub">Notification history, conversations</div>211 </div>212 </div>213 214 <div class="item">215 <div class="icon-box">216 <!-- Battery -->217 <svg viewBox="0 0 24 24">218 <path d="M16 7h1v2h2v6h-2v2h-1v-2H5V9h11V7zm-2 8V11H7v4h7z"/>219 </svg>220 </div>221 <div>222 <div class="item-title">Battery</div>223 <div class="item-sub">91% - 20 min left until full</div>224 </div>225 </div>226 227 <div class="item">228 <div class="icon-box">229 <!-- Storage -->230 <svg viewBox="0 0 24 24">231 <path d="M4 5h16v3H4V5zm0 5h16v3H4v-3zm0 5h16v3H4v-3z"/>232 </svg>233 </div>234 <div>235 <div class="item-title">Storage</div>236 <div class="item-sub">17% used - 106 GB free</div>237 </div>238 </div>239 240 <div class="item">241 <div class="icon-box">242 <!-- Sound & vibration -->243 <svg viewBox="0 0 24 24">244 <path d="M3 10h4l5-4v12l-5-4H3V10zm16 1a3 3 0 010 6v-2a1 1 0 000-2v-2zm0-6a7 7 0 010 14v-2a5 5 0 000-10V5z"/>245 </svg>246 </div>247 <div>248 <div class="item-title">Sound & vibration</div>249 <div class="item-sub">Volume, haptics, Do Not Disturb</div>250 </div>251 </div>252 253 </div>254 255 <!-- Bottom gesture pill -->256 <div class="gesture-pill"></div>257 258</div>259</body>260</html>