Spaces:
Running
Running
| <html lang="en" class=""> <!-- Start without 'dark' initially --> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Home - AI Text Tools</title> | |
| <!-- Tailwind CSS via CDN --> | |
| <script src="https://cdn.tailwindcss.com/3.4.1"></script> | |
| <script> | |
| // Tailwind config | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { primary: '#1a73e8', secondary: '#e8f0fe' }, | |
| borderRadius: { 'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px', 'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px', 'full': '9999px', 'button': '8px' } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Icons --> | |
| <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"> | |
| <!-- Custom Styles --> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } | |
| .hindi-font { font-family: 'Noto Sans Devanagari', sans-serif; } | |
| .custom-switch { position: relative; display: inline-block; width: 50px; height: 24px; } | |
| .custom-switch-input { opacity: 0; width: 0; height: 0; } | |
| .custom-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } | |
| .custom-switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } | |
| .custom-switch-input:checked + .custom-switch-slider { background-color: #1a73e8; } | |
| .custom-switch-input:checked + .custom-switch-slider:before { transform: translateX(26px); } | |
| *:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.3); } | |
| /* Base Dark Mode */ | |
| html.dark body { background-color: #1a202c; color: #e2e8f0; } | |
| html.dark header, html.dark footer { background-color: #2d3748; color: #e2e8f0; } | |
| html.dark .card { background-color: #2d3748; border-color: #4a5568; } | |
| html.dark h1, html.dark h2, html.dark h3, html.dark p, html.dark span, html.dark li, html.dark label, html.dark small, html.dark strong, html.dark button:not(.bg-red-500):not(.bg-green-600), html.dark a { color: #e2e8f0; } | |
| html.dark a.text-primary { color: #60a5fa; } | |
| html.dark .text-gray-600, html.dark .text-gray-700, html.dark .text-gray-800, html.dark .text-gray-900 { color: #a0aec0; } | |
| html.dark .text-gray-500, html.dark .text-gray-400 { color: #718096; } | |
| html.dark .bg-white { background-color: #2d3748 ; } | |
| html.dark .bg-gray-50 { background-color: #1a202c ; } | |
| html.dark .bg-gray-100 { background-color: #374151 ; } | |
| html.dark .border-gray-100, html.dark .border-gray-200 { border-color: #4a5568 ; } | |
| /* Dark mode Forms/Inputs */ | |
| html.dark input, html.dark textarea { background-color: #1f2937; border-color: #4b5563; color: #e5e7eb; } | |
| html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7280; } | |
| /* Style for step list items */ | |
| .step-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; } | |
| .step-icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; background-color: #e8f0fe; color: #1a73e8; border-radius: 50%; font-weight: 600; font-size: 0.875rem; } | |
| html.dark .step-icon { background-color: #374151; color: #60a5fa;} | |
| .step-content { margin-top: 0.1rem; } | |
| /* Video Styling */ | |
| .video-container video { | |
| display: block; /* Remove extra space below video */ | |
| width: 100%; /* Ensure video scales down */ | |
| height: auto; /* Maintain aspect ratio */ | |
| border-radius: 8px; /* Match card rounding */ | |
| border: 1px solid #e5e7eb; /* Subtle border */ | |
| background-color: #000; /* Black background for letterboxing or loading */ | |
| } | |
| html.dark .video-container video { | |
| border-color: #4b5563; /* Dark mode border */ | |
| } | |
| /* Ensure nav link styling is consistent */ | |
| .nav-link { transition: color 0.2s ease-in-out; } | |
| /* Make the tutorial section responsive */ | |
| @media (max-width: 767px) { | |
| .tutorial-container { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200"> | |
| <!-- Header --> | |
| <header class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <a href="index.html" class="text-2xl font-['Pacifico'] text-primary dark:text-blue-400 mr-8" data-lang-en="AI Text Tools" data-lang-hi="एआई टेक्स्ट उपकरण">AI Text Tools</a> | |
| <!-- Navigation Bar --> | |
| <nav id="mainNav" class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="nav-link text-primary dark:text-blue-400 font-medium" data-lang-en="Home" data-lang-hi="होम">Home</a> | |
| <a href="recognizer.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Recognize" data-lang-hi="पहचानें">Recognize</a> | |
| <a href="examples.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Examples" data-lang-hi="उदाहरण">Examples</a> | |
| <a href="technology.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Technology" data-lang-hi="तकनीक">Technology</a> | |
| <a href="about.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="About" data-lang-hi="बारे में">About</a> | |
| <a href="contact.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</a> | |
| <a href="feedback.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Feedback" data-lang-hi="प्रतिक्रिया">Feedback</a> | |
| </nav> | |
| </div> | |
| <!-- Right side header items --> | |
| <div class="flex items-center space-x-4"> | |
| <div class="items-center space-x-2 hidden md:flex"> <span class="text-sm text-gray-600 dark:text-gray-400">EN</span> <label class="custom-switch"><input type="checkbox" id="languageToggle" class="custom-switch-input"><span class="custom-switch-slider"></span></label> <span class="text-sm text-gray-600 dark:text-gray-400 hindi-font">हिंदी</span> </div> | |
| <div class="items-center space-x-2 hidden md:flex"> <span class="text-sm text-gray-600 dark:text-gray-400"><i class="ri-sun-line"></i></span> <label class="custom-switch"><input type="checkbox" id="themeToggle" class="custom-switch-input"><span class="custom-switch-slider"></span></label> <span class="text-sm text-gray-600 dark:text-gray-400"><i class="ri-moon-line"></i></span> </div> | |
| <button class="md:hidden w-10 h-10 flex items-center justify-center" aria-label="Toggle Menu"><i class="ri-menu-line text-gray-600 dark:text-gray-300 text-xl"></i></button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- ===== Main Content Area ===== --> | |
| <main class="flex-grow container mx-auto px-4 py-12"> | |
| <!-- Hero Section --> | |
| <section class="text-center mb-16"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-4 leading-tight" data-lang-en="Unlock Text Insights with AI" data-lang-hi="एआई के साथ टेक्स्ट अंतर्दृष्टि अनलॉक करें"> | |
| Unlock Text Insights with AI | |
| </h1> | |
| <p class="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto mb-8" data-lang-en="Easily recognize Hindi text from images, translate languages, and predict gender from names using our powerful AI tools." data-lang-hi="हमारे शक्तिशाली एआई उपकरणों का उपयोग करके आसानी से छवियों से हिंदी पाठ पहचानें, भाषाओं का अनुवाद करें, और नामों से लिंग की भविष्यवाणी करें।"> | |
| Easily recognize Hindi text from images, translate languages, and predict gender from names using our powerful AI tools. | |
| </p> | |
| <a href="recognizer.html" class="inline-flex items-center justify-center gap-2 px-8 py-3 border border-transparent text-base font-medium rounded-button text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800 transition"> | |
| <i class="ri-camera-lens-line"></i> | |
| <span data-lang-en="Get Started with OCR" data-lang-hi="ओसीआर के साथ आरंभ करें">Get Started with OCR</span> | |
| </a> | |
| </section> | |
| <!-- Video & Tutorial Section - Side by Side Layout --> | |
| <section class="mb-16"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6" data-lang-en="How to Recognize Hindi Text" data-lang-hi="हिंदी पाठ कैसे पहचानें"> | |
| How to Recognize Hindi Text | |
| </h2> | |
| <!-- Two-column layout for desktop, stacked for mobile --> | |
| <div class="tutorial-container flex flex-col md:flex-row gap-8"> | |
| <!-- LEFT SIDE: Video Container --> | |
| <div class="w-full md:w-1/2 bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card"> | |
| <h3 class="text-xl font-semibold text-center text-gray-800 dark:text-white mb-4" data-lang-en="Watch the Tutorial" data-lang-hi="ट्यूटोरियल देखें"> | |
| Watch the Tutorial | |
| </h3> | |
| <p class="text-center text-gray-600 dark:text-gray-400 mb-6" data-lang-en="See the AI Text Tools in action with this step-by-step video guide." data-lang-hi="इस चरण-दर-चरण वीडियो गाइड के साथ एआई टेक्स्ट टूल को क्रियान्वित देखें।"> | |
| See the AI Text Tools in action with this step-by-step video guide. | |
| </p> | |
| <div class="video-container"> | |
| <video class="w-full" controls> | |
| <source src="/samples/turotial.mp4" type="video/mp4"> | |
| <span data-lang-en="Your browser does not support the video tag. Please update your browser or use a different one to watch the tutorial." data-lang-hi="आपका ब्राउज़र वीडियो टैग का समर्थन नहीं करता है। कृपया ट्यूटोरियल देखने के लिए अपना ब्राउज़र अपडेट करें या किसी भिन्न ब्राउज़र का उपयोग करें।"> | |
| Your browser does not support the video tag. Please update your browser or use a different one to watch the tutorial. | |
| </span> | |
| </video> | |
| </div> | |
| </div> | |
| <!-- RIGHT SIDE: Tutorial Steps --> | |
| <div class="w-full md:w-1/2 bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card"> | |
| <h3 class="text-xl font-semibold text-center text-gray-800 dark:text-white mb-4" data-lang-en="Step-by-Step Guide" data-lang-hi="चरण-दर-चरण मार्गदर्शिका"> | |
| Step-by-Step Guide | |
| </h3> | |
| <ol class="space-y-4"> | |
| <li class="step-item"> | |
| <span class="step-icon">1</span> | |
| <div class="step-content"> | |
| <strong data-lang-en="Login/Sign Up:" data-lang-hi="लॉग इन / साइन अप करें:">Login/Sign Up:</strong> | |
| <span data-lang-en=" Access the application by logging in or creating a new account." data-lang-hi=" लॉग इन करके या नया खाता बनाकर एप्लिकेशन तक पहुंचें।"> Access the application by logging in or creating a new account.</span> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <span class="step-icon">2</span> | |
| <div class="step-content"> | |
| <strong data-lang-en="Go to Recognize:" data-lang-hi="पहचानें पर जाएं:">Go to Recognize:</strong> | |
| <span data-lang-en=" Navigate to the 'Recognize' or 'Hindi OCR' tab/page." data-lang-hi=" 'पहचानें' या 'हिंदी ओसीआर' टैब/पेज पर नेविगेट करें।"> Navigate to the 'Recognize' or 'Hindi OCR' tab/page.</span> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <span class="step-icon">3</span> | |
| <div class="step-content"> | |
| <strong data-lang-en="Upload or Select:" data-lang-hi="अपलोड करें या चुनें:">Upload or Select:</strong> | |
| <span data-lang-en=" Choose 'Choose File' to upload your Hindi word image (PNG, JPG) or click on one of the provided examples." data-lang-hi=" अपनी हिंदी शब्द छवि (PNG, JPG) अपलोड करने के लिए 'फ़ाइल चुनें' चुनें या दिए गए उदाहरणों में से किसी एक पर क्लिक करें।"> Choose 'Choose File' to upload your Hindi word image (PNG, JPG) or click on one of the provided examples.</span> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <span class="step-icon">4</span> | |
| <div class="step-content"> | |
| <strong data-lang-en="Recognize Image:" data-lang-hi="छवि पहचानें:">Recognize Image:</strong> | |
| <span data-lang-en=" Click the 'Recognize' button to start the analysis." data-lang-hi=" विश्लेषण शुरू करने के लिए 'पहचानें' बटन पर क्लिक करें।"> Click the 'Recognize' button to start the analysis.</span> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <span class="step-icon">5</span> | |
| <div class="step-content"> | |
| <strong data-lang-en="View Results:" data-lang-hi="परिणाम देखें:">View Results:</strong> | |
| <span data-lang-en=" The recognized Hindi text and word detection preview will appear in the results area." data-lang-hi=" पहचाना गया हिंदी पाठ और शब्द पहचान पूर्वावलोकन परिणाम क्षेत्र में दिखाई देगा।"> The recognized Hindi text and word detection preview will appear in the results area.</span> | |
| </div> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Other Features Section --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-10" data-lang-en="Explore More Tools" data-lang-hi="और उपकरण एक्सप्लोर करें"> | |
| Explore More Tools | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> | |
| <!-- Translation Feature Card --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card text-center md:text-left"> | |
| <div class="flex justify-center md:justify-start mb-4"> | |
| <i class="ri-translate-2 text-4xl text-primary dark:text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2" data-lang-en="Text Translation" data-lang-hi="पाठ अनुवाद">Text Translation</h3> | |
| <p class="text-gray-600 dark:text-gray-400 mb-4" data-lang-en="Translate text between various languages. Supports auto-detection of source language." data-lang-hi="विभिन्न भाषाओं के बीच पाठ का अनुवाद करें। स्रोत भाषा का स्वतः पता लगाने का समर्थन करता है।"> | |
| Translate text between various languages. Supports auto-detection of source language. | |
| </p> | |
| <a href="recognizer.html#translationContent" class="text-primary dark:text-blue-400 hover:underline font-medium inline-flex items-center gap-1" data-lang-en="Go to Translator" data-lang-hi="अनुवादक पर जाएँ"> | |
| Go to Translator <i class="ri-arrow-right-line"></i> | |
| </a> | |
| </div> | |
| <!-- Gender Prediction Feature Card --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card text-center md:text-left"> | |
| <div class="flex justify-center md:justify-start mb-4"> | |
| <i class="ri-men-line text-4xl text-primary dark:text-blue-400"></i><i class="ri-women-line text-4xl text-primary dark:text-blue-400 -ml-2"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2" data-lang-en="Gender Prediction" data-lang-hi="लिंग भविष्यवाणी">Gender Prediction</h3> | |
| <p class="text-gray-600 dark:text-gray-400 mb-4" data-lang-en="Predict the likely gender associated with one or more names." data-lang-hi="एक या अधिक नामों से जुड़े संभावित लिंग की भविष्यवाणी करें।"> | |
| Predict the likely gender associated with one or more names. | |
| </p> | |
| <a href="recognizer.html#genderContent" class="text-primary dark:text-blue-400 hover:underline font-medium inline-flex items-center gap-1" data-lang-en="Go to Predictor" data-lang-hi="भविष्यवक्ता पर जाएँ"> | |
| Go to Predictor <i class="ri-arrow-right-line"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-12 mt-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <a href="index.html" class="text-2xl font-['Pacifico'] text-white mb-4 inline-block" data-lang-en="AI Text Tools" data-lang-hi="एआई टेक्स्ट उपकरण">AI Text Tools</a> | |
| <p class="mb-4 text-sm" data-lang-en="AI-powered tools for text analysis and processing." data-lang-hi="पाठ विश्लेषण और प्रसंस्करण के लिए एआई-संचालित उपकरण।">AI-powered tools for text analysis.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-white" title="GitHub (Placeholder)"><i class="ri-github-fill"></i></a> | |
| <a href="#" class="hover:text-white" title="LinkedIn (Placeholder)"><i class="ri-linkedin-box-fill"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Quick Links" data-lang-hi="त्वरित लिंक्स">Quick Links</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="home.html" class="hover:text-white" data-lang-en="Home" data-lang-hi="होम">Home</a></li> | |
| <li><a href="index.html" class="hover:text-white" data-lang-en="Tools" data-lang-hi="उपकरण">Tools</a></li> | |
| <li><a href="about.html" class="hover:text-white" data-lang-en="About" data-lang-hi="बारे में">About</a></li> | |
| <li><a href="contact.html" class="hover:text-white" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</a></li> | |
| <li><a href="feedback.html" class="hover:text-white" data-lang-en="Feedback" data-lang-hi="प्रतिक्रिया">Feedback</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Resources" data-lang-hi="संसाधन">Resources</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:text-white" data-lang-en="API Docs (TBD)" data-lang-hi="एपीआई डॉक्स (TBD)">API Docs (TBD)</a></li> | |
| <li><a href="#" class="hover:text-white" data-lang-en="GitHub Repo" data-lang-hi="गिटहब रेपो">GitHub Repo</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-start"><i class="ri-mail-line mt-1 mr-2"></i><span>your-email@example.com</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center"> | |
| <p class="text-sm">© 2024 Your Name/Org | AI Text Tools Project</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Base Theme/Language Script --> | |
| <script> | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const htmlElement = document.documentElement; | |
| function applyTheme(isDark) { if (isDark) { htmlElement.classList.add('dark'); if(themeToggle) themeToggle.checked = true; } else { htmlElement.classList.remove('dark'); if(themeToggle) themeToggle.checked = false; } } | |
| const languageToggle = document.getElementById('languageToggle'); | |
| const langElements = document.querySelectorAll('[data-lang-en]'); | |
| const placeholderElements = document.querySelectorAll('[data-lang-en-placeholder]'); | |
| function applyLanguage(lang) { | |
| htmlElement.setAttribute('lang', lang); | |
| langElements.forEach(el => { | |
| const text = el.getAttribute(`data-lang-${lang}`); | |
| if (text !== null) { // Check if attribute exists | |
| const icon = el.querySelector('i'); | |
| if (icon && el.childNodes.length > 1) { | |
| let updated = false; | |
| el.childNodes.forEach(node => { | |
| if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') { | |
| node.textContent = ` ${text} `; | |
| updated = true; | |
| } | |
| }); | |
| if (!updated) { | |
| const currentText = el.getAttribute(`data-lang-${lang === 'en' ? 'hi' : 'en'}`); | |
| if (currentText) el.innerHTML = el.innerHTML.replace(currentText.trim(), text); | |
| } | |
| } else { | |
| el.textContent = text; | |
| } | |
| } | |
| }); | |
| placeholderElements.forEach(el => { | |
| const placeholderText = el.getAttribute(`data-lang-${lang}-placeholder`); | |
| if (placeholderText !== null) { | |
| el.placeholder = placeholderText; | |
| } | |
| }); | |
| if (languageToggle) languageToggle.checked = (lang === 'hi'); | |
| localStorage.setItem('language', lang); | |
| } | |
| function initializeSettings() { | |
| const savedLang = localStorage.getItem('language') || 'en'; | |
| const prefersDark = localStorage.getItem('theme') === 'dark' || (localStorage.getItem('theme') === null && window.matchMedia('(prefers-color-scheme: dark)').matches); | |
| applyTheme(prefersDark); | |
| applyLanguage(savedLang); | |
| if (languageToggle) { | |
| languageToggle.addEventListener('change', (event) => { | |
| const newLang = event.target.checked ? 'hi' : 'en'; | |
| applyLanguage(newLang); | |
| }); | |
| } else { console.warn("Language toggle button not found."); } | |
| if (themeToggle) { | |
| themeToggle.addEventListener('change', (event) => { | |
| const isDark = event.target.checked; | |
| applyTheme(isDark); | |
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); | |
| }); | |
| } else { console.warn("Theme toggle button not found."); } | |
| } | |
| // Initialize theme and language settings when the DOM is fully loaded | |
| document.addEventListener('DOMContentLoaded', () => { | |
| initializeSettings(); | |
| console.log("Home page DOM Loaded and Initialized."); | |
| }); | |
| </script> | |
| </body> | |
| </html> |