Spaces:
Running
Running
| <html><head><base href="https://websim.ai/git-gud"><title>Git Gud: Master Version Control</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| .typing-animation { | |
| overflow: hidden; | |
| border-right: .15em solid #10B981; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: .15em; | |
| animation: | |
| typing 3.5s steps(40, end), | |
| blink-caret .75s step-end infinite; | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #10B981; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen font-mono"> | |
| <header class="py-6 relative"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center text-green-500">Git Gud</h1> | |
| <p class="mt-2 text-center text-gray-400">Master Version Control with Ease</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold mb-4 text-green-400">Describe Your Git Action</h2> | |
| <form id="git-form" class="space-y-4"> | |
| <div> | |
| <label for="action-description" class="block text-sm font-medium text-gray-300">What do you want to do?</label> | |
| <textarea id="action-description" rows="3" class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 text-white" placeholder="e.g., 'Create a new branch and switch to it', 'Undo my last commit', 'Push my changes to the remote repository'"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-900 bg-green-500 hover:bg-green-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> | |
| Generate Git Command | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="result-container" class="bg-gray-800 rounded-lg shadow-lg p-6 hidden"> | |
| <h2 class="text-2xl font-semibold mb-4 text-green-400">Your Git Command</h2> | |
| <div id="command-result" class="space-y-4"> | |
| <!-- Git command result will be inserted here --> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| const gitForm = document.getElementById('git-form'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const commandResult = document.getElementById('command-result'); | |
| gitForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const actionDescription = document.getElementById('action-description').value.trim(); | |
| if (!actionDescription) { | |
| alert('Please describe the Git action you want to perform.'); | |
| return; | |
| } | |
| generateGitCommand(actionDescription); | |
| }); | |
| function generateGitCommand(actionDescription) { | |
| // Show loading state | |
| resultContainer.classList.remove('hidden'); | |
| commandResult.innerHTML = '<p>Analyzing your request...</p>'; | |
| // Simulate API call with setTimeout | |
| setTimeout(() => { | |
| const commandData = createGitCommand(actionDescription); | |
| displayCommandResult(commandData); | |
| }, 1500); | |
| } | |
| function createGitCommand(actionDescription) { | |
| // This is a simplified command generation. In a real application, this would be much more sophisticated. | |
| const actionKeywords = { | |
| 'create.*branch': 'git branch <branch-name>', | |
| 'switch.*branch': 'git checkout <branch-name>', | |
| 'create.*switch.*branch': 'git checkout -b <branch-name>', | |
| 'undo.*commit': 'git reset --soft HEAD~1', | |
| 'push.*changes': 'git push origin <branch-name>', | |
| 'pull.*changes': 'git pull origin <branch-name>', | |
| 'view.*status': 'git status', | |
| 'add.*files': 'git add .', | |
| 'commit.*changes': 'git commit -m "<commit-message>"', | |
| 'merge.*branch': 'git merge <branch-name>', | |
| 'clone.*repository': 'git clone <repository-url>', | |
| 'view.*log': 'git log', | |
| 'discard.*changes': 'git checkout -- .', | |
| 'stash.*changes': 'git stash', | |
| 'apply.*stash': 'git stash apply', | |
| 'create.*tag': 'git tag -a <tag-name> -m "<tag-message>"', | |
| 'delete.*branch': 'git branch -d <branch-name>' | |
| }; | |
| let gitCommand = 'git help'; | |
| let explanation = 'I\'m not sure what you want to do. Here\'s a general help command.'; | |
| for (const [action, command] of Object.entries(actionKeywords)) { | |
| if (new RegExp(action, 'i').test(actionDescription)) { | |
| gitCommand = command; | |
| explanation = `This command will ${actionDescription}.`; | |
| break; | |
| } | |
| } | |
| return { | |
| command: gitCommand, | |
| explanation: explanation, | |
| description: actionDescription | |
| }; | |
| } | |
| function displayCommandResult(commandData) { | |
| commandResult.innerHTML = ` | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <p class="text-green-400 font-bold">$ <span class="typing-animation">${commandData.command}</span></p> | |
| </div> | |
| <p class="mt-4 text-gray-300">${commandData.explanation}</p> | |
| <div class="mt-4"> | |
| <h3 class="text-lg font-semibold text-green-400">Explanation:</h3> | |
| <p class="text-gray-300">${commandData.command.split(' ').map(part => { | |
| if (part.startsWith('<') && part.endsWith('>')) { | |
| return `<span class="text-yellow-400">${part}</span>`; | |
| } | |
| return part; | |
| }).join(' ')}</p> | |
| </div> | |
| <p class="mt-4 text-sm text-gray-400">Your description: "${commandData.description}"</p> | |
| `; | |
| } | |
| </script> | |
| </body></html> |