GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Workout Timer UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #1f2124;13    font-family: Arial, Helvetica, sans-serif;14    color: #ECEFF1;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1440px;23    height: 150px;24    padding: 30px 40px;25    box-sizing: border-box;26    color: #EDEFF3;27    font-size: 64px;28    display: flex;29    align-items: center;30    justify-content: space-between;31  }32  .status-left {33    display: flex;34    align-items: center;35    gap: 34px;36  }37  .status-right {38    display: flex;39    align-items: center;40    gap: 40px;41  }42  .circle-icon {43    width: 70px;44    height: 70px;45    border: 3px solid #9EA4AC;46    border-radius: 50%;47    color: #C9CFD6;48    display: flex;49    align-items: center;50    justify-content: center;51    font-weight: bold;52    font-size: 48px;53  }54  .small-text {55    color: #BFC6CE;56    font-size: 58px;57  }58 59  /* Main content */60  .label {61    position: absolute;62    top: 1180px;63    left: 0;64    width: 100%;65    text-align: center;66    color: #AAB1B9;67    font-size: 80px;68    letter-spacing: 1px;69  }70  .time {71    position: absolute;72    top: 1360px;73    left: 0;74    width: 100%;75    text-align: center;76    font-size: 300px;77    font-weight: 600;78    letter-spacing: 6px;79    color: #F8FAFC;80  }81  .calories {82    position: absolute;83    top: 1900px;84    left: 0;85    width: 100%;86    text-align: center;87    font-size: 160px;88    font-weight: 500;89    color: #F5F7FA;90  }91  .cal-label {92    position: absolute;93    top: 2060px;94    left: 0;95    width: 100%;96    text-align: center;97    font-size: 64px;98    color: #9AA1A9;99    letter-spacing: 1px;100  }101 102  /* Pause button */103  .fab {104    position: absolute;105    bottom: 300px;106    left: 50%;107    transform: translateX(-50%);108    width: 230px;109    height: 230px;110    background: #364050;111    border-radius: 50%;112    box-shadow: 0 12px 30px rgba(0,0,0,0.35);113    display: flex;114    align-items: center;115    justify-content: center;116  }117  .pause-bars {118    display: flex;119    gap: 24px;120  }121  .pause-bars span {122    width: 26px;123    height: 86px;124    background: #83A5E8;125    border-radius: 6px;126  }127 128  /* Bottom navigation pill area */129  .nav-area {130    position: absolute;131    bottom: 0;132    left: 0;133    width: 1440px;134    height: 180px;135    background: #000000;136  }137  .gesture-pill {138    position: absolute;139    bottom: 40px;140    left: 50%;141    transform: translateX(-50%);142    width: 340px;143    height: 16px;144    background: #EDEDED;145    border-radius: 10px;146    opacity: 0.9;147  }148 149  /* Simple icon styling */150  .icon-svg { width: 70px; height: 70px; }151  .icon-stroke { stroke: #EDEFF1; stroke-width: 3; fill: none; }152  .icon-fill { fill: #EDEFF1; }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status Bar -->159  <div class="status-bar">160    <div class="status-left">161      <div style="font-weight:600;">11:59</div>162      <div class="circle-icon">i</div>163      <div class="small-text">S</div>164      <div class="small-text">G</div>165      <div class="small-text">79°</div>166    </div>167    <div class="status-right">168      <!-- Wi‑Fi icon -->169      <svg class="icon-svg" viewBox="0 0 24 24">170        <path class="icon-stroke" d="M2.5 8.5c5.8-5.6 13.2-5.6 19 0"></path>171        <path class="icon-stroke" d="M5.5 11.5c4.2-4.1 8.8-4.1 13 0"></path>172        <path class="icon-stroke" d="M8.5 14.5c2.7-2.6 5.3-2.6 8 0"></path>173        <circle class="icon-fill" cx="12" cy="18.5" r="1.8"></circle>174      </svg>175      <!-- Cast / signal icon -->176      <svg class="icon-svg" viewBox="0 0 24 24">177        <circle class="icon-stroke" cx="12" cy="12" r="9"></circle>178        <circle class="icon-fill" cx="12" cy="12" r="2.1"></circle>179        <path class="icon-stroke" d="M15.5 7.5c2.6 2.3 2.6 6.7 0 9"></path>180        <path class="icon-stroke" d="M8.5 7.5c-2.6 2.3-2.6 6.7 0 9"></path>181      </svg>182      <!-- Battery with bolt -->183      <svg class="icon-svg" viewBox="0 0 32 24">184        <rect x="2" y="6" width="24" height="12" rx="2" ry="2" class="icon-stroke"></rect>185        <rect x="26" y="10" width="4" height="4" class="icon-fill"></rect>186        <path d="M15 7 l-4 6 h5 l-3 6 l8-9 h-6 z" class="icon-fill"></path>187      </svg>188    </div>189  </div>190 191  <!-- Main Content -->192  <div class="label">Yoga</div>193  <div class="time">02:57</div>194  <div class="calories">9</div>195  <div class="cal-label">Cal</div>196 197  <!-- Pause Button -->198  <div class="fab">199    <div class="pause-bars">200      <span></span>201      <span></span>202    </div>203  </div>204 205  <!-- Bottom Navigation Area -->206  <div class="nav-area">207    <div class="gesture-pill"></div>208  </div>209 210</div>211</body>212</html>