Ngrok-github-coder

index.markdown

<div class="main-content">
    <!-- Base64 Encoding Section -->
    <div class="encoding-section">
        <h2 class="section-title">
            <span class="icon">📋</span>
            Base64 Encoding
        </h2>
        <div class="two-column">
            <div>
                <div class="input-group">
                    <label for="base64Input">Enter your text:</label>
                    <input type="text" id="base64Input" class="input-field" placeholder="Example: Hello World! 🌍" value="Hello World! 🌍">
                </div>
                <button class="btn" onclick="encodeBase64()">Encode to Base64</button>
                <button class="btn btn-secondary" onclick="decodeBase64()">Decode from Base64</button>
            </div>
            <div>
                <div class="input-group">
                    <label>Base64 Result: 
                        <button class="btn copy-btn" onclick="copyToClipboard('base64Output')">Copy</button>
                        <span id="base64-success" class="success-message">Copied!</span>
                    </label>
                    <textarea id="base64Output" class="input-field output-field" readonly></textarea>
                </div>
            </div>
        </div>
        <div class="example-box">
            <strong>Use Cases:</strong> Email attachments, API data transmission, embedding images in HTML/CSS, storing binary data in JSON
        </div>
    </div>

    <!-- URL Encoding Section -->
    <div class="encoding-section">
        <h2 class="section-title">
            <span class="icon">🌐</span>
            URL Encoding
        </h2>
        <div class="two-column">
            <div>
                <div class="input-group">
                    <label for="urlInput">Enter URL text:</label>
                    <input type="text" id="urlInput" class="input-field" placeholder="Example: My Profile & Settings" value="My Profile & Settings">
                </div>
                <button class="btn" onclick="encodeURL()">URL Encode</button>
                <button class="btn btn-secondary" onclick="decodeURL()">URL Decode</button>
            </div>
            <div>
                <div class="input-group">
                    <label>URL Encoded Result:
                        <button class="btn copy-btn" onclick="copyToClipboard('urlOutput')">Copy</button>
                        <span id="url-success" class="success-message">Copied!</span>
                    </label>
                    <textarea id="urlOutput" class="input-field output-field" readonly></textarea>
                </div>
            </div>
        </div>
        <div class="example-box">
            <strong>Use Cases:</strong> Web URLs with special characters, search queries, form data transmission, GET parameters
        </div>
    </div>

    <!-- HTML Encoding Section -->
    <div class="encoding-section">
        <h2 class="section-title">
            <span class="icon">📄</span>
            HTML Encoding
        </h2>
        <div class="two-column">
            <div>
                <div class="input-group">
                    <label for="htmlInput">Enter HTML text:</label>
                    <input type="text" id="htmlInput" class="input-field" placeholder="Example: <script>alert('Hello');</script>" value="<script>alert('Hello');</script>">
                </div>
                <button class="btn" onclick="encodeHTML()">HTML Encode</button>
                <button class="btn btn-secondary" onclick="decodeHTML()">HTML Decode</button>
            </div>
            <div>
                <div class="input-group">
                    <label>HTML Encoded Result:
                        <button class="btn copy-btn" onclick="copyToClipboard('htmlOutput')">Copy</button>
                        <span id="html-success" class="success-message">Copied!</span>
                    </label>
                    <textarea id="htmlOutput" class="input-field output-field" readonly></textarea>
                </div>
            </div>
        </div>
        <div class="example-box">
            <strong>Use Cases:</strong> XSS prevention, displaying HTML code as text, safe content rendering, protecting against code injection
        </div>
    </div>

    <!-- Binary Encoding Section -->
    <div class="encoding-section">
        <h2 class="section-title">
            <span class="icon">🔢</span>
            Binary Encoding
        </h2>
        <div class="two-column">
            <div>
                <div class="input-group">
                    <label for="binaryInput">Enter text:</label>
                    <input type="text" id="binaryInput" class="input-field" placeholder="Example: ABC" value="Hello">
                </div>
                <button class="btn" onclick="encodeBinary()">Convert to Binary</button>
                <button class="btn btn-secondary" onclick="decodeBinary()">Convert from Binary</button>
            </div>
            <div>
                <div class="input-group">
                    <label>Binary Result:
                        <button class="btn copy-btn" onclick="copyToClipboard('binaryOutput')">Copy</button>
                        <span id="binary-success" class="success-message">Copied!</span>
                    </label>
                    <textarea id="binaryOutput" class="input-field output-field" readonly></textarea>
                </div>
            </div>
        </div>
        <div class="example-box">
            <strong>Use Cases:</strong> Computer processing, data storage, network communication, understanding digital representation
        </div>
    </div>

    <!-- Hexadecimal Encoding Section -->
    <div class="encoding-section">
        <h2 class="section-title">
            <span class="icon">🔤</span>
            Hexadecimal Encoding
        </h2>
        <div class="two-column">
            <div>
                <div class="input-group">
                    <label for="hexInput">Enter text:</label>
                    <input type="text" id="hexInput" class="input-field" placeholder="Example: Code" value="Code">
                </div>
                <button class="btn" onclick="encodeHex()">Convert to Hex</button>
                <button class="btn btn-secondary" onclick="decodeHex()">Convert from Hex</button>
            </div>
            <div>
                <div class="input-group">
                    <label>Hexadecimal Result:
                        <button class="btn copy-btn" onclick="copyToClipboard('hexOutput')">Copy</button>
                        <span id="hex-success" class="success-message">Copied!</span>
                    </label>
                    <textarea id="hexOutput" class="input-field output-field" readonly></textarea>
                </div>
            </div>
        </div>
        <div class="example-box">
            <strong>Use Cases:</strong> Color codes in CSS, memory addresses, cryptographic hashes, byte representation
        </div>
    </div>

    <!-- Info Grid -->
    <div class="grid">
        <div class="encoding-section">
            <h3 class="section-title">
                <span class="icon">💡</span>
                Why is Encoding Important?
            </h3>
            <ul style="list-style-type: none; padding-left: 0;">
                <li>✅ Cross-system compatibility</li>
                <li>✅ Data security and integrity</li>
                <li>✅ Network transmission safety</li>
                <li>✅ Special character support</li>
                <li>✅ Protocol compliance</li>
                <li>✅ Storage efficiency</li>
            </ul>
        </div>
        
        <div class="encoding-section">
            <h3 class="section-title">
                <span class="icon">🛠️</span>
                Real-World Applications
            </h3>
            <ul style="list-style-type: none; padding-left: 0;">
                <li>🌐 Web Development</li>
                <li>📧 Email Systems</li>
                <li>🗄️ Database Storage</li>
                <li>🔒 Security Systems</li>
                <li>📱 Mobile Applications</li>
                <li>🎮 Game Development</li>
            </ul>
        </div>

        <div class="encoding-section">
            <h3 class="section-title">
                <span class="icon">⚡</span>
                Performance Tips
            </h3>
            <ul style="list-style-type: none; padding-left: 0;">
                <li>🚀 Use appropriate encoding method</li>
                <li>🎯 Consider data size impact</li>
                <li>🔧 Cache encoded results</li>
                <li>📊 Monitor encoding overhead</li>
                <li>🛡️ Validate decoded data</li>
                <li>⏱️ Choose efficient algorithms</li>
            </ul>
        </div>

        <div class="encoding-section">
            <h3 class="section-title">
                <span class="icon">📚</span>
                Common Standards
            </h3>
            <ul style="list-style-type: none; padding-left: 0;">
                <li>🔤 UTF-8 for text encoding</li>
                <li>📋 Base64 for binary data</li>
                <li>🌐 Percent encoding for URLs</li>
                <li>📄 HTML entities for web content</li>
                <li>🔢 ASCII for basic characters</li>
                <li>🎨 Unicode for global text</li>
            </ul>
        </div>
    </div>
