GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Android Settings Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F1F1F1;14    font-family: Arial, Helvetica, sans-serif;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 30px 40px;22    box-sizing: border-box;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #333;27    font-size: 38px;28  }29  .status-icons {30    display: flex;31    gap: 28px;32    align-items: center;33  }34  .status-icons svg { width: 46px; height: 46px; fill: none; stroke: #333; stroke-width: 2.5; }35 36  /* Search */37  .search-bar {38    margin: 10px 40px 0 40px;39    height: 140px;40    background: #fff;41    border-radius: 80px;42    box-shadow: 0 8px 18px rgba(0,0,0,0.08);43    display: flex;44    align-items: center;45    padding: 0 40px;46    box-sizing: border-box;47  }48  .search-bar svg { width: 64px; height: 64px; margin-right: 28px; stroke: #707070; stroke-width: 4; fill: none; }49  .search-text { font-size: 48px; color: #707070; }50 51  /* List */52  .content {53    padding: 40px 60px 160px 60px;54    box-sizing: border-box;55  }56  .item {57    display: flex;58    align-items: flex-start;59    margin: 46px 0 56px 0;60  }61  .icon-wrap {62    width: 96px;63    height: 96px;64    display: flex;65    align-items: center;66    justify-content: center;67    margin-right: 36px;68  }69  .icon-wrap svg {70    width: 86px;71    height: 86px;72    stroke: #222;73    fill: none;74    stroke-width: 5;75  }76  .txt {77    flex: 1;78  }79  .title {80    font-size: 56px;81    font-weight: 600;82    line-height: 74px;83    margin: 0;84    color: #1F1F1F;85  }86  .subtitle {87    font-size: 36px;88    color: #6B6B6B;89    margin-top: 10px;90  }91 92  /* Bottom home indicator */93  .home-indicator {94    position: absolute;95    bottom: 34px;96    left: 50%;97    transform: translateX(-50%);98    width: 300px;99    height: 14px;100    background: #9E9E9E;101    border-radius: 14px;102    opacity: 0.7;103  }104</style>105</head>106<body>107<div id="render-target">108  <!-- Status Bar -->109  <div class="status-bar">110    <div class="status-time">1:15</div>111    <div class="status-icons">112      <!-- Signal -->113      <svg viewBox="0 0 24 24">114        <path d="M4 18h2M4 14h6M4 10h10M4 6h14" />115      </svg>116      <!-- Wi-Fi -->117      <svg viewBox="0 0 24 24">118        <path d="M2 8c5-5 15-5 20 0" />119        <path d="M5 11c3.5-3.5 10.5-3.5 14 0" />120        <path d="M8 14c2-2 6-2 8 0" />121        <circle cx="12" cy="17.5" r="1.5" />122      </svg>123      <!-- Battery -->124      <svg viewBox="0 0 24 24">125        <rect x="2" y="6" width="18" height="12" rx="2"></rect>126        <rect x="20.5" y="9" width="2" height="6" rx="1"></rect>127        <rect x="4.5" y="8.5" width="13" height="7" fill="#333" stroke="none"></rect>128      </svg>129    </div>130  </div>131 132  <!-- Search Bar -->133  <div class="search-bar">134    <svg viewBox="0 0 24 24">135      <circle cx="11" cy="11" r="7"></circle>136      <path d="M20 20l-4.5-4.5"></path>137    </svg>138    <div class="search-text">Search settings</div>139  </div>140 141  <!-- Content List -->142  <div class="content">143    <!-- Location -->144    <div class="item">145      <div class="icon-wrap">146        <svg viewBox="0 0 24 24">147          <path d="M12 2c-4.97 0-9 4.03-9 9 0 6.75 9 13 9 13s9-6.25 9-13c0-4.97-4.03-9-9-9z"></path>148          <circle cx="12" cy="11" r="3.5"></circle>149        </svg>150      </div>151      <div class="txt">152        <div class="title">Location</div>153        <div class="subtitle">On - 4 apps have access to location</div>154      </div>155    </div>156 157    <!-- Safety & emergency -->158    <div class="item">159      <div class="icon-wrap">160        <svg viewBox="0 0 24 24">161          <path d="M12 3v18M3 12h18M5.2 5.2l13.6 13.6M18.8 5.2L5.2 18.8" />162        </svg>163      </div>164      <div class="txt">165        <div class="title">Safety &amp; emergency</div>166        <div class="subtitle">Emergency SOS, medical info, alerts</div>167      </div>168    </div>169 170    <!-- Passwords & accounts -->171    <div class="item">172      <div class="icon-wrap">173        <svg viewBox="0 0 24 24">174          <rect x="3" y="3" width="18" height="18" rx="3"></rect>175          <circle cx="9" cy="10" r="2.5"></circle>176          <path d="M5 17c1.8-3.5 7.2-3.5 9 0" />177        </svg>178      </div>179      <div class="txt">180        <div class="title">Passwords &amp; accounts</div>181        <div class="subtitle">Saved passwords, autofill, synced accounts</div>182      </div>183    </div>184 185    <!-- Digital Wellbeing & parental controls -->186    <div class="item">187      <div class="icon-wrap">188        <svg viewBox="0 0 24 24">189          <path d="M12 6c-1.9-2.4-6-1.2-6 2.2 0 3 3.5 5.9 6 8.3 2.5-2.4 6-5.3 6-8.3 0-3.4-4.1-4.6-6-2.2z"></path>190          <circle cx="12" cy="6" r="1.7"></circle>191        </svg>192      </div>193      <div class="txt">194        <div class="title">Digital Wellbeing &amp; parental controls</div>195        <div class="subtitle">Screen time, app timers, bedtime schedules</div>196      </div>197    </div>198 199    <!-- Google -->200    <div class="item">201      <div class="icon-wrap">202        <svg viewBox="0 0 24 24">203          <circle cx="12" cy="12" r="10"></circle>204          <text x="12" y="16" text-anchor="middle" font-size="12" fill="#222" stroke="none" font-family="Arial">G</text>205        </svg>206      </div>207      <div class="txt">208        <div class="title">Google</div>209        <div class="subtitle">Services &amp; preferences</div>210      </div>211    </div>212 213    <!-- System -->214    <div class="item">215      <div class="icon-wrap">216        <svg viewBox="0 0 24 24">217          <circle cx="12" cy="12" r="10"></circle>218          <path d="M12 7v8M12 17.5v.5" />219        </svg>220      </div>221      <div class="txt">222        <div class="title">System</div>223        <div class="subtitle">Languages, gestures, time, backup</div>224      </div>225    </div>226 227    <!-- About phone -->228    <div class="item">229      <div class="icon-wrap">230        <svg viewBox="0 0 24 24">231          <rect x="6" y="3" width="12" height="18" rx="2"></rect>232          <rect x="10" y="17" width="4" height="1.5" rx="0.75" />233        </svg>234      </div>235      <div class="txt">236        <div class="title">About phone</div>237        <div class="subtitle">Pixel 5a</div>238      </div>239    </div>240 241    <!-- Tips & support -->242    <div class="item">243      <div class="icon-wrap">244        <svg viewBox="0 0 24 24">245          <circle cx="12" cy="12" r="10"></circle>246          <path d="M12 16v0.5M11.5 8.5c0-1.4 2.5-1.4 2.5 0 0 1.1-1.3 1.6-1.3 2.7v1.3" />247        </svg>248      </div>249      <div class="txt">250        <div class="title">Tips &amp; support</div>251        <div class="subtitle">Help articles, phone &amp; chat</div>252      </div>253    </div>254  </div>255 256  <!-- Bottom pill -->257  <div class="home-indicator"></div>258</div>259</body>260</html>