GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Timer UI Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target{9    width:1080px;10    height:2400px;11    position:relative;12    overflow:hidden;13    background:#0f1419;14    color:#e8ebef;15  }16 17  /* Status bar */18  .status-bar{19    position:absolute;20    top:0; left:0;21    width:100%;22    height:120px;23    padding:28px 36px;24    box-sizing:border-box;25    color:#d9dde2;26    font-size:42px;27    display:flex;28    align-items:center;29    justify-content:space-between;30  }31  .status-right{32    display:flex; align-items:center; gap:20px;33  }34  .sb-icon{35    width:26px; height:26px; background:#cfd5db; border-radius:4px;36  }37  .sb-signal{ width:34px; height:22px; border:2px solid #cfd5db; border-top-color:transparent; border-left-color:transparent; transform:rotate(45deg); border-radius:2px; }38  .sb-battery{ width:44px; height:22px; border:2px solid #cfd5db; position:relative; border-radius:4px; }39  .sb-battery:after{ content:""; position:absolute; right:-6px; top:6px; width:6px; height:10px; background:#cfd5db; border-radius:2px; }40 41  /* Header */42  .screen-title{43    position:absolute; top:140px; left:48px;44    font-size:72px; font-weight:600; color:#dfe5ec;45  }46 47  .more-vert{48    position:absolute; top:160px; right:42px; width:24px; height:80px; display:flex; flex-direction:column; justify-content:space-between; align-items:center;49  }50  .more-vert span{ width:10px; height:10px; background:#9aa3ad; border-radius:50%; display:block; }51 52  /* Card */53  .timer-card{54    position:absolute;55    left:36px; right:36px;56    top:230px;57    height:1380px;58    background:#1a1f25;59    border-radius:48px;60    box-sizing:border-box;61    padding:48px;62  }63  .card-title{64    font-size:58px; color:#dfe4ea; opacity:0.95; letter-spacing:0.5px;65  }66  .close-chip{67    position:absolute; top:36px; right:36px;68    width:74px; height:74px; border-radius:50%;69    background:#2b3240;70    display:flex; align-items:center; justify-content:center;71    color:#c9d2e4; font-size:44px; font-weight:700;72  }73 74  /* Big circle */75  .circle-wrap{76    width:100%; height:980px;77    display:flex; align-items:center; justify-content:center;78    position:relative;79  }80  .big-circle{81    width:900px; height:900px; border-radius:50%;82    border:28px solid #7898d6;83    background:#141a21;84    display:flex; align-items:center; justify-content:center;85    position:relative;86    box-shadow:inset 0 0 0 6px rgba(120,152,214,0.06);87  }88  .time-text{89    font-size:170px; font-weight:700; letter-spacing:4px; color:#e9edf5;90  }91  .reset-icon{92    position:absolute; bottom:88px; left:50%; transform:translateX(-50%);93    width:74px; height:74px; border-radius:50%;94    border:6px solid #7e98d8;95    display:flex; align-items:center; justify-content:center;96    background:#141a21;97  }98  .reset-icon svg{ width:38px; height:38px; }99  /* Buttons */100  .btn-row{101    position:absolute;102    bottom:64px; left:48px; right:48px;103    display:flex; justify-content:space-between; align-items:center;104  }105  .pill{106    width:380px; height:160px; border-radius:90px;107    display:flex; align-items:center; justify-content:center;108    font-size:56px; font-weight:600;109  }110  .pill.add{ background:#2b3440; color:#d5def0; }111  .pill.pause{ background:#e6c6e9; color:#3e2e44; }112 113  /* Floating add button */114  .fab{115    position:absolute; left:50%; transform:translateX(-50%);116    bottom:420px;117    width:230px; height:230px; border-radius:50%;118    background:#b5ceff; color:#11336b;119    display:flex; align-items:center; justify-content:center;120    font-size:120px; font-weight:700;121    box-shadow:0 20px 40px rgba(0,0,0,0.4);122  }123 124  /* Bottom nav */125  .bottom-nav{126    position:absolute; bottom:0; left:0; width:100%; height:220px;127    background:#1a1f25; border-top-left-radius:18px; border-top-right-radius:18px;128    display:flex; align-items:center; justify-content:space-around;129    color:#c9d1d9;130  }131  .nav-item{132    width:180px; height:160px; text-align:center; font-size:34px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;133  }134  .nav-icon{135    width:84px; height:84px; border-radius:22px;136    display:flex; align-items:center; justify-content:center;137  }138  .nav-icon svg{ width:44px; height:44px; fill:#cfd6dd; }139  .nav-item.active .nav-icon{ background:#2b3340; }140  .nav-item.active .label{ color:#e9eef6; font-weight:600; }141  .label{ margin-top:6px; }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Status Bar -->148  <div class="status-bar">149    <div class="status-left" style="display:flex; align-items:center; gap:16px;">150      <div style="font-weight:700;">11:45</div>151      <div class="sb-icon"></div>152      <div class="sb-icon"></div>153      <div class="sb-icon"></div>154    </div>155    <div class="status-right">156      <div class="sb-signal"></div>157      <div class="sb-icon" style="border-radius:50%;"></div>158      <div class="sb-battery"></div>159    </div>160  </div>161 162  <!-- Header -->163  <div class="screen-title">Timer</div>164  <div class="more-vert"><span></span><span></span><span></span></div>165 166  <!-- Card -->167  <div class="timer-card">168    <div class="card-title">2h 30m Timer</div>169    <div class="close-chip">×</div>170 171    <div class="circle-wrap">172      <div class="big-circle">173        <div class="time-text">2:29:58</div>174        <div class="reset-icon">175          <svg viewBox="0 0 24 24">176            <path fill="#7e98d8" d="M12 5a7 7 0 1 1-6.3 4H3l3.5-3.5L10 9H7.7A5.3 5.3 0 1 0 12 6v-1z"/>177          </svg>178        </div>179      </div>180    </div>181 182    <div class="btn-row">183      <div class="pill add">+1:00</div>184      <div class="pill pause">II</div>185    </div>186  </div>187 188  <!-- Floating Add -->189  <div class="fab">+</div>190 191  <!-- Bottom Navigation -->192  <div class="bottom-nav">193    <div class="nav-item">194      <div class="nav-icon">195        <svg viewBox="0 0 24 24">196          <path d="M6 2h12v2H6V2zm6 3a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm0 2a5 5 0 0 0-5 5h3l-4 4-4-4h3a7 7 0 0 1 14 0h-3l4 4 4-4h-3a5 5 0 0 0-5-5z"/>197        </svg>198      </div>199      <div class="label">Alarm</div>200    </div>201 202    <div class="nav-item">203      <div class="nav-icon">204        <svg viewBox="0 0 24 24">205          <path d="M7 2h10v2H7V2zm5 3a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-.5 2h1v4l3 3-.7.7L11.5 13V9z"/>206        </svg>207      </div>208      <div class="label">Clock</div>209    </div>210 211    <div class="nav-item active">212      <div class="nav-icon">213        <svg viewBox="0 0 24 24">214          <path d="M8 2h8l-2 6h2l-4 10-4-10h2L8 2zm2 2-1 3h6l-1-3h-4z"/>215        </svg>216      </div>217      <div class="label">Timer</div>218    </div>219 220    <div class="nav-item">221      <div class="nav-icon">222        <svg viewBox="0 0 24 24">223          <path d="M7 2h10v2H7V2zm5 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-.5 1h1v5.2l3.2 1.6-.4.9L11.5 16V9z"/>224        </svg>225      </div>226      <div class="label">Stopwatch</div>227    </div>228 229    <div class="nav-item">230      <div class="nav-icon">231        <svg viewBox="0 0 24 24">232          <path d="M3 10h18v8H3v-8zm2-3h14v3H5V7zm1 9h4v2H6v-2zm7-8h2v2h-2V8z"/>233        </svg>234      </div>235      <div class="label">Bedtime</div>236    </div>237  </div>238 239</div>240</body>241</html>