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 Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000000;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15    color: #fff;16  }17 18  /* Top bar */19  .topbar {20    position: absolute;21    top: 0;22    left: 0;23    height: 180px;24    width: 100%;25  }26  .topbar .btn {27    position: absolute;28    top: 70px;29    font-size: 46px;30    letter-spacing: 0.3px;31  }32  .topbar .cancel { left: 48px; color: #ff5a5a; }33  .topbar .save { right: 48px; color: #ff6b5f; }34  .topbar .title {35    position: absolute;36    left: 50%;37    top: 62px;38    transform: translateX(-50%);39    font-size: 64px;40    font-weight: 700;41  }42 43  /* Infinity icon near top-right */44  .infinity {45    position: absolute;46    right: 60px;47    top: 210px;48    font-size: 96px;49    color: #8a8a8a;50    opacity: 0.7;51  }52 53  /* Picker styles */54  .picker {55    position: absolute;56    top: 380px;57    left: 0;58    width: 100%;59    display: flex;60    justify-content: center;61    gap: 20px;62    pointer-events: none;63  }64  .picker .col {65    display: flex;66    flex-direction: column;67    align-items: center;68    gap: 22px;69    min-width: 170px;70  }71  .picker .faded {72    color: #d9d9d9;73    opacity: 0.25;74    font-size: 64px;75  }76  .picker .selected {77    color: #f0f0f0;78    font-size: 92px;79    background: #232323;80    padding: 22px 28px;81    border-radius: 24px;82    min-width: 170px;83    text-align: center;84    box-shadow: 0 0 0 2px rgba(255,255,255,0.06) inset;85  }86  .picker .unit {87    align-self: center;88    margin: 0 22px 0 -6px;89    color: #cfcfcf;90    font-size: 56px;91    opacity: 0.9;92  }93 94  /* Section title */95  .mode {96    position: absolute;97    top: 1090px;98    width: 100%;99    text-align: center;100    color: #ffffff;101    font-size: 86px;102    font-weight: 500;103    letter-spacing: 1px;104  }105  .mode .chev {106    display: inline-block;107    margin-left: 14px;108    transform: translateY(-6px);109    color: #dddddd;110    font-size: 70px;111  }112 113  /* Warm up block */114  .warmup-title {115    position: absolute;116    top: 1360px;117    width: 100%;118    text-align: center;119    color: #8c8c8c;120    font-size: 132px;121    font-weight: 500;122    letter-spacing: 1px;123  }124  .chips {125    position: absolute;126    top: 1560px;127    width: 100%;128    display: flex;129    justify-content: center;130    gap: 140px;131  }132  .chip {133    color: #dcdcdc;134    font-size: 48px;135    padding: 26px 64px;136    border-radius: 60px;137    border: 2px solid #666666;138  }139  .chip.active {140    border-color: #ffffff;141    color: #ffffff;142    border-width: 3px;143    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);144  }145 146  /* Home indicator */147  .home-indicator {148    position: absolute;149    bottom: 44px;150    left: 50%;151    transform: translateX(-50%);152    width: 420px;153    height: 12px;154    background: #f5f5f5;155    border-radius: 10px;156    opacity: 0.9;157  }158</style>159</head>160<body>161<div id="render-target">162 163  <div class="topbar">164    <div class="btn cancel">Cancel</div>165    <div class="title">Duration</div>166    <div class="btn save">Save</div>167  </div>168 169  <div class="infinity">∞</div>170 171  <!-- Time picker -->172  <div class="picker">173    <!-- Hours -->174    <div class="col">175      <div class="faded">06</div>176      <div class="faded">07</div>177      <div class="faded">08</div>178      <div class="selected">00</div>179      <div class="faded">01</div>180      <div class="faded">02</div>181      <div class="faded">03</div>182    </div>183    <div class="unit">h</div>184 185    <!-- Minutes -->186    <div class="col">187      <div class="faded">07</div>188      <div class="faded">08</div>189      <div class="selected">09</div>190      <div class="faded">10</div>191      <div class="faded">11</div>192      <div class="faded">12</div>193      <div class="faded">13</div>194    </div>195    <div class="unit">m</div>196 197    <!-- Seconds -->198    <div class="col">199      <div class="faded">01</div>200      <div class="faded">02</div>201      <div class="faded">03</div>202      <div class="selected">00</div>203      <div class="faded">01</div>204      <div class="faded">02</div>205      <div class="faded">03</div>206    </div>207    <div class="unit">s</div>208  </div>209 210  <!-- Mode / Meditation selector -->211  <div class="mode">Meditation <span class="chev">▾</span></div>212 213  <!-- Warm up section -->214  <div class="warmup-title">Warm Up</div>215  <div class="chips">216    <div class="chip active">0s</div>217    <div class="chip">5s</div>218    <div class="chip">10s</div>219    <div class="chip">15s</div>220  </div>221 222  <div class="home-indicator"></div>223</div>224</body>225</html>