Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T-shirt Marketing</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f0f0f0;
    }
    .container {
        max-width: 800px;
        margin: auto;
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .shirt {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 10px;
    }
    .btn {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        border-radius: 4px;
        cursor: pointer;
    }
    .btn:hover {
        background-color: #45a049;
    }
</style>
</head>
<body>
    <div class="container">
        <h1>T-shirt Store</h1>
        <div id="shirt-list">
            <!-- Shirt items will be dynamically added here -->
        </div>
        <button class="btn" onclick="checkout()">Proceed to Checkout</button>
        <div id="checkout"></div>
    </div>

    <script>
        // Sample shirt data (replace with actual data from backend/database)
        const shirts = [
            { id: 1, name: "Cool Shirt", price: 20, color: "Blue" },
            { id: 2, name: "Awesome Shirt", price: 25, color: "Red" },
            { id: 3, name: "Fun Shirt", price: 18, color: "Green" }
        ];

        // Function to display shirts on the page
        function displayShirts() {
            const shirtList = document.getElementById("shirt-list");
            shirts.forEach(shirt => {
                const shirtElement = document.createElement("div");
                shirtElement.classList.add("shirt");
                shirtElement.innerHTML = `
                    <h3>${shirt.name}</h3>
                    <p>Color: ${shirt.color}</p>
                    <p>Price: $${shirt.price}</p>
                    <button class="btn" onclick="addToCart(${shirt.id})">Add to Cart</button>
                `;
                shirtList.appendChild(shirtElement);
            });
        }

        // Function to add shirt to cart (dummy function for demo)
        function addToCart(shirtId) {
            const shirt = shirts.find(shirt => shirt.id === shirtId);
            alert(`Added ${shirt.name} to cart!`);
        }

        // Function to simulate checkout process (dummy function for demo)
        function checkout() {
            const checkoutDiv = document.getElementById("checkout");
            checkoutDiv.innerHTML = `
                <h2>Checkout</h2>
                <p>Total: $${calculateTotal()}</p>
                <p>Thank you for shopping!</p>
            `;
        }

        // Function to calculate total price (dummy function for demo)
        function calculateTotal() {
            let total = 0;
            shirts.forEach(shirt => {
                total += shirt.price;
            });
            return total;
        }

        // Display shirts when the page loads
        window.onload = displayShirts;
    </script>
</body>
</html>
Editor is loading...