Template:Theme-HJ: Difference between revisions

From HUIJIA FUN
← Older editNewer edit →
VisualWikitext
m Beautification
Beautification
Line 59: Line 59:


#p-logo img {
#p-logo img {
     border: 1px solid var(--mw-border);
     /* border: 1px solid var(--mw-border);
    border-radius: 8px;
     background: #fff;
     background: #fff;
     padding: 2px;
     padding: 2px; */
    border-radius: 4px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.06);
     box-shadow: 0 4px 12px rgba(0,0,0,0.06);
     transition: transform 0.2s ease;
     transition: transform 0.2s ease;
Line 257: Line 257:
}
}
</style>
</style>
<script>
/**
* HUIJIA FUN - ADVANCED UI ENHANCEMENTS (v4.0)
* Features: Reading Progress Bar, Code Copy Buttons, Smooth Scroll Reveal, and Dynamic Greetings.
* Documentation: Designed for Timeless Skin / Forest Green Aesthetic.
*/
(function() {
    "use strict";
    // 1. INJECT REQUIRED STYLES FOR SCRIPTS
    const injectStyles = () => {
        const style = document.createElement('style');
        style.innerHTML = `
            /* Reading Progress Bar */
            #reading-progress-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: transparent;
                z-index: 10001;
            }
            #reading-progress-bar {
                height: 100%;
                width: 0%;
                background: var(--mw-primary, #025F32);
                transition: width 0.1s ease-out;
            }
            /* Copy Button for Code Blocks */
            .code-copy-btn {
                position: absolute;
                top: 8px;
                right: 8px;
                background: var(--mw-primary, #025F32);
                color: white;
                border: none;
                border-radius: 4px;
                padding: 4px 8px;
                font-size: 11px;
                font-family: 'Montserrat', sans-serif;
                cursor: pointer;
                opacity: 0;
                transition: opacity 0.3s ease, background 0.2s ease;
                z-index: 10;
            }
            pre:hover .code-copy-btn {
                opacity: 1;
            }
            .code-copy-btn:hover {
                background: var(--mw-accent, #227F52);
            }
            pre { position: relative; }
            /* Smooth Reveal Animation Class */
            .reveal-on-scroll {
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.8s ease-out;
            }
            .reveal-on-scroll.is-visible {
                opacity: 1;
                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); }
            }
        `;
        document.head.appendChild(style);
    };
    // 2. READING PROGRESS BAR LOGIC
    const initProgressBar = () => {
        const container = document.createElement('div');
        container.id = 'reading-progress-container';
        const bar = document.createElement('div');
        bar.id = 'reading-progress-bar';
        container.appendChild(bar);
        document.body.appendChild(container);
        window.addEventListener('scroll', () => {
            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (winScroll / height) * 100;
            bar.style.width = scrolled + "%";
        });
    };
    // 3. CODE BLOCK COPY BUTTONS
    const initCopyButtons = () => {
        const codeBlocks = document.querySelectorAll('pre');
        codeBlocks.forEach((block) => {
            const btn = document.createElement('button');
            btn.className = 'code-copy-btn';
            btn.innerText = 'COPY';
           
            btn.addEventListener('click', () => {
                const text = block.innerText.replace('COPY', '').trim();
                navigator.clipboard.writeText(text).then(() => {
                    btn.innerText = 'COPIED!';
                    setTimeout(() => btn.innerText = 'COPY', 2000);
                });
            });
            block.appendChild(btn);
        });
    };
    // 4. SMOOTH SCROLL REVEAL (INTERSECTION OBSERVER)
    const initScrollReveal = () => {
        const observerOptions = { threshold: 0.1 };
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                }
            });
        }, observerOptions);
        // Apply to headings and images for a "Cool" entrance
        const targets = document.querySelectorAll('#mw-content h2, #mw-content h3, .thumbinner, table.wikitable');
        targets.forEach(target => {
            target.classList.add('reveal-on-scroll');
            observer.observe(target);
        });
    };
    // 5. DYNAMIC LORE GREETING
    const initGreeting = () => {
        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();
        initProgressBar();
        initCopyButtons();
        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>
</html></includeonly><noinclude>{{Theme-HJ}}
</html></includeonly><noinclude>{{Theme-HJ}}
==Description==
==Description==

Revision as of 00:32, 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=76"