loginpage

package.json

@@ -40,5 +40,9 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "react-router-dom": "^6.26.1"
-  }
+  },
+  "description": "- Primary Background color : #1A1A1A\r - secondary Background Color : #282828\r - text color : white (primary)\r - secondary text color : #Eff2f699\r - secondary text color : #Eff1f6bf(Darker for headings)",
+  "main": "index.js",
+  "author": "",
+  "license": "ISC"
 }

src/Login/Login.css

@@ -0,0 +1,72 @@
+/* src/Login.css */
+body {
+    background-color: #1A1A1A;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+  }
+
+  .login-container {
+    width: 100%;
+    max-width: 400px;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #282828;
+    box-shadow: 0 0 10px 0 black;
+
+  }
+
+  .login-container img {
+    display: grid;
+    width: 100px;
+    height: 100px;
+    margin-bottom: 20px;
+    margin-left: 110px;
+
+  }
+
+  .login-container h2 {
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    color: #fffcfc;
+  }
+
+  .login-container form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .login-container label {
+    margin-bottom: 8px;
+    color: #fffcfc;
+  }
+
+  .login-container input {
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+    width: 95%;
+    background-color: #6e6e6e;
+    color: white;
+  }
+
+  .login-container button {
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    background-color: #4CAF50;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  .login-container button:hover {
+    background-color: #45a049;
+  }

src/Login/Login.jsx

@@ -1,9 +1,80 @@
-import React from 'react'
+import React, { useState } from "react";
+import "./Login.css"; // Import the CSS file
+import logo from "../assets/iips_logo2.png"; // Corrected the import statement
+
+function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [otp, setOtp] = useState("");
+  const [showOtp, setShowOtp] = useState(false);
+
+  const handleLogin = (e) => {
+    e.preventDefault();
+
+    // Simulate a login process
+    if (email && password) {
+      setShowOtp(true); // Show OTP field after email and password are entered
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Simulate OTP verification process
+    if (otp) {
+      alert("Login successful!");
+      // Proceed with your login logic here
+    } else {
+      alert("Please enter the OTP.");
+    }
+  };
 
-const Login = () => {
   return (
-    <div>Login</div>
-  )
+    <div className="login-container">
+      <img src={logo} alt="Logo" /> {/* Corrected image tag */}
+      <h2> Teacher : Login</h2>
+      <form onSubmit={showOtp ? handleSubmit : handleLogin}>
+        <div>
+          <label>
+            Email:
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+          </label>
+        </div>
+        <div>
+          <label>
+            Password:
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </label>
+        </div>
+        {showOtp && (
+          <div>
+            <label>
+              OTP:
+              <input
+                type="text"
+                value={otp}
+                onChange={(e) => setOtp(e.target.value)}
+                required
+              />
+            </label>
+          </div>
+        )}
+        <button type="submit">
+          {showOtp ? "Submit" : "Next"}
+        </button>
+      </form>
+    </div>
+  );
 }
 
-export default Login
+export default Login;