From 8392586e1916d11a81c165f677a839996c5c9fc8 Mon Sep 17 00:00:00 2001
From: Hritika Sharan <hritikasharan3@gmail.com>
Date: Sun, 2 Jun 2024 10:11:08 +0530
Subject: [PATCH] LogIn/SignUp Page

---
 here.html   |  29 +++++++
 index.html  |   9 +-
 logIn.css   | 238 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 logIn.html  |  34 ++++++++
 node.js     |   0
 script.js   |  81 ++++++++++++++++++
 signup.html |  39 +++++++++
 thanks.html |  29 +++++++
 8 files changed, 458 insertions(+), 1 deletion(-)
 create mode 100644 here.html
 create mode 100644 logIn.css
 create mode 100644 logIn.html
 create mode 100644 node.js
 create mode 100644 script.js
 create mode 100644 signup.html
 create mode 100644 thanks.html
diff --git a/here.html b/here.html
new file mode 100644
index 0000000..8f224f5
--- /dev/null
+++ b/here.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Successfully Registered</title>
+  <link rel="stylesheet" href="./logIn.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<section class="container">
+    <div class="login-container">
+        <div class="circle circle-one"></div>
+        <div class="form-container">
+            <img src="https://raw.githubusercontent.com/hicodersofficial/glassmorphism-login-form/master/assets/illustration.png" alt="illustration" class="illustration" />
+            <h1 class="opacity">Successfully Registered</h1>
+            <form action="/login" method="POST">
+
+<h3 class="opacity">Welcome to PHYSI-C-TECH hope you will enjoy our service.</h3>            
+                <button type="submit" class="opacity"><a href="./index.html"> Start Playing</a></button>
+           
+        </div>
+        <div class="circle circle-two"></div>
+    </div>
+    <div class="theme-btn-container"></div>
+</section>
+<!-- partial -->
+<script src="./script.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
index 149e688..8c891e9 100644
--- a/index.html
+++ b/index.html
@@ -98,9 +98,16 @@
 		<div class="circle"></div>
 	</div>
 
+
+
 	<canvas id="ctmp" width="100" height="100" style="display:none"></canvas>
 	<canvas id="homecanvas" width="400" height="600" style="display:none"></canvas>
-
+ <nav class="navbar">
+        
+        <ul class="nav-links">
+          <li class="nav-items"><a href="logIn.html">Log In</a></li>
+         
+        </ul>
 	<div id="home"
 		style="background-image: url(https://i.pinimg.com/originals/e6/c9/e3/e6c9e3d891aa56637847ba09c28fa00c.jpg); background-size: cover;">
 		<div id="homecontent">
