GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Timer UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target{10    position:relative; overflow:hidden;11    width:1080px; height:2400px;12    background:#0f1717; color:#dbe7e7;13  }14 15  /* Status bar */16  .status-bar{17    position:absolute; top:0; left:0; right:0; height:120px; 18    padding:0 36px; display:flex; align-items:center; justify-content:space-between;19    color:#e6f0ef; font-weight:500; letter-spacing:1px; font-size:40px;20  }21  .status-right{ display:flex; align-items:center; gap:22px; }22  .status-dot{ width:12px; height:12px; border-radius:50%; background:#e6f0ef; opacity:.9; }23  .icon-small{ width:40px; height:40px; fill:#e6f0ef; opacity:.9; }24 25  /* Screen title */26  .title{27    position:absolute; top:160px; left:48px;28    font-size:72px; font-weight:500; color:#dbe7e7;29  }30 31  /* Timer card */32  .card{33    position:absolute; left:32px; right:32px; top:260px;34    background:#131d1d; border-radius:56px;35    padding:48px; box-sizing:border-box;36  }37  .card-header{38    display:flex; align-items:center; justify-content:space-between;39    padding:0 8px; margin-bottom:24px;40  }41  .card-header .label{42    font-size:64px; color:#cfe3e3; font-weight:500;43  }44  .close-chip{45    width:88px; height:88px; border-radius:44px;46    background:#1e2b2b; display:flex; align-items:center; justify-content:center;47    border:2px solid #335c5a; color:#a5d6d3;48  }49  .close-chip svg{ width:40px; height:40px; stroke:#a5d6d3; }50 51  /* Big circular timer */52  .dial-wrap{ width:100%; display:flex; justify-content:center; margin-top:8px; }53  .dial{54    width:900px; height:900px; border-radius:50%;55    border:26px solid #40a8a4; box-sizing:border-box;56    display:flex; flex-direction:column; align-items:center; justify-content:center;57    background:#121a1a;58  }59  .time{60    font-size:200px; font-weight:700; letter-spacing:2px; color:#e9f4f4;61    line-height:1; margin-top:40px;62  }63  .refresh{64    margin-top:48px;65    width:80px; height:80px;66    display:flex; align-items:center; justify-content:center;67  }68  .refresh svg{ width:80px; height:80px; fill:none; stroke:#45b1ad; stroke-width:12; }69 70  /* Action buttons */71  .actions{72    display:flex; gap:48px; justify-content:center; align-items:center;73    padding:56px 0 36px;74  }75  .btn{76    padding:40px 72px; border-radius:72px; font-size:56px; font-weight:600; border:none;77  }78  .btn-addmin{ background:#233838; color:#d2eceb; }79  .btn-pause{ background:#c8d9ff; color:#0c1f29; display:flex; align-items:center; gap:28px; }80  .btn-pause .pause-ic{ width:40px; height:40px; display:inline-block; }81 82  /* Floating add button */83  .fab{84    position:absolute; left:50%; transform:translateX(-50%);85    bottom:360px; width:220px; height:220px; border-radius:50%;86    background:#7fe3df; color:#0f2020; font-size:120px; line-height:220px; text-align:center;87    box-shadow:0 8px 24px rgba(0,0,0,0.35);88  }89 90  /* Bottom navigation */91  .bottom-nav{92    position:absolute; left:0; right:0; bottom:0; height:250px;93    background:#121b1b; border-top-left-radius:28px; border-top-right-radius:28px;94    display:flex; justify-content:space-around; align-items:center;95    padding-bottom:28px;96  }97  .nav-item{ width:180px; text-align:center; color:#c3d3d3; font-size:36px; }98  .nav-icon{99    width:100px; height:100px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;100    fill:none; stroke:#c3d3d3; stroke-width:20;101  }102  .nav-selected .pill{103    width:160px; height:84px; border-radius:54px; background:#1c2a2a; margin:0 auto 10px;104    display:flex; align-items:center; justify-content:center;105  }106  .nav-selected .nav-icon{ stroke:#d9eceb; }107  .nav-selected .label{ color:#e7f4f4; font-weight:600; }108 109  /* Gesture bar */110  .gesture{111    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);112    width:420px; height:12px; border-radius:6px; background:#d8e2e1; opacity:.9;113  }114 115  /* Three dots menu */116  .more{117    position:absolute; right:36px; top:168px; width:16px; height:96px;118    display:flex; flex-direction:column; justify-content:space-between; align-items:center;119  }120  .more div{ width:16px; height:16px; background:#cfe3e3; border-radius:50%; opacity:.9; }121</style>122</head>123<body>124<div id="render-target">125 126  <!-- STATUS BAR -->127  <div class="status-bar">128    <div>11:58</div>129    <div class="status-right">130      <svg class="icon-small" viewBox="0 0 24 24"><path d="M3 12h18M3 6h10M3 18h14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>131      <svg class="icon-small" viewBox="0 0 24 24"><path d="M6 22h12a2 2 0 0 0 2-2V6l-4-4H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2zM14 2v4h4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>132      <svg class="icon-small" viewBox="0 0 24 24"><path d="M3 11h18v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11zm3-5h12l3 5H3l3-5z" fill="currentColor"/></svg>133      <svg class="icon-small" viewBox="0 0 24 24"><path d="M20 8v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8m6-5h4l2 3H8l2-3z" fill="none" stroke="currentColor" stroke-width="2"/></svg>134      <div class="status-dot"></div>135    </div>136  </div>137 138  <!-- TITLE -->139  <div class="title">Timer</div>140 141  <!-- MORE MENU DOTS -->142  <div class="more">143    <div></div><div></div><div></div>144  </div>145 146  <!-- TIMER CARD -->147  <div class="card">148    <div class="card-header">149      <div class="label">26m 30s Timer</div>150      <div class="close-chip">151        <svg viewBox="0 0 24 24">152          <path d="M6 6l12 12M18 6L6 18" stroke-width="2" stroke-linecap="round"/>153        </svg>154      </div>155    </div>156 157    <div class="dial-wrap">158      <div class="dial">159        <div class="time">26:28</div>160        <div class="refresh">161          <svg viewBox="0 0 24 24">162            <path d="M20 12a8 8 0 1 1-4-6.9" />163            <path d="M20 4v6h-6" />164          </svg>165        </div>166      </div>167    </div>168 169    <div class="actions">170      <button class="btn btn-addmin">+1:00</button>171      <button class="btn btn-pause">172        <span class="pause-ic">173          <svg viewBox="0 0 24 24"><path d="M7 5h4v14H7zM13 5h4v14h-4z" fill="#0c1f29"/></svg>174        </span>175        Pause176      </button>177    </div>178  </div>179 180  <!-- FAB -->181  <div class="fab">+</div>182 183  <!-- BOTTOM NAVIGATION -->184  <div class="bottom-nav">185    <div class="nav-item">186      <div class="nav-icon">187        <svg viewBox="0 0 100 100">188          <circle cx="50" cy="52" r="30"></circle>189          <path d="M50 22v12M28 14l6 6M72 14l-6 6" stroke-linecap="round"></path>190        </svg>191      </div>192      <div class="label">Alarm</div>193    </div>194 195    <div class="nav-item">196      <div class="nav-icon">197        <svg viewBox="0 0 100 100">198          <circle cx="50" cy="50" r="35"></circle>199          <path d="M50 25v28l18 10" stroke-linecap="round"></path>200        </svg>201      </div>202      <div class="label">Clock</div>203    </div>204 205    <div class="nav-item nav-selected">206      <div class="pill">207        <div class="nav-icon">208          <svg viewBox="0 0 100 100">209            <path d="M30 85h40M50 15v50" stroke-linecap="round"></path>210            <circle cx="50" cy="50" r="30"></circle>211          </svg>212        </div>213      </div>214      <div class="label">Timer</div>215    </div>216 217    <div class="nav-item">218      <div class="nav-icon">219        <svg viewBox="0 0 100 100">220          <circle cx="50" cy="50" r="35"></circle>221          <path d="M50 28v22l16 12" stroke-linecap="round"></path>222        </svg>223      </div>224      <div class="label">Stopwatch</div>225    </div>226 227    <div class="nav-item">228      <div class="nav-icon">229        <svg viewBox="0 0 100 100">230          <rect x="10" y="50" width="60" height="25" rx="6"></rect>231          <rect x="70" y="40" width="20" height="35" rx="4"></rect>232        </svg>233      </div>234      <div class="label">Bedtime</div>235    </div>236  </div>237 238  <div class="gesture"></div>239</div>240</body>241</html>