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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #19171D; color: #EDE7F6;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px; padding: 22px 28px 0;18    font-size: 38px; color: #ECE7F8;19    display: flex; align-items: center; justify-content: space-between;20  }21  .status-left { display: flex; align-items: center; gap: 18px; }22  .status-right { display: flex; align-items: center; gap: 22px; }23  .icon-chip {24    width: 26px; height: 26px; border-radius: 4px;25    border: 2px solid #7D748C; opacity: .9;26  }27 28  /* Header */29  .page-title {30    font-size: 64px; font-weight: 600;31    padding: 24px 36px;32    color: #EDE7F6;33  }34  .menu-dots {35    position: absolute; right: 28px; top: 168px;36    width: 8px; height: 8px; background: #9E8FB8; border-radius: 50%;37    box-shadow: 0 18px 0 #9E8FB8, 0 36px 0 #9E8FB8;38  }39 40  /* Timer Card */41  .card {42    width: 1000px; margin: 10px 40px 0;43    background: #221F27; border-radius: 44px;44    padding: 40px; position: relative;45    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);46  }47  .card-title {48    font-size: 54px; color: #EDE7F6;49    margin-bottom: 18px;50  }51  .close-pill {52    position: absolute; right: 28px; top: 28px;53    width: 72px; height: 72px; border-radius: 50%;54    background: #3A3340; color: #CEB7EA; display: flex;55    align-items: center; justify-content: center; font-size: 42px;56  }57 58  .progress-wrap {59    width: 900px; height: 900px; margin: 10px auto 24px;60    position: relative;61  }62  .ring {63    width: 900px; height: 900px; border-radius: 50%;64    position: absolute; inset: 0;65    background: conic-gradient(#B78CE6 78%, #4A4350 78% 100%);66  }67  .ring::after {68    content: "";69    position: absolute; inset: 34px; border-radius: 50%;70    background: #221F27;71  }72  .time-text {73    position: absolute; inset: 0;74    display: flex; align-items: center; justify-content: center;75    font-size: 180px; font-weight: 700; letter-spacing: 2px;76    color: #F2ECFF;77  }78  .restart {79    position: absolute; left: 50%; top: 64%;80    transform: translate(-50%, -50%);81    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;82  }83 84  /* Bottom controls inside card */85  .card-controls {86    width: 100%; display: flex; justify-content: space-between;87    padding: 10px 60px 24px;88    box-sizing: border-box;89  }90  .btn {91    width: 360px; height: 190px; border-radius: 120px;92    display: flex; align-items: center; justify-content: center;93    font-size: 56px; font-weight: 600;94  }95  .btn-dark {96    background: #3B3543; color: #E7DAFF;97  }98  .btn-pause {99    background: #F6C7CF; color: #3A2233;100  }101 102  /* Assist chip banner */103  .tip-banner {104    position: absolute; left: 40px; right: 40px; top: 1500px;105    background: #5B3A3F; color: #F6ECFF;106    padding: 34px 40px; border-radius: 44px;107    font-size: 40px; line-height: 1.3;108    display: flex; justify-content: space-between; align-items: center;109    box-shadow: 0 12px 28px rgba(0,0,0,0.45);110  }111  .tip-action { color: #C8A7FF; font-weight: 700; }112 113  /* Floating add button */114  .fab {115    position: absolute; left: 50%; top: 1740px; transform: translateX(-50%);116    width: 210px; height: 210px; border-radius: 50%;117    background: #DAB6FF; color: #3B3048;118    display: flex; align-items: center; justify-content: center;119    font-size: 120px; font-weight: 600;120    box-shadow: 0 10px 24px rgba(0,0,0,0.4);121  }122 123  /* Bottom navigation */124  .bottom-nav {125    position: absolute; left: 0; right: 0; bottom: 120px;126    height: 240px; background: #26222B; border-top-left-radius: 28px; border-top-right-radius: 28px;127    display: flex; align-items: center; justify-content: space-around;128    color: #D7CCE9;129  }130  .nav-item { text-align: center; font-size: 34px; color: #BFB3D9; }131  .nav-item .label { margin-top: 10px; display: block; }132  .nav-active .icon-wrap {133    background: #7C6599; padding: 18px 20px; border-radius: 26px;134  }135  .icon-wrap { display: inline-flex; align-items: center; justify-content: center; }136  .home-pill {137    position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%);138    width: 340px; height: 16px; border-radius: 12px; background: #E6E1EF; opacity: 0.8;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Status bar -->146  <div class="status-bar">147    <div class="status-left">148      <div>10:17</div>149      <svg width="34" height="34" viewBox="0 0 24 24" fill="#C9B7E9" aria-label="status icon">150        <path d="M3 20l9-16 9 16H3z"></path>151      </svg>152    </div>153    <div class="status-right">154      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#C9B7E9" stroke-width="2" aria-label="wifi">155        <path d="M2 8c5-4 15-4 20 0"></path>156        <path d="M5 11c3-3 11-3 14 0"></path>157        <path d="M8 14c2-2 6-2 8 0"></path>158        <circle cx="12" cy="18" r="1.5" fill="#C9B7E9" stroke="none"></circle>159      </svg>160      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#C9B7E9" stroke-width="2" aria-label="battery">161        <rect x="3" y="7" width="16" height="10" rx="2"></rect>162        <rect x="20" y="10" width="2" height="4"></rect>163        <rect x="5" y="9" width="10" height="6" fill="#C9B7E9" stroke="none"></rect>164      </svg>165    </div>166  </div>167 168  <!-- Header -->169  <div class="page-title">Timer</div>170  <div class="menu-dots"></div>171 172  <!-- Timer Card -->173  <div class="card">174    <div class="card-title">10m Timer</div>175    <div class="close-pill">×</div>176 177    <div class="progress-wrap">178      <div class="ring"></div>179      <div class="time-text">10:49</div>180      <div class="restart">181        <svg width="90" height="90" viewBox="0 0 24 24" fill="none" stroke="#B78CE6" stroke-width="2">182          <path d="M12 6a6 6 0 1 1-6 6"></path>183          <path d="M8 6H4V2"></path>184        </svg>185      </div>186    </div>187 188    <div class="card-controls">189      <div class="btn btn-dark">+1:00</div>190      <div class="btn btn-pause">‖</div>191    </div>192  </div>193 194  <!-- Assist banner -->195  <div class="tip-banner">196    <div>Next time, try saying "Hey Google, set a timer."</div>197    <div class="tip-action">Try now</div>198  </div>199 200  <!-- Floating Action Button -->201  <div class="fab">+</div>202 203  <!-- Bottom navigation -->204  <div class="bottom-nav">205    <div class="nav-item">206      <span class="icon-wrap">207        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#D7CCE9" stroke-width="2">208          <circle cx="12" cy="13" r="6"></circle>209          <path d="M6 6l-2-2M18 6l2-2"></path>210        </svg>211      </span>212      <span class="label">Alarm</span>213    </div>214    <div class="nav-item">215      <span class="icon-wrap">216        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#D7CCE9" stroke-width="2">217          <circle cx="12" cy="12" r="8"></circle>218          <path d="M12 8v6l4 2"></path>219        </svg>220      </span>221      <span class="label">Clock</span>222    </div>223    <div class="nav-item nav-active">224      <span class="icon-wrap">225        <svg width="64" height="64" viewBox="0 0 24 24" fill="#E5D7FF">226          <path d="M8 4h8l-1 3H9L8 4zm1 5h6v7H9V9zm-1 8h8l1 3H8l1-3z"></path>227        </svg>228      </span>229      <span class="label">Timer</span>230    </div>231    <div class="nav-item">232      <span class="icon-wrap">233        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#D7CCE9" stroke-width="2">234          <circle cx="12" cy="13" r="7"></circle>235          <rect x="11" y="2" width="2" height="3" fill="#D7CCE9" stroke="none"></rect>236        </svg>237      </span>238      <span class="label">Stopwatch</span>239    </div>240    <div class="nav-item">241      <span class="icon-wrap">242        <svg width="64" height="64" viewBox="0 0 24 24" fill="#D7CCE9">243          <rect x="3" y="10" width="18" height="6" rx="1"></rect>244          <rect x="5" y="8" width="6" height="3"></rect>245          <rect x="15" y="8" width="6" height="3"></rect>246        </svg>247      </span>248      <span class="label">Bedtime</span>249    </div>250  </div>251 252  <div class="home-pill"></div>253</div>254</body>255</html>