- update page title and SEO with meta description tag

TobiasMue91 · TobiasMue91 · commit fc5ef4220ff2 · 2025-03-02T22:38:15.000+01:00
- rename UI elements from "OppositeFinder" to "Opposite Word Generator"
- add slider to control number of opposites (1-6)
- improve API prompt to specify language matching and exact count
- update footer text and help section content
- enhance share functionality with more descriptive text
diff --git a/tools/opposite_finder.html b/tools/opposite_finder.html
@@ -4,7 +4,8 @@
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔄</text></svg>">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OppositeFinder</title>
+    <meta name="description" content="Free online opposite word generator tool. Find antonyms and opposites for any word or phrase with our AI-powered opposite generator.">
+    <title>Opposite Word Generator | OppositeFinder</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/json5/2.2.3/index.min.js" integrity="sha512-44jdhc+R2TFfzBflS3/dGNEABiNUxBkkrqwO7GWTvGsj3HkQNr3GESvI9PUvAxmqxSnTosR0Ij9y3+o+6J1hig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script>tailwind.config = {darkMode: 'class',theme: {extend: {colors: {primary: {50: '#f0f9ff',100: '#e0f2fe',200: '#bae6fd',300: '#7dd3fc',400: '#38bdf8',500: '#0ea5e9',600: '#0284c7',700: '#0369a1',800: '#075985',900: '#0c4a6e',}}}}};</script>
@@ -26,7 +27,7 @@
     <div class="container mx-auto px-4 flex justify-between items-center">
         <div class="flex items-center gap-2">
             <span class="text-2xl">🔄</span>
-            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">OppositeFinder</h1>
+            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Opposite Word Generator</h1>
         </div>
         <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700" aria-label="Toggle theme">
             <svg id="dark-icon" class="w-5 h-5 text-gray-800 dark:hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
@@ -48,6 +49,18 @@ <h1 class="text-2xl font-bold text-gray-800 dark:text-white">OppositeFinder</h1>
             <div id="char-count" class="text-xs text-right mt-1 text-gray-500 dark:text-gray-400">0 characters</div>
         </div>
 
+        <div class="mb-4">
+            <div class="flex justify-between items-center mb-2">
+                <label for="count" class="text-sm font-medium text-gray-700 dark:text-gray-300">Number of Opposites:</label>
+                <span id="count-value" class="text-sm text-gray-600 dark:text-gray-400">2</span>
+            </div>
+            <input type="range" id="count" min="1" max="6" step="1" value="2" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600">
+            <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <span>Fewer</span>
+                <span>More</span>
+            </div>
+        </div>
+
         <div class="mb-6">
             <div class="flex justify-between items-center mb-2">
                 <label for="creativity" class="text-sm font-medium text-gray-700 dark:text-gray-300">Creativity Level:</label>
@@ -100,15 +113,16 @@ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Results:</h3>
 
             <div class="border-t dark:border-gray-700 pt-4">
                 <button id="help-toggle" class="flex justify-between items-center w-full py-2 text-left text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded transition-colors">
-                    <span>How to Use OppositeFinder</span>
+                    <span>How to Use This Opposite Generator</span>
                     <svg id="help-icon" class="h-5 w-5 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                 </button>
                 <div id="help-content" class="hidden mt-2">
                     <div class="bg-primary-50 dark:bg-gray-700 border-l-4 border-primary-500 p-4 rounded-r-lg">
-                        <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">OppositeFinder helps you discover opposites of words or phrases:</p>
+                        <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">This opposite word generator helps you discover antonyms and opposites:</p>
                         <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-2 ml-5 list-disc">
-                            <li>Enter text in the input field</li>
-                            <li>Adjust the "Creativity" slider (higher = more creative results)</li>
+                            <li>Enter a word or phrase in the input field</li>
+                            <li>Adjust the number of opposites (2-6)</li>
+                            <li>Set the "Creativity" slider (higher = more creative results)</li>
                             <li>Press "Find Opposite" or hit Enter</li>
                             <li>Click any result to copy it</li>
                             <li>Use history to revisit previous searches</li>
@@ -125,13 +139,14 @@ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Results:</h3>
 
 <footer class="py-3 bg-white dark:bg-gray-800 mt-auto">
     <div class="container mx-auto px-4 text-center text-sm text-gray-500 dark:text-gray-400">
-        OppositeFinder &copy; 2025 | Find opposites with AI
+        Opposite Word Generator &copy; 2025 | The best free opposite generator online
     </div>
 </footer>
 
 <script>
-    // DOM Elements
     const inputEl = document.getElementById('input');
