GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Profile 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: #212326;14    color: #ECEFF1;15  }16 17  .status-bar {18    height: 120px;19    padding: 0 40px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #E0E0E0;24    font-size: 36px;25    letter-spacing: 0.5px;26  }27  .status-left { display: flex; align-items: center; gap: 20px; }28  .status-right { display: flex; align-items: center; gap: 28px; }29  .status-icon svg { fill: #D0D3D6; }30 31  .header {32    padding: 40px 60px 10px 60px;33    position: relative;34  }35  .title {36    font-size: 110px;37    font-weight: 300;38    line-height: 1.1;39    margin-top: 30px;40    color: #F5F5F5;41  }42  .header-actions {43    position: absolute;44    right: 60px;45    top: 70px;46    display: flex;47    align-items: center;48    gap: 30px;49  }50  .gear-btn {51    width: 72px; height: 72px; border-radius: 36px;52    display: flex; align-items: center; justify-content: center;53    background: #2B2E32;54  }55  .avatar {56    width: 88px; height: 88px; border-radius: 44px;57    background: #0FA0A0; color: #fff;58    display: flex; align-items: center; justify-content: center;59    font-weight: 600; font-size: 46px;60  }61 62  .section {63    padding: 10px 60px 0 60px;64  }65  .section h3 {66    margin: 32px 0 24px 0;67    font-weight: 500;68    font-size: 40px;69    color: #CFD8DC;70  }71 72  .card-grid {73    display: grid;74    grid-template-columns: 1fr 1fr;75    gap: 30px;76  }77 78  .card {79    position: relative;80    border: 2px solid #90949A;81    border-radius: 22px;82    padding: 26px 28px;83    height: 190px;84    background: rgba(255,255,255,0.02);85  }86  .card .label {87    font-size: 30px;88    color: #B0B6BC;89    margin-bottom: 16px;90    display: flex;91    align-items: center;92  }93  .card .value {94    font-size: 64px;95    font-weight: 500;96    color: #E9ECEF;97  }98  .card .dropdown {99    position: absolute;100    right: 20px;101    bottom: 22px;102    width: 44px; height: 44px;103    display: flex; align-items: center; justify-content: center;104  }105  .card.accent {106    border-color: #6FA3FF;107    box-shadow: 0 0 0 2px rgba(111,163,255,0.15) inset;108  }109  .card.accent .label {110    color: #76A8FF;111  }112  .card .accent-line {113    position: absolute;114    top: -2px;115    left: 18px;116    width: 220px;117    height: 4px;118    background: #6FA3FF;119    border-radius: 3px;120  }121 122  .divider {123    height: 1px;124    background: #383C40;125    margin: 26px 0 0 0;126  }127 128  .toggle-row {129    display: flex;130    align-items: center;131    justify-content: space-between;132    padding-right: 60px;133  }134  .switch {135    width: 128px; height: 68px; background: #55595E;136    border-radius: 34px; position: relative;137  }138  .switch .knob {139    width: 60px; height: 60px; border-radius: 30px;140    background: #C9CDD2;141    position: absolute; left: 4px; top: 4px;142    box-shadow: 0 2px 4px rgba(0,0,0,0.4);143  }144 145  .bottom-nav {146    position: absolute;147    left: 0; right: 0; bottom: 0;148    height: 180px;149    background: #2A2D31;150    border-top: 1px solid #3A3D41;151    display: flex;152    align-items: center;153    justify-content: space-around;154    padding: 0 40px;155  }156  .nav-item {157    display: flex;158    flex-direction: column;159    align-items: center;160    gap: 16px;161    color: #C7CCD1;162    font-size: 34px;163  }164  .nav-item.active { color: #74A6FF; }165  .nav-icon svg { fill: currentColor; }166 167  /* small helper */168  .small-muted { color: #9FA5AA; font-size: 28px; }169</style>170</head>171<body>172<div id="render-target">173 174  <!-- Status Bar -->175  <div class="status-bar">176    <div class="status-left">177      <div>11:58</div>178      <div class="status-icon">179        <!-- small play triangle -->180        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M8 5l11 7-11 7V5z"/></svg>181      </div>182    </div>183    <div class="status-right">184      <!-- location pin -->185      <div class="status-icon"><svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg></div>186      <!-- wifi -->187      <div class="status-icon"><svg width="32" height="28" viewBox="0 0 24 24"><path d="M2 8a14 14 0 0 1 20 0l-2 2a11 11 0 0 0-16 0L2 8zm4 4a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2zm4 4a4 4 0 0 1 4 0l-2 2-2-2z"/></svg></div>188      <!-- battery -->189      <div class="status-icon"><svg width="40" height="28" viewBox="0 0 26 24"><path d="M22 7h2v10h-2V7zM3 6h17a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm1 3v6h14V9H4z"/></svg></div>190    </div>191  </div>192 193  <!-- Header -->194  <div class="header">195    <div class="title">Profile</div>196    <div class="header-actions">197      <div class="gear-btn">198        <!-- gear icon -->199        <svg width="40" height="40" viewBox="0 0 24 24">200          <path fill="#D7DADF" d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm8.7 4a7.3 7.3 0 0 0-.3-1.6l2-1.6-2-3.4-2.4 1A7.5 7.5 0 0 0 15.6 4l-.4-2.6h-4.4L10.4 4a7.5 7.5 0 0 0-2.4 1.8l-2.4-1-2 3.4 2 1.6c-.2.5-.3 1-.3 1.6s.1 1.1.3 1.6l-2 1.6 2 3.4 2.4-1a7.5 7.5 0 0 0 2.4 1.8l.4 2.6h4.4l.4-2.6a7.5 7.5 0 0 0 2.4-1.8l2.4 1 2-3.4-2-1.6c.2-.5.3-1 .3-1.6z"/>201        </svg>202      </div>203      <div class="avatar">C</div>204    </div>205  </div>206 207  <!-- Activity goals -->208  <div class="section">209    <h3>Activity goals</h3>210    <div class="card-grid">211      <div class="card">212        <div class="label">Steps</div>213        <div class="value">5,500</div>214        <div class="dropdown"><svg width="32" height="32" viewBox="0 0 24 24"><path fill="#C9CDD2" d="M7 10l5 5 5-5H7z"/></svg></div>215      </div>216      <div class="card accent">217        <div class="accent-line"></div>218        <div class="label">Heart Points</div>219        <div class="value">55</div>220        <div class="dropdown"><svg width="32" height="32" viewBox="0 0 24 24"><path fill="#AFC6FF" d="M7 10l5 5 5-5H7z"/></svg></div>221      </div>222    </div>223  </div>224 225  <!-- Bedtime schedule -->226  <div class="section">227    <div class="toggle-row">228      <h3 style="margin: 32px 0;">Bedtime schedule</h3>229      <div class="switch"><div class="knob"></div></div>230    </div>231    <div class="divider"></div>232 233    <div class="card-grid" style="margin-top: 26px;">234      <div class="card">235        <div class="label">Get in bed</div>236        <div class="value" style="color:#D0D4D8;">11:00 PM</div>237        <div class="dropdown"><svg width="32" height="32" viewBox="0 0 24 24"><path fill="#C9CDD2" d="M7 10l5 5 5-5H7z"/></svg></div>238      </div>239      <div class="card">240        <div class="label">Wake up</div>241        <div class="value" style="color:#D0D4D8;">7:00 AM</div>242        <div class="dropdown"><svg width="32" height="32" viewBox="0 0 24 24"><path fill="#C9CDD2" d="M7 10l5 5 5-5H7z"/></svg></div>243      </div>244    </div>245  </div>246 247  <!-- About you -->248  <div class="section">249    <div class="divider"></div>250    <h3>About you</h3>251 252    <div class="card-grid">253      <div class="card">254        <div class="label">Gender</div>255        <div class="value small-muted">Select</div>256        <div class="dropdown"><svg width="32" height="32" viewBox="0 0 24 24"><path fill="#C9CDD2" d="M7 10l5 5 5-5H7z"/></svg></div>257      </div>258      <div class="card accent">259        <div class="accent-line" style="width: 180px;"></div>260        <div class="label">Birthday</div>261        <div class="value">Dec 30, 1992</div>262        <div class="dropdown"><svg width="32" height="32" viewBox="0 0 24 24"><path fill="#AFC6FF" d="M7 10l5 5 5-5H7z"/></svg></div>263      </div>264      <div class="card">265        <div class="label">Weight</div>266        <div class="value small-muted">Select</div>267        <div class="dropdown"><svg width="32" height="32" viewBox="0 0 24 24"><path fill="#C9CDD2" d="M7 10l5 5 5-5H7z"/></svg></div>268      </div>269      <div class="card">270        <div class="label">Height</div>271        <div class="value small-muted">Select</div>272        <div class="dropdown"><svg width="32" height="32" viewBox="0 0 24 24"><path fill="#C9CDD2" d="M7 10l5 5 5-5H7z"/></svg></div>273      </div>274    </div>275  </div>276 277  <!-- Bottom Navigation -->278  <div class="bottom-nav">279    <div class="nav-item">280      <div class="nav-icon">281        <!-- activity ring -->282        <svg width="54" height="54" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10h-3a7 7 0 1 1-7-7V2z"/></svg>283      </div>284    </div>285    <div class="nav-item">286      <div class="nav-icon">287        <!-- clipboard -->288        <svg width="54" height="54" viewBox="0 0 24 24"><path d="M16 3h-2l-1-1h-2l-1 1H8v3h8V3zm3 3H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z"/></svg>289      </div>290    </div>291    <div class="nav-item">292      <div class="nav-icon">293        <!-- list -->294        <svg width="54" height="54" viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/></svg>295      </div>296    </div>297    <div class="nav-item active">298      <div class="nav-icon">299        <!-- profile -->300        <svg width="54" height="54" viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z"/></svg>301      </div>302      <div>Profile</div>303    </div>304  </div>305 306</div>307</body>308</html>