GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Countdown Timer UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    font-family: "Roboto", Arial, sans-serif;16    color: #fff;17  }18 19  /* Header with dark geometric feel */20  .header {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 320px;26    background:27      radial-gradient(ellipse at bottom, rgba(60,60,60,.35), rgba(0,0,0,.8) 60%),28      repeating-linear-gradient(60deg, rgba(255,255,255,.06) 0 22px, rgba(0,0,0,0) 22px 44px),29      repeating-linear-gradient(-60deg, rgba(255,255,255,.04) 0 22px, rgba(0,0,0,0) 22px 44px);30    background-blend-mode: multiply;31  }32 33  /* Status row */34  .status {35    position: absolute;36    top: 22px;37    left: 36px;38    right: 36px;39    display: flex;40    align-items: center;41    gap: 20px;42    color: #fff;43    font-size: 40px;44    opacity: 0.95;45  }46  .status .spacer { flex: 1; }47  .status svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.5; opacity: 0.9; }48 49  /* Title row */50  .title-row {51    position: absolute;52    top: 180px;53    left: 36px;54    right: 36px;55    display: flex;56    align-items: center;57  }58  .app-title {59    font-size: 72px;60    font-weight: 600;61    letter-spacing: 0.2px;62  }63  .menu {64    margin-left: auto;65    display: flex;66    flex-direction: column;67    gap: 12px;68    padding: 18px 10px;69  }70  .menu span {71    width: 12px;72    height: 12px;73    background: #fff;74    border-radius: 50%;75    display: block;76  }77 78  /* Empty state */79  .empty-state {80    position: absolute;81    top: 980px;82    left: 0;83    width: 100%;84    text-align: center;85  }86  .empty-state .icon-wrap {87    width: 360px;88    height: 360px;89    margin: 0 auto 40px auto;90  }91  .empty-state .label {92    font-size: 64px;93    color: #BDBDBD;94    font-weight: 500;95    letter-spacing: 0.3px;96  }97 98  /* Floating action button */99  .fab {100    position: absolute;101    bottom: 360px;102    left: 50%;103    transform: translateX(-50%);104    width: 160px;105    height: 160px;106    background: #b28300;107    border-radius: 50%;108    box-shadow: 0 8px 22px rgba(0,0,0,.5);109    display: flex;110    align-items: center;111    justify-content: center;112  }113  .fab svg { width: 84px; height: 84px; }114 115  /* Bottom navigation */116  .bottom-nav {117    position: absolute;118    bottom: 96px;119    left: 24px;120    width: 1032px;121    height: 200px;122    background: #1f2427;123    border-radius: 40px;124    box-shadow: 0 -8px 20px rgba(0,0,0,.6);125    display: flex;126    align-items: center;127    justify-content: space-around;128    padding: 0 36px;129  }130  .nav-item {131    display: flex;132    flex-direction: column;133    align-items: center;134    gap: 12px;135    color: #9AA0A6;136    font-size: 40px;137    font-weight: 500;138  }139  .nav-item svg { width: 64px; height: 64px; stroke: #9AA0A6; fill: none; stroke-width: 4; }140  .nav-item.active { color: #fff; }141  .nav-item.active svg { stroke: #fff; }142 143  /* Gesture pill */144  .gesture {145    position: absolute;146    bottom: 24px;147    left: 50%;148    transform: translateX(-50%);149    width: 360px;150    height: 20px;151    background: #EDEDED;152    border-radius: 10px;153    opacity: 0.9;154  }155 156  /* Utility small dot */157  .dot {158    width: 12px; height: 12px; border-radius: 50%; background: #fff; opacity: 0.9;159  }160</style>161</head>162<body>163<div id="render-target">164 165  <div class="header"></div>166 167  <!-- Status bar -->168  <div class="status">169    <span>12:13</span>170    <!-- hourglass icon -->171    <svg viewBox="0 0 24 24"><path d="M6 3h12M6 21h12M8 3c0 4 8 4 8 8s-8 4-8 8M8 3h8M8 21c0-4 8-4 8-8" /></svg>172    <!-- spinner/dots -->173    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-dasharray="8 8" /></svg>174    <!-- doc icons -->175    <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2" /></svg>176    <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2" /></svg>177    <span class="dot"></span>178    <div class="spacer"></div>179    <!-- wifi + battery placeholder icons -->180    <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0M12 19l1-1" /></svg>181    <svg viewBox="0 0 24 24"><rect x="3" y="7" width="16" height="10" rx="2"/><rect x="20" y="10" width="2" height="4"/></svg>182  </div>183 184  <!-- Title -->185  <div class="title-row">186    <div class="app-title">Countdown Timer</div>187    <div class="menu"><span></span><span></span><span></span></div>188  </div>189 190  <!-- Empty state illustration and text -->191  <div class="empty-state">192    <div class="icon-wrap">193      <svg viewBox="0 0 280 280">194        <defs>195          <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1">196            <stop offset="0%" stop-color="#F39C12"/>197            <stop offset="100%" stop-color="#E74C3C"/>198          </linearGradient>199        </defs>200        <!-- gradient ring with small gap -->201        <circle cx="140" cy="140" r="110" stroke="url(#grad1)" stroke-width="18" fill="none" stroke-linecap="round" stroke-dasharray="610 120" stroke-dashoffset="86"/>202        <!-- X mark -->203        <path d="M100 100 L180 180 M180 100 L100 180" stroke="url(#grad1)" stroke-width="18" stroke-linecap="round"/>204      </svg>205    </div>206    <div class="label">No Timers Found</div>207  </div>208 209  <!-- Floating Action Button -->210  <div class="fab">211    <svg viewBox="0 0 64 64">212      <!-- hourglass -->213      <path d="M18 10h28M18 54h28M22 10c0 8 20 8 20 16s-20 8-20 16M22 10h20M22 54c0-8 20-8 20-16" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>214      <!-- plus -->215      <path d="M48 36v14M41 43h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>216    </svg>217  </div>218 219  <!-- Bottom Navigation -->220  <div class="bottom-nav">221    <div class="nav-item">222      <svg viewBox="0 0 24 24">223        <circle cx="12" cy="13" r="6"/><path d="M6 6l2-2M18 6l-2-2M12 9v4M12 13l3 2"/>224      </svg>225    </div>226    <div class="nav-item active">227      <svg viewBox="0 0 24 24">228        <path d="M6 3h12M6 21h12M8 3c0 4 8 4 8 8s-8 4-8 8M8 3h8M8 21c0-4 8-4 8-8" />229      </svg>230      <div>Timer</div>231    </div>232    <div class="nav-item">233      <svg viewBox="0 0 24 24">234        <circle cx="12" cy="12" r="8"/><path d="M12 6v6l4 2"/>235      </svg>236    </div>237    <div class="nav-item">238      <svg viewBox="0 0 24 24">239        <circle cx="12" cy="12" r="8"/><path d="M12 12h5M12 7v5"/>240      </svg>241    </div>242  </div>243 244  <!-- Gesture pill -->245  <div class="gesture"></div>246 247</div>248</body>249</html>