

<!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 payment QR code generator - Create QR codes for UPI, PayPal, bank transfers, and digital payments. Accept payments easily!">
    <title>QR Code for Payment - Create Payment 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>Payment 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>Payment QR Code Generator</h1>
        <p style="max-width: 650px; margin: 0 auto;">Create QR codes for accepting payments. Support UPI, Bank Transfer, PayPal, Cryptocurrency, and custom payment links!</p>
    </div>
</section>

<!-- Tool Section -->
<section class="bg-gray">
    <div class="tool-container">
        <!-- QR Generator Form -->
        <div class="qr-generator-card">
            <form id="qrForm">
                <!-- Payment Method Selection -->
                <div class="form-group">
                    <label for="methodSelect">
                        <span class="label-icon">💰</span>
                        <span class="label-text">Payment Method *</span>
                    </label>
                    <select id="methodSelect" required class="form-select method-select">
                        <option value="">Select payment method</option>
                        <option value="upi" data-icon="🇮🇳" data-color="#60A05B">UPI (India)</option>
                        <option value="bank" data-icon="🏦" data-color="#1e40af">Bank Transfer</option>
                        <option value="paypal" data-icon="💙" data-color="#0070BA">PayPal</option>
                        <option value="custom" data-icon="🔗" data-color="#6366f1">Custom Payment Link</option>
                    </select>
                    <div class="input-hint">Choose your payment method</div>
                </div>

                <!-- UPI Fields (Hidden by default) -->
                <div id="upiFields" class="payment-fields" style="display:none;">
                    <div class="form-group">
                        <label for="upiIdInput">
                            <span class="label-icon">🇮🇳</span>
                            <span class="label-text">UPI ID *</span>
                        </label>
                        <input type="text" id="upiIdInput" placeholder="yourname@upi" class="form-input">
                        <div class="input-hint">Your UPI ID (e.g., username@paytm, mobile@upi)</div>
                    </div>

                    <div class="form-group">
                        <label for="upiNameInput">
                            <span class="label-icon">👤</span>
                            <span class="label-text">Payee Name *</span>
                        </label>
                        <input type="text" id="upiNameInput" placeholder="John Doe" class="form-input">
                        <div class="input-hint">Name that appears in payment request</div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="upiAmountInput">
                                <span class="label-text">Amount (₹)</span>
                            </label>
                            <input type="number" id="upiAmountInput" placeholder="100" step="0.01" min="0" class="form-input">
                        </div>

                        <div class="form-group">
                            <label for="upiNoteInput">
                                <span class="label-text">Payment Note</span>
                            </label>
                            <input type="text" id="upiNoteInput" placeholder="For services" class="form-input">
                        </div>
                    </div>
                </div>

                <!-- Bank Transfer Fields (Hidden by default) -->
                <div id="bankFields" class="payment-fields" style="display:none;">
                    <div class="form-group">
                        <label for="bankNameInput">
                            <span class="label-icon">🏦</span>
                            <span class="label-text">Bank Name *</span>
                        </label>
                        <input type="text" id="bankNameInput" placeholder="HDFC Bank" class="form-input">
                        <div class="input-hint">Name of your bank</div>
                    </div>

                    <div class="form-group">
                        <label for="accountNameInput">
                            <span class="label-icon">👤</span>
                            <span class="label-text">Account Holder Name *</span>
                        </label>
                        <input type="text" id="accountNameInput" placeholder="John Doe" class="form-input">
                        <div class="input-hint">Name as per bank account</div>
                    </div>

                    <div class="form-group">
                        <label for="accountNumberInput">
                            <span class="label-icon">💳</span>
                            <span class="label-text">Account Number *</span>
                        </label>
                        <input type="text" id="accountNumberInput" placeholder="1234567890" class="form-input">
                        <div class="input-hint">Your bank account number</div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="ifscInput">
                                <span class="label-text">IFSC / Swift Code *</span>
                            </label>
                            <input type="text" id="ifscInput" placeholder="HDFC0001234" class="form-input">
                        </div>

                        <div class="form-group">
                            <label for="branchInput">
                                <span class="label-text">Branch Name</span>
                            </label>
                            <input type="text" id="branchInput" placeholder="Main Branch" class="form-input">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="accountTypeInput">
                                <span class="label-text">Account Type</span>
                            </label>
                            <select id="accountTypeInput" class="form-select">
                                <option value="Savings">Savings</option>
                                <option value="Current">Current</option>
                                <option value="Business">Business</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="bankAmountInput">
                                <span class="label-text">Amount</span>
                            </label>
                            <input type="number" id="bankAmountInput" placeholder="1000" step="0.01" min="0" class="form-input">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="bankNoteInput">
                            <span class="label-text">Payment Reference/Note</span>
                        </label>
                        <input type="text" id="bankNoteInput" placeholder="Invoice #12345" class="form-input">
                    </div>
                </div>

                <!-- PayPal Fields (Hidden by default) -->
                <div id="paypalFields" class="payment-fields" style="display:none;">
                    <div class="form-group">
                        <label for="paypalEmailInput">
                            <span class="label-icon">📧</span>
                            <span class="label-text">PayPal Email/Username *</span>
                        </label>
                        <input type="text" id="paypalEmailInput" placeholder="your@email.com" class="form-input">
                        <div class="input-hint">Your PayPal email or PayPal.me username</div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="paypalAmountInput">
                                <span class="label-text">Amount ($)</span>
                            </label>
                            <input type="number" id="paypalAmountInput" placeholder="10.00" step="0.01" min="0" class="form-input">
                        </div>

                        <div class="form-group">
                            <label for="paypalCurrencyInput">
                                <span class="label-text">Currency</span>
                            </label>
                            <select id="paypalCurrencyInput" class="form-select">
                                <option value="USD">USD</option>
                                <option value="EUR">EUR</option>
                                <option value="GBP">GBP</option>
                                <option value="INR">INR</option>
                                <option value="CAD">CAD</option>
                                <option value="AUD">AUD</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="paypalNoteInput">
                            <span class="label-text">Payment Description</span>
                        </label>
                        <input type="text" id="paypalNoteInput" placeholder="Payment for services" class="form-input">
                    </div>
                </div>

                <!-- Custom Link Fields (Hidden by default) -->
                <div id="customFields" class="payment-fields" style="display:none;">
                    <div class="form-group">
                        <label for="customUrlInput">
                            <span class="label-icon">🔗</span>
                            <span class="label-text">Payment URL *</span>
                        </label>
                        <input type="url" id="customUrlInput" placeholder="https://payment-link.com/..." class="form-input">
                        <div class="input-hint">Your custom payment link (Stripe, Razorpay, etc.)</div>
                    </div>

                    <div class="form-group">
                        <label for="customDescInput">
                            <span class="label-text">Description</span>
                        </label>
                        <input type="text" id="customDescInput" placeholder="Payment for Order #123" class="form-input">
                    </div>
                </div>

                <!-- Size Selection -->
                <div class="form-group">
                    <label for="sizeSelect">
                        <span class="label-icon">📐</span>
                        <span class="label-text">QR Code Size</span>
                    </label>
                    <select id="sizeSelect" class="form-select">
                        <option value="200">Small (200x200px)</option>
                        <option value="300" selected>Medium (300x300px)</option>
                        <option value="400">Large (400x400px)</option>
                        <option value="500">Extra Large (500x500px)</option>
                    </select>
                </div>

                <!-- Color Selection -->
                <div class="form-group">
                    <label>
                        <span class="label-icon">🎨</span>
                        <span class="label-text">QR Code Color</span>
                    </label>
                    <div class="color-options">
                        <button type="button" class="color-btn active" data-color="#000000" style="background:#000000" title="Black">
                            <span class="check">✓</span>
                        </button>
                        <button type="button" class="color-btn" data-color="#1f2937" style="background:#1f2937" title="Dark Gray">
                            <span class="check">✓</span>
                        </button>
                        <button type="button" class="color-btn" data-color="#059669" style="background:#059669" title="Green">
                            <span class="check">✓</span>
                        </button>
                        <button type="button" class="color-btn" data-color="#0070BA" style="background:#0070BA" title="Blue">
                            <span class="check">✓</span>
                        </button>
                        <button type="button" class="color-btn" data-color="#8b5cf6" style="background:#8b5cf6" title="Purple">
                            <span class="check">✓</span>
                        </button>
                        <button type="button" class="color-btn" data-color="#F7931A" style="background:#F7931A" title="Orange">
                            <span class="check">✓</span>
                        </button>
                        <button type="button" class="color-btn" data-color="#ef4444" style="background:#ef4444" title="Red">
                            <span class="check">✓</span>
                        </button>
                        <button type="button" class="color-btn method-color" data-color="#60A05B" style="background:#60A05B" title="Method Color">
                            <span class="check">✓</span>
                        </button>
                    </div>
                    <div class="input-hint">Last color matches your selected payment method</div>
                </div>

                <!-- Generate Button -->
                <button type="submit" class="btn btn-generate">
                    <span class="btn-icon">⚡</span>
                    Generate Payment QR Code
                </button>
                
                <!-- Help Info -->
                <div class="help-info">
                    <div class="help-icon">💡</div>
                    <div class="help-text">
                        <strong>Tip:</strong> When scanned, this QR code will open the payment app or link directly. 
                        Perfect for accepting payments at your business, events, or services!
                    </div>
                </div>
            </form>
        </div>

        <!-- QR Code Result (Hidden by default) -->
        <div class="qr-result-card" id="qrResult">
            <h3 class="result-title">Your Payment QR Code is Ready! 🎉</h3>
            
            <div class="qr-display" id="qrcode"></div>
            
            <div class="qr-info" id="qrInfo"></div>
            
            <div class="action-buttons">
                <button onclick="downloadQR()" class="btn btn-download">
                    <span class="btn-icon">💾</span>
                    Download QR Code
                </button>
                <button onclick="createNew()" class="btn btn-secondary">
                    <span class="btn-icon">✨</span>
                    Create New
                </button>
            </div>
        </div>
    </div>
