Template:Theme-HJ: Difference between revisions

From HUIJIA FUN
← Older editNewer edit →
VisualWikitext
Beautification
m Beautification
Line 259: Line 259:
<script>
<script>
/**
/**
  * HUIJIA FUN - ADVANCED UI ENHANCEMENTS (v4.0)
  * HUIJIA FUN - UI ENHANCEMENTS (v4.1)
  * Features: Reading Progress Bar, Code Copy Buttons, Smooth Scroll Reveal, and Dynamic Greetings.
* Fix: Moved Reading Progress Bar to bottom to prevent header overlap.
* Documentation: Designed for Timeless Skin / Forest Green Aesthetic.
  * Features: Bottom Progress Bar, Code Copy Buttons, Smooth Reveal.
  */
  */


Line 267: Line 267:
     "use strict";
     "use strict";


    // 1. INJECT REQUIRED STYLES FOR SCRIPTS
     const injectStyles = () => {
     const injectStyles = () => {
         const style = document.createElement('style');
         const style = document.createElement('style');
         style.innerHTML = `
         style.innerHTML = `
             /* Reading Progress Bar */
             /* Reading Progress Bar - Moved to Bottom */
             #reading-progress-container {
             #reading-progress-container {
                 position: fixed;
                 position: fixed;
                 top: 0;
                 bottom: 0; /* Changed from top: 0 */
                 left: 0;
                 left: 0;
                 width: 100%;
                 width: 100%;
                 height: 4px;
                 height: 5px;
                 background: transparent;
                 background: rgba(255, 255, 255, 0.2);
                 z-index: 10001;
                backdrop-filter: blur(2px);
                 z-index: 9999;
                border-top: 1px solid rgba(0,0,0,0.05);
             }
             }
             #reading-progress-bar {
             #reading-progress-bar {