</div>

<script> // Base64 Encoding function encodeBase64() { const input = document.getElementById('base64Input').value; try { const encoded = btoa(unescape(encodeURIComponent(input))); document.getElementById('base64Output').value = encoded; } catch (e) { document.getElementById('base64Output').value = 'Error: Invalid characters for Base64 encoding'; } } function decodeBase64() { const input = document.getElementById('base64Output').value; try { const decoded = decodeURIComponent(escape(atob(input))); document.getElementById('base64Input').value = decoded; } catch (e) { alert('Error: Invalid Base64 string'); } } // URL Encoding function encodeURL() { const input = document.getElementById('urlInput').value; const encoded = encodeURIComponent(input); document.getElementById('urlOutput').value = encoded; } function decodeURL() { const input = document.getElementById('urlOutput').value; try { const decoded = decodeURIComponent(input); document.getElementById('urlInput').value = decoded; } catch (e) { alert('Error: Invalid URL encoded string'); } } // HTML Encoding function encodeHTML() { const input = document.getElementById('htmlInput').value; const encoded = input .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); document.getElementById('htmlOutput').value = encoded; } function decodeHTML() { const input = document.getElementById('htmlOutput').value; const decoded = input .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, "'"); document.getElementById('htmlInput').value = decoded; } // Binary Encoding function encodeBinary() { const input = document.getElementById('binaryInput').value; const encoded = input.split('').map(char => { return char.charCodeAt(0).toString(2).padStart(8, '0'); }).join(' '); document.getElementById('binaryOutput').value = encoded; } function decodeBinary() { const input = document.getElementById('binaryOutput').value; try { const binaryArray = input.split(' ').filter(bin => bin.length > 0); const decoded = binaryArray.map(bin => { return String.fromCharCode(parseInt(bin, 2)); }).join(''); document.getElementById('binaryInput').value = decoded; } catch (e) { alert('Error: Invalid binary string'); } } // Hexadecimal Encoding function encodeHex() { const input = document.getElementById('hexInput').value; const encoded = input.split('').map(char => { return char.charCodeAt(0).toString(16).padStart(2, '0'); }).join(' '); document.getElementById('hexOutput').value = encoded.toUpperCase(); } function decodeHex() { const input = document.getElementById('hexOutput').value; try { const hexArray = input.split(' ').filter(hex => hex.length > 0); const decoded = hexArray.map(hex => { return String.fromCharCode(parseInt(hex, 16)); }).join(''); document.getElementById('hexInput').value = decoded; } catch (e) { alert('Error: Invalid hexadecimal string'); } } // Copy to Clipboard function async function copyToClipboard(elementId) { const element = document.