diff --git a/logIn.css b/logIn.css
new file mode 100644
index 0000000..b31de0a
--- /dev/null
+++ b/logIn.css
@@ -0,0 +1,238 @@
+:root {
+    --background: #1a1a2e;
+    --color: #ffffff;
+    --primary-color: #0f3460;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    margin: 0;
+    box-sizing: border-box;
+    font-family: "poppins";
+    background: var(--background);
+    color: var(--color);
+    letter-spacing: 1px;
+    transition: background 0.2s ease;
+    -webkit-transition: background 0.2s ease;
+    -moz-transition: background 0.2s ease;
+    -ms-transition: background 0.2s ease;
+    -o-transition: background 0.2s ease;
+}
+
+a {
+    text-decoration: none;
+    color: var(--color);
+}
+
+h1 {
+    font-size: 2.5rem;
+    animation: jumping 1s infinite;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.login-container {
+    position: relative;
+    width: 22.2rem;
+}
+
+.form-container {
+    border: 1px solid hsla(0, 0%, 65%, 0.158);
+    box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    backdrop-filter: blur(20px);
+    z-index: 99;
+    padding: 2rem;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+}
+
+.login-container form input {
+    display: block;
+    padding: 14.5px;
+    width: 100%;
+    margin: 2rem 0;
+    color: var(--color);
+    outline: none;
+    background-color: #9191911f;
+    border: none;
+    border-radius: 5px;
+    font-weight: 500;
+    letter-spacing: 0.8px;
+    font-size: 15px;
+    backdrop-filter: blur(15px);
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+}
+
+.login-container form input:focus {
+    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2);
+    animation: wobble 0.3s ease-in;
+    -webkit-animation: wobble 0.3s ease-in;
+}
+
+.login-container form button {
+    background-color: var(--primary-color);
+    color: var(--color);
+    display: block;
+    padding: 13px;
+    border-radius: 5px;
+    outline: none;
+    font-size: 18px;
+    letter-spacing: 1.5px;
+    font-weight: bold;
+    width: 100%;
+    cursor: pointer;
+    margin-bottom: 2rem;
+    transition: all 0.1s ease-in-out;
+    border: none;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+    -webkit-transition: all 0.1s ease-in-out;
+    -moz-transition: all 0.1s ease-in-out;
+    -ms-transition: all 0.1s ease-in-out;
+    -o-transition: all 0.1s ease-in-out;
+}
+
+.login-container form button:hover {
+    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15);
+    transform: scale(1.02);
+    -webkit-transform: scale(1.02);
+    -moz-transform: scale(1.02);
+    -ms-transform: scale(1.02);
+    -o-transform: scale(1.02);
+}
+
+.circle {
+    width: 8rem;
+    height: 8rem;
+    background: var(--primary-color);
+    border-radius: 50%;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -ms-border-radius: 50%;
+    -o-border-radius: 50%;
+    position: absolute;
+}
+
+.illustration {
+    position: absolute;
+    top: -14%;
+    right: -2px;
+    width: 90%;
+    animation: movingUpDown 3s infinite ease-in-out;
+}
+
+.circle-one {
+    top: 0;
+    left: 0;
+    z-index: -1;
+    transform: translate(-45%, -45%);
+    -webkit-transform: translate(-45%, -45%);
+    -moz-transform: translate(-45%, -45%);
+    -ms-transform: translate(-45%, -45%);
+    -o-transform: translate(-45%, -45%);
+}
+
+.circle-two {
+    bottom: 0;
+    right: 0;
+    z-index: -1;
+    transform: translate(45%, 45%);
+    -webkit-transform: translate(45%, 45%);
+    -moz-transform: translate(45%, 45%);
+    -ms-transform: translate(45%, 45%);
+    -o-transform: translate(45%, 45%);
+}
+
+.register-forget {
+    margin: 1rem 0;
+    display: flex;
+    justify-content: space-between;
+}
+
+.opacity {
+    opacity: 0.6;
+}
+
+.theme-btn-container {
+    position: absolute;
+    left: 0;
+    bottom: 2rem;
+}
+
+.theme-btn {
+    cursor: pointer;
+    transition: all 0.3s ease-in;
+}
+
+.theme-btn:hover {
+    width: 40px !important;
+}
+
+@keyframes wobble {
+    0% {
+        transform: scale(1.025);
+        -webkit-transform: scale(1.025);
+        -moz-transform: scale(1.025);
+        -ms-transform: scale(1.025);
+        -o-transform: scale(1.025);
+    }
+    25% {
+        transform: scale(1);
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+    }
+    75% {
+        transform: scale(1.025);
+        -webkit-transform: scale(1.025);
+        -moz-transform: scale(1.025);
+        -ms-transform: scale(1.025);
+        -o-transform: scale(1.025);
+    }
+    100% {
+        transform: scale(1);
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+    }
+}
+
+@keyframes jumping {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes movingUpDown {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
\ No newline at end of file
diff --git a/logIn.html b/logIn.html
new file mode 100644
index 0000000..311f892
--- /dev/null
+++ b/logIn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Login</title>
+  <link rel="stylesheet" href="./logIn.css">
+</head>
+<body>
+   
+<!-- partial:index.partial.html -->
+<section class="container">
+    <div class="login-container">
+        <div class="circle circle-one"></div>
+        <div class="form-container">
+            <img src="https://raw.githubusercontent.com/hicodersofficial/glassmorphism-login-form/master/assets/illustration.png" alt="illustration" class="illustration" />
+            <h1 class="opacity">LOGIN</h1>
+            <form action="/login" method="POST">
+                <input type="text" name="username" placeholder="USERNAME" required />
+                <input type="password" name="password" placeholder="PASSWORD" required />
+                <button type="submit" class="opacity"><a href="thanks.html"> SUBMIT</a></button>
+            </form>
+            <div class="register-forget opacity">
+                <a href="signup.html">REGISTER</a>
+                <a href="">FORGOT PASSWORD</a>
+            </div>
+        </div>
+        <div class="circle circle-two"></div>
+    </div>
+    <div class="theme-btn-container"></div>
+</section>
+<!-- partial -->
+<script src="./script.js"></script>
+</body>
+</html>
diff --git a/node.js b/node.js
new file mode 100644
index 0000000..e69de29
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..b8bcf7f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,81 @@
+const themes = [
+    {
+        background: "#1A1A2E",
+        color: "#FFFFFF",
+        primaryColor: "#0F3460"
+    },
+    {
+        background: "#461220",
+        color: "#FFFFFF",
+        primaryColor: "#E94560"
+    },
+    {
+        background: "#192A51",
+        color: "#FFFFFF",
+        primaryColor: "#967AA1"
+    },
+    {
+        background: "#F7B267",
+        color: "#000000",
+        primaryColor: "#F4845F"
+    },
+    {
+        background: "#F25F5C",
+        color: "#000000",
+        primaryColor: "#642B36"
+    },
+    {
+        background: "#231F20",
+        color: "#FFF",
+        primaryColor: "#BB4430"
+    }
+];
+
+const setTheme = (theme) => {
+    const root = document.querySelector(":root");
+    root.style.setProperty("--background", theme.background);
+    root.style.setProperty("--color", theme.color);
+    root.style.setProperty("--primary-color", theme.primaryColor);
+    root.style.setProperty("--glass-color", theme.glassColor);
+};
+
+const displayThemeButtons = () => {
+    const btnContainer = document.querySelector(".theme-btn-container");
+    themes.forEach((theme) => {
+        const div = document.createElement("div");
+        div.className = "theme-btn";
+        div.style.cssText = background: ${theme.background}; width: 25px; height: 25px;
+        btnContainer.appendChild(div);
+        div.addEventListener("click", () => setTheme(theme));
+    });
+};
+
+displayThemeButtons();
+
+const express = require('express');
+const bodyParser = require('body-parser');
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+app.use(bodyParser.urlencoded({ extended: true }));
+
+// Serve static files (e.g., your login page, CSS, JS)
+app.use(express.static('public'));
+
+// Handle login form submission
+app.post('/login', (req, res) => {
+  const { username, password } = req.body;
+
+  // Implement your authentication logic here
+  if (username === 'admin' && password === 'password') {
+    // Example success response
+    res.send('Login successful!');
+  } else {
+    // Example failure response
+    res.send('Invalid username or password');
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(`Server is running on port ${PORT}`);
+});
diff --git a/signup.html b/signup.html
new file mode 100644
index 0000000..3d88fa9
--- /dev/null
+++ b/signup.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Signup</title>
+  <link rel="stylesheet" href="./logIn.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body>
+    <section class="container">
+        <div class="login-container">
+            <div class="circle circle-one"></div>
+            <div class="form-container">
+                <img src="https://raw.githubusercontent.com/hicodersofficial/glassmorphism-login-form/master/assets/illustration.png" alt="illustration" class="illustration" />
+                <h1 class="opacity">Signup</h1>
+                <form>
+                    <input type="text" placeholder="FIRSTNAME" />
+                    <input type="text" placeholder="LASTNAME" />
+                    <input type="text" placeholder="USERNAME" />
+                    <input type="password" placeholder="PASSWORD" />
+                    <button class="opacity"><a href="here.html"> SUBMIT</a></button>
+                </form>
+                <div class="register-forget opacity">
+                    <P>Already Have An Account ??   <a href="index.html">  LOGIN</a>
+                    </P>
+                </div>
+            </div>
+            <div class="circle circle-two"></div>
+        </div>
+        <div class="theme-btn-container"></div>
+    </section>
+</body>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/thanks.html b/thanks.html
new file mode 100644
index 0000000..4939486
--- /dev/null
+++ b/thanks.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Welcome Back</title>
+  <link rel="stylesheet" href="./logIn.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<section class="container">
+    <div class="login-container">
+        <div class="circle circle-one"></div>
+        <div class="form-container">
+            <img src="https://raw.githubusercontent.com/hicodersofficial/glassmorphism-login-form/master/assets/illustration.png" alt="illustration" class="illustration" />
+            <h1 class="opacity">Welcome Back</h1>
+            <form action="/login" method="POST">
+
+<h3 class="opacity">Hey..!!Glad you are back.Thank you for coming here again </h3>            
+                <button type="submit" class="opacity"><a href="./index.html"> Start Playing</a></button>
+           
+        </div>
+        <div class="circle circle-two"></div>
+    </div>
+    <div class="theme-btn-container"></div>
+</section>
+<!-- partial -->
+<script src="./script.js"></script>
+</body>
+</html>
