Spaces:
Running
Running
File size: 17,282 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 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 | <!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 - 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> |