Name: shopping cart working in progress....>
Rating: 3.8 (1794 reviews)
Author: venkyy8
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to Our Shopping Store</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: auto;
            text-align: center;
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
            margin: 10px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            text-decoration: none;
        }
        .btn:hover {
            background-color: #b3001e;
        }
        .hidden {
            display: none;
        }
        /* Background Colors for Sections */
        #welcome {
            background-color: #007bff; /* Blue */
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        #registration {
            background-color: #28a745; /* Green */
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        #login {
            background-color: #ffc107; /* Yellow */
            color: black;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        #shopping {
            background-color: #dc3545; /* Red */
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Welcome Section -->
        <div id="welcome">
            <h1>Hello My Dear Customer!</h1>
            <h2>Welcome to Our Shopping Store</h2>
            <button class="btn" onclick="showRegistration()">New User</button>
            <button class="btn" onclick="showLogin()">Existing User</button>
        </div>

        <!-- Registration Section -->
        <div id="registration" class="hidden">
            <h3>New User Registration</h3>
            <form id="registrationForm">
                <label for="username">Username:</label><br>
                <input type="text" id="username" name="username" required><br><br>

                <label for="gender">Gender:</label><br>
                <select id="gender" name="gender" required>
                    <option value="">Select Gender</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                    <option value="transgender">Transgender</option>
                    <option value="not_specified">Don't Want to Tell</option>
                </select><br><br>

                <label for="age">Age:</label><br>
                <input type="number" id="age" name="age" min="0" max="100" required><br><br>

                <label for="password">Password:</label><br>
                <input type="password" id="password" name="password" required><br><br>

                <button type="submit" class="btn">Register</button>
            </form>
        </div>

        <!-- Login Section -->
        <div id="login" class="hidden">
            <h3>Existing User Login</h3>
            <form id="loginForm">
                <label for="existingUsername">Username:</label><br>
                <input type="text" id="existingUsername" name="existingUsername" required><br><br>

                <label for="existingPassword">Password:</label><br>
                <input type="password" id="existingPassword" name="existingPassword" required><br><br>

                <button type="submit" class="btn">Login</button>
            </form>
        </div>

        <!-- Shopping Section -->
        <div id="shopping" class="hidden">
            <h3>Please Start Your Shopping</h3>
            <button class="btn" onclick="backToWelcome()">Back to Welcome</button>
            <!-- Additional shopping content can go here -->
        </div>
    </div>

    <script>
        function showRegistration() {
            document.getElementById('welcome').style.display = 'none';
            document.getElementById('registration').style.display = 'block';
            document.getElementById('shopping').style.display = 'none';
        }

        function showLogin() {
            document.getElementById('welcome').style.display = 'none';
            document.getElementById('login').style.display = 'block';
            document.getElementById('shopping').style.display = 'none';
        }

        function backToWelcome() {
            document.getElementById('welcome').style.display = 'block';
            document.getElementById('registration').style.display = 'none';
            document.getElementById('login').style.display = 'none';
            document.getElementById('shopping').style.display = 'none';
        }

        document.getElementById('registrationForm').addEventListener('submit', function(event) {
            event.preventDefault();
            // Here you can handle the registration form submission with JavaScript or send it to a backend server
            document.getElementById('registration').style.display = 'none';
            document.getElementById('shopping').style.display = 'block';
        });

        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault();
            // Here you can handle the login form submission with JavaScript or send it to a backend server
            document.getElementById('login').style.display = 'none';
            document.getElementById('shopping').style.display = 'block';
        });
    </script>
</body>
</html>