GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Timer UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0f1713; color: #e9efe8;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 8px; left: 24px; right: 24px;17    height: 72px; color: #e9efe8; font-weight: 600;18    display: flex; align-items: center; justify-content: space-between;19    opacity: 0.95; font-size: 36px;20  }21  .status-icons { display: flex; align-items: center; gap: 18px; }22  .icon-dot { width: 10px; height: 10px; background: #d7e5da; border-radius: 50%; opacity: 0.9; }23  .signal { width: 36px; height: 24px; border: 2px solid #cfe0d3; border-top: 0; border-radius: 4px; position: relative; }24  .signal:before { content: ""; position: absolute; bottom: 2px; left: 6px; width: 8px; height: 14px; background: #cfe0d3; border-radius: 2px; }25  .battery { width: 46px; height: 24px; border: 2px solid #cfe0d3; border-radius: 4px; position: relative; }26  .battery:after { content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 12px; background: #cfe0d3; border-radius: 1px; }27  .battery .level { position: absolute; left: 3px; top: 3px; right: 9px; bottom: 3px; background: #cfe0d3; border-radius: 2px; }28 29  /* Header */30  .header {31    position: absolute; top: 120px; left: 40px; right: 40px;32    display: flex; align-items: center; justify-content: space-between;33  }34  .header .title { font-size: 72px; font-weight: 600; letter-spacing: 0.5px; color: #e6efe7; }35  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }36  .icon-btn svg { fill: #cfe0d3; }37 38  /* Overflow menu */39  .menu-panel {40    position: absolute; top: 260px; right: 36px; width: 520px;41    background: #2a3832; border-radius: 34px;42    box-shadow: 0 16px 40px rgba(0,0,0,0.5);43    padding: 24px 0; color: #f0f5f1;44  }45  .menu-item {46    padding: 28px 40px;47    font-size: 44px; line-height: 1.3;48  }49  .menu-item + .menu-item { border-top: 1px solid rgba(255,255,255,0.06); }50 51  /* Timer Card */52  .card {53    position: absolute; left: 36px; right: 36px; top: 280px;54    background: #121b16; border-radius: 48px;55    padding: 48px; box-sizing: border-box;56  }57  .card h2 {58    margin: 0 0 24px 0; font-weight: 600; color: #e6efe7; font-size: 54px;59  }60  .dial-wrap {61    width: 920px; height: 920px; margin: 12px auto 40px auto; position: relative;62  }63  .dial {64    position: absolute; inset: 0;65    border-radius: 50%;66    border: 34px solid #7fb283; /* green ring */67    box-sizing: border-box;68    background: radial-gradient(circle at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 60%);69  }70  .time-text {71    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;72    font-size: 210px; letter-spacing: 2px; color: #f5faf6; font-weight: 600;73  }74  .restart {75    position: absolute; left: 50%; bottom: 136px; transform: translateX(-50%);76    width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center;77  }78  .restart svg { width: 60px; height: 60px; stroke: #8dbc8f; fill: none; stroke-width: 10; }79 80  .controls {81    margin: 10px auto 36px auto;82    width: 920px; display: flex; justify-content: space-between; align-items: center;83  }84  .pill {85    height: 160px; border-radius: 80px; display: flex; align-items: center; justify-content: center;86    font-size: 56px; font-weight: 600; padding: 0 80px;87  }88  .pill.add { background: #2a3a32; color: #d2e4d5; }89  .pill.pause { background: #c6e4ea; color: #214a52; }90  .pill.pause svg { fill: #214a52; }91 92  /* FAB */93  .fab {94    position: absolute; left: 50%; transform: translateX(-50%);95    bottom: 360px; width: 220px; height: 220px; border-radius: 50%;96    background: #bfe7b9; color: #0f1713;97    display: flex; align-items: center; justify-content: center;98    font-size: 120px; font-weight: 500;99    box-shadow: 0 10px 24px rgba(0,0,0,0.35);100  }101 102  /* Bottom nav */103  .bottom-nav {104    position: absolute; left: 0; right: 0; bottom: 120px; height: 220px;105    background: #121b16; display: flex; align-items: center; justify-content: space-around;106    border-top-left-radius: 26px; border-top-right-radius: 26px;107  }108  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #b8c7bd; font-size: 34px; }109  .nav-item svg { width: 64px; height: 64px; fill: #b8c7bd; }110  .nav-item.active { color: #e9efe8; }111  .nav-item.active .pill-bg {112    position: absolute; width: 140px; height: 84px; background: #2a3a32;113    border-radius: 42px; transform: translateY(-6px);114  }115  .nav-stack { position: relative; display: flex; align-items: center; justify-content: center; width: 140px; height: 84px; }116 117  /* Home indicator */118  .home-indicator {119    position: absolute; left: 50%; transform: translateX(-50%);120    bottom: 48px; width: 360px; height: 10px; border-radius: 6px; background: #f5f5f5; opacity: 0.9;121  }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Status Bar -->128  <div class="status-bar">129    <div>3:01</div>130    <div class="status-icons">131      <div class="icon-dot"></div>132      <div class="icon-dot"></div>133      <div class="icon-dot"></div>134      <div class="signal"></div>135      <div class="battery"><div class="level"></div></div>136    </div>137  </div>138 139  <!-- Header -->140  <div class="header">141    <div class="title">Timer</div>142    <div class="icon-btn" aria-label="More options">143      <svg width="42" height="42" viewBox="0 0 24 24">144        <circle cx="12" cy="4.5" r="2.2"></circle>145        <circle cx="12" cy="12" r="2.2"></circle>146        <circle cx="12" cy="19.5" r="2.2"></circle>147      </svg>148    </div>149  </div>150 151  <!-- Overflow Menu Panel -->152  <div class="menu-panel">153    <div class="menu-item">Screen saver</div>154    <div class="menu-item">Settings</div>155    <div class="menu-item">Privacy policy</div>156    <div class="menu-item">Send feedback</div>157    <div class="menu-item">Help</div>158  </div>159 160  <!-- Timer Card -->161  <div class="card">162    <h2>30m Timer</h2>163 164    <div class="dial-wrap">165      <div class="dial"></div>166      <div class="time-text">26:24</div>167      <div class="restart" aria-label="Restart">168        <svg viewBox="0 0 24 24">169          <path d="M6 13a6 6 0 1 0 4-5.65"></path>170          <path d="M10 3v4H6" stroke-linecap="round"></path>171        </svg>172      </div>173    </div>174 175    <div class="controls">176      <div class="pill add">+1:00</div>177      <div class="pill pause">178        <svg viewBox="0 0 24 24" width="38" height="38">179          <rect x="6" y="5" width="4" height="14" rx="1"></rect>180          <rect x="14" y="5" width="4" height="14" rx="1"></rect>181        </svg>182      </div>183    </div>184  </div>185 186  <!-- Floating Action Button -->187  <div class="fab">+</div>188 189  <!-- Bottom Navigation -->190  <div class="bottom-nav">191    <div class="nav-item">192      <svg viewBox="0 0 24 24">193        <path d="M12 3l2 2h4v3H6V5h4l2-2zM6 9h12v10H6z"></path>194      </svg>195      <div>Alarm</div>196    </div>197    <div class="nav-item">198      <svg viewBox="0 0 24 24">199        <circle cx="12" cy="12" r="8"></circle>200        <path d="M12 7v6l4 2" stroke="#0f1713" stroke-width="0"></path>201      </svg>202      <div>Clock</div>203    </div>204    <div class="nav-item active">205      <div class="nav-stack">206        <div class="pill-bg"></div>207        <svg viewBox="0 0 24 24">208          <path d="M8 2h8v2l-2 2h-4L8 4zM7 7h10l-2 6h-6zM8 15h8v7H8z"></path>209        </svg>210      </div>211      <div>Timer</div>212    </div>213    <div class="nav-item">214      <svg viewBox="0 0 24 24">215        <path d="M9 2h6v2H9zM12 4a8 8 0 1 1-8 8"></path>216        <path d="M12 8v5l3 2"></path>217      </svg>218      <div>Stopwatch</div>219    </div>220    <div class="nav-item">221      <svg viewBox="0 0 24 24">222        <path d="M3 12h9v5H3zM12 13h9v4h-9zM5 9h5v3H5z"></path>223      </svg>224      <div>Bedtime</div>225    </div>226  </div>227 228  <!-- Home Indicator -->229  <div class="home-indicator"></div>230</div>231</body>232</html>