Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Voice Change Tool</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet"> | |
| <style> | |
| .selected { | |
| background-color: #4299e1; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-inter"> | |
| <div class="container mx-auto p-6 md:p-10"> | |
| <h1 class="text-4xl font-bold text-center mb-8">Voice Change Tool</h1> | |
| <div class="bg-white p-6 md:p-8 rounded-lg shadow-md"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Tense Selection --> | |
| <div> | |
| <h2 class="text-lg font-medium mb-3">Tense</h2> | |
| <div class="flex space-x-3"> | |
| <button data-tense="present" class="tense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Present</button> | |
| <button data-tense="past" class="tense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out selected">Past</button> | |
| <button data-tense="future" class="tense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Future</button> | |
| </div> | |
| </div> | |
| <!-- Subtense Selection --> | |
| <div> | |
| <h2 class="text-lg font-medium mb-3">Subtense</h2> | |
| <div class="flex flex-wrap gap-3"> | |
| <button data-subtense="simple" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out selected">Simple</button> | |
| <button data-subtense="continuous" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Continuous</button> | |
| <button data-subtense="perfect" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Perfect</button> | |
| <button data-subtense="perfectContinuous" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Perfect Continuous</button> | |
| </div> | |
| </div> | |
| <!-- Type Selection --> | |
| <div> | |
| <h2 class="text-lg font-medium mb-3">Type</h2> | |
| <div class="flex flex-col space-y-3"> | |
| <button data-type="affirmative" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out selected">Affirmative</button> | |
| <button data-type="negative" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Negative</button> | |
| <button data-type="interrogative" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Interrogative</button> | |
| <button data-type="whWord" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">WH-word</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rule mb-6" id="rule-text"> | |
| <h2 id="active-voice-heading" class="text-2xl font-bold mb-3 text-red-500">Active Voice:</h2> | |
| <h3 id="active-voice-text" class="text-lg font-medium mb-3">sub+ v2+ obj</h3> | |
| <h2 id="passive-voice-heading" class="text-2xl font-bold mb-3 text-blue-500">Passive Voice:</h2> | |
| <h3 id="passive-voice-text" class="text-lg font-medium mb-3">obj+ was/were+ v3+ by+ sub</h3> | |
| </div> | |
| <div class="examples mb-8" id="examples-text"> | |
| <h2 class="text-2xl font-bold mb-3 text-green-500">Examples:</h2> | |
| <div id="examples-list"> | |
| <h2><strong>Active voice:</strong> I wrote a letter.<br><strong>Passive voice:</strong> A letter was written by me.</h2> | |
| <h2><strong>Active voice:</strong> She played the guitar.<br><strong>Passive voice:</strong> The guitar was played by her.</h2> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="prev-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-l"> | |
| Previous | |
| </button> | |
| <button id="next-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-r"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script> | |
| <script> | |
| const voiceChangeRules = { | |
| present: { | |
| simple: { | |
| affirmative: { | |
| active: 'sub+ v1+ obj', | |
| passive: 'obj+ am/is/are+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I write a letter.', passive: 'A letter is written by me.' }, | |
| { active: 'She plays the guitar.', passive: 'The guitar is played by her.' } | |
| ] | |
| }, | |
| negative: { | |
| active: 'sub+ do/does not+ v1+ obj', | |
| passive: 'obj+ is/are+ not+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I do not write a letter.', passive: 'A letter is not written by me.' }, | |
| { active: 'She does not play the guitar.', passive: 'The guitar is not played by her.' } | |
| ] | |
| }, | |
| interrogative: { | |
| active: 'do/does+ sub+ v1+ obj?', | |
| passive: 'is/are+ obj+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'Do I write a letter?', passive: 'Is a letter written by me?' }, | |
| { active: 'Does she play the guitar?', passive: 'Is the guitar played by her?' } | |
| ] | |
| }, | |
| whWord: { | |
| active: 'wh-word+ do/does+ sub+ v1+ obj?', | |
| passive: 'wh-word+ is/are+ obj+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'Why do I write a letter?', passive: 'Why is a letter written by me?' }, | |
| { active: 'What does she play?', passive: 'What is played by her?' } | |
| ] | |
| } | |
| }, | |
| continuous: { | |
| affirmative: { | |
| active: 'sub+ am/is/are+ v1+ing+ obj', | |
| passive: 'obj+ am/is/are+ being+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I am writing a letter.', passive: 'A letter is being written by me.' }, | |
| { active: 'She is playing the guitar.', passive: 'The guitar is being played by her.' } | |
| ] | |
| }, | |
| negative: { | |
| active: 'sub+ am/is/are not+ v1+ing+ obj', | |
| passive: 'obj+ am/is/are not+ being+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I am not writing a letter.', passive: 'A letter is not being written by me.' }, | |
| { active: 'She is not playing the guitar.', passive: 'The guitar is not being played by her.' } | |
| ] | |
| }, | |
| interrogative: { | |
| active: 'am/is/are+ sub+ v1+ing+ obj?', | |
| passive: 'am/is/are+ obj+ being+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'Am I writing a letter?', passive: 'Is a letter being written by me?' }, | |
| { active: 'Is she playing the guitar?', passive: 'Is the guitar being played by her?' } | |
| ] | |
| }, | |
| whWord: { | |
| active: 'wh-word+ am/is/are+ sub+ v1+ing+ obj?', | |
| passive: 'wh-word+ am/is/are+ obj+ being+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'What are you writing?', passive: 'What is being written by you?' }, | |
| { active: 'Why is she playing the guitar?', passive: 'Why is the guitar being played by her?' } | |
| ] | |
| } | |
| }, | |
| perfect: { | |
| affirmative: { | |
| active: 'sub+ have/has+ v3+ obj', | |
| passive: 'obj+ have/has+ been+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I have written a letter.', passive: 'A letter has been written by me.' }, | |
| { active: 'She has played the guitar.', passive: 'The guitar has been played by her.' } | |
| ] | |
| }, | |
| negative: { | |
| active: 'sub+ have/has not+ v3+ obj', | |
| passive: 'obj+ have/has not+ been+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I have not written a letter.', passive: 'A letter has not been written by me.' }, | |
| { active: 'She has not played the guitar.', passive: 'The guitar has not been played by her.' } | |
| ] | |
| }, | |
| interrogative: { | |
| active: 'have/has+ sub+ v3+ obj?', | |
| passive: 'have/has+ obj+ been+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'Have I written a letter?', passive: 'Has a letter been written by me?' }, | |
| { active: 'Has she played the guitar?', passive: 'Has the guitar been played by her?' } | |
| ] | |
| }, | |
| whWord: { | |
| active: 'wh-word+ have/has+ sub+ v3+ obj?', | |
| passive: 'wh-word+ have/has+ obj+ been+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'What have you written?', passive: 'What has been written by you?' }, | |
| { active: 'Why has she played the guitar?', passive: 'Why has the guitar been played by her?' } | |
| ] | |
| } | |
| } | |
| }, | |
| past: { | |
| simple: { | |
| affirmative: { | |
| active: 'sub+ v2+ obj', | |
| passive: 'obj+ was/were+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I wrote a letter.', passive: 'A letter was written by me.' }, | |
| { active: 'She played the guitar.', passive: 'The guitar was played by her.' } | |
| ] | |
| }, | |
| negative: { | |
| active: 'sub+ did not+ v1+ obj', | |
| passive: 'obj+ was/were+ not+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I did not write a letter.', passive: 'A letter was not written by me.' }, | |
| { active: 'She did not play the guitar.', passive: 'The guitar was not played by her.' } | |
| ] | |
| }, | |
| interrogative: { | |
| active: 'did+ sub+ v1+ obj?', | |
| passive: 'was/were+ obj+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'Did I write a letter?', passive: 'Was a letter written by me?' }, | |
| { active: 'Did she play the guitar?', passive: 'Was the guitar played by her?' } | |
| ] | |
| }, | |
| whWord: { | |
| active: 'wh-word+ did+ sub+ v1+ obj?', | |
| passive: 'wh-word+ was/were+ obj+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'Why did I write a letter?', passive: 'Why was a letter written by me?' }, | |
| { active: 'What did she play?', passive: 'What was played by her?' } | |
| ] | |
| } | |
| }, | |
| continuous: { | |
| affirmative: { | |
| active: 'sub+ was/were+ v1+ing+ obj', | |
| passive: 'obj+ was/were+ being+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I was writing a letter.', passive: 'A letter was being written by me.' }, | |
| { active: 'She was playing the guitar.', passive: 'The guitar was being played by her.' } | |
| ] | |
| }, | |
| negative: { | |
| active: 'sub+ was/were not+ v1+ing+ obj', | |
| passive: 'obj+ was/were not+ being+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I was not writing a letter.', passive: 'A letter was not being written by me.' }, | |
| { active: 'She was not playing the guitar.', passive: 'The guitar was not being played by her.' } | |
| ] | |
| }, | |
| interrogative: { | |
| active: 'was/were+ sub+ v1+ing+ obj?', | |
| passive: 'was/were+ obj+ being+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'Was I writing a letter?', passive: 'Was a letter being written by me?' }, | |
| { active: 'Was she playing the guitar?', passive: 'Was the guitar being played by her?' } | |
| ] | |
| }, | |
| whWord: { | |
| active: 'wh-word+ was/were+ sub+ v1+ing+ obj?', | |
| passive: 'wh-word+ was/were+ obj+ being+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'What was I writing?', passive: 'What was being written by me?' }, | |
| { active: 'Why was she playing the guitar?', passive: 'Why was the guitar being played by her?' } | |
| ] | |
| } | |
| }, | |
| perfect: { | |
| affirmative: { | |
| active: 'sub+ had+ v3+ obj', | |
| passive: 'obj+ had+ been+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I had written a letter.', passive: 'A letter had been written by me.' }, | |
| { active: 'She had played the guitar.', passive: 'The guitar had been played by her.' } | |
| ] | |
| }, | |
| negative: { | |
| active: 'sub+ had not+ v3+ obj', | |
| passive: 'obj+ had not+ been+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I had not written a letter.', passive: 'A letter had not been written by me.' }, | |
| { active: 'She had not played the guitar.', passive: 'The guitar had not been played by her.' } | |
| ] | |
| }, | |
| interrogative: { | |
| active: 'had+ sub+ v3+ obj?', | |
| passive: 'had+ obj+ been+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'Had I written a letter?', passive: 'Had a letter been written by me?' }, | |
| { active: 'Had she played the guitar?', passive: 'Had the guitar been played by her?' } | |
| ] | |
| }, | |
| whWord: { | |
| active: 'wh-word+ had+ sub+ v3+ obj?', | |
| passive: 'wh-word+ had+ obj+ been+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'What had you written?', passive: 'What had been written by you?' }, | |
| { active: 'Why had she played the guitar?', passive: 'Why had the guitar been played by her?' } | |
| ] | |
| } | |
| } | |
| }, | |
| future: { | |
| simple: { | |
| affirmative: { | |
| active: 'sub+ will+ v1+ obj', | |
| passive: 'obj+ will+ be+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I will write a letter.', passive: 'A letter will be written by me.' }, | |
| { active: 'She will play the guitar.', passive: 'The guitar will be played by her.' } | |
| ] | |
| }, | |
| negative: { | |
| active: 'sub+ will not+ v1+ obj', | |
| passive: 'obj+ will not+ be+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I will not write a letter.', passive: 'A letter will not be written by me.' }, | |
| { active: 'She will not play the guitar.', passive: 'The guitar will not be played by her.' } | |
| ] | |
| }, | |
| interrogative: { | |
| active: 'will+ sub+ v1+ obj?', | |
| passive: 'will+ obj+ be+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'Will I write a letter?', passive: 'Will a letter be written by me?' }, | |
| { active: 'Will she play the guitar?', passive: 'Will the guitar be played by her?' } | |
| ] | |
| }, | |
| whWord: { | |
| active: 'wh-word+ will+ sub+ v1+ obj?', | |
| passive: 'wh-word+ will+ obj+ be+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'What will I write?', passive: 'What will be written by me?' }, | |
| { active: 'Why will she play the guitar?', passive: 'Why will the guitar be played by her?' } | |
| ] | |
| } | |
| }, | |
| continuous: { | |
| affirmative: { | |
| active: 'sub+ will be+ v1+ing+ obj', | |
| passive: 'obj+ will be+ being+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I will be writing a letter.', passive: 'A letter will be being written by me.' }, | |
| { active: 'She will be playing the guitar.', passive: 'The guitar will be being played by her.' } | |
| ] | |
| }, | |
| negative: { | |
| active: 'sub+ will not be+ v1+ing+ obj', | |
| passive: 'obj+ will not be+ being+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I will not be writing a letter.', passive: 'A letter will not be being written by me.' }, | |
| { active: 'She will not be playing the guitar.', passive: 'The guitar will not be being played by her.' } | |
| ] | |
| }, | |
| interrogative: { | |
| active: 'will+ sub+ be+ v1+ing+ obj?', | |
| passive: 'will+ obj+ be+ being+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'Will I be writing a letter?', passive: 'Will a letter be being written by me?' }, | |
| { active: 'Will she be playing the guitar?', passive: 'Will the guitar be being played by her?' } | |
| ] | |
| }, | |
| whWord: { | |
| active: 'wh-word+ will+ sub+ be+ v1+ing+ obj?', | |
| passive: 'wh-word+ will+ obj+ be+ being+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'What will I be writing?', passive: 'What will be being written by me?' }, | |
| { active: 'Why will she be playing the guitar?', passive: 'Why will the guitar be being played by her?' } | |
| ] | |
| } | |
| }, | |
| perfect: { | |
| affirmative: { | |
| active: 'sub+ will have+ v3+ obj', | |
| passive: 'obj+ will have+ been+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I will have written a letter.', passive: 'A letter will have been written by me.' }, | |
| { active: 'She will have played the guitar.', passive: 'The guitar will have been played by her.' } | |
| ] | |
| }, | |
| negative: { | |
| active: 'sub+ will not have+ v3+ obj', | |
| passive: 'obj+ will not have+ been+ v3+ by+ sub', | |
| examples: [ | |
| { active: 'I will not have written a letter.', passive: 'A letter will not have been written by me.' }, | |
| { active: 'She will not have played the guitar.', passive: 'The guitar will not have been played by her.' } | |
| ] | |
| }, | |
| interrogative: { | |
| active: 'will+ sub+ have+ v3+ obj?', | |
| passive: 'will+ obj+ have+ been+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'Will I have written a letter?', passive: 'Will a letter have been written by me?' }, | |
| { active: 'Will she have played the guitar?', passive: 'Will the guitar have been played by her?' } | |
| ] | |
| }, | |
| whWord: { | |
| active: 'wh-word+ will+ sub+ have+ v3+ obj?', | |
| passive: 'wh-word+ will+ obj+ have+ been+ v3+ by+ sub?', | |
| examples: [ | |
| { active: 'What will you have written?', passive: 'What will have been written by you?' }, | |
| { active: 'Why will she have played the guitar?', passive: 'Why will the guitar have been played by her?' } | |
| ] | |
| } | |
| } | |
| } | |
| }; | |
| // Handle button state and display rules and examples | |
| const tenseButtons = document.querySelectorAll('.tense-btn'); | |
| const subtenseButtons = document.querySelectorAll('.subtense-btn'); | |
| const typeButtons = document.querySelectorAll('.type-btn'); | |
| let selectedTense = null; | |
| let selectedSubtense = null; | |
| let selectedType = null; | |
| function updateContent() { | |
| if (selectedTense && selectedSubtense && selectedType) { | |
| const rule = voiceChangeRules[selectedTense][selectedSubtense][selectedType]; | |
| document.getElementById('active-voice-heading').textContent = 'Active Voice:'; | |
| document.getElementById('active-voice-text').textContent = rule.active; | |
| document.getElementById('passive-voice-heading').textContent = 'Passive Voice:'; | |
| document.getElementById('passive-voice-text').textContent = rule.passive; | |
| const examples = rule.examples.map(ex => | |
| `<p><strong>Active voice:</strong> ${ex.active}<br><strong>Passive voice:</strong> ${ex.passive}</p>` | |
| ).join(''); | |
| document.getElementById('examples-list').innerHTML = examples; | |
| } | |
| } | |
| tenseButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| tenseButtons.forEach(btn => btn.classList.remove('selected')); | |
| button.classList.add('selected'); | |
| selectedTense = button.dataset.tense; | |
| updateContent(); | |
| }); | |
| }); | |
| subtenseButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| subtenseButtons.forEach(btn => btn.classList.remove('selected')); | |
| button.classList.add('selected'); | |
| selectedSubtense = button.dataset.subtense; | |
| updateContent(); | |
| }); | |
| }); | |
| typeButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| typeButtons.forEach(btn => btn.classList.remove('selected')); | |
| button.classList.add('selected'); | |
| selectedType = button.dataset.type; | |
| updateContent(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |