

<!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 URL QR code generator - Create QR codes for any website or webpage. Instant generation and free download!">
    <title>QR Code for URL - Create Website QR Codes | 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>
        <a href="https://anylistly.com/tools/qr-generators/">QR Generators</a>
        <span>›</span>
        <strong>URL QR Code</strong>
    </div>
</div>

<!-- Page Header -->
<section class="page-header" style="background: linear-gradient(135deg, #f3e8ff 0%, #fff 100%);">
    <div class="container" style="text-align: center;">
        <div style="font-size: 70px; margin-bottom: 16px;">🔗</div>
        <h1>URL QR Code Generator</h1>
        <p style="max-width: 650px; margin: 0 auto;">Create QR codes for any website or webpage. Perfect for business cards, posters, and marketing materials!</p>
    </div>
</section>

<!-- Tool Section -->
<section class="bg-gray">
    <div class="tool-container">
        <form id="qrForm" class="qr-form">
            <div class="form-group">
                <label for="urlInput">Website URL</label>
                <div class="input-wrapper">
                    <span class="input-icon">🔗</span>
                    <input type="url" id="urlInput" placeholder="https://example.com" required>
                </div>
                <div class="input-hint">Enter the complete URL including https://</div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="sizeSelect">QR Code Size</label>
                    <select id="sizeSelect">
                        <option value="200">Small (200x200)</option>
                        <option value="300" selected>Medium (300x300)</option>
                        <option value="400">Large (400x400)</option>
                        <option value="500">Extra Large (500x500)</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>🎨 QR Code Color</label>
                    <div class="color-picker">
                        <div class="color-option active" data-color="#000000" style="background:#000000" title="Black"></div>
                        <div class="color-option" data-color="#3b82f6" style="background:#3b82f6" title="Blue"></div>
                        <div class="color-option" data-color="#10b981" style="background:#10b981" title="Green"></div>
                        <div class="color-option" data-color="#ef4444" style="background:#ef4444" title="Red"></div>
                        <div class="color-option" data-color="#a855f7" style="background:#a855f7" title="Purple"></div>
                        <div class="color-option" data-color="#f59e0b" style="background:#f59e0b" title="Orange"></div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" id="logoCheckbox">
                    <span class="checkbox-custom"></span>
                    <span class="checkbox-text">📷 Add Logo to QR Code</span>
                </label>
            </div>

            <div class="logo-upload-section" id="logoUploadSection" style="display: none;">
                <input type="file" id="logoInput" accept="image/png,image/jpeg,image/jpg,image/gif" style="display:none">
                
                <!-- Upload Box (shows when no logo is uploaded) -->
                <div class="upload-box" id="uploadBox" onclick="document.getElementById('logoInput').click()">
                    <div class="upload-icon">📤</div>
                    <div class="upload-text">Click to upload logo</div>
                    <div class="upload-hint">PNG, JPG, GIF • Max 2MB</div>
                </div>

                <!-- Logo Preview Box (shows after logo is uploaded) -->
                <div class="logo-preview-box" id="logoPreviewBox" style="display:none">
                    <img id="logoPreview" alt="Logo Preview">
                    <div class="logo-actions">
                        <button type="button" class="logo-btn change" onclick="document.getElementById('logoInput').click()">
                            🔄 Change
                        </button>
                        <button type="button" class="logo-btn remove" onclick="removeLogo()">
                            🗑️ Remove
                        </button>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn gen-btn">🚀 Generate QR Code</button>
        </form>

        <!-- QR Code Result -->
        <div class="qr-result" id="qrResult">
            <h3>✨ Your QR Code</h3>
            <div class="qr-display">
                <div id="qrcode"></div>
            </div>
            <div class="qr-info" id="qrInfo"></div>
            <div class="qr-actions">
                <button class="action-btn download" onclick="downloadQR()">💾 Download QR Code</button>
                <button class="action-btn new" onclick="createNew()">🔄 Create New</button>
            </div>
        </div>

        <!-- Back to Hub -->
        <div class="back-link">
            <a href="https://anylistly.com//tools/qr-generators/">← Back to QR Generators</a>
        </div>
    </div>
</section>

