GD-ML/AndroidCode

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