GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Timer UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #1f1b22; border-radius: 48px; box-shadow: 0 20px 60px rgba(0,0,0,0.35);11    color: #e9e1ef;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0; height: 120px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 40px; color: #e6deef; font-size: 40px; letter-spacing: 0.5px;19  }20  .status-left { display: flex; align-items: center; gap: 24px; }21  .notif-sqs { display: flex; gap: 10px; }22  .notif-sqs span {23    width: 26px; height: 26px; background: #d9c7ef; border-radius: 6px; opacity: 0.85;24    display: inline-block;25  }26  .status-mid { font-size: 36px; opacity: 0.6; }27  .status-right { display: flex; align-items: center; gap: 22px; }28  .icon-signal, .icon-battery {29    width: 40px; height: 40px; display: inline-block; position: relative;30  }31  .icon-signal::before {32    content: ""; position: absolute; bottom: 4px; left: 6px; width: 28px; height: 24px;33    border: 3px solid #e6deef; border-top: none; border-right: none; transform: skewX(-15deg);34    border-radius: 4px;35  }36  .icon-battery::before {37    content: ""; position: absolute; top: 6px; left: 6px; width: 26px; height: 20px;38    border: 3px solid #e6deef; border-radius: 4px;39  }40  .icon-battery::after {41    content: ""; position: absolute; top: 12px; right: -2px; width: 8px; height: 10px;42    background: #e6deef; border-radius: 2px;43  }44 45  /* Page title */46  .page-title {47    position: absolute; top: 160px; left: 44px; font-size: 72px; font-weight: 500; color: #efe7fb;48  }49  .kebab {50    position: absolute; top: 168px; right: 44px; width: 12px; height: 72px;51    display: flex; flex-direction: column; justify-content: space-between; align-items: center;52  }53  .kebab span { width: 12px; height: 12px; background: #cfc1e9; border-radius: 50%; opacity: 0.8; }54 55  /* Main card */56  .card {57    position: absolute; top: 300px; left: 40px; width: 1000px; height: 1380px;58    background: #26232a; border-radius: 64px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);59  }60  .card-title {61    position: absolute; top: 40px; left: 48px; font-size: 56px; color: #f1e9fd;62  }63  .close-pill {64    position: absolute; top: 30px; right: 30px; width: 90px; height: 90px;65    background: #4b4551; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ead8fb; font-size: 42px;66  }67 68  /* Progress ring */69  .ring-wrap {70    position: absolute; left: 50%; top: 160px; transform: translateX(-50%);71    width: 880px; height: 880px; border-radius: 50%;72    background:73      conic-gradient(#b78fe0 18%, #4a444f 0);74  }75  .ring-wrap::after {76    content: ""; position: absolute; inset: 48px; background: #26232a; border-radius: 50%;77  }78  .time-text {79    position: absolute; top: 370px; left: 50%; transform: translateX(-50%);80    font-size: 180px; font-weight: 700; letter-spacing: 6px; color: #fff5ff;81  }82  .refresh-icon {83    position: absolute; top: 650px; left: 50%; transform: translateX(-50%);84    width: 80px; height: 80px;85  }86 87  /* Controls inside card */88  .controls {89    position: absolute; bottom: 220px; left: 0; right: 0; display: flex; justify-content: space-evenly; align-items: center;90    padding: 0 64px;91  }92  .btn-pill {93    width: 420px; height: 180px; background: #3a3440; border-radius: 120px;94    display: flex; align-items: center; justify-content: center; color: #e9d8fb; font-size: 56px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);95  }96  .btn-play {97    width: 420px; height: 180px; background: #f6c9c3; border-radius: 120px;98    display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);99  }100  .btn-play svg { width: 56px; height: 56px; fill: #4b363a; }101 102  /* Add button */103  .add-btn {104    position: absolute; top: 1580px; left: 50%; transform: translateX(-50%);105    width: 240px; height: 240px; border-radius: 50%; background: #d9b7fa; color: #2d2434;106    display: flex; align-items: center; justify-content: center; font-size: 120px; font-weight: 300;107    box-shadow: 0 12px 28px rgba(0,0,0,0.4);108  }109 110  /* Bottom nav */111  .bottom-nav {112    position: absolute; bottom: 120px; left: 0; right: 0; height: 240px;113    background: #2a262d; border-top-left-radius: 36px; border-top-right-radius: 36px;114    display: flex; align-items: center; justify-content: space-around; padding: 0 40px; color: #d9c7ef;115  }116  .nav-item { width: 180px; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; font-size: 40px; }117  .nav-icon { width: 64px; height: 64px; }118  .nav-label { font-size: 36px; color: #cfc4df; }119  .active { color: #e9dbff; }120  .active .bubble {121    position: absolute; width: 160px; height: 90px; background: #4b4155; border-radius: 60px; top: -20px; left: 10px;122    z-index: -1;123  }124 125  /* Gesture bar */126  .gesture {127    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);128    width: 420px; height: 14px; background: #efeff2; border-radius: 7px; opacity: 0.9;129  }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Status Bar -->136  <div class="status-bar">137    <div class="status-left">138      <div>3:05</div>139      <div class="notif-sqs">140        <span></span><span></span><span></span><span></span>141      </div>142    </div>143    <div class="status-mid">•</div>144    <div class="status-right">145      <div class="icon-signal"></div>146      <div class="icon-battery"></div>147    </div>148  </div>149 150  <!-- Page Title and menu -->151  <div class="page-title">Timer</div>152  <div class="kebab"><span></span><span></span><span></span></div>153 154  <!-- Main Card -->155  <div class="card">156    <div class="card-title">10m Timer</div>157    <div class="close-pill">×</div>158 159    <div class="ring-wrap"></div>160    <div class="time-text">8:59</div>161    <!-- simple refresh icon -->162    <svg class="refresh-icon" viewBox="0 0 64 64">163      <circle cx="32" cy="32" r="20" fill="none" stroke="#b78fe0" stroke-width="6" stroke-dasharray="62 22"></circle>164      <path d="M40 18 l10 -2 l-6 7" fill="#b78fe0"></path>165    </svg>166 167    <div class="controls">168      <div class="btn-pill">+1:00</div>169      <div class="btn-play">170        <svg viewBox="0 0 24 24"><path d="M8 5 L18 12 L8 19 Z"></path></svg>171      </div>172    </div>173  </div>174 175  <!-- Add timer button -->176  <div class="add-btn">+</div>177 178  <!-- Bottom Navigation -->179  <div class="bottom-nav">180    <div class="nav-item">181      <svg class="nav-icon" viewBox="0 0 24 24">182        <path d="M12 2 L12 6 M6 16 a6 6 0 1 0 12 0 a6 6 0 1 0 -12 0" fill="none" stroke="#d9c7ef" stroke-width="2"></path>183        <path d="M12 12 L15 14" stroke="#d9c7ef" stroke-width="2" stroke-linecap="round"></path>184      </svg>185      <div class="nav-label">Alarm</div>186    </div>187 188    <div class="nav-item">189      <svg class="nav-icon" viewBox="0 0 24 24">190        <circle cx="12" cy="12" r="9" fill="none" stroke="#d9c7ef" stroke-width="2"></circle>191        <path d="M12 6 L12 12 L16 12" stroke="#d9c7ef" stroke-width="2" stroke-linecap="round"></path>192      </svg>193      <div class="nav-label">Clock</div>194    </div>195 196    <div class="nav-item active" style="position: relative;">197      <div class="bubble"></div>198      <svg class="nav-icon" viewBox="0 0 24 24">199        <path d="M8 4 L16 4 L8 20 L16 20" fill="none" stroke="#e9dbff" stroke-width="2"></path>200        <path d="M8 10 L16 14" stroke="#e9dbff" stroke-width="2"></path>201      </svg>202      <div class="nav-label">Timer</div>203    </div>204 205    <div class="nav-item">206      <svg class="nav-icon" viewBox="0 0 24 24">207        <circle cx="12" cy="12" r="9" fill="none" stroke="#d9c7ef" stroke-width="2"></circle>208        <path d="M12 7 L12 12 L17 12" stroke="#d9c7ef" stroke-width="2" stroke-linecap="round"></path>209      </svg>210      <div class="nav-label">Stopwatch</div>211    </div>212 213    <div class="nav-item">214      <svg class="nav-icon" viewBox="0 0 24 24">215        <path d="M3 14 H21 V18 H3 Z" fill="none" stroke="#d9c7ef" stroke-width="2"></path>216        <path d="M6 10 H10 V14" fill="none" stroke="#d9c7ef" stroke-width="2"></path>217      </svg>218      <div class="nav-label">Bedtime</div>219    </div>220  </div>221 222  <div class="gesture"></div>223 224</div>225</body>226</html>