GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1440, initial-scale=1.0">5<title>Profile Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1440px; height: 3120px; position: relative; overflow: hidden;10    background:#121212; color:#EDEDED;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:120px;16    display:flex; align-items:center; justify-content:space-between;17    padding:0 60px; color:#fff; font-size:54px; letter-spacing:1px;18  }19  .sb-right { display:flex; align-items:center; gap:40px; }20  .icon { width:60px; height:60px; fill:#fff; }21  .battery { width:90px; height:48px; }22 23  /* Header */24  .header {25    position:absolute; left:80px; top:160px; right:80px;26    display:flex; align-items:center; justify-content:space-between;27  }28  .title { font-size:150px; font-weight:700; margin:0; line-height:1; color:#EDEDED; }29  .header-actions { display:flex; align-items:center; gap:40px; }30  .gear { font-size:80px; color:#EDEDED; }31  .avatar {32    width:120px; height:120px; border-radius:60px;33    background:#1F6D5D; display:flex; align-items:center; justify-content:center;34    font-weight:700; font-size:60px;35  }36 37  /* Content area */38  .content { position:absolute; left:80px; right:80px; top:420px; }39  .section-title {40    font-size:58px; color:#CFCFCF; margin:60px 0 30px 0; font-weight:600;41  }42 43  .cards-row {44    display:flex; gap:40px; margin-bottom:50px;45  }46  .card {47    flex:1; min-width:0;48    border:2px solid #2A2A2A; border-radius:28px;49    padding:40px; background:#181818;50  }51  .card .label {52    font-size:46px; color:#9E9E9E; margin-bottom:28px;53  }54  .card .value {55    font-size:72px; color:#EDEDED; display:flex; align-items:center; justify-content:space-between;56  }57  .chev {58    width:36px; height:36px; margin-left:20px; fill:#BDBDBD;59  }60 61  /* Bedtime toggle */62  .row-between { display:flex; align-items:center; justify-content:space-between; }63  .toggle {64    width:160px; height:80px; background:#3A3A3A; border-radius:40px; position:relative; border:2px solid #3F3F3F;65  }66  .toggle .knob {67    width:72px; height:72px; border-radius:36px; background:#9E9E9E;68    position:absolute; top:4px; left:4px;69  }70 71  /* Disabled cards appearance */72  .card.disabled {73    background:#141414; color:#8D8D8D; border-color:#2A2A2A;74  }75  .card.disabled .label { color:#777; }76  .card.disabled .value { color:#808080; }77 78  /* Bottom navigation */79  .bottom-bar {80    position:absolute; left:0; right:0; bottom:0; height:210px;81    background:#1C1C1C; border-top:1px solid #2E2E2E;82    display:flex; align-items:center; justify-content:space-around;83  }84  .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; color:#BDBDBD; }85  .nav-item svg { width:72px; height:72px; fill:#BDBDBD; }86  .nav-item.active { color:#8AB4F8; }87  .nav-item.active svg { fill:#8AB4F8; }88  .gesture {89    position:absolute; bottom:230px; left:50%; transform:translateX(-50%);90    width:360px; height:14px; border-radius:7px; background:#E0E0E0; opacity:0.85;91  }92 93  /* Accent on selected cards (blue outline effect) */94  .card.selected { box-shadow: 0 0 0 3px #5C84FF inset; border-color:#3B4B8F; }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Status Bar -->101  <div class="status-bar">102    <div class="sb-left">12:02</div>103    <div class="sb-right">104      <!-- simple status icons -->105      <svg class="icon" viewBox="0 0 24 24"><path d="M12 20c-3.8 0-7-3.2-7-7h2c0 2.8 2.2 5 5 5s5-2.2 5-5h2c0 3.8-3.2 7-7 7zm0-6c-2.2 0-4-1.8-4-4h2c0 1.1.9 2 2 2s2-.9 2-2h2c0 2.2-1.8 4-4 4zm0-6c-.6 0-1-.4-1-1h2c0 .6-.4 1-1 1z"/></svg>106      <svg class="icon" viewBox="0 0 24 24"><path d="M3 21h3v-4H3v4zm4 0h3v-7H7v7zm4 0h3v-10h-3v10zm4 0h3V3h-3v18z"/></svg>107      <svg class="battery" viewBox="0 0 32 18">108        <rect x="1" y="1" width="26" height="16" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>109        <rect x="3" y="3" width="20" height="12" fill="#fff"/>110        <rect x="27.5" y="6" width="3" height="6" fill="#fff"/>111      </svg>112    </div>113  </div>114 115  <!-- Header -->116  <div class="header">117    <h1 class="title">Profile</h1>118    <div class="header-actions">119      <div class="gear">⚙️</div>120      <div class="avatar">C</div>121    </div>122  </div>123 124  <!-- Main Content -->125  <div class="content">126 127    <div class="section-title">Activity goals</div>128    <div class="cards-row">129      <div class="card selected">130        <div class="label">Steps</div>131        <div class="value">132          <span>5,000</span>133          <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#BDBDBD" stroke-width="2"/></svg>134        </div>135      </div>136      <div class="card">137        <div class="label">Heart Points</div>138        <div class="value">139          <span>30</span>140          <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#BDBDBD" stroke-width="2"/></svg>141        </div>142      </div>143    </div>144 145    <div class="row-between" style="margin-top:40px;">146      <div class="section-title" style="margin:0;">Bedtime schedule</div>147      <div class="toggle">148        <div class="knob"></div>149      </div>150    </div>151 152    <div class="cards-row" style="margin-top:40px;">153      <div class="card disabled">154        <div class="label">Get in bed</div>155        <div class="value">156          <span>11:00 PM</span>157          <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#777" stroke-width="2"/></svg>158        </div>159      </div>160      <div class="card disabled">161        <div class="label">Wake up</div>162        <div class="value">163          <span>7:00 AM</span>164          <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#777" stroke-width="2"/></svg>165        </div>166      </div>167    </div>168 169    <div class="section-title" style="margin-top:70px;">About you</div>170    <div class="cards-row">171      <div class="card">172        <div class="label">Gender</div>173        <div class="value">174          <span>Male</span>175          <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#BDBDBD" stroke-width="2"/></svg>176        </div>177      </div>178      <div class="card">179        <div class="label">Birthday</div>180        <div class="value">181          <span>Sep 17, 2005</span>182          <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#BDBDBD" stroke-width="2"/></svg>183        </div>184      </div>185    </div>186 187    <div class="cards-row">188      <div class="card">189        <div class="label">Weight</div>190        <div class="value">191          <span></span>192          <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#BDBDBD" stroke-width="2"/></svg>193        </div>194      </div>195      <div class="card">196        <div class="label">Height</div>197        <div class="value">198          <span></span>199          <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#BDBDBD" stroke-width="2"/></svg>200        </div>201      </div>202    </div>203 204  </div>205 206  <!-- Gesture bar -->207  <div class="gesture"></div>208 209  <!-- Bottom Navigation -->210  <div class="bottom-bar">211    <div class="nav-item">212      <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>213      <div>Home</div>214    </div>215    <div class="nav-item">216      <svg viewBox="0 0 24 24"><path d="M5 4h14v3H5V4zm0 6h14v3H5v-3zm0 6h14v3H5v-3z"/></svg>217      <div>Journal</div>218    </div>219    <div class="nav-item">220      <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>221      <div>Track</div>222    </div>223    <div class="nav-item active">224      <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z"/></svg>225      <div>Profile</div>226    </div>227  </div>228 229</div>230</body>231</html>