GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Workout Timer UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    width: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #1F2124; /* dark screen background */13    color: #EEE;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 36px;20    left: 40px;21    width: 1360px;22    height: 140px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #fff;27  }28  .status-left, .status-right {29    display: flex;30    align-items: center;31    gap: 34px;32  }33  .time {34    font-size: 64px;35    letter-spacing: 1px;36    color: #f7f7f7;37  }38  .chip {39    width: 64px;40    height: 64px;41    border-radius: 32px;42    border: 2px solid #8A8D93;43    color: #DADADA;44    display: flex;45    align-items: center;46    justify-content: center;47    font-weight: 600;48    font-size: 36px;49    opacity: 0.9;50  }51  .temp {52    font-size: 50px;53    color: #eaeaea;54  }55 56  /* Center content */57  .content {58    position: absolute;59    top: 980px;60    left: 0;61    width: 100%;62    text-align: center;63  }64  .mode {65    font-size: 70px;66    color: #B8BDC4;67    margin-bottom: 40px;68  }69  .timer {70    font-size: 300px;71    letter-spacing: 8px;72    font-weight: 500;73    color: #F0F0F0;74    margin-bottom: 160px;75  }76  .calories {77    font-size: 190px;78    color: #F2F2F2;79    margin-bottom: 22px;80  }81  .cal-label {82    font-size: 60px;83    color: #B8BDC4;84  }85 86  /* Bottom controls */87  .btn-stop, .btn-play {88    position: absolute;89    width: 220px;90    height: 220px;91    border-radius: 110px;92    display: flex;93    align-items: center;94    justify-content: center;95  }96  .btn-stop {97    left: 120px;98    bottom: 340px;99    background: #463939;100  }101  .btn-play {102    left: 610px; /* centered for 1440px width */103    bottom: 340px;104    background: #3C4656;105  }106  .stop-square {107    width: 72px;108    height: 72px;109    background: #F1998F;110    border-radius: 8px;111  }112  .play-triangle {113    width: 0;114    height: 0;115    border-left: 70px solid #86A7E5;116    border-top: 45px solid transparent;117    border-bottom: 45px solid transparent;118    margin-left: 10px;119  }120 121  /* Navigation bar pill */122  .nav-pill {123    position: absolute;124    bottom: 140px;125    left: 50%;126    transform: translateX(-50%);127    width: 520px;128    height: 18px;129    border-radius: 12px;130    background: #E7E7E7;131    opacity: 0.9;132  }133 134  /* SVG icon sizing */135  .icon {136    width: 64px;137    height: 64px;138    opacity: 0.95;139  }140</style>141</head>142<body>143<div id="render-target">144  <!-- Status Bar -->145  <div class="status-bar">146    <div class="status-left">147      <div class="time">11:59</div>148      <div class="chip">i</div>149      <div class="chip">S</div>150      <div class="chip">G</div>151      <div class="temp">79°</div>152    </div>153    <div class="status-right">154      <!-- WiFi Icon -->155      <svg class="icon" viewBox="0 0 24 24">156        <path d="M5 12c3.9-3.9 10.1-3.9 14 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>157        <path d="M8.5 15.5c2.2-2.2 5.8-2.2 8 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>158        <circle cx="12" cy="19" r="2" fill="#ffffff"/>159      </svg>160      <!-- Cast Icon -->161      <svg class="icon" viewBox="0 0 24 24">162        <rect x="3" y="5" width="18" height="12" rx="2" stroke="#ffffff" stroke-width="2" fill="none"/>163        <path d="M3 19c2-2 5-2 7 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>164        <path d="M3 15c4-4 10-4 14 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>165      </svg>166      <!-- Battery Icon -->167      <svg class="icon" viewBox="0 0 24 24">168        <rect x="3" y="7" width="16" height="10" rx="2" stroke="#ffffff" stroke-width="2" fill="none"/>169        <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>170      </svg>171    </div>172  </div>173 174  <!-- Main Content -->175  <div class="content">176    <div class="mode">Yoga</div>177    <div class="timer">03:19</div>178    <div class="calories">10</div>179    <div class="cal-label">Cal</div>180  </div>181 182  <!-- Bottom Controls -->183  <div class="btn-stop">184    <div class="stop-square"></div>185  </div>186  <div class="btn-play">187    <div class="play-triangle"></div>188  </div>189 190  <!-- Bottom Navigation Pill -->191  <div class="nav-pill"></div>192</div>193</body>194</html>