Skip to content

cclljj/CountDown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 

Repository files navigation

Next Stop: Freedom - Countdown 🚀

下一站:自由 - 倒數計時器

License: MIT HTML5 CSS3 JavaScript Status

🔴 Live Demo / 線上演示

A beautiful, modern countdown timer designed to track your journey toward freedom—whether it's resignation, retirement, graduation, or any major life milestone.

這是一個美觀、現代的倒數計時器,專為記錄你通往自由的旅程而設計——無論是離職、退休、畢業,或是人生中的任何重要里程碑。


🇬🇧 English Description

✨ Features

  • 🎨 Modern Aesthetics: Built with a sleek Glassmorphism design, soothing gradients, and smooth animations.
  • ⏱️ Precise Countdown: Tracks days remaining in real-time.
  • 📊 Progress Visualizer: A shimmering progress bar shows exactly how far you've come from your start date.
  • 🌍 Internationalization: Toggle between English and Traditional Chinese instantly.
  • 🔗 Smart URL Linking: Smartly handles URL parameters to load directly or prompt for missing info.
  • 📅 Persistence: Your settings are saved locally and override defaults on return visits.
  • 🎆 Celebration Mode: A confetti and fireworks animation triggers automatically when the countdown reaches zero.
  • 📱 Responsive: Looks great on desktop and mobile devices.

🚀 Usage

Basic Usage

  1. Open index.html in any modern web browser.
  2. A setup modal will appear if you haven't set dates yet or provided incomplete parameters.
  3. Enter your Start Date and Target Date.
  4. Settings are saved automatically for future visits.

Smart URL Parameters

You can share specific configurations. The behavior depends on the parameters provided:

  • Both start & end provided:
    • Example: index.html?start=2024-01-01&end=2025-12-31
    • Result: The page loads immediately (No Modal) with these dates.
  • Partial or No parameters:
    • Example: index.html?start=2024-01-01
    • Result: The modal appears, pre-filled with the provided date, asking you to complete the setup.

🛠️ Defaults

  • Start: 2000-01-01
  • Target: 2030-12-31

🇹🇼 中文介紹

✨ 功能特色

  • 🎨 現代美學:採用流暢的玻璃擬態 (Glassmorphism) 設計,搭配舒適的漸層色與平滑動畫。
  • ⏱️ 精確倒數:即時追蹤距離目標還剩下多少天。
  • 📊 進度視覺化:帶有閃光特效的進度條,讓你隨時掌握目前已經完成了多少旅程。
  • 🌍 多語言支援:一鍵切換英文與繁體中文介面。
  • 🔗 智慧網址參數:根據網址參數決定直接進入或跳出設定視窗。
  • 📅 自動儲存:瀏覽器會自動記住你的設定。
  • 🎆 慶祝模式:當倒數歸零時,自動觸發五彩紙屑與煙火特效,慶祝自由時刻!
  • 📱 響應式設計:完美支援電腦與手機介面。

🚀 使用方式

一般使用

  1. 打開 index.html
  2. 如果沒有設定過日期或參數不完整,會彈出設定視窗
  3. 輸入 起始日期結束日期
  4. 系統會自動儲存設定。

智慧網址參數 (Smart URL Parameters)

你可以透過網址分享設定,系統會根據參數完整度決定行為:

  • 同時提供 startend
    • 範例:index.html?start=2024-01-01&end=2025-12-31
    • 結果直接進入網頁,不會跳出設定視窗。
  • 只提供其中一個或無參數
    • 範例:index.html?start=2024-01-01
    • 結果:跳出設定視窗,並自動預填網址中提供的數值。

🛠️ 預設值

  • 起始日:2000-01-01
  • 目標日:2030-12-31

🤖 Credits / 製作說明

This project was generated by AntiGravity paired with the Gemini 3 Pro model. 本專案內容由 AntiGravity 搭配 Gemini 3 Pro 模型生成。

📄 License

This project is licensed under the MIT License. 本專案採用 MIT 授權條款。

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages