create-acc.php

<?php
// Include the database connection
include 'database.php'; // Make sure this file is in the same directory

// Initialize variables to hold form data
$first_name = $last_name = $email = $phone = $username = $birthdate = '';
$error_message = '';
$success_message = '';

// Check if the form is submitted
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Capture the form data
    $first_name = mysqli_real_escape_string($connect, $_POST['first_name']);
    $last_name = mysqli_real_escape_string($connect, $_POST['last_name']);
    $email = mysqli_real_escape_string($connect, $_POST['email']);
    $phone = mysqli_real_escape_string($connect, $_POST['phone']);
    $username = mysqli_real_escape_string($connect, $_POST['username']);
    $password = mysqli_real_escape_string($connect, $_POST['password']);
    $retype_password = mysqli_real_escape_string($connect, $_POST['retype-password']);
    $birthdate = mysqli_real_escape_string($connect, $_POST['birthdate']);

    // Check if passwords match
    if ($password !== $retype_password) {
        $error_message = "Passwords do not match!";
    } else {
        // Check if the email, phone, or username already exist
        $check_query = "SELECT * FROM Customers WHERE Email = '$email' OR Phone = '$phone' OR Username = '$username'";
        $result = $connect->query($check_query);

        if ($result->num_rows > 0) {
            // If a record exists, check which one is taken
            while($row = $result->fetch_assoc()) {
                if ($row['Email'] === $email) {
                    $error_message = "Email already taken!";
                } elseif ($row['Phone'] === $phone) {
                    $error_message = "Phone number already taken!";
                } elseif ($row['Username'] === $username) {
                    $error_message = "Username already taken!";
                }
            }
        } else {
        // Hash the password using SHA-256
        $hashed_password = hash('sha256', $password);

        // SQL query to insert data into the Customers table
        $sql = "INSERT INTO Customers (FirstName, LastName, Email, Password, Phone, Username, Birthdate) 
                VALUES ('$first_name', '$last_name', '$email', '$hashed_password', '$phone', '$username', '$birthdate')";

        if ($connect->query($sql) === TRUE) {
            echo '
                            <div class="loading-screen">
                        <div class="log-in">Account created successfully!<br> Logging In... </div>
                    <div class="loading-image">
                        <img src="https://res.cloudinary.com/drkmgpcad/image/upload/v1726841328/rahjpg3k7mdtnow4ttux.png" alt="Loading Image">
                    </div>
                </div>

                <style>
                .loading-screen {
                    display: flex;
                    flex-direction: column; 
                    align-items: center;
                    justify-content: center;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-image: linear-gradient(#E7E7E7, #818181, #9A9B84);
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    color: black;
                    text-align: center; 
                    font-size: 45px;
                    margin-bottom:15px;
                    z-index: 1000;
                }

                .log-in {
                    border: black solid 1px;
                    border-radius: 25px;
                    padding: 10px;
                    background-color: #57573f;
                    margin-bottom: 0px;
                }

                .loading-image img {
                    width: 100px;
                    height: 100px;
                    animation: spinY 1s linear infinite;
                    margin: 20px auto;
                    margin-top: 100px;
                    z-index: 9999;
                }

                @keyframes spinY {
                    0% { transform: rotateY(0deg); }
                    100% { transform: rotateY(360deg); }
                }
                </style>

                <script>
                setTimeout(function() {
                    window.location.href = "homepage.php";
                }, 3000);
                </script>';
                exit(); // Stop further execution
        } else {
                    echo "Error: " . $sql . "<br>" . $connect->error;
                }
            }
        }
}

// Close connection
$connect->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
    <link rel="stylesheet" href="create-acc.css">
    <link rel="shortcut icon" href="https://res.cloudinary.com/drkmgpcad/image/upload/v1726841328/rahjpg3k7mdtnow4ttux.png" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Beau+Rivage&display=swap" rel="stylesheet">
</head>
<body>

<header>
    <div>
        <a class="logo-div" href="index.php" target="_self" onclick="showLoadingScreen('Loading...')">
            <img src="https://res.cloudinary.com/drkmgpcad/image/upload/v1726841328/rahjpg3k7mdtnow4ttux.png" alt="Logo">
            <h1>Happy Ending</h1>
        </a>
    </div>
    <nav>
        <ul>
            <li><a href="#" onclick="showLoadingScreen('Loading...')">OUR PRODUCT</a></li>
            <li><a href="#" onclick="showLoadingScreen('Loading...')">HELP & SUPPORT</a></li>
            <li><a href="#" onclick="showLoadingScreen('Loading...')">GUEST</a></li>
        </ul>
    </nav>
</header>

<main>
    <div class="sign-up">
        <h2>Sign Up</h2>
        <p>Create your account</p>
        <hr>

        <!-- Display error message if any -->
        <?php if ($error_message): ?>
            <p class="error" style="font-size: 16px;"><?php echo $error_message; ?></p>
        <?php endif; ?>

        <form action="create-acc.php" method="post">
            <label for="first_name">First Name</label>
            <input type="text" name="first_name" id="first_name" placeholder="Juan" value="<?php echo htmlspecialchars($first_name); ?>" required>

            <label for="last_name">Last Name</label>
            <input type="text" name="last_name" id="last_name" placeholder="Chavez" value="<?php echo htmlspecialchars($last_name); ?>" required>

            <label for="phone">Phone Number</label>
            <input type="tel" name="phone" id="phone" placeholder="09123456789" value="<?php echo htmlspecialchars($phone); ?>" required>

            <label for="birthdate">Birthdate</label>
            <input type="date" name="birthdate" id="birthdate" value="<?php echo htmlspecialchars($birthdate); ?>" required>

            <label for="email">E-mail</label>
            <input type="email" name="email" id="email" placeholder="example@mail.com" value="<?php echo htmlspecialchars($email); ?>" required>

            <label for="username">Username</label>
            <input type="text" name="username" id="username" placeholder="Username" value="<?php echo htmlspecialchars($username); ?>" required>

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

            <label for="retype-password">Retype your password</label>
            <input type="password" name="retype-password" id="retype-password" placeholder="Retype your password" required>

            <div class="signup-button">
                <button id="sign-up" type="submit">Sign Up</button>
            </div>
        </form>
    </div>
</main>


<footer>
    <p class="copyright">© 2024 Happy Ending. All rights reserved.</p>
    <nav>
        <ul>
            <li class="about-us"><a href="" onclick="showLoadingScreen('Loading...')">ABOUT US</a></li>
            <li><a href="www.facebook.com" target="_blank" onclick="showLoadingScreen('Loading...')"><img class="icons-picture" src="https://res.cloudinary.com/drkmgpcad/image/upload/v1724068194/angoienw2wu8c1aqdrge.png" alt="FB-logo"></a></li>
            <li><a href="www.instagram.com" target="_blank" onclick="showLoadingScreen('Loading...')"><img class="icons-picture" src="https://res.cloudinary.com/drkmgpcad/image/upload/v1726891138/zzzgspgokfq1sbc9sjmu.webp" alt="IG-logo"></a></li>
            <li><a href="www.x.com" target="_blank" onclick="showLoadingScreen('Loading...')"><img class="icons-picture" src="https://res.cloudinary.com/drkmgpcad/image/upload/v1726890890/edvvrnyg1wewlm1onmzs.png" alt="X-logo"></a></li>
        </ul>
    </nav>
</footer>

<!-- Include external JavaScript file -->
<script src="create-acc.js"></script>

</body>
</html>