Hugging Face's logo

Spaces:
lasnerblee
/
circuitcart-surge
Running

App Files Community
circuitcart-surge
File size: 8,756 Bytes
eb065e7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
742f3ea
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
eb065e7
 
 
 
 
 
 
 
 
 
742f3ea
 
 
 
 
 
eb065e7
742f3ea
 
 
 
 
eb065e7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel | CircuitCart Surge</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="bg-gray-100">
    <!-- Navigation -->
    <nav class="bg-blue-900 text-white p-4 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
            <a href="index.html" class="text-2xl font-bold flex items-center">
                <i class="fas fa-bolt mr-2"></i> CircuitCart
            </a>
            <div class="flex space-x-6">
                <a href="index.html" class="hover:text-yellow-300">Home</a>
                <a href="products.html" class="hover:text-yellow-300">Products</a>
                <a href="cart.html" class="hover:text-yellow-300">
                    <i class="fas fa-shopping-cart"></i>
                    <span id="cart-count" class="ml-1">0</span>
                </a>
                <a href="admin.html" class="hover:text-yellow-300 font-bold">Admin</a>
            </div>
        </div>
    </nav>

    <!-- Admin Content -->
    <main class="container mx-auto py-8 px-4">
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold">Admin Panel</h1>
            <button id="add-product-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg flex items-center">
                <i class="fas fa-plus mr-2"></i> Add Product
            </button>
        </div>
        
        <!-- Product Management -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="admin-products-table" class="bg-white divide-y divide-gray-200">
                        <!-- Products will be loaded dynamically -->
                    </tbody>
                </table>
            </div>
        </div>
    </main>

    <!-- Add/Edit Product Modal -->
    <div id="product-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
            <div class="flex justify-between items-center border-b px-6 py-4">
                <h2 class="text-xl font-bold" id="modal-title">Add New Product</h2>
                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="product-form">
                    <input type="hidden" id="product-id">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-gray-700 mb-2">Product Name</label>
                            <input type="text" id="product-name" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">Category</label>
                            <select id="product-category" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                            <option value="gpu">Graphics Cards</option>
                            <option value="cpu">Processors</option>
                            <option value="ram">Memory (RAM)</option>
                            <option value="storage">Storage (SSD/HDD)</option>
                            <option value="motherboard">Motherboards</option>
                            <option value="psu">Power Supplies</option>
                            <option value="cooling">Cooling</option>
                            <option value="case">PC Cases</option>
                            <option value="peripheral">Peripherals</option>
                            <option value="monitor">Monitors</option>
                            <option value="console">Gaming Consoles</option>
                            <option value="controller">Controllers</option>
                            <option value="headset">Headsets</option>
                            <option value="keyboard">Keyboards</option>
                            <option value="mouse">Mice</option>
</select>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">Price ($)</label>
                            <input type="number" id="product-price" step="0.01" min="0" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">Stock Quantity</label>
                            <input type="number" id="product-stock" min="0" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-gray-700 mb-2">Brand</label>
                            <input type="text" id="product-brand" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4" required>
                            
                            <label class="block text-gray-700 mb-2">Model</label>
                            <input type="text" id="product-model" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4" required>
                            
                            <label class="block text-gray-700 mb-2">Description</label>
                            <textarea id="product-description" rows="3" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4" required></textarea>
                            
                            <label class="block text-gray-700 mb-2">Key Features (one per line)</label>
                            <textarea id="product-features" rows="3" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4"></textarea>
</div>
                        <div class="md:col-span-2">
                            <label class="block text-gray-700 mb-2">Image URL</label>
                            <input type="text" id="product-image" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-gray-700 mb-2">Specifications (one per line)</label>
                            <textarea id="product-specs" rows="4" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6 space-x-4">
                        <button type="button" id="cancel-modal" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">Cancel</button>
                        <button type="submit" class="bg-blue-900 hover:bg-blue-800 text-white font-bold py-2 px-6 rounded-lg">Save Product</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="js/admin.js"></script>
</body>
</html>