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>Profile Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #232629;15    color: #E6E6E6;16    font-family: "Roboto", Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 24px;23    left: 36px;24    right: 36px;25    height: 60px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #E6E6E6;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 16px;35    font-size: 32px;36    letter-spacing: 1px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 22px;42  }43  .icon {44    width: 36px;45    height: 36px;46    fill: none;47    stroke: #E6E6E6;48    stroke-width: 2.5;49  }50 51  /* Header */52  .header {53    padding: 170px 60px 10px;54  }55  .header h1 {56    margin: 120px 0 40px;57    font-size: 96px;58    font-weight: 300;59  }60  .top-actions {61    position: absolute;62    top: 340px;63    right: 160px;64    display: flex;65    align-items: center;66    gap: 40px;67  }68  .gear {69    width: 60px;70    height: 60px;71    stroke: #E6E6E6;72    fill: none;73    stroke-width: 4;74  }75  .avatar {76    width: 84px;77    height: 84px;78    border-radius: 50%;79    background: #1AA39A;80    display: flex;81    align-items: center;82    justify-content: center;83    font-weight: 700;84    color: #fff;85    font-size: 40px;86  }87 88  /* Sections */89  .section-title {90    font-size: 40px;91    color: #C9CBCF;92    margin: 10px 60px 26px;93    font-weight: 500;94  }95  hr.divider {96    border: none;97    height: 1px;98    background: #3A3D41;99    margin: 20px 0 30px;100  }101 102  /* Cards */103  .grid {104    display: flex;105    gap: 40px;106    padding: 0 60px;107  }108  .card {109    position: relative;110    width: 460px;111    height: 170px;112    border: 2px solid #90959A;113    border-radius: 18px;114    background: rgba(255,255,255,0.02);115    padding: 28px;116    box-sizing: border-box;117  }118  .card .label {119    position: absolute;120    top: 8px;121    left: 28px;122    font-size: 28px;123    color: #B9BDC2;124    background: transparent;125  }126  .card .value {127    margin-top: 40px;128    font-size: 56px;129    font-weight: 500;130    color: #FFFFFF;131  }132  .card .value.muted {133    color: #9EA3A8;134    font-weight: 400;135  }136  .card .arrow {137    position: absolute;138    right: 24px;139    top: 64px;140    width: 32px;141    height: 32px;142    fill: none;143    stroke: #B9BDC2;144    stroke-width: 3;145  }146 147  /* Bedtime schedule row */148  .row {149    display: flex;150    align-items: center;151    justify-content: space-between;152    padding: 0 60px;153    margin-top: 12px;154  }155  .toggle {156    position: relative;157    width: 116px;158    height: 56px;159    border-radius: 28px;160    background: #6B6F74;161  }162  .toggle::after {163    content: "";164    position: absolute;165    top: 6px;166    left: 8px;167    width: 44px;168    height: 44px;169    border-radius: 50%;170    background: #C9CDD2;171  }172 173  /* About you grid (2 rows) */174  .grid-2x2 {175    display: grid;176    grid-template-columns: 460px 460px;177    grid-auto-rows: 170px;178    gap: 40px;179    padding: 0 60px;180  }181 182  /* Bottom navigation */183  .bottom-nav {184    position: absolute;185    bottom: 0;186    left: 0;187    width: 1080px;188    height: 180px;189    background: #2C2F33;190    border-top: 1px solid #3A3D41;191    display: flex;192    align-items: center;193    justify-content: space-around;194    color: #C9CBD0;195  }196  .nav-item {197    width: 200px;198    display: flex;199    flex-direction: column;200    align-items: center;201    gap: 14px;202    font-size: 34px;203  }204  .nav-item .nav-icon {205    width: 60px;206    height: 60px;207    stroke: #C9CBD0;208    fill: none;209    stroke-width: 4;210  }211  .nav-item.active {212    color: #84A7FF;213  }214  .nav-item.active .nav-icon {215    stroke: #84A7FF;216  }217 218  /* small handle bar (gesture) */219  .handle {220    position: absolute;221    bottom: 24px;222    left: 50%;223    transform: translateX(-50%);224    width: 230px;225    height: 10px;226    border-radius: 6px;227    background: #E5E5E5;228    opacity: 0.7;229  }230</style>231</head>232<body>233<div id="render-target">234 235  <!-- Status bar -->236  <div class="status-bar">237    <div class="status-left">238      <span>11:10</span>239      <svg class="icon" viewBox="0 0 24 24">240        <path d="M5 18 L12 6 L19 18 Z" fill="#E6E6E6"></path>241      </svg>242    </div>243    <div class="status-right">244      <svg class="icon" viewBox="0 0 24 24">245        <path d="M3 9c4-5 14-5 18 0"></path>246        <path d="M6 12c3-3 9-3 12 0"></path>247        <circle cx="12" cy="16" r="2" fill="#E6E6E6" stroke="none"></circle>248      </svg>249      <svg class="icon" viewBox="0 0 24 24">250        <rect x="3" y="6" width="18" height="12" rx="2"></rect>251        <rect x="5" y="8" width="12" height="8" rx="1" fill="#E6E6E6" stroke="none"></rect>252      </svg>253    </div>254  </div>255 256  <!-- Header -->257  <div class="header">258    <h1>Profile</h1>259  </div>260  <div class="top-actions">261    <svg class="gear" viewBox="0 0 24 24">262      <circle cx="12" cy="12" r="3"></circle>263      <path d="M4 12h2m12 0h2M12 4v2M12 18v2M5.5 5.5l1.5 1.5M17 17l1.5 1.5M17 7l1.5-1.5M5.5 18.5l1.5-1.5"></path>264    </svg>265    <div class="avatar">C</div>266  </div>267 268  <!-- Activity goals -->269  <div class="section-title" style="margin-top: 20px;">Activity goals</div>270  <div class="grid" style="margin-bottom: 30px;">271    <div class="card">272      <div class="label">Steps</div>273      <div class="value">5,500</div>274      <svg class="arrow" viewBox="0 0 24 24">275        <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>276      </svg>277    </div>278    <div class="card">279      <div class="label">Heart Points</div>280      <div class="value">55</div>281      <svg class="arrow" viewBox="0 0 24 24">282        <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>283      </svg>284    </div>285  </div>286 287  <!-- Bedtime schedule row -->288  <div class="row">289    <div class="section-title" style="margin: 0;">Bedtime schedule</div>290    <div class="toggle" title="Toggle (off)"></div>291  </div>292 293  <hr class="divider" style="margin: 26px 0 30px;">294 295  <!-- Bedtime cards -->296  <div class="grid" style="margin-bottom: 60px;">297    <div class="card">298      <div class="label">Get in bed</div>299      <div class="value muted">11:00 PM</div>300      <svg class="arrow" viewBox="0 0 24 24">301        <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>302      </svg>303    </div>304    <div class="card">305      <div class="label">Wake up</div>306      <div class="value muted">7:00 AM</div>307      <svg class="arrow" viewBox="0 0 24 24">308        <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>309      </svg>310    </div>311  </div>312 313  <!-- About you -->314  <div class="section-title" style="margin-top: 0;">About you</div>315  <hr class="divider" style="margin: 10px 0 40px;">316 317  <div class="grid-2x2">318    <div class="card">319      <div class="label">Gender</div>320      <div class="value muted">Gender</div>321      <svg class="arrow" viewBox="0 0 24 24">322        <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>323      </svg>324    </div>325    <div class="card">326      <div class="label">Birthday</div>327      <div class="value">Dec 30, 1992</div>328      <svg class="arrow" viewBox="0 0 24 24">329        <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>330      </svg>331    </div>332    <div class="card">333      <div class="label">Weight</div>334      <div class="value muted">Weight</div>335      <svg class="arrow" viewBox="0 0 24 24">336        <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>337      </svg>338    </div>339    <div class="card">340      <div class="label">Height</div>341      <div class="value muted">Height</div>342      <svg class="arrow" viewBox="0 0 24 24">343        <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>344      </svg>345    </div>346  </div>347 348  <!-- Bottom navigation -->349  <div class="bottom-nav">350    <div class="nav-item">351      <svg class="nav-icon" viewBox="0 0 24 24">352        <circle cx="12" cy="12" r="9"></circle>353        <path d="M12 6v6l4 2"></path>354      </svg>355      <span> </span>356    </div>357    <div class="nav-item">358      <svg class="nav-icon" viewBox="0 0 24 24">359        <rect x="6" y="4" width="12" height="16" rx="2"></rect>360        <line x1="9" y1="8" x2="15" y2="8"></line>361        <line x1="9" y1="12" x2="15" y2="12"></line>362      </svg>363      <span> </span>364    </div>365    <div class="nav-item">366      <svg class="nav-icon" viewBox="0 0 24 24">367        <line x1="6" y1="7" x2="18" y2="7"></line>368        <line x1="6" y1="12" x2="18" y2="12"></line>369        <line x1="6" y1="17" x2="18" y2="17"></line>370      </svg>371      <span> </span>372    </div>373    <div class="nav-item active">374      <svg class="nav-icon" viewBox="0 0 24 24">375        <circle cx="12" cy="8" r="4"></circle>376        <path d="M5 20c1.5-4 12.5-4 14 0" stroke-linecap="round"></path>377      </svg>378      <span>Profile</span>379    </div>380  </div>381 382  <div class="handle"></div>383</div>384</body>385</html>