GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Workout UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #202225; /* dark screen */13    font-family: "Segoe UI", Roboto, Arial, sans-serif;14    color: #ffffff;15  }16 17  /* Status bar */18  .statusbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #ECECEC;30    font-size: 44px;31    letter-spacing: 0.5px;32  }33  .sb-left, .sb-right { display: flex; align-items: center; gap: 26px; }34  .sb-icon {35    width: 38px; height: 38px;36    opacity: 0.85;37  }38  /* simple icons */39  .icon-circle { border-radius: 50%; background: #DADADA; }40  .icon-square { background: #DADADA; border-radius: 6px; }41  .wifi svg, .battery svg { display: block; width: 48px; height: 40px; }42  .wifi path, .battery rect, .battery polygon { fill: #EDEDED; }43 44  /* Center content */45  .content {46    position: absolute;47    left: 0; right: 0;48    top: 280px;49    bottom: 0;50    text-align: center;51  }52  .mode {53    margin-top: 430px;54    font-size: 54px;55    color: #AEB4BB;56  }57  .timer {58    margin-top: 36px;59    font-size: 220px;60    font-weight: 600;61    letter-spacing: 6px;62  }63 64  /* Metrics layout */65  .metric {66    position: absolute;67    text-align: center;68  }69  .metric .value {70    font-size: 120px;71    font-weight: 500;72  }73  .metric .label {74    margin-top: 16px;75    font-size: 44px;76    color: #AEB4BB;77  }78  /* positions for the first row around the timer */79  .m-distance { left: 80px; top: 1080px; width: 280px; }80  .m-pace     { left: 400px; top: 1080px; width: 280px; }81  .m-heart    { right: 80px; top: 1080px; width: 280px; }82 83  /* second row */84  .m-calories { left: 210px; top: 1400px; width: 280px; }85  .m-steps    { right: 210px; top: 1400px; width: 280px; }86 87  /* Pause button */88  .pause-btn {89    position: absolute;90    left: 50%;91    bottom: 240px;92    transform: translateX(-50%);93    width: 168px; height: 168px;94    border-radius: 50%;95    background: #374353;96    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);97    display: flex;98    align-items: center;99    justify-content: center;100    gap: 18px;101  }102  .pause-bar {103    width: 18px; height: 68px; border-radius: 4px; background: #8FB1FF;104  }105 106  /* Bottom navigation pill */107  .nav-pill {108    position: absolute;109    left: 50%;110    bottom: 70px;111    transform: translateX(-50%);112    width: 320px; height: 14px;113    background: #F3F3F3;114    border-radius: 8px;115    opacity: 0.9;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status Bar -->123  <div class="statusbar">124    <div class="sb-left">125      <div>8:11</div>126      <div class="sb-icon icon-circle"></div>127      <div class="sb-icon icon-square"></div>128      <div class="sb-icon icon-square"></div>129      <div class="sb-icon icon-circle"></div>130    </div>131    <div class="sb-right">132      <div class="wifi">133        <svg viewBox="0 0 24 20">134          <path d="M12 18c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-6-6c3.3-3.3 8.7-3.3 12 0l1.6-1.6C15.4 7.2 8.6 7.2 4.4 10.4L6 12zm-4-4c5.5-5.5 14.5-5.5 20 0l2-2C16.5-0.7 7.5-0.7 0 6l2 2z"/>135        </svg>136      </div>137      <div class="battery">138        <svg viewBox="0 0 30 20">139          <rect x="1" y="3" width="24" height="14" rx="2" ry="2"></rect>140          <rect x="3" y="5" width="20" height="10" fill="#DADADA"></rect>141          <polygon points="26,7 30,7 30,13 26,13"></polygon>142        </svg>143      </div>144    </div>145  </div>146 147  <!-- Centered Content -->148  <div class="content">149    <div class="mode">Walking</div>150    <div class="timer">14:23</div>151 152    <!-- First row metrics -->153    <div class="metric m-distance">154      <div class="value">0.03</div>155      <div class="label">mi</div>156    </div>157    <div class="metric m-pace">158      <div class="value">-:-</div>159      <div class="label">/mi</div>160    </div>161    <div class="metric m-heart">162      <div class="value">0</div>163      <div class="label">Heart Pts</div>164    </div>165 166    <!-- Second row metrics -->167    <div class="metric m-calories">168      <div class="value">66</div>169      <div class="label">Cal</div>170    </div>171    <div class="metric m-steps">172      <div class="value">97</div>173      <div class="label">steps</div>174    </div>175  </div>176 177  <!-- Pause button -->178  <div class="pause-btn">179    <div class="pause-bar"></div>180    <div class="pause-bar"></div>181  </div>182 183  <!-- Bottom navigation pill -->184  <div class="nav-pill"></div>185 186</div>187</body>188</html>