</section>

<!-- How to Use Section -->
<section>
    <div class="container">
        <h2>How to Use</h2>
        <div class="steps-grid">
            <div class="step-card">
                <div class="step-number">1</div>
                <h3>Choose Method</h3>
                <p>Select your preferred payment method from the dropdown</p>
            </div>
            <div class="step-card">
                <div class="step-number">2</div>
                <h3>Enter Details</h3>
                <p>Fill in your payment details (ID, address, or link)</p>
            </div>
            <div class="step-card">
                <div class="step-number">3</div>
                <h3>Generate Code</h3>
                <p>Click generate to create your payment QR code</p>
            </div>
            <div class="step-card">
                <div class="step-number">4</div>
                <h3>Accept Payments</h3>
                <p>Display at checkout, on invoices, or at your location</p>
            </div>
        </div>
    </div>
</section>

<!-- Use Cases Section -->
<section class="bg-gray">
    <div class="container">
        <h2>Perfect For</h2>
        <div class="use-cases-grid">
            <div class="use-case-card">
                <div class="use-case-icon">🏪</div>
                <h3>Retail & Shops</h3>
                <p>Accept contactless payments at point-of-sale quickly</p>
            </div>
            <div class="use-case-card">
                <div class="use-case-icon">🍽️</div>
                <h3>Restaurants & Cafes</h3>
                <p>Display QR codes on tables for easy bill payments</p>
            </div>
            <div class="use-case-card">
                <div class="use-case-icon">💼</div>
                <h3>Freelancers</h3>
                <p>Share payment QR codes on invoices and portfolios</p>
            </div>
            <div class="use-case-card">
                <div class="use-case-icon">🎟️</div>
                <h3>Events & Tickets</h3>
                <p>Collect payments for event tickets and registrations</p>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section>
    <div class="container">
        <h2>Why Use Payment QR Codes?</h2>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">⚡</div>
                <h3>Instant Payments</h3>
                <p>Customers pay instantly with one scan - no typing required</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">✓</div>
                <h3>Error-Free</h3>
                <p>Eliminate payment mistakes from manual entry</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🔒</div>
                <h3>Secure</h3>
                <p>Direct payment links ensure secure transactions</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🌍</div>
                <h3>Universal</h3>
                <p>Works with UPI, PayPal, crypto, and custom payment gateways</p>
            </div>
        </div>
    </div>
