signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up - LinkedIn Resume Builder</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="icon" href="images/favicon-removebg-preview.png">

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css">


    <style>
        :root {
            
            --deep-teal: #003d4d;
            --off-white: #f8f9fa;
            --dark-slate: #2f4f4f;
            --soft-gold: #d9c79e;

        }

        * {
            margin: 0; 
            padding: 0;
            box-sizing: border-box;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            outline: none;
            /* border: none; */
            text-decoration: none;
            text-transform: capitalize;
            transition: .2s linear;
        }

        /* body {
            background-color: var(--off-white);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        } */
    body {
    background-color: var(--off-white); 
    margin: 0;
    padding: 0; 
    min-height: 100vh;
    display:flex;
    flex-direction: column;
} 


        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
            margin-top: 5rem;
            text-align: center;
            display: flex; 
            flex-direction: column;
            justify-content: center;
            position:relative;
            margin-bottom: 40px;
            flex-grow: 1;

        }

        
        .logo {
            font-size: 2rem; /* Decreased size for single line */
            color: var(--deep-teal);
            font-weight: 600;
            margin-bottom:20px;
            cursor: pointer; /* Change cursor to pointer */
        }

        .logo:hover {
            color: var(--soft-gold); /* Change color on hover */
        }

        h2 {
            color: var(--dark-slate);
            margin-bottom: 20px;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"] {
            width: 100%;
            padding: 12px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            width: 100%;
            padding: 15px;
            background-color: var(--deep-teal);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 18px;
            cursor: pointer;
            margin-top:10px;
        }

        button:hover {
            background-color: var(--soft-gold);
        }

        .login-btn {
            background-color: var(--soft-gold);
            margin-top: 10px;
        }

        .login-btn:hover {
            background-color: var(--deep-teal);
        }

    </style>
