source: interfejs/index.html@ 2d1ec46

main
Last change on this file since 2d1ec46 was 69f2a41, checked in by Klimentina Efremova <klimentina08642@…>, 7 months ago

Initial commit
  • Property mode set to 100644
File size: 7.2 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Handcraft Marketplace - Home</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10<header>
11 <div class="logo-container">
12 <img src="../images/administrative/logo.jpg" alt="Handcraft Marketplace Logo" onerror="this.style.display='none'">
13 <h1>
14 <a href="index.html">
15 <img src="../images/administrative/logo.jpg">
16 </a>
17 Handcraft Marketplace
18 </h1>
19 </div>
20 <nav>
21 <ul>
22 <li><a href="index.html" class="active">Home</a></li>
23 <li><a href="products.html">Products</a></li>
24 <li><a href="login.html">Login</a></li>
25 <li><a href="register.html" class="btn-register">Register</a></li>
26 </ul>
27 </nav>
28</header>
29
30<main>
31 <section class="hero">
32 <div class="hero-content">
33 <h2>Unique Handcrafted Products</h2>
34 <p>Discover beautiful handmade items from talented artisans around the world</p>
35 <a href="products.html" class="btn-primary">Browse Products</a>
36 <a href="register-store.html" class="btn-secondary">Open Your Store</a>
37 </div>
38 </section>
39
40 <section class="features">
41 <h2>Why Choose Handcraft Marketplace?</h2>
42 <div class="feature-grid">
43 <div class="feature-card">
44 <div class="feature-icon">🛍️</div>
45 <h3>Unique Products</h3>
46 <p>Each item is handcrafted with care and attention to detail</p>
47 </div>
48 <div class="feature-card">
49 <div class="feature-icon">🤝</div>
50 <h3>Support Artisans</h3>
51 <p>Directly support independent creators and small businesses</p>
52 </div>
53 <div class="feature-card">
54 <div class="feature-icon">🔒</div>
55 <h3>Secure Shopping</h3>
56 <p>Safe payments and buyer protection on every purchase</p>
57 </div>
58 <div class="feature-card">
59 <div class="feature-icon">🌍</div>
60 <h3>Global Community</h3>
61 <p>Connect with artisans and buyers from around the world</p>
62 </div>
63 </div>
64 </section>
65
66 <section class="categories">
67 <h2>Popular Categories</h2>
68 <div class="category-list" id="category-list">
69 <div class="loading">Loading categories...</div>
70 </div>
71 </section>
72
73 <section class="featured-products">
74 <h2>Featured Products</h2>
75 <div class="product-grid" id="featured-products">
76 <div class="loading">Loading products...</div>
77 </div>
78 </section>
79</main>
80
81<footer>
82 <div class="footer-content">
83 <div class="footer-section">
84 <h3>Handcraft Marketplace</h3>
85 <p>Connecting artisans with buyers worldwide</p>
86 </div>
87 <div class="footer-section">
88 <h3>Quick Links</h3>
89 <ul>
90 <li><a href="index.html">Home</a></li>
91 <li><a href="products.html">Products</a></li>
92 <li><a href="login.html">Login</a></li>
93 <li><a href="register.html">Register</a></li>
94 </ul>
95 </div>
96 <div class="footer-section">
97 <h3>For Sellers</h3>
98 <ul>
99 <li><a href="register-store.html">Open a Store</a></li>
100 <li><a href="#">Seller Guidelines</a></li>
101 <li><a href="#">Pricing</a></li>
102 </ul>
103 </div>
104 <div class="footer-section">
105 <h3>Contact</h3>
106 <p>Email: support@handcraft.com</p>
107 <p>Phone: +1 (555) 123-4567</p>
108 </div>
109 </div>
110 <div class="footer-bottom">
111 <p>&copy; 2025 Handcraft Marketplace. All rights reserved.</p>
112 </div>
113</footer>
114
115<script>
116 // Load categories
117 fetch('/api/categories')
118 .then(res => res.json())
119 .then(data => {
120 if (data.success && data.categories) {
121 const categories = data.categories.slice(0, 6); // Show first 6 categories
122 const categoryList = document.getElementById('category-list');
123 categoryList.innerHTML = '';
124
125 categories.forEach(cat => {
126 const categoryCard = document.createElement('div');
127 categoryCard.className = 'category-card';
128 categoryCard.innerHTML = `
129 <h3>${cat.name}</h3>
130 <a href="products.html?category=${cat.category_id}" class="btn-small">Browse</a>
131 `;
132 categoryList.appendChild(categoryCard);
133 });
134 } else {
135 document.getElementById('category-list').innerHTML = '<p>No categories found</p>';
136 }
137 })
138 .catch(err => {
139 console.error('Error loading categories:', err);
140 document.getElementById('category-list').innerHTML = '<p>Error loading categories</p>';
141 });
142
143 // Load featured products
144 fetch('/api/products')
145 .then(res => res.json())
146 .then(data => {
147 if (data.success && data.products) {
148 const products = data.products.slice(0, 4); // Show first 4 products
149 const productGrid = document.getElementById('featured-products');
150 productGrid.innerHTML = '';
151
152 products.forEach(product => {
153 const productCard = document.createElement('div');
154 productCard.className = 'product-card';
155 productCard.innerHTML = `
156 <div class="product-image">
157 <img src="../images/product-placeholder.jpg" alt="${product.description.substring(0, 30)}" onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 fill=%22%23f0f0f0%22/><text x=%2220%22 y=%2250%22 font-family=%22Arial%22 font-size=%2214%22 fill=%22%23999%22>No Image</text></svg>'">
158 </div>
159 <div class="product-info">
160 <h3>${product.description.substring(0, 40)}${product.description.length > 40 ? '...' : ''}</h3>
161 <p class="product-price">$${parseFloat(product.price).toFixed(2)}</p>
162 <p class="product-store">${product.store_name || 'Unknown Store'}</p>
163 <a href="product-detail.html?id=${product.code}" class="btn-small">View Details</a>
164 </div>
165 `;
166 productGrid.appendChild(productCard);
167 });
168 } else {
169 document.getElementById('featured-products').innerHTML = '<p>No products found</p>';
170 }
171 })
172 .catch(err => {
173 console.error('Error loading products:', err);
174 document.getElementById('featured-products').innerHTML = '<p>Error loading products</p>';
175 });
176</script>
177</body>
178</html>
Note: See TracBrowser for help on using the repository browser.