Line 285: Line 286:
                 width: 0%;
                 width: 0%;
                 background: var(--mw-primary, #025F32);
                 background: var(--mw-primary, #025F32);
                 transition: width 0.1s ease-out;
                box-shadow: 0 0 10px var(--mw-accent, #227F52);
                 transition: width 0.15s ease-out;
             }
             }


             /* Copy Button for Code Blocks */
             /* Code Block Copy Button Fix */
             .code-copy-btn {
             .code-copy-btn {
                 position: absolute;
                 position: absolute;
                 top: 8px;
                 top: 10px;
                 right: 8px;
                 right: 10px;
                 background: var(--mw-primary, #025F32);
                 background: var(--mw-primary, #025F32);
                 color: white;
                 color: white;
                 border: none;
                 border: none;
                 border-radius: 4px;
                 border-radius: 6px;
                 padding: 4px 8px;
                 padding: 5px 10px;
                 font-size: 11px;
                 font-size: 11px;
                 font-family: 'Montserrat', sans-serif;
                 font-family: var(--font-heading);
                font-weight: bold;
                 cursor: pointer;
                 cursor: pointer;
                 opacity: 0;
                 opacity: 0;
                 transition: opacity 0.3s ease, background 0.2s ease;
                 transition: all 0.2s ease;
                 z-index: 10;
                 z-index: 50;
             }
             }
             pre:hover .code-copy-btn {
             pre:hover .code-copy-btn {
Line 310: Line 313:
             .code-copy-btn:hover {
             .code-copy-btn:hover {
                 background: var(--mw-accent, #227F52);
                 background: var(--mw-accent, #227F52);
                transform: scale(1.05);
             }
             }
             pre { position: relative; }
             pre { position: relative; overflow: visible !important; }


             /* Smooth Reveal Animation Class */
             /* Entrance Animations */
             .reveal-on-scroll {
             .reveal-on-scroll {
                 opacity: 0;
                 opacity: 0;
                 transform: translateY(20px);
                 transform: translateY(15px);
                 transition: all 0.8s ease-out;
                 transition: opacity 0.6s ease-out, transform 0.6s ease-out;
             }
             }
             .reveal-on-scroll.is-visible {
             .reveal-on-scroll.is-visible {
                 opacity: 1;
                 opacity: 1;
                 transform: translateY(0);
                 transform: translateY(0);
            }
            /* Greeting Toast */
            #lore-greeting {
                position: fixed;
                bottom: 20px;
                left: 20px;
                background: var(--mw-primary, #025F32);
                color: white;
                padding: 10px 20px;
                border-radius: 30px;
                font-family: 'Montserrat', sans-serif;
                font-size: 0.9em;
                box-shadow: 0 4px 15px rgba(0,0,0,0.2);
                z-index: 10000;
                display: none;
                animation: fadeInUp 0.5s ease forwards;
            }
            @keyframes fadeInUp {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
             }
             }
         `;
         `;
Line 348: Line 331:
     };
     };


    // 2. READING PROGRESS BAR LOGIC
     const initProgressBar = () => {
     const initProgressBar = () => {
         const container = document.createElement('div');
         const container = document.createElement('div');
Line 358: Line 340:


         window.addEventListener('scroll', () => {
         window.addEventListener('scroll', () => {
             const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
             const winScroll = window.pageYOffset || document.documentElement.scrollTop;
             const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
             const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
             const scrolled = (winScroll / height) * 100;
             const scrolled = (winScroll / height) * 100;
Line 365: Line 347:
     };
     };


    // 3. CODE BLOCK COPY BUTTONS
     const initCopyButtons = () => {
     const initCopyButtons = () => {
         const codeBlocks = document.querySelectorAll('pre');
         const codeBlocks = document.querySelectorAll('pre');
         codeBlocks.forEach((block) => {
         codeBlocks.forEach((block) => {
            if (block.querySelector('.code-copy-btn')) return; // Prevent duplicates
             const btn = document.createElement('button');
             const btn = document.createElement('button');
             btn.className = 'code-copy-btn';
             btn.className = 'code-copy-btn';
Line 384: Line 366:
     };
     };


    // 4. SMOOTH SCROLL REVEAL (INTERSECTION OBSERVER)
     const initScrollReveal = () => {
     const initScrollReveal = () => {
        const observerOptions = { threshold: 0.1 };
         const observer = new IntersectionObserver((entries) => {
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
             entries.forEach(entry => {
Line 393: Line 373:
                 }
                 }
             });
             });
         }, observerOptions);
         }, { threshold: 0.05 });


        // Apply to headings and images for a "Cool" entrance
         const items = document.querySelectorAll('#mw-content h2, #mw-content h3, .thumbinner, table.wikitable');
         const targets = document.querySelectorAll('#mw-content h2, #mw-content h3, .thumbinner, table.wikitable');
         items.forEach(item => {
         targets.forEach(target => {
             item.classList.add('reveal-on-scroll');
             target.classList.add('reveal-on-scroll');
             observer.observe(item);
             observer.observe(target);
         });
         });
     };
     };


     // 5. DYNAMIC LORE GREETING
     // Execution
     const initGreeting = () => {
     document.addEventListener("DOMContentLoaded", () => {
        const greetingDiv = document.createElement('div');
        greetingDiv.id = 'lore-greeting';
        document.body.appendChild(greetingDiv);
 
        const hours = new Date().getHours();
        let msg = "Welcome to HUIJIA FUN";
        if (hours < 12) msg = "Good Morning, Archivist";
        else if (hours < 18) msg = "Good Afternoon, Seeker";
        else msg = "Good Evening, Traveler of the Apocalypse";
 
        greetingDiv.innerText = msg;
        greetingDiv.style.display = 'block';
 
        // Auto-hide after 5 seconds
        setTimeout(() => {
            greetingDiv.style.animation = 'fadeOutDown 0.5s ease forwards';
            setTimeout(() => greetingDiv.remove(), 500);
        }, 5000);
    };
 
    // RUN ALL INITIALIZATIONS
    document.addEventListener("DOMContentLoaded", function() {
         injectStyles();
         injectStyles();
         initProgressBar();
         initProgressBar();
         initCopyButtons();
         initCopyButtons();
         initScrollReveal();
         initScrollReveal();
        initGreeting();
       
        // Bonus: Smooth scroll for Table of Contents links
        document.querySelectorAll('.toc a').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 20,
                        behavior: 'smooth'
                    });
                }
            });
        });
     });
     });
})();
})();
</script>
</script>

Revision as of 00:33, 31 March 2026

Description

Origin

Author: PlurimodSU

Note

To use this theme on a page, simply add the following code directly to the page's source code: 

{{Theme-HJ}}
Retrieved from "https://en.huijia.fun/index.php?title=Template:Theme-HJ&oldid=77"