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>Run Tracker Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: "Roboto", Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Top status/app bar */20  .status-bar {21    height: 160px;22    background: #B44628;23    color: #fff;24    padding: 0 40px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    box-sizing: border-box;29    letter-spacing: 0.5px;30  }31  .status-left, .status-right {32    display: flex;33    align-items: center;34    gap: 26px;35    font-size: 38px;36    font-weight: 500;37  }38  .status-icon { display: inline-flex; align-items: center; }39 40  /* Content */41  .section {42    text-align: center;43  }44  .label {45    margin-top: 34px;46    font-size: 42px;47    color: #4A4A4A;48    letter-spacing: 2px;49  }50  .big-time {51    margin-top: 18px;52    font-size: 170px;53    font-weight: 700;54    letter-spacing: 6px;55    color: #2b2b2b;56  }57  .divider {58    width: 100%;59    height: 2px;60    background: #e6e6e6;61    margin: 60px 0;62  }63 64  /* Split average pace mock dashes */65  .pace-wrap { margin-top: 16px; }66  .dash-row {67    display: flex;68    justify-content: center;69    align-items: center;70    gap: 60px;71    margin-top: 80px;72  }73  .dash {74    width: 200px;75    height: 44px;76    background: #2f2f2f;77    border-radius: 8px;78  }79  .square {80    width: 56px;81    height: 56px;82    background: #2f2f2f;83    border-radius: 8px;84  }85  .pace-unit {86    margin-top: 140px;87    font-size: 40px;88    color: #6b6b6b;89    letter-spacing: 2px;90  }91 92  /* Bottom stats */93  .bottom-stats {94    display: grid;95    grid-template-columns: 1fr 1fr;96    align-items: start;97    padding: 0 40px;98    gap: 20px;99  }100  .left-graph {101    padding-top: 20px;102  }103  .bar {104    width: 360px;105    height: 520px;106    background: #68B9E6;107    border-radius: 6px;108    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);109    margin-left: 50px;110  }111  .bar-label {112    text-align: left;113    margin-left: 50px;114    margin-top: 20px;115    font-size: 38px;116    color: #6b6b6b;117  }118  .v-divider {119    position: absolute;120    left: 540px;121    top: 1420px;122    width: 2px;123    height: 440px;124    background: #e6e6e6;125  }126  .right-stats {127    text-align: center;128    padding-top: 16px;129  }130  .small-label {131    font-size: 42px;132    letter-spacing: 2px;133    color: #4A4A4A;134    margin-top: 0;135  }136  .big-number {137    font-size: 170px;138    font-weight: 700;139    color: #2b2b2b;140    margin-top: 40px;141  }142  .unit {143    font-size: 42px;144    color: #7a7a7a;145    margin-top: 10px;146  }147 148  /* Floating action buttons */149  .fab {150    position: absolute;151    left: 50%;152    transform: translateX(-50%);153    bottom: 210px;154    width: 190px;155    height: 190px;156    background: #E35E2C;157    border-radius: 50%;158    box-shadow: 0 14px 22px rgba(0,0,0,0.25);159    display: flex;160    align-items: center;161    justify-content: center;162  }163  .fab .stop-square {164    width: 64px;165    height: 64px;166    background: #ffffff;167    border-radius: 6px;168  }169  .mini-fab {170    position: absolute;171    right: 170px;172    bottom: 255px;173    width: 120px;174    height: 120px;175    background: #ffffff;176    border-radius: 50%;177    box-shadow: 0 10px 18px rgba(0,0,0,0.18);178    border: 1px solid #ececec;179    display: flex;180    align-items: center;181    justify-content: center;182  }183 184  /* Bottom gesture area */185  .nav-area {186    position: absolute;187    left: 0;188    bottom: 0;189    width: 1080px;190    height: 118px;191    background: #000000;192  }193  .gesture-pill {194    position: absolute;195    left: 50%;196    bottom: 40px;197    transform: translateX(-50%);198    width: 300px;199    height: 12px;200    background: #ffffff;201    border-radius: 8px;202    opacity: 0.92;203  }204</style>205</head>206<body>207<div id="render-target">208 209  <!-- Top status/app bar -->210  <div class="status-bar">211    <div class="status-left">212      <div>2:55</div>213      <div class="status-icon">214        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">215          <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2"></circle>216          <circle cx="12" cy="12" r="4" fill="#fff"></circle>217        </svg>218      </div>219      <div class="status-icon">220        <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff">221          <path d="M6 15c0-2.5 2-4.5 4.5-4.5 1.2 0 2.3.5 3.1 1.3C14.1 9.8 15.9 9 18 9c2.8 0 5 2.2 5 5 0 2.3-1.7 4.3-3.9 4.8H7.5C6.1 18.3 6 16.6 6 15z"></path>222        </svg>223      </div>224    </div>225    <div class="status-right">226      <div class="status-icon">227        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">228          <path d="M12 2C7 2 3 6 3 11l2-1 1 3 2-3 2 2 2-3 2 2 2-3 2 3 2-1C21 6 17 2 12 2z" fill="#fff"></path>229        </svg>230      </div>231      <div class="status-icon">232        <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">233          <path d="M2 18c4-5 16-5 20 0"></path>234          <path d="M5 15c3-3 11-3 14 0"></path>235          <path d="M8 12c2-2 6-2 8 0"></path>236        </svg>237      </div>238      <div class="status-icon">239        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">240          <rect x="3" y="7" width="14" height="10" rx="2" ry="2"></rect>241          <rect x="17" y="10" width="3" height="4" fill="#fff" stroke="#fff"></rect>242        </svg>243      </div>244    </div>245  </div>246 247  <!-- TIME section -->248  <div class="section">249    <div class="label">TIME</div>250    <div class="big-time">0:19:03</div>251  </div>252 253  <div class="divider"></div>254 255  <!-- Split average pace -->256  <div class="section pace-wrap">257    <div class="label">SPLIT AVERAGE PACE</div>258 259    <div class="dash-row" style="margin-top: 140px;">260      <div class="dash"></div>261      <div class="square"></div>262      <div class="dash"></div>263      <div class="dash"></div>264    </div>265    <div class="dash-row" style="gap: 60px; margin-top: 60px;">266      <div style="width: 56px; height: 56px; background:#2f2f2f; border-radius:8px;"></div>267    </div>268 269    <div class="pace-unit">/KM</div>270  </div>271 272  <div class="divider" style="margin-top: 80px;"></div>273 274  <!-- Bottom stats area -->275  <div class="bottom-stats">276    <div class="left-graph">277      <div class="bar"></div>278      <div class="bar-label">19:03</div>279    </div>280 281    <div class="right-stats">282      <div class="small-label">DISTANCE</div>283      <div class="big-number">0.24</div>284      <div class="unit">KM</div>285    </div>286  </div>287  <div class="v-divider"></div>288 289  <!-- Floating action buttons -->290  <div class="fab">291    <div class="stop-square"></div>292  </div>293 294  <div class="mini-fab">295    <svg width="52" height="52" viewBox="0 0 24 24" fill="none">296      <path d="M12 2C7.6 2 4 5.6 4 10c0 6.3 7 12 8 12s8-5.7 8-12c0-4.4-3.6-8-8-8z" stroke="#E35E2C" stroke-width="2" fill="none"/>297      <circle cx="12" cy="10" r="3" fill="#E35E2C"/>298    </svg>299  </div>300 301  <!-- System gesture area -->302  <div class="nav-area">303    <div class="gesture-pill"></div>304  </div>305</div>306</body>307</html>