GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Timer 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: #0E1512; /* deep dark green/black */14    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;15    color: #E6EFE6;16  }17 18  /* Header */19  .page-title {20    position: absolute;21    left: 60px;22    top: 140px;23    font-size: 64px;24    font-weight: 500;25    letter-spacing: 0.5px;26    color: #E8F1E8;27  }28  .menu {29    position: absolute;30    right: 40px;31    top: 130px;32    font-size: 54px;33    color: #8EA091;34  }35 36  /* Timer Card */37  .timer-card {38    position: absolute;39    left: 40px;40    top: 250px;41    width: 1000px;42    height: 1420px;43    background: #141D18;44    border-radius: 48px;45    box-sizing: border-box;46    padding: 48px;47  }48  .card-title {49    font-size: 56px;50    color: #DDE8DD;51  }52  .close-chip {53    position: absolute;54    right: 64px;55    top: 64px;56    width: 72px;57    height: 72px;58    border-radius: 50%;59    background: #26352D;60    color: #CFE4CF;61    display: flex;62    align-items: center;63    justify-content: center;64    font-size: 42px;65    line-height: 1;66  }67 68  /* Circular progress */69  .progress {70    position: relative;71    width: 860px;72    height: 860px;73    margin: 40px auto 0 auto;74    border-radius: 50%;75    background: conic-gradient(#7FB37C 0 300deg, #2A3A31 300deg 360deg);76  }77  .progress::after { /* inner cutout for ring */78    content: "";79    position: absolute;80    inset: 34px;81    border-radius: 50%;82    background: #141D18;83  }84  .time {85    position: absolute;86    width: 100%;87    top: 360px;88    text-align: center;89    font-size: 180px;90    font-weight: 600;91    letter-spacing: 4px;92    color: #F4F7F3;93    pointer-events: none;94  }95  .refresh {96    position: absolute;97    left: 50%;98    top: 640px;99    transform: translateX(-50%);100    width: 70px;101    height: 70px;102    color: #8FBA95;103    opacity: 0.9;104  }105 106  /* Control buttons */107  .controls {108    position: absolute;109    bottom: 84px;110    left: 48px;111    right: 48px;112    display: flex;113    justify-content: space-between;114  }115  .pill {116    width: 430px;117    height: 170px;118    border-radius: 100px;119    display: flex;120    align-items: center;121    justify-content: center;122    font-size: 58px;123    font-weight: 600;124  }125  .pill.add {126    background: #26372E;127    color: #D8EAD8;128  }129  .pill.pause {130    background: #C6E6F0;131    color: #1A383F;132  }133 134  /* Big add button */135  .add-btn {136    position: absolute;137    left: 50%;138    transform: translateX(-50%);139    top: 1790px;140    width: 240px;141    height: 240px;142    border-radius: 50%;143    background: #BCE9B8;144    color: #0E1512;145    display: flex;146    align-items: center;147    justify-content: center;148    font-size: 120px;149    font-weight: 500;150  }151 152  /* Bottom Navigation */153  .bottom-bar {154    position: absolute;155    left: 0;156    bottom: 0;157    width: 1080px;158    height: 260px;159    background: #141D18;160    box-shadow: 0 -1px 0 rgba(255,255,255,0.02) inset;161  }162  .nav {163    position: absolute;164    left: 40px;165    right: 40px;166    top: 24px;167    display: flex;168    justify-content: space-between;169    align-items: center;170  }171  .nav-item {172    width: 184px;173    height: 184px;174    text-align: center;175    color: #C8D2CA;176    opacity: 0.8;177  }178  .nav-icon {179    width: 72px;180    height: 72px;181    margin: 26px auto 10px auto;182    display: block;183  }184  .nav-label {185    font-size: 36px;186    margin-top: 4px;187  }188  .selected {189    position: relative;190    color: #E9F4EA;191    opacity: 1;192  }193  .selected .selected-pill {194    position: absolute;195    left: 22px;196    right: 22px;197    top: 18px;198    height: 120px;199    border-radius: 80px;200    background: #27372F;201    z-index: -1;202  }203 204  /* Gesture bar */205  .gesture {206    position: absolute;207    bottom: 16px;208    left: 50%;209    transform: translateX(-50%);210    width: 300px;211    height: 10px;212    background: #EDEDED;213    border-radius: 8px;214    opacity: 0.85;215  }216</style>217</head>218<body>219  <div id="render-target">220    <div class="page-title">Timer</div>221    <div class="menu">⋮</div>222 223    <div class="timer-card">224      <div class="card-title">30m Timer</div>225      <div class="close-chip">×</div>226 227      <div class="progress">228        <div class="time">25:04</div>229        <svg class="refresh" viewBox="0 0 24 24">230          <path fill="currentColor" d="M12 5a7 7 0 1 1-6.7 9h2.2A5 5 0 1 0 12 7.9V10l4-3-4-3v3z"/>231        </svg>232      </div>233 234      <div class="controls">235        <div class="pill add">+1:00</div>236        <div class="pill pause">237          <svg class="nav-icon" viewBox="0 0 24 24" style="width:64px;height:64px;margin:0;">238            <path fill="currentColor" d="M7 5h4v14H7zM13 5h4v14h-4z"/>239          </svg>240        </div>241      </div>242    </div>243 244    <div class="add-btn">+</div>245 246    <div class="bottom-bar">247      <div class="nav">248        <div class="nav-item">249          <svg class="nav-icon" viewBox="0 0 24 24">250            <path fill="currentColor" d="M7 5l2-2h6l2 2h2v2h-2v2H7V7H5V5h2zm0 6h10v8H7v-8zm2 2v4h6v-4H9z"/>251          </svg>252          <div class="nav-label">Alarm</div>253        </div>254        <div class="nav-item">255          <svg class="nav-icon" viewBox="0 0 24 24">256            <path fill="currentColor" d="M12 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm1 4h-2v5l4 2 1-1-3-1.5V8z"/>257          </svg>258          <div class="nav-label">Clock</div>259        </div>260        <div class="nav-item selected">261          <div class="selected-pill"></div>262          <svg class="nav-icon" viewBox="0 0 24 24">263            <path fill="currentColor" d="M7 4h10l-3 6 3 6H7l3-6-3-6z"/>264          </svg>265          <div class="nav-label">Timer</div>266        </div>267        <div class="nav-item">268          <svg class="nav-icon" viewBox="0 0 24 24">269            <path fill="currentColor" d="M13 3h-2v2h2V3zm5.3 3.7l-1.4-1.4-1.4 1.4 1.4 1.4 1.4-1.4zM12 6a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm1 3h-2v5h2v-5z"/>270          </svg>271          <div class="nav-label">Stopwatch</div>272        </div>273        <div class="nav-item">274          <svg class="nav-icon" viewBox="0 0 24 24">275            <path fill="currentColor" d="M3 12h10a3 3 0 0 1 3 3v3H3v-6zm18 0h-3v6h3v-6zm-13-3h4v3H8V9z"/>276          </svg>277          <div class="nav-label">Bedtime</div>278        </div>279      </div>280      <div class="gesture"></div>281    </div>282  </div>283</body>284</html>