Modern Login Component - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>GitHub API Config</title> <style> body { font family: Arial, sans serif; background color: #f4f4f4; padding: 20px; } .container { max width: 600px; margin: 0 auto; background: #fff; padding: 20px; border radius: 8px; box shadow: 0 0 10px rgba(0, 0, 0, 0.1); background: rgb(68, 99, 118); margin bottom:20px; margin top:20px; } h2 { text align: center; margin bottom: 20px; font size:30px; } .form group { margin bottom: 15px; justify content: center; /* Center the form */ align items: center; gap: 15px; /* Space between form elements */ margin bottom: 20px; /* Space between form and the header */ } .form group label { display: block; margin bottom: 15px; font size:18px; } .form group input { width: 80%; padding: 10px; border: 1px solid #ccc; border radius: 4px; align item:center; justify content: center; margin left:50px; margin right:30px; } .btn { display: inline block; padding: 10px 15px; background color: #ccc; color: black; border: none; border radius: 4px; cursor: pointer; text align: center; width: 30%; margin top: 10px; margin left:190px; margin right:30px; justify content: center; font size: 16px; font weight: bold; } .btn:hover { background color: grey; } #header{ display: flex; justify content: center; align items: center; padding top: 2px; padding bottom: 2px; height: 50px; margin bottom: 10px; background color: rgb(68, 99, 118); color: white; font size: 16px; border bottom: 2px solid white; /* Add this line */ } </style> </head> <body> <div class="container"> <div id="header"> <h2>GitHub Repository Configuration</h2> </div> <div class="form group"> <label for="owner"><h3>Owner :</h3></label> <input type="text" id="owner" placeholder="Enter owner (e.g., username or organization)"> </div> <div class="form group"> <label for="repo"><h3>Repository Name :</h3></label> <input type="text" id="repo" placeholder="Enter repository name"> </div> <div class="form group"> <label for="url"><h3>Or Enter Repository URL :</h3></label> <input type="text" id="url" placeholder="Enter full GitHub repository URL"> </div> <button class="btn" onclick="saveConfig()">Save Configuration</button> </div> <script> function saveConfig() { const owner = document.getElementById('owner').value.trim(); const repo = document.getElementById('repo').value.trim(); const url = document.getElementById('url').value.trim(); let extractedOwner = owner; let extractedRepo = repo; if (url) { const urlPattern = /https:\/\/github\.com\/([^\/]+)\/([^\/]+)/; const match = url.match(urlPattern); if (match) { extractedOwner = match[1]; extractedRepo = match[2]; } else { alert('Invalid GitHub URL.'); return; } } if (!extractedOwner || !extractedRepo) { alert('Please enter both owner and repository name, or provide a valid URL.'); return; } localStorage.setItem('githubOwner', extractedOwner); localStorage.setItem('githubRepo', extractedRepo); alert('Configuration saved!'); window.location.href = 'operations.html'; // Redirect to operations page after saving config } </script> </body> </html> make this beautiful
