From e1e00fedaf067e76cc2b435ea5d649888cff7fca Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Fri, 23 May 2025 11:26:01 -0400
Subject: [PATCH] Refactor mindmap and base templates for improved UI and
 functionality; enhance header, footer, and live download counter.

---
 templates/base.html    |  76 +++++++++----
 templates/mindmap.html | 243 ++++++++++++++++++++++++++++++++++++++---
 2 files changed, 280 insertions(+), 39 deletions(-)
diff --git a/templates/base.html b/templates/base.html
index d1c8f70..7754dbb 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -64,19 +64,19 @@
 </head>
 <body class="bg-gray-900 font-serif text-gray-100 selection:bg-primary-700 selection:text-white tufte dark-mode" id="tufte-body">
     <!-- Header -->
-    <header class="border-b border-gray-700 bg-gray-900/80 backdrop-blur-md sticky top-0 z-50">
-        <div class="max-w-4xl mx-auto px-6 py-8">
+    <header class="border-b border-gray-700 bg-gray-900/90 backdrop-blur-xl sticky top-0 z-50 shadow-lg">
+        <div class="max-w-6xl mx-auto px-6 py-8">
             <div class="flex flex-col space-y-4">
                 <!-- Main brand -->
                 <div class="flex items-center justify-between">
                     <div>
-                        <h1 class="text-4xl font-bold tracking-tight">
-                            <a href="/" class="text-gray-100 hover:text-primary-400 transition-colors duration-200 no-underline font-serif">
+                        <h1 class="text-5xl font-bold tracking-tight">
+                            <a href="/" class="text-gray-100 hover:text-primary-400 transition-colors duration-200 no-underline font-serif bg-gradient-to-r from-primary-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
                                 Kenneth Reitz
                             </a>
                         </h1>
                         <p class="text-xl text-gray-400 font-serif italic mt-2 et-book tracking-wide">
-                            Digital Vault & Blog
+                            Creator of <span class="text-primary-400 font-semibold">Requests</span> • Python Advocate • Making Complex Things Simple
                         </p>
                     </div>
                     
@@ -84,8 +84,11 @@
                     
                     <!-- Mobile-friendly navigation -->
                     <nav class="hidden md:flex space-x-6">
-                        <a href="/directory" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-colors duration-200 px-3 py-2 rounded-md hover:bg-gray-800/60">
-                            📁 Files
+                        <a href="/directory" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30 border border-transparent hover:border-primary-500/30">
+                            📁 Explore Files
+                        </a>
+                        <a href="https://github.com/psf/requests" target="_blank" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30 border border-transparent hover:border-primary-500/30">
+                            🌐 Requests
                         </a>
                     </nav>
                 </div>
@@ -94,9 +97,12 @@
                 <div class="flex md:hidden">
                     <!-- Mobile nav links -->
                     <nav class="flex space-x-4">
-                        <a href="/directory" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-colors duration-200 px-3 py-2 rounded-md hover:bg-gray-800/60">
+                        <a href="/directory" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30">
                             📁 Files
                         </a>
+                        <a href="https://github.com/psf/requests" target="_blank" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30">
+                            🌐 Requests
+                        </a>
                     </nav>
                 </div>
             </div>
@@ -126,25 +132,49 @@
     </main>
 
     <!-- Footer -->
-    <footer class="border-t border-gray-800/60 mt-16 bg-gray-900/60 backdrop-blur-sm">
-        <div class="max-w-4xl mx-auto px-6 py-12">
+    <footer class="border-t border-gray-800/60 mt-20 bg-gradient-to-t from-gray-900 to-gray-900/60 backdrop-blur-sm">
+        <div class="max-w-6xl mx-auto px-6 py-16">
             <div class="text-center">
