<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Cilck Clothing – Wear Your Identity</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #faf7f4; --black: #111; --accent: #c8a97e; --accent2: #8b6340;
--text: #333; --muted: #888; --card: #fff; --border: #e8e0d8; --green: #25D366;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'Outfit', sans-serif; overflow-x: hidden; }
/* WHATSAPP FLOATING */
.wa-float {
position: fixed; bottom: 24px; right: 24px; z-index: 999;
background: var(--green); color: #fff;
width: 58px; height: 58px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; box-shadow: 0 6px 24px rgba(37,211,102,0.4);
text-decoration: none; transition: transform .3s, box-shadow .3s;
animation: pulse 2s infinite;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,0.6); }
@keyframes pulse {
0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,0.4); }
50% { box-shadow: 0 6px 36px rgba(37,211,102,0.7); }
}
.wa-tooltip {
position: fixed; bottom: 90px; right: 24px; z-index: 998;
background: #fff; color: var(--black);
padding: 8px 14px; border-radius: 8px;
font-size: 0.78rem; font-weight: 600;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
white-space: nowrap;
}
.wa-tooltip::after {
content: ''; position: absolute; bottom: -6px; right: 20px;
border: 6px solid transparent; border-top-color: #fff;
border-bottom: none;
}
/* ANNOUNCEMENT */
.announcement {
background: var(--black); color: #fff;
text-align: center; padding: 10px;
font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase;
}
.announcement span { color: var(--accent); margin: 0 8px; }
/* NAV */
nav {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 5vw; background: var(--bg);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 100;
}
.logo { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 900; color: var(--black); }
.logo span { color: var(--accent); }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { color: var(--text); text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: color .2s; cursor: pointer; }
.nav-links a:hover { color: var(--accent2); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.cart-btn {
position: relative; background: none; border: none;
font-size: 1.3rem; cursor: pointer;
}
.cart-count {
position: absolute; top: -6px; right: -8px;
background: var(--accent); color: #fff;
width: 18px; height: 18px; border-radius: 50%;
font-size: 0.65rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.nav-cta {
background: var(--black); color: #fff;
padding: 10px 22px; border-radius: 2px;
font-size: 0.82rem; font-weight: 600;
text-decoration: none; letter-spacing: 1px; transition: background .2s;
}
.nav-cta:hover { background: var(--accent2); }
/* PAGES */
.page { display: none; }
.page.active { display: block; }
/* HERO */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 90vh; }
.hero-left {
background: var(--black); display: flex; flex-direction: column;
justify-content: center; padding: 80px 7vw; position: relative; overflow: hidden;
}
.hero-left::before {
content: 'CILCK'; position: absolute;
font-family: 'Playfair Display', serif; font-size: 18rem; font-weight: 900;
color: rgba(255,255,255,0.03); bottom: -40px; left: -30px; line-height: 1; pointer-events: none;
}
.hero-badge {
display: inline-block; border: 1px solid var(--accent); color: var(--accent);
padding: 5px 14px; font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase;
margin-bottom: 28px; width: fit-content;
}
.hero-left h1 {
font-family: 'Playfair Display', serif; font-size: clamp(3rem, 5vw, 5rem);
font-weight: 900; color: #fff; line-height: 1.05; margin-bottom: 20px;
}
.hero-left h1 em { color: var(--accent); font-style: normal; }
.hero-left p { color: #aaa; font-size: 0.95rem; line-height: 1.8; max-width: 380px; margin-bottom: 40px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-gold {
background: var(--accent); color: var(--black);
padding: 14px 32px; font-weight: 700; font-size: 0.85rem;
letter-spacing: 1px; text-decoration: none; border-radius: 2px;
border: none; cursor: pointer; transition: background .2s, transform .2s;
}
.btn-gold:hover { background: var(--accent2); color: #fff; transform: translateY(-2px); }
.btn-outline-white {
border: 1px solid #555; color: #fff; padding: 14px 32px;
font-size: 0.85rem; letter-spacing: 1px; text-decoration: none;
border-radius: 2px; cursor: pointer; background: none; transition: border-color .2s;
}
.btn-outline-white:hover { border-color: #fff; }
.hero-right {
background: #e8e0d8; display: flex; align-items: center;
justify-content: center; flex-direction: column; gap: 20px; padding: 40px;
}
.hero-img-main { font-size: 9rem; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hero-tag-pill {
background: #fff; padding: 8px 18px; border-radius: 100px;
font-size: 0.8rem; font-weight: 600; color: var(--black);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.hero-tag-pill span { color: var(--accent2); }
/* MARQUEE */
.marquee-wrap { background: var(--accent); padding: 14px 0; overflow: hidden; white-space: nowrap; }
.marquee-inner { display: inline-block; animation: marquee 18s linear infinite; }
.marquee-inner span { font-size: 0.78rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--black); margin: 0 36px; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* SECTIONS */
.section { padding: 80px 5vw; }
.sec-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.sec-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent2); margin-bottom: 8px; }
.sec-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--black); line-height: 1.1; }
.see-all { color: var(--accent2); font-size: 0.85rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; cursor: pointer; }
/* CATEGORIES */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card {
border-radius: 8px; overflow: hidden; position: relative; cursor: pointer;
aspect-ratio: 3/4; display: flex; align-items: flex-end; transition: transform .3s;
}
.cat-card:hover { transform: scale(1.02); }
.cat-emoji { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); font-size: 5rem; }
.cat-info { background: linear-gradient(transparent, rgba(0,0,0,0.8)); width: 100%; padding: 20px 16px 16px; color: #fff; }
.cat-info h3 { font-size: 1rem; font-weight: 700; }
.cat-info span { font-size: 0.75rem; color: #ccc; }
/* PRODUCTS GRID */
.bg-dark { background: var(--black); }
.bg-dark .sec-title { color: #fff; }
.bg-dark .sec-label { color: var(--accent); }
.bg-dark .see-all { color: var(--accent); border-color: var(--accent); }
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prod-card {
background: #1a1a1a; border-radius: 8px; overflow: hidden;
cursor: pointer; transition: transform .3s;
}
.prod-card:hover { transform: translateY(-6px); }
.prod-thumb {
background: #222; height: 200px;
display: flex; align-items: center; justify-content: center;
font-size: 5rem; position: relative;
}
.prod-badge {
position: absolute; top: 12px; left: 12px;
background: var(--accent); color: var(--black);
font-size: 0.65rem; font-weight: 700; letter-spacing: 1px;
padding: 4px 10px; border-radius: 2px;
}
.prod-info { padding: 16px; }
.prod-info h4 { color: #fff; font-size: 0.92rem; font-weight: 600; margin-bottom: 6px; }
.prod-info .rating { color: var(--accent); font-size: 0.75rem; margin-bottom: 8px; }
.prod-info .price { color: var(--accent); font-weight: 700; font-size: 1rem; }
.prod-info .price s { color: #555; font-size: 0.8rem; font-weight: 400; margin-left: 6px; }
.prod-info .colors { display: flex; gap: 6px; margin-top: 10px; }
.color-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #333; cursor: pointer; }
.order-btn {
width: 100%; margin-top: 12px; background: var(--accent); color: var(--black);
border: none; padding: 10px; font-weight: 700; font-size: 0.8rem;
border-radius: 4px; cursor: pointer; transition: background .2s;
}
.order-btn:hover { background: var(--accent2); color: #fff; }
/* PRODUCT DETAIL PAGE */
.prod-detail { padding: 60px 5vw; }
.back-btn {
display: inline-flex; align-items: center; gap: 8px;
color: var(--muted); font-size: 0.85rem; cursor: pointer;
margin-bottom: 40px; background: none; border: none; font-family: 'Outfit', sans-serif;
}
.back-btn:hover { color: var(--black); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.detail-image {
background: #e8e0d8; border-radius: 12px;
height: 480px; display: flex; align-items: center; justify-content: center;
font-size: 10rem;
}
.detail-info h1 { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 900; margin-bottom: 12px; }
.detail-info .d-rating { color: var(--accent); font-size: 0.9rem; margin-bottom: 16px; }
.detail-price { font-size: 2rem; font-weight: 700; color: var(--accent2); margin-bottom: 8px; }
.detail-price s { font-size: 1.2rem; color: var(--muted); font-weight: 400; margin-left: 8px; }
.save-badge { background: #e8f5e9; color: #2e7d32; padding: 4px 12px; border-radius: 100px; font-size: 0.78rem; font-weight: 700; display: inline-block; margin-bottom: 24px; }
.detail-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.8; margin-bottom: 28px; }
.detail-section-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--black); margin-bottom: 12px; }
.size-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.size-btn {
width: 44px; height: 44px; border: 1.5px solid var(--border);
border-radius: 4px; background: none; font-size: 0.8rem; font-weight: 600;
cursor: pointer; transition: all .2s;
}
.size-btn:hover, .size-btn.active { border-color: var(--black); background: var(--black); color: #fff; }
.detail-colors { display: flex; gap: 12px; margin-bottom: 32px; }
.detail-color { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: border-color .2s; }
.detail-color:hover, .detail-color.active { border-color: var(--black); }
.qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.qty-ctrl { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 4px; overflow: hidden; }
.qty-btn { width: 40px; height: 40px; background: none; border: none; font-size: 1.2rem; cursor: pointer; transition: background .2s; }
.qty-btn:hover { background: var(--bg); }
.qty-num { width: 48px; text-align: center; font-weight: 600; font-size: 0.95rem; }
.action-btns { display: flex; gap: 12px; }
.btn-buy {
flex: 1; background: var(--black); color: #fff; border: none;
padding: 16px; font-size: 0.9rem; font-weight: 700; border-radius: 4px;
cursor: pointer; transition: background .2s; font-family: 'Outfit', sans-serif;
}
.btn-buy:hover { background: var(--accent2); }
.btn-wa {
background: var(--green); color: #fff; border: none;
padding: 16px 20px; border-radius: 4px; cursor: pointer;
font-size: 1.2rem; transition: opacity .2s;
}
.btn-wa:hover { opacity: 0.85; }
/* CART */
.cart-page { padding: 60px 5vw; }
.cart-page h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 40px; }
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; }
.cart-item {
display: flex; gap: 20px; align-items: center;
padding: 20px 0; border-bottom: 1px solid var(--border);
}
.cart-item-img { width: 80px; height: 80px; background: #e8e0d8; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; flex-shrink: 0; }
.cart-item-info { flex: 1; }
.cart-item-info h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.cart-item-info span { color: var(--muted); font-size: 0.82rem; }
.cart-item-price { font-weight: 700; color: var(--accent2); font-size: 1rem; }
.cart-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; }
.cart-empty { text-align: center; padding: 80px 0; color: var(--muted); }
.cart-empty .empty-icon { font-size: 4rem; margin-bottom: 16px; }
.order-summary {
background: var(--card); border: 1px solid var(--border);
border-radius: 12px; padding: 28px; height: fit-content; position: sticky; top: 100px;
}
.order-summary h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; margin-bottom: 24px; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 0.88rem; }
.summary-row.total { font-weight: 700; font-size: 1rem; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 8px; }
.checkout-btn {
width: 100%; margin-top: 20px; background: var(--black); color: #fff;
border: none; padding: 16px; font-size: 0.9rem; font-weight: 700;
border-radius: 4px; cursor: pointer; font-family: 'Outfit', sans-serif; transition: background .2s;
}
.checkout-btn:hover { background: var(--accent2); }
.wa-checkout {
width: 100%; margin-top: 10px; background: var(--green); color: #fff;
border: none; padding: 14px; font-size: 0.88rem; font-weight: 700;
border-radius: 4px; cursor: pointer; font-family: 'Outfit', sans-serif;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.razorpay-note {
margin-top: 16px; padding: 12px; background: #fff8f0;
border-radius: 8px; font-size: 0.78rem; color: #666; text-align: center;
border: 1px solid #ffe0c0;
}
/* WHY */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 10px; padding: 32px 24px; text-align: center; transition: box-shadow .3s, transform .3s;
}
.why-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); transform: translateY(-4px); }
.why-icon { font-size: 2.5rem; margin-bottom: 16px; }
.why-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; color: var(--black); }
.why-card p { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }
/* REVIEWS */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 28px; }
.review-stars { color: var(--accent); font-size: 0.9rem; margin-bottom: 14px; }
.review-card p { font-size: 0.88rem; line-height: 1.7; color: #555; margin-bottom: 20px; }
.reviewer { display: flex; align-items: center; gap: 12px; }
.avi { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 0.9rem; }
.reviewer strong { display: block; font-size: 0.85rem; color: var(--black); }
.reviewer span { font-size: 0.75rem; color: var(--muted); }
/* NEWSLETTER */
.newsletter { background: var(--black); padding: 80px 5vw; text-align: center; }
.newsletter h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin-bottom: 12px; }
.newsletter h2 span { color: var(--accent); }
.newsletter p { color: #888; font-size: 0.95rem; margin-bottom: 36px; }
.email-form { display: flex; max-width: 480px; margin: 0 auto; }
.email-form input { flex: 1; padding: 14px 20px; border: none; background: #1a1a1a; color: #fff; font-family: 'Outfit', sans-serif; font-size: 0.9rem; border-radius: 2px 0 0 2px; outline: none; }
.email-form input::placeholder { color: #555; }
.email-form button { background: var(--accent); color: var(--black); border: none; padding: 14px 28px; font-weight: 700; font-size: 0.85rem; cursor: pointer; border-radius: 0 2px 2px 0; transition: background .2s; font-family: 'Outfit', sans-serif; }
.email-form button:hover { background: var(--accent2); color: #fff; }
/* FOOTER */
footer { background: #0a0a0a; padding: 60px 5vw 0; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid #1a1a1a; }
.footer-brand p { color: #555; font-size: 0.83rem; line-height: 1.7; margin-top: 14px; max-width: 240px; }
.social-row { display: flex; gap: 12px; margin-top: 20px; }
.social-btn { width: 36px; height: 36px; border: 1px solid #2a2a2a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; cursor: pointer; transition: border-color .2s; }
.social-btn:hover { border-color: var(--accent); }
footer h4 { color: #777; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
footer ul { list-style: none; }
footer ul li { margin-bottom: 10px; }
footer ul a { color: #555; text-decoration: none; font-size: 0.85rem; transition: color .2s; }
footer ul a:hover { color: #fff; }
.footer-bottom { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; color: #333; font-size: 0.75rem; }
/* RAZORPAY GUIDE */
.guide-page { padding: 60px 5vw; max-width: 800px; }
.guide-page h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 12px; }
.guide-page .subtitle { color: var(--muted); margin-bottom: 40px; }
.guide-step { display: flex; gap: 20px; margin-bottom: 32px; align-items: flex-start; }
.g-num { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--black); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.g-content h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.g-content p { color: var(--muted); font-size: 0.88rem; line-height: 1.7; }
.g-content a { color: var(--accent2); }
.guide-note { background: #fff8f0; border: 1px solid #ffe0c0; border-radius: 8px; padding: 16px 20px; margin-top: 32px; font-size: 0.85rem; color: #666; }
/* MODAL */
.modal-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.6); z-index: 200;
align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
background: #fff; border-radius: 12px; padding: 36px;
max-width: 480px; width: 90%; position: relative;
}
.modal h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin-bottom: 8px; }
.modal p { color: var(--muted); font-size: 0.88rem; margin-bottom: 24px; }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); }
.modal-wa-btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; background: var(--green); color: #fff; border: none;
padding: 16px; font-size: 1rem; font-weight: 700; border-radius: 8px;
cursor: pointer; font-family: 'Outfit', sans-serif; text-decoration: none;
margin-bottom: 12px;
}
.modal-razorpay-btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; background: var(--black); color: #fff; border: none;
padding: 16px; font-size: 1rem; font-weight: 700; border-radius: 8px;
cursor: pointer; font-family: 'Outfit', sans-serif;
}
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; min-height: auto; }
.hero-right { display: none; }
.cat-grid { grid-template-columns: repeat(2, 1fr); }
.prod-grid { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.review-grid { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr 1fr; }
.nav-links { display: none; }
.detail-grid { grid-template-columns: 1fr; }
.cart-layout { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- WHATSAPP FLOATING BUTTON -->
<div class="wa-tooltip">💬 Order on WhatsApp</div>
<a class="wa-float" href="https://wa.me/918291674943?text=Hi%20Cilck%20Clothing!%20I%20want%20to%20place%20an%20order%20%F0%9F%91%95" target="_blank">💬</a>
<!-- CHECKOUT MODAL -->
<div class="modal-overlay" id="checkoutModal">
<div class="modal">
<button class="modal-close" onclick="closeModal()">✕</button>
<h2>Complete Your Order</h2>
<p>Choose how you want to pay. WhatsApp order is instant!</p>
<a class="modal-wa-btn" id="waOrderBtn" href="#" target="_blank">
💬 Order via WhatsApp (Instant)
</a>
<button class="modal-razorpay-btn" onclick="showRazorpayGuide()">
💳 Pay Online (Setup Razorpay)
</button>
</div>
</div>
<div class="announcement">
Free Delivery Above ₹999 <span>✦</span> Use Code: CILCK20 for 20% Off <span>✦</span> New Collection Live!
</div>
<nav>
<div class="logo" onclick="showPage('home')" style="cursor:pointer">Cilck <span>Clothing</span></div>
<ul class="nav-links">
<li><a onclick="showPage('home')">Home</a></li>
<li><a onclick="showPage('products')">All Products</a></li>
<li><a onclick="showPage('home')">Custom Print</a></li>
<li><a onclick="showPage('razorpay')">💳 Setup Payment</a></li>
</ul>
<div class="nav-right">
<button class="cart-btn" onclick="showPage('cart')">🛒<span class="cart-count" id="cartCount">0</span></button>
<a href="https://wa.me/918291674943?text=Hi!%20I%20want%20to%20order%20from%20Cilck%20Clothing" target="_blank" class="nav-cta">WhatsApp Order</a>
</div>
</nav>
<!-- ===== HOME PAGE ===== -->
<div id="home" class="page active">
<section class="hero">
<div class="hero-left">
<div class="hero-badge">New Collection 2025</div>
<h1>Wear Your<br/><em>Identity.</em></h1>
<p>Premium custom clothing & accessories. Express yourself with every stitch — bold tees, hoodies, mugs, caps & more.</p>
<div class="hero-btns">
<button class="btn-gold" onclick="showPage('products')">Shop Collection</button>
<a href="https://wa.me/918291674943?text=Hi!%20I%20want%20a%20custom%20print%20order%20from%20Cilck%20Clothing" target="_blank" class="btn-outline-white">Custom Print →</a>
</div>
</div>
<div class="hero-right">
<div class="hero-img-main">👕</div>
<div class="hero-tag-pill">Starting from <span>₹199 only</span></div>
<div class="hero-tag-pill">🚚 Pan-India Delivery</div>
</div>
</section>
<div class="marquee-wrap">
<div class="marquee-inner">
<span>T-Shirts</span><span>✦</span><span>Hoodies</span><span>✦</span><span>Caps</span><span>✦</span><span>Mugs</span><span>✦</span><span>Tote Bags</span><span>✦</span><span>Accessories</span><span>✦</span><span>Custom Prints</span><span>✦</span><span>Bulk Orders</span><span>✦</span>
<span>T-Shirts</span><span>✦</span><span>Hoodies</span><span>✦</span><span>Caps</span><span>✦</span><span>Mugs</span><span>✦</span><span>Tote Bags</span><span>✦</span><span>Accessories</span><span>✦</span><span>Custom Prints</span><span>✦</span><span>Bulk Orders</span><span>✦</span>
</div>
</div>
<section class="section">
<div class="sec-header">
<div><div class="sec-label">Browse</div><div class="sec-title">Shop by Category</div></div>
<span class="see-all" onclick="showPage('products')">View All →</span>
</div>
<div class="cat-grid">
<div class="cat-card" style="background:#d4c9bc;" onclick="showPage('products')">
<div class="cat-emoji">👕</div>
<div class="cat-info"><h3>T-Shirts</h3><span>120+ Styles</span></div>
</div>
<div class="cat-card" style="background:#c9d4bc;" onclick="showPage('products')">
<div class="cat-emoji">🧥</div>
<div class="cat-info"><h3>Hoodies</h3><span>60+ Styles</span></div>
</div>
<div class="cat-card" style="background:#bcc9d4;" onclick="showPage('products')">
<div class="cat-emoji">🧢</div>
<div class="cat-info"><h3>Caps & Hats</h3><span>45+ Styles</span></div>
</div>
<div class="cat-card" style="background:#d4bcc9;" onclick="showPage('products')">
<div class="cat-emoji">👜</div>
<div class="cat-info"><h3>Accessories</h3><span>80+ Items</span></div>
</div>
</div>
</section>
<section class="section bg-dark">
<div class="sec-header">
<div><div class="sec-label">Bestsellers</div><div class="sec-title">Most Loved Products</div></div>
<span class="see-all" onclick="showPage('products')">View All →</span>
</div>
<div class="prod-grid">
<div class="prod-card" onclick="showDetail(0)">
<div class="prod-thumb">👕<div class="prod-badge">BESTSELLER</div></div>
<div class="prod-info">
<h4>Classic Graphic Tee</h4>
<div class="rating">★★★★★ (248)</div>
<div class="price">₹299 <s>₹499</s></div>
<div class="colors"><div class="color-dot" style="background:#222"></div><div class="color-dot" style="background:#fff;border-color:#444"></div><div class="color-dot" style="background:#c8a97e"></div></div>
<button class="order-btn" onclick="event.stopPropagation();addToCart(0)">Add to Cart</button>
</div>
</div>
<div class="prod-card" onclick="showDetail(1)">
<div class="prod-thumb">🧥<div class="prod-badge">NEW</div></div>
<div class="prod-info">
<h4>Premium Hoodie</h4>
<div class="rating">★★★★★ (182)</div>
<div class="price">₹799 <s>₹1299</s></div>
<div class="colors"><div class="color-dot" style="background:#333"></div><div class="color-dot" style="background:#8b6340"></div></div>
<button class="order-btn" onclick="event.stopPropagation();addToCart(1)">Add to Cart</button>
</div>
</div>
<div class="prod-card" onclick="showDetail(2)">
<div class="prod-thumb">☕</div>
<div class="prod-info">
<h4>Custom Printed Mug</h4>
<div class="rating">★★★★☆ (96)</div>
<div class="price">₹249 <s>₹399</s></div>
<div class="colors"><div class="color-dot" style="background:#fff;border-color:#555"></div><div class="color-dot" style="background:#111"></div></div>
<button class="order-btn" onclick="event.stopPropagation();addToCart(2)">Add to Cart</button>
</div>
</div>
<div class="prod-card" onclick="showDetail(3)">
<div class="prod-thumb">🧢<div class="prod-badge">HOT</div></div>
<div class="prod-info">
<h4>Embroidered Cap</h4>
<div class="rating">★★★★★ (134)</div>
<div class="price">₹349 <s>₹599</s></div>
<div class="colors"><div class="color-dot" style="background:#1a1a1a"></div><div class="color-dot" style="background:#c8a97e"></div></div>
<button class="order-btn" onclick="event.stopPropagation();addToCart(3)">Add to Cart</button>
</div>
</div>
</div>
</section>
<section class="section">
<div class="sec-header"><div><div class="sec-label">Why Cilck</div><div class="sec-title">The Cilck Promise</div></div></div>
<div class="why-grid">
<div class="why-card"><div class="why-icon">✨</div><h3>Premium Quality</h3><p>100% cotton fabrics with colorfast, durable printing that lasts wash after wash.</p></div>
<div class="why-card"><div class="why-icon">⚡</div><h3>Fast Delivery</h3><p>Order dispatched in 24–48 hrs. Delivered pan-India in 3–5 working days.</p></div>
<div class="why-card"><div class="why-icon">🎨</div><h3>Custom Designs</h3><p>Upload your own artwork. Any idea, any print, any quantity.</p></div>
<div class="why-card"><div class="why-icon">🔄</div><h3>Easy Returns</h3><p>7-day hassle-free returns. No questions asked.</p></div>
</div>
</section>
<section class="section" style="padding-top:0">
<div class="sec-header"><div><div class="sec-label">Reviews</div><div class="sec-title">What Customers Say</div></div></div>
<div class="review-grid">
<div class="review-card"><div class="review-stars">★★★★★</div><p>Got 50 custom hoodies for our startup. Quality blew us away — thick fabric, perfect colors!</p><div class="reviewer"><div class="avi">A</div><div><strong>Arjun Mehta</strong><span>Mumbai · Verified</span></div></div></div>
<div class="review-card"><div class="review-stars">★★★★★</div><p>Ordered mug and tote as gifts. Packaging was beautiful and delivery was super fast!</p><div class="reviewer"><div class="avi">S</div><div><strong>Sneha Reddy</strong><span>Hyderabad · Verified</span></div></div></div>
<div class="review-card"><div class="review-stars">★★★★☆</div><p>Great tees for college fest. Price is unbeatable for this quality. Very happy!</p><div class="reviewer"><div class="avi">K</div><div><strong>Karan Singh</strong><span>Delhi · Verified</span></div></div></div>
</div>
</section>
<div class="newsletter">
<h2>Get <span>20% Off</span> Your First Order</h2>
<p>Subscribe for exclusive deals, new launches & style inspo.</p>
<div class="email-form"><input type="email" placeholder="Enter your email"/><button>Subscribe</button></div>
</div>
<footer>
<div class="footer-top">
<div class="footer-brand">
<div class="logo">Cilck <span>Clothing</span></div>
<p>Premium custom clothing & accessories. Made in India, loved everywhere.</p>
<div class="social-row">
<div class="social-btn">📸</div><div class="social-btn">📘</div><div class="social-btn">▶️</div>
</div>
</div>
<div><h4>Shop</h4><ul><li><a href="#">T-Shirts</a></li><li><a href="#">Hoodies</a></li><li><a href="#">Caps</a></li><li><a href="#">Mugs</a></li><li><a href="#">Accessories</a></li></ul></div>
<div><h4>Services</h4><ul><li><a href="#">Custom Printing</a></li><li><a href="#">Bulk Orders</a></li><li><a href="#">Corporate Gifts</a></li><li><a href="#">Track Order</a></li></ul></div>
<div><h4>Help</h4><ul><li><a href="https://wa.me/918291674943" target="_blank">WhatsApp Us</a></li><li><a href="#">Returns</a></li><li><a href="#">Shipping Info</a></li><li><a href="#">Privacy Policy</a></li></ul></div>
</div>
<div class="footer-bottom"><span>© 2025 Cilck Clothing. All rights reserved.</span><span>Made with ❤️ in India</span></div>
</footer>
</div>
<!-- ===== PRODUCTS PAGE ===== -->
<div id="products" class="page">
<section class="section">
<button class="back-btn" onclick="showPage('home')">← Back to Home</button>
<div class="sec-header"><div><div class="sec-label">All Products</div><div class="sec-title">Shop Everything</div></div></div>
<div class="prod-grid" id="allProductsGrid"></div>
</section>
</div>
<!-- ===== PRODUCT DETAIL PAGE ===== -->
<div id="detail" class="page">
<div class="prod-detail">
<button class="back-btn" onclick="showPage('products')">← Back to Products</button>
<div class="detail-grid">
<div class="detail-image" id="detailImage"></div>
<div class="detail-info">
<h1 id="detailName"></h1>
<div class="d-rating" id="detailRating"></div>
<div class="detail-price" id="detailPrice"></div>
<div class="save-badge" id="detailSave"></div>
<p class="detail-desc" id="detailDesc"></p>
<div class="detail-section-label">Select Size</div>
<div class="size-grid">
<button class="size-btn" onclick="selectSize(this)">XS</button>
<button class="size-btn active" onclick="selectSize(this)">S</button>
<button class="size-btn" onclick="selectSize(this)">M</button>
<button class="size-btn" onclick="selectSize(this)">L</button>
<button class="size-btn" onclick="selectSize(this)">XL</button>
<button class="size-btn" onclick="selectSize(this)">XXL</button>
</div>
<div class="detail-section-label">Quantity</div>
<div class="qty-row">
<div class="qty-ctrl">
<button class="qty-btn" onclick="changeQty(-1)">−</button>
<span class="qty-num" id="qtyNum">1</span>
<button class="qty-btn" onclick="changeQty(1)">+</button>
</div>
</div>
<div class="action-btns">
<button class="btn-buy" id="addCartDetailBtn">Add to Cart 🛒</button>
<button class="btn-wa" id="waDetailBtn" title="Order on WhatsApp">💬</button>
</div>
</div>
</div>
</div>
</div>
<!-- ===== CART PAGE ===== -->
<div id="cart" class="page">
<div class="cart-page">
<button class="back-btn" onclick="showPage('home')">← Continue Shopping</button>
<h1>Your Cart 🛒</h1>
<div class="cart-layout">
<div id="cartItems"></div>
<div class="order-summary">
<h3>Order Summary</h3>
<div class="summary-row"><span>Subtotal</span><span id="subtotal">₹0</span></div>
<div class="summary-row"><span>Delivery</span><span id="delivery">₹0</span></div>
<div class="summary-row"><span>Discount</span><span id="discount" style="color:green">-₹0</span></div>
<div class="summary-row total"><span>Total</span><span id="totalAmt">₹0</span></div>
<button class="checkout-btn" onclick="openModal()">Checkout →</button>
<button class="wa-checkout" onclick="waCheckout()">💬 Order via WhatsApp</button>
<div class="razorpay-note">💳 Online payment coming soon! <a onclick="showPage('razorpay')" style="color:var(--accent2);cursor:pointer">Setup Razorpay →</a></div>
</div>
</div>
</div>
</div>
<!-- ===== RAZORPAY GUIDE PAGE ===== -->
<div id="razorpay" class="page">
<div class="guide-page section">
<button class="back-btn" onclick="showPage('home')">← Back to Home</button>
<div class="sec-label">Payment Setup</div>
<h1>Setup Razorpay for Cilck Clothing</h1>
<p class="subtitle">Follow these 5 easy steps to accept online payments on your website</p>
<div class="guide-step">
<div class="g-num">1</div>
<div class="g-content">
<h3>Create Razorpay Account</h3>
<p>Go to <a href="https://razorpay.com" target="_blank">razorpay.com</a> → Click "Sign Up" → Enter your email & mobile number → Verify OTP. It's completely FREE to sign up!</p>
</div>
</div>
<div class="guide-step">
<div class="g-num">2</div>
<div class="g-content">
<h3>Complete KYC (Business Verification)</h3>
<p>Login → Go to "Settings" → "Account & Billing" → Submit: Business name (Cilck Clothing), PAN card, Bank account details (where money will come). Takes 1–2 working days to approve.</p>
</div>
</div>
<div class="guide-step">
<div class="g-num">3</div>
<div class="g-content">
<h3>Get Your API Keys</h3>
<p>Dashboard → "Settings" → "API Keys" → Generate Test Key first, test payments → Then switch to Live Key when ready. You'll get a Key ID & Key Secret — keep them safe!</p>
</div>
</div>
<div class="guide-step">
<div class="g-num">4</div>
<div class="g-content">
<h3>Share Keys with Me</h3>
<p>Once you have your Razorpay Live Key ID (starts with "rzp_live_..."), share it with me in chat. I will add the full payment button to your Cilck Clothing website within minutes!</p>
</div>
</div>
<div class="guide-step">
<div class="g-num">5</div>
<div class="g-content">
<h3>Go Live & Accept Payments!</h3>
<p>Your website will accept UPI, Credit Card, Debit Card, Net Banking, Wallets — everything! Money settles to your bank account in 2 working days. Razorpay charges only 2% per transaction.</p>
</div>
</div>
<div class="guide-note">
💡 <strong>Tip:</strong> While Razorpay is being setup, your customers can order via WhatsApp (8291674943) and pay via UPI/GPay directly to you. This is the fastest way to start selling!
</div>
</div>
</div>
<script>
const WA_NUMBER = '918291674943';
const products = [
{ id:0, name:'Classic Graphic Tee', emoji:'👕', price:299, mrp:499, rating:'★★★★★ (248)', badge:'BESTSELLER', desc:'Premium 100% cotton round-neck t-shirt with vibrant custom printing. Colorfast, preshrunk, and ultra-soft. Available in 8 colors.' },
{ id:1, name:'Premium Hoodie', emoji:'🧥', price:799, mrp:1299, rating:'★★★★★ (182)', badge:'NEW', desc:'Thick 350GSM fleece hoodie with custom print/embroidery. Kangaroo pocket, ribbed cuffs. Perfect for winters.' },
{ id:2, name:'Custom Printed Mug', emoji:'☕', price:249, mrp:399, rating:'★★★★☆ (96)', badge:'', desc:'11oz ceramic mug with full-color sublimation print. Microwave & dishwasher safe. Perfect as gifts!' },
{ id:3, name:'Embroidered Cap', emoji:'🧢', price:349, mrp:599, rating:'★★★★★ (134)', badge:'HOT', desc:'Structured 6-panel cap with custom embroidery. One size fits all with adjustable strap. Premium feel.' },
{ id:4, name:'Tote Bag', emoji:'🎒', price:179, mrp:299, rating:'★★★★★ (88)', badge:'', desc:'Heavy-duty canvas tote bag with full-color custom print. Large 15L capacity. Eco-friendly & reusable.' },
{ id:5, name:'Custom Notebook', emoji:'📒', price:149, mrp:249, rating:'★★★★☆ (64)', badge:'', desc:'A5 ruled notebook with custom printed cover. 200 pages, spiral bound. Great for gifting.' },
{ id:6, name:'Polo T-Shirt', emoji:'👔', price:399, mrp:699, rating:'★★★★★ (110)', badge:'', desc:'Pique cotton polo with custom embroidery on chest. Collar & 3-button placket. Corporate & casual use.' },
{ id:7, name:'Die-Cut Stickers (50pcs)', emoji:'🏷️', price:199, mrp:349, rating:'★★★★★ (205)', badge:'VALUE', desc:'Waterproof vinyl stickers cut to your custom shape. Outdoor-grade, scratch-resistant. Any design!' },
];
let cart = [];
let currentQty = 1;
let currentDetailId = 0;
function showPage(page) {
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
document.getElementById(page).classList.add('active');
window.scrollTo(0, 0);
if(page === 'products') renderAllProducts();
if(page === 'cart') renderCart();
}
function renderAllProducts() {
const grid = document.getElementById('allProductsGrid');
grid.innerHTML = products.map(p => `
<div class="prod-card" onclick="showDetail(${p.id})">
<div class="prod-thumb">${p.emoji}${p.badge ? `<div class="prod-badge">${p.badge}</div>` : ''}</div>
<div class="prod-info">
<h4>${p.name}</h4>
<div class="rating">${p.rating}</div>
<div class="price">₹${p.price} <s>₹${p.mrp}</s></div>
<button class="order-btn" onclick="event.stopPropagation();addToCart(${p.id})">Add to Cart</button>
</div>
</div>
`).join('');
}
function showDetail(id) {
currentDetailId = id;
currentQty = 1;
const p = products[id];
document.getElementById('detailImage').textContent = p.emoji;
document.getElementById('detailName').textContent = p.name;
document.getElementById('detailRating').textContent = p.rating;
document.getElementById('detailPrice').innerHTML = `₹${p.price} <s>₹${p.mrp}</s>`;
document.getElementById('detailSave').textContent = `You save ₹${p.mrp - p.price}!`;
document.getElementById('detailDesc').textContent = p.desc;
document.getElementById('qtyNum').textContent = 1;
document.getElementById('addCartDetailBtn').onclick = () => { addToCart(id); showPage('cart'); };
document.getElementById('waDetailBtn').onclick = () => {
const msg = encodeURIComponent(`Hi Cilck Clothing! I want to order:\n*${p.name}*\nQty: ${currentQty}\nPrice: ₹${p.price * currentQty}\n\nPlease confirm availability.`);
window.open(`https://wa.me/${WA_NUMBER}?text=${msg}`, '_blank');
};
showPage('detail');
}
function selectSize(btn) {
document.querySelectorAll('.size-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
}
function changeQty(delta) {
currentQty = Math.max(1, currentQty + delta);
document.getElementById('qtyNum').textContent = currentQty;
}
function addToCart(id) {
const p = products[id];
const existing = cart.find(i => i.id === id);
if(existing) existing.qty++;
else cart.push({ ...p, qty: 1 });
updateCartCount();
showPage('cart');
}
function updateCartCount() {
const total = cart.reduce((s, i) => s + i.qty, 0);
document.getElementById('cartCount').textContent = total;
}
function renderCart() {
const container = document.getElementById('cartItems');
if(cart.length === 0) {
container.innerHTML = `<div class="cart-empty"><div class="empty-icon">🛒</div><p>Your cart is empty!</p><br><button class="btn-gold" onclick="showPage('products')">Start Shopping</button></div>`;
document.getElementById('subtotal').textContent = '₹0';
document.getElementById('delivery').textContent = '₹0';
document.getElementById('discount').textContent = '-₹0';
document.getElementById('totalAmt').textContent = '₹0';
return;
}
container.innerHTML = cart.map((item, idx) => `
<div class="cart-item">
<div class="cart-item-img">${item.emoji}</div>
<div class="cart-item-info">
<h4>${item.name}</h4>
<span>Qty: ${item.qty} | Size: M</span>
</div>
<div class="cart-item-price">₹${item.price * item.qty}</div>
<button class="cart-remove" onclick="removeFromCart(${idx})">🗑️</button>
</div>
`).join('');
const sub = cart.reduce((s, i) => s + i.price * i.qty, 0);
const delivery = sub >= 999 ? 0 : 79;
const discount = Math.round(sub * 0.1);
const total = sub + delivery - discount;
document.getElementById('subtotal').textContent = '₹' + sub;
document.getElementById('delivery').textContent = delivery === 0 ? 'FREE 🎉' : '₹' + delivery;
document.getElementById('discount').textContent = '-₹' + discount;
document.getElementById('totalAmt').textContent = '₹' + total;
}
function removeFromCart(idx) {
cart.splice(idx, 1);
updateCartCount();
renderCart();
}
function waCheckout() {
if(cart.length === 0) return;
const items = cart.map(i => `• ${i.name} x${i.qty} = ₹${i.price * i.qty}`).join('\n');
const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
const msg = encodeURIComponent(`Hi Cilck Clothing! I want to place an order:\n\n${items}\n\n*Total: ₹${total}*\n\nPlease confirm and share payment details.`);
window.open(`https://wa.me/${WA_NUMBER}?text=${msg}`, '_blank');
}
function openModal() {
if(cart.length === 0) { alert('Please add items to cart first!'); return; }
const items = cart.map(i => `• ${i.name} x${i.qty}`).join('\n');
const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
const msg = encodeURIComponent(`Hi Cilck Clothing! Order:\n${items}\nTotal: ₹${total}`);
document.getElementById('waOrderBtn').href = `https://wa.me/${WA_NUMBER}?text=${msg}`;
document.getElementById('checkoutModal').classList.add('open');
}
function closeModal() { document.getElementById('checkoutModal').classList.remove('open'); }
function showRazorpayGuide() { closeModal(); showPage('razorpay'); }
</script>
</body>
</html>