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>Settings UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #EAEAEA;13    font-family: Roboto, Arial, Helvetica, sans-serif;14  }15 16  /* Status bar */17  .statusbar {18    height: 110px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #EAEAEA;24    font-size: 34px;25    letter-spacing: 0.5px;26  }27  .status-icons { display: flex; gap: 28px; align-items: center; }28  .status-icons svg { width: 38px; height: 38px; fill: #EAEAEA; opacity: 0.9; }29 30  /* Header */31  .header {32    display: flex;33    align-items: center;34    padding: 14px 36px 0 36px;35  }36  .back {37    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;38    margin-right: 18px;39  }40  .title {41    font-size: 56px; line-height: 64px; font-weight: 500;42  }43  .spacer { flex: 1; }44  .help-btn {45    background: #2C2D2F;46    color: #EAEAEA;47    padding: 36px 44px;48    border-radius: 20px;49    font-size: 40px;50    box-shadow: 0 2px 0 rgba(0,0,0,0.4) inset;51  }52 53  /* Content list */54  .content { padding: 24px 36px 0 36px; }55  .section-link {56    color: #8AB4F8;57    font-size: 30px;58    margin: 34px 0 22px 8px;59  }60  .item {61    padding: 24px 0;62    border-bottom: 0px solid #1e1e1e;63    display: flex;64    align-items: flex-start;65    justify-content: space-between;66  }67  .item .labels { max-width: 820px; }68  .item .label {69    font-size: 40px;70    margin-bottom: 8px;71  }72  .item .sublabel {73    font-size: 30px;74    color: #9AA0A6;75  }76 77  /* Toggle */78  .toggle {79    width: 154px; height: 84px;80    background: #3A3B3E;81    border-radius: 84px;82    position: relative;83    margin-top: 8px;84  }85  .toggle .knob {86    width: 70px; height: 70px;87    background: #CFCFCF;88    border-radius: 50%;89    position: absolute; top: 7px; left: 8px; /* OFF position */90    box-shadow: 0 2px 6px rgba(0,0,0,0.35);91  }92 93  /* Bottom gesture bar */94  .gesture {95    position: absolute;96    bottom: 28px; left: 50%;97    transform: translateX(-50%);98    width: 380px; height: 16px;99    background: #E0E0E0; border-radius: 16px;100    opacity: 0.65;101  }102</style>103</head>104<body>105<div id="render-target">106  <!-- Status bar -->107  <div class="statusbar">108    <div class="time">11:12</div>109    <div class="status-icons">110      <!-- Simple Play icon -->111      <svg viewBox="0 0 24 24"><path d="M8 5l12 7-12 7V5z"></path></svg>112      <!-- Wifi -->113      <svg viewBox="0 0 24 24"><path d="M2 9a16 16 0 0 1 20 0l-2 2a13 13 0 0 0-16 0L2 9zm4 4a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2zm6 5c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path></svg>114      <!-- Battery -->115      <svg viewBox="0 0 24 24"><path d="M18 6h2v3h2v6h-2v3h-2V6zm-15 2h15v12H3V8z"></path></svg>116    </div>117  </div>118 119  <!-- Header -->120  <div class="header">121    <div class="back">122      <svg viewBox="0 0 24 24" width="48" height="48" fill="#EAEAEA">123        <path d="M15.5 4l-9 8 9 8V4z"></path>124      </svg>125    </div>126    <div class="title">Settings</div>127    <div class="spacer"></div>128    <div class="help-btn">Help &amp; feedback</div>129  </div>130 131  <!-- Content -->132  <div class="content">133    <div class="section-link">Units</div>134 135    <div class="item">136      <div class="labels">137        <div class="label">Height</div>138        <div class="sublabel">Feet &amp; Inches</div>139      </div>140    </div>141 142    <div class="item">143      <div class="labels">144        <div class="label">Weight</div>145        <div class="sublabel">Pounds</div>146      </div>147    </div>148 149    <div class="item">150      <div class="labels">151        <div class="label">Distance</div>152        <div class="sublabel">Miles</div>153      </div>154    </div>155 156    <div class="item">157      <div class="labels">158        <div class="label">Energy</div>159        <div class="sublabel">Calories</div>160      </div>161    </div>162 163    <div class="section-link">Health Connect</div>164 165    <div class="item">166      <div class="labels">167        <div class="label">Sync Fit with Health Connect</div>168      </div>169      <div class="toggle"><div class="knob"></div></div>170    </div>171 172    <div class="section-link">Google Fit data and personalization</div>173 174    <div class="item">175      <div class="labels">176        <div class="label">Manage connected apps</div>177      </div>178    </div>179 180    <div class="item">181      <div class="labels">182        <div class="label">Delete your data</div>183      </div>184    </div>185 186    <div class="item">187      <div class="labels">188        <div class="label">Manage Google Assistant</div>189      </div>190    </div>191 192    <div class="item">193      <div class="labels">194        <div class="label">Manage personalization</div>195      </div>196    </div>197 198    <div class="item">199      <div class="labels">200        <div class="label">Manage Fit data permissions</div>201      </div>202    </div>203  </div>204 205  <div class="gesture"></div>206</div>207</body>208</html>