-                <p class="text-sm text-gray-400">
-                    &copy; {{ current_year }} Kenneth Reitz. Built with elegant typography and thoughtful design.
-                </p>
-                <div class="mt-4 flex justify-center space-x-6">
-                    <a href="https://twitter.com/kennethreitz" class="text-gray-500 hover:text-primary-400 transition-colors duration-200">
-                        <span class="sr-only">Twitter</span>
-                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"/>
-                        </svg>
-                    </a>
-                    <a href="https://github.com/kennethreitz" class="text-gray-500 hover:text-primary-400 transition-colors duration-200">
-                        <span class="sr-only">GitHub</span>
-                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                <!-- Impact Statement -->
+                <div class="mb-8">
+                    <p class="text-lg text-gray-300 font-medium mb-2">
+                        Empowering developers worldwide with elegant, human-centered code
+                    </p>
+                    <p class="text-sm text-gray-500">
+                        16M downloads daily • Touching every Python project on Earth
+                    </p>
+                </div>
+                
+                <!-- Social Links -->
+                <div class="flex justify-center space-x-8 mb-8">
+                    <a href="https://github.com/kennethreitz" target="_blank" class="text-gray-400 hover:text-primary-400 transition-all duration-300 flex items-center space-x-2 group">
+                        <svg class="h-6 w-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20">
                             <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/>
                         </svg>
+                        <span class="hidden sm:inline font-medium">GitHub</span>
                     </a>
+                    <a href="https://twitter.com/kennethreitz" target="_blank" class="text-gray-400 hover:text-primary-400 transition-all duration-300 flex items-center space-x-2 group">
+                        <svg class="h-6 w-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"/>
+                        </svg>
+                        <span class="hidden sm:inline font-medium">Twitter</span>
+                    </a>
+                    <a href="https://github.com/psf/requests" target="_blank" class="text-gray-400 hover:text-primary-400 transition-all duration-300 flex items-center space-x-2 group">
+                        <svg class="h-6 w-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M10 2L3 7v11h14V7l-7-5z"/>
+                        </svg>
+                        <span class="hidden sm:inline font-medium">Requests</span>
+                    </a>
+                </div>
+                
+                <!-- Copyright -->
+                <div class="border-t border-gray-800/40 pt-8">
+                    <p class="text-sm text-gray-500">
+                        &copy; {{ current_year }} Kenneth Reitz. Crafted with passion for beautiful, human-centered design.
+                    </p>
+                    <p class="text-xs text-gray-600 mt-2">
+                        "Beautiful is better than ugly. Simple is better than complex."
+                    </p>
                 </div>
             </div>
         </div>
diff --git a/templates/mindmap.html b/templates/mindmap.html
index b30496e..6f21b88 100644
--- a/templates/mindmap.html
+++ b/templates/mindmap.html
@@ -1,6 +1,93 @@
-{% extends "base.html" %}
+<!DOCTYPE html>
+<html lang="en" class="antialiased">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kenneth Reitz - Digital Mind Map</title>
+    
+    <!-- Load Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    
+    <!-- Load Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            DEFAULT: '#4e3979',
+                            50: '#f8f7fd',
+                            100: '#f0eef9',
+                            200: '#e3e0f4',
+                            300: '#d0c8ec',
+                            400: '#b5a7e0',
+                            500: '#9b86d3',
+                            600: '#8265c4',
+                            700: '#6f52b0',
+                            800: '#5c4394',
+                            900: '#4e3979',
+                            950: '#3a2b5c',
+                        }
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+                        'serif': ['Crimson Text', 'Charter', 'Georgia', 'Times New Roman', 'serif'],
+                        'mono': ['JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'monospace'],
+                    }
+                }
+            }
+        }
+    </script>
+
+</head>
+<body class="bg-gray-900 font-serif text-gray-100 selection:bg-primary-700 selection:text-white">
+    <!-- Header -->
+    <header class="border-b border-gray-700 bg-gray-900/90 backdrop-blur-xl sticky top-0 z-50 shadow-lg">
+        <div class="max-w-6xl mx-auto px-6 py-8">
+            <div class="flex flex-col space-y-4">
+                <!-- Main brand -->
+                <div class="flex items-center justify-between">
+                    <div>
+                        <h1 class="text-5xl font-bold tracking-tight">
+                            <a href="/" class="text-gray-100 hover:text-primary-400 transition-colors duration-200 no-underline font-serif bg-gradient-to-r from-primary-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+                                Kenneth Reitz
+                            </a>
+                        </h1>
+                        <p class="text-xl text-gray-400 font-serif italic mt-2 tracking-wide">
+                            Creator of <span class="text-primary-400 font-semibold">Requests</span> • Python Advocate • Making Complex Things Simple
+                        </p>
+                    </div>
+                    
+                    <!-- Mobile-friendly navigation -->
+                    <nav class="hidden md:flex space-x-6">
+                        <a href="/directory" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30 border border-transparent hover:border-primary-500/30">
+                            📁 Explore Files
+                        </a>
+                        <a href="https://github.com/psf/requests" target="_blank" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30 border border-transparent hover:border-primary-500/30">
+                            🌐 Requests
+                        </a>
+                    </nav>
+                </div>
+                
+                <!-- Mobile navigation -->
+                <div class="flex md:hidden">
+                    <!-- Mobile nav links -->
+                    <nav class="flex space-x-4">
+                        <a href="/directory" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30">
+                            📁 Files
+                        </a>
+                        <a href="https://github.com/psf/requests" target="_blank" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30">
+                            🌐 Requests
+                        </a>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </header>
 
