

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Free Lorem Ipsum generator - Create placeholder text in paragraphs, sentences, or words. Perfect for designs, mockups, and layouts!">
    <title>Lorem Ipsum Generator - Placeholder Text Generator | Anylistly</title>
    
        
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="https://anylistly.com//assets/css/style.css">
    
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-R0WQZK9Z1Z"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'G-R0WQZK9Z1Z');
    </script>
</head>
<body>
    <!-- Header Navigation -->
    <header>
        <div class="container">
            <nav>
                <!-- Logo -->
                <a href="https://anylistly.com/" class="logo">
                    <img src="https://anylistly.com//img/anylistly-logo.png" alt="Anylistly Logo">
                </a>
                
                <!-- Navigation Menu -->
                <ul class="nav-menu" id="navMenu">
                    <li><a href="https://anylistly.com/tools/" class="active">Tools</a></li>
                    <li><a href="https://anylistly.com/quotes/" class="">Quotes</a></li>
                    <li><a href="https://anylistly.com/countdowns/" class="">Countdowns</a></li>
                    <li><a href="https://anylistly.com/coloring-pages/" class="">Coloring Pages</a></li>
                </ul>
                
                <!-- Mobile Menu Toggle -->
                <div class="menu-toggle" id="menuToggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                
                <!-- Search Icon (can be enhanced later) -->
                <span class="search-icon">🔍</span>
            </nav>
        </div>
    </header>
    
    <!-- Main Content Starts Here (closed in footer.php) -->
    <main>
<!-- Breadcrumbs -->
<div class="container">
    <div class="breadcrumbs">
        <a href="https://anylistly.com/">Home</a>
        <span>›</span>
        <a href="https://anylistly.com/tools/">Free Tools</a>
        <span>›</span>
        <strong>Lorem Ipsum Generator</strong>
    </div>
</div>

<!-- Page Header -->
<section class="page-header" style="background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);">
    <div class="container" style="text-align: center;">
        <div style="font-size: 70px; margin-bottom: 16px;">📝</div>
        <h1>Lorem Ipsum Generator</h1>
        <p style="max-width: 650px; margin: 0 auto;">Generate placeholder text for your designs, mockups, and layouts. Choose from paragraphs, sentences, or words!</p>
    </div>
</section>

