2025 year in review ADR

README.md

@@ -21,6 +21,20 @@ For a complete list of features, see [SCREENSHOTS.md](SCREENSHOTS.md) and [CHANG
 
 ![Claude Owl Dashboard](screenshots/claude-owl-dashboard.png)
 
+### 🎄 2025 Year in Review
+
+Celebrate your year of AI-powered development! Claude Owl now includes a festive Year in Review feature that showcases your 2025 coding journey with Claude Code:
+
+- **📊 Beautiful Stats**: Token usage, costs, sessions, and activity patterns
+- **🏆 Achievement Badges**: Earn badges for milestones and coding habits
+- **🎯 Model Insights**: See your favorite Claude models and usage breakdown
+- **📈 Activity Analytics**: Peak coding months, longest streaks, and daily patterns
+- **🎁 Social Sharing**: Share your year with customizable stats for Twitter/X
+
+![Year in Review 2025](screenshots/year-in-review-2025-total-tokens.png)
+
+Available now through January 1, 2026!
+
 ## Installation
 
 ### Prerequisites

docs/index.html

@@ -170,13 +170,79 @@ <h4 class="text-yellow-300 font-semibold mb-2">Windows SmartScreen Warning</h4>
     </div>
   </section>
 
+  <!-- Year in Review Highlight Section -->
+  <section class="py-20 px-6 bg-gradient-to-br from-amber-900/20 via-red-900/20 to-slate-800/50">
+    <div class="container mx-auto max-w-6xl">
+      <div class="text-center mb-12">
+        <div class="inline-block bg-amber-500/20 border border-amber-500/50 rounded-full px-4 py-1 text-amber-300 text-sm font-semibold mb-4">
+          🎄 NEW FEATURE • Available through Jan 1, 2026
+        </div>
+        <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-amber-400 to-red-400 bg-clip-text text-transparent">
+          2025 Year in Review
+        </h2>
+        <p class="text-xl text-slate-300 max-w-2xl mx-auto">
+          Celebrate your year of AI-powered development with beautiful stats, achievement badges, and social sharing
+        </p>
+      </div>
+
+      <!-- Screenshot -->
+      <div class="rounded-2xl overflow-hidden border-2 border-amber-500/30 shadow-2xl mb-8">
+        <img
+          src="../screenshots/year-in-review-2025-total-tokens.png"
+          alt="Claude Owl Year in Review 2025"
+          class="w-full"
+        />
+      </div>
+
+      <!-- Features Grid -->
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        <div class="bg-slate-900/60 p-4 rounded-lg border border-amber-500/20">
+          <div class="text-2xl mb-2">📊</div>
+          <h4 class="font-semibold text-amber-300 mb-1">Beautiful Stats</h4>
+          <p class="text-sm text-slate-400">Token usage, costs, sessions, and activity patterns</p>
+        </div>
+        <div class="bg-slate-900/60 p-4 rounded-lg border border-amber-500/20">
+          <div class="text-2xl mb-2">🏆</div>
+          <h4 class="font-semibold text-amber-300 mb-1">Achievement Badges</h4>
+          <p class="text-sm text-slate-400">Earn 10 badges for coding milestones and habits</p>
+        </div>
+        <div class="bg-slate-900/60 p-4 rounded-lg border border-amber-500/20">
+          <div class="text-2xl mb-2">📈</div>
+          <h4 class="font-semibold text-amber-300 mb-1">Activity Analytics</h4>
+          <p class="text-sm text-slate-400">Peak months, longest streaks, daily patterns</p>
+        </div>
+        <div class="bg-slate-900/60 p-4 rounded-lg border border-amber-500/20">
+          <div class="text-2xl mb-2">🎁</div>
+          <h4 class="font-semibold text-amber-300 mb-1">Social Sharing</h4>
+          <p class="text-sm text-slate-400">Share your year on Twitter/X with one click</p>
+        </div>
+      </div>
+
+      <div class="text-center">
+        <a href="#download-section" class="inline-block bg-gradient-to-r from-amber-500 to-red-500 hover:from-amber-600 hover:to-red-600 text-white font-semibold py-3 px-8 rounded-lg transition transform hover:scale-105">
+          Download Claude Owl to See Your 2025 Year in Review
+        </a>
+      </div>
+    </div>
+  </section>
+
   <!-- Features Section -->
   <section id="features" class="py-20 px-6 bg-slate-800/50">
     <div class="container mx-auto">
       <h2 class="text-4xl font-bold text-center mb-4">Features</h2>
       <p class="text-center text-slate-400 mb-12">Everything you need to manage Claude Code visually</p>
 
       <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
+        <!-- Feature: Year in Review -->
+        <div class="bg-gradient-to-br from-amber-900/40 to-red-900/40 p-6 rounded-xl border-2 border-amber-500/50 hover:border-amber-400 transition relative overflow-hidden">
+          <div class="absolute top-0 right-0 text-xs bg-amber-500 text-white px-2 py-1 rounded-bl-lg font-semibold">NEW</div>
+          <div class="text-4xl mb-4">🎄</div>
+          <h3 class="text-xl font-semibold mb-2">2025 Year in Review</h3>
+          <p class="text-slate-400 text-sm">
+            Celebrate your AI-powered development year! View stats, earn badges, analyze activity patterns, and share your journey on social media. Available through Jan 1, 2026.
+          </p>
+        </div>
+
         <!-- Feature 1 -->
         <div class="bg-slate-900 p-6 rounded-xl border border-slate-700 hover:border-blue-500 transition">
           <div class="text-4xl mb-4">⚙️</div>

docs/screenshots.html

@@ -103,6 +103,7 @@ <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-400 to
       <div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
         <h2 class="text-xl font-semibold mb-4">Jump to Section</h2>
         <div class="grid md:grid-cols-3 gap-3 text-sm">
+          <a href="#year-review" class="text-amber-400 hover:underline font-semibold">🎄 2025 Year in Review</a>
           <a href="#dashboard" class="text-blue-400 hover:underline">🏠 Dashboard</a>
           <a href="#settings" class="text-blue-400 hover:underline">⚙️ Settings</a>
           <a href="#subagents" class="text-blue-400 hover:underline">🤖 Subagents</a>
@@ -118,6 +119,44 @@ <h2 class="text-xl font-semibold mb-4">Jump to Section</h2>
     </div>
   </section>
 
+  <!-- Year in Review -->
+  <section id="year-review" class="py-12 px-6 bg-gradient-to-br from-amber-900/20 to-red-900/20">
+    <div class="container mx-auto max-w-5xl">
+      <div class="flex items-center justify-between mb-2">
+        <h2 class="text-3xl font-bold flex items-center">
+          <span class="text-4xl mr-3">🎄</span> 2025 Year in Review
+        </h2>
+        <span class="bg-amber-500 text-white text-xs font-semibold px-3 py-1 rounded-full">NEW</span>
+      </div>
+      <p class="text-slate-400 mb-6">Celebrate your year of AI-powered development with beautiful stats, badges, and social sharing</p>
+
+      <div class="space-y-6">
+        <div>
+          <h3 class="text-xl font-semibold mb-3 text-amber-300">Year in Review Dashboard</h3>
+          <img src="https://raw.githubusercontent.com/antonbelev/claude-owl/main/screenshots/year-in-review-2025-total-tokens.png"
+               alt="2025 Year in Review"
+               class="screenshot-img w-full"
+               onclick="openModal(this.src, this.alt)">
+          <p class="text-sm text-slate-400 mt-2">
+            View your 2025 coding journey: token usage stats, AI spending, achievement badges, model insights, activity patterns, and social sharing. Features 9 interactive cards with snowfall animations. Available through January 1, 2026.
+          </p>
+        </div>
+
+        <div class="bg-amber-900/30 border border-amber-500/50 rounded-xl p-6">
+          <h4 class="font-semibold text-amber-300 mb-3">Key Features</h4>
+          <ul class="space-y-2 text-sm text-slate-300">
+            <li>📊 <strong>Beautiful Stats:</strong> Total tokens, costs, sessions, and daily activity patterns</li>
+            <li>🏆 <strong>10 Achievement Badges:</strong> Early Bird, Night Owl, Cache Master, Hot Streak, Million Club, and more</li>
+            <li>🎯 <strong>Model Insights:</strong> Favorite Claude model with personality, usage breakdown by tokens</li>
+            <li>📈 <strong>Activity Analytics:</strong> Peak month, peak day, longest coding streak, monthly charts</li>
+            <li>🎁 <strong>Social Sharing:</strong> Copy stats or tweet your year with one click (opens in default browser)</li>
+            <li>❄️ <strong>Festive UI:</strong> Animated snowflakes with accessibility support (respects prefers-reduced-motion)</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <!-- Dashboard -->
   <section id="dashboard" class="py-12 px-6 bg-slate-800/30">
     <div class="container mx-auto max-w-5xl">