GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Fitness Walk UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: "Roboto", Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #1f2023;18    color: #eaeaea;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 100%;27    height: 120px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 40px;32    color: #f7f7f7;33    font-size: 40px;34    letter-spacing: 1px;35  }36  .sb-left, .sb-right {37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .sb-icon {42    width: 40px;43    height: 40px;44    opacity: 0.95;45  }46 47  /* Main content */48  .content {49    position: absolute;50    top: 540px; /* approximate placement from screenshot */51    left: 0;52    width: 100%;53    text-align: center;54  }55  .mode-label {56    color: #9aa0a6;57    font-size: 44px;58    margin-bottom: 40px;59    letter-spacing: 0.5px;60  }61  .main-time {62    font-size: 180px;63    font-weight: 500;64    letter-spacing: 4px;65    margin-bottom: 120px;66  }67 68  /* Stats grid */69  .stats {70    width: 100%;71    padding: 0 80px;72  }73  .row {74    display: flex;75    justify-content: space-between;76    align-items: flex-start;77    margin-bottom: 140px;78  }79  .cell {80    width: 33.33%;81    text-align: center;82  }83  .value {84    font-size: 140px;85    font-weight: 400;86    line-height: 1;87  }88  .value.small {89    font-size: 120px;90  }91  .label {92    color: #9aa0a6;93    font-size: 44px;94    margin-top: 22px;95  }96 97  .row.second .cell {98    width: 50%;99  }100 101  /* Pause button */102  .pause-wrap {103    position: absolute;104    bottom: 220px;105    left: 0;106    width: 100%;107    display: flex;108    justify-content: center;109  }110  .pause-btn {111    width: 170px;112    height: 170px;113    background: #2f3946;114    border-radius: 50%;115    display: flex;116    align-items: center;117    justify-content: center;118    box-shadow: 0 10px 28px rgba(0,0,0,0.35) inset;119  }120  .pause-bars {121    display: flex;122    gap: 22px;123  }124  .pause-bar {125    width: 18px;126    height: 70px;127    background: #8fb1ff;128    border-radius: 6px;129  }130 131  /* Bottom gesture bar */132  .gesture-bar {133    position: absolute;134    bottom: 110px;135    left: 50%;136    transform: translateX(-50%);137    width: 500px;138    height: 10px;139    background: #e6e6e6;140    border-radius: 10px;141    opacity: 0.85;142  }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status Bar -->149  <div class="status-bar">150    <div class="sb-left">151      <div>8:09</div>152      <!-- simple icons approximating status indicators -->153      <svg class="sb-icon" viewBox="0 0 24 24">154        <circle cx="12" cy="12" r="5" fill="#ffd166"></circle>155      </svg>156      <svg class="sb-icon" viewBox="0 0 24 24">157        <path d="M3 16c2-3 5-4 9-4s7 1 9 4" stroke="#cdd5df" stroke-width="2" fill="none" stroke-linecap="round"/>158        <path d="M6 13l2-2" stroke="#cdd5df" stroke-width="2" stroke-linecap="round"/>159      </svg>160      <svg class="sb-icon" viewBox="0 0 24 24">161        <path d="M12 3v10" stroke="#cdd5df" stroke-width="2" stroke-linecap="round"/>162        <path d="M5 9h14" stroke="#cdd5df" stroke-width="2" stroke-linecap="round"/>163      </svg>164    </div>165    <div class="sb-right">166      <!-- Wi-Fi -->167      <svg class="sb-icon" viewBox="0 0 24 24">168        <path d="M2 8c5-5 15-5 20 0" stroke="#f1f5f9" stroke-width="2" fill="none" stroke-linecap="round"/>169        <path d="M5 12c3-3 11-3 14 0" stroke="#f1f5f9" stroke-width="2" fill="none" stroke-linecap="round"/>170        <path d="M9 16c2-2 4-2 6 0" stroke="#f1f5f9" stroke-width="2" fill="none" stroke-linecap="round"/>171        <circle cx="12" cy="19" r="1.5" fill="#f1f5f9"/>172      </svg>173      <!-- Battery -->174      <svg class="sb-icon" viewBox="0 0 24 24">175        <rect x="2" y="7" width="16" height="10" rx="2" ry="2" stroke="#f1f5f9" stroke-width="2" fill="none"/>176        <rect x="4" y="9" width="12" height="6" fill="#f1f5f9"/>177        <rect x="19" y="10" width="3" height="6" rx="1" fill="#f1f5f9"/>178      </svg>179    </div>180  </div>181 182  <!-- Main Content -->183  <div class="content">184    <div class="mode-label">Walking</div>185    <div class="main-time">12:37</div>186 187    <div class="stats">188      <div class="row">189        <div class="cell">190          <div class="value">0.01</div>191          <div class="label">mi</div>192        </div>193        <div class="cell">194          <div class="value small">—:—</div>195          <div class="label">/mi</div>196        </div>197        <div class="cell">198          <div class="value">0</div>199          <div class="label">Heart Pts</div>200        </div>201      </div>202 203      <div class="row second">204        <div class="cell">205          <div class="value small">58</div>206          <div class="label">Cal</div>207        </div>208        <div class="cell">209          <div class="value small">22</div>210          <div class="label">steps</div>211        </div>212      </div>213    </div>214  </div>215 216  <!-- Pause Button -->217  <div class="pause-wrap">218    <div class="pause-btn">219      <div class="pause-bars">220        <div class="pause-bar"></div>221        <div class="pause-bar"></div>222      </div>223    </div>224  </div>225 226  <!-- Gesture Bar -->227  <div class="gesture-bar"></div>228 229</div>230</body>231</html>