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>Android Settings Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F3F3F4;15 color: #222;16 }17 18 /* Status bar */19 .statusbar {20 height: 120px;21 padding: 28px 40px 0 40px;22 box-sizing: border-box;23 color: #4a4a4a;24 font-size: 36px;25 display: flex;26 align-items: flex-start;27 justify-content: space-between;28 }29 .status-icons {30 display: flex;31 gap: 26px;32 align-items: center;33 }34 .status-icons svg { width: 40px; height: 40px; stroke: #4a4a4a; }35 36 /* Search */37 .search {38 margin: 24px 70px 10px 70px;39 height: 120px;40 background: #FFFFFF;41 border: 1px solid #E4E4E4;42 border-radius: 60px;43 box-sizing: border-box;44 display: flex;45 align-items: center;46 padding: 0 36px 0 40px;47 gap: 26px;48 }49 .search svg { width: 56px; height: 56px; stroke: #6f6f6f; }50 .search span {51 color: #6f6f6f;52 font-size: 46px;53 letter-spacing: 0.2px;54 }55 56 /* List */57 .list {58 margin: 30px 40px 0 70px;59 }60 .item {61 display: flex;62 align-items: center;63 gap: 36px;64 padding: 30px 10px;65 }66 .icon {67 width: 110px;68 height: 110px;69 display: flex;70 align-items: center;71 justify-content: center;72 }73 .icon svg {74 width: 72px;75 height: 72px;76 stroke: #202124;77 fill: none;78 stroke-width: 4.5;79 stroke-linecap: round;80 stroke-linejoin: round;81 }82 .text {83 flex: 1;84 border-bottom: 0px solid #e8e8e8;85 }86 .title {87 font-size: 52px;88 margin: 6px 0 6px 0;89 color: #202124;90 }91 .subtitle {92 font-size: 32px;93 color: #6f6f6f;94 }95 96 /* Slight vertical rhythm */97 .item + .item { margin-top: 8px; }98</style>99</head>100<body>101<div id="render-target">102 103 <!-- Status Bar -->104 <div class="statusbar">105 <div class="time">1:15</div>106 <div class="status-icons">107 <!-- Wi‑Fi -->108 <svg viewBox="0 0 24 24" fill="none">109 <path d="M2 8c6-6 14-6 20 0" />110 <path d="M6 12c4-4 8-4 12 0" />111 <path d="M10 16c2-2 4-2 6 0" />112 <circle cx="16" cy="20" r="1.2" fill="#4a4a4a" stroke="none"/>113 </svg>114 <!-- Battery -->115 <svg viewBox="0 0 28 24" fill="none">116 <rect x="2" y="6" width="20" height="12" rx="2"></rect>117 <rect x="22.5" y="9" width="3" height="6" rx="1"></rect>118 <rect x="4.5" y="8.5" width="15" height="7" rx="1" fill="#4a4a4a" stroke="none"></rect>119 </svg>120 </div>121 </div>122 123 <!-- Search -->124 <div class="search">125 <svg viewBox="0 0 24 24">126 <circle cx="10.5" cy="10.5" r="7.5"></circle>127 <path d="M16.5 16.5L22 22"></path>128 </svg>129 <span>Search settings</span>130 </div>131 132 <!-- Settings List -->133 <div class="list">134 135 <!-- Storage -->136 <div class="item">137 <div class="icon">138 <svg viewBox="0 0 24 24">139 <rect x="4" y="5" width="16" height="14" rx="2"></rect>140 <path d="M7 9h10M7 12h10M7 15h10"></path>141 </svg>142 </div>143 <div class="text">144 <div class="title">Storage</div>145 <div class="subtitle">18% used - 105 GB free</div>146 </div>147 </div>148 149 <!-- Sound & vibration -->150 <div class="item">151 <div class="icon">152 <svg viewBox="0 0 24 24">153 <path d="M4 14h4l5 4V6L8 10H4z"></path>154 <path d="M17 9c1.6 1.6 1.6 4.4 0 6"></path>155 <path d="M19.5 7c2.8 2.8 2.8 7.2 0 10"></path>156 </svg>157 </div>158 <div class="text">159 <div class="title">Sound & vibration</div>160 <div class="subtitle">Volume, haptics, Do Not Disturb</div>161 </div>162 </div>163 164 <!-- Display -->165 <div class="item">166 <div class="icon">167 <svg viewBox="0 0 24 24">168 <circle cx="12" cy="12" r="4"></circle>169 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.8 4.8l2.1 2.1M17.1 17.1l2.1 2.1M4.8 19.2l2.1-2.1M17.1 6.9l2.1-2.1"></path>170 </svg>171 </div>172 <div class="text">173 <div class="title">Display</div>174 <div class="subtitle">Dark theme, font size, brightness</div>175 </div>176 </div>177 178 <!-- Wallpaper & style -->179 <div class="item">180 <div class="icon">181 <svg viewBox="0 0 24 24">182 <path d="M12 4a7 7 0 1 0 0 14 5 5 0 0 0 5-5 7 7 0 0 0-5-9z"></path>183 <circle cx="9" cy="12.5" r="1.1"></circle>184 <circle cx="7.2" cy="9" r="1.1"></circle>185 <circle cx="11.2" cy="8" r="1.1"></circle>186 </svg>187 </div>188 <div class="text">189 <div class="title">Wallpaper & style</div>190 <div class="subtitle">Colors, themed icons, app grid</div>191 </div>192 </div>193 194 <!-- Accessibility -->195 <div class="item">196 <div class="icon">197 <svg viewBox="0 0 24 24">198 <circle cx="12" cy="5" r="2.2"></circle>199 <path d="M4 9h16M12 9v9M9 13l-2 7M15 13l2 7"></path>200 </svg>201 </div>202 <div class="text">203 <div class="title">Accessibility</div>204 <div class="subtitle">Display, interaction, audio</div>205 </div>206 </div>207 208 <!-- Security & privacy -->209 <div class="item">210 <div class="icon">211 <svg viewBox="0 0 24 24">212 <path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"></path>213 <path d="M9 12l2 2 4-4"></path>214 </svg>215 </div>216 <div class="text">217 <div class="title">Security & privacy</div>218 <div class="subtitle">App security, device lock, permissions</div>219 </div>220 </div>221 222 <!-- Location -->223 <div class="item">224 <div class="icon">225 <svg viewBox="0 0 24 24">226 <path d="M12 21s7-7.4 7-11.2A7 7 0 0 0 5 9.8C5 13.6 12 21 12 21z"></path>227 <circle cx="12" cy="9.8" r="2.2"></circle>228 </svg>229 </div>230 <div class="text">231 <div class="title">Location</div>232 <div class="subtitle">On - 4 apps have access to location</div>233 </div>234 </div>235 236 <!-- Safety & emergency -->237 <div class="item">238 <div class="icon">239 <svg viewBox="0 0 24 24">240 <path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4"></path>241 </svg>242 </div>243 <div class="text">244 <div class="title">Safety & emergency</div>245 <div class="subtitle">Emergency SOS, medical info, alerts</div>246 </div>247 </div>248 249 <!-- Passwords & accounts (partially visible near bottom in screenshot) -->250 <div class="item">251 <div class="icon">252 <svg viewBox="0 0 24 24">253 <rect x="3" y="5" width="18" height="14" rx="2"></rect>254 <circle cx="8" cy="11" r="2"></circle>255 <path d="M13 15h6"></path>256 </svg>257 </div>258 <div class="text">259 <div class="title">Passwords & accounts</div>260 <div class="subtitle">Manage accounts, autofill</div>261 </div>262 </div>263 264 </div>265</div>266</body>267</html>