GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Timer UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #14110E; /* app dark background */13    color: #EFE8DD;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 36px;27    color: #F5EDE3;28    font-weight: 600;29    letter-spacing: 0.5px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .icon-small svg { width: 40px; height: 40px; fill: #E7DED1; }37 38  /* Page title */39  .page-title {40    position: absolute;41    top: 150px;42    left: 48px;43    font-size: 64px;44    font-weight: 700;45    color: #ECE2D4;46  }47 48  /* Main card */49  .card {50    position: absolute;51    top: 240px;52    left: 30px;53    width: 1020px;54    height: 1440px;55    background: #1B1611;56    border-radius: 72px;57    box-shadow: 0 10px 40px rgba(0,0,0,0.35);58  }59  .card-title {60    position: absolute;61    top: 64px;62    left: 64px;63    font-size: 64px;64    font-weight: 700;65    color: #EDE3D7;66  }67  .close-chip {68    position: absolute;69    top: 62px;70    right: 62px;71    width: 84px;72    height: 84px;73    border-radius: 50%;74    background: #6B4F2C44;75    display: flex;76    align-items: center;77    justify-content: center;78    color: #CAA064;79    font-size: 44px;80    font-weight: 700;81  }82 83  /* Circular timer ring */84  .ring-wrap {85    position: absolute;86    top: 250px;87    left: 110px;88    width: 800px;89    height: 800px;90    border-radius: 50%;91    display: flex;92    align-items: center;93    justify-content: center;94    /* Outer progress ring using conic-gradient */95    background:96      conic-gradient(#C1914F 0deg 320deg, #3F362E 320deg 360deg);97    padding: 26px; /* thickness of ring */98  }99  .ring-inner {100    width: 748px;101    height: 748px;102    border-radius: 50%;103    background: #14110E;104    display: flex;105    align-items: center;106    justify-content: center;107    flex-direction: column;108  }109  .time-display {110    font-size: 200px;111    line-height: 1;112    font-weight: 700;113    color: #F3EDE6;114  }115  .refresh-icon {116    margin-top: 32px;117    width: 80px;118    height: 80px;119    border: 6px solid #C1914F;120    border-radius: 50%;121    position: relative;122  }123  .refresh-icon::after {124    content: '';125    position: absolute;126    right: 10px;127    top: 12px;128    width: 26px;129    height: 26px;130    border-right: 8px solid #C1914F;131    border-top: 8px solid #C1914F;132    transform: rotate(45deg);133    border-radius: 4px;134  }135 136  /* Controls */137  .controls {138    position: absolute;139    bottom: 220px;140    left: 90px;141    width: 840px;142    display: flex;143    justify-content: space-between;144  }145  .pill {146    width: 360px;147    height: 160px;148    border-radius: 90px;149    display: flex;150    align-items: center;151    justify-content: center;152    font-size: 64px;153    font-weight: 700;154    letter-spacing: 1px;155  }156  .pill.add {157    background: #4A3A28;158    color: #F3DDBE;159  }160  .pill.pause {161    background: #CEDFB5;162    color: #2A3A24;163  }164  .pause-icon {165    display: inline-flex;166    align-items: center;167    margin-left: 16px;168  }169  .pause-icon svg { width: 40px; height: 40px; fill: #2A3A24; }170 171  /* Floating add button */172  .fab {173    position: absolute;174    top: 1500px;175    left: 303px;176    width: 474px;177    height: 474px;178    border-radius: 50%;179    background: #F9C676;180    box-shadow: 0 8px 28px rgba(0,0,0,0.35);181    display: flex;182    align-items: center;183    justify-content: center;184  }185  .fab svg { width: 150px; height: 150px; fill: #5A3D16; }186 187  /* Bottom navigation */188  .bottom-nav {189    position: absolute;190    bottom: 0;191    left: 0;192    width: 1080px;193    height: 240px;194    background: #1B1611;195    border-top-left-radius: 36px;196    border-top-right-radius: 36px;197    display: flex;198    align-items: center;199    justify-content: space-around;200    color: #EADFD2;201  }202  .nav-item {203    display: flex;204    flex-direction: column;205    align-items: center;206    gap: 18px;207    font-size: 40px;208  }209  .nav-item svg { width: 60px; height: 60px; fill: #D9CFC3; }210  .nav-item.active {211    color: #F2E7D8;212  }213  .active-indicator {214    position: absolute;215    bottom: 34px;216    left: calc(50% - 260px);217    width: 520px;218    height: 12px;219    background: #EDEDED;220    border-radius: 12px;221    opacity: 0.85;222  }223 224  /* tiny overflow menu icon on header */225  .ellipsis {226    position: absolute;227    top: 160px;228    right: 42px;229    width: 20px;230    height: 80px;231    display: flex;232    flex-direction: column;233    gap: 12px;234    align-items: center;235    justify-content: center;236  }237  .dot { width: 12px; height: 12px; background: #CBBBA7; border-radius: 50%; }238 239</style>240</head>241<body>242<div id="render-target">243 244  <!-- Status Bar -->245  <div class="status-bar">246    <div style="font-size:52px;">12:24</div>247    <div class="status-right">248      <span class="icon-small">249        <!-- simple play-store triangle -->250        <svg viewBox="0 0 24 24"><path d="M3 4l14 8-14 8z"/></svg>251      </span>252      <span class="icon-small">253        <!-- tiny cloud -->254        <svg viewBox="0 0 24 24"><path d="M6 15h10a4 4 0 0 0 0-8c-1.4 0-2.7.7-3.4 1.8A5 5 0 0 0 6 9a4 4 0 0 0 0 6z"/></svg>255      </span>256      <span class="icon-small">257        <!-- wifi -->258        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5l2 2 2-2-2-2-2 2z"/></svg>259      </span>260      <span class="icon-small">261        <!-- battery -->262        <svg viewBox="0 0 24 24"><rect x="1" y="6" width="18" height="12" rx="2" ry="2"/><rect x="20" y="10" width="3" height="4"/></svg>263      </span>264    </div>265  </div>266 267  <!-- Page Title -->268  <div class="page-title">Timer</div>269 270  <!-- Ellipsis menu icon -->271  <div class="ellipsis">272    <div class="dot"></div>273    <div class="dot"></div>274    <div class="dot"></div>275  </div>276 277  <!-- Main Card -->278  <div class="card">279    <div class="card-title">10m 10s Timer</div>280    <div class="close-chip">×</div>281 282    <!-- Circular progress -->283    <div class="ring-wrap">284      <div class="ring-inner">285        <div class="time-display">10:25</div>286        <div class="refresh-icon"></div>287      </div>288    </div>289 290    <!-- Controls -->291    <div class="controls">292      <div class="pill add">+1:00</div>293      <div class="pill pause">294        Pause295        <span class="pause-icon">296          <svg viewBox="0 0 24 24"><path d="M7 5h4v14H7zM13 5h4v14h-4z"/></svg>297        </span>298      </div>299    </div>300  </div>301 302  <!-- Floating Add Button -->303  <div class="fab">304    <svg viewBox="0 0 24 24"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>305  </div>306 307  <!-- Bottom Navigation -->308  <div class="bottom-nav">309    <div class="nav-item">310      <svg viewBox="0 0 24 24"><path d="M7 4h10v2H7zM5 7h14v12H5zM9 9h2v6H9zm4 0h2v6h-2z"/></svg>311      <div>Alarm</div>312    </div>313    <div class="nav-item">314      <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6l5 3 1-1-4-2V7z"/></svg>315      <div>Clock</div>316    </div>317    <div class="nav-item active">318      <div style="background:#4B3B2E; color:#F4E9DB; padding:20px 36px; border-radius:36px; display:flex; align-items:center; gap:16px;">319        <svg viewBox="0 0 24 24"><path d="M6 3h12v4H6zM4 7h16v14H4z"/></svg>320        <span style="font-weight:700;">Timer</span>321      </div>322    </div>323    <div class="nav-item">324      <svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm-1 3h2v5h4v2h-6z"/></svg>325      <div>Stopwatch</div>326    </div>327    <div class="nav-item">328      <svg viewBox="0 0 24 24"><path d="M3 11h14l3 3v5H3zM6 9h8V7H6z"/></svg>329      <div>Bedtime</div>330    </div>331    <div class="active-indicator"></div>332  </div>333 334</div>335</body>336</html>