<!-- Tool Section -->
<section class="bg-gray">
    <div class="tool-container">
        <!-- Generation Mode Toggle -->
        <div class="mode-toggle">
            <button class="mode-btn active" onclick="setMode('standard')" data-mode="standard">
                📄 Standard Lorem Ipsum
            </button>
            <button class="mode-btn" onclick="setMode('custom')" data-mode="custom">
                ✍️ Custom Text Generator
            </button>
        </div>

        <form id="loremForm" class="lorem-form">
            <!-- Standard Mode -->
            <div id="standardMode" class="mode-content">
                <!-- Generation Type -->
                <div class="form-group">
                    <label>Generate By</label>
                    <div class="type-selector">
                        <label class="type-option">
                            <input type="radio" name="genType" value="paragraphs" checked>
                            <span class="type-box">
                                <span class="type-icon">📄</span>
                                <span class="type-label">Paragraphs</span>
                            </span>
                        </label>
                        <label class="type-option">
                            <input type="radio" name="genType" value="sentences">
                            <span class="type-box">
                                <span class="type-icon">📝</span>
                                <span class="type-label">Sentences</span>
                            </span>
                        </label>
                        <label class="type-option">
                            <input type="radio" name="genType" value="words">
                            <span class="type-box">
                                <span class="type-icon">🔤</span>
                                <span class="type-label">Words</span>
                            </span>
                        </label>
                    </div>
                </div>

                <!-- Quantity -->
                <div class="form-group">
                    <label for="quantityInput">
                        <span id="quantityLabel">Number of Paragraphs</span>
                        <span class="quantity-value" id="quantityValue">5</span>
                    </label>
                    <input type="range" id="quantitySlider" min="1" max="50" value="5" class="slider">
                    <div class="range-labels">
                        <span>1</span>
                        <span>50</span>
                    </div>
                </div>

                <!-- Options -->
                <div class="form-group">
                    <label>Options</label>
                    <div class="options-grid">
                        <label class="option-item">
                            <input type="checkbox" id="startWithLorem" checked>
                            <span class="option-box"></span>
                            <span class="option-text">
                                <span class="option-title">Start with "Lorem ipsum"</span>
                                <span class="option-desc">Classic beginning</span>
                            </span>
                        </label>

                        <label class="option-item">
                            <input type="checkbox" id="includeHTML">
                            <span class="option-box"></span>
                            <span class="option-text">
                                <span class="option-title">Include HTML tags</span>
                                <span class="option-desc">&lt;p&gt; and &lt;br&gt;</span>
                            </span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Custom Mode -->
            <div id="customMode" class="mode-content" style="display: none;">
                <div class="form-group">
                    <label for="customText">Your Custom Text</label>
                    <textarea 
                        id="customText" 
                        placeholder="Enter your text here. The generator will create Lorem Ipsum style text based on your input words..."
                        rows="6"
                    ></textarea>
                    <div class="input-hint">💡 Enter at least 10 words for better randomization</div>
                </div>

                <!-- Custom Options -->
                <div class="form-group">
                    <label for="customQuantity">
                        <span>Number of Paragraphs</span>
                        <span class="quantity-value" id="customQuantityValue">3</span>
                    </label>
                    <input type="range" id="customQuantitySlider" min="1" max="20" value="3" class="slider">
                    <div class="range-labels">
                        <span>1</span>
                        <span>20</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="option-item">
                        <input type="checkbox" id="customHTML">
                        <span class="option-box"></span>
                        <span class="option-text">
                            <span class="option-title">Include HTML tags</span>
                            <span class="option-desc">Wrap in &lt;p&gt; tags</span>
                        </span>
                    </label>
                </div>
            </div>

            <button type="submit" class="btn gen-btn">🚀 Generate Text</button>
        </form>

        <!-- Results -->
        <div class="lorem-result" id="loremResult">
            <div class="result-header">
                <h3>✨ Generated Text</h3>
                <div class="result-stats" id="resultStats"></div>
            </div>
            <div class="result-box" id="resultBox"></div>
            <div class="result-actions">
                <button class="action-btn copy" onclick="copyText()">📋 Copy Text</button>
                <button class="action-btn download" onclick="downloadText()">💾 Download .txt</button>
                <button class="action-btn clear" onclick="clearAll()">🗑️ Clear</button>
            </div>
        </div>
    </div>
</section>

