Spaces:

KingNish
/

test-space

Running

App Files Files Community

Initial commit: Basic project structure and page templates created.

#21

by smolSWE - opened 20 days ago

base: refs/heads/main

←

from: refs/pr/21

Discussion Files changed

+161

-282

Files changed (9) hide show

.gitignore +3 -0
cart.html +39 -21
checkout.html +44 -37
confirmation.html +23 -16
index.html +23 -15
product.html +28 -23
script.js +0 -151
style.css +0 -11
tailwind.config.js +1 -8

.gitignore CHANGED Viewed

	@@ -0,0 +1,3 @@

+node_modules/
+.DS_Store
+.env

cart.html CHANGED Viewed

@@ -1,39 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Shopping Cart</title>
-    <link href="style.css" rel="stylesheet">
 </head>
-<body class="bg-gray-100">
-    <header class="bg-amazon-blue p-4 text-white">
-        <div class="container mx-auto">
-            <div class="flex justify-between items-center"><h1 class="text-2xl font-bold">Amazon Dummy</h1><a href="cart.html" class="text-white">Cart</a></div>
-            <a href="index.html" class="text-sm">Back to Home</a>
         </div>
-    </header>
     <main class="container mx-auto mt-8">
-        <h2 class="text-2xl font-semibold mb-4">Shopping Cart</h2>
-        <div id="cart-items">
-            <!-- Cart items will be dynamically added here using JavaScript -->
         </div>
-        <div class="mt-6">
-            <h3 class="text-lg font-semibold">Total: <span id="cart-total">0.00</span></h3>
-            <a href="checkout.html"><button class="bg-amazon-yellow hover:bg-yellow-500 text-black font-bold py-2 px-4 rounded">Checkout</button></a>
-                Checkout
-            </button>
         </div>
     </main>
-    <footer class="bg-gray-200 p-4 mt-8 text-center">
-        <p>&copy; 2024 Amazon Dummy</p>
     </footer>
     <script src="script.js"></script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shopping Cart - Amazon Clone</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
 </head>
+<body>
+    <nav class="bg-gray-800 p-4 text-white">
+        <div class="container mx-auto flex items-center justify-between">
+            <a href="/" class="text-2xl font-bold">Amazon</a>
+            <div class="flex items-center">
+                <input type="text" placeholder="Search" class="bg-gray-700 text-white px-4 py-2 rounded-md mr-2">
+                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
+            </div>
+            <div>
+                <a href="/cart.html" class="hover:text-yellow-500">Cart</a>
+            </div>
         </div>
+    </nav>
     <main class="container mx-auto mt-8">
+        <h1>Shopping Cart</h1>
+        <div class="grid grid-cols-1 gap-4">
+            <div class="flex items-center border border-gray-300 rounded-md p-4">
+                <img src="https://via.placeholder.com/100" alt="Product Image" class="w-24 h-24 mr-4">
+                <div>
+                    <h2 class="text-lg font-bold">Product Title</h2>
+                    <p class="text-gray-600">$99.99</p>
+                    <div class="flex items-center mt-2">
+                        <button class="bg-gray-200 px-2 py-1 rounded-md">-</button>
+                        <input type="number" value="1" class="w-16 text-center border border-gray-300 rounded-md mx-2">
+                        <button class="bg-gray-200 px-2 py-1 rounded-md">+</button>
+                        <button class="text-red-500 hover:text-red-700 ml-4">Remove</button>
+                    </div>
+                </div>
+            </div>
         </div>
+        <div class="mt-8">
+            <h2 class="text-xl font-bold">Order Summary</h2>
+            <p>Subtotal: $99.99</p>
+            <p>Shipping: $5.00</p>
+            <p class="font-bold">Total: $104.99</p>
+            <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Proceed to Checkout</button>
         </div>
     </main>
+    <footer class="bg-gray-800 p-4 text-white text-center mt-8">
+        <p>&copy; 2024 Amazon Clone</p>
     </footer>
     <script src="script.js"></script>
 </body>
