Year End Countdown - VS Code Extension (COMPLETE VERSION)
🎉 Complete version with ALL 365 time quotes!
✨ Features
🎨 Beautiful Colorful Webview
- Animated purple/pink/blue gradient background
- Large gold countdown numbers
- Real-time updates every second
💬 365 Daily Quotes
- All 365 motivational time quotes included!
- Different quote each day of the year
- Shows in BOTH TreeView sidebar AND Webview panel
- Quote rotates automatically based on day of year (1-365)
📊 Live Countdown Display
- Days, Hours, Minutes, Seconds
- Total hours and minutes remaining
- Year progress percentage with visual bar
- Live countdown in Activity Bar
- Click calendar icon to see:
- Target year
- Days/Hours/Minutes/Seconds countdown
- Current day's motivational quote
- Year progress percentage
📍 Status Bar Integration
- Clickable countdown in bottom-right corner
- Opens colorful webview panel when clicked
- Configurable format (days-hours, days-only, full)
🚀 Installation
# 1. Extract ZIP
cd year-end-countdown-vscode
# 2. Install dependencies
npm install
# 3. Compile TypeScript
npm run compile
# 4. Package extension
npm install -g @vscode/vsce
vsce package
# 5. Install in VS Code
# Press Ctrl+Shift+P
# Type: "Extensions: Install from VSIX"
# Select the generated .vsix file
# 6. Reload VS Code
# Press Ctrl+Shift+P
# Type: "Developer: Reload Window"
📖 Usage
Open Colorful Webview:
- Method 1 (Easiest): Click status bar countdown (bottom-right: "⏰ 365d 12h")
- Method 2: Press
Ctrl+Shift+P → "Show Year Countdown Panel"
- Method 3: Click calendar icon in Activity Bar (left sidebar)
View Quote in TreeView:
- Click calendar icon in Activity Bar
- See "💬 Quote X/365" item
- Hover to read full quote with author
- Click gear icon in TreeView toolbar
- OR:
Ctrl+Shift+P → "Configure Target Year"
- Enter year (2025-2100)
🎯 Settings
Open VS Code settings (Ctrl+,) and search for "Year Countdown":
{
"yearCountdown.targetYear": 2026,
"yearCountdown.customTitle": "Year End Countdown",
"yearCountdown.showInStatusBar": true,
"yearCountdown.showQuotes": true,
"yearCountdown.statusBarFormat": "days-hours"
}
💡 Quote Feature Details
How Quotes Rotate:
- Each day of the year (1-365) shows a specific quote
- Quote #1 on Day 1, Quote #2 on Day 2, etc.
- After 365 days, cycle repeats
- Quote changes automatically at midnight
Where Quotes Appear:
- Webview Panel: Large quote display with author and type
- TreeView Sidebar: "💬 Quote X/365" item (hover for full text)
Quote Categories Included:
- Classic Time Wisdom Quotes
- Motivational Action Quotes
- Present Moment Quotes
- Philosophical Time Quotes
- Productivity and Success Quotes
- Decision and Priority Quotes
- Life and Purpose Quotes
- And 20+ more categories!
🔧 Technical Details
- Total Quotes: 365
- Quote Storage: Embedded in extension (no external files)
- Update Frequency: Every 1 second
- No Internet Required: All quotes bundled
- Lightweight: ~144KB extension.ts file
📝 Version History
v2.0.0 (COMPLETE)
- ✅ All 365 quotes embedded
- ✅ Quotes in TreeView AND Webview
- ✅ Daily quote rotation
- ✅ Beautiful gradient colors
- ✅ Real-time countdown
- ✅ Year progress tracking
- ✅ Status bar integration
🎁 What You Get
Visual Design:
- 🎨 Animated gradient background (purple → pink → blue)
- 🌟 Gold gradient year number (2026)
- 💬 Dark translucent quote box
- 🔢 Four countdown boxes (Days, Hours, Minutes, Seconds)
- 📊 Three stat boxes with progress bar
Functionality:
- ⏰ Live updates every second
- 💬 Daily motivational quotes
- 📍 Clickable status bar
- 🌳 Sidebar TreeView
- ⚙️ Fully configurable
Enjoy your countdown with 365 motivational quotes! 🎉⏰
| |
