Spaces:
Running
Running
File size: 14,846 Bytes
dd72ec3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 |
<!DOCTYPE html>
<!-- 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> |