</section>

<!-- Custom Styles -->
<style>
/* Tool Container */
.tool-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* QR Generator Card */
.qr-generator-card {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

/* Form Rows (for side-by-side inputs) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 10px;
    font-size: 16px;
}

.label-icon {
    font-size: 20px;
}

/* Form Inputs */
.form-input,
.form-select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

/* Method Select - Make it bigger */
.method-select {
    font-size: 18px;
    padding: 16px 18px;
    font-weight: 500;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.input-hint {
    font-size: 13px;
    color: #6b7280;
    margin-top: 6px;
}

/* Payment Fields Animation */
.payment-fields {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Color Options */
.color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.color-btn {
    width: 50px;
    height: 50px;
    border: 3px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.color-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.color-btn.active {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

.color-btn .check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-shadow: 0 0 3px rgba(0,0,0,0.3);
}

.color-btn.active .check {
    opacity: 1;
}

/* Generate Button */
.btn-generate {
    width: 100%;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.btn-icon {
    font-size: 20px;
}

/* Help Info */
.help-info {
    display: flex;
    gap: 12px;
    background: #eff6ff;
    padding: 16px;
    border-radius: 12px;
    margin-top: 20px;
    border-left: 4px solid #3b82f6;
}

.help-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.help-text {
    font-size: 14px;
    line-height: 1.6;
    color: #1e40af;
}

.help-text strong {
    color: #1e3a8a;
    font-weight: 600;
}

/* QR Result Card */
.qr-result-card {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
    display: none;
    animation: slideUp 0.5s ease;
}

.qr-result-card.show {
    display: block;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-title {
    font-size: 24px;
    color: #1f2937;
    margin-bottom: 30px;
    font-weight: 700;
}

/* QR Display */
.qr-display {
    background: #f9fafb;
    padding: 30px;
    border-radius: 16px;
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    max-width: 100%;
}

.qr-display canvas {
    display: block;
    border-radius: 8px;
    max-width: 100%;
    height: auto !important;
    width: 100% !important;
}

.qr-display img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* QR Info */
.qr-info {
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    text-align: left;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 2;
    color: #4b5563;
}

.qr-info strong {
    color: #1f2937;
    font-weight: 600;
}

/* Action Buttons */
.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-download {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.btn-download:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.btn-secondary:hover {
    box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
}

/* Steps Grid */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.step-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.15);
}

.step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin: 0 auto 16px;
}

.step-card h3 {
    font-size: 18px;
    color: #1f2937;
    margin-bottom: 10px;
    font-weight: 600;
}

.step-card p {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

/* Use Cases Grid */
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

.use-case-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.3s ease;
}

.use-case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.15);
}

.use-case-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.use-case-card h3 {
    font-size: 18px;
    color: #1f2937;
    margin-bottom: 10px;
    font-weight: 600;
}

.use-case-card p {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

.feature-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.15);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.feature-card h3 {
    font-size: 18px;
    color: #1f2937;
    margin-bottom: 10px;
    font-weight: 600;
}

.feature-card p {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .qr-generator-card {
        padding: 24px;
    }
    
    .qr-result-card {
        padding: 24px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .qr-display {
        padding: 20px;
        width: 100%;
    }
    
    .action-buttons {
        grid-template-columns: 1fr;
    }
    
    .color-options {
        justify-content: center;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
    }
    
    .use-cases-grid {
        grid-template-columns: 1fr;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .qr-display {
        padding: 15px;
    }
    
    .color-btn {
        width: 45px;
        height: 45px;
    }
    
    .result-title {
        font-size: 20px;
    }
}
</style>

<!-- QR Code Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<!-- JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    let selectedColor = '#000000';
    const methodSelect = document.getElementById('methodSelect');
    const methodColorBtn = document.querySelector('.method-color');
    
    // Payment method configurations
    const methods = {
        upi: { icon: '🇮🇳', color: '#60A05B', name: 'UPI' },
        bank: { icon: '🏦', color: '#1e40af', name: 'Bank Transfer' },
        paypal: { icon: '💙', color: '#0070BA', name: 'PayPal' },
        custom: { icon: '🔗', color: '#6366f1', name: 'Custom Link' }
    };
    
    // Payment method selection change
    methodSelect.addEventListener('change', function() {
        const method = this.value;
        
        // Hide all payment fields
        document.querySelectorAll('.payment-fields').forEach(field => {
            field.style.display = 'none';
        });
        
        // Show selected method fields
        if (method) {
            const fieldId = method + 'Fields';
            const fieldDiv = document.getElementById(fieldId);
            if (fieldDiv) {
                fieldDiv.style.display = 'block';
            }
            
            // Update method color button
            if (methods[method]) {
                methodColorBtn.style.background = methods[method].color;
                methodColorBtn.dataset.color = methods[method].color;
            }
        }
    });
    
    // Color selection
    const colorBtns = document.querySelectorAll('.color-btn');
    colorBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            colorBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            selectedColor = this.dataset.color;
        });
    });
    
    // Generate QR Code
    document.getElementById('qrForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const method = methodSelect.value;
        const size = parseInt(document.getElementById('sizeSelect').value);
        let paymentUrl = '';
        let infoHTML = '';
        
        if (!method) {
            alert('⚠️ Please select a payment method!');
            return;
        }
        
        // Build payment URL based on method
        if (method === 'upi') {
            const upiId = document.getElementById('upiIdInput').value.trim();
            const upiName = document.getElementById('upiNameInput').value.trim();
            const upiAmount = document.getElementById('upiAmountInput').value.trim();
            const upiNote = document.getElementById('upiNoteInput').value.trim();
            
            if (!upiId || !upiName) {
                alert('⚠️ Please enter UPI ID and payee name!');
                return;
            }
            
            // UPI format: upi://pay?pa=ID&pn=NAME&am=AMOUNT&tn=NOTE
            paymentUrl = `upi://pay?pa=${upiId}&pn=${encodeURIComponent(upiName)}`;
            if (upiAmount) paymentUrl += `&am=${upiAmount}`;
            if (upiNote) paymentUrl += `&tn=${encodeURIComponent(upiNote)}`;
            
            infoHTML = `<strong>🇮🇳 Method:</strong> UPI<br>`;
            infoHTML += `<strong>💳 UPI ID:</strong> ${upiId}<br>`;
            infoHTML += `<strong>👤 Name:</strong> ${upiName}<br>`;
            if (upiAmount) infoHTML += `<strong>💰 Amount:</strong> ₹${upiAmount}<br>`;
            if (upiNote) infoHTML += `<strong>📝 Note:</strong> ${upiNote}<br>`;
            
        } else if (method === 'bank') {
            const bankName = document.getElementById('bankNameInput').value.trim();
            const accountName = document.getElementById('accountNameInput').value.trim();
            const accountNumber = document.getElementById('accountNumberInput').value.trim();
            const ifsc = document.getElementById('ifscInput').value.trim();
            const branch = document.getElementById('branchInput').value.trim();
            const accountType = document.getElementById('accountTypeInput').value;
            const bankAmount = document.getElementById('bankAmountInput').value.trim();
            const bankNote = document.getElementById('bankNoteInput').value.trim();
            
            if (!bankName || !accountName || !accountNumber || !ifsc) {
                alert('⚠️ Please fill in all required bank details!');
                return;
            }
            
            // Create formatted bank details text for QR code
            let bankDetails = `BANK TRANSFER DETAILS\n\n`;
            bankDetails += `Bank Name: ${bankName}\n`;
            bankDetails += `Account Holder: ${accountName}\n`;
            bankDetails += `Account Number: ${accountNumber}\n`;
            bankDetails += `IFSC/Swift Code: ${ifsc}\n`;
            if (branch) bankDetails += `Branch: ${branch}\n`;
            bankDetails += `Account Type: ${accountType}\n`;
            if (bankAmount) bankDetails += `Amount: ${bankAmount}\n`;
            if (bankNote) bankDetails += `Reference: ${bankNote}\n`;
            
            paymentUrl = bankDetails;
            
            infoHTML = `<strong>🏦 Method:</strong> Bank Transfer<br>`;
            infoHTML += `<strong>🏛️ Bank:</strong> ${bankName}<br>`;
            infoHTML += `<strong>👤 Account Name:</strong> ${accountName}<br>`;
            infoHTML += `<strong>💳 Account Number:</strong> ${accountNumber}<br>`;
            infoHTML += `<strong>🔢 IFSC/Swift:</strong> ${ifsc}<br>`;
            if (branch) infoHTML += `<strong>🏢 Branch:</strong> ${branch}<br>`;
            infoHTML += `<strong>📊 Type:</strong> ${accountType}<br>`;
            if (bankAmount) infoHTML += `<strong>💰 Amount:</strong> ${bankAmount}<br>`;
            if (bankNote) infoHTML += `<strong>📝 Reference:</strong> ${bankNote}<br>`;
            
        } else if (method === 'paypal') {
            const paypalEmail = document.getElementById('paypalEmailInput').value.trim();
            const paypalAmount = document.getElementById('paypalAmountInput').value.trim();
            const paypalCurrency = document.getElementById('paypalCurrencyInput').value;
            const paypalNote = document.getElementById('paypalNoteInput').value.trim();
            
            if (!paypalEmail) {
                alert('⚠️ Please enter PayPal email or username!');
                return;
            }
            
            // PayPal format
            if (paypalEmail.includes('@')) {
                paymentUrl = `https://paypal.me/${paypalEmail.split('@')[0]}`;
            } else {
                paymentUrl = `https://paypal.me/${paypalEmail}`;
            }
            
            if (paypalAmount) paymentUrl += `/${paypalAmount}${paypalCurrency}`;
            
            infoHTML = `<strong>💙 Method:</strong> PayPal<br>`;
            infoHTML += `<strong>📧 Email:</strong> ${paypalEmail}<br>`;
            if (paypalAmount) infoHTML += `<strong>💰 Amount:</strong> ${paypalCurrency} ${paypalAmount}<br>`;
            if (paypalNote) infoHTML += `<strong>📝 Note:</strong> ${paypalNote}<br>`;
            
        } else if (method === 'custom') {
            const customUrl = document.getElementById('customUrlInput').value.trim();
            const customDesc = document.getElementById('customDescInput').value.trim();
            
            if (!customUrl) {
                alert('⚠️ Please enter a payment URL!');
                return;
            }
            
            paymentUrl = customUrl;
            
            infoHTML = `<strong>🔗 Method:</strong> Custom Link<br>`;
            infoHTML += `<strong>🌐 URL:</strong> <a href="${paymentUrl}" target="_blank" style="color:#3b82f6;word-break:break-all">${paymentUrl}</a><br>`;
            if (customDesc) infoHTML += `<strong>📝 Description:</strong> ${customDesc}<br>`;
        }
        
        // Clear previous QR code
        const qrcodeDiv = document.getElementById('qrcode');
        qrcodeDiv.innerHTML = '';
        
        try {
            // Generate new QR code
            new QRCode(qrcodeDiv, {
                text: paymentUrl,
                width: size,
                height: size,
                colorDark: selectedColor,
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.M
            });
            
            // Update info
            const colorDisplay = `<span style="display:inline-block;width:20px;height:20px;background:${selectedColor};border:2px solid #ddd;border-radius:4px;vertical-align:middle;margin-right:6px"></span>${selectedColor.toUpperCase()}`;
            
            infoHTML += `<strong>📐 Size:</strong> ${size}x${size}px<br>`;
            infoHTML += `<strong>🎨 Color:</strong> ${colorDisplay}`;
            
            document.getElementById('qrInfo').innerHTML = infoHTML;
            
            // Show result
            document.getElementById('qrResult').classList.add('show');
            document.getElementById('qrResult').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            
            showToast('✅ Payment QR Code generated successfully!');
            
        } catch (error) {
            console.error('QR Generation Error:', error);
            alert('❌ Failed to generate QR code. Please check your inputs and try again.');
        }
    });
});

