GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Android Settings - System</title>6<style>7 body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#121212; color:#fff;11 }12 13 /* Status bar */14 .status-bar{15 position:absolute; left:0; top:0; width:100%; height:92px;16 padding:0 36px; box-sizing:border-box; color:#eaeaea;17 display:flex; align-items:center; justify-content:space-between;18 font-size:36px; letter-spacing:1px;19 }20 .status-right{ display:flex; align-items:center; gap:24px; }21 .sb-icon{ width:40px; height:40px; opacity:.85; }22 .wifi, .battery{23 width:44px; height:28px; border:2px solid #eaeaea; border-radius:4px; position:relative;24 }25 .wifi::after{26 content:""; position:absolute; inset:4px 6px; border-left:2px solid #eaeaea; border-bottom:2px solid #eaeaea;27 transform:skewX(-25deg);28 }29 .battery{ border-radius:6px; }30 .battery::after{31 content:""; position:absolute; right:-8px; top:6px; width:6px; height:14px; background:#eaeaea; border-radius:2px;32 }33 .battery .level{34 position:absolute; left:3px; top:3px; height:18px; width:24px; background:#eaeaea; border-radius:3px;35 }36 37 /* Header back + title */38 .back-btn{39 position:absolute; left:36px; top:112px; width:60px; height:60px; display:flex; align-items:center; justify-content:center;40 }41 .back-btn svg{ width:44px; height:44px; fill:#eaeaea; }42 .page-title{43 position:absolute; left:48px; top:210px; font-size:110px; font-weight:600; letter-spacing:1px;44 }45 46 /* List */47 .list{ position:absolute; left:0; right:0; top:380px; padding:0 40px 160px; box-sizing:border-box; }48 .item{49 display:flex; align-items:center; gap:36px; padding:34px 6px; border-bottom:1px solid rgba(255,255,255,0.06);50 }51 .icon{52 width:72px; height:72px; border-radius:20px; display:flex; align-items:center; justify-content:center;53 color:#bdbdbd;54 }55 .text-block .title{ font-size:46px; color:#ffffff; }56 .text-block .sub{ font-size:34px; color:#9aa0a6; margin-top:10px; }57 58 /* Simple gray icons using SVG */59 .icon svg{ width:54px; height:54px; fill:#bdbdbd; stroke:#bdbdbd; }60 61 /* Bottom home indicator */62 .home-indicator{63 position:absolute; left:50%; transform:translateX(-50%);64 bottom:40px; width:360px; height:10px; border-radius:6px; background:#e6e6e6; opacity:.85;65 }66</style>67</head>68<body>69<div id="render-target">70 71 <!-- Status bar -->72 <div class="status-bar">73 <div class="status-left">12:17</div>74 <div class="status-right">75 <div class="sb-icon" style="border:2px solid #eaeaea; border-radius:6px;"></div>76 <div class="sb-icon" style="border:2px solid #eaeaea; border-radius:6px;"></div>77 <div class="wifi"></div>78 <div class="battery"><div class="level"></div></div>79 </div>80 </div>81 82 <!-- Back button -->83 <div class="back-btn" aria-label="Back">84 <svg viewBox="0 0 24 24">85 <path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z"/>86 </svg>87 </div>88 89 <!-- Title -->90 <div class="page-title">System</div>91 92 <!-- Setting list -->93 <div class="list">94 95 <div class="item">96 <div class="icon">97 <!-- Globe -->98 <svg viewBox="0 0 24 24">99 <circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="1.6"></circle>100 <path d="M3 12h18M12 3a12 12 0 0 0 0 18M12 3a12 12 0 0 1 0 18" fill="none" stroke="#bdbdbd" stroke-width="1.4"/>101 </svg>102 </div>103 <div class="text-block">104 <div class="title">Languages & input</div>105 <div class="sub">Gboard</div>106 </div>107 </div>108 109 <div class="item">110 <div class="icon">111 <!-- Gestures / phone -->112 <svg viewBox="0 0 24 24">113 <rect x="6" y="3" width="12" height="18" rx="2" ry="2" fill="none" stroke="#bdbdbd" stroke-width="1.6"/>114 <path d="M13 7l3 0M13 10l2 0M9 14l6 0" stroke="#bdbdbd" stroke-width="1.6"/>115 </svg>116 </div>117 <div class="text-block">118 <div class="title">Gestures</div>119 </div>120 </div>121 122 <div class="item">123 <div class="icon">124 <!-- Clock -->125 <svg viewBox="0 0 24 24">126 <circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="1.6"/>127 <path d="M12 6v7l4 2" fill="none" stroke="#bdbdbd" stroke-width="1.6" stroke-linecap="round"/>128 </svg>129 </div>130 <div class="text-block">131 <div class="title">Date & time</div>132 <div class="sub">GMT+05:30 India Standard Time</div>133 </div>134 </div>135 136 <div class="item">137 <div class="icon">138 <!-- Cloud -->139 <svg viewBox="0 0 24 24">140 <path d="M7 17h10a4 4 0 0 0 0-8 5 5 0 0 0-9.7 1.6A3.5 3.5 0 0 0 7 17z" fill="none" stroke="#bdbdbd" stroke-width="1.6" />141 </svg>142 </div>143 <div class="text-block">144 <div class="title">Backup</div>145 </div>146 </div>147 148 <div class="item">149 <div class="icon">150 <!-- Phone with download -->151 <svg viewBox="0 0 24 24">152 <rect x="6" y="3" width="12" height="18" rx="2" ry="2" fill="none" stroke="#bdbdbd" stroke-width="1.6"/>153 <path d="M12 7v6m0 0l-3-3m3 3l3-3" fill="none" stroke="#bdbdbd" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>154 </svg>155 </div>156 <div class="text-block">157 <div class="title">System update</div>158 <div class="sub">Updated to Android 13</div>159 </div>160 </div>161 162 <div class="item">163 <div class="icon">164 <!-- Rule/automation: circular arrow -->165 <svg viewBox="0 0 24 24">166 <path d="M6 8a7 7 0 1 1-1 8" fill="none" stroke="#bdbdbd" stroke-width="1.6"/>167 <path d="M6 8h4M6 8v-4" fill="none" stroke="#bdbdbd" stroke-width="1.6"/>168 </svg>169 </div>170 <div class="text-block">171 <div class="title">Rules</div>172 <div class="sub">0 rules</div>173 </div>174 </div>175 176 <div class="item">177 <div class="icon">178 <!-- Person -->179 <svg viewBox="0 0 24 24">180 <circle cx="12" cy="8" r="3.2" fill="none" stroke="#bdbdbd" stroke-width="1.6"/>181 <path d="M5 20c1.5-3.5 12.5-3.5 14 0" fill="none" stroke="#bdbdbd" stroke-width="1.6" stroke-linecap="round"/>182 </svg>183 </div>184 <div class="text-block">185 <div class="title">Multiple users</div>186 <div class="sub">Signed in as Owner</div>187 </div>188 </div>189 190 <div class="item">191 <div class="icon">192 <!-- Curly braces -->193 <svg viewBox="0 0 24 24">194 <path d="M9 5c-2 0-2 2-2 3v2c0 1-1 2-2 2 1 0 2 1 2 2v2c0 1 0 3 2 3M15 5c2 0 2 2 2 3v2c0 1 1 2 2 2-1 0-2 1-2 2v2c0 1 0 3-2 3" fill="none" stroke="#bdbdbd" stroke-width="1.6" stroke-linecap="round"/>195 </svg>196 </div>197 <div class="text-block">198 <div class="title">Developer options</div>199 </div>200 </div>201 202 <div class="item" style="border-bottom:none;">203 <div class="icon">204 <!-- Reset / refresh -->205 <svg viewBox="0 0 24 24">206 <path d="M6 9V5h4M18 15a6 6 0 1 1-2-9" fill="none" stroke="#bdbdbd" stroke-width="1.6" stroke-linecap="round"/>207 </svg>208 </div>209 <div class="text-block">210 <div class="title">Reset options</div>211 </div>212 </div>213 214 </div>215 216 <div class="home-indicator"></div>217</div>218</body>219</html>