GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Duration Screen</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #000000;13    color: #ffffff;14  }15 16  /* Header */17  .header {18    position: absolute;19    top: 40px;20    left: 0;21    right: 0;22    height: 160px;23  }24  .header .title {25    position: absolute;26    left: 0; right: 0;27    text-align: center;28    font-weight: 600;29    font-size: 64px;30    letter-spacing: 0.5px;31    top: 50%;32    transform: translateY(-50%);33  }34  .header .action {35    position: absolute;36    top: 36px;37    font-size: 48px;38    color: #ff3b30;39  }40  .header .cancel { left: 36px; }41  .header .save { right: 36px; }42 43  /* Infinity icon */44  .infinity {45    position: absolute;46    right: 60px;47    top: 250px;48    font-size: 84px;49    color: #9E9E9E;50    opacity: 0.8;51  }52 53  /* Picker area */54  .picker-area {55    position: absolute;56    top: 500px;57    left: 0;58    right: 0;59    height: 820px;60    display: flex;61    justify-content: center;62    align-items: center;63  }64  .picker {65    width: 280px;66    height: 100%;67    position: relative;68    margin: 0 20px;69    text-align: center;70    color: #d0d0d0;71  }72  .picker .numbers {73    position: absolute;74    top: 0;75    left: 0; right: 0;76    padding-top: 180px;77    font-size: 48px;78    line-height: 120px;79    opacity: 0.35;80  }81  .picker .numbers .dim { opacity: 0.25; }82  .picker .selected {83    position: absolute;84    top: 330px;85    left: 60px;86    width: 160px;87    height: 120px;88    border-radius: 28px;89    background: #2b2b2b;90    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);91    display: flex;92    align-items: center;93    justify-content: center;94    font-size: 64px;95    color: #ffffff;96    font-weight: 600;97    letter-spacing: 1px;98  }99  .picker .suffix {100    position: absolute;101    top: 362px;102    right: 12px;103    font-size: 48px;104    color: #cfcfcf;105    opacity: 0.9;106  }107 108  /* Meditation section */109  .section-title {110    position: absolute;111    top: 1260px;112    left: 160px;113    right: 160px;114    font-size: 80px;115    font-weight: 500;116    color: #ffffff;117    letter-spacing: 1px;118  }119  .section-title .chev {120    display: inline-block;121    vertical-align: middle;122    margin-left: 18px;123  }124  .section-title svg { width: 44px; height: 44px; fill: none; stroke: #ffffff; stroke-width: 8; }125 126  /* Warm Up */127  .warmup-title {128    position: absolute;129    top: 1680px;130    left: 160px;131    right: 160px;132    font-size: 96px;133    font-weight: 400;134    color: #cfcfcf;135  }136  .segmented {137    position: absolute;138    top: 1810px;139    left: 160px;140    right: 160px;141    height: 120px;142    display: flex;143    align-items: center;144    gap: 90px;145  }146  .chip {147    min-width: 190px;148    height: 96px;149    border-radius: 48px;150    display: flex;151    align-items: center;152    justify-content: center;153    font-size: 56px;154    color: #cfcfcf;155    opacity: 0.9;156  }157  .chip.primary {158    color: #ffffff;159    border: 3px solid rgba(255,255,255,0.8);160  }161  .chip.secondary { opacity: 0.8; }162 163  /* Home indicator */164  .home-indicator {165    position: absolute;166    bottom: 40px;167    left: 240px;168    width: 600px;169    height: 12px;170    background: #bdbdbd;171    border-radius: 24px;172    opacity: 0.6;173  }174</style>175</head>176<body>177<div id="render-target">178 179  <!-- Header -->180  <div class="header">181    <div class="action cancel">Cancel</div>182    <div class="title">Duration</div>183    <div class="action save">Save</div>184  </div>185 186  <!-- Infinity icon near top-right -->187  <div class="infinity">∞</div>188 189  <!-- Picker area -->190  <div class="picker-area">191    <!-- Hours -->192    <div class="picker">193      <div class="numbers">194        <div class="dim">12</div>195        <div class="dim">13</div>196        <div class="dim">14</div>197        <div class="dim">01</div>198        <div class="dim">02</div>199        <div class="dim">03</div>200      </div>201      <div class="selected">00</div>202      <div class="suffix">h</div>203    </div>204 205    <!-- Minutes -->206    <div class="picker">207      <div class="numbers">208        <div class="dim">16</div>209        <div class="dim">17</div>210        <div class="dim">18</div>211        <div class="dim">01</div>212        <div class="dim">02</div>213        <div class="dim">03</div>214      </div>215      <div class="selected">15</div>216      <div class="suffix">m</div>217    </div>218 219    <!-- Seconds -->220    <div class="picker">221      <div class="numbers">222        <div class="dim">01</div>223        <div class="dim">02</div>224        <div class="dim">03</div>225        <div class="dim">01</div>226        <div class="dim">02</div>227        <div class="dim">03</div>228      </div>229      <div class="selected">00</div>230      <div class="suffix">s</div>231    </div>232  </div>233 234  <!-- Meditation section with dropdown -->235  <div class="section-title">236    Meditation237    <span class="chev">238      <svg viewBox="0 0 24 24">239        <path d="M5 8l7 8 7-8" />240      </svg>241    </span>242  </div>243 244  <!-- Warm Up section -->245  <div class="warmup-title">Warm Up</div>246  <div class="segmented">247    <div class="chip primary">0s</div>248    <div class="chip secondary">5s</div>249    <div class="chip secondary">10s</div>250    <div class="chip secondary">15s</div>251  </div>252 253  <!-- Home indicator -->254  <div class="home-indicator"></div>255 256</div>257</body>258</html>