// 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 = `payment-qr-code-${Date.now()}.png`;
    a.click();
    
    showToast('✅ QR Code downloaded successfully!');
}

// Create New QR Code
function createNew() {
    document.getElementById('qrForm').reset();
    document.querySelectorAll('.payment-fields').forEach(field => {
        field.style.display = 'none';
    });
    
    document.querySelectorAll('.color-btn').forEach(btn => btn.classList.remove('active'));
    document.querySelector('.color-btn[data-color="#000000"]').classList.add('active');
    document.getElementById('qrResult').classList.remove('show');
    document.getElementById('methodSelect').focus();
    
    showToast('✨ Ready to create a new payment QR code!');
}

// Toast Notification
function showToast(message) {
    const toast = document.createElement('div');
    toast.style.cssText = `
        position: fixed;
        bottom: 30px;
        right: 30px;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        padding: 16px 24px;
        border-radius: 12px;
        font-weight: 600;
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
        z-index: 10000;
        animation: slideIn 0.4s ease;
        font-family: 'Poppins', sans-serif;
    `;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.style.animation = 'slideOut 0.4s ease';
        setTimeout(() => toast.remove(), 400);
    }, 3000);
}

// Add animations
const style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from { transform: translateX(400px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideOut {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(400px); opacity: 0; }
    }
`;
document.head.appendChild(style);
</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>