diff --git a/README.md b/README.md
index 302bb8f..8b13789 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1 @@
-# Preview
-
-# Login-Registration-Form
-Responsive Login & Registration Form Using HTML & CSS & JS .Sliding Sign In & Sign Up Form
diff --git a/app.js b/app.js
index ea95d29..c5d98e2 100644
--- a/app.js
+++ b/app.js
@@ -1,11 +1,265 @@
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
+const sendVerificationBtn = document.querySelector("#sendVerificationBtn");
+const verifyCodeBtn = document.querySelector("#verifyCodeBtn");
+const resendCodeBtn = document.querySelector("#resendCodeBtn");
+const verificationSection = document.querySelector(".verification-section");
+const signUpSubmit = document.querySelector("#signUpSubmit");
+const emailInput = document.querySelector("#email");
-sign_up_btn.addEventListener('click', () =>{
- container.classList.add("sign-up-mode");
+// Form elements
+const signInForm = document.querySelector("#signInForm");
+const signUpForm = document.querySelector("#signUpForm");
+const passwordInput = document.querySelector("#password");
+const phoneInput = document.querySelector("#phone");
+const fullNameInput = document.querySelector("#fullName");
+
+sign_up_btn.addEventListener("click", () => {
+ container.classList.add("sign-up-mode");
+});
+
+sign_in_btn.addEventListener("click", () => {
+ container.classList.remove("sign-up-mode");
+});
+
+// Validation functions
+function showError(input, message) {
+ const formField = input.parentElement;
+ formField.classList.add('error');
+ formField.classList.remove('valid');
+ const error = formField.querySelector('.error-message');
+ error.textContent = message;
+}
+
+function showSuccess(input) {
+ const formField = input.parentElement;
+ formField.classList.remove('error');
+ formField.classList.add('valid');
+ const error = formField.querySelector('.error-message');
+ error.textContent = '';
+}
+
+function validateEmail(input) {
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!input.value.trim()) {
+ showError(input, 'Email is required');
+ return false;
+ } else if (!emailRegex.test(input.value)) {
+ showError(input, 'Please enter a valid email address');
+ return false;
+ }
+ showSuccess(input);
+ return true;
+}
+
+function validatePhone(input) {
+ const phoneRegex = /^[6-9]\d{9}$/;
+ if (!input.value.trim()) {
+ showError(input, 'Phone number is required');
+ return false;
+ } else if (!phoneRegex.test(input.value)) {
+ showError(input, 'Please enter a valid 10-digit Indian phone number');
+ return false;
+ }
+ showSuccess(input);
+ return true;
+}
+
+function validateFullName(input) {
+ const nameRegex = /^[A-Za-z\s]+$/;
+ if (!input.value.trim()) {
+ showError(input, 'Full name is required');
+ return false;
+ } else if (!nameRegex.test(input.value)) {
+ showError(input, 'Name should only contain letters and spaces');
+ return false;
+ } else if (input.value.trim().length < 3) {
+ showError(input, 'Name should be at least 3 characters long');
+ return false;
+ }
+ showSuccess(input);
+ return true;
+}
+
+function validatePassword(input) {
+ const password = input.value;
+ const requirements = {
+ length: password.length >= 8,
+ uppercase: /[A-Z]/.test(password),
+ lowercase: /[a-z]/.test(password),
+ number: /[0-9]/.test(password),
+ special: /[!@#$%^&*]/.test(password)
+ };
+
+ // Update requirement list UI
+ Object.keys(requirements).forEach(req => {
+ const li = document.getElementById(req);
+ if (li) {
+ if (requirements[req]) {
+ li.classList.add('valid');
+ } else {
+ li.classList.remove('valid');
+ }
+ }
+ });
+
+ if (!password) {
+ showError(input, 'Password is required');
+ return false;
+ }
+
+ const isValid = Object.values(requirements).every(Boolean);
+ if (!isValid) {
+ showError(input, 'Please meet all password requirements');
+ return false;
+ }
+
+ showSuccess(input);
+ return true;
+}
+
+// Real-time validation
+emailInput.addEventListener('input', () => validateEmail(emailInput));
+phoneInput.addEventListener('input', () => validatePhone(phoneInput));
+fullNameInput.addEventListener('input', () => validateFullName(fullNameInput));
+passwordInput.addEventListener('input', () => validatePassword(passwordInput));
+
+// Form submission
+signUpForm.addEventListener('submit', async (e) => {
+ e.preventDefault();
+
+ const isEmailValid = validateEmail(emailInput);
+ const isPhoneValid = validatePhone(phoneInput);
+ const isNameValid = validateFullName(fullNameInput);
+ const isPasswordValid = validatePassword(passwordInput);
+
+ if (isEmailValid && isPhoneValid && isNameValid && isPasswordValid) {
+ try {
+ const response = await fetch('http://localhost:5000/api/register', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ fullName: fullNameInput.value,
+ email: emailInput.value,
+ phone: phoneInput.value,
+ password: passwordInput.value
+ })
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ alert('Registration successful! Please sign in with your credentials.');
+ container.classList.remove("sign-up-mode");
+ signUpForm.reset();
+ } else {
+ alert(data.message || 'Registration failed. Please try again.');
+ }
+ } catch (error) {
+ alert('Error connecting to server. Please try again.');
+ console.error('Registration error:', error);
+ }
+ }
+});
+
+signInForm.addEventListener('submit', async (e) => {
+ e.preventDefault();
+
+ const signInEmail = document.querySelector("#signInEmail");
+ const signInPassword = document.querySelector("#signInPassword");
+
+ const isEmailValid = validateEmail(signInEmail);
+ const isPasswordValid = signInPassword.value.length >= 8;
+
+ if (!isPasswordValid) {
+ showError(signInPassword, 'Password must be at least 8 characters');
+ return;
+ }
+
+ if (isEmailValid && isPasswordValid) {
+ try {
+ const response = await fetch('http://localhost:5000/api/login', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ email: signInEmail.value,
+ password: signInPassword.value
+ })
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ // Store token and user data
+ localStorage.setItem('token', data.token);
+ localStorage.setItem('userData', JSON.stringify(data.user));
+
+ alert('Login successful! Welcome to your dashboard.');
+ window.location.href = 'dashboard.html';
+ } else {
+ alert(data.message || 'Login failed. Please try again.');
+ showError(signInPassword, 'Invalid credentials');
+ }
+ } catch (error) {
+ alert('Error connecting to server. Please try again.');
+ console.error('Login error:', error);
+ }
+ }
+});
+
+// Email verification process
+let verificationCode = '';
+
+function generateVerificationCode() {
+ return Math.floor(100000 + Math.random() * 900000).toString();
+}
+
+function simulateEmailSending(email, code) {
+ console.log(`Sending verification code ${code} to ${email}`);
+ alert(`Verification code sent to ${email}! (For demo: ${code})`);
+}
+
+sendVerificationBtn.addEventListener("click", () => {
+ if (!validateEmail(emailInput)) {
+ return;
+ }
+
+ verificationCode = generateVerificationCode();
+ simulateEmailSending(emailInput.value, verificationCode);
+
+ verificationSection.style.display = 'block';
+ sendVerificationBtn.style.display = 'none';
+});
+
+verifyCodeBtn.addEventListener("click", () => {
+ const codeInput = document.querySelector("#verificationCode");
+ const enteredCode = codeInput.value;
+
+ if (!enteredCode.match(/^\d{6}$/)) {
+ showError(codeInput, 'Please enter a valid 6-digit code');
+ return;
+ }
+
+ if (enteredCode === verificationCode) {
+ alert('Email verified successfully!');
+ verificationSection.style.display = 'none';
+ signUpSubmit.style.display = 'block';
+ showSuccess(codeInput);
+ } else {
+ showError(codeInput, 'Invalid verification code');
+ }
});
-sign_in_btn.addEventListener('click', () =>{
- container.classList.remove("sign-up-mode");
+resendCodeBtn.addEventListener("click", () => {
+ if (!validateEmail(emailInput)) {
+ return;
+ }
+
+ verificationCode = generateVerificationCode();
+ simulateEmailSending(emailInput.value, verificationCode);
});
\ No newline at end of file
diff --git a/backend/.env b/backend/.env
new file mode 100644
index 0000000..0e2c973
--- /dev/null
+++ b/backend/.env
@@ -0,0 +1,3 @@
+MONGODB_URI=mongodb+srv://22it085:Signlanguage@cluster0.sogo04j.mongodb.net/
+JWT_SECRET=isl_learning_platform_secret_key_2024_secure_token
+PORT=5000
\ No newline at end of file
diff --git a/backend/server.js b/backend/server.js
new file mode 100644
index 0000000..85243e9
--- /dev/null
+++ b/backend/server.js
@@ -0,0 +1,114 @@
+const express = require('express');
+const mongoose = require('mongoose');
+const cors = require('cors');
+const dotenv = require('dotenv');
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+
+// Load environment variables
+dotenv.config();
+
+const app = express();
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// MongoDB Connection
+mongoose.connect(process.env.MONGODB_URI)
+ .then(() => console.log('Connected to MongoDB Atlas'))
+ .catch((err) => console.error('MongoDB connection error:', err));
+
+// User Schema
+const userSchema = new mongoose.Schema({
+ fullName: { type: String, required: true },
+ email: { type: String, required: true, unique: true },
+ phone: { type: String, required: true },
+ password: { type: String, required: true },
+ createdAt: { type: Date, default: Date.now }
+});
+
+const User = mongoose.model('User', userSchema);
+
+// Routes
+// Register
+app.post('/api/register', async (req, res) => {
+ try {
+ const { fullName, email, phone, password } = req.body;
+
+ // Check if user already exists
+ const existingUser = await User.findOne({ email });
+ if (existingUser) {
+ return res.status(400).json({ message: 'User already exists' });
+ }
+
+ // Hash password
+ const salt = await bcrypt.genSalt(10);
+ const hashedPassword = await bcrypt.hash(password, salt);
+
+ // Create new user
+ const user = new User({
+ fullName,
+ email,
+ phone,
+ password: hashedPassword
+ });
+
+ await user.save();
+ res.status(201).json({ message: 'Registration successful' });
+ } catch (error) {
+ res.status(500).json({ message: 'Server error', error: error.message });
+ }
+});
+
+// Login
+app.post('/api/login', async (req, res) => {
+ try {
+ const { email, password } = req.body;
+
+ // Find user
+ const user = await User.findOne({ email });
+ if (!user) {
+ return res.status(400).json({ message: 'Invalid credentials' });
+ }
+
+ // Check password
+ const isMatch = await bcrypt.compare(password, user.password);
+ if (!isMatch) {
+ return res.status(400).json({ message: 'Invalid credentials' });
+ }
+
+ // Create JWT token
+ const token = jwt.sign(
+ { userId: user._id },
+ process.env.JWT_SECRET,
+ { expiresIn: '1h' }
+ );
+
+ res.json({
+ token,
+ user: {
+ id: user._id,
+ fullName: user.fullName,
+ email: user.email
+ }
+ });
+ } catch (error) {
+ res.status(500).json({ message: 'Server error', error: error.message });
+ }
+});
+
+// Get all users (for development/testing only)
+app.get('/api/users', async (req, res) => {
+ try {
+ const users = await User.find({}, '-password'); // Exclude password from the response
+ res.json(users);
+ } catch (error) {
+ res.status(500).json({ message: 'Server error', error: error.message });
+ }
+});
+
+const PORT = process.env.PORT || 5000;
+app.listen(PORT, () => {
+ console.log(`Server running on port ${PORT}`);
+});
\ No newline at end of file
diff --git a/dashboard.css b/dashboard.css
new file mode 100644
index 0000000..6acc34d
--- /dev/null
+++ b/dashboard.css
@@ -0,0 +1,645 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+:root {
+ --primary-color: #FF6B6B;
+ --secondary-color: #4ECDC4;
+ --accent-color: #45B7AF;
+ --text-color: #2C3E50;
+ --light-text: #95A5A6;
+ --background: #ECF0F1;
+ --sidebar-width: 280px;
+ --header-height: 70px;
+ --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+}
+
+body {
+ background-color: var(--background);
+ color: var(--text-color);
+}
+
+.dashboard-container {
+ display: flex;
+ min-height: 100vh;
+}
+
+/* Sidebar Styles */
+.sidebar {
+ width: var(--sidebar-width);
+ background: white;
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ box-shadow: var(--card-shadow);
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.logo img {
+ width: 40px;
+ height: 40px;
+}
+
+.logo h2 {
+ font-size: 1.5rem;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ list-style: none;
+ flex: 1;
+}
+
+.nav-links li {
+ margin-bottom: 0.5rem;
+}
+
+.nav-links a {
+ display: flex;
+ align-items: center;
+ padding: 1rem;
+ color: var(--text-color);
+ text-decoration: none;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+}
+
+.nav-links a i {
+ margin-right: 1rem;
+ font-size: 1.2rem;
+}
+
+.nav-links li.active a {
+ background: var(--primary-color);
+ color: white;
+}
+
+.nav-links a:hover {
+ background: rgba(255, 107, 107, 0.1);
+}
+
+.user-profile {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem;
+ border-top: 1px solid var(--background);
+}
+
+.user-profile img {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+}
+
+.user-info h3 {
+ font-size: 0.9rem;
+ color: var(--light-text);
+}
+
+.user-info .user-name {
+ font-weight: 600;
+ color: var(--text-color);
+}
+
+/* Main Content Styles */
+.main-content {
+ flex: 1;
+ padding: 2rem;
+ overflow-y: auto;
+}
+
+/* Header Styles */
+.dashboard-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
+}
+
+.search-bar {
+ display: flex;
+ align-items: center;
+ background: white;
+ padding: 0.5rem 1rem;
+ border-radius: 8px;
+ width: 400px;
+ box-shadow: var(--card-shadow);
+}
+
+.search-bar i {
+ color: var(--light-text);
+ margin-right: 1rem;
+}
+
+.search-bar input {
+ border: none;
+ outline: none;
+ width: 100%;
+ font-size: 1rem;
+}
+
+.header-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.notification-btn {
+ position: relative;
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 1.2rem;
+ color: var(--text-color);
+}
+
+.notification-badge {
+ position: absolute;
+ top: -5px;
+ right: -5px;
+ background: var(--primary-color);
+ color: white;
+ font-size: 0.7rem;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.profile-btn {
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.profile-btn img {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+}
+
+/* Progress Cards Styles */
+.progress-overview {
+ margin-bottom: 2rem;
+}
+
+.progress-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+ margin-top: 1rem;
+}
+
+.progress-card {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 12px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ box-shadow: var(--card-shadow);
+}
+
+.progress-card i {
+ font-size: 2rem;
+ color: var(--primary-color);
+}
+
+.progress-info h3 {
+ font-size: 1rem;
+ color: var(--light-text);
+ margin-bottom: 0.5rem;
+}
+
+.progress-info p {
+ font-size: 1.5rem;
+ font-weight: 600;
+}
+
+/* Lesson Cards Styles */
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.view-all {
+ color: var(--primary-color);
+ text-decoration: none;
+ font-weight: 500;
+}
+
+.lesson-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1.5rem;
+}
+
+.lesson-card {
+ background: white;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: var(--card-shadow);
+}
+
+.lesson-thumbnail {
+ position: relative;
+ height: 160px;
+ background: var(--background);
+}
+
+.lesson-thumbnail img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.progress-indicator {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 4px;
+ background: var(--primary-color);
+}
+
+.lesson-info {
+ padding: 1.5rem;
+}
+
+.lesson-info h3 {
+ margin-bottom: 0.5rem;
+}
+
+.lesson-info p {
+ color: var(--light-text);
+ margin-bottom: 1rem;
+}
+
+.lesson-meta {
+ display: flex;
+ justify-content: space-between;
+ color: var(--light-text);
+ font-size: 0.9rem;
+}
+
+.lesson-meta i {
+ margin-right: 0.5rem;
+}
+
+/* Practice Section Styles */
+.practice-section {
+ margin-top: 2rem;
+}
+
+.practice-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+
+.practice-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 12px;
+ text-align: center;
+ box-shadow: var(--card-shadow);
+}
+
+.practice-card i {
+ font-size: 2.5rem;
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+}
+
+.practice-card h3 {
+ margin-bottom: 0.5rem;
+}
+
+.practice-card p {
+ color: var(--light-text);
+ margin-bottom: 1.5rem;
+}
+
+.practice-btn {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 0.8rem 1.5rem;
+ border-radius: 8px;
+ cursor: pointer;
+ font-weight: 500;
+ transition: background 0.3s ease;
+}
+
+.practice-btn:hover {
+ background: var(--accent-color);
+}
+
+/* Quick Actions Styles */
+.action-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1.5rem;
+ margin-top: 1rem;
+}
+
+.action-card {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 12px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ box-shadow: var(--card-shadow);
+ transition: transform 0.3s ease;
+}
+
+.action-card:hover {
+ transform: translateY(-5px);
+}
+
+.action-info h3 {
+ margin-bottom: 0.5rem;
+ color: var(--text-color);
+}
+
+.action-info p {
+ color: var(--light-text);
+}
+
+.action-btn {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ border: none;
+ background: var(--primary-color);
+ color: white;
+ font-size: 1.2rem;
+ cursor: pointer;
+ transition: background 0.3s ease;
+}
+
+.action-btn:hover {
+ background: var(--accent-color);
+}
+
+/* Recent Activity Styles */
+.activity-list {
+ margin-top: 1rem;
+}
+
+.activity-item {
+ background: white;
+ padding: 1rem;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1rem;
+ box-shadow: var(--card-shadow);
+}
+
+.activity-icon {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.2rem;
+ color: white;
+}
+
+.activity-icon.speech-to-sign {
+ background: var(--primary-color);
+}
+
+.activity-icon.sign-to-text {
+ background: var(--secondary-color);
+}
+
+.activity-details h3 {
+ font-size: 1rem;
+ margin-bottom: 0.25rem;
+}
+
+.activity-details p {
+ color: var(--light-text);
+ font-size: 0.9rem;
+ margin-bottom: 0.25rem;
+}
+
+.activity-time {
+ font-size: 0.8rem;
+ color: var(--light-text);
+}
+
+/* Profile Section Styles */
+.profile-section {
+ background: white;
+ border-radius: 12px;
+ padding: 2rem;
+ margin-top: 2rem;
+ box-shadow: var(--card-shadow);
+}
+
+.save-profile-btn {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 8px;
+ cursor: pointer;
+ font-weight: 500;
+}
+
+.save-profile-btn:hover {
+ background: var(--accent-color);
+}
+
+.profile-content {
+ display: grid;
+ grid-template-columns: 250px 1fr;
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.profile-image-section {
+ text-align: center;
+}
+
+.profile-image-container {
+ position: relative;
+ width: 200px;
+ height: 200px;
+ margin: 0 auto;
+}
+
+.profile-image-container img {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.image-upload {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ background: var(--primary-color);
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
+
+.image-upload i {
+ color: white;
+}
+
+.image-upload input {
+ display: none;
+}
+
+.profile-form {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+}
+
+.form-group {
+ margin-bottom: 1rem;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+ color: var(--text-color);
+ font-weight: 500;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+ width: 100%;
+ padding: 0.8rem;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ font-size: 0.9rem;
+}
+
+.form-group textarea {
+ height: 100px;
+ resize: vertical;
+}
+
+.profile-preferences {
+ grid-column: span 2;
+ margin-top: 1.5rem;
+}
+
+.preference-item {
+ margin: 1rem 0;
+}
+
+.preference-item label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+}
+
+.preference-item input[type="checkbox"] {
+ width: 18px;
+ height: 18px;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+ .sidebar {
+ width: 80px;
+ padding: 1rem;
+ }
+
+ .logo h2,
+ .nav-links a span,
+ .user-info {
+ display: none;
+ }
+
+ .nav-links a i {
+ margin-right: 0;
+ font-size: 1.5rem;
+ }
+
+ .main-content {
+ margin-left: 80px;
+ }
+
+ .profile-content {
+ grid-template-columns: 1fr;
+ }
+
+ .profile-form {
+ grid-template-columns: 1fr;
+ }
+
+ .profile-preferences {
+ grid-column: span 1;
+ }
+}
+
+@media (max-width: 768px) {
+ .search-bar {
+ width: 100%;
+ max-width: 300px;
+ }
+
+ .progress-cards,
+ .lesson-cards,
+ .practice-cards {
+ grid-template-columns: 1fr;
+ }
+
+ .action-cards {
+ grid-template-columns: 1fr;
+ }
+
+ .profile-image-container {
+ width: 150px;
+ height: 150px;
+ }
+}
+
+@media (max-width: 480px) {
+ .main-content {
+ padding: 1rem;
+ }
+
+ .dashboard-header {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .search-bar {
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/dashboard.html b/dashboard.html
new file mode 100644
index 0000000..d7a102b
--- /dev/null
+++ b/dashboard.html
@@ -0,0 +1,192 @@
+
+
+
+
+
+ Sign Language Translator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Quick Actions
+
+
+
+
Speech to Sign
+
Convert spoken words to sign language
+
+
+
+
+
+
Sign to Text
+
Convert sign language to text
+
+
+
+
+
+
Text to Sign
+
Convert written text to sign language
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Speech to Sign Translation
+
Converted 2 minutes of speech
+
2 minutes ago
+
+
+
+
+
+
+
+
Sign to Text Translation
+
Translated 5 sign language gestures
+
15 minutes ago
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dashboard.js b/dashboard.js
new file mode 100644
index 0000000..f344817
--- /dev/null
+++ b/dashboard.js
@@ -0,0 +1,191 @@
+// Navigation Handling
+const navLinks = document.querySelectorAll('.nav-links a');
+const profileSection = document.getElementById('profileSection');
+const profileBtn = document.getElementById('profileBtn');
+const mainContent = document.querySelector('.dashboard-content');
+
+// Profile Image Handling
+const profileImageInput = document.getElementById('profileImageInput');
+const previewImage = document.getElementById('previewImage');
+const profileImage = document.getElementById('profileImage');
+
+navLinks.forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ navLinks.forEach(link => link.parentElement.classList.remove('active'));
+ e.currentTarget.parentElement.classList.add('active');
+
+ // Handle section display
+ if (e.currentTarget.getAttribute('href') === '#profile') {
+ showProfileSection();
+ } else {
+ hideProfileSection();
+ }
+ });
+});
+
+// Profile Button Click
+profileBtn.addEventListener('click', () => {
+ showProfileSection();
+});
+
+function showProfileSection() {
+ profileSection.style.display = 'block';
+ document.querySelector('.quick-actions').style.display = 'none';
+ document.querySelector('.recent-activity').style.display = 'none';
+}
+
+function hideProfileSection() {
+ profileSection.style.display = 'none';
+ document.querySelector('.quick-actions').style.display = 'block';
+ document.querySelector('.recent-activity').style.display = 'block';
+}
+
+// Profile Image Upload
+profileImageInput.addEventListener('change', function(e) {
+ const file = e.target.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = function(e) {
+ previewImage.src = e.target.result;
+ profileImage.src = e.target.result;
+ }
+ reader.readAsDataURL(file);
+ }
+});
+
+// Save Profile Changes
+document.querySelector('.save-profile-btn').addEventListener('click', () => {
+ const formData = {
+ fullName: document.getElementById('fullName').value,
+ email: document.getElementById('email').value,
+ phone: document.getElementById('phone').value,
+ language: document.getElementById('language').value,
+ bio: document.getElementById('bio').value,
+ preferences: {
+ emailNotifications: document.getElementById('emailNotifications').checked,
+ darkMode: document.getElementById('darkMode').checked,
+ autoTranslate: document.getElementById('autoTranslate').checked
+ }
+ };
+
+ // Save to localStorage for demo
+ localStorage.setItem('userProfile', JSON.stringify(formData));
+ alert('Profile updated successfully!');
+});
+
+// Load Profile Data
+function loadProfileData() {
+ const savedProfile = localStorage.getItem('userProfile');
+ if (savedProfile) {
+ const profile = JSON.parse(savedProfile);
+ document.getElementById('fullName').value = profile.fullName || '';
+ document.getElementById('email').value = profile.email || '';
+ document.getElementById('phone').value = profile.phone || '';
+ document.getElementById('language').value = profile.language || 'en';
+ document.getElementById('bio').value = profile.bio || '';
+ document.getElementById('emailNotifications').checked = profile.preferences?.emailNotifications || false;
+ document.getElementById('darkMode').checked = profile.preferences?.darkMode || false;
+ document.getElementById('autoTranslate').checked = profile.preferences?.autoTranslate || false;
+ }
+}
+
+// Quick Action Buttons
+const actionButtons = document.querySelectorAll('.action-btn');
+
+actionButtons.forEach(button => {
+ button.addEventListener('click', (e) => {
+ const action = e.currentTarget.parentElement.querySelector('h3').textContent;
+ switch(action) {
+ case 'Speech to Sign':
+ startSpeechToSign();
+ break;
+ case 'Sign to Text':
+ startSignToText();
+ break;
+ case 'Text to Sign':
+ startTextToSign();
+ break;
+ }
+ });
+});
+
+// Translation Functions (Demo)
+function startSpeechToSign() {
+ if (!('webkitSpeechRecognition' in window)) {
+ alert('Speech recognition is not supported in your browser');
+ return;
+ }
+ alert('Starting speech recognition...');
+}
+
+function startSignToText() {
+ if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+ alert('Camera access is not supported in your browser');
+ return;
+ }
+ alert('Opening camera for sign language recognition...');
+}
+
+function startTextToSign() {
+ const text = prompt('Enter the text you want to convert to sign language:');
+ if (text) {
+ alert(`Converting text to sign language: ${text}`);
+ }
+}
+
+// Notification Handling
+const notificationBtn = document.querySelector('.notification-btn');
+let notifications = [
+ { id: 1, message: "New feature: Speech to Sign translation is now available!" },
+ { id: 2, message: "Your last translation was successful" }
+];
+
+notificationBtn.addEventListener('click', () => {
+ if (notifications.length > 0) {
+ alert(notifications.map(n => n.message).join('\n\n'));
+ } else {
+ alert('No new notifications');
+ }
+});
+
+// Search Functionality
+const searchInput = document.querySelector('.search-bar input');
+
+searchInput.addEventListener('input', (e) => {
+ const searchTerm = e.target.value.toLowerCase();
+ // Add search functionality here
+ console.log('Searching for:', searchTerm);
+});
+
+// Practice Button Handlers
+const practiceButtons = document.querySelectorAll('.practice-btn');
+
+practiceButtons.forEach(button => {
+ button.addEventListener('click', (e) => {
+ const practice = e.target.parentElement.querySelector('h3').textContent;
+ alert(`Starting ${practice}`);
+ });
+});
+
+// Update Progress (Demo)
+function updateProgress() {
+ const progressCards = document.querySelectorAll('.progress-card');
+
+ // Simulate progress updates
+ setInterval(() => {
+ progressCards.forEach(card => {
+ const value = card.querySelector('p');
+ if (value.textContent.includes('days')) {
+ const days = parseInt(value.textContent) + 1;
+ value.textContent = `${days} days`;
+ }
+ });
+ }, 86400000); // Update daily
+}
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+ loadProfileData();
+ updateProgress();
+});
\ No newline at end of file
diff --git a/img/learning.svg b/img/learning.svg
new file mode 100644
index 0000000..00c2fb5
--- /dev/null
+++ b/img/learning.svg
@@ -0,0 +1,30 @@
+
+
\ No newline at end of file
diff --git a/img/sign-language.svg b/img/sign-language.svg
new file mode 100644
index 0000000..ae78792
--- /dev/null
+++ b/img/sign-language.svg
@@ -0,0 +1,25 @@
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 1a5508c..57d33c8 100644
--- a/index.html
+++ b/index.html
@@ -3,104 +3,147 @@
- SignIn&SignUp
+ ISL Learning Platform
-