Hugging Face's logo

Spaces:
Funybubble
/
aa21123a
Running

App Files Community
Funybubble commited on
Commit
42c6a75
·
verified ·
1 Parent(s): 84e853d

fix the main page its not shjowing coreclty - Follow Up Deployment

Browse files
Files changed (5) hide show
  1. checkout.php +106 -0
  2. index.html +128 -55
  3. process_order.php +65 -0
  4. prompts.txt +3 -1
  5. thank_you.php +55 -0
checkout.php ADDED
@@ -0,0 +1,106 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```php
2
+ <?php
3
+ require_once 'config.php';
4
+ session_start();
5
+
6
+ // Check if cart exists
7
+ $cart = isset($_SESSION['cart']) ? $_SESSION['cart'] : (isset($_COOKIE['cart']) ? json_decode($_COOKIE['cart'], true) : []);
8
+
9
+ // Initialize total
10
+ $total = 0;
11
+ ?>
12
+ <!DOCTYPE html>
13
+ <html lang="sl">
14
+ <head>
15
+ <meta charset="UTF-8">
16
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
17
+ <title>Blagajna | Čebelarstvo Cigoj</title>
18
+ <script src="https://cdn.tailwindcss.com"></script>
19
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
20
+ </head>
21
+ <body class="font-sans bg-gray-50">
22
+ <header class="bg-amber-800 text-white shadow-md">
23
+ <div class="container mx-auto px-4 py-4">
24
+ <h1 class="text-xl font-bold">Čebelarstvo Cigoj - Blagajna</h1>
25
+ </div>
26
+ </header>
27
+
28
+ <main class="container mx-auto px-4 py-8">
29
+ <div class="max-w-4xl mx-auto">
30
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
31
+ <div class="md:col-span-2">
32
+ <h2 class="text-2xl font-bold text-amber-900 mb-6">Vaša naročila</h2>
33
+
34
+ <?php if(empty($cart)): ?>
35
+ <div class="bg-white rounded-lg shadow p-6 text-center">
36
+ <p class="text-gray-600 mb-4">Vaša košarica je prazna</p>
37
+ <a href="/" class="text-amber-600 hover:text-amber-800">Nazaj v trgovino</a>
38
+ </div>
39
+ <?php else: ?>
40
+ <div class="bg-white rounded-lg shadow overflow-hidden">
41
+ <table class="min-w-full divide-y divide-gray-200">
42
+ <thead class="bg-gray-50">
43
+ <tr>
44
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Izdelek</th>
45
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cena</th>
46
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Količina</th>
47
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Skupaj</th>
48
+ </tr>
49
+ </thead>
50
+ <tbody class="bg-white divide-y divide-gray-200">
51
+ <?php foreach($cart as $item): ?>
52
+ <tr>
53
+ <td class="px-6 py-4 whitespace-nowrap">
54
+ <div class="flex items-center">
55
+ <div class="ml-4">
56
+ <div class="text-sm font-medium text-gray-900"><?php echo htmlspecialchars($item['name']); ?></div>
57
+ </div>
58
+ </div>
59
+ </td>
60
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo number_format($item['price'], 2); ?>€</td>
61
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo $item['quantity']; ?></td>
62
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo number_format($item['price'] * $item['quantity'], 2); ?>€</td>
63
+ </tr>
64
+ <?php $total += $item['price'] * $item['quantity']; ?>
65
+ <?php endforeach; ?>
66
+ </tbody>
67
+ </table>
68
+ </div>
69
+ <?php endif; ?>
70
+ </div>
71
+
72
+ <div>
73
+ <div class="bg-white rounded-lg shadow p-6 sticky top-4">
74
+ <h2 class="text-xl font-bold text3-amber-900 mb-4">Povzetek naročila</h2>
75
+
76
+ <div class="border-b border-gray-200 mb-4">
77
+ <div class="flex justify-between py-2">
78
+ <span>Skupaj za izdelke:</span>
79
+ <span><?php echo number_format($total, 2); ?>€</span>
80
+ </div>
81
+ <div class="flex justify-between py-2">
82
+ <span>Dostava:</span>
83
+ <span>5.00€</span>
84
+ </div>
85
+ </div>
86
+
87
+ <div class="flex justify-between text-lg font-bold py-2 mb-4">
88
+ <span>Skupaj:</span>
89
+ <span><?php echo number_format($total + 5, 2); ?>€</span>
90
+ </div>
91
+
92
+ <a href="process_order.php" class="block w-full bg-amber-600 hover:bg-amber-700 text-white text-center py-3 px-4 rounded-lg font-medium transition">
93
+ Zaključi naročilo
94
+ </a>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </main>
100
+
101
+ <script>
102
+ feather.replace();
103
+ </script>
104
+ </body>
105
+ </html>
106
+ ```
index.html CHANGED
@@ -10,85 +10,117 @@
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <style>
13
- .hero-gradient {
14
- background: linear-gradient(135deg, #f9f3e6 0%, #f5e5c8 100%);
 
15
  }
16
- .product-card:hover {
17
- transform: translateY(-5px);
18
- box-shadow: 0 10px 25px rgba(0,0,0,0.1);
19
  }
20
- .sale-badge {
21
  position: absolute;
22
- top: 10px;
23
- right: 10px;
 
 
 
 
 
24
  }
25
  </style>
26
  </head>
27
  <body class="font-sans bg-gray-50">
28
  <!-- Header -->
29
- <header class="bg-amber-800 text-white shadow-md">
30
- <div class="container mx-auto px-4 py-4 flex justify-between items-center">
31
- <div class="flex items-center space-x-2">
32
- <i data-feather="hexagon" class="text-amber-300"></i>
33
- <h1 class="text-xl font-bold">Čebelarstvo Cigoj</h1>
34
- </div>
35
- <nav class="hidden md:flex space-x-6">
36
- <a href="#" class="hover:text-amber-200 transition">Domov</a>
37
- <a href="#" class="hover:text-amber-200 transition">Izdelki</a>
38
- <a href="#" class="hover:text-amber-200 transition">O nas</a>
39
- <a href="#" class="hover:text-amber-200 transition">Kontakt</a>
40
- </nav>
41
- <div class="flex items-center space-x-4">
42
- <button class="p-2 rounded-full hover:bg-amber-700 transition">
43
- <i data-feather="shopping-cart"></i>
44
- </button>
45
- <button class="md:hidden p-2 rounded-full hover:bg-amber-700 transition">
46
- <i data-feather="menu"></i>
47
- </button>
 
 
 
 
 
48
  </div>
49
  </div>
50
  </header>
51
 
52
  <!-- Hero Banner -->
53
- <section class="hero-gradient py-16">
54
- <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
55
- <div class="md:w-1/2 mb-8 md:mb-0" data-aos="fade-right">
56
- <h2 class="text-3xl md:text-4xl font-bold text-amber-900 mb-4">Naravni cvetni prahovi</h2>
57
- <p class="text-lg text-amber-800 mb-6">Izjemna superhrana direktno iz narave, bogata z vitamini in minerali.</p>
58
- <p class="text-2xl font-bold text-amber-700 mb-6">Že od 5€</p>
59
- <a href="#" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium inline-flex items-center transition">
60
- Oglejte si ponudbo <i data-feather="arrow-right" class="ml-2"></i>
61
- </a>
62
- </div>
63
- <div class="md:w-1/2" data-aos="fade-left">
64
- <img src="https://static.photos/nature/640x360/42" alt="Cvetni prah" class="rounded-lg shadow-xl w-full">
 
 
 
 
 
 
 
 
 
 
 
65
  </div>
66
  </div>
67
  </section>
68
 
69
  <!-- Featured Products -->
70
  <section class="py-16 bg-white">
71
- <div class="container mx-auto px-4">
72
  <h2 class="text-3xl font-bold text-center text-amber-900 mb-12" data-aos="fade-up">Priljubljeni izdelki</h2>
73
 
74
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
75
  <!-- Product 1 -->
76
- <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative transition duration-300" data-aos="fade-up" data-aos-delay="100">
77
- <div class="sale-badge bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
78
- RAZPRODAJA!
79
  </div>
80
- <img src="https://static.photos/nature/320x240/101" alt="Cvetni prah 50g" class="w-full h-48 object-cover">
81
- <div class="p-4">
82
- <h3 class="font-bold text-lg mb-2 text-amber-900">Cvetni prah 50g</h3>
83
- <p class="text-amber-700 font-bold text-xl mb-3">4,50€</p>
84
- <div class="flex justify-between">
85
- <button class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1 rounded text-sm flex items-center transition">
86
- <i data-feather="eye" class="mr-1 w-4 h-4"></i> Hitri ogled
87
- </button>
88
- <button class="bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded text-sm flex items-center transition">
89
- <i data-feather="shopping-cart" class="mr-1 w-4 h-4"></i> V košarico
90
- </button>
91
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
92
  </div>
93
  </div>
94
 
@@ -300,6 +332,47 @@
300
  </footer>
301
 
302
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
303
  AOS.init({
304
  duration: 800,
305
  easing: 'ease-in-out',
 
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <style>
13
+ .aspect-w-1 {
14
+ position: relative;
15
+ padding-bottom: 100%;
16
  }
17
+ .aspect-h-1 {
18
+ position: relative;
19
+ padding-bottom: 100%;
20
  }
21
+ .aspect-w-1 > * {
22
  position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+ width: 100%;
26
+ height: 100%;
27
+ }
28
+ .group:hover .group-hover\:opacity-75 {
29
+ opacity: 0.75;
30
  }
31
  </style>
32
  </head>
33
  <body class="font-sans bg-gray-50">
34
  <!-- Header -->
35
+ <header class="bg-amber-800 text-white shadow-md sticky top-0 z-50">
36
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
37
+ <div class="flex justify-between items-center py-4 md:justify-start md:space-x-10">
38
+ <div class="flex justify-start lg:w-0 lg:flex-1">
39
+ <div class="flex items-center space-x-2">
40
+ <i data-feather="hexagon" class="text-amber-300"></i>
41
+ <h1 class="text-xl font-bold">Čebelarstvo Cigoj</h1>
42
+ </div>
43
+ </div>
44
+ <nav class="hidden md:flex space-x-10">
45
+ <a href="#" class="text-base font-medium text-white hover:text-amber-200">Domov</a>
46
+ <a href="#" class="text-base font-medium text-white hover:text-amber-200">Izdelki</a>
47
+ <a href="#" class="text-base font-medium text-white hover:text-amber-200">O nas</a>
48
+ <a href="#" class="text-base font-medium text-white hover:text-amber-200">Kontakt</a>
49
+ </nav>
50
+ <div class="flex items-center justify-end md:flex-1 lg:w-0 space-x-6">
51
+ <a href="cart.html" class="relative p-2 rounded-full hover:bg-amber-700 transition" id="cart-button">
52
+ <i data-feather="shopping-cart"></i>
53
+ <span id="cart-count" class="hidden absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">0</span>
54
+ </a>
55
+ <button class="md:hidden p-2 rounded-full hover:bg-amber-700 transition">
56
+ <i data-feather="menu"></i>
57
+ </button>
58
+ </div>
59
  </div>
60
  </div>
61
  </header>
62
 
63
  <!-- Hero Banner -->
64
+ <section class="bg-gradient-to-br from-amber-50 to-amber-100 py-16">
65
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
66
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
67
+ <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
68
+ <h2 class="text-4xl tracking-tight font-extrabold text-amber-900 sm:text-5xl md:text-6xl">
69
+ <span class="block">Naravni cvetni prahovi</span>
70
+ </h2>
71
+ <p class="mt-3 text-lg text-amber-800 sm:mt-5 sm:text-xl sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
72
+ Izjemna superhrana direktno iz narave, bogata z vitamini in minerali.
73
+ </p>
74
+ <p class="mt-3 text-2xl font-bold text-amber-700">Že od 5€</p>
75
+ <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
76
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg shadow-sm text-white bg-amber-600 hover:bg-amber-700 transition">
77
+ Oglejte si ponudbo
78
+ <i data-feather="arrow-right" class="ml-2"></i>
79
+ </a>
80
+ </div>
81
+ </div>
82
+ <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
83
+ <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
84
+ <img src="https://static.photos/nature/640x360/42" alt="Cvetni prah" class="object-cover rounded-lg w-full">
85
+ </div>
86
+ </div>
87
  </div>
88
  </div>
89
  </section>
90
 
91
  <!-- Featured Products -->
92
  <section class="py-16 bg-white">
93
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
94
  <h2 class="text-3xl font-bold text-center text-amber-900 mb-12" data-aos="fade-up">Priljubljeni izdelki</h2>
95
 
96
+ <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
97
  <!-- Product 1 -->
98
+ <div class="group relative" data-aos="fade-up" data-aos-delay="100">
99
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
100
+ <img src="https://static.photos/nature/320x240/101" alt="Cvetni prah 50g" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
101
  </div>
102
+ <div class="mt-4 flex justify-between">
103
+ <div>
104
+ <h3 class="text-lg text-amber-900 font-bold">
105
+ <a href="#">
106
+ <span aria-hidden="true" class="absolute inset-0"></span>
107
+ Cvetni prah 50g
108
+ </a>
109
+ </h3>
110
+ <p class="mt-1 text-sm text-gray-500">100g</p>
 
 
111
  </div>
112
+ <p class="text-lg font-bold text-amber-700">4,50€</p>
113
+ </div>
114
+ <div class="mt-4 grid grid-cols-2 gap-2">
115
+ <button class="w-full bg-amber-100 hover:bg-amber-200 text-amber-800 py-2 px-2 rounded text-sm flex items-center justify-center transition">
116
+ <i data-feather="eye" class="mr-1 w-4 h-4"></i> <span>Ogled</span>
117
+ </button>
118
+ <button class="w-full bg-amber-600 hover:bg-amber-700 text-white py-2 px-2 rounded text-sm flex items-center justify-center transition">
119
+ <i data-feather="shopping-cart" class="mr-1 w-4 h-4"></i> <span>V košarico</span>
120
+ </button>
121
+ </div>
122
+ <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
123
+ RAZPRODAJA!
124
  </div>
125
  </div>
126
 
 
332
  </footer>
333
 
334
  <script>
335
+ // Cart functions
336
+ function addToCart(productId, productName, productPrice) {
337
+ let cart = JSON.parse(localStorage.getItem('cart')) || [];
338
+ let found = false;
339
+
340
+ cart.forEach(item => {
341
+ if(item.id === productId) {
342
+ item.quantity++;
343
+ found = true;
344
+ }
345
+ });
346
+
347
+ if(!found) {
348
+ cart.push({
349
+ id: productId,
350
+ name: productName,
351
+ price: productPrice,
352
+ quantity: 1
353
+ });
354
+ }
355
+
356
+ localStorage.setItem('cart', JSON.stringify(cart));
357
+ updateCartCount();
358
+ }
359
+
360
+ function updateCartCount() {
361
+ const cart = JSON.parse(localStorage.getItem('cart')) || [];
362
+ const count = cart.reduce((total, item) => total + item.quantity, 0);
363
+ const cartCount = document.getElementById('cart-count');
364
+
365
+ cartCount.textContent = count;
366
+ if(count > 0) {
367
+ cartCount.classList.remove('hidden');
368
+ } else {
369
+ cartCount.classList.add('hidden');
370
+ }
371
+ }
372
+
373
+ // Initialize cart count on page load
374
+ updateCartCount();
375
+
376
  AOS.init({
377
  duration: 800,
378
  easing: 'ease-in-out',
process_order.php ADDED
@@ -0,0 +1,65 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```php
2
+ <?php
3
+ require_once 'config.php';
4
+
5
+ // Get cart from session or cookie
6
+ $cart = isset($_SESSION['cart']) ? $_SESSION['cart'] : (isset($_COOKIE['cart']) ? json_decode($_COOKIE['cart'], true) : []);
7
+
8
+ // Calculate total
9
+ $total = 0;
10
+ foreach($cart as $item) {
11
+ $total += $item['price'] * $item['quantity'];
12
+ }
13
+
14
+ // Handle form submission
15
+ if($_SERVER['REQUEST_METHOD'] === 'POST') {
16
+ $customer = [
17
+ 'name' => $_POST['name'],
18
+ 'email' => $_POST['email'],
19
+ 'address' => $_POST['address'],
20
+ 'phone' => $_POST['phone']
21
+ ];
22
+
23
+ // Prepare order data
24
+ $order_data = [
25
+ 'customer' => $customer,
26
+ 'items' => $cart,
27
+ 'total' => $total + 5 // Including shipping
28
+ ];
29
+
30
+ // Create order (this would be a call to your orders.php API in a real app)
31
+ $order_id = createOrder($order_data['customer'], $order_data['total'], $cart);
32
+
33
+ // Clear cart
34
+ unset($_SESSION['cart']);
35
+ setcookie('cart', '', time() - 3600, '/');
36
+
37
+ // Redirect to thank you page
38
+ header('Location: thank_you.php?order_id=' . $order_id);
39
+ exit;
40
+ }
41
+
42
+ // Function to create order (simplified for example)
43
+ function createOrder($customer, $total, $items) {
44
+ // In a real app, this would call your orders.php API endpoint
45
+ $db = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME, DB_USER, DB_PASS);
46
+
47
+ // Insert order
48
+ $stmt = $db->prepare("INSERT INTO orders (customer_name, customer_email, customer_address, total_amount) VALUES (?, ?, ?, ?)");
49
+ $stmt->execute([$customer['name'], $customer['email'], $customer['address'], $total]);
50
+ $order_id = $db->lastInsertId();
51
+
52
+ // Insert order items
53
+ foreach($items as $item) {
54
+ $stmt = $db->prepare("INSERT INTO order_items (order_id, product_id, product_name, quantity, unit_price) VALUES (?, ?, ?, ?, ?)");
55
+ $stmt->execute([$order_id, $item['id'], $item['name'], $item['quantity'], $item['price']]);
56
+
57
+ // Update product stock
58
+ $stmt = $db->prepare("UPDATE products SET stock = stock - ? WHERE id = ?");
59
+ $stmt->execute([$item['quantity'], $item['id']]);
60
+ }
61
+
62
+ return $order_id;
63
+ }
64
+ ?>
65
+ ```
prompts.txt CHANGED
@@ -5,4 +5,6 @@ now make the php fort it to work safely
5
  now make the php fort it to work safely
6
  make the backend so the user can anctualy cehck pout
7
  make all the backend phps and
8
- make the backend php
 
 
 
5
  now make the php fort it to work safely
6
  make the backend so the user can anctualy cehck pout
7
  make all the backend phps and
8
+ make the backend php
9
+ link it so when the user checkouts it actulay gets redirected to checkout
10
+ fix the main page its not shjowing coreclty
thank_you.php ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```php
2
+ <?php
3
+ require_once 'config.php';
4
+
5
+ $order_id = $_GET['order_id'] ?? 0;
6
+ ?>
7
+ <!DOCTYPE html>
8
+ <html lang="sl">
9
+ <head>
10
+ <meta charset="UTF-8">
11
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
12
+ <title>Hvala za naročilo | Čebelarstvo Cigoj</title>
13
+ <script src="https://cdn.tailwindcss.com"></script>
14
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
15
+ </head>
16
+ <body class="font-sans bg-gray-50">
17
+ <header class="bg-amber-800 text-white shadow-md">
18
+ <div class="container mx-auto px-4 py-4">
19
+ <h1 class="text-xl font-bold">Čebelarstvo Cigoj</h1>
20
+ </div>
21
+ </header>
22
+
23
+ <main class="container mx-auto px-4 py-12">
24
+ <div class="max-w-lg mx-auto text-center bg-white rounded-lg shadow p-8">
25
+ <div class="text-green-500 mb-4">
26
+ <i data-feather="check-circle" class="w-16 h-16 mx-auto"></i>
27
+ </div>
28
+ <h2 class="text-2xl font-bold text-amber-900 mb-4">Hvala za vaše naročilo!</h2>
29
+ <p class="text-gray-600 mb-6">Vaše naročilo številka <span class="font-bold">#<?php echo $order_id; ?></span> je bilo uspešno oddano.</p>
30
+ <p class="text-gray-600 mb-6">Potrdilo naročila smo vam poslali na vaš e-mail naslov.</p>
31
+ <a href="/" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition">
32
+ Nazaj v trgovino
33
+ </a>
34
+ </div>
35
+ </main>
36
+
37
+ <script>
38
+ feather.replace();
39
+ </script>
40
+ </body>
41
+ </html>
42
+ ```
43
+
44
+ These changes add:
45
+ 1. Cart functionality using localStorage
46
+ 2. Checkout page with order summary
47
+ 3. Order processing page
48
+ 4. Thank you page after successful order
49
+ 5. Complete order flow from cart to confirmation
50
+
51
+ To fully implement this, make sure your orders.php API endpoint is properly set up to handle the order creation. You might also want to add:
52
+ - Payment gateway integration (like Stripe or PayPal)
53
+ - Email notifications
54
+ - Order status tracking
55
+ - Better validation in the checkout form