<!-- Content Section -->
<section>
    <div class="container">
        <div class="content-layout">
            <div class="main-content">
                <div class="content-card">
                    <h2>🔗 About URL QR Codes</h2>
                    <p>URL QR codes allow you to share website links in a scannable format. When someone scans your QR code with their phone, they'll be taken directly to your website!</p>
                    <p>Perfect for business cards, flyers, posters, product packaging, and any printed material where you want to drive traffic to your website.</p>
                </div>

                <div class="content-card">
                    <h2>📝 How to Use</h2>
                    <ul>
                        <li>Enter your website URL (must include https://)</li>
                        <li>Choose your preferred QR code size</li>
                        <li>Select a color (or keep it black)</li>
                        <li>Click "Generate QR Code"</li>
                        <li>Download your QR code image</li>
                        <li>Print or share digitally!</li>
                    </ul>
                </div>

                <div class="content-card">
                    <h2>💡 Best Practices</h2>
                    <ul>
                        <li><strong>Test First:</strong> Always scan your QR code before printing</li>
                        <li><strong>Keep URLs Short:</strong> Shorter URLs create simpler QR codes</li>
                        <li><strong>Use Contrast:</strong> Black on white works best</li>
                        <li><strong>Size Matters:</strong> Larger QR codes scan more reliably</li>
                        <li><strong>Leave White Space:</strong> Add margins around your QR code</li>
                        <li><strong>Logo Size:</strong> Keep logos small (max 20% of QR code)</li>
                        <li><strong>High Error Correction:</strong> Use high error correction with logos</li>
                    </ul>
                </div>

                <div class="content-card">
                    <h2>🎯 Common Uses</h2>
                    <ul>
                        <li>Business cards and marketing materials</li>
                        <li>Product packaging and labels</li>
                        <li>Restaurant menus and table tents</li>
                        <li>Event posters and flyers</li>
                        <li>Real estate signs</li>
                        <li>Digital portfolios and resumes</li>
                    </ul>
                </div>
            </div>

            <aside class="sidebar">
                <div class="sidebar-widget">
                    <h3>🎨 Other QR Types</h3>
                    <div class="other-types">
                        <a href="https://anylistly.com/tools/qr-generators/qr-code-for-text.php" class="type-link">
                            <span class="type-icon">📝</span>
                            <span class="type-name">Plain Text</span>
                        </a>
                        <a href="https://anylistly.com/tools/qr-generators/qr-code-for-wifi.php" class="type-link">
                            <span class="type-icon">📶</span>
                            <span class="type-name">WiFi Network</span>
                        </a>
                        <a href="https://anylistly.com/tools/qr-generators/qr-code-for-vcard.php" class="type-link">
                            <span class="type-icon">👤</span>
                            <span class="type-name">Contact Card</span>
                        </a>
                        <a href="https://anylistly.com/tools/qr-generators/qr-code-for-email.php" class="type-link">
                            <span class="type-icon">📧</span>
                            <span class="type-name">Email</span>
                        </a>
                        <a href="https://anylistly.com/tools/qr-generators/" class="type-link all">
                            <span class="type-icon">📱</span>
                            <span class="type-name">View All Types</span>
                        </a>
                    </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>
            </aside>
        </div>
    </div>
</section>

<style>
/* Tool Container */
.tool-container {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* QR Form */
.qr-form {
    margin-bottom: 40px;
}

/* Form Group */
.form-group {
    margin-bottom: 24px;
}

/* Input Wrapper */
.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    pointer-events: none;
    z-index: 1;
}

/* Labels */
label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
}

/* Input Fields */
input[type="url"],
select {
    width: 100%;
    padding: 16px 16px 16px 50px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s;
    background: #f9fafb;
}

input[type="url"]:focus,
select:focus {
    outline: none;
    border-color: #a855f7;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(168,85,247,0.1);
}

/* Select Dropdown */
select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding: 16px 40px 16px 20px;
}

/* Input Hint */
.input-hint {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 8px;
}

/* Form Row */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

/* Checkbox Label Styling */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    transition: all 0.3s;
    border: 2px solid #e5e7eb;
}

.checkbox-label:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    position: relative;
    width: 52px;
    height: 28px;
    background: #d1d5db;
    border-radius: 50px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.checkbox-custom:before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.checkbox-label input:checked ~ .checkbox-custom {
    background: #a855f7;
}

.checkbox-label input:checked ~ .checkbox-custom:before {
    transform: translateX(24px);
}

.checkbox-text {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    flex: 1;
}