ngrok-github-coder.markdown

Ngrok-github-coder

A Pen by istockmarket on CodePen.

License.

script.js

// ==============================================
// JAVASCRIPT CODE for HTML class="single post post-1234"
// ==============================================

// DOM Content Loaded Event
document.addEventListener('DOMContentLoaded', function() {
    console.log('🚀 Post Page Loaded Successfully!');
    
    // Initialize all functions
    detectHTMLClasses();
    setupSmoothScrolling();
    setupTagInteractions();
    setupReadingProgress();
    setupTypingEffect();
    setupLazyAnimations();
    setupThemeToggle();
    setupPostInteractions();
});

// ==============================================
// HTML CLASS DETECTION & LOGGING
// ==============================================
function detectHTMLClasses() {
    const htmlClasses = document.documentElement.className;
    console.log('📋 HTML Classes:', htmlClasses);
    
    // Check for specific classes
    const classList = document.documentElement.classList;
    
    if (classList.contains('single')) {
        console.log('✅ This is a single post page');
        addSinglePostFeatures();
    }
    
    if (classList.contains('post')) {
        console.log('✅ This is a blog post');
        addPostFeatures();
    }
    
    if (classList.contains('post-1234')) {
        console.log('✅ This is post with ID: 1234');
        addSpecificPostFeatures();
    }
    
    // Display class info in console
    displayClassInfo();
}

// ==============================================
// SMOOTH SCROLLING
// ==============================================
function setupSmoothScrolling() {
    const links = document.querySelectorAll('a[href^="#"]');
    
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
                console.log('🔗 Scrolled to:', targetId);
            }
        });
    });
}

// ==============================================
// TAG INTERACTIONS
// ==============================================
function setupTagInteractions() {
    const tags = document.querySelectorAll('.tag');
    
    tags.forEach(tag => {
        // Click event
        tag.addEventListener('click', function(e) {
            e.preventDefault();
            const tagName = this.textContent;
            console.log('🏷️ Tag clicked:', tagName);
            
            // Add visual feedback
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = 'translateY(-3px)';
            }, 100);
            
            // You can add actual tag filtering logic here
            showTagAlert(tagName);
        });
        
        // Hover effects with sound (optional)
        tag.addEventListener('mouseenter', function() {
            console.log('👆 Hovering tag:', this.textContent);
        });
    });
}