+</html>

checkout.html CHANGED Viewed

@@ -1,53 +1,60 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Checkout</title>
-    <link href="style.css" rel="stylesheet">
 </head>
-<body class="bg-gray-100">
-    <header class="bg-amazon-blue p-4 text-white">
-        <div class="container mx-auto">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-bold">Amazon Dummy</h1>
-                <a href="cart.html" class="text-white">Cart</a>
             </div>
         </div>
-    </header>
     <main class="container mx-auto mt-8">
-        <h2 class="text-2xl font-semibold mb-4">Checkout</h2>
-        <form id="checkout-form">
-            <div class="mb-4">
-                <label for="shipping-address" class="block text-gray-700 text-sm font-bold mb-2">Shipping Address:</label>
-                <textarea id="shipping-address" name="shipping-address" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
             </div>
-            <div class="mb-4">
-                <label for="payment-info" class="block text-gray-700 text-sm font-bold mb-2">Payment Information:</label>
-                <input type="text" id="payment-info" name="payment-info" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
             </div>
-            <button type="submit" class="bg-amazon-yellow hover:bg-yellow-500 text-black font-bold py-2 px-4 rounded">
-                Place Order
-            </button>
-        </form>
     </main>
-    <footer class="bg-gray-200 p-4 mt-8 text-center">
-        <p>&copy; 2024 Amazon Dummy</p>
     </footer>
-</body>
-</html>
-<script>
-    document.getElementById('checkout-form').addEventListener('submit', function(event) {
-        event.preventDefault(); // Prevent the default form submission
-        // Redirect to the confirmation page
-        window.location.href = 'confirmation.html';
-    });
-</script>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Checkout - Amazon Clone</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
 </head>
+<body>
+    <nav class="bg-gray-800 p-4 text-white">
+        <div class="container mx-auto flex items-center justify-between">
+            <a href="/" class="text-2xl font-bold">Amazon</a>
+            <div class="flex items-center">
+                <input type="text" placeholder="Search" class="bg-gray-700 text-white px-4 py-2 rounded-md mr-2">
+                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
+            </div>
+            <div>
+                <a href="/cart.html" class="hover:text-yellow-500">Cart</a>
             </div>
         </div>
+    </nav>
     <main class="container mx-auto mt-8">
+        <h1>Checkout</h1>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+                <h2 class="text-xl font-bold">Shipping Information</h2>
+                <form>
+                    <div class="mb-4">
+                        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
+                        <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    </div>
+                    <div class="mb-4">
+                        <label for="address" class="block text-gray-700 text-sm font-bold mb-2">Address:</label>
+                        <input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    </div>
+                    <div class="mb-4">
+                        <label for="payment" class="block text-gray-700 text-sm font-bold mb-2">Payment Information:</label>
+                        <input type="text" id="payment" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    </div>
+                </form>
             </div>
+            <div>
+                <h2 class="text-xl font-bold">Order Summary</h2>
+                <p>Subtotal: $99.99</p>
+                <p>Shipping: $5.00</p>
+                <p class="font-bold">Total: $104.99</p>
+                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Place Order</button>
             </div>
+        </div>
     </main>
+    <footer class="bg-gray-800 p-4 text-white text-center mt-8">
+        <p>&copy; 2024 Amazon Clone</p>
     </footer>
+    <script src="script.js"></script>
+</body>
+</html>

confirmation.html CHANGED Viewed

@@ -1,30 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Order Confirmation</title>
-    <link href="style.css" rel="stylesheet">
 </head>
-<body class="bg-gray-100">
-    <header class="bg-amazon-blue p-4 text-white">
-        <div class="container mx-auto">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-bold">Amazon Dummy</h1>
-                <a href="cart.html" class="text-white">Cart</a>
             </div>
         </div>
-    </header>
     <main class="container mx-auto mt-8">
