Spaces:
Running
Running
| <html><head><base href="https://websim.ai/neologism-creator"><title>Neologism Creator: Forge New Words for Modern Times</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes wordSpin { | |
| 0% { transform: rotateY(0deg); } | |
| 100% { transform: rotateY(360deg); } | |
| } | |
| .word-spin { | |
| animation: wordSpin 2s linear infinite; | |
| transform-style: preserve-3d; | |
| } | |
| .word-spin:hover { | |
| animation-play-state: paused; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-pink-900 to-purple-900 text-white min-h-screen font-serif"> | |
| <header class="py-6 relative"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center text-pink-300">Neologism Creator</h1> | |
| <p class="mt-2 text-center text-purple-200">Forge New Words for Modern Times</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-pink-300">Create a New Word</h2> | |
| <form id="neologism-form" method="GET" action="https://websim.ai/neologism-creator" class="space-y-4"> | |
| <div> | |
| <label for="concept-input" class="block text-sm font-medium text-purple-200">Describe a concept or idea:</label> | |
| <textarea id="concept-input" name="concept" 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-pink-500 text-white" placeholder="e.g., The feeling of nostalgia for a place you've never been"></textarea> | |
| </div> | |
| <div> | |
| <label for="word-type" class="block text-sm font-medium text-purple-200">Desired word type:</label> | |
| <select id="word-type" name="type" 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-pink-500 text-white"> | |
| <option value="noun">Noun</option> | |
| <option value="verb">Verb</option> | |
| <option value="adjective">Adjective</option> | |
| <option value="adverb">Adverb</option> | |
| </select> | |
| </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-pink-500 hover:bg-pink-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500"> | |
| Generate Neologism | |
| </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-pink-300">Your New Word</h2> | |
| <div id="neologism-result" class="space-y-4"> | |
| <!-- Generated neologism will be inserted here --> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-gray-800 rounded-lg shadow-lg p-6"> | |
| <h2 class="text-2xl font-semibold mb-4 text-pink-300">Word Creation Techniques</h2> | |
| <ul class="list-disc list-inside space-y-2 text-purple-200"> | |
| <li>Blending: Combining parts of existing words</li> | |
| <li>Acronyms: Creating words from the initials of a phrase</li> | |
| <li>Onomatopoeia: Words that phonetically imitate sounds</li> | |
| <li>Back-formation: Creating a new word by removing affixes</li> | |
| <li>Eponyms: Words derived from people's names</li> | |
| </ul> | |
| </div> | |
| </main> | |
| <script> | |
| const neologismForm = document.getElementById('neologism-form'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const neologismResult = document.getElementById('neologism-result'); | |
| neologismForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const conceptInput = document.getElementById('concept-input').value.trim(); | |
| const wordType = document.getElementById('word-type').value; | |
| if (!conceptInput) { | |
| alert('Please provide a concept or idea to create a new word.'); | |
| return; | |
| } | |
| createNeologism(conceptInput, wordType); | |
| }); | |
| function createNeologism(concept, wordType) { | |
| // Show loading state | |
| resultContainer.classList.remove('hidden'); | |
| neologismResult.innerHTML = '<p class="text-purple-200">Forging your new word...</p>'; | |
| // Simulate API call with setTimeout | |
| setTimeout(() => { | |
| const neologismData = generateNeologism(concept, wordType); | |
| displayNeologismResult(neologismData); | |
| }, 2000); | |
| } | |
| function generateNeologism(concept, wordType) { | |
| // This is a simplified neologism generator. In a real application, this would use more sophisticated NLP and word generation techniques. | |
| const prefixes = ['zyth', 'neo', 'quan', 'flex', 'omni', 'cyber', 'xeno', 'meta']; | |
| const suffixes = ['tion', 'ism', 'ify', 'scape', 'wave', 'flux', 'sync', 'morph']; | |
| const roots = ['chron', 'lux', 'virt', 'cosm', 'psyche', 'tech', 'bio', 'eco']; | |
| const randomElement = (arr) => arr[Math.floor(Math.random() * arr.length)]; | |
| let newWord = ''; | |
| if (Math.random() < 0.5) { | |
| newWord = randomElement(prefixes) + randomElement(roots); | |
| } else { | |
| newWord = randomElement(roots) + randomElement(suffixes); | |
| } | |
| // Adjust the word based on the desired type | |
| switch(wordType) { | |
| case 'verb': | |
| newWord += 'ate'; | |
| break; | |
| case 'adjective': | |
| newWord += 'ic'; | |
| break; | |
| case 'adverb': | |
| newWord += 'ly'; | |
| break; | |
| // For nouns, we'll leave it as is | |
| } | |
| return { | |
| word: newWord, | |
| type: wordType, | |
| definition: `The state or act of ${concept.toLowerCase()}`, | |
| example: `After visiting the virtual reality museum, Sarah experienced intense ${newWord}.` | |
| }; | |
| } | |
| function displayNeologismResult(neologismData) { | |
| let neologismHTML = ` | |
| <div class="space-y-4"> | |
| <div class="text-center"> | |
| <h3 class="text-3xl font-bold text-pink-400 word-spin inline-block">${neologismData.word}</h3> | |
| <p class="text-sm text-purple-300">(${neologismData.type})</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-pink-300">Definition:</h4> | |
| <p class="text-purple-200">${neologismData.definition}</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-pink-300">Example usage:</h4> | |
| <p class="text-purple-200">"${neologismData.example}"</p> | |
| </div> | |
| </div> | |
| <p class="mt-6 text-sm text-purple-300">Remember, language is alive and evolving. Your new word could be the next addition to our collective vocabulary!</p> | |
| `; | |
| neologismResult.innerHTML = neologismHTML; | |
| } | |
| </script> | |
| </body></html> |