GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Timer UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #E9F0E7; }8  #render-target {9    width: 1440px; height: 3120px; position: relative; overflow: hidden;10    background: #0E1411;11  }12 13  /* Page header */14  .app-title {15    position: absolute; top: 160px; left: 80px;16    font-size: 68px; font-weight: 600; letter-spacing: 0.5px; color: #E9F0E7;17  }18 19  /* Timer card */20  .timer-card {21    position: absolute; left: 60px; top: 280px; width: 1320px;22    background: #151C17; border-radius: 48px; padding: 64px; box-sizing: border-box;23  }24  .card-top {25    display: flex; align-items: center; justify-content: space-between;26  }27  .card-title {28    font-size: 64px; font-weight: 600; color: #E9F0E7;29  }30  .close-pill {31    width: 84px; height: 84px; border-radius: 50%;32    background: #2C3A31; display: flex; align-items: center; justify-content: center;33  }34  .close-pill svg { width: 40px; height: 40px; }35  .ring-wrap {36    position: relative; width: 100%; margin-top: 40px; margin-bottom: 40px;37  }38  .progress-ring {39    width: 1000px; height: 1000px; border-radius: 50%;40    border: 32px solid #78A96E; margin: 60px auto 0; position: relative;41    box-sizing: border-box; background: #151C17;42  }43  /* create small gap at top of ring */44  .progress-ring:before, .progress-ring:after {45    content: ""; position: absolute; top: -16px; left: 50%;46    width: 90px; height: 50px; transform: translateX(-50%);47    background: #151C17; border-radius: 24px;48  }49  .progress-ring:after {50    top: 20px; width: 60px; height: 40px;51  }52  .time-display {53    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -48%);54    font-size: 200px; font-weight: 600; letter-spacing: 2px; color: #EEF4EC;55  }56  .refresh-icon {57    position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%);58    width: 72px; height: 72px; border-radius: 50%;59    display: flex; align-items: center; justify-content: center;60  }61  .refresh-icon svg { width: 60px; height: 60px; }62 63  /* Bottom buttons inside card */64  .card-actions {65    margin-top: 40px; display: flex; gap: 48px; justify-content: center; padding-bottom: 40px;66  }67  .pill {68    height: 180px; padding: 0 64px; border-radius: 90px; display: flex;69    align-items: center; justify-content: center; font-size: 64px; font-weight: 600;70  }71  .pill.add-min {72    background: #2C3B31; color: #CFE9CF;73  }74  .pill.pause {75    background: #BDE9E6; color: #0D3A39; position: relative;76    min-width: 420px;77  }78  .pill.pause .pause-bars {79    display: flex; gap: 26px; align-items: center; justify-content: center;80  }81  .pill.pause .bar {82    width: 28px; height: 78px; background: #0D3A39; border-radius: 6px;83  }84 85  /* Big add (+) circle */86  .add-circle {87    position: absolute; top: 2100px; left: 50%; transform: translateX(-50%);88    width: 360px; height: 360px; border-radius: 50%; background: #B7E7AA;89    display: flex; align-items: center; justify-content: center; color: #0F1A14;90    font-size: 140px; font-weight: 500;91  }92 93  /* Bottom navigation bar */94  .bottom-nav {95    position: absolute; bottom: 120px; left: 0; width: 100%; height: 220px;96    background: #111913; display: flex; align-items: center; justify-content: space-around;97    box-sizing: border-box; padding: 20px 60px;98  }99  .nav-item {100    width: 20%; display: flex; flex-direction: column; align-items: center; gap: 18px; color: #BFD0C2;101    font-size: 40px;102  }103  .nav-icon {104    width: 96px; height: 96px; border-radius: 24px; display: flex; align-items: center; justify-content: center;105  }106  .nav-item .label { font-size: 38px; }107  .selected {108    background: #1E2A22; border-radius: 60px; padding: 18px 40px; color: #E9F0E7;109  }110  .selected .nav-icon { background: #2A3A2F; }111  .nav-icon svg { width: 64px; height: 64px; }112 113  /* Home indicator mock */114  .home-indicator {115    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);116    width: 700px; height: 16px; border-radius: 8px; background: #E6E6E6; opacity: 0.85;117  }118</style>119</head>120<body>121<div id="render-target">122  <!-- App Title -->123  <div class="app-title">Timer</div>124 125  <!-- Timer Card -->126  <div class="timer-card">127    <div class="card-top">128      <div class="card-title">25m Timer</div>129      <div class="close-pill" aria-label="Close">130        <svg viewBox="0 0 24 24">131          <path d="M6 6 L18 18 M18 6 L6 18" stroke="#CFE9CF" stroke-width="2.5" stroke-linecap="round" fill="none"></path>132        </svg>133      </div>134    </div>135 136    <div class="ring-wrap">137      <div class="progress-ring">138        <div class="time-display">26:38</div>139        <div class="refresh-icon">140          <svg viewBox="0 0 24 24">141            <path d="M12 5a7 7 0 1 1-6.3 4" stroke="#78A96E" stroke-width="2.2" fill="none" stroke-linecap="round"></path>142            <path d="M6 9 L5 4 M6 9 L10 8" stroke="#78A96E" stroke-width="2.2" fill="none" stroke-linecap="round"></path>143          </svg>144        </div>145      </div>146    </div>147 148    <div class="card-actions">149      <div class="pill add-min">+1:00</div>150      <div class="pill pause">151        <div class="pause-bars">152          <div class="bar"></div>153          <div class="bar"></div>154        </div>155      </div>156    </div>157  </div>158 159  <!-- Large Add Button -->160  <div class="add-circle">+</div>161 162  <!-- Bottom Navigation -->163  <div class="bottom-nav">164    <div class="nav-item">165      <div class="nav-icon">166        <svg viewBox="0 0 24 24">167          <circle cx="12" cy="12" r="8" stroke="#CFE9CF" stroke-width="2" fill="none"></circle>168          <path d="M12 7 L12 12 L16 12" stroke="#CFE9CF" stroke-width="2" stroke-linecap="round" fill="none"></path>169        </svg>170      </div>171      <div class="label">Alarm</div>172    </div>173    <div class="nav-item">174      <div class="nav-icon">175        <svg viewBox="0 0 24 24">176          <circle cx="12" cy="12" r="8" stroke="#CFE9CF" stroke-width="2" fill="none"></circle>177          <path d="M12 6 L12 12 L8 12" stroke="#CFE9CF" stroke-width="2" stroke-linecap="round" fill="none"></path>178        </svg>179      </div>180      <div class="label">Clock</div>181    </div>182    <div class="nav-item selected">183      <div class="nav-icon">184        <svg viewBox="0 0 24 24">185          <path d="M8 4 L16 4 L14 10 L18 20 L6 20 L10 10 Z" fill="#CFE9CF"></path>186        </svg>187      </div>188      <div class="label">Timer</div>189    </div>190    <div class="nav-item">191      <div class="nav-icon">192        <svg viewBox="0 0 24 24">193          <circle cx="12" cy="12" r="8" stroke="#CFE9CF" stroke-width="2" fill="none"></circle>194          <rect x="11" y="6" width="2" height="6" fill="#CFE9CF"></rect>195          <rect x="11" y="12" width="6" height="2" fill="#CFE9CF"></rect>196        </svg>197      </div>198      <div class="label">Stopwatch</div>199    </div>200    <div class="nav-item">201      <div class="nav-icon">202        <svg viewBox="0 0 24 24">203          <rect x="4" y="12" width="16" height="6" rx="2" fill="#CFE9CF"></rect>204          <rect x="5" y="10" width="8" height="2" fill="#CFE9CF"></rect>205        </svg>206      </div>207      <div class="label">Bedtime</div>208    </div>209  </div>210 211  <div class="home-indicator"></div>212</div>213</body>214</html>