Spaces:
Running
Running
| <html><head><base href="https://websim.ai/portmanteau-poet"><title>Portmanteau Poet: Word Fusion Extraordinaire</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes morph { | |
| 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } | |
| 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } | |
| } | |
| .morph-animation { | |
| animation: morph 8s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-purple-600 to-indigo-800 text-white min-h-screen font-sans"> | |
| <header class="py-6 relative"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center">Portmanteau Poet</h1> | |
| <p class="mt-2 text-center text-purple-200">Word Fusion Extraordinaire</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold mb-4">Craft Your Portmanteau</h2> | |
| <form id="portmanteau-form" class="space-y-4"> | |
| <div> | |
| <label for="word1" class="block text-sm font-medium text-purple-200">First Word</label> | |
| <input type="text" id="word1" class="mt-1 block w-full px-3 py-2 bg-purple-700 border border-purple-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white" placeholder="Enter first word"> | |
| </div> | |
| <div> | |
| <label for="word2" class="block text-sm font-medium text-purple-200">Second Word</label> | |
| <input type="text" id="word2" class="mt-1 block w-full px-3 py-2 bg-purple-700 border border-purple-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white" placeholder="Enter second word"> | |
| </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-purple-900 bg-purple-300 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> | |
| Blend Words | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="portmanteau-container" class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 hidden"> | |
| <h2 class="text-2xl font-semibold mb-4">Your Linguistic Creation</h2> | |
| <div id="portmanteau-content" class="space-y-4"> | |
| <!-- Portmanteau will be inserted here --> | |
| </div> | |
| </div> | |
| </main> | |
| <div class="fixed bottom-4 right-4 w-32 h-32"> | |
| <div class="w-full h-full bg-gradient-to-r from-pink-500 to-yellow-500 morph-animation"></div> | |
| </div> | |
| <script> | |
| document.getElementById('portmanteau-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const word1 = document.getElementById('word1').value.trim(); | |
| const word2 = document.getElementById('word2').value.trim(); | |
| if (!word1 || !word2) { | |
| alert('Please enter both words.'); | |
| return; | |
| } | |
| generatePortmanteau(word1, word2); | |
| }); | |
| function generatePortmanteau(word1, word2) { | |
| // Show loading state | |
| const portmanteauContainer = document.getElementById('portmanteau-container'); | |
| portmanteauContainer.classList.remove('hidden'); | |
| const portmanteauContent = document.getElementById('portmanteau-content'); | |
| portmanteauContent.innerHTML = '<p>Fusing lexical elements...</p>'; | |
| // Simulate API call with setTimeout | |
| setTimeout(() => { | |
| const portmanteau = createPortmanteau(word1, word2); | |
| portmanteauContent.innerHTML = ` | |
| <h3 class="text-3xl font-bold text-center">${portmanteau.word}</h3> | |
| <p class="italic text-center">${portmanteau.pronunciation}</p> | |
| <p class="mt-4">${portmanteau.definition}</p> | |
| <div class="mt-4"> | |
| <h4 class="font-semibold">Etymology:</h4> | |
| <p>${portmanteau.etymology}</p> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="font-semibold">Example usage:</h4> | |
| <p class="italic">"${portmanteau.example}"</p> | |
| </div> | |
| `; | |
| }, 2000); | |
| } | |
| function createPortmanteau(word1, word2) { | |
| // This is a simplified portmanteau generation. In a real application, this would be much more sophisticated. | |
| const splitIndex1 = Math.floor(word1.length / 2); | |
| const splitIndex2 = Math.floor(word2.length / 2); | |
| const portmanteau = word1.slice(0, splitIndex1) + word2.slice(splitIndex2); | |
| // Generate a mock pronunciation | |
| const pronunciation = `/${portmanteau.split('').join('·')}/`; | |
| // Create a definition based on the original words | |
| const definition = `A combination of ${word1} and ${word2}, typically referring to a fusion of their characteristics or concepts.`; | |
| // Generate an etymology | |
| const etymology = `From ${word1} (${splitIndex1} letters) + ${word2} (${word2.length - splitIndex2} letters)`; | |
| // Create an example usage | |
| const example = `The new ${portmanteau} trend is taking the world by storm, combining the best aspects of ${word1} and ${word2}.`; | |
| return { | |
| word: portmanteau, | |
| pronunciation: pronunciation, | |
| definition: definition, | |
| etymology: etymology, | |
| example: example | |
| }; | |
| } | |
| </script> | |
| </body></html> |