word-meaning-plugin 1.0.0

package/README.md

@@ -0,0 +1,164 @@
+# 📚 Word Meaning Plugin
+
+A lightweight JavaScript plugin that adds instant word meaning functionality to any website. Simply select any word and see its definition, translation, and example sentence in a beautiful popup.
+
+## ✨ Features
+
+- **Instant Meanings**: Select any word to see its meaning immediately
+- **Bilingual Support**: English definitions with Hindi translations
+- **Context-Aware**: Provides meanings based on surrounding text context
+- **Text-to-Speech**: Listen to pronunciations in English and Hindi
+- **Beautiful Design**: Modern, responsive popup with smooth animations
+- **Zero Configuration**: Works out of the box with no setup required
+- **Mobile Friendly**: Fully responsive design for all devices
+- **Lightweight**: Small file size with minimal impact on page load
+
+## 🚀 Quick Start
+
+### Method 1: Simple Installation (Recommended)
+
+Just add these two lines to your HTML file:
+
+```html
+<!-- Add this to your HTML head -->
+<link rel="stylesheet" href="word-meaning-plugin.css">
+
+<!-- Add this before the closing </body> tag -->
+<script src="word-meaning-plugin.js"></script>
+```
+
+### Method 2: JavaScript Only
+
+If you prefer, you can add only the JavaScript file and it will automatically load the CSS:
+
+```html
+<script src="word-meaning-plugin.js"></script>
+```
+
+### Method 3: CDN Installation (Coming Soon)
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/word-meaning-plugin@1.0/word-meaning-plugin.css">
+<script src="https://cdn.jsdelivr.net/npm/word-meaning-plugin@1.0/word-meaning-plugin.js"></script>
+```
+
+## 📖 Usage
+
+Once installed, the plugin works automatically:
+
+1. **Select any word** on your website by double-clicking or dragging
+2. **See the popup** appear with English meaning, Hindi translation, and example
+3. **Click the speaker icons** to hear pronunciations
+4. **Click anywhere else** to close the popup
+
+## 🔧 Advanced Configuration
+
+You can access the plugin's public API through `window.wordMeaningPlugin`:
+
+```javascript
+// Update API key (if you want to use your own)
+window.wordMeaningPlugin.config.apiKey = 'your-huggingface-api-key';
+
+// Manually hide the popup
+window.wordMeaningPlugin.hidePopup();
+
+// Use text-to-speech programmatically
+window.wordMeaningPlugin.speakText('Hello world', 'en'); // English
+window.wordMeaningPlugin.speakText('नमस्ते दुनिया', 'hi'); // Hindi
+```
+
+## 🎨 Customization
+
+The plugin uses separate CSS for easy styling. You can override these styles:
+
+```css
+/* Custom popup colors */
+#word-meaning-popup {
+    background: your-custom-gradient;
+    border: your-custom-border;
+}
+
+/* Custom button styles */
+#word-meaning-popup button {
+    background: your-button-color;
+    border-radius: your-border-radius;
+}
+
+/* Custom typography */
+#word-meaning-popup strong {
+    color: your-accent-color;
+    font-size: your-font-size;
+}
+```
+
+### CSS Features
+
+- **Responsive Design**: Mobile-optimized styles
+- **Dark Theme**: Automatic dark mode support
+- **Accessibility**: High contrast and reduced motion support
+- **Performance**: CSS animations for smooth interactions
+
+## 🌐 Browser Support
+
+- Chrome 60+
+- Firefox 55+
+- Safari 11+
+- Edge 79+
+
+## 📋 Requirements
+
+- Modern web browser with JavaScript enabled
+- Internet connection for API calls
+- (Optional) HuggingFace API key for custom configuration
+
+## 🔒 API Usage
+
+The plugin uses HuggingFace's API for word meanings. The default API key has usage limits. For production use, get your free API key from [HuggingFace](https://huggingface.co/) and update it:
+
+```javascript
+window.wordMeaningPlugin.config.apiKey = 'your-api-key-here';
+```
+
+## 📁 File Structure
+
+```
+word-meaning-plugin/
+├── word-meaning-plugin.js    # Main plugin file
+├── word-meaning-plugin.css   # Plugin styles
+├── demo.html                 # Basic demo
+├── demo-with-css.html        # CSS version demo
+├── cdn-example.html          # CDN usage example
+├── README.md                 # Documentation
+└── disnorty/                 # Original project files
+    ├── index.html
+    ├── script.js
+    └── style.css
+```
+
+## 🎯 Demo
+
+Check out the live demos:
+- `demo.html` - Basic demo with auto-loaded CSS
+- `demo-with-css.html` - Demo with manually loaded CSS
+- `cdn-example.html` - CDN usage example (when CDN is available)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📄 License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## 🙏 Acknowledgments
+
+- HuggingFace for providing the AI API
+- All contributors and users of this plugin
+
+## 📞 Support
+
+If you encounter any issues or have questions, please open an issue on the GitHub repository.
+
+---
+
+**Made with ❤️ for making web content more accessible and educational**

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "word-meaning-plugin",
+  "version": "1.0.0",
+  "description": "A simple word meaning plugin",
+  "license": "ISC",
+  "author": "Adi",
+  "type": "commonjs",
+  "keywords": [
+    "dictionary",
+    "word meaning",
+    "plugin",
+    "tooltip"
+  ],
+  "main": "word-meaning-plugin.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/word-meaning-plugin.css

@@ -0,0 +1,211 @@
+/*!
+ * Word Meaning Plugin CSS v1.0
+ * Styles for the word meaning dictionary popup
+ * Author: Your Name
+ * License: MIT
+ */
+
+/* Main popup container */
+#word-meaning-popup {
+    display: none;
+    position: absolute;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    color: #fff;
+    padding: 16px 20px;
+    border-radius: 12px;
+    max-width: 320px;
+    font-size: 14px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2),
+                0 5px 10px rgba(0, 0, 0, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    z-index: 10000;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    opacity: 0;
+    transform: translateY(10px);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    line-height: 1.6;
+}
+
+/* Popup show state */
+#word-meaning-popup.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Popup arrow */
+#word-meaning-popup::after {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid #1a1a2e;
+}
+
+/* Word title */
+#word-meaning-popup strong {
+    color: #4fc3f7;
+    font-size: 18px;
+    margin-bottom: 8px;
+    display: block;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding-bottom: 6px;
+}
+
+/* Section containers */
+#word-meaning-popup > div {
+    margin-top: 8px;
+    display: flex;
+    align-items: start;
+    gap: 10px;
+}
+
+/* Labels */
+#word-meaning-popup b {
+    color: #fff;
+    font-weight: 600;
+}
+
+/* Content areas */
+#word-meaning-popup > div > div:first-child {
+    flex: 1;
+}
+
+/* Example section */
+#word-meaning-popup > div[style*="italic"] {
+    font-style: italic;
+    color: #ccc;
+}
+
+/* Speaker buttons */
+#word-meaning-popup button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    color: #fff;
+    font-size: 14px;
+    transition: background-color 0.2s ease;
+}
+
+#word-meaning-popup button:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+#word-meaning-popup button:active {
+    transform: scale(0.95);
+}
+
+/* Responsive design */
+@media (max-width: 480px) {
+    #word-meaning-popup {
+        max-width: 280px;
+        font-size: 13px;
+        padding: 12px 16px;
+    }
+    
+    #word-meaning-popup strong {
+        font-size: 16px;
+    }
+    
+    #word-meaning-popup button {
+        font-size: 12px;
+        padding: 3px;
+    }
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+    #word-meaning-popup {
+        background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+    }
+    
+    #word-meaning-popup::after {
+        border-bottom-color: #0f0f23;
+    }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    #word-meaning-popup {
+        border: 2px solid #fff;
+        background: #000;
+    }
+    
+    #word-meaning-popup::after {
+        border-bottom-color: #000;
+    }
+    
+    #word-meaning-popup strong {
+        color: #fff;
+        border-bottom-color: #fff;
+    }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    #word-meaning-popup {
+        transition: none;
+    }
+    
+    #word-meaning-popup button {
+        transition: none;
+    }
+}
+
+/* Loading state */
+#word-meaning-popup.loading {
+    pointer-events: none;
+}
+
+#word-meaning-popup.loading::after {
+    content: '';
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top: 2px solid #4fc3f7;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Error state */
+#word-meaning-popup.error {
+    background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%);
+}
+
+#word-meaning-popup.error::after {
+    border-bottom-color: #c62828;
+}
+
+/* Custom scrollbar for popup content */
+#word-meaning-popup::-webkit-scrollbar {
+    width: 6px;
+}
+
+#word-meaning-popup::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+}
+
+#word-meaning-popup::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+}
+
+#word-meaning-popup::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+}

package/word-meaning-plugin.js

@@ -0,0 +1,319 @@
+/*!
+ * Word Meaning Plugin v1.0
+ * Easy word meaning dictionary for any website
+ * Just add this script and select any word to see its meaning
+ * Author: Your Name
+ * License: MIT
+ */
+
+(function() {
+    'use strict';
+    
+    // Plugin configuration
+    const config = {
+        apiKey: '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', // You can make this configurable
+        apiUrl: 'https://router.huggingface.co/v1/chat/completions',
+        model: 'moonshotai/Kimi-K2-Instruct-0905',
+        popupWidth: 320,
+        popupHeight: 150,
+        animationDuration: 300
+    };
+    
+    // Create popup element
+    let popup = null;
+    let isLoading = false;
+    let cssLoaded = false;
+    
+    // Initialize plugin
+    function init() {
+        loadCSS();
+        createPopup();
+        addEventListeners();
+        console.log('Word Meaning Plugin initialized');
+    }
+    
+    // Load CSS file
+    function loadCSS() {
+        if (cssLoaded) return;
+        
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.href = getCSSPath();
+        document.head.appendChild(link);
+        cssLoaded = true;
+    }
+    
+    // Get CSS file path
+    function getCSSPath() {
+        // Try to detect the plugin's script path and use same directory for CSS
+        const scripts = document.getElementsByTagName('script');
+        for (let i = scripts.length - 1; i >= 0; i--) {
+            const script = scripts[i];
+            if (script.src && script.src.includes('word-meaning-plugin.js')) {
+                return script.src.replace('word-meaning-plugin.js', 'word-meaning-plugin.css');
+            }
+        }
+        // Fallback to same directory
+        return 'word-meaning-plugin.css';
+    }
+    
+    // Create popup element
+    function createPopup() {
+        popup = document.createElement('div');
+        popup.id = 'word-meaning-popup';
+        document.body.appendChild(popup);
+    }
+    
+    // Add event listeners
+    function addEventListeners() {
+        // Handle text selection
+        document.addEventListener('mouseup', handleTextSelection);
+        
+        // Close popup when clicking outside
+        document.addEventListener('mousedown', function(event) {
+            if (popup.style.display === 'block' && !popup.contains(event.target)) {
+                hidePopup();
+            }
+        });
+        
+        // Handle window resize
+        window.addEventListener('resize', hidePopup);
+    }
+    
+    // Handle text selection
+    function handleTextSelection(event) {
+        const selection = window.getSelection();
+        const word = selection.toString().trim();
+        
+        // Don't show popup for empty selection or multiple words
+        if (word.length === 0 || word.includes(' ') || isLoading) return;
+        
+        // Don't show if clicking on input fields or buttons
+        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA' || event.target.tagName === 'BUTTON') return;
+        
+        // Get context for better meaning
+        const range = selection.getRangeAt(0);
+        const container = range.startContainer;
+        const textContent = container.textContent || container.innerText;
+        const startOffset = range.startOffset;
+        const endOffset = range.endOffset;
+        
+        const contextStart = Math.max(0, startOffset - 50);
+        const contextEnd = Math.min(textContent.length, endOffset + 50);
+        const context = textContent.substring(contextStart, contextEnd).trim();
+        
+        // Position popup
+        const position = calculatePopupPosition(event.pageX, event.pageY);
+        
+        // Show loading state
+        showPopup(word, 'Loading definition...', '', '', position);
+        
+        // Fetch meaning
+        fetchWordMeaning(word, context, position);
+    }
+    
+    // Calculate popup position to keep it within viewport
+    function calculatePopupPosition(x, y) {
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        
+        let finalX = x + 10;
+        let finalY = y + 10;
+        
+        // Check if popup would go off screen horizontally
+        if (finalX + config.popupWidth > viewportWidth) {
+            finalX = viewportWidth - config.popupWidth - 20;
+        }
+        
+        // Check if popup would go off screen vertically
+        if (finalY + config.popupHeight > viewportHeight) {
+            finalY = y - config.popupHeight - 20;
+            popup.style.transformOrigin = 'center bottom';
+        } else {
+            popup.style.transformOrigin = 'center top';
+        }
+        
+        return { x: finalX, y: finalY };
+    }
+    
+    // Fetch word meaning from API
+    function fetchWordMeaning(word, context, position) {
+        isLoading = true;
+        
+        fetch(config.apiUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${config.apiKey}`
+            },
+            body: JSON.stringify({
+                model: config.model,
+                messages: [
+                    {
+                        role: 'system',
+                        content: `You are a context-aware dictionary. Given a word and its surrounding context, provide the most relevant meaning for that specific context.
+
+Context: "${context}"
+Word: "${word}"
+
+Provide the response in this exact format:
+English: [context-appropriate meaning]
+Hindi: [Hindi translation]
+Example: [example sentence using the word in this context]`
+                    },
+                    {
+                        role: 'user',
+                        content: `What is the meaning of "${word}" in the context: "${context}"?`
+                    }
+                ],
+                max_tokens: 150,
+                temperature: 0.3
+            })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (!data.choices || !data.choices[0] || !data.choices[0].message) {
+                throw new Error('Invalid API response');
+            }
+            
+            const response = data.choices[0].message.content.trim();
+            const parsed = parseResponse(response);
+            
+            showPopup(word, parsed.enMeaning, parsed.hiMeaning, parsed.example, position);
+        })
+        .catch(error => {
+            console.error('Error fetching word meaning:', error);
+            showPopup(word, 'Meaning not found', 'मतलब नहीं मिला', 'No example available.', position);
+        })
+        .finally(() => {
+            isLoading = false;
+        });
+    }
+    
+    // Parse API response
+    function parseResponse(response) {
+        const lines = response.split('\n');
+        let enMeaning = 'Meaning not found';
+        let hiMeaning = 'अनुवाद उपलब्ध नहीं';
+        let example = 'No example available';
+        
+        lines.forEach(line => {
+            if (line.toLowerCase().includes('english') || line.toLowerCase().includes('meaning')) {
+                enMeaning = line.replace(/english:|meaning:/gi, '').trim();
+            } else if (line.toLowerCase().includes('hindi') || line.toLowerCase().includes('translation')) {
+                hiMeaning = line.replace(/hindi:|translation:/gi, '').trim();
+            } else if (line.toLowerCase().includes('example')) {
+                example = line.replace(/example:/gi, '').trim();
+            }
+        });
+        
+        return { enMeaning, hiMeaning, example };
+    }
+    
+    // Show popup with content
+    function showPopup(word, enMeaning, hiMeaning, example, position) {
+        popup.innerHTML = `
+            <strong style="color: #4fc3f7; font-size: 18px; margin-bottom: 8px; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 6px;">${word}</strong>
+            
+            <div style="margin-top:8px; display: flex; align-items: start; gap: 10px;">
+                <div style="flex: 1;">
+                    <b>English:</b><br>${enMeaning}
+                </div>
+                <button onclick="event.stopPropagation(); window.wordMeaningPlugin.speakText('${enMeaning.replace(/'/g, "\\'")}', 'en')" 
+                        style="background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px;" 
+                        title="Speak English">
+                    🔊
+                </button>
+            </div>
+            
+            <div style="margin-top:8px; display: flex; align-items: start; gap: 10px;">
+                <div style="flex: 1;">
+                    <b>Hindi:</b><br>${hiMeaning}
+                </div>
+                <button onclick="event.stopPropagation(); window.wordMeaningPlugin.speakText('${hiMeaning.replace(/'/g, "\\'")}', 'hi')" 
+                        style="background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px;" 
+                        title="Speak Hindi">
+                    🔊
+                </button>
+            </div>
+            
+            <div style="margin-top:8px; font-style:italic; color:#ccc; display: flex; align-items: start; gap: 10px;">
+                <div style="flex: 1;">
+                    <b>Example:</b><br>${example}
+                </div>
+                <button onclick="event.stopPropagation(); window.wordMeaningPlugin.speakText('${example.replace(/'/g, "\\'")}', 'en')" 
+                        style="background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px;" 
+                        title="Speak Example">
+                    🔊
+                </button>
+            </div>
+        `;
+        
+        popup.style.left = position.x + 'px';
+        popup.style.top = position.y + 'px';
+        popup.style.display = 'block';
+        
+        // Trigger animation
+        setTimeout(() => {
+            popup.style.opacity = '1';
+            popup.style.transform = 'translateY(0)';
+        }, 10);
+    }
+    
+    // Hide popup
+    function hidePopup() {
+        popup.style.opacity = '0';
+        popup.style.transform = 'translateY(10px)';
+        setTimeout(() => {
+            popup.style.display = 'none';
+        }, config.animationDuration);
+    }
+    
+    // Text-to-speech function
+    function speakText(text, lang) {
+        if (!window.speechSynthesis) return;
+        
+        window.speechSynthesis.cancel();
+        
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.lang = lang;
+        utterance.rate = 0.9;
+        utterance.pitch = 1;
+        utterance.volume = 1;
+        
+        const voices = window.speechSynthesis.getVoices();
+        if (lang === 'hi') {
+            const hindiVoice = voices.find(voice => voice.lang.includes('hi') || voice.lang.includes('hin'));
+            if (hindiVoice) utterance.voice = hindiVoice;
+        } else {
+            const englishVoice = voices.find(voice => voice.lang.includes('en') || voice.lang.includes('en-US'));
+            if (englishVoice) utterance.voice = englishVoice;
+        }
+        
+        window.speechSynthesis.speak(utterance);
+    }
+    
+    // Load voices when available
+    if (window.speechSynthesis) {
+        window.speechSynthesis.onvoiceschanged = function() {
+            window.speechSynthesis.getVoices();
+        };
+    }
+    
+    // Public API
+    window.wordMeaningPlugin = {
+        init: init,
+        speakText: speakText,
+        hidePopup: hidePopup,
+        config: config
+    };
+    
+    // Auto-initialize when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+    
+})();