Spaces:
Running
Running
File size: 7,950 Bytes
ad1dcd6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
<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> |