Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Saudi Tourism</title> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| body { | |
| background-image: url('./assets/images/wallpaper.png'); | |
| background-size: 100% auto; | |
| background-repeat: no-repeat; | |
| background-position: top center; | |
| min-height: 2825px; | |
| } | |
| .navbar { | |
| display: flex; | |
| justify-content: center; | |
| background-color: #444; | |
| padding: 10px 0; | |
| margin-top: 338px; | |
| } | |
| .navbar a { | |
| text-decoration: none; | |
| color: white; | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| font-family: Tahoma, sans-serif; | |
| } | |
| .navbar a:hover { | |
| background-color: #666; | |
| color: #fff; | |
| } | |
| .image-container { | |
| display: flex; | |
| justify-content: center; | |
| gap: 384px; | |
| margin-top: 20px; | |
| } | |
| .image-item { | |
| text-align: center; | |
| } | |
| .image-item img { | |
| border: 2px solid #000; | |
| border-radius: 10px; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .buttons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 48px; | |
| margin-top: 10px; | |
| } | |
| .buttons img { | |
| cursor: pointer; | |
| width: 50px; | |
| height: 50px; | |
| } | |
| /* Contact Us and Feedback Forms */ | |
| .form-box { | |
| position: absolute; /* Dynamic positioning */ | |
| width: 300px; | |
| padding: 20px; | |
| background-color: lightgrey; | |
| border: 1px solid #ccc; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| z-index: 1000; /* Ensure forms are above all other content */ | |
| } | |
| #contactForm { | |
| left: 20px; | |
| } | |
| #feedbackForm { | |
| right: 20px; | |
| } | |
| .form-box h3 { | |
| margin: 0 0 15px; | |
| font-size: 18px; | |
| } | |
| .form-box input, | |
| .form-box textarea { | |
| width: calc(100% - 12px); | |
| padding: 8px; | |
| margin-bottom: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| .form-box button { | |
| width: 100%; | |
| padding: 10px; | |
| background-color: #007bff; | |
| color: #fff; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .form-box button:hover { | |
| background-color: #0056b3; | |
| } | |
| .success-message { | |
| display: none; | |
| margin-top: 10px; | |
| color: green; | |
| font-size: 14px; | |
| } | |
| </style> | |
| <script> | |
| // Position the forms based on wallpaper height and add 0.7 cm offset | |
| window.onload = () => { | |
| const wallpaperHeight = document.body.offsetHeight; // Height of the wallpaper | |
| // Get the forms | |
| const contactForm = document.getElementById('contactForm'); | |
| const feedbackForm = document.getElementById('feedbackForm'); | |
| // Convert 0.7 cm to pixels (1 cm = 37.7952755906 px) | |
| const offsetInPixels = 0.7 * 37.7952755906; | |
| // Position them where the wallpaper ends plus the offset | |
| const positionY = wallpaperHeight + offsetInPixels; | |
| contactForm.style.top = `${positionY}px`; | |
| feedbackForm.style.top = `${positionY}px`; | |
| }; | |
| // Scroll to and focus on form input | |
| function scrollToForm(formId, inputId) { | |
| document.getElementById(formId).scrollIntoView({ behavior: 'smooth' }); | |
| setTimeout(() => { | |
| document.getElementById(inputId).focus(); | |
| }, 500); | |
| } | |
| // Function to handle form submission | |
| function handleFormSubmit(event, formId, successMessageId) { | |
| event.preventDefault(); | |
| // Clear the form | |
| const form = document.getElementById(formId); | |
| form.reset(); | |
| // Display the success message | |
| const successMessage = document.getElementById(successMessageId); | |
| successMessage.style.display = "block"; | |
| // Hide the success message after 10 seconds | |
| setTimeout(() => { | |
| successMessage.style.display = "none"; | |
| }, 10000); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Navigation Bar --> | |
| <div class="navbar"> | |
| <a href="Who.html">Who we Are</a> | |
| <a href="services.html">Our Services</a> | |
| <a href="#" onclick="scrollToForm('contactForm', 'contactName')">Contact Us</a> | |
| <a href="#" onclick="scrollToForm('feedbackForm', 'feedbackName')">Send Feedback</a> | |
| <a href="gallery.html">Gallery</a> | |
| <a href="entertainment.html">Entertainment</a> | |
| <a href="destination.html">Tourist Destinations</a> | |
| <a href="todo.html">Things to Do</a> | |
| <a href="blog.html">Blog</a> | |
| <a href="rules.html">Rules and Regulations</a> | |
| </div> | |
| <!-- Images Section --> | |
| <div class="image-container"> | |
| <!-- Female Image Section --> | |
| <div class="image-item"> | |
| <img src="./assets/images/female.jpg" alt="Female Assistance"> | |
| <div class="buttons"> | |
| <img src="./assets/images/Button_Ar.png" alt="Arabic Button" onclick="respondFemaleArabic()"> | |
| <img src="./assets/images/Button_En.png" alt="English Button" onclick="respondFemaleEnglish()"> | |
| </div> | |
| </div> | |
| <!-- Male Image Section --> | |
| <div class="image-item"> | |
| <img src="./assets/images/male.jpg" alt="Male Assistance"> | |
| <div class="buttons"> | |
| <img src="./assets/images/Button_Ar.png" alt="Arabic Button" onclick="respondMaleArabic()"> | |
| <img src="./assets/images/Button_En.png" alt="English Button" onclick="respondMaleEnglish()"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Us Form --> | |
| <div class="form-box" id="contactForm"> | |
| <h3>Contact Us</h3> | |
| <form id="contactFormFields" onsubmit="handleFormSubmit(event, 'contactFormFields', 'contactSuccessMessage')"> | |
| <input type="text" id="contactName" placeholder="Your Name" required> | |
| <input type="email" id="contactEmail" placeholder="Your Email" required> | |
| <textarea id="contactMessage" placeholder="Your Message" rows="4" required></textarea> | |
| <button type="submit">Send</button> | |
| </form> | |
| <div class="success-message" id="contactSuccessMessage">Your message has been sent successfully.</div> | |
| </div> | |
| <!-- Feedback Form --> | |
| <div class="form-box" id="feedbackForm"> | |
| <h3>Feedback</h3> | |
| <form id="feedbackFormFields" onsubmit="handleFormSubmit(event, 'feedbackFormFields', 'feedbackSuccessMessage')"> | |
| <input type="text" id="feedbackName" placeholder="Your Name" required> | |
| <input type="email" id="feedbackEmail" placeholder="Your Email" required> | |
| <textarea id="feedbackMessage" placeholder="Your Feedback" rows="4" required></textarea> | |
| <button type="submit">Send</button> | |
| </form> | |
| <div class="success-message" id="feedbackSuccessMessage">Your message has been sent successfully.</div> | |
| </div> | |
| </body> | |
| </html> | |