# Smart Clock (Voice Control)

Voice-controlled 7-segment smart clock (zh-TW Web Speech API) on QuickUI 0.6.2: shows time, date, year, seconds and runs spoken countdowns.

## Overview

| Item | Value |
|---|---|
| Created | 2024-12-20 |
| Category | App & Platform Examples |
| HTML files | `index.html` |
| Source | [target/20241220](https://github.com/pardnio/demo-web/tree/main/target/20241220) |

## Live Preview

<iframe src="/target/20241220/" title="Smart Clock (Voice Control)" loading="lazy" allow="microphone" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[Open the example in a new tab](/target/20241220/)

## Page Sections

| Section | Description |
|---|---|
| Clock (#timer.timer) | Four div.number digits of 7 span segments each plus a div.colon; digits render from data-value. |
| Hint (section.bottom) | Lists supported commands: 顯示當前日期／年份／時間／秒數、計時xx分鐘、計時xx秒. |

## Interactions

- In QUI when.rendered: if webkitSpeechRecognition is missing, alert('此瀏覽器不支援語音識別功能'); otherwise start continuous zh-TW recognition with interim results.
- onresult debounces 500ms, then matches keywords: 現在/當前時間 → setTime, 年份 → setYear, 日期 → setDate, 秒數 → setSec (each refreshed every 1s by setInterval).
- '計時N分鐘' / '計時N秒' parsed by regex start setCountDown; '停止' stops; other speech of 2+ chars and onerror/onend show a face (setFace: eyes + mouth).

## Dependencies

| Name | Version | Source |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| QuickUI (@pardnchiu/quickui) | 0.6.2 | https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@0.6.2/dist/QuickUI.js |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Noto Sans / Noto Sans TC (font-family only) | - | declared in SCSS; no font stylesheet linked |
| Web Speech API (webkitSpeechRecognition) | - | browser built-in |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |
| Partials | `_init.scss`, `function/_hsbTohsl.scss` |

_init holds the reset; function/_hsbTohsl provides hsb()/hsba(). index.scss sizes the clock with --width: calc(100vw / 40), --height and --triHeight, and toggles segment opacity per [data-value] (0-9, '-', eye, mouth/none for the colon).

```bash
cd target/20241220
npx sass sass/index.scss css/index.css --no-source-map || exit 1
```

## Techniques

- Pure-CSS 7-segment digits: span:nth-child segments shown via [data-value] attribute selectors; viewport-relative sizing with CSS vars.
- JS writes element.dataset.value only; no DOM rebuilding.
- Web Speech API with debounce (setTimeout) and setInterval refresh; regex extraction of countdown length.

## External Assets

- https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20241220.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20241220

## Related

- [Project Structure](/project-structure)
- [Styling Workflow](/styling-workflow)
- [Frameworks](/frameworks)