<!-- Content Section -->
<section>
    <div class="container">
        <div class="content-layout">
            <div class="main-content">
                <div class="content-card">
                    <h2>📝 About Lorem Ipsum</h2>
                    <p>Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. It has been the industry standard dummy text since the 1500s.</p>
                    <p>The text is derived from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.</p>
                </div>

                <div class="content-card">
                    <h2>🔧 How to Use</h2>
                    <p><strong>Standard Mode:</strong></p>
                    <ul>
                        <li>Choose generation type (paragraphs, sentences, or words)</li>
                        <li>Adjust the quantity slider</li>
                        <li>Select your options (start with Lorem, HTML tags)</li>
                        <li>Click "Generate Text"</li>
                        <li>Copy or download the generated text</li>
                    </ul>
                    <p style="margin-top: 16px;"><strong>Custom Text Mode:</strong></p>
                    <ul>
                        <li>Switch to "Custom Text Generator" tab</li>
                        <li>Enter your own text (minimum 10 words recommended)</li>
                        <li>Adjust number of paragraphs</li>
                        <li>Enable HTML tags if needed</li>
                        <li>Click "Generate Text" for randomized output</li>
                    </ul>
                </div>

                <div class="content-card">
                    <h2>💡 Common Uses</h2>
                    <ul>
                        <li><strong>Web Design:</strong> Fill website mockups and templates</li>
                        <li><strong>Graphic Design:</strong> Preview brochures, posters, and layouts</li>
                        <li><strong>Print Design:</strong> Test magazine and book layouts</li>
                        <li><strong>UI/UX Design:</strong> Prototype app interfaces</li>
                        <li><strong>Development:</strong> Test content rendering and responsive designs</li>
                        <li><strong>Presentations:</strong> Create sample slides and documents</li>
                        <li><strong>Typography Testing:</strong> Preview fonts and text styles</li>
                    </ul>
                </div>

                <div class="content-card">
                    <h2>❓ Why Use Lorem Ipsum?</h2>
                    <ul>
                        <li><strong>Focus on Design:</strong> Prevents clients from focusing on content instead of design</li>
                        <li><strong>Neutral Text:</strong> Doesn't distract with readable content</li>
                        <li><strong>Realistic Look:</strong> Resembles natural language patterns</li>
                        <li><strong>Standard Practice:</strong> Industry-recognized placeholder text</li>
                        <li><strong>Variable Length:</strong> Generate exactly the amount you need</li>
                        <li><strong>Quick Testing:</strong> Rapidly populate designs for review</li>
                    </ul>
                </div>

                <div class="content-card">
                    <h2>🎯 Pro Tips</h2>
                    <ul>
                        <li>Use HTML tags when testing web content management systems</li>
                        <li>Generate multiple paragraphs to test scrolling and pagination</li>
                        <li>Custom text mode is great for creating industry-specific placeholder text</li>
                        <li>Start with "Lorem ipsum" for traditional placeholder text</li>
                        <li>Use word count mode for precise character testing</li>
                        <li>Download as .txt for easy import into design tools</li>
                    </ul>
                </div>
            </div>

            <aside class="sidebar">
                <div class="sidebar-widget">
                    <h3>⚡ Quick Generate</h3>
                    <div class="quick-buttons">
                        <button class="quick-btn" onclick="quickGenerate(3, 'paragraphs')">
                            <span class="quick-icon">📄</span>
                            <span class="quick-text">3 Paragraphs</span>
                        </button>
                        <button class="quick-btn" onclick="quickGenerate(5, 'sentences')">
                            <span class="quick-icon">📝</span>
                            <span class="quick-text">5 Sentences</span>
                        </button>
                        <button class="quick-btn" onclick="quickGenerate(50, 'words')">
                            <span class="quick-icon">🔤</span>
                            <span class="quick-text">50 Words</span>
                        </button>
                        <button class="quick-btn" onclick="quickGenerate(100, 'words')">
                            <span class="quick-icon">💬</span>
                            <span class="quick-text">100 Words</span>
                        </button>
                    </div>
                </div>

                <div class="sidebar-widget">
                    <h3>Share This Tool</h3>
                    <div class="share-buttons">
                        <button class="share-btn share-facebook" onclick="shareOnFacebook()">📘 Facebook</button>
                        <button class="share-btn share-twitter" onclick="shareOnTwitter()">🐦 Twitter</button>
                        <button class="share-btn share-whatsapp" onclick="shareOnWhatsApp()">💬 WhatsApp</button>
                    </div>
                </div>

                <div class="sidebar-widget">
                    <h3>🛠️ Related Tools</h3>
                    <div class="related-tools">
                        <a href="https://anylistly.com/tools/word-and-character-counter.php" class="related-tool">
                            <div class="related-icon">🔢</div>
                            <div class="related-info">
                                <h4>Text Counter</h4>
                                <p>Count words and characters</p>
                            </div>
                        </a>
                        <a href="https://anylistly.com/tools/case-converter.php" class="related-tool">
                            <div class="related-icon">🔤</div>
                            <div class="related-info">
                                <h4>Case Converter</h4>
                                <p>Change text case</p>
                            </div>
                        </a>
                        <a href="https://anylistly.com/tools/" class="related-tool">
                            <div class="related-icon">🛠️</div>
                            <div class="related-info">
                                <h4>All Tools</h4>
                                <p>Browse all tools</p>
                            </div>
                        </a>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</section>

