Spaces:
Running
Running
| <html><head><base href="https://websim.ai/idiom-illuminator"><title>Idiom Illuminator: Unveiling Language's Hidden Gems</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .float-animation { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-amber-900 to-orange-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-amber-300">Idiom Illuminator</h1> | |
| <p class="mt-2 text-center text-orange-200">Unveiling the Wisdom Behind Words</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold mb-4 text-amber-200">Explore an Idiom or Proverb</h2> | |
| <form id="idiom-form" method="GET" action="https://websim.ai/idiom-illuminator" class="space-y-4"> | |
| <div> | |
| <label for="idiom-input" class="block text-sm font-medium text-orange-200">Enter an idiom or proverb:</label> | |
| <input type="text" id="idiom-input" name="idiom" class="mt-1 block w-full px-3 py-2 bg-amber-800 border border-amber-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 text-white" placeholder="e.g., 'Break a leg', 'A penny for your thoughts'"> | |
| </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-amber-900 bg-amber-400 hover:bg-amber-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500"> | |
| Illuminate This Idiom | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="result-container" class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 hidden"> | |
| <h2 class="text-2xl font-semibold mb-4 text-amber-200">Idiom Insight</h2> | |
| <div id="idiom-result" class="space-y-4"> | |
| <!-- Idiom explanation will be inserted here --> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6"> | |
| <h2 class="text-2xl font-semibold mb-4 text-amber-200">Popular Idioms</h2> | |
| <ul class="list-disc list-inside space-y-2 text-orange-200"> | |
| <li>It's raining cats and dogs</li> | |
| <li>Beat around the bush</li> | |
| <li>The best of both worlds</li> | |
| <li>Bite off more than you can chew</li> | |
| <li>Break the ice</li> | |
| </ul> | |
| </div> | |
| </main> | |
| <div class="fixed bottom-4 right-4 w-24 h-24 float-animation"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full text-amber-300 opacity-50"> | |
| <path fill-rule="evenodd" d="M5.337 21.718a6.707 6.707 0 01-.533-.074.75.75 0 01-.44-1.223 3.73 3.73 0 00.814-1.686c.023-.115-.022-.317-.254-.543C3.274 16.587 2.25 14.41 2.25 12c0-5.03 4.428-9 9.75-9s9.75 3.97 9.75 9c0 5.03-4.428 9-9.75 9-.833 0-1.643-.097-2.417-.279a6.721 6.721 0 01-4.246.997z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <script> | |
| const idiomForm = document.getElementById('idiom-form'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const idiomResult = document.getElementById('idiom-result'); | |
| idiomForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const idiomInput = document.getElementById('idiom-input').value.trim(); | |
| if (!idiomInput) { | |
| alert('Please enter an idiom or proverb to explore.'); | |
| return; | |
| } | |
| illuminateIdiom(idiomInput); | |
| }); | |
| function illuminateIdiom(idiom) { | |
| // Show loading state | |
| resultContainer.classList.remove('hidden'); | |
| idiomResult.innerHTML = '<p class="text-orange-200">Delving into the depths of language...</p>'; | |
| // Simulate API call with setTimeout | |
| setTimeout(() => { | |
| const idiomData = explainIdiom(idiom); | |
| displayIdiomResult(idiomData); | |
| }, 1500); | |
| } | |
| function explainIdiom(idiom) { | |
| // This is a simplified idiom explanation. In a real application, this would use a comprehensive database or API. | |
| const idiomDatabase = { | |
| "break a leg": { | |
| meaning: "A way of wishing a performer 'good luck' in a performance or presentation.", | |
| origin: "This phrase is thought to have originated in the theater. Actors and musicians are often superstitious and believe that wishing someone 'good luck' is actually bad luck. 'Break a leg' is used as an ironic way to wish someone good luck without saying those words.", | |
| usage: "Often used in theater or before any kind of performance or audition.", | |
| example: "You're on in five minutes! Break a leg!" | |
| }, | |
| "a penny for your thoughts": { | |
| meaning: "A way of asking someone what they are thinking about.", | |
| origin: "This idiom dates back to the 16th century when a penny had much more value than it does today. It was first recorded in print in Sir Thomas More's 'A Treatyce upon the last thynges' in 1535.", | |
| usage: "Used when someone seems deep in thought or unusually quiet.", | |
| example: "You've been quiet all evening. A penny for your thoughts?" | |
| }, | |
| "it's raining cats and dogs": { | |
| meaning: "It's raining very heavily.", | |
| origin: "The origin is uncertain, but it may relate to Norse mythology, archaic architecture, or dead animals in the streets of old England. None of these theories is definitively proven.", | |
| usage: "Used to describe extremely heavy rainfall.", | |
| example: "Don't forget your umbrella. The weather forecast says it's going to be raining cats and dogs later." | |
| } | |
| }; | |
| // Default response if idiom is not found | |
| let idiomInfo = { | |
| idiom: idiom, | |
| meaning: "We're still researching this one. It's not in our current database.", | |
| origin: "Origins can be complex and often disputed. We don't have verified information on this idiom's origin.", | |
| usage: "Usage can vary. If you're familiar with this idiom, use it thoughtfully and consider the context.", | |
| example: "We don't have a specific example for this idiom. Can you think of how you've heard it used?" | |
| }; | |
| // Check if the idiom exists in our database (case-insensitive) | |
| const lowerCaseIdiom = idiom.toLowerCase(); | |
| if (idiomDatabase[lowerCaseIdiom]) { | |
| idiomInfo = { idiom: idiom, ...idiomDatabase[lowerCaseIdiom] }; | |
| } | |
| return idiomInfo; | |
| } | |
| function displayIdiomResult(idiomData) { | |
| let idiomHTML = ` | |
| <div class="space-y-4"> | |
| <h3 class="text-2xl font-bold text-amber-300">"${idiomData.idiom}"</h3> | |
| <div> | |
| <h4 class="text-lg font-semibold text-amber-200">Meaning:</h4> | |
| <p class="text-orange-200">${idiomData.meaning}</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-amber-200">Origin:</h4> | |
| <p class="text-orange-200">${idiomData.origin}</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-amber-200">Usage:</h4> | |
| <p class="text-orange-200">${idiomData.usage}</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-amber-200">Example:</h4> | |
| <p class="text-orange-200">"${idiomData.example}"</p> | |
| </div> | |
| </div> | |
| <p class="mt-6 text-sm text-orange-300">Remember, idioms can have various interpretations and origins. This explanation is based on common understandings and research.</p> | |
| `; | |
| idiomResult.innerHTML = idiomHTML; | |
| } | |
| </script> | |
| </body></html> |