Hugging Face's logo

Spaces:
ajitbilLINORE121
/
anycoder-9a7714a2
Running

App Files Community
anycoder-9a7714a2 / index.html
ajitbilLINORE121's picture
ajitbilLINORE121
Upload folder using huggingface_hub
f83d940 verified
raw
history blame contribute delete
29.3 kB
 <!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 },
{ id: 3, title: "Organic Basmati Rice (50kg)", category: "agriculture", price: 8500, location: "Punjab, India", image: "https://images.unsplash.com/photo-1586201375761-83865001e31c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
{ id: 4, title: "Smart Fitness Tracker Pro", category: "electronics", price: 2999, location: "Delhi, India", image: "https://images.unsplash.com/photo-1575311373937-040b8e1fd5b6?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: true },
{ id: 5, title: "Bulk Cotton Fabric Roll", category: "textiles", price: 5500, location: "Ahmedabad, India", image: "https://images.unsplash.com/photo-1523381210434-271e8be1f52b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
{ id: 6, title: "Green Tea Extract Powder", category: "agriculture", price: 1500, location: "Kerala, India", image: "https://images.unsplash.com/photo-1556679343-c7306c1976bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
{ id: 7, title: "Wireless Bluetooth Earbuds", category: "electronics", price: 1999, location: "Bangalore, India", image: "https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
{ id: 8, title: "Handcrafted Marble Statues", category: "textiles", price: 8500, location: "Rajasthan, India", image: "https://images.unsplash.com/photo-1610701596007-11502861dcfa?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
];
// --- Functions ---
function renderProducts(filter = 'all') {
const grid = document.getElementById('productsGrid');
grid.innerHTML = '';
const filtered = filter === 'all'
? products
: products.filter(p => p.category === filter);
filtered.forEach(product => {
const card = document.createElement('div');
card.className = 'product-card';
card.innerHTML = `
${product.isAd ? '<span class="badge-ad">FEATURED</span>' : ''}
<img src="${product.image}" alt="${product.title}" class="product-image">
<div class="product-info">
<span class="product-category">${product.category}</span>
<h3 class="product-title">${product.title}</h3>
<div class="product-meta">
<span><i class="fa-solid fa-location-dot"></i> ${product.location}</span>
</div>
<div class="product-price">₹${product.price.toLocaleString('en-IN')}</div>
<div class="product-actions">
<button class="btn btn-outline btn-sm" onclick="addToCart(${product.id})">Buy Now</button>
<button class="btn btn-outline btn-sm" onclick="showToast('Product added to wishlist', 'success')"><i class="fa-regular fa-heart"></i></button>
</div>
</div>
`;
grid.appendChild(card);
});
}
function filterProducts(category) {
// Update active button state
document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');
// Re-render
renderProducts(category);
}
function openModal(id) {
const modal = document.getElementById(id);
modal.classList.add('active');
}
function closeModal(id) {
document.getElementById(id).classList.remove('active');
}
function showToast(message, type = 'success') {
const container = document.getElementById('toastContainer');
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.innerHTML = `
<i class="fa-solid ${type === 'success' ? 'fa-circle-check' : 'fa-circle-exclamation'}"></i>
<span>${message}</span>
`;
container.appendChild(toast);
// Remove after 3 seconds
setTimeout(() => {
toast.style.animation = 'slideInRight 0.3s ease reverse';
setTimeout(() => toast.remove(), 300);
}, 3000);
}
function handleLogin(e) {
e.preventDefault();
closeModal('loginModal');
showToast('Successfully logged in!', 'success');
}
function handleSell(e) {
e.preventDefault();
closeModal('sellModal');
showToast('Product listed successfully on GYNX Trade!', 'success');
}
function handleAdvertise(e) {
e.preventDefault();
closeModal('adModal');
showToast('Advertising package activated. Redirecting to payment...', 'success');
}
function addToCart(id) {
showToast('Added to cart successfully!', 'success');
}
// --- Init ---
document.addEventListener('DOMContentLoaded', () => {
renderProducts();
});
// Close modal when clicking outside
window.onclick = function(event) {
if (event.target.classList.contains('modal-overlay')) {
event.target.classList.remove('active');
}
}
</script>
</body>
</html>