NetClock

NetClock is a polished clock, timer, alarm, and progress dashboard built with Vue 3, Vite, and TypeScript-ready component structure. It ships as both a web application and an Electron desktop application, with separate release outputs for each target.

Features

• Real-time digital clock with date and weekday display.
• Pomodoro timer with 25-minute focus sessions, 5-minute breaks, automatic cycling, completed session count, and total focus minutes.
• Custom countdown timer with hour, minute, and second controls.
• Smart one-shot alarm with hour/minute settings, custom reminder text, alert dialog, and optional uploaded audio.
• User-uploaded MP3/WAV or other browser-supported audio for alarm and timer notifications.
• Chinese speech time announcement through the Web Speech API.
• Four visual themes: dark, light, neon, and sunny.
• Toggleable digital glow effect.
• Year, month, and week progress visualization.
• Desktop edge-collapse mode with a compact vertical time display.
• Draggable floating window behavior and remembered window position.
• Local persistence for theme, counters, Pomodoro stats, alarm settings, countdown input, desktop position, and desktop edge-collapse preferences.
• Keyboard shortcuts: Space to start or pause the active timer, R to reset, and 1 / 2 / 3 to switch modes.

Application Targets

Web App

The web target keeps the full browser-oriented interface and horizontal progress bars.

npm run dev
npm run build:web
npm run preview

Build output:

release/web/

Desktop App

The desktop target uses Electron and loads the desktop-optimized Vue entry. It includes vertical progress bars and edge-collapse behavior.

When edge-collapse is enabled, dragging the window close to the left or right edge of the screen collapses it into a compact vertical display showing hour, minute, and second. Moving the pointer near the compact display expands the full interface again.

npm run dev:desktop
npm run electron:dev
npm run build:desktop

Renderer build output:

dist/desktop/

Packaged Electron output:

release/desktop/NetClock-1.0.0-win.7z

Architecture

NetClock/
├─ index.html                  # Web entry
├─ desktop.html                # Desktop renderer entry
├─ electron/
│  ├─ main.cjs                 # Electron main process
│  └─ preload.cjs              # Safe renderer bridge
├─ src/
│  ├─ main.ts                  # Web Vue mount
│  ├─ main-desktop.ts          # Desktop Vue mount
│  ├─ App.vue                  # Shared application component
│  ├─ style.css                # Themes, layout, responsive UI, desktop UI
│  └─ utils/
│     └─ time.ts               # Time formatting and progress helpers
├─ release/
│  ├─ web/                     # Web release
│  └─ desktop/                 # Packaged Electron app
├─ dist/
│  └─ desktop/                 # Desktop renderer build used by Electron
└─ vite.config.ts              # Dual-target Vite build configuration

The Vue app is shared between web and desktop builds. Entry files pass a target variant into the root component, allowing the desktop build to enable Electron-specific behavior while preserving the same state and timer logic.

Development

Install dependencies:

npm install

Run the web app:

npm run dev

Run the desktop renderer in the browser:

npm run dev:desktop

Run the Electron desktop app:

npm run electron:dev

Type-check and build all release targets:

npm run typecheck
npm run build

Releases

Generate web, desktop renderer, and Electron release artifacts:

npm run release

Release outputs are written to:

• release/web
• release/desktop/NetClock-1.0.0-win.7z

Update Notes

• Added Electron desktop packaging.
• Added separate web and desktop release outputs.
• Added an English project README for public distribution.