Hugging Face's logo

Spaces:
ajitbilLINORE121
/
anycoder-c892924b
Running

App Files Community
anycoder-c892924b / index.html
ajitbilLINORE121's picture
ajitbilLINORE121
Upload folder using huggingface_hub
660600a verified
raw
history blame contribute delete
32.9 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 Marketplace</title>
<!-- 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>
/* --- CSS VARIABLES & RESET --- */
:root {
--primary: #0f172a; /* Deep Navy */
--primary-light: #1e293b;
--accent: #f59e0b; /* Gold/Amber for Trust & Trade */
--accent-hover: #d97706;
--bg-body: #f8fafc;
--bg-card: #ffffff;
--text-main: #334155;
--text-light: #64748b;
--success: #10b981;
--danger: #ef4444;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--radius: 12px;
--nav-height: 70px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Outfit', sans-serif;
}
body {
background-color: var(--bg-body);
color: var(--text-main);
overflow-x: hidden;
padding-top: var(--nav-height);
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; outline: none; transition: all 0.3s ease; }
/* --- HEADER & NAVIGATION --- */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--nav-height);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid #e2e8f0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%;
box-shadow: var(--shadow-sm);
}
.logo {
font-size: 1.8rem;
font-weight: 800;
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
}
.logo span { color: var(--accent); }
.nav-links {
display: flex;
gap: 30px;
}
.nav-links a {
font-weight: 500;
color: var(--text-main);
position: relative;
}
.nav-links a:hover, .nav-links a.active {
color: var(--accent);
}
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: var(--accent);
transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }
.user-actions {
display: flex;
align-items: center;
gap: 15px;
}
.btn-primary {
background-color: var(--accent);
color: white;
padding: 10px 24px;
border-radius: 50px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.btn-primary:hover {
background-color: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.btn-outline {
border: 2px solid var(--primary);
color: var(--primary);
padding: 8px 20px;
border-radius: 50px;
font-weight: 600;
background: transparent;
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
.cart-icon {
position: relative;
font-size: 1.2rem;
color: var(--primary);
}
.cart-badge {
position: absolute;
top: -8px;
right: -8px;
background: var(--danger);
color: white;
font-size: 0.7rem;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
/* --- HERO SECTION --- */
.hero {
position: relative;
height: 500px;
background: linear-gradient(135deg, var(--primary) 0%, #0f172a 100%);
color: white;
display: flex;
align-items: center;
padding: 0 5%;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: url('https://picsum.photos/seed/trade/1920/1080') center/cover no-repeat;
opacity: 0.2;
mix-blend-mode: overlay;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 600px;
}
.hero h1 {
font-size: 3.5rem;
line-height: 1.1;
margin-bottom: 20px;
font-weight: 800;
}
.hero p {
font-size: 1.1rem;
color: #cbd5e1;
margin-bottom: 30px;
line-height: 1.6;
}
.hero-stats {
display: flex;
gap: 40px;
margin-top: 40px;
border-top: 1px solid rgba(255,255,255,0.2);
padding-top: 20px;
}
.stat h3 { font-size: 1.5rem; color: var(--accent); }
.stat span { font-size: 0.9rem; color: #94a3b8; }
/* --- MARKETPLACE SECTION --- */
.section-container {
padding: 60px 5%;
max-width: 1400px;
margin: 0 auto;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 20px;
}
.section-title h2 {
font-size: 2rem;
color: var(--primary);
margin-bottom: 10px;
}
.filters {
display: flex;
gap: 10px;
background: white;
padding: 5px;
border-radius: 50px;
box-shadow: var(--shadow-sm);
}
.filter-btn {
padding: 8px 20px;
border-radius: 40px;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-light);
background: transparent;
}
.filter-btn.active {
background: var(--primary);
color: white;
box-shadow: var(--shadow-sm);
}
/* --- PRODUCT GRID --- */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
}
.product-card {
background: var(--bg-card);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.badge-ad {
position: absolute;
top: 15px;
left: 15px;
background: var(--accent);
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
z-index: 10;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.badge-wholesale {
position: absolute;
top: 15px;
right: 15px;
background: var(--primary);
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
z-index: 10;
}
.product-img {
width: 100%;
height: 200px;
object-fit: cover;
background: #e2e8f0;
}
.product-info {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.product-category {
font-size: 0.8rem;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
}
.product-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 10px;
line-height: 1.4;
}
.product-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
font-size: 0.9rem;
color: var(--text-light);
}
.seller-info {
display: flex;
align-items: center;
gap: 8px;
}
.seller-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
}
.price-row {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid #f1f5f9;
}
.price {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary);
}
.btn-buy {
background: var(--primary);
color: white;
padding: 8px 16px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
}
.btn-buy:hover {
background: var(--primary-light);
}
/* --- BANK INTEGRATION SECTION --- */
.bank-section {
background: white;
padding: 60px 5%;
margin-top: 40px;
border-top: 1px solid #e2e8f0;
}
.bank-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
max-width: 1200px;
margin: 0 auto;
align-items: center;
}
.bank-visual {
background: linear-gradient(45deg, #f8fafc, #e2e8f0);
border-radius: 20px;
padding: 40px;
text-align: center;
position: relative;
}
.bank-card {
background: linear-gradient(135deg, var(--primary) 0%, #1e293b 100%);
color: white;
width: 100%;
max-width: 350px;
margin: 30px auto;
padding: 25px;
border-radius: 15px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.bank-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
animation: rotate 10s linear infinite;
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.card-chip {
width: 50px;
height: 35px;
background: linear-gradient(135deg, #fbbf24, #d97706);
border-radius: 6px;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.card-number {
font-size: 1.2rem;
letter-spacing: 3px;
margin-bottom: 20px;
position: relative;
z-index: 2;
font-family: monospace;
}
.card-details {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
position: relative;
z-index: 2;
}
.bank-features li {
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
font-size: 1.1rem;
color: var(--text-main);
}
.bank-features i { color: var(--success); }
/* --- FOOTER --- */
footer {
background: var(--primary);
color: white;
padding: 60px 5% 20px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto 40px;
}
.footer-col h4 {
font-size: 1.2rem;
margin-bottom: 20px;
color: var(--accent);
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: #94a3b8; transition: color 0.3s; }
.footer-col ul li a:hover { color: white; }
.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
color: #64748b;
font-size: 0.9rem;
}
.built-with {
color: var(--accent);
font-weight: bold;
}
/* --- MODAL --- */
.modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(5px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal {
background: white;
width: 90%;
max-width: 500px;
border-radius: 16px;
padding: 30px;
transform: translateY(20px);
transition: transform 0.3s ease;
position: relative;
}
.modal-overlay.active .modal { transform: translateY(0); }
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.close-modal {
background: transparent;
font-size: 1.5rem;
color: var(--text-light);
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9rem; }
.form-group input, .form-group select {
width: 100%;
padding: 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s;
}
.form-group input:focus { border-color: var(--accent); outline: none; }
.bank-logos {
display: flex;
gap: 10px;
margin-top: 10px;
}
.bank-logo {
flex: 1;
height: 40px;
background: #f1f5f9;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
color: var(--text-light);
cursor: pointer;
transition: background 0.2s;
}
.bank-logo:hover { background: #e2e8f0; }
/* --- TOAST NOTIFICATION --- */
.toast-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 3000;
display: flex;
flex-direction: column;
gap: 10px;
}
.toast {
background: white;
padding: 15px 20px;
border-radius: 8px;
box-shadow: var(--shadow-lg);
border-left: 5px solid var(--primary);
display: flex;
align-items: center;
gap: 12px;
min-width: 300px;
animation: slideIn 0.3s ease;
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* --- RESPONSIVE --- */
@media (max-width: 768px) {
.hero h1 { font-size: 2.5rem; }
.nav-links { display: none; } /* Simplified for demo */
.bank-grid { grid-template-columns: 1fr; }
.hero { height: auto; padding: 100px 5% 60px; }
.hero-stats { flex-wrap: wrap; }
}
</style>
</head>
<body>
<!-- NAVIGATION -->
<header>
<div class="logo">
<i class="fa-solid fa-earth-americas"></i>
GYNX<span>TRADE</span>
</div>
<nav class="nav-links">
<a href="#" class="active">Home</a>
<a href="#marketplace">Marketplace</a>
<a href="#wholesale">Wholesale</a>
<a href="#bank">Banking</a>
</nav>
<div class="user-actions">
<button class="cart-icon" onclick="showToast('Cart is currently empty', 'info')">
<i class="fa-solid fa-cart-shopping"></i>
<span class="cart-badge" id="cart-count">0</span>
</button>
<button class="btn-outline" onclick="openModal('login')">Login</button>
<button class="btn-primary" onclick="openModal('register')">Sell Now</button>
</div>
</header>
<!-- HERO SECTION -->
<section class="hero">
<div class="hero-content">
<h1>Connect Globally.<br>Trade Fairly.</h1>
<p>The world's largest B2B & B2C marketplace integrated with a secure global banking system. From wholesaler to retailer, experience transparent trade.</p>
<div style="display: flex; gap: 15px;">
<button class="btn-primary" onclick="scrollToMarket()">Explore Products</button>
<button class="btn-outline" style="border-color: white; color: white;" onclick="openModal('register')">Start Selling</button>
</div>
<div class="hero-stats">
<div class="stat">
<h3>50k+</h3>
<span>Global Sellers</span>
</div>
<div class="stat">
<h3>120+</h3>
<span>Countries</span>
</div>
<div class="stat">
<h3>24/7</h3>
<span>Banking Support</span>
</div>
</div>
</div>
</section>
<!-- MARKETPLACE SECTION -->
<section id="marketplace" class="section-container">
<div class="section-header">
<div class="section-title">
<h2>Featured Products</h2>
<p>Top-rated items advertised by verified sellers worldwide</p>
</div>
<div class="filters">
<button class="filter-btn active" onclick="filterProducts('all')">All</button>
<button class="filter-btn" onclick="filterProducts('retail')">Retail</button>
<button class="filter-btn" onclick="filterProducts('wholesale')">Wholesale</button>
</div>
</div>
<div class="product-grid" id="product-grid">
<!-- Products will be injected here via JS -->
</div>
</section>
<!-- BANKING SECTION -->
<section id="bank" class="bank-section">
<div class="bank-grid">
<div class="bank-visual">
<h3 style="margin-bottom: 20px; color: var(--primary);">Integrated Banking System</h3>
<p style="color: var(--text-light); margin-bottom: 30px;">Secure global transactions with instant verification and fair trade guarantees.</p>
<div class="bank-card">
<div class="card-chip"></div>
<div class="card-number">**** **** **** 4289</div>
<div class="card-details">
<span>CARD HOLDER</span>
<span>VALID THRU 12/28</span>
</div>
</div>
<div class="bank-logos">
<div class="bank-logo"><i class="fa-brands fa-cc-visa"></i> VISA</div>
<div class="bank-logo"><i class="fa-brands fa-cc-mastercard"></i> MC</div>
<div class="bank-logo"><i class="fa-solid fa-building-columns"></i> SWIFT</div>
</div>
</div>
<div class="bank-content">
<h2 style="font-size: 2.2rem; color: var(--primary); margin-bottom: 20px;">Fair Transaction Guarantee</h2>
<p style="margin-bottom: 30px; line-height: 1.6; color: var(--text-main);">
GYNX Trade integrates directly with global banking systems to ensure every transaction is secure.
Our smart escrow system holds funds until you confirm receipt of goods, guaranteeing fair trade for everyone.
</p>
<ul class="bank-features">
<li><i class="fa-solid fa-shield-halved"></i> Bank-level SSL Encryption</li>
<li><i class="fa-solid fa-clock"></i> Instant International Transfers</li>
<li><i class="fa-solid fa-scale-balanced"></i> Smart Escrow Protection</li>
<li><i class="fa-solid fa-file-contract"></i> Digital Contract Signing</li>
</ul>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-content">
<div class="footer-col">
<div class="logo" style="color: white; margin-bottom: 20px;">
<i class="fa-solid fa-earth-americas"></i> GYNX<span>TRADE</span>
</div>
<p style="color: #94a3b8; font-size: 0.9rem;">
The ultimate platform for global trade. Connecting wholesalers, retailers, and consumers with fair, secure banking solutions.
</p>
</div>
<div class="footer-col">
<h4>Marketplace</h4>
<ul>
<li><a href="#">Electronics</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Home & Living</a></li>
<li><a href="#">Industrial</a></li>
</ul>
</div>
<div class="footer-col">
<h4>For Sellers</h4>
<ul>
<li><a href="#">Start Selling</a></li>
<li><a href="#">Advertise Here</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Seller Dashboard</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Support</h4>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Banking Support</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="copyright">
&copy; 2023 GYNX TRADE Inc. All rights reserved.
<br>
Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">anycoder</a>
</div>
</footer>
<!-- MODAL: BANK PAYMENT -->
<div class="modal-overlay" id="payment-modal">
<div class="modal">
<div class="modal-header">
<h3>Secure Global Payment</h3>
<button class="close-modal" onclick="closeModal('payment-modal')">&times;</button>
</div>
<div class="form-group">
<label>Transaction Amount</label>
<input type="text" id="pay-amount" value="$0.00" readonly style="background: #f1f5f9;">
</div>
<div class="form-group">
<label>Select Bank / Method</label>
<select id="bank-method">
<option value="swift">SWIFT Transfer (Global)</option>
<option value="visa">Visa Card</option>
<option value="master">MasterCard</option>
</select>
</div>
<div class="form-group">
<label>Account Details (Simulation)</label>
<input type="text" value="**** 4289" readonly style="background: #f1f5f9;">
</div>
<button class="btn-primary" style="width: 100%; justify-content: center;" onclick="processPayment()">
<i class="fa-solid fa-lock"></i> Process Secure Transaction
</button>
<p style="text-align: center; font-size: 0.8rem; color: var(--text-light); margin-top: 15px;">
<i class="fa-solid fa-circle-check" style="color: var(--success);"></i> Bank Level Security
</p>
</div>
</div>
<!-- TOAST CONTAINER -->
<div class="toast-container" id="toast-container"></div>
<script>
// --- DATA ---
const products = [
{ id: 1, title: "Premium Organic Coffee Beans", category: "Food & Beverage", price: 45.00, type: "retail", seller: "Global Roasters", image: "https://picsum.photos/seed/coffee/400/300", ad: true },
{ id: 2, title: "Industrial CNC Machine", category: "Industrial", price: 12500.00, type: "wholesale", seller: "TechMachinery Ltd", image: "https://picsum.photos/seed/machine/400/300", ad: true },
{ id: 3, title: "Handmade Silk Sarees", category: "Fashion", price: 120.00, type: "retail", seller: "India Crafts", image: "https://picsum.photos/seed/saree/400/300", ad: false },
{ id: 4, title: "Bulk Cotton Fabric Roll", category: "Textile", price: 500.00, type: "wholesale", seller: "TextileWorld", image: "https://picsum.photos/seed/fabric/400/300", ad: true },
{ id: 5, title: "Wireless Noise Cancelling Headphones", category: "Electronics", price: 299.00, type: "retail", seller: "AudioPro", image: "https://picsum.photos/seed/headphone/400/300", ad: false },
{ id: 6, title: "Sustainable Bamboo Furniture", category: "Home", price: 850.00, type: "wholesale", seller: "EcoLiving", image: "https://picsum.photos/seed/furniture/400/300", ad: true },
{ id: 7, title: "Organic Tea Sets", category: "Food & Beverage", price: 35.00, type: "retail", seller: "Zen Garden", image: "https://picsum.photos/seed/tea/400/300", ad: false },
{ id: 8, title: "Automotive Parts Kit", category: "Industrial", price: 450.00, type: "wholesale", seller: "AutoParts Inc", image: "https://picsum.photos/seed/car/400/300", ad: false },
];
let cartCount = 0;
// --- RENDER PRODUCTS ---
function renderProducts(filter = 'all') {
const grid = document.getElementById('product-grid');
grid.innerHTML = '';
const filtered = filter === 'all'
? products
: products.filter(p => p.type === filter);
filtered.forEach(p => {
const card = document.createElement('div');
card.className = 'product-card';
card.innerHTML = `
${p.ad ? '<span class="badge-ad">FEATURED</span>' : ''}
<span class="badge-wholesale">${p.type.toUpperCase()}</span>
<img src="${p.image}" alt="${p.title}" class="product-img">
<div class="product-info">
<div class="product-category">${p.category}</div>
<h3 class="product-title">${p.title}</h3>
<div class="product-meta">
<div class="seller-info">
<img src="https://ui-avatars.com/api/?name=${p.seller}&background=random" class="seller-avatar" alt="${p.seller}">
<span>${p.seller}</span>
</div>
<span><i class="fa-solid fa-star" style="color: var(--accent);"></i> 4.8</span>
</div>
<div class="price-row">
<div class="price">$${p.price.toFixed(2)}</div>
<button class="btn-buy" onclick="initiateBuy('${p.title}', ${p.price})">
<i class="fa-solid fa-cart-plus"></i> Buy
</button>
</div>
</div>
`;
grid.appendChild(card);
});
}
// --- FILTER LOGIC ---
function filterProducts(type) {
// Update buttons
document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');
renderProducts(type);
}
// --- BUY / PAYMENT LOGIC ---
function initiateBuy(title, price) {
document.getElementById('pay-amount').value = `$${price.toFixed(2)} (${title})`;
openModal('payment-modal');
}
function processPayment() {
const btn = document.querySelector('#payment-modal .btn-primary');
const originalText = btn.innerHTML;
// Simulate Loading
btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Processing...';
btn.disabled = true;
setTimeout(() => {
closeModal('payment-modal');
btn.innerHTML = originalText;
btn.disabled = false;
// Add to cart logic
cartCount++;
document.getElementById('cart-count').innerText = cartCount;
showToast('Transaction Successful! Item added to cart.', 'success');
}, 2000);
}
// --- MODAL SYSTEM ---
function openModal(type) {
const modalId = type === 'payment-modal' ? 'payment-modal' : 'payment-modal'; // Reusing generic modal for demo
document.getElementById(modalId).classList.add('active');
}
function closeModal(id) {
document.getElementById(id).classList.remove('active');
}
// Close modal on outside click
document.querySelectorAll('.modal-overlay').forEach(overlay => {
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
overlay.classList.remove('active');
}
});
});
// --- TOAST NOTIFICATIONS ---
function showToast(message, type = 'info') {
const container = document.getElementById('toast-container');
const toast = document.createElement('div');
toast.className = `toast ${type}`;
let icon = 'fa-info-circle';
if (type === 'success') icon = 'fa-check-circle';
if (type === 'error') icon = 'fa-exclamation-circle';
toast.innerHTML = `<i class="fa-solid ${icon}"></i> <span>${message}</span>`;
container.appendChild(toast);
// Remove after 3 seconds
setTimeout(() => {
toast.style.opacity = '0';
setTimeout(() => toast.remove(), 300);
}, 3000);
}
// --- SCROLL HELPERS ---
function scrollToMarket() {
document.getElementById('marketplace').scrollIntoView({ behavior: 'smooth' });
}
// --- INITIALIZATION ---
document.addEventListener('DOMContentLoaded', () => {
renderProducts();
});
</script>
</body>
</html>