</head>
<body>
<!-- header section starts --> 
<header>
    <a href="index.html" class="logo">Resum Resume<span>.</span></a>
             
    <nav class="navbar">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="resume.html">Build Resume</a>
        <a href="RateMyResume.html">RateMyResume</a>
        <a href="signup.html">Sign Up</a>
        <a href="login.html">Login</a>
    </nav>
  
    <div class="icons">
        <a href="about.html"><i class="fas fa-info-circle"></i></a>
        <a href="#" ><i class="fas fa-envelope"></i></a>
        <a href="login.html" id="loginIcon"><i class="fas fa-user"></i></a>
        <i class="fa-solid fa-coins"></i> <p id="SkillCoins"></p></div>
  </header> 
  <style>
    body{
        padding: 0;
    }
    .logo{
        font-size: 2.3rem;
    }
    header{
        height: 8rem;
        position: relative;
        padding-left: 3rem;
        padding-right: 3rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    footer{
        margin-top: 5rem;
    }
    .navbar{
        width: 60%;
    }
    .navbar a{
        font-weight: 400;
    }
    .icons{
        display: flex;
        align-items: center;
        width: 16%;
    }
    .icons a{
        font-size: 2rem;
        display: inline;
        color: white;
        margin-left: 1rem;
        line-height: 2.3rem;
    }
    .icons i{
        margin-left: 1.5rem;
    }
    .icons p{
        display: inline;
        color: white;
        font-size: 2.3rem;
        margin: 0;
        margin-left: 1rem;
        line-height: 2.3rem;
    }
    .fa-coins{
        font-size: 2rem;
        color: rgb(246, 180, 0);
    }
  </style>
  <!-- header section ends -->

    <div class="container">
        <div class="logo" onclick="window.location.href='index.html'">Resum Resume</div>
        <h2>Create Your Account</h2>


        <!-- <form action="#" method="POST">
            <input id="name" type="text" placeholder="Full Name" required>
            <input id="email" type="email" placeholder="Email Address" required>
            <input id="password" type="password" placeholder="Password" required>
            <input id="confirmPassword" type="password" placeholder="Confirm Password" required>
            <button type="submit" class="signupbtn">Sign Up</button> -->


        <form id="signupForm" action="#" method="POST">
            <input type="text" placeholder="Full Name" required>
            <input type="email" placeholder="Email Address" required>
            <input type="password" placeholder="Password" required>
            <input type="password" placeholder="Confirm Password" required>
            <button type="submit">Sign Up</button>

        </form>
        <button class="login-btn" onclick="window.location.href='login.html'">Go to Login</button>
    </div>

     <!-- footer-section -->
     <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>About Us</h3>
                <ul>
                    <li><a href="#">Our Story</a></li>
                    <li><a href="#">Team</a></li>
                    <li><a href="#">Careers</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Services</h3>
                <ul>
                    <li><a href="#">Resume Builder</a></li>
                    <li><a href="cv.html">CV Templates</a></li>
                    <li><a href="#">Career Advice</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Support</h3>
                <ul>
                    <li><a href="Faqs.html">FAQ</a></li>
                    <li><a href="comment.html">Contact Us</a></li>
                    <li><a href="privacy-policy.html">Privacy Policy</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Connect With Us</h3>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 Resume Builder. All rights reserved.</p>
        </div>
    </footer>
    <style>
      /* Footer */
    .footer {
      background-color: #003d4d;
      color: #ffffff;
      padding: 40px 20px;
      margin-top: 20px;
    }
    
    .footer-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .footer-section {
      flex: 1;
      min-width: 200px;
      margin-bottom: 20px;
    }
    
    .footer-section h3 {
      font-size: 1.3rem;
      margin-bottom: 15px;
    }
    .footer .footer-section h3{
        border-bottom: 0;
    }
    .footer-section ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    .footer-section ul li {
      margin-bottom: 10px;
    }
    
    .footer-section ul li a {
      color: #ffffff;
      text-decoration: none;
      transition: color 0.3s;
      font-size: 1.5rem;
    }
    
    .footer-section ul li a:hover {
      color: #b2dfdb;
    }
    
    .social-icons {
      display: flex;
      gap: 1.2rem;
    }
    
    .social-icons a {
      color: #ffffff;
      font-size: 1.8rem;
      transition: color 0.3s;
    }
    
    .social-icons a:hover {
      color: #b2dfdb;
    }
    
    .footer-bottom {
      text-align: center;
      padding-top: 20px;
      font-size: 0.9rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      margin-top: 20px;
      color: #e0f2f1;
    }
    
    /* Responsive Footer Styles */
    @media (max-width: 768px) {
      .footer-content {
          flex-direction: column;
          align-items: center;
      }
    
      .footer-section {
          width: 100%;
          text-align: center;
          margin-bottom: 30px;
      }
    
      .footer-section h3 {
          font-size: 1.2rem;
      }
    }
    
    </style>

    <script>
        const signUp = document.querySelector(".signupbtn");
    
        signUp.addEventListener("click", (e) => {
            e.preventDefault();
    
            const name = document.querySelector("#name").value;
            const email = document.querySelector("#email").value;
            const password = document.querySelector("#password").value;
            const confirmPassword = document.querySelector("#confirmPassword").value;
    
            if (!name || !email || !password || !confirmPassword) {
                alert("All fields are required");
                return;
            }
    
            const userData = {
                name,
                email,
                password,
                confirmPassword
            };
    
            registerUser(userData);
        });
    
        const registerUser = async (user) => {
            try {
                const res = await fetch("http://localhost:5000/auth/signup", {
                    method: "POST",
                    headers: { "content-type": "application/json" },
                    body: JSON.stringify(user)
                });
    
                const data = await res.json();
                window.location.href = "http://127.0.0.1:5500/Resum-Resume/login.html";
    
            } catch (error) {
                console.log(error.message);
                alert("Check the credentials");
            }
        };
    
        document.getElementById('signupForm').addEventListener('submit', function (event) {
            event.preventDefault();
    
            var formData = new FormData(this);
    
            fetch('signup-process.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.href = 'index.html';
                } else {
                    alert('Sign Up failed: ' + data.message);
                }
            })
            .catch(error => {
                console.log('Error:', error);
            });
        });
    </script>
    

</body>
<script src="RateMyResume.js"></script>
</html>