+    const countSlider = document.getElementById('count');
+    const countValue = document.getElementById('count-value');
     const creativitySlider = document.getElementById('creativity');
     const creativityValue = document.getElementById('creativity-value');
     const findOppositeBtn = document.getElementById('find-opposite');
@@ -152,19 +167,21 @@ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Results:</h3>
     const helpContent = document.getElementById('help-content');
     const toastEl = document.getElementById('toast');
 
-    // State
     const MAX_HISTORY_ITEMS = 5;
     let searchHistory = JSON.parse(localStorage.getItem('oppositeFinder_history') || '[]');
     let currentResults = [];
 
-    // Initialize
     init();
 
     function init() {
-        // Event listeners
+        countSlider.addEventListener('input', () => {
+            countValue.textContent = countSlider.value;
+        });
+
         creativitySlider.addEventListener('input', () => {
             creativityValue.textContent = `${creativitySlider.value}%`;
         });
+
         findOppositeBtn.addEventListener('click', findOpposite);
         inputEl.addEventListener('input', updateCharCount);
         inputEl.addEventListener('keydown', e => {
@@ -181,13 +198,11 @@ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Results:</h3>
         historyToggleBtn.addEventListener('click', () => toggleSection(historyContent, historyIcon));
         helpToggleBtn.addEventListener('click', () => toggleSection(helpContent, helpIcon));
 
-        // Initialize
         updateCharCount();
         loadTheme();
         updateHistoryDisplay();
     }
 
-    // Theme handling
     function loadTheme() {
         const savedTheme = localStorage.getItem('oppositeFinder_theme') || 'light';
         if (savedTheme === 'dark') document.documentElement.classList.add('dark');
@@ -209,7 +224,6 @@ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Results:</h3>
         iconEl.style.transform = isHidden ? 'rotate(180deg)' : '';
     }
 
-    // History handling
     function addToHistory(query, opposites) {
         const historyItem = {
             query,
@@ -257,14 +271,12 @@ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Results:</h3>
         });
     }
 
-    // Notification system
     function showToast(message, duration = 3000) {
         toastEl.textContent = message;
         toastEl.classList.add('show');
         setTimeout(() => toastEl.classList.remove('show'), duration);
     }
 
-    // Copy functionality
     function copyToClipboard(text) {
         navigator.clipboard.writeText(text)
             .then(() => showToast(`Copied: "${text}"`))
@@ -279,14 +291,13 @@ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Results:</h3>
             .catch(() => showToast('Failed to copy text'));
     }
 
-    // Share functionality
     function shareResults() {
         if (currentResults.length === 0) return;
-        const shareText = `OppositeFinder results for "${inputEl.value}":\n${currentResults.join('\n')}`;
+        const shareText = `Opposite Word Generator results for "${inputEl.value}":\n${currentResults.join('\n')}`;
 
         if (navigator.share) {
             navigator.share({
-                title: 'OppositeFinder Results',
+                title: 'Opposite Generator Results',
                 text: shareText
             }).catch(() => fallbackShare(shareText));
         } else {
@@ -300,7 +311,6 @@ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Results:</h3>
             .catch(() => showToast('Failed to copy for sharing'));
     }
 
-    // Display results
     function displayOpposites(opposites) {
         resultEl.innerHTML = '';
         currentResults = opposites;
@@ -324,7 +334,6 @@ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Results:</h3>
         resultEl.appendChild(resultsGrid);
     }
 
-    // Main functionality
     async function findOpposite() {
         const inputText = inputEl.value.trim();
         if (!inputText) {
@@ -333,16 +342,16 @@ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Results:</h3>
             return;
         }
 
-        // Toggle states
         findOppositeBtn.disabled = true;
         findOppositeBtn.textContent = "Finding...";
         resultContainer.classList.remove('hidden');
         loadingEl.classList.remove('hidden');
 
+        const count = parseInt(countSlider.value);
         const creativity = creativitySlider.value / 100;
 
-        let botMessage = `I am currently functioning as the OppositeFinder API. I always strive to find the maximum possible amount of semantic opposites and will provide responses in this JSON format: {"opposites":["opposite1", "opposite2", ...]}`;
-        let userMessage = `Find opposites for: ${inputText}`;
+        let botMessage = `I am currently functioning as the OppositeFinder API. I will find exactly ${count} semantic opposites in the SAME LANGUAGE as the input text. I will provide responses in this JSON format: {"opposites":["opposite1", "opposite2", ...]}`;
+        let userMessage = `input text: \`\`\`${inputText}\`\`\``;
 
         try {
             const response = await fetch('https://chatgpt.tobiasmue91.workers.dev/', {