-{% block extra_head %}
 <style>
     /* Kenneth Reitz Brand Colors & Variables */
     :root {
@@ -70,6 +157,48 @@
         font-weight: 700;
         color: var(--kr-primary);
         display: block;
+        transition: all 0.3s ease;
+    }
+
+    #live-downloads {
+        background: linear-gradient(135deg, var(--kr-primary), var(--kr-purple));
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        position: relative;
+    }
+
+    #live-downloads::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
+        border-radius: 8px;
+        animation: pulse-bg 3s ease-in-out infinite;
+        z-index: -1;
+    }
+
+    @keyframes pulse-bg {
+        0%, 100% { opacity: 0.3; transform: scale(1); }
+        50% { opacity: 0.7; transform: scale(1.05); }
+    }
+
+    .live-indicator {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        background: #10b981;
+        border-radius: 50%;
+        margin-left: 8px;
+        animation: live-pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes live-pulse {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.6; transform: scale(1.2); }
     }
 
     .stat-label {
@@ -550,30 +679,28 @@
         }
     }
 </style>
-{% endblock %}
 
-{% block content %}
 <!-- Hero Section -->
 <section class="hero-section">
     <div class="max-w-6xl mx-auto px-6">
         <h1 class="hero-title">Kenneth Reitz</h1>
         <p class="hero-subtitle">
-            Creator of <strong>requests</strong> • Python Advocate • Making Complex Things Simple & Beautiful
+            Creator of <strong>Requests</strong> • Python Advocate • Making Complex Things Simple & Beautiful
         </p>
         
         <div class="hero-stats">
             <div class="stat-item">
-                <span class="stat-number">500M+</span>
-                <span class="stat-label">Downloads</span>
+                <span class="stat-number" id="live-downloads">0</span>
+                <span class="stat-label">Live Downloads Today <span class="live-indicator"></span></span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-number">16M</span>
+                <span class="stat-label">Daily Average</span>
             </div>
             <div class="stat-item">
                 <span class="stat-number">51K+</span>
                 <span class="stat-label">GitHub Stars</span>
             </div>
-            <div class="stat-item">
-                <span class="stat-number">15+</span>
-                <span class="stat-label">Years Contributing</span>
-            </div>
             <div class="stat-item">
                 <span class="stat-number">∞</span>
                 <span class="stat-label">Impact</span>
@@ -591,11 +718,11 @@
         <div class="featured-grid">
             <div class="project-card">
                 <div class="project-icon">🌐</div>
-                <h3 class="project-title">requests</h3>
+                <h3 class="project-title">Requests</h3>
                 <p class="project-desc">HTTP for Humans. The most elegant Python library ever created, downloaded by every Python developer on Earth.</p>
                 <div class="project-stats">
                     <span>⭐ 51k stars</span>
-                    <span>📦 500M+ downloads</span>
+                    <span>📦 16M daily downloads</span>
                     <span>🔥 Industry standard</span>
                 </div>
             </div>
