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: '#f0f8ff', | |
| }, | |
| 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; } | |
| /* 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; } | |
| /* Success message dark */ | |
| html.dark #feedbackSuccessMessage { | |
| background-color: #065f46; /* emerald-800 */ | |
| color: #a7f3d0; /* emerald-200 */ | |
| border-color: #047857; /* emerald-700 */ | |
| } | |
| </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> | |
| <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> | |
| </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">Help us improve by sharing your thoughts</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-2xl 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-mail-send-line text-primary dark:text-blue-400 text-3xl"></i> | |
| <span>Submit Your Feedback</span> | |
| </h2> | |
| <!-- Success Message Placeholder --> | |
| <div id="feedbackSuccessMessage" class="hidden bg-emerald-100 border border-emerald-300 text-emerald-800 dark:bg-emerald-900 dark:bg-opacity-60 dark:border-emerald-700 dark:text-emerald-200 px-4 py-3 rounded-md text-sm mb-6" role="alert"> | |
| <p><strong class="font-medium">Thank you!</strong> Your feedback has been submitted successfully.</p> | |
| </div> | |
| <form id="feedbackForm" class="space-y-5"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label> | |
| <input type="text" id="name" name="name" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" | |
| placeholder="Your Name"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label> | |
| <input type="email" id="email" name="email" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" | |
| placeholder="you@example.com"> | |
| </div> | |
| <div> | |
| <label for="feedback" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Feedback / Comments</label> | |
| <textarea id="feedback" name="feedback" rows="5" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" | |
| placeholder="Please share your experience, suggestions, or any issues you encountered..."></textarea> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" | |
| class="w-full sm:w-auto 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> Send 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> | |
| // --- 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."); | |
| } | |
| // --- Feedback Form Logic --- | |
| const feedbackForm = document.getElementById('feedbackForm'); | |
| const successMessage = document.getElementById('feedbackSuccessMessage'); | |
| if (feedbackForm) { | |
| feedbackForm.addEventListener('submit', function(event) { | |
| event.preventDefault(); // Prevent default form submission | |
| // Basic validation (Tailwind uses :required for browser validation) | |
| // You could add more JS validation here if needed | |
| // Simulate submission (Replace with actual fetch/API call) | |
| console.log('Feedback form submitted (simulation)'); | |
| const formData = new FormData(feedbackForm); | |
| for (let [key, value] of formData.entries()) { | |
| console.log(`${key}: ${value}`); | |
| } | |
| // Clear the form | |
| feedbackForm.reset(); | |
| // Show success message | |
| if (successMessage) { | |
| successMessage.classList.remove('hidden'); | |
| // Optional: Hide the message after a few seconds | |
| setTimeout(() => { | |
| successMessage.classList.add('hidden'); | |
| }, 5000); // Hide after 5 seconds | |
| } | |
| alert('Thank you for your feedback! (Simulation)'); // Simple alert for now | |
| }); | |
| } else { | |
| console.warn("Feedback form not found."); | |
| } | |
| </script> | |
| </body> | |
| </html> |