GD-ML/AndroidCode
13.4k
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>Countdown Timer Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #0f1012;13 border-radius: 0;14 box-shadow: none;15 }16 17 /* Subtle geometric feel for header background */18 .top-bg {19 position: absolute;20 top: 0; left: 0; right: 0;21 height: 360px;22 background:23 linear-gradient(180deg, rgba(22,22,24,0.95) 0%, rgba(15,16,18,0.98) 100%),24 repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, rgba(0,0,0,0) 2px 56px);25 }26 27 /* Status bar */28 .status-bar {29 position: absolute; top: 0; left: 0; right: 0;30 height: 120px; padding: 0 40px;31 display: flex; align-items: center; justify-content: space-between;32 color: #ffffff; font-weight: 600; font-size: 40px;33 }34 .status-right { display: flex; align-items: center; gap: 26px; }35 .status-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }36 37 /* Three-dot menu */38 .kebab {39 position: absolute; right: 40px; top: 290px; width: 14px;40 display: grid; gap: 8px; justify-items: center;41 }42 .kebab span {43 width: 10px; height: 10px; background: #8b8e94; border-radius: 50%;44 display: block;45 }46 47 /* Title */48 .title {49 position: absolute; left: 40px; top: 220px;50 font-size: 64px; font-weight: 700; color: #a6adb4; opacity: 0.9;51 }52 53 /* Dialog (Timer Duration) */54 .dialog {55 position: absolute; left: 40px; top: 420px;56 width: 1000px; border-radius: 26px;57 background: #2e3842; color: #e8eef3;58 box-shadow: 0 12px 28px rgba(0,0,0,0.45);59 }60 .dialog-header {61 height: 130px; border-top-left-radius: 26px; border-top-right-radius: 26px;62 padding: 34px 32px; font-size: 52px; font-weight: 700; color: #eef3f6;63 background: linear-gradient(180deg, #818a92 0%, #3a4550 100%);64 }65 .picker-section { padding: 30px 32px 20px; }66 .picker-row { display: flex; justify-content: space-between; gap: 26px; }67 .picker-col {68 flex: 1; min-width: 0; text-align: center; color: #cfd6db;69 }70 .picker-col .label { font-size: 32px; font-weight: 700; color: #ffffff; margin-bottom: 18px; }71 .picker-col .top-range { font-size: 32px; color: #a0a6ab; margin-bottom: 18px; }72 .picker-col .line { height: 2px; background: #8f98a1; opacity: 0.6; margin: 18px auto; width: 75%; }73 .picker-col .value {74 font-size: 76px; font-weight: 800; color: #e7edf2; letter-spacing: 2px;75 }76 .picker-col .value .highlight {77 background: #b3a15a; color: #091016; padding: 0 16px; border-radius: 6px;78 }79 .picker-col .bottom { font-size: 30px; color: #9aa2a8; margin-top: 16px; }80 81 .colon {82 position: absolute; top: 690px; /* around value line */83 left: 400px; font-size: 80px; color: #cfd6db;84 }85 .colon.two { left: 720px; }86 87 .label-row {88 display: flex; align-items: baseline; gap: 12px;89 padding: 24px 32px; font-size: 38px; color: #ffffff;90 }91 .label-row .value {92 color: #cdd3d8; border-bottom: 2px solid #cdd3d8; line-height: 1.1; padding-bottom: 6px;93 }94 95 .dialog-actions {96 display: flex; justify-content: space-between; align-items: center;97 padding: 26px 32px 34px; font-size: 40px; font-weight: 800; letter-spacing: 1px;98 }99 .actions-right { display: flex; gap: 50px; }100 .action { color: #ffffff; }101 102 /* Keypad */103 .keypad {104 position: absolute; left: 0; right: 0; top: 1400px; bottom: 160px;105 background: #141215;106 padding: 34px;107 }108 .keys {109 display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;110 margin-top: 16px;111 }112 .key {113 height: 200px; border-radius: 110px;114 background: #2a272c; color: #f2eef6;115 display: flex; align-items: center; justify-content: center;116 font-size: 72px; font-weight: 700;117 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);118 }119 .key.gray { background: #3b383e; color: #eae8ee; }120 .key.pink { background: #ffd9dd; color: #2b1d28; }121 .key.purple { background: #e8d7ff; color: #1f1530; }122 .key svg { width: 80px; height: 80px; }123 124 /* Bottom gesture hints */125 .gesture {126 position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);127 width: 380px; height: 12px; background: #d6d6d8; border-radius: 10px; opacity: 0.85;128 }129 .chevron {130 position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%);131 width: 36px; height: 24px;132 }133</style>134</head>135<body>136<div id="render-target">137 138 <div class="top-bg"></div>139 140 <div class="status-bar">141 <div class="time">12:15</div>142 <div class="status-right">143 <!-- simple spinner/dnd icons -->144 <div class="status-icon">145 <svg viewBox="0 0 24 24">146 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2" opacity="0.7"></circle>147 <path d="M12 2 A10 10 0 0 1 22 12" stroke="#fff" stroke-width="3" fill="none"></path>148 </svg>149 </div>150 <div class="status-icon">151 <svg viewBox="0 0 24 24">152 <rect x="3" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>153 <path d="M20 11 h2 v2 h-2" fill="#fff"></path>154 </svg>155 </div>156 <div class="status-icon">157 <svg viewBox="0 0 24 24">158 <rect x="3" y="4" width="18" height="16" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>159 <line x1="8" y1="8" x2="16" y2="8" stroke="#fff" stroke-width="2"></line>160 <line x1="8" y1="12" x2="16" y2="12" stroke="#fff" stroke-width="2"></line>161 </svg>162 </div>163 <div class="status-icon">164 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"></circle></svg>165 </div>166 <div class="status-icon">167 <svg viewBox="0 0 24 24">168 <path d="M6 10l6-6 6 6" fill="none" stroke="#fff" stroke-width="2"></path>169 </svg>170 </div>171 <div class="status-icon">172 <svg viewBox="0 0 24 24">173 <rect x="6" y="6" width="12" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>174 <rect x="17" y="10" width="2" height="4" fill="#fff"></rect>175 </svg>176 </div>177 </div>178 </div>179 180 <div class="title">Countdown Timer</div>181 <div class="kebab"><span></span><span></span><span></span></div>182 183 <div class="dialog">184 <div class="dialog-header">Timer Duration:</div>185 186 <div class="picker-section">187 <div class="picker-row">188 <div class="picker-col">189 <div class="label">hour</div>190 <div class="top-range">99</div>191 <div class="line"></div>192 <div class="value">0</div>193 <div class="line"></div>194 <div class="bottom">1</div>195 </div>196 <div class="picker-col">197 <div class="label">min</div>198 <div class="top-range">59</div>199 <div class="line"></div>200 <div class="value"><span class="highlight">0</span></div>201 <div class="line"></div>202 <div class="bottom">1</div>203 </div>204 <div class="picker-col">205 <div class="label">sec</div>206 <div class="top-range">59</div>207 <div class="line"></div>208 <div class="value">0</div>209 <div class="line"></div>210 <div class="bottom">1</div>211 </div>212 </div>213 </div>214 215 <div class="colon">:</div>216 <div class="colon two">:</div>217 218 <div class="label-row">219 <div class="key">Label:</div>220 <div class="value">none</div>221 </div>222 223 <div class="dialog-actions">224 <div class="action">SETTINGS</div>225 <div class="actions-right">226 <div class="action">CANCEL</div>227 <div class="action">OK</div>228 </div>229 </div>230 </div>231 232 <!-- Numeric keypad -->233 <div class="keypad">234 <div class="keys">235 <div class="key">1</div>236 <div class="key">2</div>237 <div class="key">3</div>238 <div class="key gray">−</div>239 240 <div class="key">4</div>241 <div class="key">5</div>242 <div class="key">6</div>243 <div class="key gray">244 <svg viewBox="0 0 24 24">245 <rect x="5" y="7" width="14" height="10" rx="2" fill="none" stroke="#eae8ee" stroke-width="2"></rect>246 <path d="M9 10 l3 3 l3-3" fill="none" stroke="#eae8ee" stroke-width="2"></path>247 </svg>248 </div>249 250 <div class="key">7</div>251 <div class="key">8</div>252 <div class="key">9</div>253 <div class="key pink">254 <svg viewBox="0 0 24 24">255 <path d="M6 6h12v12H6z" fill="none" stroke="#2b1d28" stroke-width="2"></path>256 <path d="M9 9l6 6M15 9l-6 6" stroke="#2b1d28" stroke-width="2"></path>257 </svg>258 </div>259 260 <div class="key">,</div>261 <div class="key">0</div>262 <div class="key">.</div>263 <div class="key purple">264 <svg viewBox="0 0 24 24">265 <path d="M5 13l4 4 10-10" fill="none" stroke="#1f1530" stroke-width="3"></path>266 </svg>267 </div>268 </div>269 </div>270 271 <!-- bottom gesture hints -->272 <svg class="chevron" viewBox="0 0 36 24">273 <path d="M2 6 L18 18 L34 6" fill="none" stroke="#c6c6c9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>274 </svg>275 <div class="gesture"></div>276 277</div>278</body>279</html>