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</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  /* Status bar */13  .status-bar {14    position: absolute; top: 0; left: 0; right: 0;15    height: 150px; padding: 0 60px; display: flex; align-items: center; justify-content: space-between;16    color: #EDEDED; font-size: 50px; letter-spacing: 1px;17  }18  .status-left { display: flex; gap: 28px; align-items: center; }19  .status-right { display: flex; gap: 28px; align-items: center; }20  .status-icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; color: #EDEDED; }21  /* Header area */22  .top-actions {23    position: absolute; top: 190px; right: 60px; display: flex; gap: 30px; align-items: center;24  }25  .gear {26    width: 96px; height: 96px; border-radius: 50%; background: #1F1F1F; display: flex; align-items: center; justify-content: center; border: 2px solid #2F2F2F;27  }28  .avatar {29    width: 116px; height: 116px; border-radius: 58px; background: #1E6F5C; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 700; color: #D8F5E9;30  }31  .page-title {32    position: absolute; top: 220px; left: 60px; font-size: 150px; font-weight: 700; color: #EDEDED;33  }34  /* Sections */35  .section {36    position: absolute; left: 60px; right: 60px; color: #CFCFCF;37  }38  .section-title {39    font-size: 64px; margin-bottom: 40px; color: #CFCFCF;40  }41  /* Field cards */42  .fields-row { display: flex; gap: 60px; }43  .field {44    position: relative;45    flex: 1; min-width: 0;46    height: 220px; border: 4px solid #2E2E2E; border-radius: 32px; padding: 40px 60px;47    box-sizing: border-box; background: #181818;48  }49  .field-label {50    position: absolute; top: 20px; left: 40px; font-size: 42px; color: #9A9A9A; background: transparent; padding-right: 14px;51  }52  .field-value { font-size: 84px; color: #FFFFFF; margin-top: 40px; }53  .chevron {54    position: absolute; right: 40px; top: 90px; width: 50px; height: 50px;55  }56  /* Toggle */57  .toggle-wrap { position: absolute; right: 0; top: 0; }58  .toggle {59    width: 180px; height: 88px; background: #3A3A3A; border-radius: 44px; position: relative;60  }61  .toggle::after {62    content: ""; position: absolute; top: 10px; left: 12px;63    width: 68px; height: 68px; border-radius: 34px; background: #BFBFBF;64  }65  /* Bottom nav */66  .bottom-nav {67    position: absolute; bottom: 0; left: 0; right: 0; height: 220px;68    background: #1B1B1B; border-top: 2px solid #2A2A2A; display: flex; align-items: center; justify-content: space-around;69  }70  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 26px; color: #BDBDBD; }71  .nav-item.active { color: #8AB4F8; }72  .nav-icon { width: 84px; height: 84px; }73  .nav-label { font-size: 50px; }74  /* Layout positioning for sections */75  #activity { top: 480px; }76  #bedtime { top: 1030px; }77  #about { top: 1680px; }78</style>79</head>80<body>81<div id="render-target">82 83  <!-- Status Bar -->84  <div class="status-bar">85    <div class="status-left">86      <div>12:00</div>87      <div class="status-icon">i</div>88      <div class="status-icon">S</div>89      <div class="status-icon">G</div>90      <div>79°</div>91    </div>92    <div class="status-right">93      <!-- Simple wifi icon -->94      <svg class="status-icon" viewBox="0 0 24 24">95        <path fill="#EDEDED" d="M12 18l-2 2 2 2 2-2-2-2zm7-5a10 10 0 00-14 0l2 2a7 7 0 0110 0l2-2zm-3 3a6 6 0 00-8 0l2 2a3 3 0 014 0l2-2zm-11-7a14 14 0 0118 0l-2 2a11 11 0 00-14 0l-2-2z"/>96      </svg>97      <!-- Signal icon -->98      <svg class="status-icon" viewBox="0 0 24 24">99        <rect x="2" y="16" width="3" height="6" fill="#EDEDED"></rect>100        <rect x="7" y="12" width="3" height="10" fill="#EDEDED"></rect>101        <rect x="12" y="8" width="3" height="14" fill="#EDEDED"></rect>102        <rect x="17" y="4" width="3" height="18" fill="#EDEDED"></rect>103      </svg>104      <!-- Battery icon -->105      <svg class="status-icon" viewBox="0 0 24 24">106        <rect x="1" y="5" width="19" height="14" rx="2" ry="2" stroke="#EDEDED" fill="none" stroke-width="2"></rect>107        <rect x="22" y="9" width="2" height="6" fill="#EDEDED"></rect>108        <rect x="3" y="7" width="13" height="10" fill="#EDEDED"></rect>109      </svg>110    </div>111  </div>112 113  <!-- Top actions: gear and avatar -->114  <div class="top-actions">115    <div class="gear">116      <svg viewBox="0 0 24 24" width="70" height="70">117        <path fill="#CFCFCF" d="M12 8a4 4 0 100 8 4 4 0 000-8zm10 4l-2.2-1.3.3-2.5-2.5-.3L16 3l-2 1.4L12 4 10 3 8.4 5 5.9 5.3l.3 2.5L4 12l1.3 2.2-1.3 2.2 2.5.3.3 2.5 2.5-.3L12 21l2-1.4 2.5.3.3-2.5 2.5-.3L22 12z"/>118      </svg>119    </div>120    <div class="avatar">C</div>121  </div>122 123  <!-- Page Title -->124  <div class="page-title">Profile</div>125 126  <!-- Activity Goals Section -->127  <div class="section" id="activity">128    <div class="section-title">Activity goals</div>129    <div class="fields-row">130      <div class="field">131        <div class="field-label">Steps</div>132        <div class="field-value">7,500</div>133        <svg class="chevron" viewBox="0 0 24 24">134          <path d="M7 10l5 5 5-5" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>135        </svg>136      </div>137      <div class="field">138        <div class="field-label">Heart Points</div>139        <div class="field-value">30</div>140        <svg class="chevron" viewBox="0 0 24 24">141          <path d="M7 10l5 5 5-5" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>142        </svg>143      </div>144    </div>145  </div>146 147  <!-- Bedtime Schedule Section -->148  <div class="section" id="bedtime">149    <div class="section-title" style="position: relative;">150      Bedtime schedule151      <div class="toggle-wrap" style="top:-10px;">152        <div class="toggle"></div>153      </div>154    </div>155    <div class="fields-row" style="margin-top: 40px;">156      <div class="field">157        <div class="field-label">Get in bed</div>158        <div class="field-value">11:00 PM</div>159        <svg class="chevron" viewBox="0 0 24 24">160          <path d="M7 10l5 5 5-5" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>161        </svg>162      </div>163      <div class="field">164        <div class="field-label">Wake up</div>165        <div class="field-value">7:00 AM</div>166        <svg class="chevron" viewBox="0 0 24 24">167          <path d="M7 10l5 5 5-5" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>168        </svg>169      </div>170    </div>171  </div>172 173  <!-- About You Section -->174  <div class="section" id="about">175    <div class="section-title">About you</div>176    <div class="fields-row">177      <div class="field">178        <div class="field-label">Gender</div>179        <div class="field-value">Male</div>180        <svg class="chevron" viewBox="0 0 24 24">181          <path d="M7 10l5 5 5-5" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>182        </svg>183      </div>184      <div class="field">185        <div class="field-label">Birthday</div>186        <div class="field-value">Sep 17, 2005</div>187        <svg class="chevron" viewBox="0 0 24 24">188          <path d="M7 10l5 5 5-5" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>189        </svg>190      </div>191    </div>192    <div class="fields-row" style="margin-top: 60px;">193      <div class="field">194        <div class="field-label">Weight</div>195        <div class="field-value" style="color:#9A9A9A">—</div>196        <svg class="chevron" viewBox="0 0 24 24">197          <path d="M7 10l5 5 5-5" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>198        </svg>199      </div>200      <div class="field">201        <div class="field-label">Height</div>202        <div class="field-value" style="color:#9A9A9A">—</div>203        <svg class="chevron" viewBox="0 0 24 24">204          <path d="M7 10l5 5 5-5" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>205        </svg>206      </div>207    </div>208  </div>209 210  <!-- Bottom Navigation -->211  <div class="bottom-nav">212    <div class="nav-item">213      <svg class="nav-icon" viewBox="0 0 24 24">214        <circle cx="12" cy="12" r="10" stroke="#BDBDBD" stroke-width="2" fill="none"></circle>215        <path d="M12 6v6l4 2" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round"></path>216      </svg>217      <div class="nav-label">Home</div>218    </div>219    <div class="nav-item">220      <svg class="nav-icon" viewBox="0 0 24 24">221        <rect x="4" y="3" width="16" height="18" rx="2" ry="2" stroke="#BDBDBD" stroke-width="2" fill="none"></rect>222        <line x1="7" y1="8" x2="17" y2="8" stroke="#BDBDBD" stroke-width="2"></line>223        <line x1="7" y1="12" x2="17" y2="12" stroke="#BDBDBD" stroke-width="2"></line>224        <line x1="7" y1="16" x2="13" y2="16" stroke="#BDBDBD" stroke-width="2"></line>225      </svg>226      <div class="nav-label">Journal</div>227    </div>228    <div class="nav-item">229      <svg class="nav-icon" viewBox="0 0 24 24">230        <line x1="4" y1="6" x2="20" y2="6" stroke="#BDBDBD" stroke-width="2"></line>231        <line x1="4" y1="12" x2="20" y2="12" stroke="#BDBDBD" stroke-width="2"></line>232        <line x1="4" y1="18" x2="20" y2="18" stroke="#BDBDBD" stroke-width="2"></line>233      </svg>234      <div class="nav-label">Menu</div>235    </div>236    <div class="nav-item active">237      <svg class="nav-icon" viewBox="0 0 24 24">238        <circle cx="12" cy="8" r="4" fill="#8AB4F8"></circle>239        <path d="M4 20a8 8 0 0116 0" stroke="#8AB4F8" stroke-width="2" fill="none" stroke-linecap="round"></path>240      </svg>241      <div class="nav-label">Profile</div>242    </div>243  </div>244 245</div>246</body>247</html>