// ==============================================
// READING PROGRESS INDICATOR
// ==============================================
function setupReadingProgress() {
    // Create progress bar
    const progressBar = document.createElement('div');
    progressBar.id = 'reading-progress';
    progressBar.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        z-index: 9999;
        transition: width 0.3s ease;
        box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
    `;
    document.body.appendChild(progressBar);
    
    // Update progress on scroll
    window.addEventListener('scroll', function() {
        const windowHeight = window.innerHeight;
        const documentHeight = document.documentElement.scrollHeight - windowHeight;
        const scrollTop = window.pageYOffset;
        const progress = (scrollTop / documentHeight) * 100;
        
        progressBar.style.width = Math.min(progress, 100) + '%';
    });
    
    console.log('📊 Reading progress indicator added');
}

// ==============================================
// TYPING EFFECT FOR TITLE
// ==============================================
function setupTypingEffect() {
    const title = document.querySelector('.post-title');
    if (!title) return;
    
    const originalText = title.textContent;
    title.textContent = '';
    
    let index = 0;
    const typingInterval = setInterval(() => {
        if (index < originalText.length) {
            title.textContent += originalText.charAt(index);
            index++;
        } else {
            clearInterval(typingInterval);
            console.log('⌨️ Title typing effect completed');
        }
    }, 100);
}

// ==============================================
// LAZY ANIMATIONS
// ==============================================
function setupLazyAnimations() {
    // Intersection Observer for scroll animations
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                console.log('🎬 Element animated:', entry.target.className);
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });
    
    // Add animation to elements
    const animatedElements = document.querySelectorAll('.post-content p, .highlight-box, .post-tags, .post-footer');
    
    animatedElements.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });
}

// ==============================================
// THEME TOGGLE (Optional)
// ==============================================
function setupThemeToggle() {
    // Create theme toggle button
    const themeToggle = document.createElement('button');
    themeToggle.innerHTML = '🌙';
    themeToggle.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        font-size: 20px;
        cursor: pointer;
        z-index: 1000;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    `;
    
    document.body.appendChild(themeToggle);
    
    themeToggle.addEventListener('click', function() {
        document.body.classList.toggle('dark-theme');
        this.innerHTML = document.body.classList.contains('dark-theme') ? '☀️' : '🌙';
        console.log('🎨 Theme toggled');
    });
}

// ==============================================
// POST SPECIFIC FEATURES
// ==============================================
function addSinglePostFeatures() {
    console.log('🎯 Adding single post features...');
    
    // Add reading time calculator
    calculateReadingTime();
    
    // Add word count
    displayWordCount();
    
    // Add social share buttons (dummy)
    addSocialShareButtons();
}

function addPostFeatures() {
    console.log('📝 Adding general post features...');
    
    // Add post navigation
    addPostNavigation();
    
    // Add related posts section (dummy)
    addRelatedPosts();
}

function addSpecificPostFeatures() {
    console.log('🆔 Adding features for Post 1234...');
    
    // Add special message for this specific post
    addSpecialMessage();
    
    // Add custom interactions
    addCustomInteractions();
}

// ==============================================
// UTILITY FUNCTIONS
// ==============================================
function calculateReadingTime() {
    const content = document.querySelector('.post-content');
    if (!content) return;
    
    const words = content.textContent.split(' ').length;
    const readingTime = Math.ceil(words / 200); // Average reading speed
    
    const readingTimeElement = document.createElement('div');
    readingTimeElement.innerHTML = `⏱️ পড়ার সময়: ${readingTime} মিনিট`;
    readingTimeElement.style.cssText = `
        background: #e3f2fd;
        color: #1565c0;
        padding: 10px 15px;
        border-radius: 5px;
        margin: 10px 0;
        font-weight: 600;
    `;
    
    const header = document.querySelector('.post-header');
    if (header) {
        header.appendChild(readingTimeElement);
    }
    
    console.log(`📚 Reading time: ${readingTime} minutes (${words} words)`);
}

function displayWordCount() {
    const content = document.querySelector('.post-content');
    if (!content) return;
    
    const words = content.textContent.split(' ').length;
    console.log(`📊 Word count: ${words} words`);
}

function addSocialShareButtons() {
    const shareContainer = document.createElement('div');
    shareContainer.innerHTML = `
        <div style="text-align: center; margin: 20px 0; padding: 20px; background: #f8f9fa; border-radius: 10px;">
            <h4>শেয়ার করুন</h4>
            <div style="display: flex; gap: 10px; justify-content: center; margin-top: 10px;">
                <button class="share-btn" data-platform="facebook">📘 Facebook</button>
                <button class="share-btn" data-platform="twitter">🐦 Twitter</button>
                <button class="share-btn" data-platform="linkedin">💼 LinkedIn</button>
            </div>
        </div>
    `;
    
    const footer = document.querySelector('.post-footer');
    if (footer) {
        footer.appendChild(shareContainer);
    }
    
    // Add click events to share buttons
    document.querySelectorAll('.share-btn').forEach(btn => {
        btn.style.cssText = `
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background: #667eea;
            color: white;
            transition: all 0.3s ease;
        `;
        
        btn.addEventListener('click', function() {
            const platform = this.dataset.platform;
            console.log(`📤 Share clicked: ${platform}`);
            alert(`${platform} এ শেয়ার করা হবে!`);
        });
        
        btn.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px)';
            this.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
        });
        
        btn.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = 'none';
        });
    });
}

