Name: Static Html Page Generator
Author: muratbaseren

Static Html Page Generator | Skills Pool

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Font Awesome 6 Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Bootstrap 5 JS Bundle (includes Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- In buttons -->
<button class="btn btn-primary">
    <i class="fas fa-save me-1"></i>Save
</button>

<!-- Icon-only button -->
<button class="btn btn-sm btn-danger" title="Delete" aria-label="Delete">
    <i class="fas fa-trash"></i>
</button>

<!-- In text -->
<span class="me-2"><i class="fas fa-envelope"></i></span> Email

<!-- Correct structure -->
<div class="container">
  <div class="row">
    <div class="col-md-6">Content</div>
    <div class="col-md-6">Content</div>
  </div>
</div>

<!-- Bootstrap responsive image with lazy loading -->
<img src="path/to/image.jpg" 
     class="img-fluid" 
     alt="Description"
     loading="lazy"
     decoding="async">

<!-- Add data-bs-theme attribute to <html> root element -->
<html lang="en" data-bs-theme="light">

<!-- Add to navbar or header -->
<button class="btn btn-sm" id="themeToggle" aria-label="Toggle dark mode">
    <i class="fas fa-moon"></i>
</button>

// Initialize theme on page load
function initTheme() {
    const saved = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-bs-theme', saved);
    updateThemeIcon(saved);
}

// Toggle between light and dark
function toggleTheme() {
    const current = document.documentElement.getAttribute('data-bs-theme');
    const newTheme = current === 'light' ? 'dark' : 'light';
    
    document.documentElement.setAttribute('data-bs-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    updateThemeIcon(newTheme);
}

// Update icon based on theme
function updateThemeIcon(theme) {
    const icon = document.querySelector('#themeToggle i');
    if (theme === 'dark') {
        icon.classList.remove('fa-moon');
        icon.classList.add('fa-sun');
    } else {
        icon.classList.remove('fa-sun');
        icon.classList.add('fa-moon');
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', initTheme);
document.getElementById('themeToggle').addEventListener('click', toggleTheme);

<style>
    :root[data-bs-theme="light"] {
        --custom-bg: #ffffff;
        --custom-text: #000000;
        --custom-border: #e0e0e0;
    }
    
    :root[data-bs-theme="dark"] {
        --custom-bg: #1a1a1a;
        --custom-text: #ffffff;
        --custom-border: #333333;
    }
    
    .custom-element {
        background-color: var(--custom-bg);
        color: var(--custom-text);
        border: 1px solid var(--custom-border);
    }
</style>

// Attach button lock handlers to all buttons
function attachButtonLockHandlers() {
    const buttons = document.querySelectorAll('button:not([data-no-lock])');
    
    buttons.forEach(button => {
        button.addEventListener('click', handleButtonClick);
    });
}

function handleButtonClick(event) {
    const button = event.currentTarget;
    
    // Skip if already disabled
    if (button.disabled) {
        event.preventDefault();
        return;
    }
    
    // Store original content
    const originalHTML = button.innerHTML;
    
    // Lock button
    button.disabled = true;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';
    button.classList.add('opacity-75');
    
    // Unlock after 3 seconds
    setTimeout(() => {
        button.disabled = false;
        button.innerHTML = originalHTML;
        button.classList.remove('opacity-75');
    }, 3000);
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
    attachButtonLockHandlers();
});

<!-- Standard button - will auto-lock -->
<button class="btn btn-primary">
    <i class="fas fa-save me-1"></i>Save
</button>

<!-- Button that should NOT lock -->
<button class="btn btn-secondary" data-no-lock>
    <i class="fas fa-times"></i>Cancel
</button>

Problem	Solution
Inconsistent column widths	Use `.col-12` for xs, then `.col-md-6`, `.col-lg-4` for larger screens
Layout breaks on large screens	Use `.container` (max-width) instead of `.container-fluid`
Text too small on mobile	Use responsive font sizes, add mobile padding
Images stretched	Always use `.img-fluid` + lazy loading
Gaps between cards missing	Use `g-*` classes: `<div class="row g-4">`
Icons look tiny	Use `.fa-lg`, `.fa-xl`, `.fa-2x` classes
Dark mode not working	Ensure `data-bs-theme` on `<html>` root
Theme not persisting	Use `localStorage.setItem('theme', newTheme)`
Button lock not working	Attach listener after DOM ready
Status bar not at bottom	Use `d-flex flex-column` on body with `min-height: 100vh`

Static Html Page Generator

Before Coding: Requirements & Planning

Static Html Page Generator

Before Coding: Requirements & Planning

Technical Foundation

Bootstrap 5 & Icon Setup

Font Awesome Icon Usage

Bootstrap 5 Key Concepts

HTML Structure Best Practices

Semantic Markup

Bootstrap Grid Rules

Responsive Images

Essential Page Components

Search Bar (Top-Right)

Status Bar (Footer)

Page Navigation

Dark Mode & Light Mode Implementation

Setup

Toggle Button

JavaScript Theme Logic

CSS Variables for Custom Colors

Button Interaction & Locking Mechanism

JavaScript Implementation

HTML Button Examples

Responsive Design Checklist

Code Quality Guidelines

JavaScript Organization

CSS & Styling

Icon Best Practices

HTML Cleanliness

Dark Mode Implementation

Common Pitfalls & Solutions

Deliverable Expectations

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns