Spaces:

ajitbilLINORE121
/

anycoder-9a7714a2

Running

App Files Files Community

ajitbilLINORE121 commited on Jan 27

Commit

f83d940

verified ·

1 Parent(s): 2ba66e4

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +909 -839

index.html CHANGED Viewed

@@ -1,868 +1,937 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GYNX TRADE - Global Wholesale & Retail Platform</title>
-    <!-- FontAwesome for Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            /* Palette: Dark Mode with Gold Accents (Premium Trade Look) */
-            --bg-dark: #0f1115;
-            --bg-card: #1a1d24;
-            --bg-card-hover: #232730;
-            --primary: #D4AF37; /* Gold */
-            --primary-glow: rgba(212, 175, 55, 0.4);
-            --accent: #00bcd4; /* Cyan for Tech/Banking feel */
-            --text-main: #ffffff;
-            --text-muted: #a0a3b1;
-            --success: #00e676;
-            --danger: #ff5252;
-            --border: #2c3038;
-            --radius: 12px;
-            --shadow: 0 10px 30px rgba(0,0,0,0.5);
-            --font-main: 'Outfit', sans-serif;
-            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-        }
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-            outline: none;
-        }
-        body {
-            font-family: var(--font-main);
-            background-color: var(--bg-dark);
-            color: var(--text-main);
-            overflow-x: hidden;
-            line-height: 1.6;
-        }
-        /* --- Scrollbar --- */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: var(--bg-dark);
-        }
-        ::-webkit-scrollbar-thumb {
-            background: var(--border);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--primary);
-        }
-        /* --- Animations --- */
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes pulseGold {
-            0% { box-shadow: 0 0 0 0 var(--primary-glow); }
-            70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
-            100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
-        }
-        @keyframes slideInRight {
-            from { transform: translateX(100%); }
-            to { transform: translateX(0); }
-        }
-        /* --- Header --- */
-        header {
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-            background: rgba(15, 17, 21, 0.9);
-            backdrop-filter: blur(12px);
-            border-bottom: 1px solid var(--border);
-            padding: 1rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .logo {
-            font-size: 1.8rem;
-            font-weight: 800;
-            color: var(--text-main);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            text-decoration: none;
-        }
-        .logo span {
-            color: var(--primary);
-        }
-        .logo i {
-            font-size: 1.5rem;
-            color: var(--primary);
-        }
-        .nav-links {
-            display: flex;
-            gap: 2rem;
-        }
-        .nav-links a {
-            color: var(--text-muted);
-            text-decoration: none;
-            font-weight: 500;
-            transition: var(--transition);
-            position: relative;
-        }
-        .nav-links a:hover, .nav-links a.active {
-            color: var(--primary);
-        }
-        .nav-links a::after {
-            content: '';
-            position: absolute;
-            bottom: -5px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: var(--primary);
-            transition: var(--transition);
-        }
-        .nav-links a:hover::after {
-            width: 100%;
-        }
-        .header-actions {
-            display: flex;
-            gap: 1rem;
-        }
-        .btn {
-            padding: 0.6rem 1.2rem;
-            border-radius: 50px;
-            border: none;
-            cursor: pointer;
-            font-weight: 600;
-            font-family: inherit;
-            transition: var(--transition);
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            text-decoration: none;
-        }
-        .btn-outline {
-            background: transparent;
-            border: 1px solid var(--border);
-            color: var(--text-main);
-        }
-        .btn-outline:hover {
-            border-color: var(--primary);
-            color: var(--primary);
-        }
-        .btn-primary {
-            background: linear-gradient(135deg, var(--primary), #b8860b);
-            color: #000;
-            box-shadow: 0 4px 15px var(--primary-glow);
-        }
-        .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px var(--primary-glow);
-        }
-        .btn-block {
-            width: 100%;
-            justify-content: center;
-        }
-        /* --- Hero Section --- */
-        .hero {
-            padding: 4rem 2rem;
-            text-align: center;
-            background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
-            position: relative;
-            overflow: hidden;
-        }
-        .hero::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: url('https://www.transparenttextures.com/patterns/cubes.png');
-            opacity: 0.05;
-            pointer-events: none;
-        }
-        .hero h1 {
-            font-size: 3.5rem;
-            margin-bottom: 1rem;
-            line-height: 1.1;
-        }
-        .hero h1 span {
-            background: linear-gradient(to right, var(--primary), var(--accent));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .hero p {
-            font-size: 1.2rem;
-            color: var(--text-muted);
-            max-width: 600px;
-            margin: 0 auto 2.5rem;
-        }
-        .hero-stats {
-            display: flex;
-            justify-content: center;
-            gap: 3rem;
-            margin-top: 3rem;
-            flex-wrap: wrap;
-        }
-        .stat-item h3 {
-            font-size: 2rem;
-            color: var(--text-main);
-        }
-        .stat-item p {
-            font-size: 0.9rem;
-            margin: 0;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        /* --- Banking System Integration Banner --- */
-        .banking-banner {
-            background: linear-gradient(90deg, #1a1d24, #0f1115);
-            border: 1px solid var(--border);
-            border-radius: var(--radius);
-            padding: 1.5rem;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin: 2rem auto;
-            max-width: 1200px;
-            position: relative;
-            overflow: hidden;
-        }
-        .banking-banner::after {
-            content: '';
-            position: absolute;
-            right: 0;
-            top: 0;
-            height: 100%;
-            width: 5px;
-            background: var(--accent);
-            box-shadow: 0 0 15px var(--accent);
-        }
-        .banking-info h2 {
-            font-size: 1.5rem;
-            margin-bottom: 0.5rem;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .banking-info p {
-            color: var(--text-muted);
-            font-size: 0.95rem;
-        }
-        .bank-icons {
-            display: flex;
-            gap: 1rem;
-        }
-        .bank-icon {
-            width: 50px;
-            height: 50px;
-            background: var(--bg-card);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--accent);
-            font-size: 1.5rem;
-            border: 1px solid var(--border);
-            transition: var(--transition);
-        }
-        .bank-icon:hover {
-            border-color: var(--accent);
-            background: var(--accent);
-            color: #fff;
-        }
-        /* --- Marketplace Grid --- */
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-        .section-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-end;
-            margin-bottom: 2rem;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-        .section-title h2 {
-            font-size: 2rem;
-            margin-bottom: 0.5rem;
-        }
-        .section-title p {
-            color: var(--text-muted);
-        }
-        .filters {
-            display: flex;
-            gap: 1rem;
-            background: var(--bg-card);
-            padding: 0.5rem;
-            border-radius: 50px;
-            border: 1px solid var(--border);
-        }
-        .filter-btn {
-            background: none;
-            border: none;
-            color: var(--text-muted);
-            padding: 0.5rem 1.2rem;
-            border-radius: 40px;
-            cursor: pointer;
-            transition: var(--transition);
-            font-family: inherit;
-            font-weight: 500;
-        }
-        .filter-btn.active, .filter-btn:hover {
-            background: var(--border);
-            color: var(--text-main);
-        }
-        .products-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-            gap: 2rem;
-        }
-        .product-card {
-            background: var(--bg-card);
-            border-radius: var(--radius);
-            overflow: hidden;
-            border: 1px solid var(--border);
-            transition: var(--transition);
-            position: relative;
-            display: flex;
-            flex-direction: column;
-        }
-        .product-card:hover {
-            transform: translateY(-8px);
-            border-color: var(--primary);
-            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
-        }
-        .badge-ad {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            background: linear-gradient(135deg, #ff9800, #ff5722);
-            color: white;
-            padding: 4px 10px;
-            border-radius: 4px;
-            font-size: 0.75rem;
-            font-weight: 700;
-            z-index: 2;
-            box-shadow: 0 2px 10px rgba(255, 87, 34, 0.4);
-        }
-        .product-image {
-            width: 100%;
-            height: 200px;
-            object-fit: cover;
-            background: #2a2e35;
-        }
-        .product-info {
-            padding: 1.5rem;
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-        }
-        .product-category {
-            font-size: 0.8rem;
-            color: var(--primary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 0.5rem;
-        }
-        .product-title {
-            font-size: 1.1rem;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-            line-height: 1.4;
-        }
-        .product-meta {
-            display: flex;
-            justify-content: space-between;
-            font-size: 0.9rem;
-            color: var(--text-muted);
-            margin-bottom: 1rem;
-        }
-        .product-price {
-            font-size: 1.4rem;
-            font-weight: 700;
-            color: var(--text-main);
-            margin-top: auto;
-            margin-bottom: 1rem;
-        }
-        .product-actions {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-        }
-        .btn-sm {
-            padding: 0.5rem;
-            font-size: 0.9rem;
-        }
-        /* --- Advertiser Section --- */
-        .advertiser-section {
-            background: linear-gradient(rgba(15, 17, 21, 0.9), rgba(15, 17, 21, 0.9)), url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
-            background-size: cover;
-            background-attachment: fixed;
-            padding: 5rem 2rem;
-            text-align: center;
-            border-top: 1px solid var(--border);
-            border-bottom: 1px solid var(--border);
-        }
-        .advertiser-content {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-        .advertiser-content h2 {
-            font-size: 2.5rem;
-            margin-bottom: 1rem;
-        }
-        .advertiser-content p {
-            font-size: 1.1rem;
-            color: #ccc;
-            margin-bottom: 2rem;
-        }
-        /* --- Footer --- */
-        footer {
-            background: #0b0d10;
-            padding: 4rem 2rem 1rem;
-            border-top: 1px solid var(--border);
-        }
-        .footer-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 3rem;
-            max-width: 1400px;
-            margin: 0 auto;
-            margin-bottom: 3rem;
-        }
-        .footer-col h4 {
-            color: var(--text-main);
-            margin-bottom: 1.5rem;
-            font-size: 1.1rem;
-        }
-        .footer-col ul {
-            list-style: none;
-        }
-        .footer-col ul li {
-            margin-bottom: 0.8rem;
-        }
-        .footer-col ul li a {
-            color: var(--text-muted);
-            text-decoration: none;
-            transition: var(--transition);
-        }
-        .footer-col ul li a:hover {
-            color: var(--primary);
-            padding-left: 5px;
-        }
-        .footer-bottom {
-            text-align: center;
-            padding-top: 2rem;
-            border-top: 1px solid var(--border);
-            color: var(--text-muted);
-            font-size: 0.9rem;
-        }
-        .footer-bottom a {
-            color: var(--primary);
-            text-decoration: none;
-        }
-        /* --- Modal --- */
-        .modal-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0,0,0,0.8);
-            z-index: 2000;
-            display: none;
-            justify-content: center;
-            align-items: center;
-            backdrop-filter: blur(5px);
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-        .modal-overlay.active {
-            display: flex;
-            opacity: 1;
-        }
-        .modal {
-            background: var(--bg-card);
-            width: 90%;
-            max-width: 500px;
-            border-radius: var(--radius);
-            border: 1px solid var(--border);
-            padding: 2rem;
-            position: relative;
-            transform: scale(0.9);
-            transition: transform 0.3s ease;
-        }
-        .modal-overlay.active .modal {
-            transform: scale(1);
-        }
-        .close-modal {
-            position: absolute;
-            top: 1rem;
-            right: 1rem;
-            background: none;
-            border: none;
-            color: var(--text-muted);
-            font-size: 1.5rem;
-            cursor: pointer;
-        }
-        .form-group {
-            margin-bottom: 1.5rem;
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: 0.5rem;
-            color: var(--text-muted);
-            font-size: 0.9rem;
-        }
-        .form-control {
-            width: 100%;
-            padding: 0.8rem;
-            background: var(--bg-dark);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            color: var(--text-main);
-            font-family: inherit;
-        }
-        .form-control:focus {
-            border-color: var(--primary);
-        }
-        /* --- Toast Notification --- */
-        .toast-container {
-            position: fixed;
-            bottom: 2rem;
-            right: 2rem;
-            z-index: 3000;
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .toast {
-            background: var(--bg-card);
-            border-left: 4px solid var(--primary);
-            padding: 1rem 1.5rem;
-            border-radius: 4px;
-            box-shadow: var(--shadow);
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            min-width: 300px;
-            animation: slideInRight 0.3s ease;
-        }
-        .toast.success { border-color: var(--success); }
-        .toast.error { border-color: var(--danger); }
-        .toast i { font-size: 1.2rem; }
-        .toast.success i { color: var(--success); }
-        .toast.error i { color: var(--danger); }
-        /* --- Responsive --- */
-        @media (max-width: 768px) {
-            .hero h1 { font-size: 2.5rem; }
-            .nav-links { display: none; } /* Simplified for mobile */
-            .section-header { flex-direction: column; align-items: flex-start; }
-            .filters { width: 100%; overflow-x: auto; }
-            .banking-banner { flex-direction: column; text-align: center; gap: 1.5rem; }
-            .bank-icons { justify-content: center; }
-        }
-    </style>
 </head>
 <body>
-    <!-- Header -->
-    <header>
-        <a href="#" class="logo">
-            <i class="fa-solid fa-earth-americas"></i>
-            GYNX<span>TRADE</span>
-        </a>
-        <nav class="nav-links">
-            <a href="#" class="active">Marketplace</a>
-            <a href="#wholesale">Wholesale</a>
-            <a href="#retail">Retail</a>
-            <a href="#advertising">Advertise</a>
-        </nav>
-        <div class="header-actions">
-            <button class="btn btn-outline" onclick="openModal('loginModal')">
                 <i class="fa-regular fa-user"></i> Sign In
             </button>
-            <button class="btn btn-primary" onclick="openModal('sellModal')">
                 <i class="fa-solid fa-plus"></i> List Item
             </button>
-        </div>
-    </header>
-    <!-- Hero Section -->
-    <section class="hero">
-        <h1>The Global Trade <br><span>Platform of India</span></h1>
-        <p>Connecting Wholesalers, Retailers, and Consumers worldwide. Secure banking integration for fair, transparent, and instant transactions.</p>
-        <div class="hero-stats">
-            <div class="stat-item">
-                <h3>50k+</h3>
-                <p>Products</p>
-            </div>
-            <div class="stat-item">
-                <h3>120+</h3>
-                <p>Countries</p>
-            </div>
-            <div class="stat-item">
-                <h3>100%</h3>
-                <p>Secure</p>
-            </div>
-        </div>
-    </section>
-    <!-- Banking Integration Banner -->
-    <div class="container">
-        <div class="banking-banner">
-            <div class="banking-info">
-                <h2><i class="fa-solid fa-shield-halved"></i> World-Wide Banking Integration</h2>
-                <p>Direct integration with top global banks for secure, verified, and fair transactions. No middlemen, just direct trade.</p>
-            </div>
-            <div class="bank-icons">
-                <div class="bank-icon" title="SBI"><i class="fa-solid fa-building-columns"></i></div>
-                <div class="bank-icon" title="HSBC"><i class="fa-solid fa-university"></i></div>
-                <div class="bank-icon" title="Deutsche Bank"><i class="fa-solid fa-money-bill-transfer"></i></div>
-                <div class="bank-icon" title="Wise"><i class="fa-solid fa-money-bill-wave"></i></div>
-            </div>
-        </div>
     </div>
-    <!-- Marketplace Section -->
-    <main class="container" id="marketplace">
-        <div class="section-header">
-            <div class="section-title">
-                <h2>Trending Products</h2>
-                <p>Discover items from top sellers globally</p>
-            </div>
-            <div class="filters">
-                <button class="filter-btn active" onclick="filterProducts('all')">All</button>
-                <button class="filter-btn" onclick="filterProducts('electronics')">Electronics</button>
-                <button class="filter-btn" onclick="filterProducts('textiles')">Textiles</button>
-                <button class="filter-btn" onclick="filterProducts('agriculture')">Agriculture</button>
-            </div>
-        </div>
-        <div class="products-grid" id="productsGrid">
-            <!-- Products injected via JS -->
-        </div>
-    </main>
-    <!-- Advertiser Section -->
-    <section class="advertiser-section" id="advertising">
-        <div class="advertiser-content">
-            <h2><i class="fa-solid fa-bullhorn"></i> Advertise Your Product</h2>
-            <p>Want to reach millions of buyers? Get your product featured at the top of the GYNX TRADE marketplace with our premium advertising slots.</p>
-            <button class="btn btn-primary" onclick="openModal('adModal')">Start Advertising</button>
-        </div>
-    </section>
-    <!-- Footer -->
-    <footer>
-        <div class="footer-grid">
-            <div class="footer-col">
-                <a href="#" class="logo" style="margin-bottom: 1rem; display: inline-block;">
-                    <i class="fa-solid fa-earth-americas"></i> GYNX<span>TRADE</span>
-                </a>
-                <p style="color: var(--text-muted); font-size: 0.9rem;">
-                    The world's largest wholesale and retail platform connecting India to the globe.
-                </p>
-            </div>
-            <div class="footer-col">
-                <h4>Company</h4>
-                <ul>
-                    <li><a href="#">About Us</a></li>
-                    <li><a href="#">Careers</a></li>
-                    <li><a href="#">Press</a></li>
-                </ul>
-            </div>
-            <div class="footer-col">
-                <h4>Support</h4>
-                <ul>
-                    <li><a href="#">Help Center</a></li>
-                    <li><a href="#">Banking FAQ</a></li>
-                    <li><a href="#">Trust & Safety</a></li>
-                </ul>
-            </div>
-            <div class="footer-col">
-                <h4>Connect</h4>
-                <div style="display: flex; gap: 1rem;">
-                    <a href="#" style="color: var(--text-muted); font-size: 1.2rem;"><i class="fa-brands fa-twitter"></i></a>
-                    <a href="#" style="color: var(--text-muted); font-size: 1.2rem;"><i class="fa-brands fa-linkedin"></i></a>
-                    <a href="#" style="color: var(--text-muted); font-size: 1.2rem;"><i class="fa-brands fa-instagram"></i></a>
-                </div>
-            </div>
         </div>
-        <div class="footer-bottom">
-            <p>&copy; 2023 GYNX TRADE Inc. All rights reserved.</p>
-            <p style="margin-top: 0.5rem; font-size: 0.8rem;">
-                Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
-            </p>
         </div>
-    </footer>
-    <!-- Modals -->
-    <!-- Login Modal -->
-    <div class="modal-overlay" id="loginModal">
-        <div class="modal">
-            <button class="close-modal" onclick="closeModal('loginModal')">&times;</button>
-            <h2 style="margin-bottom: 1.5rem;">Welcome Back</h2>
-            <form onsubmit="handleLogin(event)">
-                <div class="form-group">
-                    <label>Email Address</label>
-                    <input type="email" class="form-control" placeholder="name@example.com" required>
-                </div>
-                <div class="form-group">
-                    <label>Password</label>
-                    <input type="password" class="form-control" placeholder="••••••••" required>
-                </div>
-                <button type="submit" class="btn btn-primary btn-block">Sign In</button>
-                <p style="text-align: center; margin-top: 1rem; color: var(--text-muted); font-size: 0.9rem;">
-                    Don't have an account? <a href="#" style="color: var(--primary);">Sign Up</a>
-                </p>
-            </form>
         </div>
     </div>
-    <!-- Sell Item Modal -->
-    <div class="modal-overlay" id="sellModal">
-        <div class="modal">
-            <button class="close-modal" onclick="closeModal('sellModal')">&times;</button>
-            <h2 style="margin-bottom: 1.5rem;">List Your Product</h2>
-            <form onsubmit="handleSell(event)">
-                <div class="form-group">
-                    <label>Product Name</label>
-                    <input type="text" class="form-control" placeholder="e.g. Premium Cotton Saree" required>
-                </div>
-                <div class="form-group">
-                    <label>Category</label>
-                    <select class="form-control">
                         <option>Electronics</option>
                         <option>Textiles</option>
                         <option>Home Goods</option>
                         <option>Industrial</option>
                     </select>
-                </div>
-                <div class="form-group">
-                    <label>Price (INR)</label>
-                    <input type="number" class="form-control" placeholder="5000" required>
-                </div>
-                <button type="submit" class="btn btn-primary btn-block">Publish to GYNX</button>
-            </form>
         </div>
     </div>
-    <!-- Advertise Modal -->
-    <div class="modal-overlay" id="adModal">
-        <div class="modal">
-            <button class="close-modal" onclick="closeModal('adModal')">&times;</button>
-            <h2 style="margin-bottom: 1rem; color: var(--primary);">Promote Your Product</h2>
-            <p style="margin-bottom: 1.5rem; color: var(--text-muted);">Get your product to the top of the search results instantly.</p>
-            <form onsubmit="handleAdvertise(event)">
-                <div class="form-group">
-                    <label>Product URL (Optional)</label>
-                    <input type="text" class="form-control" placeholder="https://gynxtrade.com/product/...">
-                </div>
-                <div class="form-group">
-                    <label>Budget (USD)</label>
-                    <input type="number" class="form-control" placeholder="50" required>
-                </div>
-                <button type="submit" class="btn btn-primary btn-block">Proceed to Payment</button>
-            </form>
         </div>
     </div>
-    <!-- Toast Container -->
-    <div class="toast-container" id="toastContainer"></div>
-    <script>
-        // --- Data ---
         const products = [
             { id: 1, title: "Premium Handwoven Silk Saree", category: "textiles", price: 4500, location: "Kanchipuram, India", image: "https://images.unsplash.com/photo-1610030469983-98e550d6193c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: true },
             { id: 2, title: "Industrial LED Street Lights", category: "electronics", price: 12000, location: "Mumbai, India", image: "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
@@ -975,6 +1044,7 @@
                 event.target.classList.remove('active');
             }
         }
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GYNX TRADE - Global Wholesale & Retail Platform</title>
+  <!-- FontAwesome for Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap"
+    rel="stylesheet">
+  <style>
+    :root {
+      /* Palette: Dark Mode with Gold Accents (Premium Trade Look) */
+      --bg-dark: #0f1115;
+      --bg-card: #1a1d24;
+      --bg-card-hover: #232730;
+      --primary: #D4AF37;
+      /* Gold */
+      --primary-glow: rgba(212, 175, 55, 0.4);
+      --accent: #00bcd4;
+      /* Cyan for Tech/Banking feel */
+      --text-main: #ffffff;
+      --text-muted: #a0a3b1;
+      --success: #00e676;
+      --danger: #ff5252;
+      --border: #2c3038;
+      --radius: 12px;
+      --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+      --font-main: 'Outfit', sans-serif;
+      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      outline: none;
+    }
+    body {
+      font-family: var(--font-main);
+      background-color: var(--bg-dark);
+      color: var(--text-main);
+      overflow-x: hidden;
+      line-height: 1.6;
+    }
+    /* --- Scrollbar --- */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: var(--bg-dark);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--primary);
+    }
+    /* --- Animations --- */
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    @keyframes pulseGold {
+      0% {
+        box-shadow: 0 0 0 0 var(--primary-glow);
+      }
+      70% {
+        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+      }
+      100% {
+        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+      }
+    }
+    @keyframes slideInRight {
+      from {
+        transform: translateX(100%);
+      }
+      to {
+        transform: translateX(0);
+      }
+    }
+    /* --- Header --- */
+    header {
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+      background: rgba(15, 17, 21, 0.9);
+      backdrop-filter: blur(12px);
+      border-bottom: 1px solid var(--border);
+      padding: 1rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .logo {
+      font-size: 1.8rem;
+      font-weight: 800;
+      color: var(--text-main);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      text-decoration: none;
+    }
+    .logo span {
+      color: var(--primary);
+    }
+    .logo i {
+      font-size: 1.5rem;
+      color: var(--primary);
+    }
+    .nav-links {
+      display: flex;
+      gap: 2rem;
+    }
+    .nav-links a {
+      color: var(--text-muted);
+      text-decoration: none;
+      font-weight: 500;
+      transition: var(--transition);
+      position: relative;
+    }
+    .nav-links a:hover,
+    .nav-links a.active {
+      color: var(--primary);
+    }
+    .nav-links a::after {
+      content: '';
+      position: absolute;
+      bottom: -5px;
+      left: 0;
+      width: 0;
+      height: 2px;
+      background: var(--primary);
+      transition: var(--transition);
+    }
+    .nav-links a:hover::after {
+      width: 100%;
+    }
+    .header-actions {
+      display: flex;
+      gap: 1rem;
+    }
+    .btn {
+      padding: 0.6rem 1.2rem;
+      border-radius: 50px;
+      border: none;
+      cursor: pointer;
+      font-weight: 600;
+      font-family: inherit;
+      transition: var(--transition);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      text-decoration: none;
+    }
+    .btn-outline {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--text-main);
+    }
+    .btn-outline:hover {
+      border-color: var(--primary);
+      color: var(--primary);
+    }
+    .btn-primary {
+      background: linear-gradient(135deg, var(--primary), #b8860b);
+      color: #000;
+      box-shadow: 0 4px 15px var(--primary-glow);
+    }
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px var(--primary-glow);
+    }
+    .btn-block {
+      width: 100%;
+      justify-content: center;
+    }
+    /* --- Hero Section --- */
+    .hero {
+      padding: 4rem 2rem;
+      text-align: center;
+      background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
+      position: relative;
+      overflow: hidden;
+    }
+    .hero::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: url('https://www.transparenttextures.com/patterns/cubes.png');
+      opacity: 0.05;
+      pointer-events: none;
+    }
+    .hero h1 {
+      font-size: 3.5rem;
+      margin-bottom: 1rem;
+      line-height: 1.1;
+    }
+    .hero h1 span {
+      background: linear-gradient(to right, var(--primary), var(--accent));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .hero p {
+      font-size: 1.2rem;
+      color: var(--text-muted);
+      max-width: 600px;
+      margin: 0 auto 2.5rem;
+    }
+    .hero-stats {
+      display: flex;
+      justify-content: center;
+      gap: 3rem;
+      margin-top: 3rem;
+      flex-wrap: wrap;
+    }
+    .stat-item h3 {
+      font-size: 2rem;
+      color: var(--text-main);
+    }
+    .stat-item p {
+      font-size: 0.9rem;
+      margin: 0;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+    /* --- Banking System Integration Banner --- */
+    .banking-banner {
+      background: linear-gradient(90deg, #1a1d24, #0f1115);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 2rem auto;
+      max-width: 1200px;
+      position: relative;
+      overflow: hidden;
+    }
+    .banking-banner::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      width: 5px;
+      background: var(--accent);
+      box-shadow: 0 0 15px var(--accent);
+    }
+    .banking-info h2 {
+      font-size: 1.5rem;
+      margin-bottom: 0.5rem;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .banking-info p {
+      color: var(--text-muted);
+      font-size: 0.95rem;
+    }
+    .bank-icons {
+      display: flex;
+      gap: 1rem;
+    }
+    .bank-icon {
+      width: 50px;
+      height: 50px;
+      background: var(--bg-card);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--accent);
+      font-size: 1.5rem;
+      border: 1px solid var(--border);
+      transition: var(--transition);
+    }
+    .bank-icon:hover {
+      border-color: var(--accent);
+      background: var(--accent);
+      color: #fff;
+    }
+    /* --- Marketplace Grid --- */
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      margin-bottom: 2rem;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+    .section-title h2 {
+      font-size: 2rem;
+      margin-bottom: 0.5rem;
+    }
+    .section-title p {
+      color: var(--text-muted);
+    }
+    .filters {
+      display: flex;
+      gap: 1rem;
+      background: var(--bg-card);
+      padding: 0.5rem;
+      border-radius: 50px;
+      border: 1px solid var(--border);
+    }
+    .filter-btn {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      padding: 0.5rem 1.2rem;
+      border-radius: 40px;
+      cursor: pointer;
+      transition: var(--transition);
+      font-family: inherit;
+      font-weight: 500;
+    }
+    .filter-btn.active,
+    .filter-btn:hover {
+      background: var(--border);
+      color: var(--text-main);
+    }
+    .products-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 2rem;
+    }
+    .product-card {
+      background: var(--bg-card);
+      border-radius: var(--radius);
+      overflow: hidden;
+      border: 1px solid var(--border);
+      transition: var(--transition);
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    }
+    .product-card:hover {
+      transform: translateY(-8px);
+      border-color: var(--primary);
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    }
+    .badge-ad {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      background: linear-gradient(135deg, #ff9800, #ff5722);
+      color: white;
+      padding: 4px 10px;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      font-weight: 700;
+      z-index: 2;
+      box-shadow: 0 2px 10px rgba(255, 87, 34, 0.4);
+    }
+    .product-image {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      background: #2a2e35;
+    }
+    .product-info {
+      padding: 1.5rem;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    .product-category {
+      font-size: 0.8rem;
+      color: var(--primary);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: 0.5rem;
+    }
+    .product-title {
+      font-size: 1.1rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      line-height: 1.4;
+    }
+    .product-meta {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.9rem;
+      color: var(--text-muted);
+      margin-bottom: 1rem;
+    }
+    .product-price {
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: var(--text-main);
+      margin-top: auto;
+      margin-bottom: 1rem;
+    }
+    .product-actions {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+    }
+    .btn-sm {
+      padding: 0.5rem;
+      font-size: 0.9rem;
+    }
+    /* --- Advertiser Section --- */
+    .advertiser-section {
+      background: linear-gradient(rgba(15, 17, 21, 0.9), rgba(15, 17, 21, 0.9)), url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
+      background-size: cover;
+      background-attachment: fixed;
+      padding: 5rem 2rem;
+      text-align: center;
+      border-top: 1px solid var(--border);
+      border-bottom: 1px solid var(--border);
+    }
+    .advertiser-content {
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    .advertiser-content h2 {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+    }
+    .advertiser-content p {
+      font-size: 1.1rem;
+      color: #ccc;
+      margin-bottom: 2rem;
+    }
+    /* --- Footer --- */
+    footer {
+      background: #0b0d10;
+      padding: 4rem 2rem 1rem;
+      border-top: 1px solid var(--border);
+    }
+    .footer-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 3rem;
+      max-width: 1400px;
+      margin: 0 auto;
+      margin-bottom: 3rem;
+    }
+    .footer-col h4 {
+      color: var(--text-main);
+      margin-bottom: 1.5rem;
+      font-size: 1.1rem;
+    }
+    .footer-col ul {
+      list-style: none;
+    }
+    .footer-col ul li {
+      margin-bottom: 0.8rem;
+    }
+    .footer-col ul li a {
+      color: var(--text-muted);
+      text-decoration: none;
+      transition: var(--transition);
+    }
+    .footer-col ul li a:hover {
+      color: var(--primary);
+      padding-left: 5px;
+    }
+    .footer-bottom {
+      text-align: center;
+      padding-top: 2rem;
+      border-top: 1px solid var(--border);
+      color: var(--text-muted);
+      font-size: 0.9rem;
+    }
+    .footer-bottom a {
+      color: var(--primary);
+      text-decoration: none;
+    }
+    /* --- Modal --- */
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.8);
+      z-index: 2000;
+      display: none;
+      justify-content: center;
+      align-items: center;
+      backdrop-filter: blur(5px);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    .modal-overlay.active {
+      display: flex;
+      opacity: 1;
+    }
+    .modal {
+      background: var(--bg-card);
+      width: 90%;
+      max-width: 500px;
+      border-radius: var(--radius);
+      border: 1px solid var(--border);
+      padding: 2rem;
+      position: relative;
+      transform: scale(0.9);
+      transition: transform 0.3s ease;
+    }
+    .modal-overlay.active .modal {
+      transform: scale(1);
+    }
+    .close-modal {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      font-size: 1.5rem;
+      cursor: pointer;
+    }
+    .form-group {
+      margin-bottom: 1.5rem;
+    }
+    .form-group label {
+      display: block;
+      margin-bottom: 0.5rem;
+      color: var(--text-muted);
+      font-size: 0.9rem;
+    }
+    .form-control {
+      width: 100%;
+      padding: 0.8rem;
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text-main);
+      font-family: inherit;
+    }
+    .form-control:focus {
+      border-color: var(--primary);
+    }
+    /* --- Toast Notification --- */
+    .toast-container {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+      z-index: 3000;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+    .toast {
+      background: var(--bg-card);
+      border-left: 4px solid var(--primary);
+      padding: 1rem 1.5rem;
+      border-radius: 4px;
+      box-shadow: var(--shadow);
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      min-width: 300px;
+      animation: slideInRight 0.3s ease;
+    }
+    .toast.success {
+      border-color: var(--success);
+    }
+    .toast.error {
+      border-color: var(--danger);
+    }
+    .toast i {
+      font-size: 1.2rem;
+    }
+    .toast.success i {
+      color: var(--success);
+    }
+    .toast.error i {
+      color: var(--danger);
+    }
+    /* --- Responsive --- */
+    @media (max-width: 768px) {
+      .hero h1 {
+        font-size: 2.5rem;
+      }
+      .nav-links {
+        display: none;
+      }
+      /* Simplified for mobile */
+      .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .filters {
+        width: 100%;
+        overflow-x: auto;
+      }
+      .banking-banner {
+        flex-direction: column;
+        text-align: center;
+        gap: 1.5rem;
+      }
+      .bank-icons {
+        justify-content: center;
+      }
+    }
+  </style>
 </head>
 <body>
+  <!-- Header -->
+  <header>
+    <a href="#" class="logo">
+      <i class="fa-solid fa-earth-americas"></i>
+      GYNX<span>TRADE</span>
+    </a>
+    <nav class="nav-links">
+      <a href="#" class="active">Marketplace</a>
+      <a href="#wholesale">Wholesale</a>
+      <a href="#retail">Retail</a>
+      <a href="#advertising">Advertise</a>
+    </nav>
+    <div class="header-actions">
+      <button class="btn btn-outline" onclick="openModal('loginModal')">
                 <i class="fa-regular fa-user"></i> Sign In
             </button>
+      <button class="btn btn-primary" onclick="openModal('sellModal')">
                 <i class="fa-solid fa-plus"></i> List Item
             </button>
+    </div>
+  </header>
+  <!-- Hero Section -->
+  <section class="hero">
+    <h1>The Global Trade <br><span>Platform of India</span></h1>
+    <p>Connecting Wholesalers, Retailers, and Consumers worldwide. Secure banking integration for fair, transparent, and
+      instant transactions.</p>
+    <div class="hero-stats">
+      <div class="stat-item">
+        <h3>50k+</h3>
+        <p>Products</p>
+      </div>
+      <div class="stat-item">
+        <h3>120+</h3>
+        <p>Countries</p>
+      </div>
+      <div class="stat-item">
+        <h3>100%</h3>
+        <p>Secure</p>
+      </div>
+    </div>
+  </section>
+  <!-- Banking Integration Banner -->
+  <div class="container">
+    <div class="banking-banner">
+      <div class="banking-info">
+        <h2><i class="fa-solid fa-shield-halved"></i> World-Wide Banking Integration</h2>
+        <p>Direct integration with top global banks for secure, verified, and fair transactions. No middlemen, just
+          direct trade.</p>
+      </div>
+      <div class="bank-icons">
+        <div class="bank-icon" title="SBI"><i class="fa-solid fa-building-columns"></i></div>
+        <div class="bank-icon" title="HSBC"><i class="fa-solid fa-university"></i></div>
+        <div class="bank-icon" title="Deutsche Bank"><i class="fa-solid fa-money-bill-transfer"></i></div>
+        <div class="bank-icon" title="Wise"><i class="fa-solid fa-money-bill-wave"></i></div>
+      </div>
+    </div>
+  </div>
+  <!-- Marketplace Section -->
+  <main class="container" id="marketplace">
+    <div class="section-header">
+      <div class="section-title">
+        <h2>Trending Products</h2>
+        <p>Discover items from top sellers globally</p>
+      </div>
+      <div class="filters">
+        <button class="filter-btn active" onclick="filterProducts('all')">All</button>
+        <button class="filter-btn" onclick="filterProducts('electronics')">Electronics</button>
+        <button class="filter-btn" onclick="filterProducts('textiles')">Textiles</button>
+        <button class="filter-btn" onclick="filterProducts('agriculture')">Agriculture</button>
+      </div>
     </div>
+    <div class="products-grid" id="productsGrid">
+      <!-- Products injected via JS -->
+    </div>
+  </main>
+  <!-- Advertiser Section -->
+  <section class="advertiser-section" id="advertising">
+    <div class="advertiser-content">
+      <h2><i class="fa-solid fa-bullhorn"></i> Advertise Your Product</h2>
+      <p>Want to reach millions of buyers? Get your product featured at the top of the GYNX TRADE marketplace with our
+        premium advertising slots.</p>
+      <button class="btn btn-primary" onclick="openModal('adModal')">Start Advertising</button>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer>
+    <div class="footer-grid">
+      <div class="footer-col">
+        <a href="#" class="logo" style="margin-bottom: 1rem; display: inline-block;">
+          <i class="fa-solid fa-earth-americas"></i> GYNX<span>TRADE</span>
+        </a>
+        <p style="color: var(--text-muted); font-size: 0.9rem;">
+          The world's largest wholesale and retail platform connecting India to the globe.
+        </p>
+      </div>
+      <div class="footer-col">
+        <h4>Company</h4>
+        <ul>
+          <li><a href="#">About Us</a></li>
+          <li><a href="#">Careers</a></li>
+          <li><a href="#">Press</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h4>Support</h4>
+        <ul>
+          <li><a href="#">Help Center</a></li>
+          <li><a href="#">Banking FAQ</a></li>
+          <li><a href="#">Trust & Safety</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h4>Connect</h4>
+        <div style="display: flex; gap: 1rem;">
+          <a href="#" style="color: var(--text-muted); font-size: 1.2rem;"><i class="fa-brands fa-twitter"></i></a>
+          <a href="#" style="color: var(--text-muted); font-size: 1.2rem;"><i class="fa-brands fa-linkedin"></i></a>
+          <a href="#" style="color: var(--text-muted); font-size: 1.2rem;"><i class="fa-brands fa-instagram"></i></a>
         </div>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <p>&copy; 2023 GYNX TRADE Inc. All rights reserved.</p>
+      <p style="margin-top: 0.5rem; font-size: 0.8rem;">
+        Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
+      </p>
+    </div>
+  </footer>
+  <!-- Modals -->
+  <!-- Login Modal -->
+  <div class="modal-overlay" id="loginModal">
+    <div class="modal">
+      <button class="close-modal" onclick="closeModal('loginModal')">&times;</button>
+      <h2 style="margin-bottom: 1.5rem;">Welcome Back</h2>
+      <form onsubmit="handleLogin(event)">
+        <div class="form-group">
+          <label>Email Address</label>
+          <input type="email" class="form-control" placeholder="name@example.com" required>
         </div>
+        <div class="form-group">
+          <label>Password</label>
+          <input type="password" class="form-control" placeholder="••••••••" required>
         </div>
+        <button type="submit" class="btn btn-primary btn-block">Sign In</button>
+        <p style="text-align: center; margin-top: 1rem; color: var(--text-muted); font-size: 0.9rem;">
+          Don't have an account? <a href="#" style="color: var(--primary);">Sign Up</a>
+        </p>
+      </form>
     </div>
+  </div>
+  <!-- Sell Item Modal -->
+  <div class="modal-overlay" id="sellModal">
+    <div class="modal">
+      <button class="close-modal" onclick="closeModal('sellModal')">&times;</button>
+      <h2 style="margin-bottom: 1.5rem;">List Your Product</h2>
+      <form onsubmit="handleSell(event)">
+        <div class="form-group">
+          <label>Product Name</label>
+          <input type="text" class="form-control" placeholder="e.g. Premium Cotton Saree" required>
+        </div>
+        <div class="form-group">
+          <label>Category</label>
+          <select class="form-control">
                         <option>Electronics</option>
                         <option>Textiles</option>
                         <option>Home Goods</option>
                         <option>Industrial</option>
                     </select>
         </div>
+        <div class="form-group">
+          <label>Price (INR)</label>
+          <input type="number" class="form-control" placeholder="5000" required>
+        </div>
+        <button type="submit" class="btn btn-primary btn-block">Publish to GYNX</button>
+      </form>
     </div>
+  </div>
+  <!-- Advertise Modal -->
+  <div class="modal-overlay" id="adModal">
+    <div class="modal">
+      <button class="close-modal" onclick="closeModal('adModal')">&times;</button>
+      <h2 style="margin-bottom: 1rem; color: var(--primary);">Promote Your Product</h2>
+      <p style="margin-bottom: 1.5rem; color: var(--text-muted);">Get your product to the top of the search results
+        instantly.</p>
+      <form onsubmit="handleAdvertise(event)">
+        <div class="form-group">
+          <label>Product URL (Optional)</label>
+          <input type="text" class="form-control" placeholder="https://gynxtrade.com/product/...">
         </div>
+        <div class="form-group">
+          <label>Budget (USD)</label>
+          <input type="number" class="form-control" placeholder="50" required>
+        </div>
+        <button type="submit" class="btn btn-primary btn-block">Proceed to Payment</button>
+      </form>
     </div>
+  </div>
+  <!-- Toast Container -->
+  <div class="toast-container" id="toastContainer"></div>
+  <script>
+    // --- Data ---
         const products = [
             { id: 1, title: "Premium Handwoven Silk Saree", category: "textiles", price: 4500, location: "Kanchipuram, India", image: "https://images.unsplash.com/photo-1610030469983-98e550d6193c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: true },
             { id: 2, title: "Industrial LED Street Lights", category: "electronics", price: 12000, location: "Mumbai, India", image: "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
                 event.target.classList.remove('active');
             }
         }
+  </script>
 </body>
 </html>