Add brutalism template with bold industrial style

Features high-contrast colors, thick borders, hard shadows, monospace typography, and no rounded corners. Uses custom background placeholder that shows theme color when no image is specified. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add scroll-to-top button to all templates
2026-02-26 03:18:13 -04:00 · 2026-02-26 03:09:44 -04:00 · 2026-02-26 03:02:58 -04:00
5 changed files with 2563 additions and 0 deletions
--- a/brutalism.html
+++ b/brutalism.html
--- a/generate_report.py
+++ b/generate_report.py
@@ -98,8 +98,10 @@ def generate_report(db_path: str, output_path: str, top_n: int, assets_dir: str,
    # Load background image (custom or default stripes)
    if bg_image_path and Path(bg_image_path).exists():
        background_image = load_asset_as_base64(Path(bg_image_path), "image/png")
+        background_image_custom = f"url('{background_image}')"
    else:
        background_image = load_asset_as_base64(assets_path / "Others" / "stripes.png", "image/png")
+        background_image_custom = "none"  # For templates that prefer no default background

    # Load fonts
    font_charcoal = load_asset_as_base64(assets_path / "Charcoal.ttf", "font/truetype")
@@ -131,6 +133,7 @@ def generate_report(db_path: str, output_path: str, top_n: int, assets_dir: str,
    html = html.replace("__FONT_CHARCOAL__", font_charcoal)
    html = html.replace("__FONT_MONACO__", font_monaco)
    html = html.replace("__BACKGROUND_IMAGE__", background_image)
+    html = html.replace("__BACKGROUND_IMAGE_CUSTOM__", background_image_custom)
    html = html.replace("__TITLEBAR_BG__", titlebar_bg)
    html = html.replace("__TITLE_STRIPES__", title_stripes)
    html = html.replace("__CLOSE_BTN__", close_btn)
--- a/glassmorphism.html
+++ b/glassmorphism.html
@@ -513,9 +513,68 @@
                font-size: 16px;
            }
        }
+
+        /* Scroll to Top Button */
+        .scroll-top {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 1000;
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            border: 1px solid var(--border-color);
+            background: var(--bg-primary);
+            backdrop-filter: blur(var(--glass-blur));
+            -webkit-backdrop-filter: blur(var(--glass-blur));
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 8px 32px var(--shadow-color);
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+
+        .scroll-top.visible {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .scroll-top:hover {
+            transform: scale(1.1);
+            background: var(--bg-secondary);
+        }
+
+        .scroll-top-arrow {
+            width: 0;
+            height: 0;
+            border-left: 8px solid transparent;
+            border-right: 8px solid transparent;
+            border-bottom: 10px solid var(--text-primary);
+        }
+
+        @media (max-width: 600px) {
+            .scroll-top {
+                width: 40px;
+                height: 40px;
+            }
+
+            .scroll-top-arrow {
+                border-left-width: 6px;
+                border-right-width: 6px;
+                border-bottom-width: 8px;
+            }
+        }
    </style>
 </head>
 <body>
+    <!-- Scroll to Top Button -->
+    <button class="scroll-top" id="scroll-top" title="Scroll to top">
+        <div class="scroll-top-arrow"></div>
+    </button>
+
    <!-- Theme Toggle Button -->
    <button class="theme-toggle" id="theme-toggle" title="Toggle theme">
        <span class="icon" id="theme-icon"></span>
@@ -1074,6 +1133,27 @@
                document.getElementById('tab-' + tabId).classList.add('active');
            });
        });
+
+        // Scroll to top button
+        const scrollTopBtn = document.getElementById('scroll-top');
+
+        function updateScrollTopVisibility() {
+            if (window.scrollY > 100) {
+                scrollTopBtn.classList.add('visible');
+            } else {
+                scrollTopBtn.classList.remove('visible');
+            }
+        }
+
+        window.addEventListener('scroll', updateScrollTopVisibility);
+        updateScrollTopVisibility();
+
+        scrollTopBtn.addEventListener('click', () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
    </script>
 </body>
 </html>
--- a/neumorphism.html
+++ b/neumorphism.html
--- a/platinum.html
+++ b/platinum.html
@@ -452,9 +452,57 @@
            scrollbar-width: auto;
            scrollbar-color: #DDDDDD #CCCCCC;
        }
+
+        /* Scroll to Top Button */
+        .scroll-top {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 1000;
+            width: 32px;
+            height: 32px;
+            background: var(--mac-window-bg);
+            border: 1px solid;
+            border-color: var(--mac-border-light) var(--mac-border-dark) var(--mac-border-dark) var(--mac-border-light);
+            box-shadow: inset -1px -1px 0 var(--mac-border-dark), inset 1px 1px 0 var(--mac-border-light);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+
+        .scroll-top.visible {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .scroll-top:hover {
+            background: #EEEEEE;
+        }
+
+        .scroll-top:active {
+            border-color: var(--mac-border-dark) var(--mac-border-light) var(--mac-border-light) var(--mac-border-dark);
+            box-shadow: inset 1px 1px 0 var(--mac-border-dark), inset -1px -1px 0 var(--mac-border-light);
+        }
+
+        .scroll-top-arrow {
+            width: 0;
+            height: 0;
+            border-left: 6px solid transparent;
+            border-right: 6px solid transparent;
+            border-bottom: 8px solid var(--mac-text);
+        }
    </style>
 </head>
 <body>
+    <!-- Scroll to Top Button -->
+    <button class="scroll-top" id="scroll-top" title="Scroll to top">
+        <div class="scroll-top-arrow"></div>
+    </button>
+
    <div class="window">
        <div class="window-titlebar">
            <div class="window-close"></div>
@@ -931,6 +979,27 @@
                document.getElementById('tab-' + tabId).classList.add('active');
            });
        });
+
+        // Scroll to top button
+        const scrollTopBtn = document.getElementById('scroll-top');
+
+        function updateScrollTopVisibility() {
+            if (window.scrollY > 100) {
+                scrollTopBtn.classList.add('visible');
+            } else {
+                scrollTopBtn.classList.remove('visible');
+            }
+        }
+
+        window.addEventListener('scroll', updateScrollTopVisibility);
+        updateScrollTopVisibility();
+
+        scrollTopBtn.addEventListener('click', () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
    </script>
 </body>
 </html>