-        <h2 class="text-2xl font-semibold mb-4">Order Confirmation</h2>
-        <p class="text-gray-700">Thank you for your order! Your order has been placed successfully.</p>
     </main>
-    <footer class="bg-gray-200 p-4 mt-8 text-center">
-        <p>&copy; 2024 Amazon Dummy</p>
     </footer>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Order Confirmation - Amazon Clone</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
 </head>
+<body>
+    <nav class="bg-gray-800 p-4 text-white">
+        <div class="container mx-auto flex items-center justify-between">
+            <a href="/" class="text-2xl font-bold">Amazon</a>
+            <div class="flex items-center">
+                <input type="text" placeholder="Search" class="bg-gray-700 text-white px-4 py-2 rounded-md mr-2">
+                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
+            </div>
+            <div>
+                <a href="/cart.html" class="hover:text-yellow-500">Cart</a>
             </div>
         </div>
+    </nav>
     <main class="container mx-auto mt-8">
+        <h1>Order Confirmation</h1>
+        <p>Thank you for your order!</p>
+        <p>Your order has been placed and will be shipped soon.</p>
+        <p>Order ID: #1234567890</p>
     </main>
+    <footer class="bg-gray-800 p-4 text-white text-center mt-8">
+        <p>&copy; 2024 Amazon Clone</p>
     </footer>
+    <script src="script.js"></script>
 </body>
+</html>

index.html CHANGED Viewed

@@ -3,26 +3,34 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Amazon Dummy</title>
-    <link href="style.css" rel="stylesheet">
 </head>
 <body>
-    <header class="bg-amazon-blue">
-        <div class="container mx-auto py-2">
-            <div class="flex items-center justify-between">
-                <div class="text-white font-bold text-2xl">Amazon Dummy</div>
-                <div class="flex items-center">
-                    <input type="text" class="px-4 py-2 rounded-l-md focus:outline-none" placeholder="Search">
-                    <button class="bg-amazon-orange hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded-r-md">Search</button>
-                </div>
             </div>
         </div>
-    </header>
-    <main class="container mx-auto mt-4">
-        <section id="products" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
-            <!-- Products will be dynamically added here -->
-        </section>
     </main>
     <script src="script.js"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Amazon Clone</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
+    <nav class="bg-gray-800 p-4 text-white">
+        <div class="container mx-auto flex items-center justify-between">
+            <a href="/" class="text-2xl font-bold">Amazon</a>
+            <div class="flex items-center">
+                <input type="text" placeholder="Search" class="bg-gray-700 text-white px-4 py-2 rounded-md mr-2">
+                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
+            </div>
+            <div>
+                <a href="/cart.html" class="hover:text-yellow-500">Cart</a>
             </div>
         </div>
+    </nav>
+    <main class="container mx-auto mt-8">
+        <h1>Welcome to Amazon</h1>
+        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            </div>
     </main>
+    <footer class="bg-gray-800 p-4 text-white text-center mt-8">
+        <p>&copy; 2024 Amazon Clone</p>
+    </footer>
     <script src="script.js"></script>
 </body>
 </html>

product.html CHANGED Viewed

@@ -1,39 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Product Details</title>
-    <link href="style.css" rel="stylesheet">
 </head>
-<body class="bg-gray-100">
-    <header class="bg-amazon-blue p-4 text-white">
-        <div class="container mx-auto">
-            <div class="flex justify-between items-center"><h1 class="text-2xl font-bold">Amazon Dummy</h1><a href="cart.html" class="text-white">Cart</a></div>
-            <a href="index.html" class="text-sm">Back to Home</a>
         </div>
-    </header>
     <main class="container mx-auto mt-8">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-            <div class="md:col-span-1">
-                <img src="https://picsum.photos/400/300" alt="Product Image" class="w-full rounded-lg shadow-md">
             </div>
