create-template-html-css 1.6.4 → 1.8.0

package/templates/login/script.js

@@ -0,0 +1,83 @@
+// Login Form Handler
+const loginForm = document.getElementById('loginForm');
+
+if (loginForm) {
+    loginForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        const email = document.getElementById('email').value;
+        const password = document.getElementById('password').value;
+        const remember = document.getElementById('remember').checked;
+        
+        // Validate inputs
+        if (!email || !password) {
+            alert('Please fill in all required fields');
+            return;
+        }
+        
+        // Email validation
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+            alert('Please enter a valid email address');
+            return;
+        }
+        
+        // Password validation (minimum 6 characters)
+        if (password.length < 6) {
+            alert('Password must be at least 6 characters long');
+            return;
+        }
+        
+        console.log('Login attempt:', {
+            email: email,
+            password: '***',
+            remember: remember
+        });
+        
+        // Here you would send the login request to your backend
+        alert('Login successful! (This is a demo)');
+        
+        // Reset form
+        loginForm.reset();
+    });
+}
+
+// Forgot password link
+const forgotLink = document.querySelector('.forgot-link');
+if (forgotLink) {
+    forgotLink.addEventListener('click', function(e) {
+        e.preventDefault();
+        const email = document.getElementById('email').value;
+        if (email) {
+            alert(`Password reset link will be sent to: ${email}`);
+        } else {
+            alert('Please enter your email address first');
+        }
+    });
+}
+
+// Social button handlers
+const socialButtons = document.querySelectorAll('.social-btn');
+socialButtons.forEach(button => {
+    button.addEventListener('click', function(e) {
+        e.preventDefault();
+        const provider = this.classList.contains('google-btn') ? 'Google' : 'GitHub';
+        console.log(`Login with ${provider}`);
+        alert(`${provider} login initiated (This is a demo)`);
+    });
+});
+
+// Password visibility toggle (optional enhancement)
+const passwordInput = document.getElementById('password');
+if (passwordInput) {
+    const togglePassword = function() {
+        if (passwordInput.type === 'password') {
+            passwordInput.type = 'text';
+        } else {
+            passwordInput.type = 'password';
+        }
+    };
+    
+    // You can bind this to a button if needed
+    // passwordToggleBtn.addEventListener('click', togglePassword);
+}

package/templates/login/style.css

