GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Profile Screen Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target{8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#1f1f1f; color:#EDEDED;10  }11 12  /* Status bar */13  .status-bar{14    height:90px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;15    color:#EDEDED; font-size:36px; letter-spacing:1px; opacity:0.9;16  }17  .status-icons{ display:flex; align-items:center; gap:22px; }18  .dot{ width:12px; height:12px; background:#bdbdbd; border-radius:50%; opacity:0.7;}19  .icon-mini{20    width:32px; height:32px; border:2px solid #bdbdbd; border-radius:6px; opacity:0.8;21  }22  .battery{ display:flex; align-items:center; gap:8px; }23  .battery-box{24    width:38px; height:22px; border:2px solid #bdbdbd; border-radius:4px; position:relative;25  }26  .battery-box:after{27    content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#bdbdbd; border-radius:2px;28  }29 30  .content{ padding:24px 56px 160px 56px; }31 32  /* Header */33  .top-row{34    display:flex; align-items:center; justify-content:space-between;35    margin-top:10px;36  }37  .title{38    font-size:120px; font-weight:700; line-height:1; margin:30px 0 10px 0;39  }40  .right-actions{ display:flex; align-items:center; gap:26px; }41  .gear{42    width:76px; height:76px; border-radius:50%; border:2px solid #bdbdbd; position:relative;43  }44  .gear:before{45    content:""; position:absolute; left:50%; top:50%; width:36px; height:36px; transform:translate(-50%,-50%);46    border:4px solid #bdbdbd; border-radius:50%;47  }48  .avatar{49    width:86px; height:86px; border-radius:50%; background:#6b554b; display:flex; align-items:center; justify-content:center;50    font-size:46px; font-weight:700; color:#EDEDED;51  }52 53  .section-title{54    margin-top:34px; font-size:42px; color:#cfcfcf; letter-spacing:.2px;55  }56 57  /* Cards / inputs */58  .grid-2{ display:flex; gap:36px; margin-top:26px; }59  .cell{60    flex:1; position:relative; background:#262626; border:1px solid #4a4a4a; border-radius:22px;61    padding:26px 30px 32px 30px; min-height:150px;62  }63  .cell .small-label{ color:#bcbcbc; font-size:34px; }64  .cell .value{ margin-top:18px; font-size:56px; font-weight:700; }65  .chev{66    position:absolute; right:22px; top:50%; transform:translateY(-10%);67    width:44px; height:44px; display:flex; align-items:center; justify-content:center; opacity:0.85;68  }69  .chev svg{ width:28px; height:28px; fill:#cfcfcf; }70 71  /* Bedtime schedule header with toggle */72  .row-between{73    display:flex; align-items:center; justify-content:space-between; margin-top:40px;74  }75  .toggle{76    width:140px; height:64px; background:#3b3b3b; border-radius:40px; position:relative; border:1px solid #565656;77  }78  .toggle.on{ background:#2f3d5c; border-color:#2f3d5c; }79  .toggle.on .knob{ left:74px; background:#84a9ff; }80  .knob{81    position:absolute; top:7px; left:8px; width:50px; height:50px; border-radius:50%;82    background:#bdbdbd; transition:left .2s;83  }84 85  /* About section */86  .about{ margin-top:14px; }87  .grid-gap{ display:flex; gap:36px; margin-top:26px; }88 89  /* Bottom navigation */90  .bottom-nav{91    position:absolute; left:0; right:0; bottom:0; height:170px; background:#2a2a2a;92    border-top:1px solid #3a3a3a; display:flex; align-items:center; justify-content:space-around;93  }94  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#cfcfcf; font-size:36px; }95  .nav-item .ico{ width:58px; height:58px; border-radius:12px; border:2px solid #bdbdbd; }96  .nav-item.active{ color:#8ab4f8; }97  .nav-item.active .ico{ border-color:#8ab4f8; }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status bar -->104  <div class="status-bar">105    <div>8:40</div>106    <div class="status-icons">107      <div class="dot"></div>108      <div class="icon-mini"></div>109      <div class="icon-mini" style="border-radius:50%;"></div>110      <div class="battery">111        <svg width="36" height="24">112          <rect x="1" y="1" width="32" height="20" stroke="#bdbdbd" fill="none" stroke-width="2"></rect>113        </svg>114        <div>67%</div>115      </div>116    </div>117  </div>118 119  <div class="content">120    <div class="top-row">121      <div class="title">Profile</div>122      <div class="right-actions">123        <div class="gear" title="Settings"></div>124        <div class="avatar">F</div>125      </div>126    </div>127 128    <div class="section-title">Activity goals</div>129    <div class="grid-2">130      <div class="cell">131        <div class="small-label">Steps</div>132        <div class="value">3,500</div>133        <div class="chev">134          <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>135        </div>136      </div>137      <div class="cell">138        <div class="small-label">Heart Points</div>139        <div class="value">25</div>140        <div class="chev">141          <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>142        </div>143      </div>144    </div>145 146    <div class="row-between">147      <div class="section-title">Bedtime schedule</div>148      <div class="toggle on"><div class="knob"></div></div>149    </div>150 151    <div class="grid-2" style="margin-top:26px;">152      <div class="cell">153        <div class="small-label">Get in bed</div>154        <div class="value">10:00 PM</div>155        <div class="chev">156          <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>157        </div>158      </div>159      <div class="cell">160        <div class="small-label">Wake up</div>161        <div class="value">5:00 AM</div>162        <div class="chev">163          <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>164        </div>165      </div>166    </div>167 168    <div class="section-title" style="margin-top:48px;">About you</div>169 170    <div class="grid-2 about">171      <div class="cell">172        <div class="small-label">Gender</div>173        <div class="value">Male</div>174        <div class="chev">175          <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>176        </div>177      </div>178      <div class="cell">179        <div class="small-label">Birthday</div>180        <div class="value">Feb 22, 2001</div>181        <div class="chev">182          <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>183        </div>184      </div>185    </div>186 187    <div class="grid-gap">188      <div class="cell" style="flex:1;">189        <div class="small-label">Weight</div>190        <div class="value">65 kg</div>191        <div class="chev">192          <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>193        </div>194      </div>195      <div class="cell" style="flex:1;">196        <div class="small-label">Height</div>197        <div class="value">160 cm</div>198        <div class="chev">199          <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>200        </div>201      </div>202    </div>203  </div>204 205  <!-- Bottom navigation -->206  <div class="bottom-nav">207    <div class="nav-item">208      <div class="ico"></div>209      <div>Home</div>210    </div>211    <div class="nav-item">212      <div class="ico"></div>213      <div>Journal</div>214    </div>215    <div class="nav-item">216      <div class="ico"></div>217      <div>Browse</div>218    </div>219    <div class="nav-item active">220      <div class="ico"></div>221      <div>Profile</div>222    </div>223  </div>224 225</div>226</body>227</html>