GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Profile UI</title>7<style>8  :root{9    --bg:#1f2124;10    --text:#e8eaed;11    --muted:#9aa0a6;12    --border:#50545a;13    --border-light:#6c7076;14    --blue:#6ea3ff;15    --teal:#1da39c;16  }17  body{ margin:0; padding:0; background:transparent; font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }18  #render-target{19    width:1080px; height:2400px; position:relative; overflow:hidden;20    background:var(--bg); color:var(--text);21  }22 23  /* Status bar */24  .statusbar{ height:120px; padding:32px 36px; font-size:36px; color:#dfe3e6; display:flex; align-items:center; justify-content:space-between; }25  .status-left{ display:flex; align-items:center; gap:20px; }26  .status-right{ display:flex; align-items:center; gap:26px; }27  .status-icon svg{ width:40px; height:40px; fill:none; stroke:#dfe3e6; stroke-width:3; }28 29  /* Header area */30  .header{ padding:30px 72px 0 72px; }31  .title{ font-size:120px; font-weight:600; letter-spacing:0.5px; margin:60px 0 30px; }32  .top-actions{ position:absolute; right:72px; top:310px; display:flex; align-items:center; gap:28px; }33  .gear{ width:66px; height:66px; border-radius:33px; border:2px solid #cfd3d6; display:flex; align-items:center; justify-content:center; color:#ffffff; font-size:36px; }34  .avatar{ width:88px; height:88px; background:var(--teal); border-radius:44px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:44px; }35  .section-title{ font-size:40px; color:var(--muted); margin:40px 0 24px; }36 37  /* Cards */38  .row{ display:flex; gap:32px; }39  .card{40    flex:1; min-height:180px; border:2px solid var(--border-light); border-radius:22px;41    padding:26px 30px; position:relative; background:transparent;42  }43  .card.selected{ border-color:var(--blue); }44  .card .label{ font-size:34px; color:var(--muted); margin-bottom:18px; display:flex; align-items:center; gap:12px; }45  .card .label .accent{ width:120px; height:6px; border-radius:3px; background:var(--border-light); }46  .card.selected .label .accent{ background:var(--blue); }47  .card .value{ font-size:64px; font-weight:600; letter-spacing:0.3px; }48  .chevron{ position:absolute; right:22px; top:22px; width:44px; height:44px; }49  .chevron svg{ width:100%; height:100%; fill:none; stroke:#cfd3d6; stroke-width:6; }50 51  /* Toggle + divider */52  .toggle-row{ display:flex; align-items:center; justify-content:space-between; margin:28px 0 10px; padding-right:72px; }53  .toggle{ width:112px; height:56px; background:#5a5d61; border-radius:28px; position:relative; }54  .toggle::before{ content:""; width:46px; height:46px; background:#c2c5c9; border-radius:23px; position:absolute; left:6px; top:5px; }55  .divider{ height:2px; background:#3a3d41; margin:24px -72px 24px; }56 57  /* Disabled cards (bedtime inputs) */58  .card.disabled{ border-color:#474a4f; color:#8e949a; }59  .card.disabled .label .accent{ background:#474a4f; }60  .card.disabled .value{ color:#9aa0a6; font-weight:500; }61 62  /* About you grid */63  .grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }64  .card.small{ min-height:170px; }65  .card .sub{ font-size:40px; font-weight:600; }66  .card.small .value{ font-size:54px; font-weight:700; }67 68  /* Bottom nav */69  .bottom-nav{70    position:absolute; left:0; right:0; bottom:0; height:170px; background:#2a2c2f;71    display:flex; align-items:center; justify-content:space-around; border-top:2px solid #3a3d41;72  }73  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:16px; color:#c3c7cb; font-size:32px; }74  .nav-item svg{ width:60px; height:60px; stroke:#c3c7cb; stroke-width:4; fill:none; }75  .nav-item.active{ color:var(--blue); }76  .nav-item.active svg{ stroke:var(--blue); }77 78  /* Safe area spacer (gesture pill) */79  .gesture-pill{80    position:absolute; bottom:8px; left:50%; transform:translateX(-50%);81    width:220px; height:10px; background:#e6e6e6; border-radius:6px; opacity:0.9;82  }83</style>84</head>85<body>86<div id="render-target">87 88  <!-- Status bar -->89  <div class="statusbar">90    <div class="status-left">91      <div>11:55</div>92      <div class="status-icon">93        <svg viewBox="0 0 24 24"><path d="M4 20L12 4l8 16H4Z" fill="#dfe3e6"/></svg>94      </div>95    </div>96    <div class="status-right">97      <div class="status-icon">98        <!-- Location pin -->99        <svg viewBox="0 0 24 24">100          <path d="M12 22s-6-7-6-11a6 6 0 1 1 12 0c0 4-6 11-6 11Z"></path>101          <circle cx="12" cy="11" r="3"></circle>102        </svg>103      </div>104      <div class="status-icon">105        <!-- WiFi -->106        <svg viewBox="0 0 24 24">107          <path d="M3 9c9-6 18 0 18 0"></path>108          <path d="M6 12c6-4 12 0 12 0"></path>109          <path d="M9 15c3-2 6 0 6 0"></path>110          <circle cx="12" cy="18" r="1.8" fill="#dfe3e6" stroke="none"></circle>111        </svg>112      </div>113      <div class="status-icon">114        <!-- Battery -->115        <svg viewBox="0 0 28 24">116          <rect x="2" y="5" width="20" height="14" rx="2"></rect>117          <rect x="22.5" y="9" width="3.5" height="6" rx="1" fill="none"></rect>118        </svg>119      </div>120    </div>121  </div>122 123  <!-- Header and actions -->124  <div class="header">125    <div class="title">Profile</div>126    <div class="top-actions">127      <div class="gear">⚙️</div>128      <div class="avatar">C</div>129    </div>130 131    <div class="section-title">Activity goals</div>132 133    <div class="row">134      <div class="card selected">135        <div class="label">136          <span>Steps</span>137          <span class="accent"></span>138        </div>139        <div class="value">5,500</div>140        <div class="chevron">141          <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7"></path></svg>142        </div>143      </div>144 145      <div class="card">146        <div class="label">147          <span>Heart Points</span>148          <span class="accent"></span>149        </div>150        <div class="value">50</div>151        <div class="chevron">152          <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7"></path></svg>153        </div>154      </div>155    </div>156 157    <div class="toggle-row">158      <div class="section-title" style="margin:0;">Bedtime schedule</div>159      <div class="toggle"></div>160    </div>161 162    <div class="divider"></div>163 164    <div class="row">165      <div class="card disabled">166        <div class="label">167          <span>Get in bed</span>168          <span class="accent"></span>169        </div>170        <div class="value">11:00 PM</div>171        <div class="chevron">172          <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7"></path></svg>173        </div>174      </div>175 176      <div class="card disabled">177        <div class="label">178          <span>Wake up</span>179          <span class="accent"></span>180        </div>181        <div class="value">7:00 AM</div>182        <div class="chevron">183          <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7"></path></svg>184        </div>185      </div>186    </div>187 188    <div class="section-title" style="margin-top:48px;">About you</div>189    <div class="divider"></div>190 191    <div class="grid">192      <div class="card small">193        <div class="label">194          <span>Gender</span>195          <span class="accent"></span>196        </div>197        <div class="chevron">198          <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7"></path></svg>199        </div>200      </div>201 202      <div class="card small selected">203        <div class="label">204          <span>Birthday</span>205          <span class="accent"></span>206        </div>207        <div class="value">Dec 30, 1992</div>208        <div class="chevron">209          <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7"></path></svg>210        </div>211      </div>212 213      <div class="card small">214        <div class="label">215          <span>Weight</span>216          <span class="accent"></span>217        </div>218        <div class="chevron">219          <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7"></path></svg>220        </div>221      </div>222 223      <div class="card small">224        <div class="label">225          <span>Height</span>226          <span class="accent"></span>227        </div>228        <div class="chevron">229          <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7"></path></svg>230        </div>231      </div>232    </div>233  </div>234 235  <!-- Bottom navigation -->236  <div class="bottom-nav">237    <div class="nav-item">238      <svg viewBox="0 0 24 24">239        <circle cx="12" cy="12" r="9"></circle>240        <path d="M12 6v6l4 2"></path>241      </svg>242    </div>243    <div class="nav-item">244      <svg viewBox="0 0 24 24">245        <rect x="6" y="4" width="12" height="16" rx="2"></rect>246        <line x1="9" y1="8" x2="15" y2="8"></line>247        <line x1="9" y1="12" x2="15" y2="12"></line>248      </svg>249    </div>250    <div class="nav-item">251      <svg viewBox="0 0 24 24">252        <line x1="5" y1="7" x2="19" y2="7"></line>253        <line x1="5" y1="12" x2="19" y2="12"></line>254        <line x1="5" y1="17" x2="19" y2="17"></line>255      </svg>256    </div>257    <div class="nav-item active">258      <svg viewBox="0 0 24 24">259        <circle cx="12" cy="8" r="4"></circle>260        <path d="M4 20c0-4 4-7 8-7s8 3 8 7"></path>261      </svg>262      <div>Profile</div>263    </div>264  </div>265 266  <div class="gesture-pill"></div>267</div>268</body>269</html>