function addSpecialMessage() {
    const specialMessage = document.createElement('div');
    specialMessage.innerHTML = `
        <div style="
            background: linear-gradient(135deg, #ff9a9e, #fecfef);
            color: #333;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            text-align: center;
            border: 2px solid #ff9a9e;
        ">
            <h3>🎉 বিশেষ পোস্ট #1234</h3>
            <p>এটি আমাদের একটি বিশেষ পোস্ট! ধন্যবাদ পড়ার জন্য।</p>
        </div>
    `;
    
    const container = document.querySelector('.container');
    if (container) {
        container.insertBefore(specialMessage, container.firstChild);
    }
}

function addCustomInteractions() {
    // Add like button
    const likeButton = document.createElement('button');
    likeButton.innerHTML = '❤️ Like (0)';
    likeButton.style.cssText = `
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        background: #ff4757;
        color: white;
        cursor: pointer;
        margin: 10px;
        transition: all 0.3s ease;
    `;
    
    let likes = 0;
    likeButton.addEventListener('click', function() {
        likes++;
        this.innerHTML = `❤️ Liked (${likes})`;
        this.style.background = '#ff3838';
        this.style.transform = 'scale(0.95)';
        setTimeout(() => {
            this.style.transform = 'scale(1)';
        }, 100);
        console.log(`👍 Post liked! Total likes: ${likes}`);
    });
    
    const footer = document.querySelector('.post-footer');
    if (footer) {
        footer.appendChild(likeButton);
    }
}

function showTagAlert(tagName) {
    // Create custom alert
    const alertBox = document.createElement('div');
    alertBox.innerHTML = `
        <div style="
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            z-index: 9999;
            text-align: center;
        ">
            <h3>🏷️ Tag Selected</h3>
            <p>You clicked on tag: <strong>${tagName}</strong></p>
            <button onclick="this.parentElement.parentElement.remove()" style="
                padding: 8px 15px;
                background: #667eea;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                margin-top: 10px;
            ">Close</button>
        </div>
    `;
    
    document.body.appendChild(alertBox);
    
    // Auto remove after 3 seconds
    setTimeout(() => {
        if (alertBox.parentElement) {
            alertBox.remove();
        }
    }, 3000);
}

function displayClassInfo() {
    const classInfo = {
        single: document.documentElement.classList.contains('single'),
        post: document.documentElement.classList.contains('post'),
        'post-1234': document.documentElement.classList.contains('post-1234')
    };
    
    console.table(classInfo);
}

function addPostNavigation() {
    // Add dummy previous/next post navigation
    const nav = document.createElement('div');
    nav.innerHTML = `
        <div style="
            display: flex;
            justify-content: space-between;
            margin: 30px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
        ">
            <a href="#" style="color: #667eea; text-decoration: none;">← Previous Post</a>
            <a href="#" style="color: #667eea; text-decoration: none;">Next Post →</a>
        </div>
    `;
    
    const container = document.querySelector('.container');
    if (container) {
        container.appendChild(nav);
    }
}

function addRelatedPosts() {
    const related = document.createElement('div');
    related.innerHTML = `
        <div style="margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
            <h3>Related Posts</h3>
            <ul style="list-style: none; padding: 0;">
                <li style="margin: 10px 0;"><a href="#" style="color: #667eea;">📝 Another Great Post</a></li>
                <li style="margin: 10px 0;"><a href="#" style="color: #667eea;">📝 How to Build Better Websites</a></li>
                <li style="margin: 10px 0;"><a href="#" style="color: #667eea;">📝 CSS Tips and Tricks</a></li>
            </ul>
        </div>
    `;
    
    const container = document.querySelector('.container');
    if (container) {
        container.appendChild(related);
    }
}

