GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>System Settings UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F7F7F7;14 color: #212121;15 }16 17 /* Status bar */18 .statusbar {19 height: 120px;20 padding: 0 40px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #1F1F1F;25 font-size: 36px;26 letter-spacing: 0.2px;27 }28 .status-icons { display: flex; align-items: center; gap: 26px; }29 .status-icons svg { width: 42px; height: 42px; stroke: #1F1F1F; }30 31 /* Header/App bar */32 .appbar {33 padding: 20px 60px 10px 60px;34 position: relative;35 }36 .back-btn {37 width: 72px; height: 72px;38 display: inline-flex; align-items: center; justify-content: center;39 color: #1F1F1F;40 margin-top: 20px;41 }42 .back-btn svg { width: 48px; height: 48px; stroke: #1F1F1F; }43 .title {44 margin-top: 40px;45 font-size: 96px;46 font-weight: 600;47 letter-spacing: -0.5px;48 }49 50 /* List */51 .list { padding: 30px 60px 140px 60px; }52 .item {53 display: flex;54 align-items: center;55 padding: 36px 0;56 border-radius: 8px;57 }58 .icon {59 width: 120px;60 display: flex; align-items: center; justify-content: center;61 }62 .icon svg {63 width: 64px; height: 64px;64 stroke: #616161; fill: none; stroke-width: 4.5;65 }66 .text {67 flex: 1;68 border-bottom: 0 solid transparent;69 }70 .title-text {71 font-size: 54px;72 color: #212121;73 margin-bottom: 8px;74 }75 .subtitle {76 font-size: 32px;77 color: #757575;78 }79 80 /* Bottom home indicator */81 .home-indicator {82 position: absolute;83 bottom: 28px; left: 50%;84 transform: translateX(-50%);85 width: 300px; height: 10px;86 background: #BDBDBD;87 border-radius: 10px;88 opacity: 0.9;89 }90</style>91</head>92<body>93<div id="render-target">94 95 <!-- Status bar -->96 <div class="statusbar">97 <div class="time">1:16</div>98 <div class="status-icons">99 <!-- Wi-Fi -->100 <svg viewBox="0 0 24 24">101 <path d="M2 8c5-4 15-4 20 0" />102 <path d="M5 12c3-3 11-3 14 0" />103 <path d="M8 16c2-2 6-2 8 0" />104 <circle cx="12" cy="20" r="1.5" fill="#1F1F1F" stroke="none"/>105 </svg>106 <!-- Battery -->107 <svg viewBox="0 0 28 24">108 <rect x="2" y="6" width="20" height="12" rx="2" />109 <rect x="23" y="9" width="3" height="6" rx="1" />110 <rect x="4" y="8" width="12" height="8" fill="#1F1F1F" stroke="none"/>111 </svg>112 </div>113 </div>114 115 <!-- App bar / Title -->116 <div class="appbar">117 <div class="back-btn">118 <svg viewBox="0 0 24 24">119 <path d="M15 4L7 12l8 8" />120 </svg>121 </div>122 <div class="title">System</div>123 </div>124 125 <!-- List items -->126 <div class="list">127 <!-- Languages & input -->128 <div class="item">129 <div class="icon">130 <svg viewBox="0 0 24 24">131 <circle cx="12" cy="12" r="9" />132 <path d="M3 12h18" />133 <path d="M12 3v18" />134 </svg>135 </div>136 <div class="text">137 <div class="title-text">Languages & input</div>138 <div class="subtitle">Gboard</div>139 </div>140 </div>141 142 <!-- Gestures -->143 <div class="item">144 <div class="icon">145 <svg viewBox="0 0 24 24">146 <rect x="6" y="3" width="12" height="18" rx="2" />147 <path d="M9 7h6" />148 <path d="M9 17h6" />149 <path d="M7 13l2 2" />150 <path d="M15 11l2-2" />151 </svg>152 </div>153 <div class="text">154 <div class="title-text">Gestures</div>155 </div>156 </div>157 158 <!-- Date & time -->159 <div class="item">160 <div class="icon">161 <svg viewBox="0 0 24 24">162 <circle cx="12" cy="12" r="9" />163 <path d="M12 12V7" />164 <path d="M12 12l4 2" />165 </svg>166 </div>167 <div class="text">168 <div class="title-text">Date & time</div>169 <div class="subtitle">GMT+05:30 India Standard Time</div>170 </div>171 </div>172 173 <!-- Backup -->174 <div class="item">175 <div class="icon">176 <svg viewBox="0 0 24 24">177 <path d="M6 15c-2.5 0-3-3.5-.4-4.6C6.2 9 8 7 10.7 7c2.1 0 3.6 1.2 4.2 2.5 2.7.2 4.1 1.9 4.1 3.7 0 2-1.7 3.8-3.8 3.8H6z"/>178 </svg>179 </div>180 <div class="text">181 <div class="title-text">Backup</div>182 </div>183 </div>184 185 <!-- System update -->186 <div class="item">187 <div class="icon">188 <svg viewBox="0 0 24 24">189 <rect x="6" y="3" width="12" height="18" rx="2" />190 <path d="M12 8v8" />191 <path d="M9 13l3 3 3-3" />192 </svg>193 </div>194 <div class="text">195 <div class="title-text">System update</div>196 <div class="subtitle">Updated to Android 13</div>197 </div>198 </div>199 200 <!-- Rules -->201 <div class="item">202 <div class="icon">203 <svg viewBox="0 0 24 24">204 <path d="M7 12a5 5 0 0 1 9.5-2" />205 <path d="M17 12a5 5 0 0 1-9.5 2" />206 <path d="M18 7l3 1-1 3" />207 </svg>208 </div>209 <div class="text">210 <div class="title-text">Rules</div>211 <div class="subtitle">0 rules</div>212 </div>213 </div>214 215 <!-- Multiple users -->216 <div class="item">217 <div class="icon">218 <svg viewBox="0 0 24 24">219 <circle cx="12" cy="8" r="4" />220 <path d="M4 20c2-3 6-4 8-4s6 1 8 4" />221 </svg>222 </div>223 <div class="text">224 <div class="title-text">Multiple users</div>225 <div class="subtitle">Signed in as Owner</div>226 </div>227 </div>228 229 <!-- Developer options -->230 <div class="item">231 <div class="icon">232 <svg viewBox="0 0 24 24">233 <path d="M9 5L3 12l6 7" />234 <path d="M15 5l6 7-6 7" />235 </svg>236 </div>237 <div class="text">238 <div class="title-text">Developer options</div>239 </div>240 </div>241 242 <!-- Reset options -->243 <div class="item">244 <div class="icon">245 <svg viewBox="0 0 24 24">246 <circle cx="12" cy="12" r="9" />247 <path d="M12 12V8" />248 <path d="M12 12l-4 2" />249 </svg>250 </div>251 <div class="text">252 <div class="title-text">Reset options</div>253 </div>254 </div>255 </div>256 257 <div class="home-indicator"></div>258</div>259</body>260</html>