GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Timer UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #1F1B24;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0; height: 110px; padding: 0 34px;17    display: flex; align-items: center; justify-content: space-between; color: #ECE6F8; font-weight: 500; font-size: 38px;18  }19  .status-right { display: flex; align-items: center; gap: 26px; }20  .icon { display: inline-flex; align-items: center; justify-content: center; }21 22  /* Page title */23  .title {24    position: absolute; top: 150px; left: 46px; color: #EDE7F6; font-size: 64px; font-weight: 600;25    letter-spacing: 0.5px;26  }27 28  /* Top-right overflow (three dots) */29  .overflow {30    position: absolute; top: 165px; right: 40px; width: 16px; height: 70px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;31  }32  .overflow span { width: 12px; height: 12px; background: #B9A7D9; border-radius: 50%; }33 34  /* Timer card */35  .card {36    position: absolute; left: 30px; top: 260px; width: 1020px; height: 1220px;37    background: #231F28; border-radius: 70px; box-shadow: 0 30px 60px rgba(0,0,0,0.35) inset;38  }39  .card-header {40    position: absolute; top: 40px; left: 48px; right: 48px; display: flex; align-items: center; justify-content: space-between;41    color: #F3EDF7;42  }43  .card-header .label { font-size: 48px; font-weight: 600; }44  .close-btn {45    width: 74px; height: 74px; border-radius: 50%; background: #4A3F4E; color: #EADDF7;46    display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700;47  }48 49  /* Progress ring */50  .ring {51    position: absolute; left: 50%; transform: translateX(-50%);52    top: 150px; width: 820px; height: 820px; border-radius: 50%;53    background: conic-gradient(#B689EA 0deg 292deg, #4A3F4E 292deg 360deg);54  }55  .ring::before {56    content: ""; position: absolute; inset: 30px; border-radius: 50%; background: #231F28;57  }58  .ringContent {59    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; color: #F2ECF9;60  }61  .time-display { font-size: 160px; font-weight: 700; letter-spacing: 2px; margin-bottom: 34px; }62  .refresh {63    width: 70px; height: 70px;64  }65  .refresh svg { width: 70px; height: 70px; }66  .refresh circle { stroke: #B689EA; stroke-width: 8; fill: none; opacity: 0.9; }67  .refresh path { fill: #B689EA; }68 69  /* Controls */70  .controls {71    position: absolute; left: 72px; right: 72px; bottom: 90px;72    display: flex; justify-content: space-between; align-items: center;73  }74  .pill {75    width: 360px; height: 160px; border-radius: 90px; background: #3A3340; color: #EADDF7;76    display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 600;77    box-shadow: 0 10px 0 rgba(0,0,0,0.2) inset;78  }79  .play-btn {80    width: 360px; height: 160px; border-radius: 90px; background: #F7C8C7;81    display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 0 rgba(0,0,0,0.15) inset;82  }83  .play-btn svg { width: 46px; height: 46px; }84  .play-btn path { fill: #4C2C33; }85 86  /* Add new timer button */87  .add-btn {88    position: absolute; top: 1580px; left: 50%; transform: translateX(-50%);89    width: 220px; height: 220px; border-radius: 50%; background: #D5B8FF; color: #2E2435;90    display: flex; align-items: center; justify-content: center; font-size: 96px; font-weight: 500;91    box-shadow: 0 20px 40px rgba(0,0,0,0.35);92  }93 94  /* Bottom navigation */95  .bottom-nav {96    position: absolute; left: 0; bottom: 0; width: 1080px; height: 240px; background: #2A232C;97    display: flex; align-items: flex-start; justify-content: space-around; padding-top: 28px; color: #D9CCE9;98    border-top-left-radius: 0; border-top-right-radius: 0;99  }100  .nav-item { width: 180px; display: flex; flex-direction: column; align-items: center; gap: 14px; }101  .nav-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }102  .nav-item span { font-size: 34px; }103  .selected span { color: #D5B8FF; font-weight: 700; }104  .selected .icon-pill {105    width: 140px; height: 70px; border-radius: 40px; background: #4A3F4E; display: flex; align-items: center; justify-content: center;106  }107 108  /* Gesture bar */109  .gesture {110    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);111    width: 360px; height: 16px; background: #E6E1E8; border-radius: 10px; opacity: 0.8;112  }113</style>114</head>115<body>116<div id="render-target">117 118  <div class="status-bar">119    <div>10:18</div>120    <div class="status-right">121      <div class="icon">122        <svg width="40" height="40" viewBox="0 0 40 40">123          <path d="M4 28c3-5 8-9 16-9s13 4 16 9" stroke="#ECE6F8" stroke-width="3" fill="none" stroke-linecap="round"/>124          <circle cx="20" cy="28" r="3" fill="#ECE6F8"/>125        </svg>126      </div>127      <div class="icon">128        <svg width="42" height="42" viewBox="0 0 42 42">129          <rect x="6" y="10" width="24" height="18" rx="3" stroke="#ECE6F8" stroke-width="3" fill="none"/>130          <rect x="32" y="14" width="4" height="10" rx="1" fill="#ECE6F8"/>131        </svg>132      </div>133    </div>134  </div>135 136  <div class="title">Timer</div>137  <div class="overflow"><span></span><span></span><span></span></div>138 139  <div class="card">140    <div class="card-header">141      <div class="label">10m Timer</div>142      <div class="close-btn">×</div>143    </div>144 145    <div class="ring">146      <div class="ringContent">147        <div class="time-display">10:14</div>148        <div class="refresh">149          <svg viewBox="0 0 80 80">150            <circle cx="40" cy="40" r="24"></circle>151            <path d="M40 10 l8 0 -6 6" />152          </svg>153        </div>154      </div>155    </div>156 157    <div class="controls">158      <div class="pill">+1:00</div>159      <div class="play-btn">160        <svg viewBox="0 0 60 60">161          <path d="M20 16 L44 30 L20 44 Z"></path>162        </svg>163      </div>164    </div>165  </div>166 167  <div class="add-btn">+</div>168 169  <div class="bottom-nav">170    <div class="nav-item">171      <div class="nav-icon">172        <svg viewBox="0 0 80 80">173          <path d="M40 12 l18 10 v22 c0 10-8 18-18 18s-18-8-18-18V22z" fill="none" stroke="#D9CCE9" stroke-width="4"/>174          <rect x="36" y="6" width="8" height="10" fill="#D9CCE9"/>175        </svg>176      </div>177      <span>Alarm</span>178    </div>179 180    <div class="nav-item">181      <div class="nav-icon">182        <svg viewBox="0 0 80 80">183          <circle cx="40" cy="40" r="26" stroke="#D9CCE9" stroke-width="4" fill="none"/>184          <rect x="34" y="6" width="12" height="8" rx="2" fill="#D9CCE9"/>185          <path d="M40 40 L40 22 M40 40 L54 40" stroke="#D9CCE9" stroke-width="4" stroke-linecap="round"/>186        </svg>187      </div>188      <span>Clock</span>189    </div>190 191    <div class="nav-item selected">192      <div class="icon-pill">193        <svg class="nav-icon" viewBox="0 0 80 80">194          <path d="M40 16 c-14 0-24 10-24 24s10 24 24 24 24-10 24-24H40V16z" fill="#D5B8FF"/>195        </svg>196      </div>197      <span>Timer</span>198    </div>199 200    <div class="nav-item">201      <div class="nav-icon">202        <svg viewBox="0 0 80 80">203          <circle cx="40" cy="40" r="28" stroke="#D9CCE9" stroke-width="4" fill="none"/>204          <path d="M40 40 L40 22 M40 40 L56 34" stroke="#D9CCE9" stroke-width="4" stroke-linecap="round"/>205        </svg>206      </div>207      <span>Stopwatch</span>208    </div>209 210    <div class="nav-item">211      <div class="nav-icon">212        <svg viewBox="0 0 80 80">213          <rect x="12" y="36" width="56" height="20" rx="4" fill="none" stroke="#D9CCE9" stroke-width="4"/>214          <rect x="12" y="24" width="24" height="12" rx="4" fill="#D9CCE9"/>215        </svg>216      </div>217      <span>Bedtime</span>218    </div>219  </div>220 221  <div class="gesture"></div>222</div>223</body>224</html>