// ==============================================
// KEYBOARD SHORTCUTS
// ==============================================
document.addEventListener('keydown', function(e) {
    // Ctrl/Cmd + K for search
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        console.log('🔍 Search shortcut pressed');
        alert('Search functionality would open here!');
    }
    
    // Escape to close modals
    if (e.key === 'Escape') {
        const alerts = document.querySelectorAll('[style*="position: fixed"]');
        alerts.forEach(alert => {
            if (alert.style.zIndex === '9999') {
                alert.remove();
            }
        });
    }
});

// ==============================================
// PERFORMANCE MONITORING
// ==============================================
window.addEventListener('load', function() {
    const loadTime = performance.now();
    console.log(`⚡ Page loaded in ${Math.round(loadTime)}ms`);
    
    // Monitor page performance
    if ('PerformanceObserver' in window) {
        const observer = new PerformanceObserver((list) => {
            const entries = list.getEntries();
            entries.forEach(entry => {
                console.log(`📊 ${entry.name}: ${Math.round(entry.duration)}ms`);
            });
        });
        
        observer.observe({entryTypes: ['measure', 'navigation']});
    }
});

console.log('🎉 JavaScript initialization complete for post-1234!');

style.css

/* ==============================================
   CSS CODE for HTML class="single post post-1234"
   ============================================== */

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

/* HTML Class Specific Styles */
html.single {
    scroll-behavior: smooth;
}

html.post {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

html.post-1234 body {
    background-color: rgba(255, 255, 255, 0.95);
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

/* Container & Layout */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Header Styles */
.post-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 3px solid #667eea;
    position: relative;
}

.post-header::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 60px;
    height: 3px;
    background: #764ba2;
    transform: translateX(-50%);
}

.post-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.post-meta {
    color: #7f8c8d;
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.post-meta span {
    padding: 5px 10px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.post-meta span:hover {
    background: rgba(102, 126, 234, 0.2);
    transform: translateY(-2px);
}

.post-id {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    display: inline-block;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Content Styles */
.post-content {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.post-content p {
    margin-bottom: 20px;
    text-align: justify;
}

.post-content h3 {
    color: #2c3e50;
    margin: 30px 0 15px 0;
    font-size: 1.5rem;
    position: relative;
    padding-left: 20px;
}

.post-content h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    transform: translateY(-50%);
    border-radius: 2px;
}

/* Special Boxes */
.highlight-box {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 25px;
    border-radius: 15px;
    margin: 25px 0;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.highlight-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.highlight-box:hover::before {
    opacity: 1;
}

.highlight-box h3 {
    color: white;
    margin-bottom: 15px;
    padding-left: 0;
}

.highlight-box h3::before {
    display: none;
}

/* Tags */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0;
    align-items: center;
}

.tag {
    background: #e9ecef;
    color: #495057;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.tag:hover {
    background: #667eea;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* Footer */
.post-footer {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 25px;
    border-radius: 15px;
    margin-top: 40px;
    text-align: center;
    border: 1px solid #dee2e6;
}

/* Lists */
ul {
    margin: 20px 0;
    padding-left: 30px;
}

ul li {
    margin-bottom: 8px;
    position: relative;
}

ul li::marker {
    color: #667eea;
}

/* Code */
code {
    background: #f8f9fa;
    color: #e83e8c;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    border: 1px solid #dee2e6;
}

/* Animations */
.single .container {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading Animation for post-1234 */
html.post-1234 .post-title {
    animation: titleGlow 2s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    from {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }
    to {
        text-shadow: 2px 2px 20px rgba(102, 126, 234, 0.3);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    html.post-1234 body {
        margin: 10px;
    }
    
    .post-title {
        font-size: 2rem;
    }
    
    .container {
        padding: 20px 15px;
    }
    
    .post-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .post-tags {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .post-title {
        font-size: 1.5rem;
    }
    
    .post-content {
        font-size: 1rem;
    }
    
    .highlight-box {
        padding: 20px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    html.post-1234 body {
        background-color: rgba(30, 30, 30, 0.95);
        color: #f8f9fa;
    }
    
    .post-title {
        color: #f8f9fa;
    }
    
    .post-content h3 {
        color: #f8f9fa;
    }
    
    code {
        background: #2d2d2d;
        color: #ff6b9d;
        border-color: #444;
    }
}

/* Print Styles */
@media print {
    html.post {
        background: white !important;
    }
    
    html.post-1234 body {
        background: white !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    
    .highlight-box {
        background: #f0f0f0 !important;
        color: #000 !important;
    }
}

/* ==============================================
   JAVASCRIPT CODE
   ============================================== */