-            <div class="md:col-span-1">
-                <h2 class="text-2xl font-semibold mb-4">Product Name</h2>
-                <p class="text-gray-700 mb-6">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                </p>
-                <button id="add-to-cart-btn" class="bg-amazon-yellow hover:bg-yellow-500 text-black font-bold py-2 px-4 rounded">
-                    Add to Cart
-                </button>
             </div>
         </div>
     </main>
-    <footer class="bg-gray-200 p-4 mt-8 text-center">
-        <p>&copy; 2024 Amazon Dummy</p>
     </footer>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Product Details - Amazon Clone</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
 </head>
+<body>
+    <nav class="bg-gray-800 p-4 text-white">
+        <div class="container mx-auto flex items-center justify-between">
+            <a href="/" class="text-2xl font-bold">Amazon</a>
+            <div class="flex items-center">
+                <input type="text" placeholder="Search" class="bg-gray-700 text-white px-4 py-2 rounded-md mr-2">
+                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
+            </div>
+            <div>
+                <a href="/cart.html" class="hover:text-yellow-500">Cart</a>
+            </div>
         </div>
+    </nav>
     <main class="container mx-auto mt-8">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+                <img src="https://via.placeholder.com/400" alt="Product Image" class="w-full rounded-md">
             </div>
+            <div>
+                <h1 class="text-2xl font-bold">Product Title</h1>
+                <p class="text-gray-600">Product Description</p>
+                <p class="text-xl font-semibold">$99.99</p>
+                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Add to Cart</button>
             </div>
         </div>
     </main>
+    <footer class="bg-gray-800 p-4 text-white text-center mt-8">
+        <p>&copy; 2024 Amazon Clone</p>
     </footer>
+    <script src="script.js"></script>
 </body>
+</html>

script.js CHANGED Viewed