<style>
/* Tool Container */
.tool-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* Mode Toggle */
.mode-toggle {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    padding: 8px;
    background: #f9fafb;
    border-radius: 16px;
}

.mode-btn {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid transparent;
    background: transparent;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    color: #6b7280;
    font-family: 'Poppins', sans-serif;
}

.mode-btn:hover {
    color: #10b981;
    background: #f0fdf4;
}

.mode-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-color: #10b981;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

/* Form */
.lorem-form {
    margin-bottom: 40px;
}

.mode-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-group {
    margin-bottom: 28px;
}

label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 600;
    color: #1f2937;
    font-size: 16px;
}

.quantity-value {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    min-width: 50px;
    text-align: center;
}

/* Slider */
.slider {
    width: 100%;
    height: 8px;
    border-radius: 10px;
    background: #e5e7eb;
    outline: none;
    -webkit-appearance: none;
    margin-bottom: 8px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4);
    transition: all 0.3s;
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.6);
}

.slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    cursor: pointer;
    border: none;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4);
    transition: all 0.3s;
}

.slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.6);
}

.range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #9ca3af;
    padding: 0 4px;
}

/* Type Selector */
.type-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.type-option input[type="radio"] {
    display: none;
}

.type-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.type-option:hover .type-box {
    background: #f0fdf4;
    border-color: #10b981;
    transform: translateY(-3px);
}

.type-option input:checked ~ .type-box {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #10b981;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.type-icon {
    font-size: 32px;
}

.type-label {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

/* Options Grid */
.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.option-item:hover {
    background: #f0fdf4;
    border-color: #10b981;
}

.option-item input[type="checkbox"] {
    display: none;
}

.option-box {
    width: 24px;
    height: 24px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s;
}

.option-item input:checked ~ .option-box {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
}

.option-item input:checked ~ .option-box:after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.option-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.option-desc {
    font-size: 12px;
    color: #6b7280;
}

/* Textarea */
textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    background: #f9fafb;
    resize: vertical;
    min-height: 120px;
    transition: all 0.3s;
    line-height: 1.6;
}

textarea:focus {
    outline: none;
    border-color: #10b981;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.input-hint {
    font-size: 13px;
    color: #6b7280;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Generate Button */
.gen-btn {
    width: 100%;
    padding: 20px;
    font-size: 18px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    margin-top: 10px;
}

.gen-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
}

.gen-btn:active {
    transform: translateY(-1px);
}

/* Result */
.lorem-result {
    display: none;
    animation: slideIn 0.5s ease;
    margin-top: 50px;
}

