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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", "Segoe UI", Arial, sans-serif;13    color: #f4d3cf;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #231a1a; /* deep warm black */21  }22 23  /* Status bar */24  .status-bar {25    height: 96px;26    padding: 0 32px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #e9cbc7;31    font-size: 34px;32    letter-spacing: 1px;33    box-sizing: border-box;34  }35  .status-left,36  .status-right {37    display: flex;38    align-items: center;39    gap: 22px;40  }41  .dot {42    width: 10px;43    height: 10px;44    background: #ceb1ad;45    border-radius: 50%;46    opacity: 0.9;47  }48 49  /* Header */50  .header {51    padding: 18px 40px 12px;52    font-size: 72px;53    font-weight: 600;54    color: #e9cbc7;55  }56  .more-dots {57    position: absolute;58    right: 38px;59    top: 160px;60    width: 12px;61    display: grid;62    gap: 14px;63    justify-items: center;64  }65  .more-dots span {66    width: 12px;67    height: 12px;68    background: #c9a8a4;69    border-radius: 50%;70  }71 72  /* Card */73  .card {74    margin: 18px 24px 0;75    background: #2b2121;76    border-radius: 54px;77    padding: 40px 40px 36px;78    box-sizing: border-box;79    height: 1280px;80    position: relative;81  }82  .card h2 {83    margin: 0;84    font-weight: 500;85    font-size: 56px;86    color: #e9cbc7;87  }88  .close-pill {89    position: absolute;90    right: 40px;91    top: 40px;92    width: 76px;93    height: 76px;94    background: #5b4141;95    color: #f1c4bf;96    border-radius: 50%;97    display: flex;98    align-items: center;99    justify-content: center;100    font-size: 44px;101    line-height: 1;102  }103 104  /* Circular timer */105  .ring-wrap {106    position: absolute;107    left: 50%;108    transform: translateX(-50%);109    top: 160px;110    width: 880px;111    height: 880px;112  }113  .ring {114    width: 880px;115    height: 880px;116    border-radius: 50%;117    /* inner cutout + progress ring + base */118    background:119      radial-gradient(circle at 50% 50%, #231a1a 74%, transparent 75%),120      conic-gradient(#da7c75 76%, #4c3c3b 0);121    /* rotate so start near left-bottom like screenshot */122    transform: rotate(-110deg);123  }124  .ring-center {125    position: absolute;126    inset: 0;127    display: flex;128    align-items: center;129    justify-content: center;130    transform: rotate(110deg); /* counter-rotate content to look upright */131    color: #f1d0cc;132    font-size: 180px;133    font-weight: 700;134    letter-spacing: 2px;135  }136  .reset-icon {137    position: absolute;138    left: 50%;139    top: 660px;140    transform: translateX(-50%);141    width: 72px;142    height: 72px;143    display: flex;144    align-items: center;145    justify-content: center;146  }147 148  /* Buttons on card bottom */149  .controls {150    position: absolute;151    bottom: 44px;152    left: 40px;153    right: 40px;154    display: flex;155    justify-content: space-between;156    align-items: center;157  }158  .pill {159    height: 180px;160    border-radius: 100px;161    padding: 0 74px;162    box-sizing: border-box;163    display: flex;164    align-items: center;165    justify-content: center;166    font-size: 56px;167    font-weight: 600;168  }169  .pill.add {170    background: #5c4343;171    color: #f1d0cc;172    width: 440px;173  }174  .pill.pause {175    background: #ebd38d;176    color: #261d1d;177    width: 440px;178    position: relative;179  }180  .pause-bars {181    width: 60px;182    height: 60px;183    position: relative;184  }185  .pause-bars:before,186  .pause-bars:after {187    content: "";188    position: absolute;189    top: 0;190    width: 14px;191    height: 60px;192    background: #362a1e;193    border-radius: 4px;194  }195  .pause-bars:before { left: 12px; }196  .pause-bars:after  { right: 12px; }197 198  /* FAB */199  .fab {200    position: absolute;201    left: 50%;202    bottom: 420px;203    transform: translateX(-50%);204    width: 220px;205    height: 220px;206    background: #f6a9a3;207    color: #361f1f;208    border-radius: 50%;209    display: flex;210    align-items: center;211    justify-content: center;212    font-size: 120px;213    font-weight: 400;214  }215 216  /* Bottom nav */217  .bottom-nav {218    position: absolute;219    left: 0;220    right: 0;221    bottom: 0;222    height: 300px;223    background: #2b2121;224    padding-top: 30px;225    box-sizing: border-box;226  }227  .nav-items {228    display: flex;229    justify-content: space-around;230    align-items: center;231    color: #e8c8c4;232    margin: 0 18px;233    height: 190px;234  }235  .nav-item {236    width: 180px;237    height: 170px;238    display: flex;239    flex-direction: column;240    align-items: center;241    justify-content: center;242    gap: 14px;243    color: #e8c8c4;244    font-size: 36px;245  }246  .nav-item svg {247    width: 64px;248    height: 64px;249    fill: none;250    stroke: #e8c8c4;251    stroke-width: 6;252  }253  .nav-item.active {254    position: relative;255    color: #fff2ef;256    font-weight: 700;257  }258  .nav-item.active .active-bg {259    position: absolute;260    top: 8px;261    width: 120px;262    height: 72px;263    background: #5b4343;264    border-radius: 40px;265    z-index: -1;266  }267 268  /* Gesture bar */269  .gesture {270    position: absolute;271    bottom: 18px;272    left: 50%;273    transform: translateX(-50%);274    width: 360px;275    height: 10px;276    background: #d7d3d0;277    border-radius: 8px;278    opacity: 0.85;279  }280</style>281</head>282<body>283  <div id="render-target">284    <!-- Status Bar -->285    <div class="status-bar">286      <div class="status-left">287        <div>12:14</div>288        <div class="dot"></div>289      </div>290      <div class="status-right">291        <!-- Simple status glyphs -->292        <svg width="36" height="36" viewBox="0 0 24 24" stroke="#e9cbc7" fill="none" stroke-width="2">293          <path d="M3 11a9 9 0 0 1 18 0" />294          <path d="M5 11a7 7 0 0 1 14 0" />295        </svg>296        <svg width="36" height="36" viewBox="0 0 24 24" stroke="#e9cbc7" fill="none" stroke-width="2">297          <path d="M20 7h-3l-2-3h-6l-2 3H4v13h16z"/>298        </svg>299        <svg width="36" height="36" viewBox="0 0 24 24" stroke="#e9cbc7" fill="none" stroke-width="2">300          <rect x="3" y="6" width="18" height="12" rx="2" />301          <path d="M7 6v12M17 6v12" />302        </svg>303        <svg width="36" height="36" viewBox="0 0 24 24" stroke="#e9cbc7" fill="none" stroke-width="2">304          <circle cx="18" cy="6" r="1.5" fill="#e9cbc7"/>305        </svg>306      </div>307    </div>308 309    <!-- Header -->310    <div class="header">Timer</div>311    <div class="more-dots"><span></span><span></span><span></span></div>312 313    <!-- Timer Card -->314    <div class="card">315      <div class="close-pill">×</div>316      <h2>20m timer</h2>317 318      <div class="ring-wrap">319        <div class="ring"></div>320        <div class="ring-center">18:33</div>321        <div class="reset-icon">322          <svg viewBox="0 0 24 24" width="72" height="72" fill="none" stroke="#e9b2ad" stroke-width="2">323            <path d="M12 6a6 6 0 1 1-6 6" />324            <path d="M9 6H6V3" />325          </svg>326        </div>327      </div>328 329      <div class="controls">330        <div class="pill add">+1:00</div>331        <div class="pill pause"><div class="pause-bars"></div></div>332      </div>333    </div>334 335    <!-- Floating Action Button -->336    <div class="fab">+</div>337 338    <!-- Bottom Navigation -->339    <div class="bottom-nav">340      <div class="nav-items">341        <div class="nav-item">342          <svg viewBox="0 0 24 24">343            <circle cx="12" cy="8" r="5"></circle>344            <path d="M5 21a7 7 0 0 1 14 0"></path>345          </svg>346          <div>Alarm</div>347        </div>348        <div class="nav-item">349          <svg viewBox="0 0 24 24">350            <circle cx="12" cy="12" r="9"></circle>351            <path d="M12 7v6l4 2"></path>352          </svg>353          <div>Clock</div>354        </div>355        <div class="nav-item active">356          <div class="active-bg"></div>357          <svg viewBox="0 0 24 24">358            <path d="M8 4l4 8 4-8"></path>359            <path d="M6 20h12"></path>360          </svg>361          <div>Timer</div>362        </div>363        <div class="nav-item">364          <svg viewBox="0 0 24 24">365            <circle cx="12" cy="13" r="8"></circle>366            <path d="M12 5V2M8 2h8"></path>367          </svg>368          <div>Stopwatch</div>369        </div>370        <div class="nav-item">371          <svg viewBox="0 0 24 24">372            <rect x="2" y="10" width="20" height="8" rx="2"></rect>373            <path d="M7 10V7a3 3 0 0 1 6 0v3"></path>374          </svg>375          <div>Bedtime</div>376        </div>377      </div>378    </div>379 380    <div class="gesture"></div>381  </div>382</body>383</html>