Initial commit - KickAssMarket v1.0 (all 7 pages)
This commit is contained in:
root
Executable
+271
@@ -0,0 +1,271 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Checkout | KickAssMarket</title>
|
||||
<meta name="description" content="Secure checkout with escrow protection. Pay with credit card, USDC, USDT, or ETH.">
|
||||
<meta name="robots" content="noindex">
|
||||
<link rel="canonical" href="https://kickassmarket.com/checkout">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--primary: #6366F1; --primary-dark: #4F46E5; --secondary: #06B6D4;
|
||||
--cta: #F59E0B; --bg-dark: #0F172A; --bg-card: #1E293B; --bg-card-hover: #273548;
|
||||
--text: #F1F5F9; --text-muted: #94A3B8; --border: rgba(99,102,241,0.15); --glow: rgba(99,102,241,0.3);
|
||||
}
|
||||
html { scroll-behavior: smooth; }
|
||||
body { font-family: 'Inter', sans-serif; background: var(--bg-dark); color: var(--text); line-height: 1.6; }
|
||||
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; line-height: 1.2; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; height: 72px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 5%; background: rgba(15,23,42,0.95); backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border); z-index: 1000;
|
||||
}
|
||||
.logo { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||||
.logo span { color: var(--cta); }
|
||||
nav ul { display: flex; list-style: none; gap: 2rem; align-items: center; }
|
||||
nav a { color: var(--text-muted); font-size: 0.9rem; font-weight: 500; transition: color 0.2s; cursor: pointer; }
|
||||
nav a:hover { color: var(--text); }
|
||||
|
||||
.checkout-container { max-width: 1100px; margin: 0 auto; padding: 100px 5% 4rem; display: grid; grid-template-columns: 1fr 400px; gap: 3rem; }
|
||||
|
||||
.checkout-main h1 { font-size: 2rem; margin-bottom: 0.5rem; }
|
||||
.checkout-main > p { color: var(--text-muted); margin-bottom: 2rem; }
|
||||
|
||||
.order-summary { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem; display: flex; gap: 1.5rem; align-items: center; }
|
||||
.order-image { width: 100px; height: 80px; background: linear-gradient(135deg, var(--bg-card-hover), var(--bg-card)); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.order-image svg { width: 40px; height: 40px; stroke: var(--primary); fill: none; stroke-width: 1.5; }
|
||||
.order-details h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
|
||||
.order-details .order-cat { font-size: 0.8rem; color: var(--secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.order-details .order-seller { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem; }
|
||||
|
||||
.escrow-banner { background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(6,182,212,0.1)); border: 1px solid rgba(16,185,129,0.3); border-radius: 12px; padding: 1.25rem; margin-bottom: 2rem; display: flex; gap: 1rem; align-items: center; }
|
||||
.escrow-icon { width: 48px; height: 48px; background: rgba(16,185,129,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.escrow-icon svg { width: 24px; height: 24px; stroke: #10B981; fill: none; stroke-width: 2; }
|
||||
.escrow-text h4 { font-size: 0.95rem; margin-bottom: 0.25rem; color: #10B981; }
|
||||
.escrow-text p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
|
||||
|
||||
.section-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; margin-bottom: 1.5rem; }
|
||||
.section-card h3 { font-size: 1.1rem; margin-bottom: 1.5rem; }
|
||||
|
||||
.payment-methods { display: grid; gap: 0.75rem; }
|
||||
.payment-option { background: var(--bg-dark); border: 2px solid var(--border); border-radius: 12px; padding: 1.25rem; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 1rem; }
|
||||
.payment-option:hover, .payment-option.selected { border-color: var(--primary); background: rgba(99,102,241,0.05); }
|
||||
.payment-option input[type="radio"] { display: none; }
|
||||
.payment-radio { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
|
||||
.payment-option.selected .payment-radio { border-color: var(--primary); background: var(--primary); }
|
||||
.payment-option.selected .payment-radio::after { content: ''; width: 8px; height: 8px; background: white; border-radius: 50%; }
|
||||
.payment-icon { width: 40px; height: 40px; background: var(--bg-card); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
|
||||
.payment-info { flex: 1; }
|
||||
.payment-info .pm-name { font-weight: 600; font-size: 0.95rem; }
|
||||
.payment-info .pm-desc { font-size: 0.8rem; color: var(--text-muted); }
|
||||
|
||||
.crypto-options { display: none; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1rem; }
|
||||
.crypto-options.show { display: grid; }
|
||||
.crypto-opt { background: var(--bg-dark); border: 2px solid var(--border); border-radius: 10px; padding: 1rem; text-align: center; cursor: pointer; transition: all 0.2s; font-size: 0.85rem; font-weight: 600; }
|
||||
.crypto-opt:hover, .crypto-opt.selected { border-color: var(--primary); background: rgba(99,102,241,0.1); }
|
||||
|
||||
.wallet-input { margin-top: 1rem; display: none; }
|
||||
.wallet-input.show { display: block; }
|
||||
.wallet-input input { width: 100%; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 0.75rem 1rem; font-size: 0.9rem; }
|
||||
.wallet-input input:focus { outline: none; border-color: var(--primary); }
|
||||
.wallet-input p { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }
|
||||
|
||||
.checkout-summary { position: sticky; top: 100px; }
|
||||
.summary-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; }
|
||||
.summary-card h3 { font-size: 1.15rem; margin-bottom: 1.5rem; }
|
||||
|
||||
.summary-line { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
|
||||
.summary-line:last-of-type { border-bottom: none; }
|
||||
.summary-line .label { color: var(--text-muted); }
|
||||
.summary-line .value { font-weight: 600; }
|
||||
.summary-line.total { margin-top: 0.5rem; padding-top: 1rem; border-top: 2px solid var(--border); font-size: 1.1rem; }
|
||||
.summary-line.total .value { color: var(--cta); font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; }
|
||||
|
||||
.escrow-note { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); border-radius: 8px; padding: 1rem; margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-muted); display: flex; gap: 0.75rem; align-items: flex-start; }
|
||||
.escrow-note svg { stroke: #10B981; flex-shrink: 0; margin-top: 2px; }
|
||||
|
||||
.checkout-btn { width: 100%; margin-top: 1.5rem; padding: 1.1rem; background: linear-gradient(135deg, var(--cta), #D97706); color: var(--bg-dark); border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s; font-family: 'Space Grotesk', sans-serif; }
|
||||
.checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,158,11,0.3); }
|
||||
|
||||
.secure-note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.8rem; color: var(--text-muted); }
|
||||
.secure-note svg { stroke: var(--text-muted); }
|
||||
|
||||
.trust-icons { display: flex; justify-content: center; gap: 2rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
|
||||
.trust-icon { text-align: center; }
|
||||
.trust-icon .ti-val { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--primary); }
|
||||
.trust-icon .ti-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; }
|
||||
|
||||
footer { background: var(--bg-card); padding: 2rem 5%; border-top: 1px solid var(--border); text-align: center; color: var(--text-muted); font-size: 0.85rem; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.checkout-container { grid-template-columns: 1fr; }
|
||||
.checkout-summary { position: static; }
|
||||
.order-summary { flex-direction: column; text-align: center; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
nav ul { display: none; }
|
||||
.crypto-options { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<a href="index.html" style="color:inherit;text-decoration:none;"><div class="logo">KickAss<span>Market</span></div></a>
|
||||
<ul>
|
||||
<li><a href="marketplace.html">Marketplace</a></li>
|
||||
<li><a href="sell.html">Sell</a></li>
|
||||
<li><a href="checkout.html" style="color: var(--text);">Checkout</a></li>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="checkout-container">
|
||||
|
||||
<div class="checkout-main">
|
||||
<h1>Secure Checkout</h1>
|
||||
<p>Your payment is protected by escrow. Funds are released only when delivery is confirmed.</p>
|
||||
|
||||
<div class="order-summary">
|
||||
<div class="order-image">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</div></a>
|
||||
<div class="order-details">
|
||||
<div class="order-cat">Prompts</div></a>
|
||||
<h3>Claude 100K Context Bundle</h3>
|
||||
<div class="order-seller">by AIStudio Pro</div></a>
|
||||
</div></a>
|
||||
</div></a>
|
||||
|
||||
<div class="escrow-banner">
|
||||
<div class="escrow-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
</div></a>
|
||||
<div class="escrow-text">
|
||||
<h4>Escrow Protection Active</h4>
|
||||
<p>Your payment is held securely until delivery is confirmed. If the product isn't delivered within 24 hours, you'll receive a full refund automatically.</p>
|
||||
</div></a>
|
||||
</div></a>
|
||||
|
||||
<div class="section-card">
|
||||
<h3>Select Payment Method</h3>
|
||||
|
||||
<div class="payment-methods">
|
||||
|
||||
<label class="payment-option selected" onclick="selectPayment(this)">
|
||||
<input type="radio" name="payment" checked>
|
||||
<div class="payment-radio"></div></a>
|
||||
<div class="payment-icon">💳</div></a>
|
||||
<div class="payment-info">
|
||||
<div class="pm-name">Credit / Debit Card</div></a>
|
||||
<div class="pm-desc">Visa, Mastercard, Amex — instant processing</div></a>
|
||||
</div></a>
|
||||
</label>
|
||||
|
||||
<label class="payment-option" onclick="selectPayment(this)">
|
||||
<input type="radio" name="payment">
|
||||
<div class="payment-radio"></div></a>
|
||||
<div class="payment-icon">🔷</div></a>
|
||||
<div class="payment-info">
|
||||
<div class="pm-name">USDC</div></a>
|
||||
<div class="pm-desc">Stablecoin on Base or Ethereum — fast settlement</div></a>
|
||||
</div></a>
|
||||
</label>
|
||||
|
||||
<label class="payment-option" onclick="selectPayment(this)">
|
||||
<input type="radio" name="payment">
|
||||
<div class="payment-radio"></div></a>
|
||||
<div class="payment-icon">🔶</div></a>
|
||||
<div class="payment-info">
|
||||
<div class="pm-name">USDT</div></a>
|
||||
<div class="pm-desc">Tether on Base, Ethereum, or Tron</div></a>
|
||||
</div></a>
|
||||
</label>
|
||||
|
||||
<label class="payment-option" onclick="selectPayment(this)">
|
||||
<input type="radio" name="payment">
|
||||
<div class="payment-radio"></div></a>
|
||||
<div class="payment-icon">⟠</div></a>
|
||||
<div class="payment-info">
|
||||
<div class="pm-name">ETH</div></a>
|
||||
<div class="pm-desc">Ethereum — settles in minutes</div></a>
|
||||
</div></a>
|
||||
</label>
|
||||
|
||||
</div></a>
|
||||
|
||||
<div class="crypto-options" id="cryptoOptions">
|
||||
<div class="crypto-opt selected">Base</div></a>
|
||||
<div class="crypto-opt">Ethereum</div></a>
|
||||
<div class="crypto-opt">Tron</div></a>
|
||||
</div></a>
|
||||
|
||||
<div class="wallet-input" id="walletInput">
|
||||
<input type="text" placeholder="Enter your wallet address (0x...)">
|
||||
<p>Funds will be sent from this wallet. Make sure it has sufficient balance.</p>
|
||||
</div></a>
|
||||
|
||||
</div></a>
|
||||
|
||||
</div></a>
|
||||
|
||||
<div class="checkout-summary">
|
||||
<div class="summary-card">
|
||||
<h3>Order Summary</h3>
|
||||
|
||||
<div class="summary-line"><span class="label">Product</span><span class="value">Claude 100K Context Bundle</span></div></a>
|
||||
<div class="summary-line"><span class="label">Subtotal</span><span class="value">$49.00</span></div></a>
|
||||
<div class="summary-line"><span class="label">Escrow fee (10%)</span><span class="value">$4.90</span></div></a>
|
||||
<div class="summary-line"><span class="label">Processing fee</span><span class="value">$1.43</span></div></a>
|
||||
<div class="summary-line total"><span class="label">Total</span><span class="value">$55.33</span></div></a>
|
||||
|
||||
<div class="escrow-note">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
<span>Your payment is held in escrow. Released to seller only after you confirm delivery. Auto-refund if not delivered within 24 hours.</span>
|
||||
</div></a>
|
||||
|
||||
<button class="checkout-btn">Pay $55.33 →</button>
|
||||
|
||||
<div class="secure-note">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||||
256-bit SSL encrypted checkout
|
||||
</div></a>
|
||||
|
||||
<div class="trust-icons">
|
||||
<div class="trust-icon"><div class="ti-val">500+</div><div class="ti-label">Products</div></div></a>
|
||||
<div class="trust-icon"><div class="ti-val">$2M+</div><div class="ti-label">Escrowed</div></div></a>
|
||||
<div class="trust-icon"><div class="ti-val">10%</div><div class="ti-label">Flat Fee</div></div></a>
|
||||
</div></a>
|
||||
</div></a>
|
||||
</div></a>
|
||||
|
||||
</div></a>
|
||||
|
||||
<script>
|
||||
function selectPayment(el) {
|
||||
document.querySelectorAll('.payment-option').forEach(e => e.classList.remove('selected'));
|
||||
el.classList.add('selected');
|
||||
el.querySelector('input').checked = true;
|
||||
|
||||
const isCrypto = el.querySelector('.pm-name').textContent !== 'Credit / Debit Card';
|
||||
document.getElementById('cryptoOptions').classList.toggle('show', isCrypto);
|
||||
document.getElementById('walletInput').classList.toggle('show', isCrypto);
|
||||
}
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
<p>2010-2026 KickAssMarket — The AI-to-AI Marketplace. <a href="index.html" style="color: var(--primary);">Back to Home</a></p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user