.lorem-result.show {
    display: block;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.result-header h3 {
    font-size: 26px;
    color: #1f2937;
    font-weight: 700;
    margin: 0;
}

.result-stats {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: #6b7280;
    font-weight: 600;
}

.result-box {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 3px solid #10b981;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 24px;
    max-height: 500px;
    overflow-y: auto;
    line-height: 1.8;
    color: #374151;
    font-size: 15px;
}

.result-box::-webkit-scrollbar {
    width: 10px;
}

.result-box::-webkit-scrollbar-track {
    background: #f0fdf4;
    border-radius: 10px;
}

.result-box::-webkit-scrollbar-thumb {
    background: #10b981;
    border-radius: 10px;
}

.result-box p {
    margin-bottom: 16px;
}

.result-box p:last-child {
    margin-bottom: 0;
}

/* Result Actions */
.result-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.action-btn {
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
}

.action-btn.copy {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.action-btn.download {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.action-btn.new {
    background: #f3f4f6;
    color: #1f2937;
    border: 2px solid #e5e7eb;
}

.action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.action-btn.copy:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.action-btn.download:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.action-btn.new:hover {
    background: #e5e7eb;
}

/* Content Layout */
.content-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    margin-top: 40px;
}

.main-content {
    min-width: 0;
}

.content-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.content-card h2 {
    font-size: 24px;
    color: #1f2937;
    margin-bottom: 20px;
}

.content-card p {
    color: #6b7280;
    line-height: 1.8;
    margin-bottom: 16px;
}

.content-card ul {
    margin-left: 20px;
    margin-bottom: 16px;
}

.content-card li {
    color: #6b7280;
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-widget {
    background: #f9fafb;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.sidebar-widget h3 {
    font-size: 18px;
    color: #1f2937;
    margin-bottom: 16px;
}

/* Quick Buttons */
.quick-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
}

.quick-btn:hover {
    background: #f0fdf4;
    border-color: #10b981;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.quick-icon {
    font-size: 28px;
}

.quick-text {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

/* Share Buttons */
.share-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.share-btn {
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.share-facebook {
    background: #1877f2;
}

.share-twitter {
    background: #1da1f2;
}

.share-whatsapp {
    background: #25d366;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Related Tools */
.related-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.related-tool {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
}

.related-tool:hover {
    background: #f0fdf4;
    transform: translateX(5px);
}

.related-icon {
    font-size: 32px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 8px;
    flex-shrink: 0;
}

.related-info h4 {
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 4px;
}

.related-info p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .content-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .tool-container {
        padding: 35px 25px;
    }

    .mode-toggle {
        flex-direction: column;
    }

    .type-selector {
        grid-template-columns: 1fr;
    }

    .options-grid {
        grid-template-columns: 1fr;
    }

    .result-actions {
        grid-template-columns: 1fr;
    }

    .result-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .result-stats {
        width: 100%;
        justify-content: space-between;
    }

    .quick-buttons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .tool-container {
        padding: 25px 20px;
    }

    .mode-btn {
        padding: 12px 16px;
        font-size: 14px;
    }

    label {
        font-size: 15px;
    }

    .quantity-value {
        padding: 5px 14px;
        font-size: 16px;
    }

    .type-box {
        padding: 18px 14px;
    }

    .type-icon {
        font-size: 28px;
    }

    .type-label {
        font-size: 13px;
    }

    .option-item {
        padding: 14px;
    }

    .option-title {
        font-size: 13px;
    }

    .option-desc {
        font-size: 11px;
    }

    textarea {
        padding: 14px;
        font-size: 14px;
    }

    .gen-btn {
        padding: 17px;
        font-size: 16px;
    }

    .result-header h3 {
        font-size: 22px;
    }

    .result-stats {
        font-size: 13px;
        gap: 12px;
    }

    .result-box {
        padding: 24px 20px;
        font-size: 14px;
    }

    .action-btn {
        padding: 15px;
        font-size: 14px;
    }

    .content-card {
        padding: 24px;
    }

    .content-card h2 {
        font-size: 22px;
    }
}

@media (max-width: 360px) {
    .tool-container {
        padding: 20px 15px;
    }

    .result-box {
        padding: 20px 16px;
    }
}
</style>

<script>
// Lorem Ipsum text bank
const loremWords = [
    'lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipiscing', 'elit',
    'sed', 'do', 'eiusmod', 'tempor', 'incididunt', 'ut', 'labore', 'et', 'dolore',
    'magna', 'aliqua', 'enim', 'ad', 'minim', 'veniam', 'quis', 'nostrud',
    'exercitation', 'ullamco', 'laboris', 'nisi', 'aliquip', 'ex', 'ea', 'commodo',
    'consequat', 'duis', 'aute', 'irure', 'in', 'reprehenderit', 'voluptate',
    'velit', 'esse', 'cillum', 'fugiat', 'nulla', 'pariatur', 'excepteur', 'sint',
    'occaecat', 'cupidatat', 'non', 'proident', 'sunt', 'culpa', 'qui', 'officia',
    'deserunt', 'mollit', 'anim', 'id', 'est', 'laborum', 'vitae', 'suscipit',
    'tellus', 'mauris', 'pharetra', 'massa', 'ultricies', 'integer', 'malesuada',
    'fames', 'ac', 'turpis', 'egestas', 'maecenas', 'volutpat', 'blandit', 'aliquam',
    'etiam', 'tempus', 'semper', 'risus', 'viverra', 'accumsan', 'lacus', 'vel',
    'facilisis', 'varius', 'morbi', 'eros', 'cursus', 'mattis', 'pulvinar',
    'elementum', 'habitant', 'senectus', 'netus', 'faucibus', 'nisl', 'tincidunt',
    'eget', 'nullam', 'vehicula', 'ipsum', 'a', 'arcu', 'felis', 'bibendum'
];

let currentMode = 'standard';
let generatedText = '';

// Mode switching
function setMode(mode) {
    currentMode = mode;
    
    // Update buttons
    document.querySelectorAll('.mode-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');
    
    // Show/hide mode content
    if (mode === 'standard') {
        document.getElementById('standardMode').style.display = 'block';
        document.getElementById('customMode').style.display = 'none';
    } else {
        document.getElementById('standardMode').style.display = 'none';
        document.getElementById('customMode').style.display = 'block';
    }
}

// Update quantity value
document.getElementById('quantitySlider').addEventListener('input', function() {
    document.getElementById('quantityValue').textContent = this.value;
});

document.getElementById('customQuantitySlider').addEventListener('input', function() {
    document.getElementById('customQuantityValue').textContent = this.value;
});

// Update label based on generation type
document.querySelectorAll('input[name="genType"]').forEach(radio => {
    radio.addEventListener('change', function() {
        const label = document.getElementById('quantityLabel');
        const slider = document.getElementById('quantitySlider');
        
        if (this.value === 'paragraphs') {
            label.textContent = 'Number of Paragraphs';
            slider.max = 50;
        } else if (this.value === 'sentences') {
            label.textContent = 'Number of Sentences';
            slider.max = 100;
        } else {
            label.textContent = 'Number of Words';
            slider.max = 1000;
            if (slider.value > 1000) slider.value = 1000;
        }
        document.getElementById('quantityValue').textContent = slider.value;
    });
});

// Generate random sentence
function generateSentence(words, minWords = 8, maxWords = 15) {
    const sentenceLength = Math.floor(Math.random() * (maxWords - minWords + 1)) + minWords;
    const sentence = [];
    
    for (let i = 0; i < sentenceLength; i++) {
        const word = words[Math.floor(Math.random() * words.length)];
        sentence.push(i === 0 ? capitalize(word) : word);
    }
    
    return sentence.join(' ') + '.';
}

// Generate paragraph
function generateParagraph(words, minSentences = 4, maxSentences = 7) {
    const sentenceCount = Math.floor(Math.random() * (maxSentences - minSentences + 1)) + minSentences;
    const sentences = [];
    
    for (let i = 0; i < sentenceCount; i++) {
        sentences.push(generateSentence(words));
    }
    
    return sentences.join(' ');
}

// Capitalize first letter
function capitalize(word) {
    return word.charAt(0).toUpperCase() + word.slice(1);
}

// Generate Lorem Ipsum
function generateLorem() {
    const genType = document.querySelector('input[name="genType"]:checked').value;
    const quantity = parseInt(document.getElementById('quantitySlider').value);
    const startWithLorem = document.getElementById('startWithLorem').checked;
    const includeHTML = document.getElementById('includeHTML').checked;
    
    let result = [];
    
    if (genType === 'paragraphs') {
        for (let i = 0; i < quantity; i++) {
            let paragraph = generateParagraph(loremWords);
            
            // Start first paragraph with "Lorem ipsum"
            if (i === 0 && startWithLorem) {
                paragraph = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' + paragraph;
            }
            
            if (includeHTML) {
                result.push(`<p>${paragraph}</p>`);
            } else {
                result.push(paragraph);
            }
        }
        
        generatedText = includeHTML ? result.join('\n\n') : result.join('\n\n');
        
    } else if (genType === 'sentences') {
        const sentences = [];
        for (let i = 0; i < quantity; i++) {
            let sentence = generateSentence(loremWords);
            
            if (i === 0 && startWithLorem) {
                sentence = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
            }
            
            sentences.push(sentence);
        }
        
        if (includeHTML) {
            generatedText = `<p>${sentences.join(' ')}</p>`;
        } else {
            generatedText = sentences.join(' ');
        }
        
    } else { // words
        const words = [];
        for (let i = 0; i < quantity; i++) {
            words.push(loremWords[Math.floor(Math.random() * loremWords.length)]);
        }
        
        if (startWithLorem && quantity >= 2) {
            words[0] = 'Lorem';
            words[1] = 'ipsum';
        }
        
        words[0] = capitalize(words[0]);
        
        if (includeHTML) {
            generatedText = `<p>${words.join(' ')}.</p>`;
        } else {
            generatedText = words.join(' ') + '.';
        }
    }
    
    return generatedText;
}

// Generate from custom text
function generateCustom() {
    const customText = document.getElementById('customText').value.trim();
    const quantity = parseInt(document.getElementById('customQuantitySlider').value);
    const includeHTML = document.getElementById('customHTML').checked;
    
    if (!customText) {
        alert('Please enter some custom text!');
        return null;
    }
    
    // Parse custom words
    const customWords = customText.toLowerCase()
        .replace(/[^\w\s]/g, '')
        .split(/\s+/)
        .filter(word => word.length > 0);
    
    if (customWords.length < 5) {
        alert('Please enter at least 5 words for better results!');
        return null;
    }
    
    const result = [];
    
    for (let i = 0; i < quantity; i++) {
        const paragraph = generateParagraph(customWords);
        
        if (includeHTML) {
            result.push(`<p>${paragraph}</p>`);
        } else {
            result.push(paragraph);
        }
    }
    
    generatedText = includeHTML ? result.join('\n\n') : result.join('\n\n');
    return generatedText;
}

// Count words and characters
function countText(text) {
    const plainText = text.replace(/<[^>]*>/g, '');
    const words = plainText.trim().split(/\s+/).length;
    const chars = plainText.replace(/\s/g, '').length;
    return { words, chars };
}

// Form submission
document.getElementById('loremForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    let text;
    if (currentMode === 'standard') {
        text = generateLorem();
    } else {
        text = generateCustom();
    }
    
    if (!text) return;
    
    const stats = countText(text);
    
    // Display results
    const resultBox = document.getElementById('resultBox');
    if (text.includes('<p>')) {
        resultBox.innerHTML = text;
    } else {
        resultBox.innerHTML = text.split('\n\n').map(p => `<p>${p}</p>`).join('');
    }
    
    document.getElementById('resultStats').innerHTML = `
        <span>📊 ${stats.words} words</span>
        <span>🔤 ${stats.chars} characters</span>
    `;
    
    document.getElementById('loremResult').classList.add('show');
    document.getElementById('loremResult').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});

// Copy text
function copyText() {
    navigator.clipboard.writeText(generatedText).then(() => {
        const button = document.querySelector('.action-btn.copy');
        const originalText = button.textContent;
        button.textContent = '✓ Copied!';
        
        setTimeout(() => {
            button.textContent = originalText;
        }, 2000);
    });
}

// Download text
function downloadText() {
    const blob = new Blob([generatedText], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'lorem-ipsum.txt';
    a.click();
    URL.revokeObjectURL(url);
}

// Clear all
function clearAll() {
    // Hide results
    document.getElementById('loremResult').classList.remove('show');
    
    // Reset form
    document.getElementById('loremForm').reset();
    
    // Reset sliders
    document.getElementById('quantitySlider').value = 5;
    document.getElementById('quantityValue').textContent = '5';
    document.getElementById('customQuantitySlider').value = 3;
    document.getElementById('customQuantityValue').textContent = '3';
    
    // Reset to standard mode
    if (currentMode !== 'standard') {
        document.querySelector('.mode-btn[data-mode="standard"]').click();
    }
    
    // Check first radio button
    document.querySelector('input[name="genType"][value="paragraphs"]').checked = true;
    
    // Reset label
    document.getElementById('quantityLabel').textContent = 'Number of Paragraphs';
    
    // Clear generated text
    generatedText = '';
    
    // Clear custom textarea
    document.getElementById('customText').value = '';
}

// Quick generate
function quickGenerate(quantity, type) {
    document.querySelector('.mode-btn[data-mode="standard"]').click();
    
    document.querySelectorAll('input[name="genType"]').forEach(radio => {
        if (radio.value === type) {
            radio.checked = true;
            radio.dispatchEvent(new Event('change'));
        }
    });
    
    const slider = document.getElementById('quantitySlider');
    slider.value = quantity;
    document.getElementById('quantityValue').textContent = quantity;
    
    setTimeout(() => {
        document.getElementById('loremForm').dispatchEvent(new Event('submit'));
    }, 100);
}

// Share functions
function shareOnFacebook() {
    window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(location.href), '_blank', 'width=600,height=400');
}

function shareOnTwitter() {
    window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(location.href) + '&text=' + encodeURIComponent('Check out this Lorem Ipsum Generator!'), '_blank', 'width=600,height=400');
}

function shareOnWhatsApp() {
    window.open('https://wa.me/?text=' + encodeURIComponent('Check out this Lorem Ipsum Generator! ' + location.href), '_blank');
}
</script>

</main>
    <!-- Main Content Ends Here (opened in header.php) -->
    
    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                <!-- About Column -->
                <div class="footer-col">
                    <h4>About</h4>
                    <ul>
                        <li><a href="https://anylistly.com/about-us/">About Us</a></li>
                        <li><a href="https://anylistly.com/contact-us/">Contact</a></li>
                        <li><a href="https://anylistly.com/coming-soon/">Blog</a></li>
                    </ul>
                </div>
                
                <!-- Categories Column -->
                <div class="footer-col">
                    <h4>Categories</h4>
                    <ul>
                        <li><a href="https://anylistly.com/coloring-pages/">Coloring Pages</a></li>
                        <li><a href="https://anylistly.com/quotes/">Quotes & Wishes</a></li>
                        <li><a href="https://anylistly.com/tools/">Free Online Tools</a></li>
                        <li><a href="https://anylistly.com/countdowns/">Countdowns</a></li>
                    </ul>
                </div>
                
                <!-- Legal Column -->
                <div class="footer-col">
                    <h4>Legal</h4>
                    <ul>
                        <li><a href="https://anylistly.com/privacy/">Privacy Policy</a></li>
                        <li><a href="https://anylistly.com/terms/">Terms of Service</a></li>
                        <li><a href="https://anylistly.com/disclaimer/">Disclaimer</a></li>
                    </ul>
                </div>
                
                <!-- Social/Newsletter Column (Optional - Add as needed) -->
                <div class="footer-col">
                    <h4>Follow Us</h4>
                    <ul>
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Pinterest</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- Copyright -->
            <div class="copyright">
                <p>&copy; 2026 Anylistly.com – All Rights Reserved</p>
            </div>
        </div>
    </footer>
    
    <!-- Main JavaScript -->
    <script src="https://anylistly.com/assets/js/main.js"></script>
    
    
    <button id="scrollToTop" class="scroll-to-top-v3" title="Go to top">
        <span>TOP</span>
    </button>

    
</body>
</html>