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>Alarm Clock Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15  }16 17  /* Header with geometric dark pattern */18  .header {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 250px;24    background:25      radial-gradient(transparent 20%, rgba(255,255,255,0.03) 21%) 0 0/80px 80px,26      radial-gradient(transparent 20%, rgba(255,255,255,0.03) 21%) 40px 40px/80px 80px,27      linear-gradient(#15191f, #12161b);28    color: #fff;29  }30 31  .status-bar {32    position: absolute;33    top: 20px;34    left: 30px;35    right: 30px;36    display: flex;37    align-items: center;38    color: #ffffff;39    font-size: 34px;40  }41  .status-left { display: flex; align-items: center; gap: 20px; }42  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }43 44  .app-title {45    position: absolute;46    left: 30px;47    top: 100px;48    font-size: 66px;49    font-weight: 600;50    color: #ffffff;51    letter-spacing: 0.5px;52  }53 54  .header-actions {55    position: absolute;56    top: 110px;57    right: 30px;58    display: flex;59    align-items: center;60    gap: 36px;61  }62  .icon { width: 48px; height: 48px; }63  .icon.small { width: 40px; height: 40px; }64  .icon path, .icon circle, .icon line, .icon rect { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }65 66  /* Empty state area */67  .empty-state {68    position: absolute;69    top: 900px;70    left: 0;71    width: 100%;72    display: flex;73    flex-direction: column;74    align-items: center;75    gap: 36px;76    color: #BDBDBD;77  }78  .empty-text {79    font-size: 66px;80    font-weight: 500;81    color: #BDBDBD;82  }83 84  /* Floating Action Button */85  .fab {86    position: absolute;87    bottom: 360px;88    left: 50%;89    transform: translateX(-50%);90    width: 150px;91    height: 150px;92    background: #B8860B;93    border-radius: 50%;94    box-shadow: 0 12px 28px rgba(0,0,0,0.45);95    display: flex;96    justify-content: center;97    align-items: center;98  }99  .fab svg { width: 78px; height: 78px; }100 101  /* Bottom navigation */102  .bottom-nav {103    position: absolute;104    left: 0;105    bottom: 70px;106    width: 1080px;107    height: 210px;108    background: #1f252a;109    border-top-left-radius: 40px;110    border-top-right-radius: 40px;111    box-shadow: 0 -8px 20px rgba(0,0,0,0.55) inset;112    display: flex;113    align-items: center;114    justify-content: space-around;115    color: #cfd8dc;116  }117  .nav-item {118    width: 25%;119    display: flex;120    flex-direction: column;121    align-items: center;122    gap: 18px;123  }124  .nav-item .nav-icon { width: 70px; height: 70px; }125  .nav-item .label { font-size: 40px; }126  .active .nav-icon path, .active .nav-icon circle, .active .nav-icon line, .active .nav-icon rect { stroke: #ffffff; }127  .active .label { color: #ffffff; }128  .inactive .nav-icon path, .inactive .nav-icon circle, .inactive .nav-icon line, .inactive .nav-icon rect { stroke: #8d8d8d; }129  .inactive .label { color: #8d8d8d; }130 131  /* Gesture pill */132  .gesture-pill {133    position: absolute;134    bottom: 22px;135    left: 50%;136    transform: translateX(-50%);137    width: 300px;138    height: 16px;139    background: #ECECEC;140    border-radius: 10px;141  }142 143  /* SVG gradient for empty state */144  svg#emptyIcon .ring, svg#emptyIcon .cross { stroke-width: 28; }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Header -->151  <div class="header">152    <div class="status-bar">153      <div class="status-left">154        <div class="time">12:13</div>155        <!-- minimal fillers -->156        <svg class="icon small" viewBox="0 0 24 24" aria-label="indicator">157          <circle cx="12" cy="12" r="3" />158        </svg>159      </div>160      <div class="status-right">161        <!-- Wi-Fi -->162        <svg class="icon small" viewBox="0 0 24 24" aria-label="wifi">163          <path d="M2.5 8.5c5.6-5.6 13.4-5.6 19 0" />164          <path d="M5 11.5c4-4 10-4 14 0" />165          <path d="M7.5 14.5c2.4-2.4 6.6-2.4 9 0" />166          <circle cx="12" cy="18.2" r="1.6" />167        </svg>168        <!-- Battery -->169        <svg class="icon small" viewBox="0 0 24 24" aria-label="battery">170          <rect x="3" y="7" width="16" height="10" rx="2" />171          <rect x="20" y="10" width="2.2" height="4" rx="1" />172          <rect x="5" y="9" width="12" height="6" rx="1" fill="none" />173        </svg>174      </div>175    </div>176 177    <div class="app-title">Alarm Clock</div>178 179    <div class="header-actions">180      <!-- Sort icon -->181      <svg class="icon" viewBox="0 0 24 24" aria-label="sort">182        <line x1="5" y1="7" x2="19" y2="7" />183        <line x1="8" y1="12" x2="19" y2="12" />184        <line x1="11" y1="17" x2="19" y2="17" />185      </svg>186      <!-- Search icon -->187      <svg class="icon" viewBox="0 0 24 24" aria-label="search">188        <circle cx="11" cy="11" r="6" />189        <line x1="16" y1="16" x2="21" y2="21" />190      </svg>191      <!-- More (kebab) -->192      <svg class="icon" viewBox="0 0 24 24" aria-label="more">193        <circle cx="12" cy="5" r="2" />194        <circle cx="12" cy="12" r="2" />195        <circle cx="12" cy="19" r="2" />196      </svg>197    </div>198  </div>199 200  <!-- Empty state centered -->201  <div class="empty-state">202    <svg id="emptyIcon" width="380" height="380" viewBox="0 0 200 200" aria-label="no alarms icon">203      <defs>204        <linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">205          <stop offset="0%" stop-color="#E79A38"></stop>206          <stop offset="100%" stop-color="#D45457"></stop>207        </linearGradient>208      </defs>209      <!-- Gradient ring with small gap using dash array -->210      <circle class="ring" cx="100" cy="100" r="72" fill="none" stroke="url(#grad)" stroke-linecap="round" stroke-dasharray="440 42"></circle>211      <!-- Cross -->212      <line class="cross" x1="72" y1="72" x2="128" y2="128" stroke="url(#grad)" />213      <line class="cross" x1="128" y1="72" x2="72" y2="128" stroke="url(#grad)" />214    </svg>215    <div class="empty-text">No Alarms Found</div>216  </div>217 218  <!-- Floating Action Button -->219  <div class="fab" aria-label="add alarm">220    <svg viewBox="0 0 24 24">221      <circle cx="12" cy="13" r="6.8" fill="none" stroke="#ffffff" stroke-width="2.5"></circle>222      <line x1="12" y1="9.5" x2="12" y2="16.5" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round"></line>223      <line x1="8.5" y1="13" x2="15.5" y2="13" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round"></line>224      <path d="M7 6 L9 4 M15 6 L17 4" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round"></path>225    </svg>226  </div>227 228  <!-- Bottom navigation -->229  <div class="bottom-nav">230    <div class="nav-item active">231      <svg class="nav-icon" viewBox="0 0 24 24" aria-label="alarm tab">232        <circle cx="12" cy="13" r="6.8" />233        <path d="M7 6 L9 4 M15 6 L17 4" />234      </svg>235      <div class="label">Alarm</div>236    </div>237    <div class="nav-item inactive">238      <svg class="nav-icon" viewBox="0 0 24 24" aria-label="hourglass tab">239        <path d="M7 4h10M7 20h10M7 4c0 4 10 4 10 8s-10 4-10 8" />240      </svg>241      <div class="label" style="visibility:hidden;">.</div>242    </div>243    <div class="nav-item inactive">244      <svg class="nav-icon" viewBox="0 0 24 24" aria-label="stopwatch tab">245        <circle cx="12" cy="12" r="7" />246        <line x1="12" y1="12" x2="12" y2="7" />247        <rect x="10" y="3" width="4" height="2" rx="1" />248      </svg>249      <div class="label" style="visibility:hidden;">.</div>250    </div>251    <div class="nav-item inactive">252      <svg class="nav-icon" viewBox="0 0 24 24" aria-label="clock tab">253        <circle cx="12" cy="12" r="8" />254        <line x1="12" y1="12" x2="16" y2="12" />255        <line x1="12" y1="12" x2="12" y2="8" />256      </svg>257      <div class="label" style="visibility:hidden;">.</div>258    </div>259  </div>260 261  <!-- Gesture pill -->262  <div class="gesture-pill"></div>263 264</div>265</body>266</html>