create-template-html-css 1.6.4 → 1.8.0

package/templates/navigation/style.css

@@ -111,6 +111,256 @@ body {
     color: #666;
 }
 
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2000;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal.active {
+    display: flex;
+}
+
+.modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    cursor: pointer;
+    animation: fadeIn 0.3s ease;
+}
+
+.modal-content {
+    position: relative;
+    z-index: 2001;
+    max-width: 450px;
+    width: 90%;
+    max-height: 90vh;
+    overflow-y: auto;
+    animation: slideUp 0.3s ease;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.modal-close {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: #f5f5f5;
+    border: none;
+    font-size: 28px;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2002;
+    transition: all 0.3s ease;
+    color: #333;
+}
+
+.modal-close:hover {
+    background: #e0e0e0;
+    transform: rotate(90deg);
+}
+
+/* Login Card in Modal */
+.login-card {
+    background: white;
+    padding: 50px 40px;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.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: 0;
+}
+
+.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;
+}
+
 /* Mobile Responsive */
 @media (max-width: 768px) {
     .nav-toggle {
@@ -158,4 +408,23 @@ body {
     .section p {
         font-size: 1rem;
     }
+    
+    .modal-content {
+        width: 95%;
+        padding: 0;
+    }
+    
+    .login-card {
+        padding: 30px 25px;
+    }
+    
+    .login-title {
+        font-size: 1.5rem;
+    }
+    
+    .remember-forgot {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+    }
 }

package/templates/register/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Register</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="register-card">
+            <h1 class="register-title">Create Account</h1>
+            <p class="register-subtitle">Join us today and get started</p>
+            
+            <form class="register-form" id="registerForm">
+                <div class="form-group">
+                    <label for="fullName">Full Name</label>
+                    <input type="text" id="fullName" name="fullName" placeholder="John Doe" required>
+                </div>
+                
+                <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 class="password-requirements">
+                        <p>Password must contain:</p>
+                        <ul>
+                            <li id="req-length">At least 8 characters</li>
+                            <li id="req-uppercase">One uppercase letter</li>
+                            <li id="req-number">One number</li>
+                            <li id="req-special">One special character (@, #, $, %)</li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="confirmPassword">Confirm Password</label>
+                    <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm your password" required>
+                    <span class="password-match-message" id="matchMessage"></span>
+                </div>
+                
+                <div class="form-group">
+                    <label for="username">Username</label>
+                    <input type="text" id="username" name="username" placeholder="Choose a username" required>
+                </div>
+                
+                <div class="form-group checkbox-group">
+                    <input type="checkbox" id="terms" name="terms" required>
+                    <label for="terms">I agree to the <a href="#" class="terms-link">Terms of Service</a> and <a href="#" class="terms-link">Privacy Policy</a></label>
+                </div>
+                
+                <div class="form-group checkbox-group">
+                    <input type="checkbox" id="newsletter" name="newsletter">
+                    <label for="newsletter">Subscribe to our newsletter for updates</label>
+                </div>
+                
+                <button type="submit" class="register-btn" id="submitBtn">Create Account</button>
+            </form>
+            
+            <div class="form-divider">
+                <span>Or sign up 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>
+            
+            <p class="login-link">
+                Already have an account? <a href="#">Login here</a>
+            </p>
+        </div>
+    </div>
+    
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/register/script.js

@@ -0,0 +1,205 @@
+// Register Form Handler
+const registerForm = document.getElementById('registerForm');
+const passwordInput = document.getElementById('password');
+const confirmPasswordInput = document.getElementById('confirmPassword');
+const matchMessage = document.getElementById('matchMessage');
+const passwordRequirements = document.querySelector('.password-requirements');
+const submitBtn = document.getElementById('submitBtn');
+
+// Password validation requirements
+const passwordRequirements_obj = {
+    length: /^.{8,}$/,
+    uppercase: /[A-Z]/,
+    number: /\d/,
+    special: /[@#$%]/
+};
+
+// Password input event listener
+if (passwordInput) {
+    passwordInput.addEventListener('input', function() {
+        const password = this.value;
+        
+        // Show requirements
+        if (password.length > 0) {
+            passwordRequirements.classList.add('show');
+        } else {
+            passwordRequirements.classList.remove('show');
+        }
+        
+        // Check each requirement
+        updateRequirement('length', passwordRequirements_obj.length.test(password));
+        updateRequirement('uppercase', passwordRequirements_obj.uppercase.test(password));
+        updateRequirement('number', passwordRequirements_obj.number.test(password));
+        updateRequirement('special', passwordRequirements_obj.special.test(password));
+        
+        // Check if passwords match
+        if (confirmPasswordInput.value) {
+            checkPasswordMatch();
+        }
+        
+        updateSubmitButton();
+    });
+}
+
+// Confirm password input event listener
+if (confirmPasswordInput) {
+    confirmPasswordInput.addEventListener('input', checkPasswordMatch);
+}
+
+// Update requirement UI
+function updateRequirement(reqName, isValid) {
+    const reqElement = document.getElementById(`req-${reqName}`);
+    if (reqElement) {
+        if (isValid) {
+            reqElement.classList.add('valid');
+        } else {
+            reqElement.classList.remove('valid');
+        }
+    }
+}
+
+// Check password match
+function checkPasswordMatch() {
+    const password = passwordInput.value;
+    const confirmPassword = confirmPasswordInput.value;
+    
+    if (!confirmPassword) {
+        matchMessage.textContent = '';
+        matchMessage.className = 'password-match-message';
+        return false;
+    }
+    
+    if (password === confirmPassword) {
+        matchMessage.textContent = '✓ Passwords match';
+        matchMessage.className = 'password-match-message success';
+        return true;
+    } else {
+        matchMessage.textContent = '✗ Passwords do not match';
+        matchMessage.className = 'password-match-message error';
+        return false;
+    }
+}
+
+// Validate all requirements met
+function isPasswordValid(password) {
+    return (
+        passwordRequirements_obj.length.test(password) &&
+        passwordRequirements_obj.uppercase.test(password) &&
+        passwordRequirements_obj.number.test(password) &&
+        passwordRequirements_obj.special.test(password)
+    );
+}
+
+// Update submit button state
+function updateSubmitButton() {
+    const fullName = document.getElementById('fullName').value;
+    const email = document.getElementById('email').value;
+    const password = passwordInput.value;
+    const confirmPassword = confirmPasswordInput.value;
+    const username = document.getElementById('username').value;
+    const termsChecked = document.getElementById('terms').checked;
+    
+    const isFormValid = (
+        fullName &&
+        email &&
+        isPasswordValid(password) &&
+        password === confirmPassword &&
+        username &&
+        termsChecked
+    );
+    
+    submitBtn.disabled = !isFormValid;
+}
+
+// Register form submit
+if (registerForm) {
+    registerForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        const fullName = document.getElementById('fullName').value;
+        const email = document.getElementById('email').value;
+        const password = document.getElementById('password').value;
+        const confirmPassword = document.getElementById('confirmPassword').value;
+        const username = document.getElementById('username').value;
+        const newsletter = document.getElementById('newsletter').checked;
+        
+        // Validate all inputs
+        if (!fullName || !email || !password || !confirmPassword || !username) {
+            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;
+        }
+        
+        // Check passwords match
+        if (password !== confirmPassword) {
+            alert('Passwords do not match');
+            return;
+        }
+        
+        // Check password validity
+        if (!isPasswordValid(password)) {
+            alert('Password does not meet all requirements');
+            return;
+        }
+        
+        // Username validation (alphanumeric and underscore only, 3-20 characters)
+        const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
+        if (!usernameRegex.test(username)) {
+            alert('Username must be 3-20 characters and contain only letters, numbers, and underscores');
+            return;
+        }
+        
+        console.log('Registration attempt:', {
+            fullName: fullName,
+            email: email,
+            username: username,
+            newsletter: newsletter,
+            password: '***'
+        });
+        
+        // Here you would send the registration request to your backend
+        alert('Account created successfully! (This is a demo)');
+        
+        // Reset form
+        registerForm.reset();
+        passwordRequirements.classList.remove('show');
+        matchMessage.textContent = '';
+        submitBtn.disabled = true;
+    });
+}
+
+// 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(`Register with ${provider}`);
+        alert(`${provider} registration initiated (This is a demo)`);
+    });
+});
+
+// Terms link handlers
+const termsLinks = document.querySelectorAll('.terms-link');
+termsLinks.forEach(link => {
+    link.addEventListener('click', function(e) {
+        e.preventDefault();
+        const type = this.textContent.includes('Terms') ? 'Terms of Service' : 'Privacy Policy';
+        alert(`${type} - Full content would be shown here`);
+    });
+});
+
+// Enable/disable submit button on form change
+const formInputs = registerForm.querySelectorAll('input');
+formInputs.forEach(input => {
+    input.addEventListener('change', updateSubmitButton);
+});
+
+// Initialize submit button state
+updateSubmitButton();