GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>General Settings UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #FFFFFF;14  }15 16  /* Top status bar */17  .statusbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 100%;22    height: 110px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 40px;27    font-size: 42px;28    color: #fff;29    opacity: 0.95;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 26px;35    font-size: 36px;36    color: #dddddd;37  }38  .icon-battery, .icon-wifi, .icon-signal {39    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;40  }41  .icon-battery svg, .icon-wifi svg, .icon-signal svg { fill: #ddd; }42 43  /* Back button and title */44  .back-btn {45    position: absolute;46    top: 140px;47    left: 40px;48    width: 64px;49    height: 64px;50    border-radius: 32px;51    display: flex;52    align-items: center;53    justify-content: center;54    color: #fff;55  }56  .title {57    position: absolute;58    top: 190px;59    left: 40px;60    font-size: 74px;61    font-weight: 800;62    letter-spacing: 0.5px;63  }64 65  /* Card list container */66  .card {67    position: absolute;68    top: 360px;69    left: 30px;70    width: 1020px;71    border-radius: 44px;72    background: #1E1E1E;73    box-shadow: 0 2px 16px rgba(0,0,0,0.6);74    overflow: hidden;75  }76  .row {77    height: 140px;78    display: flex;79    align-items: center;80    justify-content: space-between;81    padding: 0 56px;82    border-top: 1px solid #2A2A2A;83    font-size: 44px;84  }85  .row:first-child { border-top: none; }86  .label { color: #FFFFFF; }87  .right-text { color: #CFCFCF; font-size: 40px; }88 89  /* Chevron for "Voice" row */90  .right-inline {91    display: inline-flex;92    align-items: center;93    gap: 20px;94  }95  .chevron {96    width: 28px; height: 28px;97  }98  .chevron svg { fill: #CFCFCF; }99 100  /* Toggle switch */101  .toggle {102    width: 150px;103    height: 70px;104    border-radius: 35px;105    background: #3A3A3A;106    position: relative;107    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);108  }109  .toggle .knob {110    position: absolute;111    top: 8px;112    left: 10px;113    width: 54px;114    height: 54px;115    background: #FFFFFF;116    border-radius: 50%;117    box-shadow: 0 2px 6px rgba(0,0,0,0.5);118  }119  .toggle.active { background: #F2A93C; }120  .toggle.active .knob { left: 86px; }121 122  /* Delete Account style */123  .danger { color: #E53935; font-weight: 600; }124 125  /* Home pill */126  .home-indicator {127    position: absolute;128    bottom: 42px;129    left: 50%;130    transform: translateX(-50%);131    width: 500px;132    height: 16px;133    background: #EDEDED;134    border-radius: 10px;135    opacity: 0.9;136  }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status bar -->143  <div class="statusbar">144    <div class="status-left">8:40</div>145    <div class="status-right">146      <span>🔒</span>147      <span class="icon-signal">148        <svg viewBox="0 0 24 24">149          <path d="M2 18h2v2H2v-2zm4-4h2v6H6v-6zm4-4h2v10h-2V10zm4-4h2v14h-2V6zm4-4h2v18h-2V2z"/>150        </svg>151      </span>152      <span class="icon-wifi">153        <svg viewBox="0 0 24 24">154          <path d="M12 20c1.104 0 2-.896 2-2s-.896-2-2-2-2 .896-2 2 .896 2 2 2zm6.93-7.36a11.96 11.96 0 0 0-13.86 0l1.41 1.41a9.96 9.96 0 0 1 11.04 0l1.41-1.41zm3.07-3.07a16 16 0 0 0-20 0l1.42 1.42a14 14 0 0 1 17.16 0l1.42-1.42z"/>155        </svg>156      </span>157      <span class="icon-battery">158        <svg viewBox="0 0 24 24">159          <path d="M16 4h1v2h3v12h-3v2h-1V4zM2 6h12v12H2V6z"/>160        </svg>161      </span>162    </div>163  </div>164 165  <!-- Back button -->166  <div class="back-btn">167    <svg width="42" height="42" viewBox="0 0 24 24">168      <path fill="#FFFFFF" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>169    </svg>170  </div>171 172  <!-- Title -->173  <div class="title">General Settings</div>174 175  <!-- Settings card -->176  <div class="card">177    <div class="row">178      <div class="label">Measurement Units</div>179      <div class="right-text">US / METRIC</div>180    </div>181 182    <div class="row">183      <div class="label">Voice</div>184      <div class="right-inline">185        <span class="right-text">Joanna</span>186        <span class="chevron">187          <svg viewBox="0 0 24 24">188            <path d="M9 6l6 6-6 6z"/>189          </svg>190        </span>191      </div>192    </div>193 194    <div class="row">195      <div class="label">Push Notification</div>196      <div class="toggle active">197        <div class="knob"></div>198      </div>199    </div>200 201    <div class="row">202      <div class="label">CookAssist</div>203      <div class="toggle active">204        <div class="knob"></div>205      </div>206    </div>207 208    <div class="row">209      <div class="label">Show Purchasable Content</div>210      <div class="toggle active">211        <div class="knob"></div>212      </div>213    </div>214 215    <div class="row">216      <div class="label">Manage Subscription</div>217      <div class="right-text"></div>218    </div>219 220    <div class="row">221      <div class="danger">Delete Account</div>222      <div></div>223    </div>224  </div>225 226  <!-- Bottom home indicator -->227  <div class="home-indicator"></div>228 229</div>230</body>231</html>