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, Helvetica, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#000;11    color:#fff;12  }13 14  /* Top bar */15  .topbar {16    position:absolute; left:0; top:0; width:100%; height:160px;17    display:flex; align-items:center; justify-content:center;18  }19  .topbar .action {20    position:absolute; top:60px; font-size:46px; color:#ff3b30;21  }22  .topbar .left { left:44px; }23  .topbar .right { right:44px; }24  .topbar .title {25    position:absolute; top:56px; left:0; right:0; text-align:center;26    font-weight:700; font-size:56px; color:#fff;27  }28 29  /* Infinity icon */30  .infinity {31    position:absolute; right:56px; top:170px;32    font-size:90px; color:#777;33    opacity:0.6;34  }35 36  /* Picker area */37  .picker {38    position:absolute; left:0; right:0; top:540px; height:520px;39    display:flex; align-items:center; justify-content:center;40    gap:70px;41  }42  .wheel {43    width:260px; height:520px; position:relative;44  }45  .wheel ul {46    list-style:none; margin:0; padding:0; text-align:center;47  }48  .wheel li {49    font-size:52px; color:#9aa0a6; opacity:0.35; margin:24px 0;50  }51  .wheel .selected {52    position:absolute; left:50%; transform:translateX(-50%);53    top:210px;54    background:#1f1f1f; color:#fff; opacity:1;55    border-radius:28px; padding:24px 36px;56    font-size:64px; font-weight:600;57    display:flex; align-items:center; justify-content:center;58    gap:16px;59    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;60  }61  .unit { color:#bfbfbf; font-size:52px; font-weight:500; }62 63  /* Faded numbers above/below to simulate wheel */64  .wheel .above, .wheel .below {65    position:absolute; left:0; right:0; text-align:center; color:#9aa0a6;66  }67  .wheel .above { top:90px; }68  .wheel .below { bottom:90px; }69  .wheel .row { display:flex; flex-direction:column; gap:22px; }70  .wheel .row span { font-size:46px; opacity:0.35; }71 72  /* Section title */73  .section-title {74    position:absolute; left:0; right:0; top:1180px;75    text-align:center; font-size:80px; font-weight:600; color:#fff;76    letter-spacing:0.5px;77  }78  .section-title .chev {79    display:inline-block; width:28px; height:28px; margin-left:18px;80    vertical-align:middle;81  }82  .section-title svg { fill:#fff; opacity:0.9; }83 84  /* Warm up */85  .warmup {86    position:absolute; left:0; right:0; top:1660px;87    text-align:center; color:#9aa0a6;88  }89  .warmup h3 {90    margin:0 0 40px 0; font-size:88px; font-weight:500; color:#9aa0a6; opacity:0.8;91  }92  .warmup .options {93    display:flex; justify-content:center; gap:80px;94  }95  .tag {96    font-size:56px; color:#fff; padding:20px 40px; border-radius:40px;97    border:2px solid #ffffff55;98  }99  .tag.inactive { color:#cfcfcf; border-color:transparent; opacity:0.8; }100  .tag:hover { background:#1f1f1f; }101 102  /* Home indicator */103  .home-indicator {104    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);105    width:640px; height:12px; border-radius:6px; background:#ffffff33;106  }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Top Navigation -->113  <div class="topbar">114    <div class="action left">Cancel</div>115    <div class="title">Duration</div>116    <div class="action right">Save</div>117  </div>118 119  <div class="infinity">∞</div>120 121  <!-- Time Picker -->122  <div class="picker">123    <!-- Hours -->124    <div class="wheel">125      <div class="selected"><span>00</span><span class="unit">h</span></div>126      <div class="above">127        <div class="row">128          <span>12</span>129          <span>11</span>130          <span>10</span>131        </div>132      </div>133      <div class="below">134        <div class="row">135          <span>01</span>136          <span>02</span>137          <span>03</span>138        </div>139      </div>140    </div>141 142    <!-- Minutes -->143    <div class="wheel">144      <div class="selected"><span>13</span><span class="unit">m</span></div>145      <div class="above">146        <div class="row">147          <span>12</span>148          <span>11</span>149          <span>10</span>150        </div>151      </div>152      <div class="below">153        <div class="row">154          <span>14</span>155          <span>15</span>156          <span>16</span>157        </div>158      </div>159    </div>160 161    <!-- Seconds -->162    <div class="wheel">163      <div class="selected"><span>00</span><span class="unit">s</span></div>164      <div class="above">165        <div class="row">166          <span>01</span>167          <span>02</span>168          <span>03</span>169        </div>170      </div>171      <div class="below">172        <div class="row">173          <span>01</span>174          <span>02</span>175          <span>03</span>176        </div>177      </div>178    </div>179  </div>180 181  <!-- Section: Meditation -->182  <div class="section-title">183    Meditation184    <span class="chev">185      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg>186    </span>187  </div>188 189  <!-- Warm Up -->190  <div class="warmup">191    <h3>Warm Up</h3>192    <div class="options">193      <div class="tag">0s</div>194      <div class="tag inactive">5s</div>195      <div class="tag inactive">10s</div>196      <div class="tag inactive">15s</div>197    </div>198  </div>199 200  <div class="home-indicator"></div>201</div>202</body>203</html>