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: "Segoe UI", Roboto, system-ui, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #231a19;11  }12 13  /* Top title area */14  .page-title {15    position: absolute; left: 56px; top: 140px;16    color: #f1d7d3; font-size: 64px; font-weight: 600;17  }18  .menu-dots {19    position: absolute; right: 40px; top: 160px;20    color: #e8cfc9; font-size: 48px; opacity: 0.8;21  }22 23  /* Card container */24  .card {25    position: absolute; left: 40px; top: 220px;26    width: 1000px; height: 1280px;27    background: #2b201f; border-radius: 64px;28    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);29  }30  .card-header {31    position: absolute; left: 48px; top: 48px; right: 48px; height: 80px;32    display: flex; align-items: center; justify-content: space-between;33    color: #f1d7d3;34  }35  .card-header .title {36    font-size: 64px; font-weight: 600;37  }38  .close-pill {39    width: 72px; height: 72px; border-radius: 50%;40    background: #4a3635; display: flex; align-items: center; justify-content: center;41    color: #f1d7d3; font-size: 44px;42  }43 44  /* Timer ring */45  .ring-wrap {46    position: absolute; left: 100px; top: 180px; width: 800px; height: 800px;47    display: flex; align-items: center; justify-content: center;48  }49  .ring {50    width: 800px; height: 800px; border-radius: 50%;51    background:52      conic-gradient(#d98581 0deg 330deg, #453433 330deg 360deg);53    position: relative;54  }55  .ring::after {56    content: "";57    position: absolute; inset: 42px;58    background: #2b201f; border-radius: 50%;59  }60  .time {61    position: absolute; width: 800px; height: 800px;62    display: flex; align-items: center; justify-content: center;63    color: #f1d7d3; font-size: 190px; font-weight: 700; letter-spacing: 8px;64    pointer-events: none;65  }66 67  .reset-icon {68    position: absolute; left: 0; right: 0; margin: 0 auto; top: 720px;69    width: 60px; height: 60px;70    display: flex; align-items: center; justify-content: center;71  }72  .reset-icon svg { width: 60px; height: 60px; }73 74  /* Control buttons */75  .controls {76    position: absolute; left: 120px; top: 1020px; right: 120px; height: 180px;77    display: flex; gap: 80px; align-items: center; justify-content: center;78  }79  .pill {80    height: 180px; min-width: 320px; padding: 0 40px;81    border-radius: 90px; display: flex; align-items: center; justify-content: center;82    font-size: 62px; color: #f1d7d3;83  }84  .pill.add { background: #5a403e; }85  .pill.pause { background: #ead28a; color: #2a1f1e; font-weight: 700; }86  .pill.pause .pause-bars {87    width: 36px; height: 72px; display: flex; gap: 16px; margin-left: 12px;88  }89  .pill.pause .pause-bars span {90    width: 14px; height: 72px; background: #2a1f1e; border-radius: 6px;91  }92 93  /* Floating add timer button */94  .fab {95    position: absolute; left: 50%; transform: translateX(-50%);96    top: 1590px; width: 220px; height: 220px; border-radius: 50%;97    background: #f7a9a2; color: #2a1f1e; font-size: 120px; line-height: 220px; text-align: center;98    box-shadow: 0 6px 16px rgba(0,0,0,0.4);99  }100 101  /* Bottom navigation */102  .bottom-nav {103    position: absolute; left: 0; bottom: 0; width: 1080px; height: 260px;104    background: #2b201f; box-shadow: 0 -1px 0 rgba(255,255,255,0.05);105  }106  .nav-items {107    position: absolute; left: 40px; right: 40px; top: 24px; height: 160px;108    display: flex; align-items: center; justify-content: space-between;109  }110  .nav-item {111    width: 180px; height: 160px; text-align: center; color: #e8cfc9;112  }113  .nav-item svg { width: 64px; height: 64px; margin-top: 16px; }114  .nav-label { font-size: 40px; margin-top: 12px; color: #e8cfc9; }115  .active .pill-bg {116    position: absolute; left: 50%; transform: translateX(-50%);117    top: 0; width: 160px; height: 80px; background: #5a403e; border-radius: 40px; opacity: 0.9;118  }119 120  /* Gesture bar */121  .gesture-bar {122    position: absolute; left: 50%; transform: translateX(-50%);123    bottom: 16px; width: 360px; height: 16px; background: #cfc6c3; border-radius: 12px; opacity: 0.8;124  }125</style>126</head>127<body>128<div id="render-target">129  <div class="page-title">Timer</div>130  <div class="menu-dots">⋮</div>131 132  <div class="card">133    <div class="card-header">134      <div class="title">20m timer</div>135      <div class="close-pill">×</div>136    </div>137 138    <div class="ring-wrap">139      <div class="ring"></div>140      <div class="time">18:29</div>141      <div class="reset-icon">142        <svg viewBox="0 0 24 24">143          <circle cx="12" cy="12" r="9" fill="none" stroke="#d98581" stroke-width="2"></circle>144          <path d="M12 5 l0 4 l3 -2" fill="#d98581"></path>145        </svg>146      </div>147    </div>148 149    <div class="controls">150      <div class="pill add">+1:00</div>151      <div class="pill pause">152        <span>Pause</span>153        <div class="pause-bars"><span></span><span></span></div>154      </div>155    </div>156  </div>157 158  <div class="fab">+</div>159 160  <div class="bottom-nav">161    <div class="nav-items">162      <div class="nav-item">163        <svg viewBox="0 0 24 24" fill="none" stroke="#e8cfc9" stroke-width="2" stroke-linecap="round">164          <circle cx="12" cy="13" r="6"></circle>165          <path d="M5 6 l2 2 M19 6 l-2 2"></path>166        </svg>167        <div class="nav-label">Alarm</div>168      </div>169 170      <div class="nav-item">171        <svg viewBox="0 0 24 24" fill="none" stroke="#e8cfc9" stroke-width="2" stroke-linecap="round">172          <circle cx="12" cy="12" r="8"></circle>173          <path d="M12 12 L12 7 M12 12 L16 14"></path>174        </svg>175        <div class="nav-label">Clock</div>176      </div>177 178      <div class="nav-item active" style="position: relative;">179        <div class="pill-bg"></div>180        <svg viewBox="0 0 24 24" fill="none" stroke="#f1d7d3" stroke-width="2">181          <path d="M12 3 v4"></path>182          <rect x="7" y="8" width="10" height="12" rx="3"></rect>183        </svg>184        <div class="nav-label" style="color:#f1d7d3; font-weight:700;">Timer</div>185      </div>186 187      <div class="nav-item">188        <svg viewBox="0 0 24 24" fill="none" stroke="#e8cfc9" stroke-width="2" stroke-linecap="round">189          <circle cx="12" cy="12" r="8"></circle>190          <path d="M12 7 L12 12 L16 12"></path>191        </svg>192        <div class="nav-label">Stopwatch</div>193      </div>194 195      <div class="nav-item">196        <svg viewBox="0 0 24 24" fill="none" stroke="#e8cfc9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">197          <path d="M3 14 h14 v4 H3z"></path>198          <path d="M9 10 h4 v4 H9z"></path>199          <path d="M19 11 v7"></path>200        </svg>201        <div class="nav-label">Bedtime</div>202      </div>203    </div>204  </div>205 206  <div class="gesture-bar"></div>207</div>208</body>209</html>