Hugging Face's logo

Spaces:
Ram2005
/
shoplite-essentials
Running

App Files Community
shoplite-essentials
File size: 3,718 Bytes
3105a9a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShopLite Essentials</title>
    <link rel="stylesheet" href="style.css">
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Feather Icons -->
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    
    <!-- Tailwind Config for Custom Colors -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563EB', // Blue 600
                        secondary: '#4F46E5', // Indigo 600
                        dark: '#1F2937',
                        light: '#F3F4F6'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-light text-dark font-sans antialiased flex flex-col min-h-screen">

    <!-- Navbar Web Component -->
    <shop-navbar></shop-navbar>

    <!-- Main Content -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <div class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-extrabold text-dark mb-4 tracking-tight">
                Premium Gear for <span class="text-primary">Creators</span>
            </h1>
            <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                Discover our curated collection of high-quality tools designed to boost your productivity. 
                Real data loading, interactive buttons, and seamless UX.
            </p>
        </div>

        <!-- Filters -->
        <div class="flex justify-center mb-8 space-x-4">
            <button id="filter-all" class="px-6 py-2 rounded-full bg-primary text-white font-semibold shadow-lg hover:bg-blue-700 transition transform hover:-translate-y-0.5 active:translate-y-0">All</button>
            <button id="filter-tech" class="px-6 py-2 rounded-full bg-white text-gray-600 font-semibold shadow hover:bg-gray-50 transition transform hover:-translate-y-0.5 active:translate-y-0">Tech</button>
            <button id="filter-design" class="px-6 py-2 rounded-full bg-white text-gray-600 font-semibold shadow hover:bg-gray-50 transition transform hover:-translate-y-0.5 active:translate-y-0">Design</button>
        </div>

        <!-- Loader Component -->
        <shop-loader id="loader" class="flex justify-center py-12"></shop-loader>

        <!-- Product Grid -->
        <div id="product-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            <!-- Products will be injected here via JS -->
        </div>

        <!-- Toast Notification Container -->
        <div id="toast-container" class="fixed bottom-5 right-5 z-50 flex flex-col gap-2"></div>
    </main>

    <!-- Footer Web Component -->
    <shop-footer></shop-footer>

    <!-- Web Components Scripts -->
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="components/product-card.js"></script>
    <script src="components/loader.js"></script>

    <!-- Main Application Script -->
    <script src="script.js"></script>
    
    <!-- Feather Icons Initialization -->
    <script>
        feather.replace();
        // Re-run feather replace periodically if dynamic content loads icons
        const observer = new MutationObserver(() => feather.replace());
        observer.observe(document.body, { subtree: true, childList: true });
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>