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  :root{9    --bg:#1f1b23;10    --card:#26222d;11    --muted:#a996b8;12    --text:#efe6fb;13    --purple:#b78fe1;14    --purple-dark:#4c4452;15    --pill:#4b4350;16    --play:#f7c5c4;17  }18  html,body{margin:0;padding:0;background:transparent;font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--text);}19  #render-target{20    width:1080px;height:2400px;position:relative;overflow:hidden;background:var(--bg);21  }22 23  /* Status bar */24  .status-bar{25    position:absolute;left:0;top:0;width:100%;height:110px;26    color:#e9e3f3;display:flex;align-items:center;justify-content:space-between;27    padding:0 36px;font-size:40px;letter-spacing:0.5px;opacity:.95;28  }29  .sb-right{display:flex;align-items:center;gap:22px;}30  .sb-dot{width:10px;height:10px;background:#bdb0cf;border-radius:50%;}31  .sb-rect{width:38px;height:34px;border:2px solid #d7cced;border-radius:4px;}32  .sb-signal{width:36px;height:26px;border-right:6px solid #d7cced;border-top:6px solid transparent;border-bottom:6px solid transparent;transform:skewX(-10deg);}33  .sb-battery{width:50px;height:26px;border:3px solid #d7cced;border-radius:6px;position:relative;}34  .sb-battery:after{content:"";position:absolute;right:-8px;top:7px;width:6px;height:12px;background:#d7cced;border-radius:2px;}35  .menu-dots{36    position:absolute;right:36px;top:160px;width:16px;height:80px;37    display:flex;flex-direction:column;justify-content:space-between;align-items:center;38  }39  .menu-dots span{width:12px;height:12px;background:#b8a6ce;border-radius:50%;opacity:.85;}40 41  /* Title */42  .page-title{43    position:absolute;top:150px;left:44px;font-size:80px;font-weight:500;color:#e9e1f4;44  }45 46  /* Card */47  .card{48    position:absolute;left:30px;right:30px;top:240px;height:1500px;49    background:var(--card);border-radius:64px;box-shadow:0 10px 30px rgba(0,0,0,.2);50    padding:44px 44px 60px 44px;box-sizing:border-box;51  }52  .card-head{display:flex;align-items:center;justify-content:space-between;}53  .card-title{font-size:64px;color:#eadff7;}54  .close-chip{55    width:82px;height:82px;border-radius:50%;background:#4a4150;display:flex;align-items:center;justify-content:center;56  }57  .close-chip svg{width:40px;height:40px;stroke:#d7c7ee;stroke-width:6px;}58 59  /* Ring */60  .ring-wrap{width:900px;height:900px;margin:60px auto 40px;position:relative;}61  .ring{62    width:100%;height:100%;border-radius:50%;63    background:conic-gradient(var(--purple) 300deg, var(--purple-dark) 300deg);64    position:relative;65  }66  .ring::after{67    content:"";position:absolute;left:50%;top:50%;68    width:820px;height:820px;transform:translate(-50%,-50%);69    background:var(--card);border-radius:50%;70  }71  .time{72    position:absolute;left:0;top:0;width:100%;height:100%;73    display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;74  }75  .time .big{76    font-size:210px;letter-spacing:4px;color:#f1e9fb;font-weight:700;77  }78  .refresh{79    margin-top:16px;opacity:.85;80  }81  .refresh svg{width:60px;height:60px;fill:none;stroke:var(--purple);stroke-width:10px;}82 83  /* Actions */84  .actions{display:flex;justify-content:space-between;gap:40px;margin:40px 40px 0;}85  .btn-pill{86    flex:1;height:180px;background:var(--pill);border-radius:90px;display:flex;align-items:center;justify-content:center;87    font-size:64px;color:#e9def6;88  }89  .btn-play{90    flex:1;height:180px;background:var(--play);border-radius:120px;display:flex;align-items:center;justify-content:center;91  }92  .btn-play svg{width:56px;height:56px;fill:#4a2f39;}93 94  /* Floating Add */95  .fab{96    position:absolute;left:50%;transform:translateX(-50%);bottom:480px;97    width:220px;height:220px;border-radius:50%;background:#d6b2ff;color:#2a2430;98    display:flex;align-items:center;justify-content:center;font-size:140px;line-height:0;99    box-shadow:0 12px 28px rgba(0,0,0,.35);100  }101 102  /* Bottom navigation */103  .bottom-nav{104    position:absolute;left:0;bottom:0;width:100%;height:260px;background:#2b2430;105    display:flex;align-items:center;justify-content:space-around;padding-bottom:22px;box-sizing:border-box;106  }107  .nav-item{width:20%;display:flex;flex-direction:column;align-items:center;gap:18px;color:#d7cbed;font-size:40px;}108  .nav-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;color:#fff;}109  .active .icon-pill{110    background:#3a3140;border-radius:44px;padding:18px 28px;display:flex;align-items:center;justify-content:center;111  }112  .nav-item span{font-size:38px;color:#cbbce1;}113  .active span{color:#ffffff;}114 115  /* Gesture bar */116  .gesture{117    position:absolute;left:50%;bottom:290px;transform:translateX(-50%);118    width:360px;height:12px;background:#e9e9ee;border-radius:10px;opacity:.95;119  }120</style>121</head>122<body>123<div id="render-target">124 125  <div class="status-bar">126    <div>3:08</div>127    <div class="sb-right">128      <div class="sb-rect"></div>129      <div class="sb-rect"></div>130      <div class="sb-rect"></div>131      <div class="sb-dot"></div>132      <div class="sb-signal"></div>133      <div class="sb-battery"></div>134    </div>135  </div>136 137  <div class="page-title">Timer</div>138 139  <div class="menu-dots">140    <span></span><span></span><span></span>141  </div>142 143  <div class="card">144    <div class="card-head">145      <div class="card-title">10m Timer</div>146      <div class="close-chip" aria-label="Close timer">147        <svg viewBox="0 0 24 24">148          <line x1="5" y1="5" x2="19" y2="19"></line>149          <line x1="19" y1="5" x2="5" y2="19"></line>150        </svg>151      </div>152    </div>153 154    <div class="ring-wrap">155      <div class="ring"></div>156      <div class="time">157        <div class="big">10:59</div>158        <div class="refresh">159          <svg viewBox="0 0 24 24">160            <path d="M12 5a7 7 0 1 1-6.3 4" />161            <polyline points="7,4 5,9 10,9" />162          </svg>163        </div>164      </div>165    </div>166 167    <div class="actions">168      <div class="btn-pill">+1:00</div>169      <div class="btn-play" aria-label="Play">170        <svg viewBox="0 0 24 24">171          <polygon points="8,6 18,12 8,18"></polygon>172        </svg>173      </div>174    </div>175  </div>176 177  <div class="fab">+</div>178 179  <div class="gesture"></div>180 181  <div class="bottom-nav">182    <div class="nav-item">183      <div class="nav-icon">184        <svg viewBox="0 0 24 24" width="70" height="70" fill="none" stroke="#ffffff" stroke-width="1.8">185          <circle cx="12" cy="13" r="6"></circle>186          <path d="M6 5 L8 3 M18 5 L16 3"></path>187        </svg>188      </div>189      <span>Alarm</span>190    </div>191 192    <div class="nav-item">193      <div class="nav-icon">194        <svg viewBox="0 0 24 24" width="70" height="70" fill="none" stroke="#ffffff" stroke-width="1.8">195          <circle cx="12" cy="12" r="8"></circle>196          <path d="M12 8 L12 12 L16 12"></path>197        </svg>198      </div>199      <span>Clock</span>200    </div>201 202    <div class="nav-item active">203      <div class="icon-pill">204        <svg viewBox="0 0 24 24" width="70" height="70" fill="none" stroke="#ffffff" stroke-width="1.8">205          <path d="M8 4 h8 l-2 5 h-4 z"></path>206          <path d="M8 20 h8 l-2 -5 h-4 z"></path>207        </svg>208      </div>209      <span>Timer</span>210    </div>211 212    <div class="nav-item">213      <div class="nav-icon">214        <svg viewBox="0 0 24 24" width="70" height="70" fill="none" stroke="#ffffff" stroke-width="1.8">215          <circle cx="12" cy="12" r="8"></circle>216          <path d="M12 6 v6 l4 2"></path>217          <rect x="10" y="2" width="4" height="2" fill="#ffffff"></rect>218        </svg>219      </div>220      <span>Stopwatch</span>221    </div>222 223    <div class="nav-item">224      <div class="nav-icon">225        <svg viewBox="0 0 24 24" width="70" height="70" fill="none" stroke="#ffffff" stroke-width="1.8">226          <rect x="3" y="11" width="18" height="6" rx="1.5"></rect>227          <rect x="4" y="9" width="7" height="4" rx="1.5"></rect>228        </svg>229      </div>230      <span>Bedtime</span>231    </div>232  </div>233 234</div>235</body>236</html>