Spaces:
Running
Running
| <html lang="en" class=""> <!-- Start without 'dark' initially --> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact Us - AI Text Tools</title> <!-- Changed Title --> | |
| <!-- Tailwind CSS via CDN --> | |
| <script src="https://cdn.tailwindcss.com/3.4.1"></script> | |
| <script> | |
| // Tailwind config (Keep as is) | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { primary: '#1a73e8', secondary: '#e8f0fe' }, | |
| borderRadius: { 'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px', 'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px', 'full': '9999px', 'button': '8px' } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Fonts (Keep as is) --> | |
| <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=Pacifico&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Icons (Keep as is) --> | |
| <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"> | |
| <!-- Custom Styles (Keep as is, including focus, dark mode, etc.) --> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } | |
| .hindi-font { font-family: 'Noto Sans Devanagari', sans-serif; } | |
| .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: #1a73e8; } | |
| .custom-switch-input:checked + .custom-switch-slider:before { transform: translateX(26px); } | |
| *:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.3); } | |
| /* Base Dark Mode */ | |
| html.dark body { background-color: #1a202c; color: #e2e8f0; } | |
| html.dark header, html.dark footer { background-color: #2d3748; color: #e2e8f0; } | |
| html.dark .card, html.dark .auth-card, html.dark .result-card { background-color: #2d3748; border-color: #4a5568; } | |
| 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 strong, html.dark button:not(.bg-red-500):not(.bg-green-600), html.dark a { color: #e2e8f0; } | |
| html.dark a.text-primary { color: #60a5fa; } | |
| html.dark .text-gray-600, html.dark .text-gray-700, html.dark .text-gray-800, html.dark .text-gray-900 { color: #a0aec0; } | |
| html.dark .text-gray-500, html.dark .text-gray-400 { color: #718096; } | |
| html.dark .text-muted { color: #718096; } | |
| html.dark .bg-white { background-color: #2d3748 ; } | |
| html.dark .bg-gray-50 { background-color: #1a202c ; } | |
| html.dark .bg-gray-100 { background-color: #374151 ; } | |
| html.dark .border-gray-100, html.dark .border-gray-200 { border-color: #4a5568 ; } | |
| html.dark .hover\:bg-gray-50:hover { background-color: #4a5568 ; } | |
| /* Dark mode Forms */ | |
| html.dark input, html.dark textarea { background-color: #1f2937; border-color: #4b5563; color: #e5e7eb; } | |
| html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7280; } | |
| html.dark .error-message { background-color: #450a0a; color: #fecaca; border-color: #7f1d1d; } | |
| html.dark .success-message { background-color: #064e3b; color: #a7f3d0; border-color: #047857;} | |
| html.dark .spinner { border-color: rgba(255, 255, 255, 0.1); border-left-color: #60a5fa; } | |
| /* General Loading Spinner */ | |
| .spinner { border: 3px solid rgba(255, 255, 255, 0.3); width: 16px; height: 16px; border-radius: 50%; border-left-color: #fff; animation: spin 1s ease infinite; } | |
| @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | |
| /* Form Message Styling */ | |
| .form-message { padding: 0.75rem 1rem; border-radius: 8px; margin-top: 1rem; font-weight: 500; border: 1px solid; font-size: 0.9rem; display: none; } | |
| .error-message { color: #dc2626; background-color: #fee2e2; border-color: #fecaca; } | |
| .success-message { color: #059669; background-color: #d1fae5; border-color: #a7f3d0; } | |
| /* Input Field Style (consistent) */ | |
| .input-field { | |
| display: block; | |
| width: 100%; | |
| padding: 0.5rem 0.75rem; /* Adjusted padding */ | |
| border: 1px solid #d1d5db; /* Default border */ | |
| border-radius: 8px; /* Match button radius */ | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| font-size: 0.875rem; /* sm text */ | |
| } | |
| html.dark .input-field { | |
| background-color: #374151; /* Dark background */ | |
| border-color: #4b5563; /* Dark border */ | |
| color: #e5e7eb; /* Dark text */ | |
| } | |
| .input-field:focus { | |
| outline: none; | |
| border-color: #1a73e8; /* primary color focus */ | |
| box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.3); /* primary color focus ring */ | |
| } | |
| html.dark .input-field:focus { | |
| border-color: #60a5fa; /* primary dark focus */ | |
| box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3); /* primary dark focus ring */ | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200"> | |
| <!-- Header (Same as index.html, but update active nav link if desired) --> | |
| <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"> | |
| <div class="flex items-center"> | |
| <a href="index.html" class="text-2xl font-['Pacifico'] text-primary dark:text-blue-400 mr-8" data-lang-en="AI Text Tools" data-lang-hi="एआई टेक्स्ट उपकरण">AI Text Tools</a> | |
| <!-- *** START: Updated Navigation Bar *** --> | |
| <nav id="mainNav" class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Home" data-lang-hi="होम">Home</a> | |
| <!-- Assuming recognizer.html is the main tool page, link from index.html might be better --> | |
| <a href="recognizer.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Recognize" data-lang-hi="पहचानें">Recognize</a> | |
| <!-- Assuming examples.html exists --> | |
| <a href="examples.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Examples" data-lang-hi="उदाहरण">Examples</a> | |
| <!-- Assuming technology.html exists --> | |
| <a href="technology.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Technology" data-lang-hi="तकनीक">Technology</a> | |
| <!-- Assuming about.html exists --> | |
| <a href="about.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="About" data-lang-hi="बारे में">About</a> | |
| <!-- Link to contact.html --> | |
| <a href="contact.html" class="nav-link text-primary dark:text-blue-400 font-medium" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</a> | |
| <!-- Active link for this page --> | |
| <a href="feedback.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Feedback" data-lang-hi="प्रतिक्रिया">Feedback</a> | |
| </nav> | |
| </div> | |
| <!-- Right side header items (Theme, Lang Toggles) --> | |
| <div class="flex items-center space-x-4"> | |
| <div class="items-center space-x-2 hidden md:flex"> <span class="text-sm text-gray-600 dark:text-gray-400">EN</span> <label class="custom-switch"><input type="checkbox" id="languageToggle" class="custom-switch-input"><span class="custom-switch-slider"></span></label> <span class="text-sm text-gray-600 dark:text-gray-400 hindi-font">हिंदी</span> </div> | |
| <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> | |
| <!-- Removed Logout Button and User Icons for contact page --> | |
| <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-12"> <!-- Increased padding --> | |
| <h1 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-4" data-lang-en="Contact Us" data-lang-hi="हमसे संपर्क करें">Contact Us</h1> | |
| <p class="text-center text-gray-600 dark:text-gray-400 mb-10" data-lang-en="We'd love to hear from you! Send us your feedback or questions." data-lang-hi="हमें आपसे सुनना प्रिय लगेगा! अपनी प्रतिक्रिया या प्रश्न हमें भेजें।"> | |
| We'd love to hear from you! Send us your feedback or questions. | |
| </p> | |
| <div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card"> | |
| <form id="contactForm" novalidate> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="contactName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-lang-en="Your Name" data-lang-hi="आपका नाम">Your Name</label> | |
| <input type="text" id="contactName" name="name" required autocomplete="name" class="input-field" placeholder="John Doe"> | |
| </div> | |
| <div> | |
| <label for="contactEmail" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-lang-en="Your Email" data-lang-hi="आपका ईमेल">Your Email</label> | |
| <input type="email" id="contactEmail" name="email" required autocomplete="email" class="input-field" placeholder="you@example.com"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="contactSubject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-lang-en="Subject" data-lang-hi="विषय">Subject</label> | |
| <input type="text" id="contactSubject" name="subject" class="input-field" placeholder="Feedback about OCR"> | |
| </div> | |
| <div class="mb-8"> | |
| <label for="contactMessage" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-lang-en="Message" data-lang-hi="संदेश">Message</label> | |
| <textarea id="contactMessage" name="message" rows="5" required class="input-field" placeholder="Enter your message here..."></textarea> | |
| </div> | |
| <div id="formMessage" class="form-message"></div> <!-- For Success/Error Messages --> | |
| <button type="submit" id="submitContactButton" class="w-full flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-button shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800 disabled:opacity-50"> | |
| <span data-lang-en="Send Message" data-lang-hi="संदेश भेजें">Send Message</span> | |
| <i class="ri-send-plane-line text-base"></i> | |
| <div class="spinner hidden ml-2"></div> <!-- Loading Spinner --> | |
| </button> | |
| </form> | |
| </div> | |
| </main> | |
| <!-- Footer (Same as index.html) --> | |
| <footer class="bg-gray-900 text-gray-400 py-12 mt-16"> <!-- Increased margin top --> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <a href="index.html" class="text-2xl font-['Pacifico'] text-white mb-4 inline-block" data-lang-en="AI Text Tools" data-lang-hi="एआई टेक्स्ट उपकरण">AI Text Tools</a> | |
| <p class="mb-4 text-sm" data-lang-en="AI-powered tools for text analysis and processing." data-lang-hi="पाठ विश्लेषण और प्रसंस्करण के लिए एआई-संचालित उपकरण।">AI-powered tools for text analysis.</p> | |
| <div class="flex 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> | |
| <div> | |
| <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Quick Links" data-lang-hi="त्वरित लिंक्स">Quick Links</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="index.html" class="hover:text-white" data-lang-en="Home" data-lang-hi="होम">Home</a></li> | |
| <li><a href="index.html#ocrContent" class="hover:text-white" data-lang-en="Tools" data-lang-hi="उपकरण">Tools</a></li> | |
| <li><a href="#" class="hover:text-white" data-lang-en="About" data-lang-hi="बारे में">About</a></li> | |
| <li><a href="contact.html" class="hover:text-white" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Resources" data-lang-hi="संसाधन">Resources</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:text-white" data-lang-en="API Docs (TBD)" data-lang-hi="एपीआई डॉक्स (TBD)">API Docs (TBD)</a></li> | |
| <li><a href="#" class="hover:text-white" data-lang-en="GitHub Repo" data-lang-hi="गिटहब रेपो">GitHub Repo</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-start"><i class="ri-mail-line mt-1 mr-2"></i><span>your-email@example.com</span></li> | |
| <!-- Maybe add phone number or address if needed --> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center"> | |
| <p class="text-sm">© 2024 Your Name/Org | AI Text Tools Project</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Base Theme/Language Script (Keep as is) --> | |
| <script> | |
| 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; } } | |
| 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'); }); } else { console.warn("Theme toggle button not found."); } | |
| const languageToggle = document.getElementById('languageToggle'); | |
| const langElements = document.querySelectorAll('[data-lang-en]'); | |
| function applyLanguage(lang) { htmlElement.setAttribute('lang', lang); langElements.forEach(el => { const text = el.getAttribute(`data-lang-${lang}`); if (text) { const icon = el.querySelector('i'); if (icon && el.childNodes.length > 1) { let updated = false; el.childNodes.forEach(node => { if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') { node.textContent = ` ${text} `; updated = true; } }); if (!updated) { const currentText = el.getAttribute(`data-lang-${lang === 'en' ? 'hi' : 'en'}`); if(currentText) el.innerHTML = el.innerHTML.replace(currentText, text);}} else { el.textContent = text; } } }); if (languageToggle) languageToggle.checked = (lang === 'hi'); localStorage.setItem('language', lang); } | |
| const savedLang = localStorage.getItem('language') || 'en'; | |
| if (languageToggle) { languageToggle.addEventListener('change', (event) => { const newLang = event.target.checked ? 'hi' : 'en'; applyLanguage(newLang); }); } else { console.warn("Language toggle button not found."); } | |
| applyLanguage(savedLang); // Apply language on initial load | |
| </script> | |
| <!-- Contact Form Submission Script --> | |
| <script> | |
| // Define the API endpoint for feedback submission | |
| // MAKE SURE THIS URL IS CORRECT AND THE BACKEND SERVER IS RUNNING | |
| const FEEDBACK_API_ENDPOINT = '/feedback/'; // Adjust if your backend runs elsewhere (e.g., http://localhost:8000/feedback/) | |
| // Get DOM elements | |
| const contactForm = document.getElementById('contactForm'); | |
| const submitButton = document.getElementById('submitContactButton'); | |
| const formMessageDiv = document.getElementById('formMessage'); | |
| const spinner = submitButton ? submitButton.querySelector('.spinner') : null; | |
| // Function to display messages | |
| function showFormMessage(message, isSuccess = true) { | |
| if (!formMessageDiv) return; | |
| formMessageDiv.textContent = message; | |
| formMessageDiv.className = 'form-message'; // Reset classes | |
| if (isSuccess) { | |
| formMessageDiv.classList.add('success-message'); | |
| } else { | |
| formMessageDiv.classList.add('error-message'); | |
| } | |
| formMessageDiv.style.display = 'block'; | |
| } | |
| function hideFormMessage() { | |
| if (formMessageDiv) { | |
| formMessageDiv.style.display = 'none'; | |
| formMessageDiv.textContent = ''; | |
| } | |
| } | |
| // Function to handle loading state | |
| function setFormLoading(isLoading) { | |
| if (!submitButton || !spinner) return; | |
| submitButton.disabled = isLoading; | |
| if (isLoading) { | |
| spinner.classList.remove('hidden'); | |
| // Optional: Reduce opacity of button text | |
| submitButton.querySelector('span').style.opacity = '0.5'; | |
| submitButton.querySelector('i').style.opacity = '0.5'; | |
| } else { | |
| spinner.classList.add('hidden'); | |
| submitButton.querySelector('span').style.opacity = '1'; | |
| submitButton.querySelector('i').style.opacity = '1'; | |
| } | |
| } | |
| if (contactForm && submitButton) { | |
| contactForm.addEventListener('submit', async (event) => { | |
| event.preventDefault(); // Prevent default form submission | |
| hideFormMessage(); // Clear previous messages | |
| // Get form data | |
| const nameInput = document.getElementById('contactName'); | |
| const emailInput = document.getElementById('contactEmail'); | |
| const subjectInput = document.getElementById('contactSubject'); | |
| const messageInput = document.getElementById('contactMessage'); | |
| const name = nameInput.value.trim(); | |
| const email = emailInput.value.trim(); | |
| const subject = subjectInput.value.trim(); // Subject is optional in form, but good to send | |
| const message = messageInput.value.trim(); | |
| // Basic Frontend Validation | |
| if (!name || !email || !message) { | |
| const missing = []; | |
| if (!name) missing.push(languageToggle.checked ? 'नाम' : 'Name'); | |
| if (!email) missing.push(languageToggle.checked ? 'ईमेल' : 'Email'); | |
| if (!message) missing.push(languageToggle.checked ? 'संदेश' : 'Message'); | |
| const errorMessage = (languageToggle.checked ? 'कृपया अनिवार्य फ़ील्ड भरें: ' : 'Please fill in the required fields: ') + missing.join(', '); | |
| showFormMessage(errorMessage, false); | |
| return; | |
| } | |
| // Basic email format check | |
| if (!/\S+@\S+\.\S+/.test(email)) { | |
| const errorMessage = languageToggle.checked ? 'कृपया एक मान्य ईमेल पता दर्ज करें।' : 'Please enter a valid email address.'; | |
| showFormMessage(errorMessage, false); | |
| return; | |
| } | |
| setFormLoading(true); | |
| // Prepare payload for the /feedback/ endpoint | |
| // It expects 'username' and 'comment' | |
| const payload = { | |
| username: name, // Use the name field as username | |
| comment: `Subject: ${subject}\n\nEmail: ${email}\n\nMessage: ${message}` // Combine subject, email, and message | |
| }; | |
| console.log("Sending feedback payload:", payload); | |
| try { | |
| // Send data to the backend (NO authentication needed) | |
| const response = await fetch(FEEDBACK_API_ENDPOINT, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Accept': 'application/json' // Expect JSON response (even for success/error) | |
| }, | |
| body: JSON.stringify(payload) | |
| }); | |
| const responseData = await response.json(); // Try to parse JSON always | |
| if (!response.ok) { | |
| // Handle FastAPI/HTTP errors (usually JSON with 'detail') | |
| const errorDetail = responseData.detail || `Request failed with status ${response.status}`; | |
| throw new Error(errorDetail); | |
| } | |
| // Success! | |
| console.log("Feedback submitted successfully:", responseData); | |
| const successMsg = languageToggle.checked ? 'आपका संदेश सफलतापूर्वक भेज दिया गया है!' : 'Your message has been sent successfully!'; | |
| showFormMessage(successMsg, true); | |
| contactForm.reset(); // Clear the form | |
| } catch (error) { | |
| console.error('Error submitting contact form:', error); | |
| const errorMsg = (languageToggle.checked ? 'संदेश भेजने में त्रुटि हुई: ' : 'Error sending message: ') + error.message; | |
| showFormMessage(errorMsg, false); | |
| } finally { | |
| setFormLoading(false); // Ensure loading state is turned off | |
| } | |
| }); | |
| } else { | |
| console.error("Contact form or submit button not found."); | |
| } | |
| // Initial setup on page load | |
| document.addEventListener('DOMContentLoaded', () => { | |
| applyLanguage(savedLang); // Apply saved language | |
| // Ensure theme is applied correctly on load too | |
| applyTheme(localStorage.getItem('theme') === 'dark'); | |
| console.log("Contact page DOM Loaded and Initialized."); | |
| }); | |
| </script> | |
| </body> | |
| </html> |