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 UI</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  }16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 180px;22    background: #B2482A;23    color: #fff;24    font-family: Arial, Helvetica, sans-serif;25  }26  .status-inner {27    position: absolute;28    top: 40px;29    left: 36px;30    right: 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34  }35  .status-left {36    font-size: 40px;37    font-weight: 600;38    letter-spacing: 0.5px;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 28px;44  }45  .content {46    position: absolute;47    top: 180px;48    left: 0;49    right: 0;50    bottom: 0;51    font-family: Arial, Helvetica, sans-serif;52    color: #2d2d2d;53  }54  .section {55    text-align: center;56  }57  .label {58    font-size: 36px;59    color: #777777;60    letter-spacing: 3px;61    margin-top: 90px;62  }63  .time-value {64    font-size: 160px;65    font-weight: 800;66    margin: 40px 0 80px;67  }68  .divider {69    width: 96%;70    height: 2px;71    background: #E4E4E4;72    margin: 0 auto 60px;73  }74  .speed-value {75    font-size: 300px;76    font-weight: 800;77    margin: 120px 0 40px;78  }79  .unit-small {80    font-size: 32px;81    color: #777777;82    letter-spacing: 3px;83    margin-bottom: 60px;84  }85  .distance-value {86    font-size: 160px;87    font-weight: 800;88    margin: 80px 0 30px;89  }90  /* Controls */91  .controls {92    position: absolute;93    bottom: 180px;94    left: 0;95    width: 100%;96    display: flex;97    justify-content: center;98    align-items: center;99    gap: 140px;100  }101  .btn-stop {102    width: 240px;103    height: 240px;104    background: #D85A2F;105    border-radius: 50%;106    box-shadow: 0 8px 24px rgba(0,0,0,0.2);107    display: flex;108    justify-content: center;109    align-items: center;110  }111  .btn-stop .square {112    width: 100px;113    height: 100px;114    background: #ffffff;115    border-radius: 8px;116  }117  .btn-location {118    width: 140px;119    height: 140px;120    background: #ffffff;121    border-radius: 50%;122    box-shadow: 0 8px 24px rgba(0,0,0,0.18);123    border: 1px solid #E0E0E0;124    display: flex;125    justify-content: center;126    align-items: center;127  }128  /* Bottom system bar */129  .system-bar {130    position: absolute;131    bottom: 0;132    left: 0;133    width: 1080px;134    height: 140px;135    background: #000000;136  }137  .home-pill {138    position: absolute;139    bottom: 44px;140    left: 50%;141    transform: translateX(-50%);142    width: 300px;143    height: 14px;144    background: #909090;145    border-radius: 10px;146  }147  /* Simple icons */148  .icon svg { display: block; }149</style>150</head>151<body>152<div id="render-target">153  <!-- Top status bar -->154  <div class="status-bar">155    <div class="status-inner">156      <div class="status-left">3:48</div>157      <div class="status-right">158        <!-- Location pin icon -->159        <div class="icon">160          <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffffff">161            <path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>162          </svg>163        </div>164        <!-- WiFi icon -->165        <div class="icon">166          <svg width="44" height="36" viewBox="0 0 24 24" fill="#ffffff">167            <path d="M12 20l-2-2 2-2 2 2-2 2zm-5-5 2-2 3 3 3-3 2 2-5 5-5-5zm-3-5 2-2 6 6 6-6 2 2-8 8-8-8zm-2-5 2-2 10 10 10-10 2 2-12 12L0 5z"/>168          </svg>169        </div>170        <!-- Battery icon -->171        <div class="icon">172          <svg width="52" height="36" viewBox="0 0 26 14" fill="none" stroke="#ffffff" stroke-width="2">173            <rect x="1" y="1" width="20" height="12" rx="2" fill="none"></rect>174            <rect x="3" y="3" width="16" height="8" fill="#ffffff"></rect>175            <rect x="22" y="4" width="3" height="6" fill="#ffffff"></rect>176          </svg>177        </div>178      </div>179    </div>180  </div>181 182  <!-- Main content -->183  <div class="content">184    <div class="section">185      <div class="label">TIME</div>186      <div class="time-value">0:17:35</div>187    </div>188 189    <div class="divider"></div>190 191    <div class="section">192      <div class="label">AVG SPEED</div>193      <div class="speed-value">0.3</div>194      <div class="unit-small">KM/H</div>195    </div>196 197    <div class="divider"></div>198 199    <div class="section">200      <div class="label">DISTANCE</div>201      <div class="distance-value">0.09</div>202      <div class="unit-small">KM</div>203    </div>204  </div>205 206  <!-- Controls -->207  <div class="controls">208    <div class="btn-stop">209      <div class="square"></div>210    </div>211    <div class="btn-location">212      <svg width="60" height="60" viewBox="0 0 24 24" fill="#D85A2F">213        <path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>214      </svg>215    </div>216  </div>217 218  <!-- Bottom system bar -->219  <div class="system-bar">220    <div class="home-pill"></div>221  </div>222</div>223</body>224</html>