GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Settings UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111111;15    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16    color: #F4F4F4;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 120px;26    background: #2a2a2a;27    display: flex;28    align-items: center;29    padding: 0 40px;30    box-sizing: border-box;31    color: #eaeaea;32    font-size: 44px;33    letter-spacing: 1px;34  }35  .status-right {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .icon-dot {42    width: 14px;43    height: 14px;44    background: #d9d9d9;45    border-radius: 50%;46  }47  .icon-cloud {48    width: 56px; height: 40px;49  }50  .icon-bell {51    width: 40px; height: 40px;52  }53  .icon-wifi {54    width: 48px; height: 40px;55  }56  .icon-battery {57    width: 56px; height: 40px;58  }59  .status-icon svg { display: block; }60 61  /* App bar */62  .app-bar {63    position: absolute;64    top: 120px;65    left: 0;66    width: 100%;67    height: 120px;68    background: #3a3a3a;69    display: flex;70    align-items: center;71    box-sizing: border-box;72    padding: 0 40px;73  }74  .back-btn {75    width: 72px;76    height: 72px;77    display: inline-flex;78    align-items: center;79    justify-content: center;80    margin-right: 24px;81  }82  .title {83    font-size: 52px;84    color: #eaeaea;85  }86 87  /* List */88  .content {89    position: absolute;90    top: 240px;91    left: 0;92    width: 100%;93    padding: 20px 40px 200px 40px;94    box-sizing: border-box;95  }96  .item {97    display: flex;98    align-items: center;99    justify-content: space-between;100    padding: 40px 0;101    font-size: 48px;102    color: #ffffff;103    border-bottom: 0;104  }105  .item + .item { margin-top: 18px; }106  .subtle {107    color: #d6d6d6;108    font-size: 44px;109  }110 111  /* Sign out button */112  .signout-wrap {113    width: 100%;114    display: flex;115    justify-content: center;116    margin-top: 80px;117  }118  .signout-btn {119    background: #efede7;120    color: #1a1a1a;121    font-size: 48px;122    padding: 28px 56px;123    border-radius: 28px;124    box-shadow: none;125  }126 127  /* Bottom gesture bar */128  .gesture-bar {129    position: absolute;130    bottom: 24px;131    left: 50%;132    transform: translateX(-50%);133    width: 300px;134    height: 18px;135    background: #e6e6e6;136    border-radius: 9px;137    opacity: 0.8;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status bar -->145  <div class="status-bar">146    <div class="time">7:36</div>147    <div class="status-right">148      <div class="status-icon icon-bell">149        <svg viewBox="0 0 24 24" width="40" height="40" fill="#eaeaea">150          <path d="M12 2a1 1 0 0 0-1 1v1.1A6 6 0 0 0 5 10v4l-2 2v1h18v-1l-2-2v-4a6 6 0 0 0-6-5.9V3a1 1 0 0 0-1-1zM9 19a3 3 0 0 0 6 0H9z"/>151        </svg>152      </div>153      <div class="status-icon icon-cloud">154        <svg viewBox="0 0 24 24" width="56" height="40" fill="#eaeaea">155          <path d="M6 18h11a4 4 0 0 0 0-8h-.3A6 6 0 0 0 5 11.5 3.5 3.5 0 0 0 6 18z"/>156        </svg>157      </div>158      <div class="icon-dot"></div>159      <div class="status-icon icon-wifi">160        <svg viewBox="0 0 24 24" width="48" height="40" fill="#eaeaea">161          <path d="M12 18l2 2-2 2-2-2 2-2zm-4-4l4 4 4-4a6 6 0 0 0-8 0zm-4-4l8 8 8-8c-4.4-4.4-11.6-4.4-16 0z"/>162        </svg>163      </div>164      <div class="status-icon icon-battery">165        <svg viewBox="0 0 24 24" width="56" height="40" fill="#eaeaea">166          <rect x="2" y="7" width="18" height="10" rx="2" ry="2"></rect>167          <rect x="21" y="10" width="2" height="4"></rect>168        </svg>169      </div>170    </div>171  </div>172 173  <!-- App bar -->174  <div class="app-bar">175    <div class="back-btn">176      <svg viewBox="0 0 24 24" width="72" height="72" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">177        <path d="M15 6 L9 12 L15 18"></path>178      </svg>179    </div>180    <div class="title">Settings</div>181  </div>182 183  <!-- Content list -->184  <div class="content">185    <div class="item">186      <div>Region</div>187      <div class="subtle">🇮🇳 India - English</div>188    </div>189 190    <div class="item">191      <div>Invite Friends</div>192    </div>193 194    <div class="item">195      <div>Notification Preferences</div>196    </div>197 198    <div class="item">199      <div>Privacy Policy</div>200    </div>201 202    <div class="item">203      <div>Terms of Service</div>204    </div>205 206    <div class="item">207      <div>Cookpad Community Guidelines</div>208    </div>209 210    <div class="item">211      <div>Blocked List</div>212    </div>213 214    <div class="item">215      <div>Frequently Asked Questions</div>216    </div>217 218    <div class="item">219      <div>Contact Us</div>220    </div>221 222    <div class="item">223      <div>About this Application</div>224    </div>225 226    <div class="item">227      <div>Theme</div>228    </div>229 230    <div class="signout-wrap">231      <div class="signout-btn">Sign out</div>232    </div>233  </div>234 235  <!-- Bottom gesture bar -->236  <div class="gesture-bar"></div>237</div>238</body>239</html>