/* Logo Upload Section */
.logo-upload-section {
    margin-top: 20px;
    margin-bottom: 20px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

.logo-upload-section.show {
    opacity: 1;
    max-height: 600px;
}

/* Upload Box */
.upload-box {
    width: 100%;
    border: 3px dashed #d1d5db;
    border-radius: 16px;
    background: #f9fafb;
    padding: 50px 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.upload-box:hover {
    border-color: #a855f7;
    background: #faf5ff;
    transform: translateY(-2px);
}

.upload-icon {
    font-size: 56px;
    margin-bottom: 16px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.upload-text {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.upload-hint {
    font-size: 14px;
    color: #6b7280;
}

/* Logo Preview Box */
.logo-preview-box {
    width: 100%;
    padding: 30px;
    text-align: center;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 3px solid #a855f7;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.15);
    position: relative;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.logo-preview-box img {
    max-width: 180px;
    max-height: 180px;
    width: auto;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
    margin: 0 auto 24px;
    display: block;
    background: #fff;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.logo-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.logo-btn {
    padding: 12px 28px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
    flex: 1;
    max-width: 150px;
}

.logo-btn.change {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.logo-btn.remove {
    background: #fff;
    color: #ef4444;
    border: 2px solid #ef4444;
}

.logo-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.logo-btn.change:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.logo-btn.remove:hover {
    background: #ef4444;
    color: #fff;
}

/* Color Picker */
.color-picker {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.color-option {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s;
    position: relative;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.color-option:hover {
    transform: scale(1.15);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.color-option.active {
    border-color: #a855f7;
    box-shadow: 0 0 0 4px rgba(168,85,247,0.25);
    transform: scale(1.1);
}

.color-option.active:after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Generate Button */
.gen-btn {
    width: 100%;
    padding: 20px;
    font-size: 18px;
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(168,85,247,0.3);
}

.gen-btn:hover {
    background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(168,85,247,0.5);
}

.gen-btn:active {
    transform: translateY(-1px);
}

/* QR Result */
.qr-result {
    display: none;
    animation: slideIn 0.5s ease;
    text-align: center;
    margin-top: 50px;
}

.qr-result.show {
    display: block;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qr-result h3 {
    font-size: 28px;
    color: #7e22ce;
    margin-bottom: 30px;
    font-weight: 700;
}

.qr-display {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    padding: 40px;
    border-radius: 20px;
    margin-bottom: 24px;
    border: 3px solid #a855f7;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 25px rgba(168,85,247,0.2);
}

#qrcode {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.qr-info {
    background: #fff;
    padding: 24px;
    border-radius: 14px;
    margin-bottom: 24px;
    font-size: 15px;
    color: #4b5563;
    border: 2px solid #e5e7eb;
    line-height: 1.8;
    text-align: left;
}

.qr-info strong {
    color: #1f2937;
    font-weight: 700;
}

.qr-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.action-btn {
    padding: 18px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
}

.action-btn.download {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 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.download:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.action-btn.new:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

/* Back Link */
.back-link {
    text-align: center;
    margin-top: 40px;
}

.back-link a {
    color: #a855f7;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.back-link a:hover {
    color: #7e22ce;
    gap: 12px;
}

/* 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;
}

.other-types {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.type-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.type-link:hover {
    background: #f3e8ff;
    border-color: #a855f7;
    transform: translateX(5px);
}

.type-link.all {
    border-color: #a855f7;
}

.type-icon {
    font-size: 24px;
}

.type-name {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}

.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);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .content-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .tool-container {
        padding: 35px 25px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .color-picker {
        justify-content: flex-start;
    }

    .color-option {
        width: 44px;
        height: 44px;
    }

    .qr-actions {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .upload-box {
        padding: 40px 25px;
    }

    .logo-preview-box {
        padding: 25px 20px;
    }

    .logo-preview-box img {
        max-width: 150px;
        max-height: 150px;
    }

    .logo-actions {
        flex-direction: column;
        width: 100%;
    }

    .logo-btn {
        max-width: 100%;
        width: 100%;
    }

    .upload-icon {
        font-size: 48px;
    }

    .upload-text {
        font-size: 16px;
    }

    .qr-display {
        padding: 30px 20px;
    }

    .qr-result h3 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .tool-container {
        padding: 25px 20px;
    }

    input[type="url"],
    select {
        padding: 14px 14px 14px 45px;
        font-size: 15px;
    }

    .input-icon {
        font-size: 18px;
        left: 14px;
    }

    .checkbox-label {
        padding: 14px;
    }

    .checkbox-text {
        font-size: 14px;
    }

    .color-option {
        width: 40px;
        height: 40px;
    }

    .logo-preview-box img {
        max-width: 130px;
        max-height: 130px;
    }

    .upload-box {
        padding: 35px 20px;
    }

    .upload-icon {
        font-size: 42px;
        margin-bottom: 12px;
    }

    .upload-text {
        font-size: 15px;
    }

    .upload-hint {
        font-size: 13px;
    }

    .logo-btn {
        padding: 11px 20px;
        font-size: 14px;
    }

    .gen-btn {
        padding: 17px;
        font-size: 16px;
    }

    .action-btn {
        padding: 16px;
        font-size: 15px;
    }

    .qr-display {
        padding: 25px 15px;
    }

    #qrcode {
        padding: 15px;
    }

    .qr-info {
        padding: 20px;
        font-size: 14px;
    }

    .content-card {
        padding: 24px;
    }

    .content-card h2 {
        font-size: 22px;
    }
}

@media (max-width: 360px) {
    .tool-container {
        padding: 20px 15px;
    }

    .color-picker {
        gap: 10px;
    }

    .color-option {
        width: 38px;
        height: 38px;
    }

    .logo-preview-box img {
        max-width: 110px;
        max-height: 110px;
    }
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
let qrCodeObj = null;
let logoDataURL = null;
let selectedColor = '#000000';

// Color selection
document.querySelectorAll('.color-option').forEach(option => {
    option.addEventListener('click', function() {
        document.querySelectorAll('.color-option').forEach(o => o.classList.remove('active'));
        this.classList.add('active');
        selectedColor = this.dataset.color;
    });
});

// Logo checkbox toggle
document.getElementById('logoCheckbox').addEventListener('change', function() {
    const section = document.getElementById('logoUploadSection');
    if (this.checked) {
        section.classList.add('show');
        section.style.display = 'block';
    } else {
        section.classList.remove('show');
        setTimeout(() => {
            if (!this.checked) {
                section.style.display = 'none';
            }
        }, 400);
        removeLogo();
    }
});

// Logo file input
document.getElementById('logoInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    if (file.size > 2 * 1024 * 1024) {
        alert('Logo must be less than 2MB!');
        this.value = '';
        return;
    }

    if (!file.type.startsWith('image/')) {
        alert('Please upload an image file!');
        this.value = '';
        return;
    }

    const reader = new FileReader();
    reader.onload = function(event) {
        logoDataURL = event.target.result;
        document.getElementById('logoPreview').src = logoDataURL;
        document.getElementById('uploadBox').style.display = 'none';
        document.getElementById('logoPreviewBox').style.display = 'block';
    };
    reader.readAsDataURL(file);
});

// Remove logo function
function removeLogo() {
    logoDataURL = null;
    document.getElementById('logoInput').value = '';
    document.getElementById('uploadBox').style.display = 'block';
    document.getElementById('logoPreviewBox').style.display = 'none';
}

// QR Code generation
document.getElementById('qrForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const url = document.getElementById('urlInput').value.trim();
    const size = parseInt(document.getElementById('sizeSelect').value);

    if (!url) {
        alert('Please enter a URL!');
        return;
    }

    if (!url.startsWith('http://') && !url.startsWith('https://')) {
        alert('URL must start with http:// or https://');
        return;
    }

    const qrDiv = document.getElementById('qrcode');
    qrDiv.innerHTML = '';

    qrCodeObj = new QRCode(qrDiv, {
        text: url,
        width: size,
        height: size,
        colorDark: selectedColor,
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
    });

    setTimeout(() => {
        if (logoDataURL) {
            const canvas = document.querySelector('#qrcode canvas');
            const ctx = canvas.getContext('2d');
            const logo = new Image();
            logo.onload = function() {
                const logoSize = size * 0.2;
                const x = (size - logoSize) / 2;
                const y = (size - logoSize) / 2;
                
                // White background for logo
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(x - 5, y - 5, logoSize + 10, logoSize + 10);
                
                // Draw logo
                ctx.drawImage(logo, x, y, logoSize, logoSize);
            };
            logo.src = logoDataURL;
        }
    }, 100);

    document.getElementById('qrInfo').innerHTML = `<strong>URL:</strong> ${url}<br><strong>Size:</strong> ${size}x${size}px<br><strong>Color:</strong> <span style="display:inline-block;width:18px;height:18px;background:${selectedColor};border:2px solid #ddd;border-radius:4px;vertical-align:middle;margin-left:5px"></span> ${selectedColor}`;
    
    document.getElementById('qrResult').classList.add('show');
    document.getElementById('qrResult').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});

// Download QR code
function downloadQR() {
    const canvas = document.querySelector('#qrcode canvas');
    if (!canvas) {
        alert('Please generate a QR code first!');
        return;
    }
    
    const url = canvas.toDataURL('image/png');
    const a = document.createElement('a');
    a.href = url;
    a.download = 'qr-code-url.png';
    a.click();
}

// Create new QR code
function createNew() {
    document.getElementById('qrForm').reset();
    document.getElementById('logoCheckbox').checked = false;
    document.getElementById('logoUploadSection').classList.remove('show');
    document.getElementById('logoUploadSection').style.display = 'none';
    removeLogo();
    
    document.querySelectorAll('.color-option').forEach(o => o.classList.remove('active'));
    document.querySelector('.color-option[data-color="#000000"]').classList.add('active');
    selectedColor = '#000000';
    
    document.getElementById('qrResult').classList.remove('show');
    document.getElementById('urlInput').focus();
}

// 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 QR Code Generator!'), '_blank', 'width=600,height=400');
}

function shareOnWhatsApp() {
    window.open('https://wa.me/?text=' + encodeURIComponent('Check out this QR Code 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>