@@ -0,0 +1,232 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    width: 100%;
+    max-width: 450px;
+}
+
+.login-card {
+    background: white;
+    padding: 50px 40px;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    animation: slideUp 0.5s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.login-title {
+    color: #333;
+    font-size: 2rem;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.login-subtitle {
+    color: #666;
+    text-align: center;
+    margin-bottom: 35px;
+    font-size: 0.95rem;
+}
+
+.login-form {
+    margin-bottom: 30px;
+}
+
+.form-group {
+    margin-bottom: 25px;
+}
+
+.form-group label {
+    display: block;
+    color: #333;
+    font-weight: 600;
+    margin-bottom: 8px;
+    font-size: 0.95rem;
+}
+
+.form-group input[type="email"],
+.form-group input[type="password"] {
+    width: 100%;
+    padding: 12px 15px;
+    border: 2px solid #e0e0e0;
+    border-radius: 10px;
+    font-size: 0.95rem;
+    transition: all 0.3s ease;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.form-group input[type="email"]:focus,
+.form-group input[type="password"]:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.remember-forgot {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+}
+
+.checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.checkbox-wrapper input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: #667eea;
+}
+
+.checkbox-wrapper label {
+    margin: 0;
+    font-weight: 500;
+    cursor: pointer;
+    color: #666;
+}
+
+.forgot-link {
+    color: #667eea;
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.3s ease;
+}
+
+.forgot-link:hover {
+    color: #764ba2;
+}
+
+.login-btn {
+    width: 100%;
+    padding: 14px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.login-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.5);
+}
+
+.login-btn:active {
+    transform: translateY(0);
+}
+
+.form-divider {
+    display: flex;
+    align-items: center;
+    margin: 30px 0;
+    color: #999;
+    font-size: 0.85rem;
+}
+
+.form-divider::before,
+.form-divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #e0e0e0;
+}
+
+.form-divider span {
+    padding: 0 15px;
+}
+
+.social-buttons {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+    margin-bottom: 25px;
+}
+
+.social-btn {
+    padding: 12px;
+    border: 2px solid #e0e0e0;
+    background: white;
+    border-radius: 10px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.social-btn:hover {
+    border-color: #667eea;
+    background: #f9f9f9;
+}
+
+.social-btn span {
+    color: #333;
+    font-size: 0.9rem;
+}
+
+.signup-link {
+    text-align: center;
+    color: #666;
+    font-size: 0.95rem;
+}
+
+.signup-link a {
+    color: #667eea;
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.3s ease;
+}
+
+.signup-link a:hover {
+    color: #764ba2;
+}
+
+@media (max-width: 480px) {
+    .login-card {
+        padding: 30px 25px;
+    }
+    
+    .login-title {
+        font-size: 1.5rem;
+    }
+    
+    .remember-forgot {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+    }
+}

package/templates/navigation/index.html

@@ -35,10 +35,61 @@
                 <li class="nav-item">
                     <a href="#contact" class="nav-link">Contact</a>
                 </li>
+                <li class="nav-item">
+                    <button class="nav-link login-btn" id="loginModalBtn">Login</button>
+                </li>
             </ul>
         </div>
     </nav>
     
+    <!-- Login Modal -->
+    <div class="modal" id="loginModal">
+        <div class="modal-overlay" id="modalOverlay"></div>
+        <div class="modal-content">
+            <button class="modal-close" id="closeLoginModal">&times;</button>
+            
+            <div class="login-card">
+                <h1 class="login-title">Welcome Back</h1>
+                <p class="login-subtitle">Login to your account</p>
+                
+                <form class="login-form" id="loginForm">
+                    <div class="form-group">
+                        <label for="email">Email Address</label>
+                        <input type="email" id="email" name="email" placeholder="you@example.com" required>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="password">Password</label>
+                        <input type="password" id="password" name="password" placeholder="Enter your password" required>
+                    </div>
+                    
+                    <div class="form-group remember-forgot">
+                        <div class="checkbox-wrapper">
+                            <input type="checkbox" id="remember" name="remember">
+                            <label for="remember">Remember me</label>
+                        </div>
+                        <a href="#" class="forgot-link">Forgot Password?</a>
+                    </div>
+                    
+                    <button type="submit" class="login-btn">Login</button>
+                </form>
+                
+                <div class="form-divider">
+                    <span>Or continue with</span>
+                </div>
+                
+                <div class="social-buttons">
+                    <button class="social-btn google-btn">
+                        <span>Google</span>
+                    </button>
+                    <button class="social-btn github-btn">
+                        <span>GitHub</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
     <main class="main-content">
         <section id="home" class="section">
             <h1>Home</h1>

package/templates/navigation/script.js

@@ -1,19 +1,125 @@
 // Mobile menu toggle
 const navToggle = document.getElementById('navToggle');
 const navMenu = document.getElementById('navMenu');
+const loginModalBtn = document.getElementById('loginModalBtn');
+const loginModal = document.getElementById('loginModal');
+const closeLoginModal = document.getElementById('closeLoginModal');
+const modalOverlay = document.getElementById('modalOverlay');
 
 navToggle.addEventListener('click', function() {
     navMenu.classList.toggle('active');
     navToggle.classList.toggle('active');
 });
 
+// Login Modal Functions
+function openLoginModal() {
+    loginModal.classList.add('active');
+    document.body.style.overflow = 'hidden';
+}
+
+function closeModal() {
+    loginModal.classList.remove('active');
+    document.body.style.overflow = 'auto';
+}
+
+// Login modal button
+if (loginModalBtn) {
+    loginModalBtn.addEventListener('click', openLoginModal);
+}
+
+// Close button
+if (closeLoginModal) {
+    closeLoginModal.addEventListener('click', closeModal);
+}
+
+// Close on overlay click
+if (modalOverlay) {
+    modalOverlay.addEventListener('click', closeModal);
+}
+
+// Close on ESC key
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && loginModal.classList.contains('active')) {
+        closeModal();
+    }
+});
+
+// Login form handler
+const loginForm = document.getElementById('loginForm');
+if (loginForm) {
+    loginForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        const email = document.getElementById('email').value;
+        const password = document.getElementById('password').value;
+        const remember = document.getElementById('remember').checked;
+        
+        // Validate inputs
+        if (!email || !password) {
+            alert('Please fill in all required fields');
+            return;
+        }
+        
+        // Email validation
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+            alert('Please enter a valid email address');
+            return;
+        }
+        
+        // Password validation (minimum 6 characters)
+        if (password.length < 6) {
+            alert('Password must be at least 6 characters long');
+            return;
+        }
+        
+        console.log('Login attempt:', {
+            email: email,
+            password: '***',
+            remember: remember
+        });
+        
+        // Here you would send the login request to your backend
+        alert('Login successful! (This is a demo)');
+        
+        // Reset form and close modal
+        loginForm.reset();
+        closeModal();
+    });
+}
+
+// Forgot password link
+const forgotLink = document.querySelector('.forgot-link');
+if (forgotLink) {
+    forgotLink.addEventListener('click', function(e) {
+        e.preventDefault();
+        const email = document.getElementById('email').value;
+        if (email) {
+            alert(`Password reset link will be sent to: ${email}`);
+        } else {
+            alert('Please enter your email address first');
+        }
+    });
+}
+
+// Social button handlers
+const socialButtons = document.querySelectorAll('.social-btn');
+socialButtons.forEach(button => {
+    button.addEventListener('click', function(e) {
+        e.preventDefault();
+        const provider = this.classList.contains('google-btn') ? 'Google' : 'GitHub';
+        console.log(`Login with ${provider}`);
+        alert(`${provider} login initiated (This is a demo)`);
+    });
+});
+
 // Smooth scrolling for navigation links
-document.querySelectorAll('.nav-link').forEach(link => {
+document.querySelectorAll('.nav-link:not(.login-btn)').forEach(link => {
     link.addEventListener('click', function(e) {
         e.preventDefault();
         
         // Remove active class from all links
-        document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
+        document.querySelectorAll('.nav-link:not(.login-btn)').forEach(l => l.classList.remove('active'));
         
         // Add active class to clicked link
         this.classList.add('active');
@@ -39,7 +145,7 @@ document.querySelectorAll('.nav-link').forEach(link => {
 // Highlight active section on scroll
 window.addEventListener('scroll', function() {
     const sections = document.querySelectorAll('.section');
-    const navLinks = document.querySelectorAll('.nav-link');
+    const navLinks = document.querySelectorAll('.nav-link:not(.login-btn)');
     
     let current = '';