@@ -1,151 +0,0 @@
-// script.js
-// Function to add a product to the cart
-function addToCart(productName, productPrice) {
-    let cart = JSON.parse(localStorage.getItem('cart')) || [];
-    let existingProduct = cart.find(item => item.name === productName);
-    if (existingProduct) {
-        existingProduct.quantity += 1;
-    } else {
-        cart.push({
-            name: productName,
-            price: productPrice,
-            quantity: 1
-        });
-    }
-    localStorage.setItem('cart', JSON.stringify(cart));
-    updateCartTotal();
-}
-// Function to display cart items on cart.html
-function displayCartItems() {
-    let cart = JSON.parse(localStorage.getItem('cart')) || [];
-    let cartItemsContainer = document.getElementById('cart-items');
-    let cartTotalElement = document.getElementById('cart-total');
-    if (cartItemsContainer) {
-        cartItemsContainer.innerHTML = ''; // Clear existing items
-        if (cart.length === 0) {
-            cartItemsContainer.innerHTML = '<p>Your cart is empty.</p>';
-            cartTotalElement.textContent = '0.00';
-            return;
-        }
-        let total = 0;
-        cart.forEach(item => {
-            let itemElement = document.createElement('div');
-            itemElement.classList.add('cart-item', 'mb-4', 'p-4', 'border', 'border-gray-300', 'rounded-lg');
-            itemElement.innerHTML = `
-                <h4 class="text-lg font-semibold">${item.name}</h4>
-                <p>Price: $${item.price.toFixed(2)}</p>
-                <div class="flex items-center">
-                    <label for="quantity-${item.name}" class="mr-2">Quantity:</label>
-                    <input type="number" id="quantity-${item.name}" name="quantity-${item.name}" value="${item.quantity}" min="1" class="w-20 px-2 py-1 border border-gray-300 rounded">
-                    <button class="remove-item-btn bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded ml-2" data-product="${item.name}">Remove</button>
-                </div>
-            `;
-            cartItemsContainer.appendChild(itemElement);
-            total += item.price * item.quantity;
-        });
-        cartTotalElement.textContent = total.toFixed(2);
-        // Add event listeners to quantity inputs and remove buttons
-        let quantityInputs = cartItemsContainer.querySelectorAll('input[type="number"]');
-        quantityInputs.forEach(input => {
-            input.addEventListener('change', updateQuantity);
-        });
-        let removeButtons = cartItemsContainer.querySelectorAll('.remove-item-btn');
-        removeButtons.forEach(button => {
-            button.addEventListener('click', removeItem);
-        });
-    }
-}
-// Function to update cart item quantity
-function updateQuantity(event) {
-    let productName = event.target.id.replace('quantity-', '');
-    let newQuantity = parseInt(event.target.value);
-    if (newQuantity > 0) {
-        let cart = JSON.parse(localStorage.getItem('cart')) || [];
-        let itemToUpdate = cart.find(item => item.name === productName);
-        if (itemToUpdate) {
-            itemToUpdate.quantity = newQuantity;
-            localStorage.setItem('cart', JSON.stringify(cart));
-            updateCartTotal();
-            displayCartItems(); // Re-render the cart items to reflect the updated quantity
-        }
-    }
-}
-// Function to remove item from cart
-function removeItem(event) {
-    let productName = event.target.dataset.product;
-    let cart = JSON.parse(localStorage.getItem('cart')) || [];
-    let updatedCart = cart.filter(item => item.name !== productName);
-    localStorage.setItem('cart', JSON.stringify(updatedCart));
-    updateCartTotal();
-    displayCartItems(); // Re-render the cart items after removing the item
-}
-// Function to calculate and update the cart total
-function updateCartTotal() {
-    let cart = JSON.parse(localStorage.getItem('cart')) || [];
-    let total = 0;
-    cart.forEach(item => {
-        total += item.price * item.quantity;
-    });
-    let cartTotalElement = document.getElementById('cart-total');
-    if (cartTotalElement) {
-        cartTotalElement.textContent = total.toFixed(2);
-    }
-}
-// Add to cart functionality to product.html (example)
-//document.addEventListener('DOMContentLoaded', () => {
-//    const addToCartButton = document.querySelector('#add-to-cart-btn'); // Assuming you have an add to cart button with this ID
-//    if (addToCartButton) {
-//        addToCartButton.addEventListener('click', () => {
-//            const productName = 'Product Name'; // Replace with the actual product name
-//            const productPrice = 20.00; // Replace with the actual product price
-//            addToCart(productName, productPrice);
-//        });
-//    }
-//});
-// Call displayCartItems() when cart.html loads
-if (document.body.id === 'cart-page') {
-    displayCartItems();
-}
-// Update cart total on page load
-document.addEventListener('DOMContentLoaded', updateCartTotal);
-// Add to cart functionality to product.html
-document.addEventListener('DOMContentLoaded', () => {
-    // Set the ID of the body
-    document.body.id = 'product-page';
-    const addToCartButton = document.querySelector('#add-to-cart-btn'); // Assuming you have an add to cart button with this ID
-    if (addToCartButton) {
-        addToCartButton.addEventListener('click', () => {
-            const productName = 'Product Name'; // Replace with the actual product name
-            const productPrice = 20.00; // Replace with the actual product price
-            addToCart(productName, productPrice);
-        });
-    }
-});

style.css CHANGED Viewed

@@ -1,11 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-.bg-amazon-blue {
-    background-color: #232F3E;
-}
-.bg-amazon-orange {
-    background-color: #FF9900;
-}

tailwind.config.js CHANGED Viewed

@@ -2,14 +2,7 @@
 module.exports = {
   content: ["./*.{html,js}"],
   theme: {
-    extend: {
-      colors: {
-        amazon: {
-          blue: '#232F3E',
-          orange: '#FF9900',
-        }
-      }
-    },
   },
   plugins: [],
 }

 module.exports = {
   content: ["./*.{html,js}"],
   theme: {
+    extend: {},
   },
   plugins: [],
 }