GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, height=2400, initial-scale=1.0">6<title>Settings UI</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: #212121; color: #EDEDED;13    font-family: Arial, Helvetica, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 96px;20    padding: 0 32px;21    display: flex; align-items: center; justify-content: space-between;22    color: #ffffff;23    font-size: 42px; letter-spacing: 0.5px;24  }25  .status-left { display: flex; align-items: center; gap: 16px; }26  .status-right { display: flex; align-items: center; gap: 24px; }27  .status-icon svg { display: block; }28 29  /* App bar */30  .app-bar {31    position: absolute; top: 96px; left: 0; right: 0;32    height: 120px;33    display: flex; align-items: center;34    padding: 0 32px;35  }36  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 8px; }37  .app-title { font-size: 64px; font-weight: 500; color: #EDEDED; }38  .menu-btn { margin-left: auto; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }39 40  /* Content */41  .content {42    position: absolute; top: 216px; left: 0; right: 0; bottom: 120px;43    padding: 0 40px;44    overflow: hidden;45  }46  .section-label {47    color: #7BA4FF; /* bluish accent similar to Material */48    font-size: 40px;49    margin: 36px 0 12px;50  }51  .list-item {52    padding: 24px 0;53  }54  .item-title {55    font-size: 52px; color: #EDEDED; margin-bottom: 6px;56  }57  .item-sub {58    font-size: 36px; color: #BDBDBD;59  }60 61  .divider { height: 16px; }62 63  .toggle-row {64    display: flex; align-items: center; justify-content: space-between;65    padding: 24px 0;66  }67  .toggle {68    width: 150px; height: 72px; background: #616161; border-radius: 36px; position: relative;69  }70  .toggle .knob {71    width: 64px; height: 64px; background: #BDBDBD; border-radius: 50%;72    position: absolute; left: 4px; top: 4px;73    box-shadow: 0 2px 4px rgba(0,0,0,0.6);74  }75 76  .link-label {77    color: #7BA4FF;78    font-size: 40px;79    margin: 36px 0 4px;80  }81 82  .simple-item { font-size: 48px; color: #EDEDED; padding: 28px 0; }83 84  /* Bottom gesture pill */85  .gesture-pill {86    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);87    width: 300px; height: 12px; background: #E0E0E0; border-radius: 6px;88    opacity: 0.85;89  }90</style>91</head>92<body>93<div id="render-target">94 95  <!-- Status Bar -->96  <div class="status-bar">97    <div class="status-left">98      <div>11:11</div>99      <!-- Small play triangle icon -->100      <div class="status-icon">101        <svg width="38" height="38" viewBox="0 0 24 24">102          <polygon points="7,5 19,12 7,19" fill="#ffffff"/>103        </svg>104      </div>105    </div>106    <div class="status-right">107      <!-- Wi-Fi icon -->108      <div class="status-icon">109        <svg width="44" height="44" viewBox="0 0 24 24">110          <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>111          <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>112          <circle cx="12" cy="17" r="2" fill="#fff"/>113        </svg>114      </div>115      <!-- Battery icon -->116      <div class="status-icon">117        <svg width="44" height="44" viewBox="0 0 24 24">118          <rect x="3" y="6" width="16" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>119          <rect x="20" y="10" width="2" height="4" fill="#fff"/>120          <rect x="5" y="8" width="12" height="8" fill="#fff"/>121        </svg>122      </div>123    </div>124  </div>125 126  <!-- App Bar -->127  <div class="app-bar">128    <div class="back-btn">129      <svg width="56" height="56" viewBox="0 0 24 24">130        <path d="M15 5 L7 12 L15 19" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>131      </svg>132    </div>133    <div class="app-title">Settings</div>134    <div class="menu-btn">135      <svg width="56" height="56" viewBox="0 0 24 24">136        <circle cx="12" cy="5" r="2.2" fill="#fff"/>137        <circle cx="12" cy="12" r="2.2" fill="#fff"/>138        <circle cx="12" cy="19" r="2.2" fill="#fff"/>139      </svg>140    </div>141  </div>142 143  <!-- Content -->144  <div class="content">145    <div class="section-label">Units</div>146 147    <div class="list-item">148      <div class="item-title">Height</div>149      <div class="item-sub">Feet &amp; Inches</div>150    </div>151 152    <div class="list-item">153      <div class="item-title">Weight</div>154      <div class="item-sub">Pounds</div>155    </div>156 157    <div class="list-item">158      <div class="item-title">Distance</div>159      <div class="item-sub">Miles</div>160    </div>161 162    <div class="list-item">163      <div class="item-title">Energy</div>164      <div class="item-sub">Calories</div>165    </div>166 167    <div class="link-label">Health Connect</div>168 169    <div class="toggle-row">170      <div class="item-title" style="margin:0;">Sync Fit with Health Connect</div>171      <div class="toggle"><div class="knob"></div></div>172    </div>173 174    <div class="link-label">Google Fit data and personalization</div>175 176    <div class="simple-item">Manage connected apps</div>177    <div class="simple-item">Delete your data</div>178    <div class="simple-item">Manage Google Assistant</div>179    <div class="simple-item">Manage personalization</div>180    <div class="simple-item">Manage Fit data permissions</div>181  </div>182 183  <!-- Bottom gesture pill -->184  <div class="gesture-pill"></div>185 186</div>187</body>188</html>