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 - Feedback</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: '#f8f9fa', // Using light gray for backgrounds now | |
| success: '#10b981', // emerald-500 | |
| danger: '#ef4444', // red-500 | |
| }, | |
| borderRadius: { | |
| 'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px', | |
| 'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px', | |
| 'full': '9999px', | |
| 'button': '8px' // Using slightly rounder buttons like NIC project | |
| // 'button': '4px' // Or keep the previous style | |
| } | |
| } | |
| } | |
| } | |
| </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; } | |
| /* Input/Textarea dark styles */ | |
| html.dark input[type="text"], | |
| html.dark input[type="email"], | |
| html.dark textarea { | |
| background-color: #374151; /* gray-700 */ | |
| border-color: #4b5563; /* gray-600 */ | |
| color: #d1d5db; /* gray-300 */ | |
| } | |
| html.dark input::placeholder, | |
| html.dark textarea::placeholder { | |
| color: #9ca3af; /* gray-400 */ | |
| } | |
| html.dark .button-secondary { background-color: #4b5563; color: #d1d5db; } | |
| html.dark .button-secondary:hover { background-color: #374151; } | |
| /* Feedback Message Dark Mode */ | |
| html.dark .feedback-message-success { background-color: #065f46; color: #a7f3d0; } /* emerald */ | |
| html.dark .feedback-message-error { background-color: #991b1b; color: #fecaca; } /* red */ | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 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> | |
| <!-- Optional Links, remove if not separate pages --> | |
| <!-- <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-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Features</a> | |
| <a href="feedback.html" class="text-primary dark:text-blue-400 font-medium">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">Feedback</h1> | |
| <p class="subtitle text-lg text-gray-700 dark:text-gray-300 mb-1">Share your feedback to help us improve</p> | |
| <p class="attribution text-sm text-gray-500 dark:text-gray-400">Powered by Sakshi's Hindi OCR Engine</p> | |
| </section> | |
| <!-- Feedback Form 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-xl mx-auto" id="feedback"> | |
| <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4 flex items-center gap-3"> | |
| <i class="ri-chat-voice-line text-primary dark:text-blue-400"></i> | |
| <span>Your Feedback</span> | |
| </h2> | |
| <!-- Removed feedback-form wrapper div, styling applied to card --> | |
| <p class="text-gray-600 dark:text-gray-400 mb-6">We appreciate your input! Please let us know your thoughts, suggestions, or any issues you encountered with the application.</p> | |
| <!-- Using a standard form element --> | |
| <form id="feedbackFormActual" class="space-y-5"> | |
| <div> | |
| <label for="feedbackText" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 sr-only">Feedback</label> <!-- Screen reader only label --> | |
| <textarea id="feedbackText" name="comment" required rows="6" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" | |
| placeholder="Enter your feedback here..."></textarea> | |
| </div> | |
| <!-- Feedback Message Placeholder - Styled with Tailwind --> | |
| <p id="feedbackMessage" class="info-text text-sm font-medium p-3 rounded-md hidden"></p> | |
| <div class="pt-1"> | |
| <button id="submitFeedback" type="submit" | |
| class="w-full bg-primary text-white px-6 py-2.5 rounded-button hover:bg-blue-700 transition-colors font-medium inline-flex items-center justify-center gap-2 disabled:opacity-50"> | |
| <i class="ri-send-plane-2-line"></i> Submit Feedback | |
| </button> | |
| </div> | |
| </form> | |
| </div> <!-- End Feedback 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> | |
| // --- API Base URL --- | |
| const API_BASE_URL = 'https://sameernotes-ocr.hf.space'; | |
| // --- DOM Elements --- | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const htmlElement = document.documentElement; | |
| const logoutButton = document.getElementById('logoutButton'); | |
| const feedbackForm = document.getElementById('feedbackFormActual'); // Get the form element | |
| const submitFeedbackButton = document.getElementById('submitFeedback'); | |
| const feedbackText = document.getElementById('feedbackText'); | |
| const feedbackMessage = document.getElementById('feedbackMessage'); | |
| // --- THEME TOGGLE LOGIC --- | |
| 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 prefersDark = localStorage.getItem('theme') === 'dark' || (localStorage.getItem('theme') === null && window.matchMedia('(prefers-color-scheme: dark)').matches); | |
| applyTheme(prefersDark); | |
| if (themeToggle) { | |
| themeToggle.addEventListener('change', (event) => { | |
| const isDark = event.target.checked; | |
| applyTheme(isDark); | |
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); | |
| }); | |
| } | |
| // --- Logout Button Logic --- | |
| if (logoutButton) { | |
| logoutButton.addEventListener("click", function() { | |
| console.log("Logout clicked, redirecting..."); | |
| window.location.href = "index.html"; // Redirect to main app/login | |
| }); | |
| } | |
| // --- Feedback Submission Logic --- | |
| function showFeedbackMessage(message, type = 'info') { // type can be 'info', 'success', 'error' | |
| if (!feedbackMessage) return; | |
| feedbackMessage.textContent = message; | |
| // Remove previous color classes | |
| feedbackMessage.classList.remove('hidden', 'feedback-message-success', 'bg-emerald-100', 'text-emerald-800', 'feedback-message-error', 'bg-red-100', 'text-red-800', 'dark:bg-emerald-900', 'dark:text-emerald-200', 'dark:bg-red-900', 'dark:text-red-200'); | |
| if (type === 'success') { | |
| feedbackMessage.classList.add('feedback-message-success', 'bg-emerald-100', 'text-emerald-800', 'dark:bg-emerald-900', 'dark:text-emerald-200'); | |
| } else if (type === 'error') { | |
| feedbackMessage.classList.add('feedback-message-error', 'bg-red-100', 'text-red-800', 'dark:bg-red-900', 'dark:text-red-200'); | |
| } else { | |
| // Default info style (optional) | |
| feedbackMessage.classList.add('text-gray-600', 'dark:text-gray-400'); | |
| } | |
| feedbackMessage.classList.remove('hidden'); // Make it visible | |
| // Auto-hide after 5 seconds | |
| setTimeout(() => { | |
| feedbackMessage.classList.add('hidden'); | |
| feedbackMessage.textContent = ''; | |
| // Clean up color classes after hiding | |
| feedbackMessage.classList.remove('feedback-message-success', 'bg-emerald-100', 'text-emerald-800', 'feedback-message-error', 'bg-red-100', 'text-red-800', 'dark:bg-emerald-900', 'dark:text-emerald-200', 'dark:bg-red-900', 'dark:text-red-200', 'text-gray-600', 'dark:text-gray-400'); | |
| }, 5000); | |
| } | |
| if (feedbackForm) { | |
| feedbackForm.addEventListener('submit', async (event) => { // Use the form's submit event | |
| event.preventDefault(); // Prevent default form submission | |
| submitFeedbackButton.disabled = true; // Disable button during submission | |
| const comment = feedbackText.value.trim(); | |
| if (!comment) { | |
| showFeedbackMessage('Please enter your feedback.', 'error'); | |
| submitFeedbackButton.disabled = false; // Re-enable button | |
| return; | |
| } | |
| try { | |
| // Assuming the API accepts anonymous feedback or you handle authentication differently | |
| const response = await fetch(`${API_BASE_URL}/feedback/`, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| // If authentication is sometimes required, add Authorization header conditionally | |
| // 'Authorization': `Bearer ${accessToken}` // Example if token needed | |
| }, | |
| body: JSON.stringify({ | |
| username: "Anonymous", // Or get username if available | |
| comment: comment | |
| }) | |
| }); | |
| if (response.ok) { | |
| showFeedbackMessage('Feedback submitted successfully! Thank you.', 'success'); | |
| feedbackText.value = ''; // Clear input | |
| } else { | |
| const errorData = await response.json().catch(() => ({ detail: 'Failed to submit feedback.' })); | |
| showFeedbackMessage(`Error: ${errorData.detail || 'Failed to submit feedback.'}`, 'error'); | |
| } | |
| } catch (error) { | |
| showFeedbackMessage("Network error submitting feedback. Please try again.", 'error'); | |
| console.error("Feedback submission error:", error); | |
| } finally { | |
| submitFeedbackButton.disabled = false; // Re-enable button | |
| } | |
| }); | |
| } else { | |
| console.warn("Feedback form element not found"); | |
| } | |
| </script> | |
| </body> | |
| </html> |