From c497c28ef70f318bae116d21a59d4308e2422070 Mon Sep 17 00:00:00 2001 From: mailesrsm Date: Fri, 18 Oct 2024 17:05:43 +0530 Subject: [PATCH] push --- frontend/IDE.html | 4 +- frontend/index.html | 99 +++++++----------------------- frontend/login.html | 141 +++++++++++++++++++++++++++++++++++++++++++ frontend/script.js | 91 ++++++++++++++++++++-------- frontend/signup.html | 70 +++++++++++++++++++++ frontend/styles.css | 29 +++++++++ 6 files changed, 331 insertions(+), 103 deletions(-) create mode 100644 frontend/login.html create mode 100644 frontend/signup.html diff --git a/frontend/IDE.html b/frontend/IDE.html index 2a5f1ae..60d3e81 100644 --- a/frontend/IDE.html +++ b/frontend/IDE.html @@ -21,8 +21,8 @@
  • Notes
  • IDE
  • Contact Us
    • -
  • Sign Up
    • -
  • Login
    • +
  • Sign Up
    • +
  • Login
    • diff --git a/frontend/index.html b/frontend/index.html index 1e56c24..0f784a7 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,38 +1,35 @@ - + codeX100 - Learn Programming - - - + + - - + + @@ -43,19 +40,19 @@

    Welcome to codeX100

    Explore Courses
    - -
    + +

    Your Courses

    You haven't bought any courses yet.

    - +

    Recommended Courses

    - Basics of C++ + Basics of C++

    Basics of C++

    Learn the fundamentals of C++ programming.

    @@ -63,78 +60,26 @@

    Basics of C++

    - Data Structures in Java + Data Structures in Java

    Data Structures in Java

    -

    Master DSA with Java from basics to advanced.

    - -
    -
    -
    - Basics of C++ -
    -

    Basics of C++

    -

    Learn the fundamentals of C++ programming.

    +

    Master data structures using Java.

    - Data Structures in Java + Python for Beginners
    -

    Data Structures in Java

    -

    Master DSA with Java from basics to advanced.

    +

    Python for Beginners

    +

    A comprehensive guide to Python programming.

    - - - - +
    +

    © 2024 codeX100. All rights reserved.

    +
    + - diff --git a/frontend/login.html b/frontend/login.html new file mode 100644 index 0000000..4ae91c1 --- /dev/null +++ b/frontend/login.html @@ -0,0 +1,141 @@ + + + + + + + Login - codeX100 + + + + + + + + + + diff --git a/frontend/script.js b/frontend/script.js index ca89860..d7fc351 100644 --- a/frontend/script.js +++ b/frontend/script.js @@ -1,29 +1,72 @@ -// JavaScript to handle future interactions +document.getElementById('loginForm').addEventListener('submit', function(event) { + event.preventDefault(); // Prevent form submission -// Placeholder for login function -function login() { - alert('Login functionality coming soon!'); -} + // Clear previous errors + const emailError = document.getElementById('emailError'); + const passwordError = document.getElementById('passwordError'); -// Placeholder for sign-up function -function signup() { - alert('Sign-up functionality coming soon!'); -} + emailError.style.display = 'none'; + passwordError.style.display = 'none'; + + // Get values + const email = document.getElementById('email').value; + const password = document.getElementById('password').value; + + // Validate email format + const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; + const isEmailValid = emailPattern.test(email); + + // Validate password length + const isPasswordValid = password.length >= 8; + + let isValid = true; + + if (!isEmailValid) { + displayError(emailError, "Please enter a valid email address"); + isValid = false; + } -// add functionality to hamburger -// Select the hamburger icon and navigation links -document.getElementById('hamburger').addEventListener('click', function() { - const navLinks = document.querySelector('.nav-links'); - const icon = this.querySelector('i'); - - navLinks.classList.toggle('active'); - - if (navLinks.classList.contains('active')) { - icon.classList.remove('fa-bars'); - icon.classList.add('fa-times'); // Change to cross icon - } else { - icon.classList.remove('fa-times'); - icon.classList.add('fa-bars'); // Revert to hamburger icon - } + if (!isPasswordValid) { + displayError(passwordError, "Password must be at least 8 characters"); + isValid = false; + } + + // If the form is valid, proceed + if (isValid) { + // Here you can submit the form or do something like redirecting + displaySuccess("Login successful!"); + } }); +// Function to display error messages with animation +function displayError(element, message) { + element.textContent = message; + element.style.display = 'block'; + element.style.opacity = 0; // Start from transparent + element.style.transition = 'opacity 0.5s ease-in-out'; + setTimeout(() => { element.style.opacity = 1; }, 100); // Fade in +} + +// Function to display success message or actions +function displaySuccess(message) { + const successMessage = document.createElement('div'); + successMessage.classList.add('success'); + successMessage.textContent = message; + document.body.appendChild(successMessage); + + successMessage.style.opacity = 0; + successMessage.style.transition = 'opacity 0.5s ease-in-out, transform 0.5s ease-in-out'; + successMessage.style.transform = 'translateY(20px)'; + + setTimeout(() => { + successMessage.style.opacity = 1; + successMessage.style.transform = 'translateY(0)'; + }, 100); + + // Remove the success message after 2 seconds + setTimeout(() => { + successMessage.style.opacity = 0; + successMessage.style.transform = 'translateY(-20px)'; + setTimeout(() => successMessage.remove(), 500); + }, 2000); +} diff --git a/frontend/signup.html b/frontend/signup.html new file mode 100644 index 0000000..31fe5d0 --- /dev/null +++ b/frontend/signup.html @@ -0,0 +1,70 @@ + + + + + + Signup - codeX100 + + + + + + + + + + + + +
    +

    Welcome to codeX100!

    +

    Join us to master programming with live classes and curated content.

    +
    + + +
    +

    Create an Account

    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    +

    Already have an account? Login here.

    +
    + + + + diff --git a/frontend/styles.css b/frontend/styles.css index aa7056f..6958ac2 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -476,6 +476,35 @@ body { justify-content: center; } } + /* Error styling */ +.error { + display: none; + color: #ff4757; + font-size: 0.9em; + margin-top: 5px; + background-color: #ffe6e6; + padding: 10px; + border-radius: 5px; + transition: opacity 0.5s ease-in-out; +} + +/* Success styling */ +.success { + position: fixed; + top: 20px; + left: 50%; + transform: translateX(-50%); + background-color: #28a745; + color: white; + padding: 15px 30px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + font-weight: bold; + z-index: 1000; + opacity: 0; + pointer-events: none; +} +