| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>LexiFind Pro - Advanced Synonym Finder</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); |
| |
| :root { |
| --primary: #7c3aed; |
| --primary-light: #8b5cf6; |
| --primary-dark: #6d28d9; |
| --secondary: #ec4899; |
| --accent: #f59e0b; |
| --bg-light: #f8fafc; |
| --bg-dark: #0f172a; |
| --surface-light: #ffffff; |
| --surface-dark: #1e293b; |
| --text-light: #334155; |
| --text-dark: #e2e8f0; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: var(--bg-light); |
| color: var(--text-light); |
| transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); |
| scroll-behavior: smooth; |
| overflow-x: hidden; |
| } |
| |
| .dark body { |
| background-color: var(--bg-dark); |
| color: var(--text-dark); |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| } |
| |
| .gradient-text { |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .card { |
| background: var(--surface-light); |
| border-radius: 1rem; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); |
| transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); |
| transform-origin: center; |
| border: 1px solid rgba(0, 0, 0, 0.05); |
| } |
| |
| .dark .card { |
| background: var(--surface-dark); |
| border-color: rgba(255, 255, 255, 0.05); |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-6px) scale(1.02); |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); |
| border-color: rgba(139, 92, 246, 0.2); |
| } |
| |
| .dark .card-hover:hover { |
| border-color: rgba(167, 139, 250, 0.3); |
| } |
| |
| .search-box { |
| box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.2), 0 4px 6px -4px rgba(139, 92, 246, 0.2); |
| } |
| |
| .input-glow:focus { |
| box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.4); |
| } |
| |
| .btn-glow:hover { |
| box-shadow: 0 0 20px rgba(167, 139, 250, 0.6); |
| } |
| |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0) rotate(0deg); } |
| 50% { transform: translateY(-12px) rotate(2deg); } |
| } |
| |
| .floating { |
| animation: float 8s ease-in-out infinite; |
| } |
| |
| |
| @keyframes wave { |
| 0%, 100% { transform: rotate(0deg); } |
| 25% { transform: rotate(3deg); } |
| 75% { transform: rotate(-3deg); } |
| } |
| |
| .wave { |
| animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; |
| transform-origin: center; |
| } |
| |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; transform: scale(1); } |
| 50% { opacity: 0.8; transform: scale(1.02); } |
| } |
| |
| .pulse { |
| animation: pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .fade-in { |
| opacity: 0; |
| transform: translateY(20px); |
| animation: fadeIn 0.6s ease-out forwards; |
| } |
| |
| |
| @keyframes bounce { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-10px); } |
| } |
| |
| .bounce { |
| animation: bounce 1.5s infinite; |
| } |
| |
| |
| @keyframes rotate { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
| |
| .rotate { |
| animation: rotate 20s linear infinite; |
| } |
| |
| |
| .bg-grid { |
| background-image: |
| radial-gradient(circle at 10px 10px, rgba(139, 92, 246, 0.08) 1px, transparent 0), |
| radial-gradient(circle at 10px 10px, rgba(139, 92, 246, 0.08) 1px, transparent 0); |
| background-size: 40px 40px; |
| } |
| |
| .dark .bg-grid { |
| background-image: |
| radial-gradient(circle at 10px 10px, rgba(167, 139, 250, 0.08) 1px, transparent 0), |
| radial-gradient(circle at 10px 10px, rgba(167, 139, 250, 0.08) 1px, transparent 0); |
| } |
| |
| |
| .gradient-border { |
| position: relative; |
| border-radius: 1rem; |
| } |
| |
| .gradient-border::before { |
| content: ''; |
| position: absolute; |
| top: -2px; |
| left: -2px; |
| right: -2px; |
| bottom: -2px; |
| z-index: -1; |
| border-radius: 1rem; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| background-size: 200% 200%; |
| animation: gradientBG 6s ease infinite; |
| } |
| |
| @keyframes gradientBG { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: rgba(0, 0, 0, 0.05); |
| } |
| |
| .dark ::-webkit-scrollbar-track { |
| background: rgba(255, 255, 255, 0.05); |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: rgba(139, 92, 246, 0.5); |
| border-radius: 4px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: rgba(139, 92, 246, 0.7); |
| } |
| |
| |
| .underline-animation { |
| position: relative; |
| } |
| |
| .underline-animation::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: -2px; |
| left: 0; |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| transition: width 0.3s ease; |
| } |
| |
| .underline-animation:hover::after { |
| width: 100%; |
| } |
| |
| |
| .shine { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .shine::after { |
| content: ''; |
| position: absolute; |
| top: -50%; |
| left: -60%; |
| width: 20%; |
| height: 200%; |
| background: rgba(255, 255, 255, 0.2); |
| transform: rotate(30deg); |
| transition: all 0.6s ease; |
| } |
| |
| .shine:hover::after { |
| left: 120%; |
| } |
| |
| .dark .shine::after { |
| background: rgba(255, 255, 255, 0.1); |
| } |
| |
| |
| @keyframes dot-flashing { |
| 0% { opacity: 0.2; transform: scale(0.8); } |
| 50% { opacity: 1; transform: scale(1.2); } |
| 100% { opacity: 0.2; transform: scale(0.8); } |
| } |
| |
| .dot-flashing { |
| animation: dot-flashing 1.5s infinite ease-in-out; |
| } |
| |
| .dot-flashing:nth-child(2) { |
| animation-delay: 0.3s; |
| } |
| |
| .dot-flashing:nth-child(3) { |
| animation-delay: 0.6s; |
| } |
| |
| |
| @keyframes morph { |
| 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } |
| 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } |
| } |
| |
| .morph { |
| animation: morph 8s ease-in-out infinite; |
| } |
| |
| |
| @keyframes typing { |
| from { width: 0 } |
| to { width: 100% } |
| } |
| |
| @keyframes blink-caret { |
| from, to { border-color: transparent } |
| 50% { border-color: var(--primary) } |
| } |
| |
| .typing-effect { |
| overflow: hidden; |
| white-space: nowrap; |
| border-right: 3px solid var(--primary); |
| animation: |
| typing 3.5s steps(40, end), |
| blink-caret 0.75s step-end infinite; |
| } |
| |
| |
| .glass { |
| background: rgba(255, 255, 255, 0.15); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| } |
| |
| .dark .glass { |
| background: rgba(15, 23, 42, 0.5); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| |
| .theme-transition * { |
| transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), |
| color 0.5s cubic-bezier(0.4, 0, 0.2, 1), |
| border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| |
| .neon-glow { |
| box-shadow: 0 0 10px rgba(139, 92, 246, 0.5), |
| 0 0 20px rgba(139, 92, 246, 0.3), |
| 0 0 30px rgba(139, 92, 246, 0.1); |
| } |
| |
| .neon-glow:hover { |
| box-shadow: 0 0 15px rgba(139, 92, 246, 0.7), |
| 0 0 25px rgba(139, 92, 246, 0.5), |
| 0 0 35px rgba(139, 92, 246, 0.2); |
| } |
| |
| |
| .gradient-shadow { |
| position: relative; |
| } |
| |
| .gradient-shadow::after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 5%; |
| width: 90%; |
| height: 20px; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| filter: blur(15px); |
| opacity: 0.7; |
| z-index: -1; |
| transition: all 0.3s ease; |
| } |
| |
| .gradient-shadow:hover::after { |
| opacity: 0.9; |
| bottom: -15px; |
| filter: blur(20px); |
| } |
| |
| |
| .particle { |
| position: absolute; |
| border-radius: 50%; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| opacity: 0.3; |
| filter: blur(1px); |
| animation: float-particle 15s infinite linear; |
| } |
| |
| @keyframes float-particle { |
| 0% { transform: translate(0, 0) rotate(0deg); } |
| 25% { transform: translate(50px, -50px) rotate(90deg); } |
| 50% { transform: translate(100px, 0) rotate(180deg); } |
| 75% { transform: translate(50px, 50px) rotate(270deg); } |
| 100% { transform: translate(0, 0) rotate(360deg); } |
| } |
| |
| |
| .card-3d { |
| transform-style: preserve-3d; |
| perspective: 1000px; |
| } |
| |
| .card-3d:hover { |
| transform: rotateY(10deg) rotateX(5deg) translateY(-5px); |
| } |
| |
| |
| .gradient-underline { |
| position: relative; |
| } |
| |
| .gradient-underline::after { |
| content: ''; |
| position: absolute; |
| width: 100%; |
| height: 3px; |
| bottom: -5px; |
| left: 0; |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| border-radius: 3px; |
| } |
| |
| |
| .advanced-input { |
| transition: all 0.3s ease; |
| background: var(--surface-light); |
| border: 2px solid rgba(0, 0, 0, 0.1); |
| } |
| |
| .dark .advanced-input { |
| background: var(--surface-dark); |
| border-color: rgba(255, 255, 255, 0.1); |
| } |
| |
| .advanced-input:focus { |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); |
| } |
| |
| |
| .floating-label { |
| position: relative; |
| } |
| |
| .floating-label input:focus ~ label, |
| .floating-label input:not(:placeholder-shown) ~ label { |
| transform: translateY(-1.5rem) scale(0.85); |
| background: var(--surface-light); |
| padding: 0 0.5rem; |
| left: 0.75rem; |
| color: var(--primary); |
| } |
| |
| .dark .floating-label input:focus ~ label, |
| .dark .floating-label input:not(:placeholder-shown) ~ label { |
| background: var(--surface-dark); |
| } |
| |
| |
| .toggle-switch { |
| position: relative; |
| display: inline-block; |
| width: 60px; |
| height: 34px; |
| } |
| |
| .toggle-switch input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
| |
| .toggle-slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: #ccc; |
| transition: .4s; |
| border-radius: 34px; |
| } |
| |
| .toggle-slider:before { |
| position: absolute; |
| content: ""; |
| height: 26px; |
| width: 26px; |
| left: 4px; |
| bottom: 4px; |
| background-color: white; |
| transition: .4s; |
| border-radius: 50%; |
| } |
| |
| input:checked + .toggle-slider { |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| } |
| |
| input:checked + .toggle-slider:before { |
| transform: translateX(26px); |
| } |
| |
| |
| .btn-advanced { |
| position: relative; |
| overflow: hidden; |
| transition: all 0.3s ease; |
| transform: translateZ(0); |
| } |
| |
| .btn-advanced::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); |
| transform: translateX(-100%); |
| transition: transform 0.6s ease; |
| } |
| |
| .btn-advanced:hover::before { |
| transform: translateX(100%); |
| } |
| |
| |
| .word-highlight { |
| position: relative; |
| z-index: 1; |
| } |
| |
| .word-highlight::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| height: 30%; |
| background: rgba(236, 72, 153, 0.2); |
| z-index: -1; |
| transition: all 0.3s ease; |
| border-radius: 2px; |
| } |
| |
| .word-highlight:hover::after { |
| height: 100%; |
| background: rgba(236, 72, 153, 0.3); |
| } |
| |
| |
| .tooltip { |
| position: relative; |
| } |
| |
| .tooltip .tooltip-text { |
| visibility: hidden; |
| width: 120px; |
| background-color: var(--surface-dark); |
| color: var(--text-dark); |
| text-align: center; |
| border-radius: 6px; |
| padding: 5px; |
| position: absolute; |
| z-index: 1; |
| bottom: 125%; |
| left: 50%; |
| transform: translateX(-50%); |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| |
| .tooltip .tooltip-text::after { |
| content: ""; |
| position: absolute; |
| top: 100%; |
| left: 50%; |
| margin-left: -5px; |
| border-width: 5px; |
| border-style: solid; |
| border-color: var(--surface-dark) transparent transparent transparent; |
| } |
| |
| .tooltip:hover .tooltip-text { |
| visibility: visible; |
| opacity: 1; |
| } |
| |
| |
| .progress-bar { |
| position: relative; |
| height: 4px; |
| width: 100%; |
| background: rgba(0, 0, 0, 0.1); |
| border-radius: 2px; |
| overflow: hidden; |
| } |
| |
| .progress-bar::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| height: 100%; |
| width: 100%; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| animation: progress 2s ease-in-out infinite; |
| background-size: 200% 100%; |
| } |
| |
| @keyframes progress { |
| 0% { transform: translateX(-100%); } |
| 100% { transform: translateX(100%); } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex flex-col bg-grid dark:bg-slate-900 theme-transition"> |
| |
| <div class="fixed inset-0 overflow-hidden pointer-events-none z-0"> |
| <div class="particle w-3 h-3" style="top:20%; left:10%; animation-delay:0s;"></div> |
| <div class="particle w-4 h-4" style="top:70%; left:80%; animation-delay:2s;"></div> |
| <div class="particle w-2 h-2" style="top:40%; left:30%; animation-delay:4s;"></div> |
| <div class="particle w-5 h-5" style="top:60%; left:50%; animation-delay:6s;"></div> |
| <div class="particle w-3 h-3" style="top:30%; left:70%; animation-delay:8s;"></div> |
| <div class="particle w-4 h-4" style="top:80%; left:20%; animation-delay:10s;"></div> |
| </div> |
| |
| |
| <div class="fixed inset-0 overflow-hidden pointer-events-none z-0"> |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-indigo-100 blur-3xl opacity-20 dark:bg-indigo-900/50 dark:opacity-30 floating"></div> |
| <div class="absolute bottom-1/3 right-1/3 w-72 h-72 rounded-full bg-pink-100 blur-3xl opacity-20 dark:bg-pink-900/50 dark:opacity-30 floating" style="animation-delay: 1s;"></div> |
| <div class="absolute top-2/3 left-2/5 w-48 h-48 rounded-full bg-amber-100 blur-3xl opacity-20 dark:bg-amber-900/50 dark:opacity-30 floating" style="animation-delay: 2s;"></div> |
| </div> |
| |
| |
| <header class="gradient-bg text-white shadow-lg relative overflow-hidden"> |
| <div class="absolute inset-0 opacity-10"> |
| <div class="absolute top-0 left-1/4 w-32 h-32 rounded-full bg-white blur-3xl"></div> |
| <div class="absolute bottom-0 right-1/3 w-48 h-48 rounded-full bg-indigo-300 blur-3xl"></div> |
| </div> |
| <div class="container mx-auto px-4 py-8 relative z-10"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center backdrop-blur-sm shine"> |
| <i class="fas fa-book-open text-xl text-white"></i> |
| </div> |
| <h1 class="text-2xl font-bold">Lexi<span class="font-light">Find</span> <span class="text-xs bg-white/20 px-2 py-1 rounded-full ml-2">PRO</span></h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm hidden md:inline">Light</span> |
| <label class="toggle-switch"> |
| <input type="checkbox" id="theme-toggle"> |
| <span class="toggle-slider"></span> |
| </label> |
| <span class="text-sm hidden md:inline">Dark</span> |
| </div> |
| <button class="px-4 py-2 bg-white/10 rounded-lg hover:bg-white/20 transition-colors flex items-center gap-2 shine"> |
| <i class="fas fa-user"></i> |
| <span class="hidden md:inline">Sign In</span> |
| </button> |
| </div> |
| </div> |
| <div class="mt-12 mb-16 text-center max-w-3xl mx-auto"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 fade-in" style="animation-delay: 0.1s;">Discover the <span class="gradient-text">perfect words</span></h2> |
| <p class="text-xl opacity-90 mb-8 fade-in" style="animation-delay: 0.2s;">Enhance your vocabulary with our AI-powered lexical discovery tool</p> |
| |
| |
| <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl search-box p-1 max-w-2xl mx-auto fade-in neon-glow" style="animation-delay: 0.3s;"> |
| <div class="flex flex-col md:flex-row gap-1"> |
| <div class="relative flex-grow floating-label"> |
| <input |
| type="text" |
| id="word-input" |
| placeholder=" " |
| class="w-full px-5 py-4 rounded-xl border-0 focus:ring-2 focus:ring-indigo-500 dark:bg-slate-800 dark:text-white input-glow advanced-input" |
| autocomplete="off" |
| autofocus |
| > |
| <label class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none transition-all duration-200">Try 'happy', 'beautiful', or 'run'...</label> |
| <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"> |
| <i class="fas fa-keyboard"></i> |
| </div> |
| </div> |
| <button |
| id="search-btn" |
| class="px-6 py-4 bg-gradient-to-r from-indigo-600 to-indigo-400 text-white font-medium rounded-xl hover:from-indigo-700 hover:to-indigo-500 transition-all flex items-center justify-center gap-2 btn-glow shine btn-advanced" |
| > |
| <i class="fas fa-search"></i> |
| <span class="hidden md:inline">Find Synonyms</span> |
| </button> |
| </div> |
| </div> |
| <p class="text-sm opacity-80 mt-3 fade-in" style="animation-delay: 0.4s;">Trusted by writers, students, and professionals worldwide</p> |
| </div> |
| </div> |
| <div class="h-16 bg-white dark:bg-slate-900 w-full rounded-t-3xl"></div> |
| </header> |
|
|
| |
| <main class="flex-grow container mx-auto px-4 py-8 -mt-16 relative z-10"> |
| |
| <section id="results-section" class="hidden max-w-6xl mx-auto"> |
| <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-6 md:p-8 mb-8 glass card-hover"> |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4"> |
| <div> |
| <h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Synonyms for "<span id="searched-word" class="text-indigo-600 dark:text-indigo-400 word-highlight"></span>"</h3> |
| <p class="text-gray-500 dark:text-gray-400" id="result-count">0 results found</p> |
| </div> |
| <div class="flex space-x-3"> |
| <button id="copy-all" class="px-4 py-2 bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-slate-600 transition-colors flex items-center gap-2 shine btn-advanced"> |
| <i class="far fa-copy"></i> |
| <span>Copy All</span> |
| </button> |
| <button id="new-search" class="px-4 py-2 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-300 rounded-lg hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition-colors flex items-center gap-2 shine btn-advanced"> |
| <i class="fas fa-redo"></i> |
| <span>New Search</span> |
| </button> |
| </div> |
| </div> |
| |
| <div id="synonyms-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
| |
| </div> |
| |
| <div id="no-results" class="hidden text-center py-12"> |
| <div class="inline-block p-6 bg-gray-100 dark:bg-slate-700 rounded-full mb-6"> |
| <i class="fas fa-search-minus text-3xl text-gray-400"></i> |
| </div> |
| <h4 class="text-xl font-medium text-gray-700 dark:text-gray-300 mb-2">No synonyms found</h4> |
| <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto">Try a different word or check your spelling. Some specialized terms may not have synonyms.</p> |
| </div> |
| </div> |
| |
| <div class="bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-slate-800 dark:to-slate-800 rounded-2xl p-6 md:p-8 shadow-inner glass card-hover"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-semibold text-gray-800 dark:text-white gradient-underline">Word Usage Tips</h3> |
| <div class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400"> |
| <i class="fas fa-info-circle"></i> |
| <span>AI-generated suggestions</span> |
| </div> |
| </div> |
| <div id="usage-tips" class="prose dark:prose-invert max-w-none"> |
| |
| </div> |
| </div> |
| |
| <div class="mt-8 bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-6 md:p-8 glass card-hover"> |
| <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4 gradient-underline">Word Frequency</h3> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm text-gray-600 dark:text-gray-300">Usage in modern English</span> |
| <span class="text-sm font-medium text-indigo-600 dark:text-indigo-400" id="word-frequency">Medium</span> |
| </div> |
| <div class="w-full bg-gray-200 dark:bg-slate-700 rounded-full h-2.5"> |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-500 h-2.5 rounded-full" id="frequency-bar" style="width: 50%"></div> |
| </div> |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-2" id="frequency-description">This word appears with moderate frequency in contemporary usage.</p> |
| </div> |
| </section> |
|
|
| |
| <section id="loading-section" class="hidden text-center py-16 max-w-2xl mx-auto"> |
| <div class="inline-block p-4 mb-6"> |
| <div class="relative w-16 h-16"> |
| <div class="absolute inset-0 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div> |
| <div class="absolute inset-2 border-4 border-pink-500 border-t-transparent rounded-full animate-spin" style="animation-delay: 0.3s;"></div> |
| <div class="absolute inset-4 border-4 border-amber-500 border-t-transparent rounded-full animate-spin" style="animation-delay: 0.6s;"></div> |
| </div> |
| </div> |
| <h3 class="text-2xl font-semibold text-gray-800 dark:text-white mb-3">Finding the perfect synonyms</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Our AI is analyzing thousands of word relationships to give you the best results<span class="loading-dots"> |
| <span class="dot-flashing">.</span> |
| <span class="dot-flashing">.</span> |
| <span class="dot-flashing">.</span> |
| </span></p> |
| <div class="mt-6"> |
| <div class="progress-bar"></div> |
| </div> |
| </section> |
|
|
| |
| <section id="error-section" class="hidden text-center py-16 max-w-2xl mx-auto"> |
| <div class="inline-block p-5 bg-red-100 dark:bg-red-900/20 rounded-full mb-6"> |
| <i class="fas fa-exclamation-triangle text-3xl text-red-500 dark:text-red-400"></i> |
| </div> |
| <h3 class="text-2xl font-semibold text-gray-800 dark:text-white mb-2">Connection Error</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-6" id="error-message">We couldn't fetch synonyms at this time. Please check your connection.</p> |
| <div class="flex justify-center gap-4"> |
| <button id="retry-btn" class="px-5 py-2.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2 shine btn-advanced"> |
| <i class="fas fa-sync-alt"></i> |
| Try Again |
| </button> |
| <button id="report-btn" class="px-5 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-600 transition-colors flex items-center gap-2 shine btn-advanced"> |
| <i class="fas fa-flag"></i> |
| Report Issue |
| </button> |
| </div> |
| </section> |
|
|
| |
| <section class="mt-20 mb-16"> |
| <div class="text-center mb-12"> |
| <span class="inline-block px-3 py-1 text-sm font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300 rounded-full mb-3 fade-in" style="animation-delay: 0.1s;">Why Choose Us</span> |
| <h3 class="text-3xl font-bold text-gray-900 dark:text-white fade-in" style="animation-delay: 0.2s;">Modern <span class="gradient-text">Lexical Discovery</span></h3> |
| <p class="text-lg text-gray-600 dark:text-gray-300 mt-3 max-w-3xl mx-auto fade-in" style="animation-delay: 0.3s;">Advanced features to enhance your vocabulary and writing</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover fade-in gradient-shadow card-3d" style="animation-delay: 0.1s;"> |
| <div class="w-14 h-14 gradient-bg rounded-xl flex items-center justify-center text-white mb-5 shine"> |
| <i class="fas fa-bolt text-2xl"></i> |
| </div> |
| <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-3">AI-Powered Results</h4> |
| <p class="text-gray-600 dark:text-gray-300">Our advanced algorithms analyze context to provide the most relevant synonyms for your specific needs.</p> |
| </div> |
| |
| <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover fade-in gradient-shadow card-3d" style="animation-delay: 0.2s;"> |
| <div class="w-14 h-14 gradient-bg rounded-xl flex items-center justify-center text-white mb-5 shine"> |
| <i class="fas fa-layer-group text-2xl"></i> |
| </div> |
| <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-3">Contextual Meanings</h4> |
| <p class="text-gray-600 dark:text-gray-300">Each synonym comes with its precise meaning to help you choose the perfect word for your context.</p> |
| </div> |
| |
| <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover fade-in gradient-shadow card-3d" style="animation-delay: 0.3s;"> |
| <div class="w-14 h-14 gradient-bg rounded-xl flex items-center justify-center text-white mb-5 shine"> |
| <i class="fas fa-mobile-alt text-2xl"></i> |
| </div> |
| <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-3">Fully Responsive</h4> |
| <p class="text-gray-600 dark:text-gray-300">Works seamlessly on all devices from smartphones to desktop computers.</p> |
| </div> |
| |
| <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover fade-in gradient-shadow card-3d" style="animation-delay: 0.4s;"> |
| <div class="w-14 h-14 gradient-bg rounded-xl flex items-center justify-center text-white mb-5 shine"> |
| <i class="fas fa-history text-2xl"></i> |
| </div> |
| <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-3">Word History</h4> |
| <p class="text-gray-600 dark:text-gray-300">Coming soon: Track your searched words and build your personal vocabulary library.</p> |
| </div> |
| |
| <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover fade-in gradient-shadow card-3d" style="animation-delay: 0.5s;"> |
| <div class="w-14 h-14 gradient-bg rounded-xl flex items-center justify-center text-white mb-5 shine"> |
| <i class="fas fa-language text-2xl"></i> |
| </div> |
| <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-3">Multi-Language</h4> |
| <p class="text-gray-600 dark:text-gray-300">Future update will include synonyms in multiple languages for global users.</p> |
| </div> |
| |
| <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover fade-in gradient-shadow card-3d" style="animation-delay: 0.6s;"> |
| <div class="w-14 h-14 gradient-bg rounded-xl flex items-center justify-center text-white mb-5 shine"> |
| <i class="fas fa-chart-line text-2xl"></i> |
| </div> |
| <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-3">Word Trends</h4> |
| <p class="text-gray-600 dark:text-gray-300">Planned feature to show popularity trends of words to keep your writing current.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="my-16 py-12 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-slate-800 dark:to-slate-800 rounded-3xl glass"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <span class="inline-block px-3 py-1 text-sm font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300 rounded-full mb-3 fade-in" style="animation-delay: 0.1s;">User Testimonials</span> |
| <h3 class="text-3xl font-bold text-gray-900 dark:text-white fade-in" style="animation-delay: 0.2s;">What Our <span class="gradient-text">Users Say</span></h3> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg card-hover fade-in card-3d" style="animation-delay: 0.1s;"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center text-indigo-600 dark:text-indigo-300 mr-4 shine"> |
| <i class="fas fa-user text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-800 dark:text-white">Sarah J.</h4> |
| <p class="text-sm text-gray-500 dark:text-gray-400">Content Writer</p> |
| </div> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300">"This tool has become my secret weapon for writing. The synonyms are so precise and the interface is a joy to use."</p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg card-hover fade-in card-3d" style="animation-delay: 0.2s;"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center text-indigo-600 dark:text-indigo-300 mr-4 shine"> |
| <i class="fas fa-user text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-800 dark:text-white">Michael T.</h4> |
| <p class="text-sm text-gray-500 dark:text-gray-400">University Student</p> |
| </div> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300">"As a non-native English speaker, this helps me sound more natural in my essays. The meanings included are super helpful."</p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| |
| <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg card-hover fade-in card-3d" style="animation-delay: 0.3s;"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center text-indigo-600 dark:text-indigo-300 mr-4 shine"> |
| <i class="fas fa-user text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-800 dark:text-white">Emma L.</h4> |
| <p class="text-sm text-gray-500 dark:text-gray-400">Marketing Professional</p> |
| </div> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300">"I use this daily for crafting compelling copy. The modern design makes it a pleasure to use compared to other tools."</p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="my-16 py-12 bg-gradient-to-r from-indigo-600 to-indigo-400 rounded-3xl text-center relative overflow-hidden"> |
| <div class="absolute inset-0 opacity-10"> |
| <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-white blur-3xl"></div> |
| <div class="absolute bottom-1/3 right-1/3 w-48 h-48 rounded-full bg-pink-300 blur-3xl"></div> |
| </div> |
| <div class="relative z-10 max-w-3xl mx-auto px-4"> |
| <h3 class="text-3xl font-bold text-white mb-6 fade-in" style="animation-delay: 0.1s;">Ready to enhance your vocabulary?</h3> |
| <p class="text-xl text-indigo-100 mb-8 fade-in" style="animation-delay: 0.2s;">Join thousands of users who improve their writing daily</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4 fade-in" style="animation-delay: 0.3s;"> |
| <button class="px-8 py-4 bg-white text-indigo-600 font-medium rounded-xl hover:bg-gray-100 transition-all flex items-center justify-center gap-2 shine btn-advanced"> |
| <i class="fas fa-rocket"></i> |
| <span>Get Started</span> |
| </button> |
| <button class="px-8 py-4 bg-transparent border-2 border-white text-white font-medium rounded-xl hover:bg-white/10 transition-all flex items-center justify-center gap-2 shine btn-advanced"> |
| <i class="fas fa-book"></i> |
| <span>Learn More</span> |
| </button> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-gray-50 dark:bg-slate-800/50 border-t border-gray-200 dark:border-slate-700 py-12 glass"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <div class="w-8 h-8 rounded-lg gradient-bg flex items-center justify-center shine"> |
| <i class="fas fa-book-open text-white text-sm"></i> |
| </div> |
| <h4 class="text-lg font-semibold text-gray-800 dark:text-white">LexiFind</h4> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">The modern way to find perfect word alternatives for any writing need.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors tooltip"> |
| <i class="fab fa-twitter"></i> |
| <span class="tooltip-text">Twitter</span> |
| </a> |
| <a href="#" class="text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors tooltip"> |
| <i class="fab fa-facebook"></i> |
| <span class="tooltip-text">Facebook</span> |
| </a> |
| <a href="#" class="text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors tooltip"> |
| <i class="fab fa-instagram"></i> |
| <span class="tooltip-text">Instagram</span> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h5 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Product</h5> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">Features</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">Pricing</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">API</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">Chrome Extension</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h5 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Resources</h5> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">Blog</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">Help Center</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">Tutorials</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">Webinars</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h5 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Company</h5> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">About</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">Careers</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">Privacy</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 transition-colors underline-animation">Terms</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="pt-8 border-t border-gray-200 dark:border-slate-700 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-500 dark:text-gray-400 text-sm mb-4 md:mb-0">© 2023 LexiFind. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 text-sm transition-colors underline-animation">Privacy Policy</a> |
| <a href="#" class="text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 text-sm transition-colors underline-animation">Terms of Service</a> |
| <a href="#" class="text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 text-sm transition-colors underline-animation">Cookie Policy</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div class="fixed bottom-6 right-6 z-50"> |
| <button id="scroll-top" class="w-12 h-12 rounded-full gradient-bg text-white shadow-lg flex items-center justify-center transition-all transform hover:scale-110 shine hidden"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const wordInput = document.getElementById('word-input'); |
| const searchBtn = document.getElementById('search-btn'); |
| const resultsSection = document.getElementById('results-section'); |
| const loadingSection = document.getElementById('loading-section'); |
| const errorSection = document.getElementById('error-section'); |
| const synonymsContainer = document.getElementById('synonyms-container'); |
| const noResults = document.getElementById('no-results'); |
| const searchedWord = document.getElementById('searched-word'); |
| const resultCount = document.getElementById('result-count'); |
| const errorMessage = document.getElementById('error-message'); |
| const retryBtn = document.getElementById('retry-btn'); |
| const reportBtn = document.getElementById('report-btn'); |
| const copyAllBtn = document.getElementById('copy-all'); |
| const newSearchBtn = document.getElementById('new-search'); |
| const themeToggle = document.getElementById('theme-toggle'); |
| const usageTips = document.getElementById('usage-tips'); |
| const scrollTopBtn = document.getElementById('scroll-top'); |
| const frequencyBar = document.getElementById('frequency-bar'); |
| const wordFrequency = document.getElementById('word-frequency'); |
| const frequencyDescription = document.getElementById('frequency-description'); |
| |
| |
| if (localStorage.getItem('theme') === 'dark' || |
| (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| document.documentElement.classList.add('dark'); |
| themeToggle.checked = true; |
| } |
| |
| |
| themeToggle.addEventListener('change', function() { |
| if (this.checked) { |
| document.documentElement.classList.add('dark'); |
| localStorage.setItem('theme', 'dark'); |
| } else { |
| document.documentElement.classList.remove('dark'); |
| localStorage.setItem('theme', 'light'); |
| } |
| }); |
| |
| |
| window.addEventListener('scroll', function() { |
| if (window.pageYOffset > 300) { |
| scrollTopBtn.classList.remove('hidden'); |
| scrollTopBtn.classList.add('animate-bounce'); |
| } else { |
| scrollTopBtn.classList.add('hidden'); |
| scrollTopBtn.classList.remove('animate-bounce'); |
| } |
| }); |
| |
| scrollTopBtn.addEventListener('click', function() { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| function searchSynonyms() { |
| const word = wordInput.value.trim(); |
| |
| if (!word) { |
| wordInput.focus(); |
| wordInput.classList.add('animate-pulse'); |
| setTimeout(() => wordInput.classList.remove('animate-pulse'), 1000); |
| return; |
| } |
| |
| |
| resultsSection.classList.add('hidden'); |
| errorSection.classList.add('hidden'); |
| loadingSection.classList.remove('hidden'); |
| |
| |
| synonymsContainer.innerHTML = ''; |
| |
| |
| setTimeout(() => { |
| try { |
| |
| const mockSynonyms = getMockSynonyms(word.toLowerCase()); |
| |
| loadingSection.classList.add('hidden'); |
| |
| if (mockSynonyms.length === 0) { |
| noResults.classList.remove('hidden'); |
| resultsSection.classList.remove('hidden'); |
| resultCount.textContent = "0 results found"; |
| } else { |
| noResults.classList.add('hidden'); |
| displaySynonyms(word, mockSynonyms); |
| resultsSection.classList.remove('hidden'); |
| resultCount.textContent = `${mockSynonyms.length} results found`; |
| } |
| |
| |
| updateWordFrequency(word); |
| |
| |
| setTimeout(() => { |
| resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| }, 100); |
| } catch (error) { |
| loadingSection.classList.add('hidden'); |
| errorMessage.textContent = error.message || 'We couldn\'t fetch synonyms at this time.'; |
| errorSection.classList.remove('hidden'); |
| } |
| }, 1500); |
| } |
| |
| |
| function updateWordFrequency(word) { |
| const frequencyData = { |
| 'happy': { level: 'High', percentage: '85%', description: 'This word appears very frequently in contemporary usage.' }, |
| 'beautiful': { level: 'Medium', percentage: '65%', description: 'This word appears with moderate frequency in modern English.' }, |
| 'run': { level: 'High', percentage: '90%', description: 'This common verb appears very frequently in all types of writing.' }, |
| 'sad': { level: 'Medium', percentage: '60%', description: 'This word appears with moderate frequency in contemporary usage.' }, |
| 'big': { level: 'Very High', percentage: '95%', description: 'This extremely common word appears in nearly all types of writing.' }, |
| 'error': { level: 'Low', percentage: '30%', description: 'This word appears relatively infrequently in modern English.' } |
| }; |
| |
| const data = frequencyData[word.toLowerCase()] || { |
| level: 'Medium', |
| percentage: '50%', |
| description: 'This word appears with moderate frequency in contemporary usage.' |
| }; |
| |
| wordFrequency.textContent = data.level; |
| frequencyBar.style.width = data.percentage; |
| frequencyDescription.textContent = data.description; |
| } |
| |
| |
| function displaySynonyms(word, synonyms) { |
| searchedWord.textContent = word; |
| |
| |
| synonyms.forEach((synonym, index) => { |
| const card = document.createElement('div'); |
| card.className = 'card card-hover fade-in'; |
| card.style.animationDelay = `${index * 0.05}s`; |
| card.innerHTML = ` |
| <div class="flex justify-between items-start h-full p-5"> |
| <div> |
| <span class="inline-block px-2 py-1 text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300 rounded-full mb-2">${index + 1}</span> |
| <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">${synonym.word}</h4> |
| <p class="text-gray-600 dark:text-gray-300 text-sm">${synonym.meaning}</p> |
| ${synonym.example ? `<p class="text-gray-500 dark:text-gray-400 text-xs italic mt-2">"${synonym.example}"</p>` : ''} |
| </div> |
| <button class="copy-btn p-2 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 rounded-full hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors shine" data-word="${synonym.word}" title="Copy to clipboard"> |
| <i class="far fa-copy"></i> |
| </button> |
| </div> |
| `; |
| synonymsContainer.appendChild(card); |
| }); |
| |
| |
| document.querySelectorAll('.copy-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| const wordToCopy = this.getAttribute('data-word'); |
| navigator.clipboard.writeText(wordToCopy); |
| |
| |
| const icon = this.querySelector('i'); |
| icon.classList.remove('fa-copy'); |
| icon.classList.add('fa-check', 'text-green-500'); |
| |
| setTimeout(() => { |
| icon.classList.remove('fa-check', 'text-green-500'); |
| icon.classList.add('fa-copy'); |
| }, 2000); |
| }); |
| }); |
| |
| |
| const tips = getUsageTips(word); |
| usageTips.innerHTML = tips; |
| } |
| |
| |
| copyAllBtn.addEventListener('click', function() { |
| const synonyms = Array.from(document.querySelectorAll('.card h4')) |
| .map(el => el.textContent) |
| .join(', '); |
| |
| if (synonyms) { |
| navigator.clipboard.writeText(synonyms); |
| |
| |
| const icon = this.querySelector('i'); |
| icon.classList.remove('fa-copy'); |
| icon.classList.add('fa-check', 'text-green-500'); |
| this.innerHTML = '<i class="fas fa-check text-green-500"></i> Copied!'; |
| |
| setTimeout(() => { |
| this.innerHTML = '<i class="far fa-copy"></i> Copy All'; |
| }, 2000); |
| } |
| }); |
| |
| |
| newSearchBtn.addEventListener('click', function() { |
| wordInput.value = ''; |
| wordInput.focus(); |
| resultsSection.classList.add('hidden'); |
| }); |
| |
| |
| reportBtn.addEventListener('click', function() { |
| alert('Thank you for reporting an issue. We appreciate your feedback!'); |
| }); |
| |
| |
| searchBtn.addEventListener('click', searchSynonyms); |
| |
| wordInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| searchSynonyms(); |
| } |
| }); |
| |
| retryBtn.addEventListener('click', searchSynonyms); |
| |
| |
| function getMockSynonyms(word) { |
| const synonymDatabase = { |
| 'happy': [ |
| {word: 'Joyful', meaning: 'Feeling or expressing great happiness', example: "She felt joyful at the news of her promotion."}, |
| {word: 'Content', meaning: 'In a state of peaceful happiness', example: "He was content with his simple life."}, |
| {word: 'Cheerful', meaning: 'Noticeably happy and optimistic', example: "The cheerful children played in the park."}, |
| {word: 'Delighted', meaning: 'Feeling or showing great pleasure', example: "We were delighted to hear about your engagement."}, |
| {word: 'Pleased', meaning: 'Feeling or showing pleasure or satisfaction', example: "The teacher was pleased with the students' progress."}, |
| {word: 'Glad', meaning: 'Experiencing pleasure or joy', example: "I'm glad you could make it to the party."}, |
| {word: 'Ecstatic', meaning: 'Feeling or expressing overwhelming happiness', example: "She was ecstatic when she won the competition."}, |
| {word: 'Elated', meaning: 'Very happy or proud', example: "The team was elated after their championship win."}, |
| {word: 'Blissful', meaning: 'Extremely happy; full of joy', example: "Their honeymoon was a blissful experience."}, |
| {word: 'Jubilant', meaning: 'Feeling or expressing great happiness and triumph', example: "The fans were jubilant after their team's victory."} |
| ], |
| 'beautiful': [ |
| {word: 'Gorgeous', meaning: 'Beautiful; very attractive', example: "The sunset was absolutely gorgeous."}, |
| {word: 'Stunning', meaning: 'Extremely impressive or attractive', example: "She looked stunning in her evening gown."}, |
| {word: 'Lovely', meaning: 'Exquisitely beautiful', example: "They have a lovely garden in their backyard."}, |
| {word: 'Attractive', meaning: 'Pleasing or appealing to the senses', example: "The package design is very attractive to customers."}, |
| {word: 'Elegant', meaning: 'Graceful and stylish in appearance', example: "The hotel lobby was elegant and sophisticated."}, |
| {word: 'Ravishing', meaning: 'Delightful; entrancing', example: "The actress appeared ravishing on the red carpet."}, |
| {word: 'Exquisite', meaning: 'Extremely beautiful and delicate', example: "The jewelry featured exquisite craftsmanship."}, |
| {word: 'Picturesque', meaning: 'Visually attractive', example: "The village was picturesque with its cobbled streets."}, |
| {word: 'Graceful', meaning: 'Having or showing grace or elegance', example: "The ballet dancer moved in a graceful manner."}, |
| {word: 'Breathtaking', meaning: 'Astonishing or awe-inspiring', example: "The view from the mountaintop was breathtaking."} |
| ], |
| 'run': [ |
| {word: 'Sprint', meaning: 'Run at full speed over a short distance', example: "He had to sprint to catch the bus."}, |
| {word: 'Jog', meaning: 'Run at a steady, gentle pace', example: "She jogs every morning to stay fit."}, |
| {word: 'Dash', meaning: 'Run or travel somewhere in a hurry', example: "I had to dash to the store before it closed."}, |
| {word: 'Race', meaning: 'Compete in a contest of speed', example: "The athletes will race for the gold medal."}, |
| {word: 'Trot', meaning: 'Run at a moderate pace', example: "The horse began to trot around the track."}, |
| {word: 'Gallop', meaning: 'Run at full speed (for horses)', example: "The wild horses gallop across the plains."}, |
| {word: 'Scamper', meaning: 'Run quickly and lightly', example: "The children scampered across the playground."}, |
| {word: 'Hurry', meaning: 'Move or act with haste', example: "We need to hurry or we'll miss our flight."}, |
| {word: 'Rush', meaning: 'Move with urgent haste', example: "Emergency vehicles rushed to the scene."}, |
| {word: 'Flee', meaning: 'Run away from danger', example: "The villagers had to flee from the approaching wildfire."} |
| ], |
| 'sad': [ |
| {word: 'Unhappy', meaning: 'Not happy', example: "She's been unhappy with her job for months."}, |
| {word: 'Depressed', meaning: 'In a state of general unhappiness', example: "He felt depressed after his pet passed away."}, |
| {word: 'Miserable', meaning: 'Wretchedly unhappy or uncomfortable', example: "The cold weather made everyone miserable."}, |
| {word: 'Gloomy', meaning: 'Feeling distressed or pessimistic', example: "The news put everyone in a gloomy mood."}, |
| {word: 'Melancholy', meaning: 'A feeling of pensive sadness', example: "There was a melancholy atmosphere in the old house."}, |
| {word: 'Heartbroken', meaning: 'Overwhelmed by grief or disappointment', example: "She was heartbroken when her relationship ended."}, |
| {word: 'Despondent', meaning: 'In low spirits from loss of hope', example: "After many rejections, he became despondent."}, |
| {word: 'Forlorn', meaning: 'Pitifully sad and abandoned', example: "The forlorn puppy waited by the roadside."}, |
| {word: 'Wistful', meaning: 'Having or showing a feeling of longing', example: "He gave a wistful smile remembering his childhood."}, |
| {word: 'Disconsolate', meaning: 'Very unhappy and unable to be comforted', example: "The child was disconsolate after losing her favorite toy."} |
| ], |
| 'big': [ |
| {word: 'Large', meaning: 'Of considerable size', example: "They live in a large house in the suburbs."}, |
| {word: 'Huge', meaning: 'Extremely large', example: "The concert attracted a huge crowd."}, |
| {word: 'Enormous', meaning: 'Very large in size or quantity', example: "An enormous amount of data was collected."}, |
| {word: 'Gigantic', meaning: 'Of very great size', example: "The dinosaur skeleton was gigantic."}, |
| {word: 'Massive', meaning: 'Large and heavy or solid', example: "The massive oak tree was hundreds of years old."}, |
| {word: 'Immense', meaning: 'Extremely large or great', example: "The project required immense resources."}, |
| {word: 'Colossal', meaning: 'Extremely large', example: "The statue was of colossal proportions."}, |
| {word: 'Vast', meaning: 'Of very great extent or size', example: "The vast desert stretched to the horizon."}, |
| {word: 'Tremendous', meaning: 'Very great in amount, scale, or intensity', example: "The storm caused tremendous damage."}, |
| {word: 'Monumental', meaning: 'Great in importance or scale', example: "The discovery was a monumental achievement."} |
| ], |
| 'error': [] |
| }; |
| |
| if (synonymDatabase[word]) { |
| return synonymDatabase[word]; |
| } else if (word === 'error') { |
| throw new Error('Network error: Could not connect to the server.'); |
| } else { |
| return []; |
| } |
| } |
| |
| |
| function getUsageTips(word) { |
| const tipsDatabase = { |
| 'happy': ` |
| <h4 class="font-semibold text-gray-800 dark:text-white mb-2">Usage Tips for "Happy"</h4> |
| <ul class="list-disc pl-5 space-y-2"> |
| <li><strong>Joyful</strong> works best when describing intense, exuberant happiness.</li> |
| <li><strong>Content</strong> suggests a quieter, more peaceful form of happiness.</li> |
| <li>Use <strong>ecstatic</strong> for extreme happiness, often from good news or success.</li> |
| <li><strong>Pleased</strong> is more formal and often used in professional contexts.</li> |
| <li><strong>Cheerful</strong> describes someone who is habitually happy and optimistic.</li> |
| </ul> |
| `, |
| 'beautiful': ` |
| <h4 class="font-semibold text-gray-800 dark:text-white mb-2">Usage Tips for "Beautiful"</h4> |
| <ul class="list-disc pl-5 space-y-2"> |
| <li><strong>Gorgeous</strong> often describes striking beauty that |
| </html> |
