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>Clock UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #1f191b; /* dark charcoal/brown */20    color: #e7dde0;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 96px;30    padding: 24px 32px;31    box-sizing: border-box;32    color: #e7dde0;33    display: flex;34    align-items: center;35    justify-content: space-between;36    font-size: 32px;37    opacity: 0.9;38  }39  .status-right {40    display: flex;41    gap: 22px;42    align-items: center;43  }44  .dot {45    width: 10px;46    height: 10px;47    background: #d8cbd0;48    border-radius: 50%;49    display: inline-block;50    opacity: 0.8;51  }52 53  /* Page heading */54  .page-title {55    position: absolute;56    top: 160px;57    left: 64px;58    font-size: 64px;59    font-weight: 500;60    color: #e7dde0;61    letter-spacing: 0.2px;62  }63 64  /* Main time */65  .time-row {66    position: absolute;67    top: 300px;68    left: 64px;69    display: flex;70    align-items: baseline;71    gap: 24px;72  }73  .time-row .time {74    font-size: 180px;75    line-height: 1;76    font-weight: 500;77    color: #f1e9eb;78  }79  .time-row .ampm {80    font-size: 64px;81    color: #d7c8ce;82    letter-spacing: 3px;83  }84 85  .date-row {86    position: absolute;87    top: 560px;88    left: 64px;89    font-size: 44px;90    color: #cbbdc3;91  }92 93  /* World clock card */94  .world-card {95    position: absolute;96    top: 720px;97    left: 60px;98    width: 960px;99    height: 280px;100    background: #2a2326;101    border-radius: 60px;102    box-shadow: 0 2px 0 rgba(0,0,0,0.35) inset;103    display: flex;104    align-items: center;105    justify-content: space-between;106    padding: 40px 56px;107    box-sizing: border-box;108  }109  .world-left .city {110    font-size: 56px;111    color: #efe6e8;112    margin-bottom: 16px;113  }114  .world-left .offset {115    font-size: 36px;116    color: #bfb0b6;117  }118  .world-right {119    display: flex;120    align-items: baseline;121    gap: 18px;122  }123  .world-right .w-time {124    font-size: 128px;125    color: #f4ecee;126    font-weight: 600;127  }128  .world-right .w-ampm {129    font-size: 44px;130    color: #d0c1c7;131    letter-spacing: 2px;132  }133 134  /* Vertical ellipsis menu */135  .menu-dots {136    position: absolute;137    top: 150px;138    right: 40px;139    display: flex;140    flex-direction: column;141    gap: 16px;142    opacity: 0.8;143  }144  .menu-dots span {145    width: 10px;146    height: 10px;147    background: #d8cbd0;148    border-radius: 50%;149    display: block;150  }151 152  /* Floating Action Button */153  .fab {154    position: absolute;155    left: 50%;156    transform: translateX(-50%);157    top: 1580px;158    width: 240px;159    height: 240px;160    background: #f7b2c6;161    border-radius: 50%;162    display: flex;163    align-items: center;164    justify-content: center;165    box-shadow: 0 10px 30px rgba(0,0,0,0.35);166  }167  .fab svg {168    width: 88px;169    height: 88px;170    stroke: #2a2326;171    stroke-width: 10;172  }173 174  /* Home indicator */175  .home-indicator {176    position: absolute;177    left: 50%;178    transform: translateX(-50%);179    bottom: 300px; /* above bottom nav */180    width: 300px;181    height: 12px;182    background: #e9e3e6;183    border-radius: 8px;184    opacity: 0.9;185  }186 187  /* Bottom navigation */188  .bottom-nav {189    position: absolute;190    bottom: 0;191    left: 0;192    width: 1080px;193    height: 260px;194    background: #2a2326;195    box-shadow: 0 -1px 0 rgba(255,255,255,0.05) inset;196  }197  .nav-items {198    position: absolute;199    bottom: 36px;200    left: 32px;201    right: 32px;202    display: flex;203    justify-content: space-between;204    align-items: flex-end;205  }206  .nav-item {207    width: 200px;208    text-align: center;209    color: #cbbdc3;210  }211  .nav-item .icon-wrap {212    width: 160px;213    height: 92px;214    margin: 0 auto 18px;215    border-radius: 46px;216    display: flex;217    align-items: center;218    justify-content: center;219  }220  .nav-item svg {221    width: 64px;222    height: 64px;223    stroke: #cbbdc3;224    stroke-width: 5;225    fill: none;226  }227  .nav-item .label {228    font-size: 34px;229  }230  .nav-item.active {231    color: #efe6e8;232  }233  .nav-item.active .icon-wrap {234    background: #44363c;235  }236  .nav-item.active svg {237    stroke: #efe6e8;238  }239</style>240</head>241<body>242<div id="render-target">243 244  <!-- Status bar -->245  <div class="status-bar">246    <div>8:51</div>247    <div class="status-right">248      <svg width="28" height="28" viewBox="0 0 24 24">249        <circle cx="12" cy="12" r="9" fill="none" stroke="#d8cbd0" stroke-width="2"/>250        <path d="M12 6v6l4 2" stroke="#d8cbd0" stroke-width="2" fill="none"/>251      </svg>252      <span class="dot"></span>253      <svg width="30" height="30" viewBox="0 0 24 24">254        <path d="M3 18h18M3 14h12M3 10h6" stroke="#d8cbd0" stroke-width="2" fill="none"/>255      </svg>256      <svg width="28" height="28" viewBox="0 0 24 24">257        <path d="M3 10l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" stroke="#d8cbd0" stroke-width="2" fill="none"/>258      </svg>259    </div>260  </div>261 262  <!-- Page Title -->263  <div class="page-title">Clock</div>264 265  <!-- Big Time -->266  <div class="time-row">267    <div class="time">8:51</div>268    <div class="ampm">PM</div>269  </div>270 271  <!-- Date -->272  <div class="date-row">Fri, Sep 29</div>273 274  <!-- World clock card -->275  <div class="world-card">276    <div class="world-left">277      <div class="city">Queenstown</div>278      <div class="offset">+7h 30m Tomorrow</div>279    </div>280    <div class="world-right">281      <div class="w-time">4:21</div>282      <div class="w-ampm">AM</div>283    </div>284  </div>285 286  <!-- Vertical ellipsis -->287  <div class="menu-dots" aria-label="More">288    <span></span>289    <span></span>290    <span></span>291  </div>292 293  <!-- Floating action button -->294  <div class="fab" aria-label="Add clock">295    <svg viewBox="0 0 24 24">296      <path d="M12 5v14M5 12h14" />297    </svg>298  </div>299 300  <!-- Home indicator -->301  <div class="home-indicator"></div>302 303  <!-- Bottom Navigation -->304  <div class="bottom-nav">305    <div class="nav-items">306 307      <div class="nav-item">308        <div class="icon-wrap">309          <!-- Alarm icon -->310          <svg viewBox="0 0 24 24">311            <circle cx="12" cy="13" r="7"/>312            <path d="M6 5L3 7M18 5l3 2"/>313            <path d="M12 10v4l3 2"/>314          </svg>315        </div>316        <div class="label">Alarm</div>317      </div>318 319      <div class="nav-item active">320        <div class="icon-wrap">321          <!-- Clock icon -->322          <svg viewBox="0 0 24 24">323            <circle cx="12" cy="12" r="8"/>324            <path d="M12 7v6l4 2"/>325          </svg>326        </div>327        <div class="label">Clock</div>328      </div>329 330      <div class="nav-item">331        <div class="icon-wrap">332          <!-- Timer / Hourglass -->333          <svg viewBox="0 0 24 24">334            <path d="M7 4h10M7 20h10"/>335            <path d="M7 4c0 4 5 5 5 8s-5 4-5 8M17 4c0 4-5 5-5 8s5 4 5 8" />336          </svg>337        </div>338        <div class="label">Timer</div>339      </div>340 341      <div class="nav-item">342        <div class="icon-wrap">343          <!-- Stopwatch -->344          <svg viewBox="0 0 24 24">345            <path d="M9 3h6"/>346            <circle cx="12" cy="14" r="7"/>347            <path d="M12 10v5l3 2"/>348          </svg>349        </div>350        <div class="label">Stopwatch</div>351      </div>352 353      <div class="nav-item">354        <div class="icon-wrap">355          <!-- Bedtime -->356          <svg viewBox="0 0 24 24">357            <path d="M3 18v-6h10a4 4 0 0 1 4 4v2H3z"/>358            <path d="M3 12h6"/>359            <rect x="4" y="10" width="3" height="3"/>360          </svg>361        </div>362        <div class="label">Bedtime</div>363      </div>364 365    </div>366  </div>367 368</div>369</body>370</html>