Spaces:
Running
Running
| <!-- Start with lang="en" and no 'dark' class initially --> | |
| <html lang="en" class=""> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vision and Discern - Key Features</title> <!-- Updated Title --> | |
| <!-- Tailwind CSS via CDN --> | |
| <script src="https://cdn.tailwindcss.com/3.4.1"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', // Enable class-based dark mode | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4a90e2', // Match main app's primary color | |
| secondary: '#f0f8ff', // Light blueish background for reference | |
| }, | |
| borderRadius: { | |
| 'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px', | |
| 'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px', | |
| 'full': '9999px', | |
| 'button': '4px' // Match main app's button radius | |
| } | |
| } | |
| } | |
| } | |
| </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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Icons (Remixicon) --> | |
| <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"> | |
| <!-- Custom Styles (Mainly for the switch) --> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| /* Custom Switch Styles - Copied from main app */ | |
| .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: #4a90e2; } /* Your primary color */ | |
| .custom-switch-input:checked + .custom-switch-slider:before { transform: translateX(26px); } | |
| /* Base dark mode styles - Copied from main app */ | |
| html.dark body { background-color: #111827; color: #d1d5db; } | |
| html.dark header, html.dark footer { background-color: #1f2937; } | |
| html.dark .card { background-color: #1f2937; border-color: #374151; } | |
| 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 .subtitle, html.dark .info-text, html.dark .credits p, html.dark .attribution { color: #d1d5db; } | |
| html.dark .text-gray-600 { color: #9ca3af; } | |
| html.dark .text-gray-700 { color: #9ca3af; } | |
| html.dark .text-gray-500 { color: #6b7280; } | |
| html.dark .button-secondary { background-color: #4b5563; color: #d1d5db; } | |
| html.dark .button-secondary:hover { background-color: #374151; } | |
| html.dark .features-list li strong { color: #e5e7eb; } /* Slightly lighter strong tag in dark mode */ | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200"> | |
| <!-- Main Application Container --> | |
| <div id="app-container" class="flex-grow flex flex-col"> | |
| <!-- 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"> | |
| <!-- Left Side: Logo & Nav --> | |
| <div class="flex items-center"> | |
| <a href="home.html" class="text-xl font-bold text-primary dark:text-blue-400 mr-6">Vision & Discern</a> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="home.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Home</a> | |
| <a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">OCR</a> | |
| <!-- Links to other tools (optional, consider if they are separate apps or tabs) --> | |
| <!-- <a href="translation.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Translation</a> --> | |
| <!-- <a href="gender_predictor.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Gender</a> --> | |
| <a href="features.html" class="text-primary dark:text-blue-400 font-medium">Features</a> | |
| <a href="feedback.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Feedback</a> | |
| <a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Contact Us</a> | |
| <!-- <a href="admin.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Admin</a> --> | |
| </nav> | |
| </div> | |
| <!-- Right Side: Switches & Logout --> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Theme Switch --> | |
| <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> | |
| <!-- Logout Button --> | |
| <button id="logoutButton" class="button-secondary bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 text-white px-3 py-1.5 rounded-button text-sm inline-flex items-center gap-1"> | |
| <i class="ri-logout-box-r-line"></i> | |
| Logout | |
| </button> | |
| <!-- Mobile Menu Button (Placeholder) --> | |
| <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-8"> | |
| <!-- Page Header Section --> | |
| <section class="mb-10 text-center border-b border-gray-200 dark:border-gray-700 pb-6"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-2">Application Features</h1> | |
| <p class="subtitle text-lg text-gray-700 dark:text-gray-300 mb-1">Explore the capabilities of our AI-powered tools</p> | |
| <p class="attribution text-sm text-gray-500 dark:text-gray-400">Powered by Sakshi's Engines</p> | |
| </section> | |
| <!-- Features Section --> | |
| <div class="card bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-700 max-w-3xl mx-auto"> | |
| <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 flex items-center gap-3 border-b border-gray-200 dark:border-gray-600 pb-3"> | |
| <i class="ri-star-line text-primary dark:text-blue-400 text-3xl"></i> | |
| <span>Key Features</span> | |
| </h2> | |
| <!-- Using Tailwind for the list --> | |
| <ul class="features-list list-none space-y-4 text-gray-700 dark:text-gray-300"> | |
| <li class="flex items-start gap-3"> | |
| <i class="ri-text-scan-line text-lg mt-1 text-primary dark:text-blue-400"></i> | |
| <div> | |
| <strong class="font-semibold text-gray-800 dark:text-gray-100">Accurate Hindi OCR:</strong> | |
| <span>Extracts Hindi text from images with high precision using advanced deep learning models.</span> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i class="ri-focus-3-line text-lg mt-1 text-primary dark:text-blue-400"></i> | |
| <div> | |
| <strong class="font-semibold text-gray-800 dark:text-gray-100">Word Detection:</strong> | |
| <span>Identifies and visually highlights individual word boundaries within the uploaded image.</span> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i class="ri-markup-line text-lg mt-1 text-primary dark:text-blue-400"></i> | |
| <div> | |
| <strong class="font-semibold text-gray-800 dark:text-gray-100">Text Prediction:</strong> | |
| <span>Provides the most likely textual representation of the detected handwritten words.</span> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i class="ri-translate-2 text-lg mt-1 text-primary dark:text-blue-400"></i> | |
| <div> | |
| <strong class="font-semibold text-gray-800 dark:text-gray-100">Multi-Language Translation:</strong> | |
| <span>Translates the extracted text (or any input text) between numerous languages.</span> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i class="ri-men-line text-lg mt-1 text-primary dark:text-blue-400"></i> <i class="ri-women-line text-lg mt-1 text-primary dark:text-blue-400 -ml-2"></i> | |
| <div class="ml-1"> | |
| <strong class="font-semibold text-gray-800 dark:text-gray-100">Gender Prediction:</strong> | |
| <span>Predicts the likely gender associated with given names based on statistical models.</span> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i class="ri-drag-move-2-line text-lg mt-1 text-primary dark:text-blue-400"></i> | |
| <div> | |
| <strong class="font-semibold text-gray-800 dark:text-gray-100">User-Friendly Interface:</strong> | |
| <span>Simple, intuitive, and responsive design built with Tailwind CSS for ease of use across devices. Drag & drop supported for uploads.</span> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i class="ri-lock-password-line text-lg mt-1 text-primary dark:text-blue-400"></i> | |
| <div> | |
| <strong class="font-semibold text-gray-800 dark:text-gray-100">Secure Authentication:</strong> | |
| <span>Protects access with JWT-based login and signup functionality, ensuring only registered users can use the core features.</span> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i class="ri-moon-foggy-line text-lg mt-1 text-primary dark:text-blue-400"></i> | |
| <div> | |
| <strong class="font-semibold text-gray-800 dark:text-gray-100">Dark Mode Support:</strong> | |
| <span>Includes a theme toggle for comfortable viewing in different lighting conditions.</span> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> <!-- End Features Card --> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-gray-400 py-8 mt-12"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="credits text-sm mb-4"> | |
| <p>Powered by <strong>D SAKSHI</strong> (MCA Final Year BIT Durg, Chhattisgarh) | © SlimShadow Org. All Rights Reserved.</p> | |
| </div> | |
| <div class="flex justify-center 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> | |
| </footer> | |
| </div> <!-- End #app-container --> | |
| <script> | |
| // --- THEME TOGGLE LOGIC --- | |
| 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; | |
| } | |
| } | |
| // Check localStorage on load | |
| const prefersDark = localStorage.getItem('theme') === 'dark' || | |
| (localStorage.getItem('theme') === null && window.matchMedia('(prefers-color-scheme: dark)').matches); | |
| applyTheme(prefersDark); | |
| // Add listener to toggle button | |
| if (themeToggle) { | |
| themeToggle.addEventListener('change', (event) => { | |
| const isDark = event.target.checked; | |
| applyTheme(isDark); | |
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); | |
| }); | |
| } | |
| // --- Logout Button Logic --- | |
| const logoutButton = document.getElementById("logoutButton"); | |
| if (logoutButton) { | |
| logoutButton.addEventListener("click", function() { | |
| console.log("Logout clicked, redirecting..."); | |
| window.location.href = "index.html"; // Redirect to main app/login | |
| }); | |
| } else { | |
| console.warn("Logout button not found."); | |
| } | |
| </script> | |
| </body> | |
| </html> |