{"id":14750,"date":"2025-07-31T09:24:51","date_gmt":"2025-07-31T07:24:51","guid":{"rendered":"https:\/\/ejaada.com\/?page_id=14750"},"modified":"2025-08-04T13:13:48","modified_gmt":"2025-08-04T11:13:48","slug":"ddd","status":"publish","type":"page","link":"https:\/\/ejaada.com\/en\/ddd\/","title":{"rendered":"ddd"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Daily Dictionary<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;900&family=Amiri:wght@400;700&display=swap');\r\n \r\n \/* Widget Container - Isolated from other page elements *\/\r\n .arabic-dictionary-widget {\r\n width: 100%;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n font-family: 'Tajawal', sans-serif;\r\n isolation: isolate;\r\n --primary-color: #8220A5;\r\n --primary-light: #9d4db8;\r\n --primary-dark: #6a1a87;\r\n --text-light: #f8f3fa;\r\n --text-lighter: rgba(255,255,255,0.9);\r\n --text-muted: rgba(255,255,255,0.7);\r\n --card-bg: rgba(255,255,255,0.1);\r\n --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n \r\n .dictionary-container {\r\n width: 100%;\r\n height: 550px;\r\n margin: 20px auto;\r\n background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary-color) 100%);\r\n border-radius: 28px;\r\n box-shadow: 0 25px 60px rgba(130, 32, 165, 0.4);\r\n overflow: hidden;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n border: 1px solid rgba(255,255,255,0.15);\r\n }\r\n\r\n .header {\r\n background: rgba(0,0,0,0.15);\r\n backdrop-filter: blur(12px);\r\n padding: 22px 30px;\r\n text-align: center;\r\n border-bottom: 1px solid rgba(255,255,255,0.1);\r\n flex-shrink: 0;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .header::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);\r\n animation: rotate 20s linear infinite;\r\n z-index: -1;\r\n }\r\n\r\n @keyframes rotate {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .header h2 {\r\n color: white;\r\n font-family: 'Tajawal', sans-serif;\r\n font-size: 34px;\r\n font-weight: 900;\r\n margin-bottom: 6px;\r\n letter-spacing: 0.5px;\r\n text-shadow: 0 2px 8px rgba(0,0,0,0.3);\r\n }\r\n\r\n .date-info {\r\n color: var(--text-lighter);\r\n font-size: 16px;\r\n font-weight: 500;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n\r\n .date-info svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n }\r\n\r\n .content-wrapper {\r\n position: relative;\r\n flex-grow: 1;\r\n overflow: hidden;\r\n }\r\n\r\n .slide {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n padding: 35px 40px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n transition: var(--transition);\r\n opacity: 0;\r\n pointer-events: none;\r\n transform: translateX(30px);\r\n }\r\n\r\n .slide.active {\r\n opacity: 1;\r\n pointer-events: all;\r\n transform: translateX(0);\r\n }\r\n\r\n .slide.inactive {\r\n transform: translateX(-30px);\r\n opacity: 0;\r\n }\r\n\r\n .slide.inactive.prev {\r\n transform: translateX(30px);\r\n }\r\n\r\n .word-card {\r\n background: var(--card-bg);\r\n backdrop-filter: blur(15px);\r\n border-radius: 24px;\r\n padding: 40px;\r\n width: 100%;\r\n max-width: 700px;\r\n border: 1px solid rgba(255,255,255,0.15);\r\n box-shadow: 0 12px 30px rgba(0,0,0,0.2);\r\n transition: var(--transition);\r\n transform-style: preserve-3d;\r\n perspective: 1000px;\r\n }\r\n\r\n .slide.active .word-card {\r\n animation: cardEntrance 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;\r\n }\r\n\r\n @keyframes cardEntrance {\r\n 0% { opacity: 0; transform: translateY(20px) rotateX(10deg); }\r\n 100% { opacity: 1; transform: translateY(0) rotateX(0); }\r\n }\r\n\r\n .word-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 25px;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .word-image-container {\r\n width: 1px;\r\n height: 1px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.15);\r\n backdrop-filter: blur(5px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 2px solid rgba(255,255,255,0.2);\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.2);\r\n flex-shrink: 0;\r\n }\r\n\r\n .word-image {\r\n width: 1px;\r\n height: 1px;\r\n object-fit: contain;\r\n filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));\r\n }\r\n\r\n .word-text {\r\n text-align: right;\r\n }\r\n\r\n .arabic-word {\r\n font-family: 'Amiri', serif;\r\n font-size: 52px;\r\n font-weight: 700;\r\n color: white;\r\n line-height: 1.2;\r\n text-shadow: 0 2px 10px rgba(0,0,0,0.3);\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .word-meta {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n margin-top: 10px;\r\n }\r\n\r\n .pronunciation {\r\n font-size: 22px;\r\n color: var(--text-lighter);\r\n font-style: italic;\r\n background: rgba(255,255,255,0.1);\r\n padding: 8px 18px;\r\n border-radius: 30px;\r\n backdrop-filter: blur(5px);\r\n font-weight: 500;\r\n }\r\n\r\n .word-type {\r\n font-size: 16px;\r\n color: var(--text-light);\r\n background: rgba(0,0,0,0.3);\r\n padding: 6px 14px;\r\n border-radius: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n font-weight: 700;\r\n }\r\n\r\n .meaning {\r\n font-size: 30px;\r\n color: white;\r\n font-weight: 700;\r\n margin: 25px 0;\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .meaning::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -8px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 60px;\r\n height: 3px;\r\n background: rgba(255,255,255,0.4);\r\n border-radius: 3px;\r\n }\r\n\r\n .example-section {\r\n width: 100%;\r\n max-width: 700px;\r\n margin-top: 20px;\r\n }\r\n\r\n .example {\r\n background: linear-gradient(135deg, rgba(130,32,165,0.4) 0%, rgba(106,26,135,0.5) 100%);\r\n border-radius: 20px;\r\n padding: 25px;\r\n margin-bottom: 20px;\r\n backdrop-filter: blur(8px);\r\n border: 1px solid rgba(255,255,255,0.15);\r\n transition: var(--transition);\r\n text-align: right;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.15);\r\n }\r\n\r\n .example:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 15px 30px rgba(0,0,0,0.25);\r\n background: linear-gradient(135deg, rgba(130,32,165,0.5) 0%, rgba(106,26,135,0.6) 100%);\r\n }\r\n\r\n .example-arabic {\r\n font-family: 'Amiri', serif;\r\n font-size: 24px;\r\n color: white;\r\n margin-bottom: 12px;\r\n line-height: 1.8;\r\n }\r\n\r\n .example-english {\r\n font-size: 18px;\r\n color: var(--text-lighter);\r\n font-style: italic;\r\n line-height: 1.6;\r\n border-right: 2px solid rgba(255,255,255,0.2);\r\n padding-right: 15px;\r\n }\r\n\r\n .navigation {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 0 25px;\r\n pointer-events: none;\r\n z-index: 10;\r\n }\r\n\r\n .nav-button {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.2) !important;\r\n border: none !important;\r\n color: white !important;\r\n font-size: 26px !important;\r\n cursor: pointer !important;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: var(--transition);\r\n pointer-events: all;\r\n backdrop-filter: blur(10px) !important;\r\n box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important;\r\n }\r\n\r\n .nav-button:hover {\r\n background: rgba(255,255,255,0.3);\r\n transform: scale(1.15) translateY(-2px);\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.3);\r\n }\r\n\r\n .nav-button:active {\r\n transform: scale(0.95);\r\n }\r\n\r\n .progress-indicator {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 12px;\r\n z-index: 10;\r\n }\r\n\r\n .progress-dot {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.3);\r\n transition: var(--transition);\r\n cursor: pointer;\r\n border: 2px solid transparent;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .progress-dot::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: white;\r\n transform: scale(0);\r\n border-radius: 50%;\r\n transition: var(--transition);\r\n }\r\n\r\n .progress-dot.active::after {\r\n transform: scale(1);\r\n }\r\n\r\n .progress-dot.active {\r\n border-color: rgba(255,255,255,0.3);\r\n transform: scale(1.3);\r\n }\r\n\r\n \/* Floating particles decoration *\/\r\n .particle {\r\n position: absolute;\r\n background: rgba(255,255,255,0.15);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: -1;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .dictionary-container {\r\n height: 500px;\r\n margin: 15px auto;\r\n border-radius: 22px;\r\n }\r\n \r\n .header {\r\n padding: 20px;\r\n }\r\n \r\n .header h2 {\r\n font-size: 28px;\r\n }\r\n \r\n .slide {\r\n padding: 30px;\r\n }\r\n \r\n .word-card {\r\n padding: 30px;\r\n }\r\n \r\n .word-image-container {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n \r\n .word-image {\r\n width: 50px;\r\n height: 50px;\r\n }\r\n \r\n .arabic-word {\r\n font-size: 42px;\r\n }\r\n \r\n .pronunciation {\r\n font-size: 18px;\r\n }\r\n \r\n .meaning {\r\n font-size: 26px;\r\n }\r\n \r\n .example-arabic {\r\n font-size: 20px;\r\n }\r\n \r\n .example-english {\r\n font-size: 16px;\r\n }\r\n \r\n .nav-button {\r\n width: 48px;\r\n height: 48px;\r\n font-size: 22px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .dictionary-container {\r\n height: 460px;\r\n border-radius: 18px;\r\n }\r\n \r\n .header h2 {\r\n font-size: 24px;\r\n }\r\n \r\n .slide {\r\n padding: 25px 20px;\r\n }\r\n \r\n .word-card {\r\n padding: 25px;\r\n }\r\n \r\n .word-header {\r\n flex-direction: column;\r\n gap: 15px;\r\n }\r\n \r\n .arabic-word {\r\n font-size: 36px;\r\n }\r\n \r\n .pronunciation {\r\n font-size: 16px;\r\n padding: 6px 14px;\r\n }\r\n \r\n .meaning {\r\n font-size: 22px;\r\n }\r\n \r\n .example {\r\n padding: 20px;\r\n }\r\n \r\n .example-arabic {\r\n font-size: 18px;\r\n }\r\n \r\n .word-image-container {\r\n width: 70px;\r\n height: 70px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"arabic-dictionary-widget\">\r\n <div class=\"dictionary-container\" id=\"widgetContainer\">\r\n <!-- Floating particles will be added here by JS -->\r\n \r\n <div class=\"header\">\r\n <h2>Daily Dictionary<\/h2>\r\n <div class=\"date-info\" id=\"dateInfo\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\">\r\n <path d=\"M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM5 8V6h14v2H5zm7 6c-2.8 0-5 2.2-5 5h2c0-1.7 1.3-3 3-3s3 1.3 3 3h2c0-2.8-2.2-5-5-5z\"\/>\r\n <\/svg>\r\n <span id=\"dateText\">Word of the day<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"content-wrapper\">\r\n <!-- Slide 1: Word and Pronunciation -->\r\n <div class=\"slide active\" id=\"slide1\">\r\n <div class=\"word-card\">\r\n <div class=\"word-header\">\r\n <div class=\"word-image-container\">\r\n <img decoding=\"async\" class=\"word-image\" id=\"wordImage\" src=\"\" alt=\"\">\r\n <\/div>\r\n <div class=\"word-text\">\r\n <div class=\"arabic-word\" id=\"arabicWord\">book<\/div>\r\n <div class=\"word-meta\">\r\n <div class=\"pronunciation\" id=\"pronunciation\">\/ki-taab\/<\/div>\r\n <div class=\"word-type\" id=\"wordType\">name<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"meaning\" id=\"meaning\">Book<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Slide 2: Example -->\r\n <div class=\"slide inactive\" id=\"slide2\">\r\n <div class=\"word-card\">\r\n <div class=\"example-section\">\r\n <div class=\"example\">\r\n <div class=\"example-arabic\" id=\"exampleArabic\">I read a new book every month.<\/div>\r\n <div class=\"example-english\" id=\"exampleEnglish\">I read a new book every month<\/div>\r\n <\/div>\r\n <div class=\"example\">\r\n <div class=\"example-arabic\" id=\"exampleArabic2\">This book is very useful.<\/div>\r\n <div class=\"example-english\" id=\"exampleEnglish2\">This book is very useful<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"navigation\">\r\n <button class=\"nav-button\" id=\"prevBtn\">\u2039<\/button>\r\n <button class=\"nav-button\" id=\"nextBtn\">\u203a<\/button>\r\n <\/div>\r\n \r\n <div class=\"progress-indicator\">\r\n <div class=\"progress-dot active\" id=\"dot1\"><\/div>\r\n <div class=\"progress-dot\" id=\"dot2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Enhanced word database with images and word types\r\n const wordDatabase = [\r\n {\r\n arabic: \"\u0643\u062a\u0627\u0628\",\r\n pronunciation: \"\/ki-taab\/\",\r\n meaning: \"Book\",\r\n type: \"\u0627\u0633\u0645\",\r\n image: \"https:\/\/ejaada.com\/wp-content\/uploads\/2025\/07\/564a1c9f-ed82-4d7e-b5c6-2f977cd2609f.png\",\r\n examples: [\r\n {\r\n arabic: \"\u0623\u0642\u0631\u0623 \u0643\u062a\u0627\u0628\u0627\u064b \u062c\u062f\u064a\u062f\u0627\u064b \u0643\u0644 \u0634\u0647\u0631\",\r\n english: \"I read a new book every month\"\r\n },\r\n {\r\n arabic: \"\u0647\u0630\u0627 \u0627\u0644\u0643\u062a\u0627\u0628 \u0645\u0641\u064a\u062f \u062c\u062f\u0627\u064b\",\r\n english: \"This book is very useful\"\r\n }\r\n ]\r\n },\r\n {\r\n arabic: \"\u0628\u064a\u062a\",\r\n pronunciation: \"\/bayt\/\",\r\n meaning: \"House\",\r\n type: \"\u0627\u0633\u0645\",\r\n image: \"https:\/\/ejaada.com\/wp-content\/uploads\/2025\/07\/564a1c9f-ed82-4d7e-b5c6-2f977cd2609f.png\",\r\n examples: [\r\n {\r\n arabic: \"\u0628\u064a\u062a\u064a \u062c\u0645\u064a\u0644 \u0648\u0643\u0628\u064a\u0631\",\r\n english: \"My house is beautiful and big\"\r\n },\r\n {\r\n arabic: \"\u0633\u0623\u0630\u0647\u0628 \u0625\u0644\u0649 \u0627\u0644\u0628\u064a\u062a \u0627\u0644\u0622\u0646\",\r\n english: \"I will go home now\"\r\n }\r\n ]\r\n },\r\n {\r\n arabic: \"\u0645\u0627\u0621\",\r\n pronunciation: \"\/maa'\/\",\r\n meaning: \"Water\",\r\n type: \"\u0627\u0633\u0645\",\r\n image: \"https:\/\/ejaada.com\/wp-content\/uploads\/2025\/07\/564a1c9f-ed82-4d7e-b5c6-2f977cd2609f.png\",\r\n examples: [\r\n {\r\n arabic: \"\u0623\u0634\u0631\u0628 \u0627\u0644\u0645\u0627\u0621 \u0643\u0644 \u064a\u0648\u0645\",\r\n english: \"I drink water every day\"\r\n },\r\n {\r\n arabic: \"\u0627\u0644\u0645\u0627\u0621 \u0636\u0631\u0648\u0631\u064a \u0644\u0644\u062d\u064a\u0627\u0629\",\r\n english: \"Water is essential for life\"\r\n }\r\n ]\r\n },\r\n {\r\n arabic: \"\u0634\u0645\u0633\",\r\n pronunciation: \"\/shams\/\",\r\n meaning: \"Sun\",\r\n type: \"\u0627\u0633\u0645\",\r\n image: \"https:\/\/cdn-icons-png.flaticon.com\/512\/3223\/3223003.png\",\r\n examples: [\r\n {\r\n arabic: \"\u0627\u0644\u0634\u0645\u0633 \u0645\u0634\u0631\u0642\u0629 \u0627\u0644\u064a\u0648\u0645\",\r\n english: \"The sun is bright today\"\r\n },\r\n {\r\n arabic: \"\u062a\u0634\u0631\u0642 \u0627\u0644\u0634\u0645\u0633 \u0645\u0646 \u0627\u0644\u0634\u0631\u0642\",\r\n english: \"The sun rises from the east\"\r\n }\r\n ]\r\n },\r\n {\r\n arabic: \"\u0642\u0644\u0645\",\r\n pronunciation: \"\/qa-lam\/\",\r\n meaning: \"Pen\",\r\n type: \"\u0627\u0633\u0645\",\r\n image: \"https:\/\/cdn-icons-png.flaticon.com\/512\/2553\/2553929.png\",\r\n examples: [\r\n {\r\n arabic: \"\u0623\u0643\u062a\u0628 \u0628\u0627\u0644\u0642\u0644\u0645 \u0627\u0644\u0623\u0632\u0631\u0642\",\r\n english: \"I write with the blue pen\"\r\n },\r\n {\r\n arabic: \"\u0623\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0642\u0644\u0645 \u062c\u062f\u064a\u062f\",\r\n english: \"I need a new pen\"\r\n }\r\n ]\r\n },\r\n {\r\n arabic: \"\u0648\u0631\u062f\u0629\",\r\n pronunciation: \"\/war-da\/\",\r\n meaning: \"Rose\",\r\n type: \"\u0627\u0633\u0645\",\r\n image: \"https:\/\/cdn-icons-png.flaticon.com\/512\/415\/415733.png\",\r\n examples: [\r\n {\r\n arabic: \"\u0627\u0644\u0648\u0631\u062f\u0629 \u0627\u0644\u062d\u0645\u0631\u0627\u0621 \u062c\u0645\u064a\u0644\u0629\",\r\n english: \"The red rose is beautiful\"\r\n },\r\n {\r\n arabic: \"\u0623\u0639\u0637\u064a\u062a \u0623\u0645\u064a \u0628\u0627\u0642\u0629 \u0648\u0631\u062f\",\r\n english: \"I gave my mother a bouquet of roses\"\r\n }\r\n ]\r\n },\r\n {\r\n arabic: \"\u0646\u062c\u0645\u0629\",\r\n pronunciation: \"\/naj-ma\/\",\r\n meaning: \"Star\",\r\n type: \"\u0627\u0633\u0645\",\r\n image: \"https:\/\/cdn-icons-png.flaticon.com\/512\/2583\/2583344.png\",\r\n examples: [\r\n {\r\n arabic: \"\u0627\u0644\u0646\u062c\u0648\u0645 \u062a\u0636\u064a\u0621 \u0641\u064a \u0627\u0644\u0644\u064a\u0644\",\r\n english: \"Stars shine at night\"\r\n },\r\n {\r\n arabic: \"\u0623\u062d\u0628 \u0645\u0634\u0627\u0647\u062f\u0629 \u0627\u0644\u0646\u062c\u0648\u0645\",\r\n english: \"I love watching the stars\"\r\n }\r\n ]\r\n }\r\n ];\r\n\r\n let currentSlide = 1;\r\n const totalSlides = 2;\r\n\r\n \/\/ Create floating particles\r\n function createParticles() {\r\n const container = document.getElementById('widgetContainer');\r\n const particleCount = 15;\r\n \r\n for (let i = 0; i < particleCount; i++) {\r\n const particle = document.createElement('div');\r\n particle.classList.add('particle');\r\n \r\n \/\/ Random size between 2px and 6px\r\n const size = Math.random() * 4 + 2;\r\n particle.style.width = `${size}px`;\r\n particle.style.height = `${size}px`;\r\n \r\n \/\/ Random position\r\n particle.style.left = `${Math.random() * 100}%`;\r\n particle.style.top = `${Math.random() * 100}%`;\r\n \r\n \/\/ Random opacity\r\n particle.style.opacity = Math.random() * 0.3 + 0.1;\r\n \r\n \/\/ Animation\r\n const duration = Math.random() * 20 + 10;\r\n const delay = Math.random() * -20;\r\n particle.style.animation = `float ${duration}s ${delay}s infinite linear`;\r\n \r\n container.appendChild(particle);\r\n }\r\n \r\n \/\/ Add floating animation to styles\r\n const style = document.createElement('style');\r\n style.textContent = `\r\n @keyframes float {\r\n 0% { transform: translate(0, 0) rotate(0deg); }\r\n 25% { transform: translate(${Math.random() * 40 - 20}px, ${Math.random() * 40 - 20}px) rotate(${Math.random() * 90 - 45}deg); }\r\n 50% { transform: translate(${Math.random() * 80 - 40}px, ${Math.random() * 80 - 40}px) rotate(${Math.random() * 180 - 90}deg); }\r\n 75% { transform: translate(${Math.random() * 40 - 20}px, ${Math.random() * 40 - 20}px) rotate(${Math.random() * 270 - 135}deg); }\r\n 100% { transform: translate(0, 0) rotate(360deg); }\r\n }\r\n `;\r\n document.head.appendChild(style);\r\n }\r\n\r\n \/\/ Get daily word based on date\r\n function getDailyWord() {\r\n const today = new Date();\r\n const dayOfYear = Math.floor((today - new Date(today.getFullYear(), 0, 0)) \/ 1000 \/ 60 \/ 60 \/ 24);\r\n return wordDatabase[dayOfYear % wordDatabase.length];\r\n }\r\n\r\n \/\/ Load today's word\r\n function loadDailyWord() {\r\n const word = getDailyWord();\r\n \r\n document.getElementById('arabicWord').textContent = word.arabic;\r\n document.getElementById('pronunciation').textContent = word.pronunciation;\r\n document.getElementById('meaning').textContent = word.meaning;\r\n document.getElementById('wordType').textContent = word.type;\r\n document.getElementById('wordImage').src = word.image;\r\n document.getElementById('wordImage').alt = word.meaning;\r\n \r\n \/\/ Set examples\r\n document.getElementById('exampleArabic').textContent = word.examples[0].arabic;\r\n document.getElementById('exampleEnglish').textContent = word.examples[0].english;\r\n document.getElementById('exampleArabic2').textContent = word.examples[1].arabic;\r\n document.getElementById('exampleEnglish2').textContent = word.examples[1].english;\r\n \r\n \/\/ Update date info\r\n const today = new Date();\r\n const options = { \r\n weekday: 'long', \r\n year: 'numeric', \r\n month: 'long', \r\n day: 'numeric' \r\n };\r\n const dateString = today.toLocaleDateString('ar-SA', options);\r\n document.getElementById('dateText').textContent = dateString;\r\n }\r\n\r\n \/\/ Navigation functions\r\n function showSlide(slideNumber) {\r\n \/\/ Determine animation direction\r\n const direction = slideNumber > currentSlide ? 'next' : 'prev';\r\n \r\n \/\/ Update current slide classes\r\n document.getElementById(`slide${currentSlide}`).classList.remove('active');\r\n document.getElementById(`slide${currentSlide}`).classList.add('inactive');\r\n if (direction === 'next') {\r\n document.getElementById(`slide${currentSlide}`).classList.add('prev');\r\n } else {\r\n document.getElementById(`slide${currentSlide}`).classList.remove('prev');\r\n }\r\n \r\n document.getElementById(`dot${currentSlide}`).classList.remove('active');\r\n \r\n currentSlide = slideNumber;\r\n \r\n \/\/ Update new slide classes\r\n document.getElementById(`slide${currentSlide}`).classList.remove('inactive', 'prev');\r\n document.getElementById(`slide${currentSlide}`).classList.add('active');\r\n document.getElementById(`dot${currentSlide}`).classList.add('active');\r\n }\r\n\r\n function nextSlide() {\r\n const next = currentSlide === totalSlides ? 1 : currentSlide + 1;\r\n showSlide(next);\r\n }\r\n\r\n function prevSlide() {\r\n const prev = currentSlide === 1 ? totalSlides : currentSlide - 1;\r\n showSlide(prev);\r\n }\r\n\r\n \/\/ Event listeners\r\n document.getElementById('nextBtn').addEventListener('click', nextSlide);\r\n document.getElementById('prevBtn').addEventListener('click', prevSlide);\r\n document.getElementById('dot1').addEventListener('click', () => showSlide(1));\r\n document.getElementById('dot2').addEventListener('click', () => showSlide(2));\r\n\r\n \/\/ Keyboard navigation\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'ArrowRight') {\r\n nextSlide();\r\n } else if (e.key === 'ArrowLeft') {\r\n prevSlide();\r\n }\r\n });\r\n\r\n \/\/ Auto-slide every 8 seconds (optional)\r\n let slideInterval = setInterval(nextSlide, 8000);\r\n\r\n \/\/ Pause auto-slide on hover\r\n const widget = document.querySelector('.dictionary-container');\r\n widget.addEventListener('mouseenter', () => clearInterval(slideInterval));\r\n widget.addEventListener('mouseleave', () => {\r\n clearInterval(slideInterval);\r\n slideInterval = setInterval(nextSlide, 8000);\r\n });\r\n\r\n \/\/ Initialize\r\n createParticles();\r\n loadDailyWord();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c094b2 elementor-widget elementor-widget-image\" data-id=\"4c094b2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/ejaada.com\/wp-content\/plugins\/elementor\/assets\/images\/placeholder.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u0642\u0627\u0645\u0648\u0633 \u0627\u0644\u064a\u0648\u0645\u064a \u0627\u0644\u0642\u0627\u0645\u0648\u0633 \u0627\u0644\u064a\u0648\u0645\u064a \u0643\u0644\u0645\u0629 \u0627\u0644\u064a\u0648\u0645 \u0643\u062a\u0627\u0628 \/ki-taab\/ \u0627\u0633\u0645 Book \u0623\u0642\u0631\u0623 \u0643\u062a\u0627\u0628\u0627\u064b \u062c\u062f\u064a\u062f\u0627\u064b \u0643\u0644 \u0634\u0647\u0631 I read a new book every month \u0647\u0630\u0627 \u0627\u0644\u0643\u062a\u0627\u0628 \u0645\u0641\u064a\u062f \u062c\u062f\u0627\u064b This book is very useful \u2039 \u203a<\/p>","protected":false},"author":389,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-14750","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/14750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/users\/389"}],"replies":[{"embeddable":true,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/comments?post=14750"}],"version-history":[{"count":4,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/14750\/revisions"}],"predecessor-version":[{"id":15010,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/14750\/revisions\/15010"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=14750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}