@@ -707,9 +834,55 @@
         </div>
     </div>
 </section>
-{% endblock %}
+    <!-- Footer -->
+    <footer class="border-t border-gray-800/60 mt-20 bg-gradient-to-t from-gray-900 to-gray-900/60 backdrop-blur-sm">
+        <div class="max-w-6xl mx-auto px-6 py-16">
+            <div class="text-center">
+                <!-- Impact Statement -->
+                <div class="mb-8">
+                    <p class="text-lg text-gray-300 font-medium mb-2">
+                        Empowering developers worldwide with elegant, human-centered code
+                    </p>
+                    <p class="text-sm text-gray-500">
+                        16M downloads daily • Touching every Python project on Earth
+                    </p>
+                </div>
+                
+                <!-- Social Links -->
+                <div class="flex justify-center space-x-8 mb-8">
+                    <a href="https://github.com/kennethreitz" target="_blank" class="text-gray-400 hover:text-primary-400 transition-all duration-300 flex items-center space-x-2 group">
+                        <svg class="h-6 w-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/>
+                        </svg>
+                        <span class="hidden sm:inline font-medium">GitHub</span>
+                    </a>
+                    <a href="https://twitter.com/kennethreitz" target="_blank" class="text-gray-400 hover:text-primary-400 transition-all duration-300 flex items-center space-x-2 group">
+                        <svg class="h-6 w-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"/>
+                        </svg>
+                        <span class="hidden sm:inline font-medium">Twitter</span>
+                    </a>
+                    <a href="https://github.com/psf/requests" target="_blank" class="text-gray-400 hover:text-primary-400 transition-all duration-300 flex items-center space-x-2 group">
+                        <svg class="h-6 w-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M10 2L3 7v11h14V7l-7-5z"/>
+                        </svg>
+                        <span class="hidden sm:inline font-medium">Requests</span>
+                    </a>
+                </div>
+                
+                <!-- Copyright -->
+                <div class="border-t border-gray-800/40 pt-8">
+                    <p class="text-sm text-gray-500">
+                        &copy; 2024 Kenneth Reitz. Crafted with passion for beautiful, human-centered design.
+                    </p>
+                    <p class="text-xs text-gray-600 mt-2">
+                        "Beautiful is better than ugly. Simple is better than complex."
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
 
-{% block extra_scripts %}
 <script src="https://d3js.org/d3.v7.min.js"></script>
 <script>
 class ObsidianMindmap {
@@ -1047,8 +1220,46 @@ class ObsidianMindmap {
     }
 }
 
+// Real-time download counter
+function initDownloadCounter() {
+    const downloadsPerSecond = 16000000 / (24 * 60 * 60); // 16M per day
+    const startOfDay = new Date();
+    startOfDay.setHours(0, 0, 0, 0);
+    const now = new Date();
+    const secondsSinceStartOfDay = (now - startOfDay) / 1000;
+    
+    let currentDownloads = Math.floor(secondsSinceStartOfDay * downloadsPerSecond);
+    
+    const counter = document.getElementById('live-downloads');
+    
+    function updateCounter() {
+        currentDownloads += downloadsPerSecond;
+        const displayNumber = Math.floor(currentDownloads);
+        
+        // Format with commas
+        counter.textContent = displayNumber.toLocaleString();
+        
+        // Add a subtle glow effect when updating
+        counter.style.transform = 'scale(1.05)';
+        counter.style.filter = 'brightness(1.2)';
+        setTimeout(() => {
+            counter.style.transform = 'scale(1)';
+            counter.style.filter = 'brightness(1)';
+        }, 200);
+    }
+    
+    // Initial display
+    updateCounter();
+    
+    // Update every second
+    setInterval(updateCounter, 1000);
+}
+
 // Initialize the mindmap when the page loads
 document.addEventListener('DOMContentLoaded', () => {
     new ObsidianMindmap();
+    initDownloadCounter();
 });
-</script>
\ No newline at end of file
+</script>
+</body>
+</html>
\ No newline at end of file
