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>Countdown Timer UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background:13      linear-gradient(180deg, #0f1216 0%, #0c0e12 40%, #0c0e12 100%);14  }15 16  /* subtle geometric header pattern */17  .pattern {18    position: absolute; left: 0; top: 0; width: 1080px; height: 320px;19    background:20      repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 18px, rgba(0,0,0,0.0) 18px 36px),21      repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 22px, rgba(0,0,0,0.0) 22px 44px);22  }23 24  /* Status bar */25  .status-bar {26    position: absolute; top: 0; left: 0; width: 1080px; height: 80px;27    display: flex; align-items: center; justify-content: space-between;28    padding: 0 28px; color: #eaeef3; font-weight: 600; font-size: 32px;29  }30  .sb-right { display: flex; align-items: center; gap: 24px; }31  .sb-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.9; }32 33  /* App title */34  .app-title {35    position: absolute; top: 220px; left: 48px;36    color: #b7bdc4; font-size: 54px; font-weight: 700; letter-spacing: 0.5px;37  }38 39  /* More menu (vertical dots) */40  .more-menu {41    position: absolute; top: 230px; right: 40px; width: 10px; height: 60px;42    display: flex; flex-direction: column; justify-content: space-between; align-items: center;43  }44  .more-menu span { width: 10px; height: 10px; background: #69727b; border-radius: 50%; display: block; }45 46  /* Center faint text behind dialog */47  .empty-text {48    position: absolute; top: 1200px; left: 0; width: 100%;49    text-align: center; color: rgba(255,255,255,0.08); font-size: 54px; font-weight: 600;50  }51 52  /* Modal dialog */53  .modal {54    position: absolute; left: 40px; right: 40px; top: 430px;55    background: #2f3a43; border-radius: 24px;56    box-shadow: 0 18px 40px rgba(0,0,0,0.6);57    overflow: hidden;58  }59  .modal-header {60    height: 110px; padding: 24px 28px;61    background: linear-gradient(90deg, #9ba2a9, #7a8289 40%, #5b636b);62    color: #fff; font-size: 44px; font-weight: 700; display: flex; align-items: center;63  }64  .modal-body { padding: 28px; color: #cfd6dc; }65 66  .picker-row {67    display: flex; align-items: flex-start; justify-content: space-between;68    margin-top: 10px;69  }70  .picker-col {71    flex: 1 1 0; text-align: center;72    padding: 0 10px; color: #cfd6dc;73  }74  .picker-col .label { font-size: 34px; font-weight: 700; color: #e9eef3; margin-bottom: 14px; }75  .picker-col .limit { font-size: 32px; color: #7c8791; margin-bottom: 10px; }76  .picker-col .line { height: 2px; background: #9aa6b1; opacity: 0.5; margin: 16px 0; }77  .picker-col .value { font-size: 78px; color: #ffffff; font-weight: 700; letter-spacing: 2px; }78  .picker-col .below { font-size: 32px; color: #7c8791; margin-top: 12px; }79  .colon {80    width: 60px; text-align: center; color: #cfd6dc; font-size: 80px; line-height: 110px; font-weight: 700;81  }82 83  .label-row {84    display: flex; align-items: center; gap: 16px; margin-top: 36px; font-size: 36px;85  }86  .label-row .title { color: #ffffff; font-weight: 700; }87  .label-row .value { color: #cfd6dc; border-bottom: 2px solid #cfd6dc; padding-bottom: 6px; }88 89  .modal-footer {90    display: flex; justify-content: space-between; align-items: center;91    margin-top: 40px; padding-bottom: 26px;92  }93  .btn-ghost { color: #ffffff; font-size: 40px; font-weight: 800; letter-spacing: 1px; }94  .footer-right { display: flex; gap: 48px; }95  .btn-ghost.secondary { opacity: 0.9; }96  .btn-ghost.primary { opacity: 1; }97 98  /* Keyboard */99  .keyboard {100    position: absolute; left: 0; bottom: 120px; width: 100%; height: 900px;101    background: #151417; padding: 36px 34px 24px 34px;102    display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 24px;103  }104  .key {105    height: 160px; border-radius: 80px;106    background: #2a262c; color: #f1f1f1;107    display: flex; align-items: center; justify-content: center;108    font-size: 58px; font-weight: 700;109  }110  .key.special { background: #3a373e; }111  .key.backspace { background: #ffd9df; color: #1a1720; font-weight: 800; }112  .key.enter { background: #e9d8ff; color: #1a1720; font-weight: 800; }113  .key svg { width: 54px; height: 54px; }114 115  .bottom-bar {116    position: absolute; left: calc(50% - 200px); bottom: 34px;117    width: 400px; height: 16px; background: #e6e6e6; border-radius: 12px; opacity: 0.9;118  }119  .keyboard-toggle {120    position: absolute; left: 36px; bottom: 108px; width: 40px; height: 40px;121    color: #bfc5cc;122  }123</style>124</head>125<body>126<div id="render-target">127  <div class="pattern"></div>128 129  <div class="status-bar">130    <div>12:16</div>131    <div class="sb-right">132      <span class="sb-icon">133        <svg viewBox="0 0 24 24">134          <circle cx="12" cy="12" r="10" fill="none" stroke="#cfd6dc" stroke-width="2"></circle>135          <circle cx="12" cy="12" r="3" fill="#cfd6dc"></circle>136        </svg>137      </span>138      <span class="sb-icon">139        <svg viewBox="0 0 24 24">140          <rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="#cfd6dc" stroke-width="2"></rect>141          <rect x="4" y="8" width="8" height="8" fill="#cfd6dc"></rect>142          <rect x="14" y="8" width="6" height="8" fill="#9aa6b1"></rect>143        </svg>144      </span>145      <span class="sb-icon">146        <svg viewBox="0 0 24 24">147          <circle cx="12" cy="12" r="3" fill="#cfd6dc"></circle>148        </svg>149      </span>150      <span class="sb-icon">151        <svg viewBox="0 0 24 24">152          <path d="M2 10h16l2 2-2 2H2z" fill="#cfd6dc"></path>153        </svg>154      </span>155      <span class="sb-icon">156        <svg viewBox="0 0 24 24">157          <rect x="4" y="5" width="14" height="12" rx="2" fill="none" stroke="#cfd6dc" stroke-width="2"></rect>158          <rect x="19" y="9" width="2" height="6" rx="1" fill="#cfd6dc"></rect>159        </svg>160      </span>161    </div>162  </div>163 164  <div class="app-title">Countdown Timer</div>165  <div class="more-menu"><span></span><span></span><span></span></div>166 167  <div class="modal">168    <div class="modal-header">Timer Duration:</div>169    <div class="modal-body">170      <div class="picker-row">171        <div class="picker-col">172          <div class="label">hour</div>173          <div class="limit">99</div>174          <div class="line"></div>175          <div class="value">0</div>176          <div class="line"></div>177          <div class="below">1</div>178        </div>179        <div class="colon">:</div>180        <div class="picker-col">181          <div class="label">min</div>182          <div class="limit">59</div>183          <div class="line"></div>184          <div class="value">10</div>185          <div class="line"></div>186          <div class="below">1</div>187        </div>188        <div class="colon">:</div>189        <div class="picker-col">190          <div class="label">sec</div>191          <div class="limit">59</div>192          <div class="line"></div>193          <div class="value">0</div>194          <div class="line"></div>195          <div class="below">1</div>196        </div>197      </div>198 199      <div class="label-row">200        <div class="title">Label:</div>201        <div class="value">none</div>202      </div>203 204      <div class="modal-footer">205        <div class="btn-ghost">SETTINGS</div>206        <div class="footer-right">207          <div class="btn-ghost secondary">CANCEL</div>208          <div class="btn-ghost primary">OK</div>209        </div>210      </div>211    </div>212  </div>213 214  <div class="empty-text">No Timers Found</div>215 216  <!-- Numeric keyboard -->217  <div class="keyboard">218    <div class="key">1</div>219    <div class="key">2</div>220    <div class="key">3</div>221    <div class="key special">−</div>222 223    <div class="key">4</div>224    <div class="key">5</div>225    <div class="key">6</div>226    <div class="key special">⌞⌟</div>227 228    <div class="key">7</div>229    <div class="key">8</div>230    <div class="key">9</div>231    <div class="key backspace">232      <svg viewBox="0 0 24 24">233        <path d="M3 12l5-5h10a2 2 0 012 2v6a2 2 0 01-2 2H8l-5-5z" fill="#231f2a"></path>234        <path d="M10 9l5 6M15 9l-5 6" stroke="#231f2a" stroke-width="2" fill="none"></path>235      </svg>236    </div>237 238    <div class="key">,</div>239    <div class="key">0</div>240    <div class="key">.</div>241    <div class="key enter">242      <svg viewBox="0 0 24 24">243        <path d="M6 12h10l-3-3M16 12l-3 3" stroke="#231f2a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>244      </svg>245    </div>246  </div>247 248  <!-- keyboard toggle chevron -->249  <div class="keyboard-toggle">250    <svg viewBox="0 0 24 24">251      <path d="M5 10l7 7 7-7" fill="none" stroke="#bfc5cc" stroke-width="2"></path>252    </svg>253  </div>254 255  <!-- gesture bar -->256  <div class="bottom-bar"></div>257</div>258</body>259</html>