Spaces:

kloudboy
/

shopsphere

Running

App Files Files Community

kloudboy commited on Oct 14, 2025

Commit

367f74f

verified ·

1 Parent(s): 7a747c2

modern woocomrce flutter app

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +553 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Shopsphere
-emoji: 📈
-colorFrom: yellow
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ShopSphere 🛍️
+colorFrom: pink
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,554 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ShopSphere - Modern WooCommerce Experience</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛍️</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        :root {
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --secondary: #ec4899;
+            --secondary-dark: #db2777;
+            --accent: #f59e0b;
+            --surface: #ffffff;
+            --surface-dark: #0f172a;
+            --text: #1e293b;
+            --text-dark: #f1f5f9;
+            --border: #e2e8f0;
+            --border-dark: #334155;
+        }
+        .dark {
+            --surface: #0f172a;
+            --text: #f1f5f9;
+            --border: #334155;
+        }
+        .glass-effect {
+            backdrop-filter: blur(10px);
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .dark .glass-effect {
+            background: rgba(15, 23, 42, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .product-card {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        .product-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
+        }
+        .dark .product-card:hover {
+            box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
+        }
+        .cart-drawer {
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+        }
+        .cart-drawer.open {
+            transform: translateX(0);
+        }
+        .pulse-animation {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .floating-action {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            z-index: 50;
+        }
+        .search-overlay {
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+        .search-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+        .category-pill {
+            transition: all 0.2s ease;
+        }
+        .category-pill.active {
+            background: var(--primary);
+            color: white;
+        }
+        .loading-skeleton {
+            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+            background-size: 200% 100%;
+            animation: loading 1.5s infinite;
+        }
+        @keyframes loading {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+    </style>
+</head>
+<body class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 transition-colors duration-300">
+    <!-- Header -->
+    <header class="sticky top-0 z-40 bg-white/80 dark:bg-slate-900/80 glass-effect">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <!-- Logo -->
+                <div class="flex items-center space-x-2">
+                    <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-pink-500 rounded-lg flex items-center justify-center">
+                        <i data-feather="shopping-bag" class="w-5 h-5 text-white"></i>
+                    </div>
+                    <span class="text-xl font-bold gradient-text">ShopSphere</span>
+                </div>
+                <!-- Search Bar -->
+                <div class="hidden md:flex flex-1 max-w-md mx-8">
+                    <div class="relative w-full">
+                        <input type="text"
+                               placeholder="Search products..."
+                               class="w-full pl-10 pr-4 py-2 bg-slate-100 dark:bg-slate-800 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                               id="searchInput">
+                        <i data-feather="search" class="absolute left-3 top-2.5 w-5 h-5 text-slate-400"></i>
+                    </div>
+                </div>
+                <!-- Actions -->
+                <div class="flex items-center space-x-4">
+                    <button class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors" id="themeToggle">
+                        <i data-feather="moon" class="w-5 h-5 dark:hidden"></i>
+                        <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
+                    </button>
+                    <button class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors relative" id="cartBtn">
+                        <i data-feather="shopping-cart" class="w-5 h-5"></i>
+                        <span class="absolute -top-1 -right-1 bg-pink-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center" id="cartCount">0</span>
+                    </button>
+                    <button class="md:hidden p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors" id="searchBtn">
+                        <i data-feather="search" class="w-5 h-5"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="relative h-[60vh] overflow-hidden">
+        <div id="vanta-bg" class="absolute inset-0"></div>
+        <div class="relative z-10 h-full flex items-center justify-center text-center px-4">
+            <div>
+                <h1 class="text-4xl md:text-6xl font-bold mb-4">
+                    Discover Your <span class="gradient-text">Style</span>
+                </h1>
+                <p class="text-lg md:text-xl text-slate-600 dark:text-slate-300 mb-8 max-w-2xl mx-auto">
+                    Explore thousands of products with our modern shopping experience
+                </p>
+                <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-full font-medium transition-colors">
+                    Start Shopping
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Categories -->
+    <section class="py-12 px-4">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-2xl font-bold mb-6">Shop by Category</h2>
+            <div class="flex space-x-4 overflow-x-auto pb-4" id="categories">
+                <button class="category-pill active px-6 py-2 rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 whitespace-nowrap" data-category="all">
+                    All Products
+                </button>
+                <button class="category-pill px-6 py-2 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-colors" data-category="electronics">
+                    Electronics
+                </button>
+                <button class="category-pill px-6 py-2 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-colors" data-category="fashion">
+                    Fashion
+                </button>
+                <button class="category-pill px-6 py-2 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-colors" data-category="home">
+                    Home & Living
+                </button>
+                <button class="category-pill px-6 py-2 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-colors" data-category="beauty">
+                    Beauty
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Products Grid -->
+    <section class="py-12 px-4">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6" id="productsGrid">
+                <!-- Products will be loaded here -->
+            </div>
+        </div>
+    </section>
+    <!-- Cart Drawer -->
+    <div class="cart-drawer fixed top-0 right-0 h-full w-full sm:w-96 bg-white dark:bg-slate-900 shadow-2xl z-50" id="cartDrawer">
+        <div class="p-4 border-b border-slate-200 dark:border-slate-700">
+            <div class="flex items-center justify-between">
+                <h3 class="text-lg font-semibold">Shopping Cart</h3>
+                <button class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full" id="closeCart">
+                    <i data-feather="x" class="w-5 h-5"></i>
+                </button>
+            </div>
+        </div>
+        <div class="flex-1 overflow-y-auto p-4" id="cartItems">
+            <p class="text-center text-slate-500 dark:text-slate-400 py-8">Your cart is empty</p>
+        </div>
+        <div class="p-4 border-t border-slate-200 dark:border-slate-700">
+            <div class="flex justify-between mb-4">
+                <span class="font-semibold">Total:</span>
+                <span class="font-bold text-lg" id="cartTotal">$0.00</span>
+            </div>
+            <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium transition-colors">
+                Checkout
+            </button>
+        </div>
+    </div>
+    <!-- Search Overlay -->
+    <div class="search-overlay fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" id="searchOverlay">
+        <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 w-full max-w-2xl">
+            <div class="flex items-center space-x-4 mb-4">
+                <i data-feather="search" class="w-5 h-5 text-slate-400"></i>
+                <input type="text"
+                       placeholder="Search for products..."
+                       class="flex-1 bg-transparent text-lg focus:outline-none"
+                       id="overlaySearchInput">
+                <button class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full" id="closeSearch">
+                    <i data-feather="x" class="w-5 h-5"></i>
+                </button>
+            </div>
+            <div id="searchResults" class="space-y-2">
+                <!-- Search results will appear here -->
+            </div>
+        </div>
+    </div>
+    <!-- Floating Action Button -->
+    <button class="floating-action bg-indigo-600 hover:bg-indigo-700 text-white p-4 rounded-full shadow-lg transition-transform hover:scale-110" id="fab">
+        <i data-feather="arrow-up" class="w-6 h-6"></i>
+    </button>
+    <script>
+        // Initialize Vanta.js background
+        VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x6366f1,
+            backgroundColor: 0xffffff,
+            points: 8.00,
+            maxDistance: 25.00,
+            spacing: 20.00
+        });
+        // Theme toggle
+        const themeToggle = document.getElementById('themeToggle');
+        const html = document.documentElement;
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
+        });
+        // Load saved theme
+        if (localStorage.getItem('theme') === 'dark') {
+            html.classList.add('dark');
+        }
+        // Sample products data
+        const products = [
+            {
+                id: 1,
+                name: "Wireless Headphones",
+                price: 199.99,
+                category: "electronics",
+                image: "http://static.photos/technology/320x240/1",
+                rating: 4.5,
+                reviews: 234
+            },
+            {
+                id: 2,
+                name: "Designer T-Shirt",
+                price: 49.99,
+                category: "fashion",
+                image: "http://static.photos/fashion/320x240/2",
+                rating: 4.8,
+                reviews: 156
+            },
+            {
+                id: 3,
+                name: "Smart Home Hub",
+                price: 129.99,
+                category: "home",
+                image: "http://static.photos/technology/320x240/3",
+                rating: 4.3,
+                reviews: 89
+            },
+            {
+                id: 4,
+                name: "Organic Face Cream",
+                price: 34.99,
+                category: "beauty",
+                image: "http://static.photos/wellness/320x240/4",
+                rating: 4.7,
+                reviews: 312
+            },
+            {
+                id: 5,
+                name: "Laptop Stand",
+                price: 79.99,
+                category: "electronics",
+                image: "http://static.photos/workspace/320x240/5",
+                rating: 4.6,
+                reviews: 178
+            },
+            {
+                id: 6,
+                name: "Summer Dress",
+                price: 89.99,
+                category: "fashion",
+                image: "http://static.photos/fashion/320x240/6",
+                rating: 4.9,
+                reviews: 423
+            },
+            {
+                id: 7,
+                name: "Aromatherapy Diffuser",
+                price: 59.99,
+                category: "home",
+                image: "http://static.photos/wellness/320x240/7",
+                rating: 4.4,
+                reviews: 267
+            },
+            {
+                id: 8,
+                name: "Vitamin C Serum",
+                price: 24.99,
+                category: "beauty",
+                image: "http://static.photos/wellness/320x240/8",
+                rating: 4.6,
+                reviews: 198
+            }
+        ];
+        // Cart functionality
+        let cart = [];
+        function addToCart(product) {
+            const existingItem = cart.find(item => item.id === product.id);
+            if (existingItem) {
+                existingItem.quantity += 1;
+            } else {
+                cart.push({ ...product, quantity: 1 });
+            }
+            updateCart();
+            showCartNotification();
+        }
+        function updateCart() {
+            const cartCount = document.getElementById('cartCount');
+            const cartItems = document.getElementById('cartItems');
+            const cartTotal = document.getElementById('cartTotal');
+            cartCount.textContent = cart.reduce((sum, item) => sum + item.quantity, 0);
+            if (cart.length === 0) {
+                cartItems.innerHTML = '<p class="text-center text-slate-500 dark:text-slate-400 py-8">Your cart is empty</p>';
+            } else {
+                cartItems.innerHTML = cart.map(item => `
+                    <div class="flex items-center space-x-4 p-4 bg-slate-50 dark:bg-slate-800 rounded-lg mb-2">
+                        <img src="${item.image}" alt="${item.name}" class="w-16 h-16 rounded-lg object-cover">
+                        <div class="flex-1">
+                            <h4 class="font-medium">${item.name}</h4>
+                            <p class="text-sm text-slate-500 dark:text-slate-400">$${item.price}</p>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <button class="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 rounded" onclick="updateQuantity(${item.id}, -1)">
+                                <i data-feather="minus" class="w-4 h-4"></i>
+                            </button>
+                            <span class="w-8 text-center">${item.quantity}</span>
+                            <button class="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 rounded" onclick="updateQuantity(${item.id}, 1)">
+                                <i data-feather="plus" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                `).join('');
+            }
+            const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+            cartTotal.textContent = `$${total.toFixed(2)}`;
+        }
+        function updateQuantity(productId, change) {
+            const item = cart.find(item => item.id === productId);
+            if (item) {
+                item.quantity += change;
+                if (item.quantity <= 0) {
+                    cart = cart.filter(item => item.id !== productId);
+                }
+                updateCart();
+            }
+        }
+        function showCartNotification() {
+            const notification = document.createElement('div');
+            notification.className = 'fixed top-20 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50';
+            notification.textContent = 'Added to cart!';
+            document.body.appendChild(notification);
+            setTimeout(() => {
+                notification.remove();
+            }, 2000);
+        }
+        // Render products
+        function renderProducts(productsToRender = products) {
+            const grid = document.getElementById('productsGrid');
+            grid.innerHTML = productsToRender.map(product => `
+                <div class="product-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm">
+                    <div class="aspect-square overflow-hidden">
+                        <img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300">
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold mb-1">${product.name}</h3>
+                        <div class="flex items-center space-x-1 mb-2">
+                            <div class="flex">
+                                ${Array(5).fill(0).map((_, i) =>
+                                    `<i data-feather="star" class="w-4 h-4 ${i < Math.floor(product.rating) ? 'fill-amber-400 text-amber-400' : 'text-slate-300'}"></i>`
+                                ).join('')}
+                            </div>
+                            <span class="text-sm text-slate-500 dark:text-slate-400">(${product.reviews})</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-xl font-bold">$${product.price}</span>
+                            <button onclick="addToCart(${JSON.stringify(product).replace(/"/g, '&quot;')})"
+                                    class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors">
+                                <i data-feather="shopping-cart" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `).join('');
+            feather.replace();
+        }
+        // Category filtering
+        document.querySelectorAll('.category-pill').forEach(pill => {
+            pill.addEventListener('click', (e) => {
+                document.querySelectorAll('.category-pill').forEach(p => p.classList.remove('active'));
+                e.target.classList.add('active');
+                const category = e.target.dataset.category;
+                const filtered = category === 'all' ? products : products.filter(p => p.category === category);
+                renderProducts(filtered);
+            });
+        });
+        // Cart drawer
+        const cartBtn = document.getElementById('cartBtn');
+        const closeCart = document.getElementById('closeCart');
+        const cartDrawer = document.getElementById('cartDrawer');
+        cartBtn.addEventListener('click', () => {
+            cartDrawer.classList.add('open');
+        });
+        closeCart.addEventListener('click', () => {
+            cartDrawer.classList.remove('open');
+        });
+        // Search overlay
+        const searchBtn = document.getElementById('searchBtn');
+        const searchOverlay = document.getElementById('searchOverlay');
+        const closeSearch = document.getElementById('closeSearch');
+        const overlaySearchInput = document.getElementById('overlaySearchInput');
+        const searchResults = document.getElementById('searchResults');
+        searchBtn.addEventListener('click', () => {
+            searchOverlay.classList.add('active');
+            overlaySearchInput.focus();
+        });
+        closeSearch.addEventListener('click', () => {
+            searchOverlay.classList.remove('active');
+        });
+        overlaySearchInput.addEventListener('input', (e) => {
+            const query = e.target.value.toLowerCase();
+            const results = products.filter(p =>
+                p.name.toLowerCase().includes(query) ||
+                p.category.toLowerCase().includes(query)
+            );
+            searchResults.innerHTML = results.map(product => `
+                <div class="flex items-center space-x-3 p-3 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg cursor-pointer">
+                    <img src="${product.image}" alt="${product.name}" class="w-12 h-12 rounded-lg object-cover">
+                    <div>
+                        <p class="font-medium">${product.name}</p>
+                        <p class="text-sm text-slate-500 dark:text-slate-400">$${product.price}</p>
+                    </div>
+                </div>
+            `).join('');
+        });
+        // Floating action button
+        const fab = document.getElementById('fab');
+        fab.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        // Show/hide FAB based on scroll
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                fab.style.transform = 'scale(1)';
+            } else {
+                fab.style.transform = 'scale(0)';
+            }
+        });
+        // Initialize
+        renderProducts();
+        updateCart();
+        feather.replace();
+    </script>
+</body>
 </html>