-
Notifications
You must be signed in to change notification settings - Fork 601
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1365 from Vin205/main
feat: Added local events
- Loading branch information
Showing
7 changed files
with
281 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Health and Safety Alerts</title> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #f4f4f4; | ||
| margin: 0; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| /* Modal Container */ | ||
| .modal { | ||
| display: none; | ||
| position: fixed; | ||
| z-index: 1000; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| overflow: auto; | ||
| background-color: rgba(0, 0, 0, 0.7); /* Black background with opacity */ | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| /* Modal Content */ | ||
| .modal-content { | ||
| background-color: #fff; | ||
| margin: 15% auto; | ||
| padding: 20px; | ||
| border: 1px solid #888; | ||
| width: 90%; | ||
| max-width: 500px; | ||
| border-radius: 10px; | ||
| text-align: center; | ||
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); | ||
| } | ||
|
|
||
| /* Close Button */ | ||
| .close { | ||
| color: #aaa; | ||
| float: right; | ||
| font-size: 28px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .close:hover, | ||
| .close:focus { | ||
| color: black; | ||
| text-decoration: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .modal-header { | ||
| font-size: 24px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .modal-body { | ||
| font-size: 18px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .modal-body img { | ||
| max-width: 100%; | ||
| height: auto; | ||
| margin-bottom: 20px; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .btn { | ||
| padding: 10px 20px; | ||
| font-size: 16px; | ||
| color: white; | ||
| background-color: #f44336; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .btn:hover { | ||
| background-color: #d32f2f; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h1>Health and Safety Alerts</h1> | ||
| <p>Click the buttons below to see different health and safety alerts.</p> | ||
|
|
||
| <button class="btn" onclick="showModal('Health Alert', 'High temperature detected! Take immediate action to cool down.', 'saf.png')">Show Health Alert</button> | ||
| <button class="btn" onclick="showModal('Safety Alert', 'Unsafe chemical detected! Evacuate the area immediately.', 'chem.jpg')">Show Safety Alert</button> | ||
|
|
||
| <!-- The Modal --> | ||
| <div id="alertModal" class="modal"> | ||
| <div class="modal-content"> | ||
| <span class="close" onclick="closeModal()">×</span> | ||
| <div class="modal-header" id="modalHeader">Alert Title</div> | ||
| <div class="modal-body"> | ||
| <img id="modalImage" src="" alt="Alert Image"> | ||
| <p id="modalMessage">This is the alert message.</p> | ||
| </div> | ||
| <button class="btn" onclick="closeModal()">Close Alert</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| function showModal(title, message, imageUrl) { | ||
| const modal = document.getElementById('alertModal'); | ||
| const modalHeader = document.getElementById('modalHeader'); | ||
| const modalMessage = document.getElementById('modalMessage'); | ||
| const modalImage = document.getElementById('modalImage'); | ||
|
|
||
| modalHeader.textContent = title; | ||
| modalMessage.textContent = message; | ||
| modalImage.src = imageUrl; | ||
|
|
||
| modal.style.display = 'flex'; | ||
| } | ||
|
|
||
| function closeModal() { | ||
| const modal = document.getElementById('alertModal'); | ||
| modal.style.display = 'none'; | ||
| } | ||
|
|
||
| // Close the modal if the user clicks outside the modal content | ||
| window.onclick = function(event) { | ||
| const modal = document.getElementById('alertModal'); | ||
| if (event.target === modal) { | ||
| closeModal(); | ||
| } | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Local Events & Festivals</title> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #f4f4f4; | ||
| } | ||
| header { | ||
| background-color: #333; | ||
| color: white; | ||
| padding: 1em; | ||
| text-align: center; | ||
| } | ||
| #events { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| padding: 1em; | ||
| } | ||
| .event-card { | ||
| background-color: white; | ||
| border: 1px solid #ddd; | ||
| border-radius: 8px; | ||
| margin: 10px; | ||
| padding: 15px; | ||
| width: 300px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| } | ||
| .event-card img { | ||
| width: 100%; | ||
| height: auto; | ||
| border-radius: 8px 8px 0 0; | ||
| } | ||
| .event-card h2 { | ||
| font-size: 1.5em; | ||
| margin: 10px 0; | ||
| } | ||
| .event-card p { | ||
| font-size: 1em; | ||
| margin-bottom: 10px; | ||
| } | ||
| .event-card .date { | ||
| font-weight: bold; | ||
| color: #333; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>Discover Local Events & Festivals</h1> | ||
| </header> | ||
|
|
||
| <section id="events"> | ||
| <!-- Events will be dynamically inserted here --> | ||
| </section> | ||
|
|
||
| <script> | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const events = [ | ||
| { | ||
| title: "Paris Marathon", | ||
| date: "13 April 2025", | ||
| description: "Join us to run the largest path with enthusiasm and enjoy the marathon.", | ||
| image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLgjtGK_igiNGcVfS_CAGFgC0-afxp7pKDVQ&s" | ||
| }, | ||
| { | ||
| title: "Dubai International Film Festival", | ||
| date: "19 June 2024", | ||
| description: "Celebrate the Film Festival with amazing performance of famous artists.", | ||
| image: "https://variety.com/wp-content/uploads/2018/04/15th-edition-of-the-region_s-leading-film-festival-to-be-held-in-2019.jpg" | ||
| }, | ||
| { | ||
| title: "Goa Carnival", | ||
| date: "9th to 13th February 2024", | ||
| description: "Experience the magic of Goan culture, food and festival vibes.", | ||
| image: "https://upload.wikimedia.org/wikipedia/en/1/1f/Goa_Carnaval.jpg" | ||
| } | ||
| ]; | ||
|
|
||
| const eventsSection = document.getElementById("events"); | ||
|
|
||
| events.forEach(event => { | ||
| const eventCard = document.createElement("div"); | ||
| eventCard.className = "event-card"; | ||
|
|
||
| eventCard.innerHTML = ` | ||
| <img src="${event.image}" alt="${event.title}"> | ||
| <h2>${event.title}</h2> | ||
| <p class="date">${event.date}</p> | ||
| <p>${event.description}</p> | ||
| `; | ||
|
|
||
| eventsSection.appendChild(eventCard); | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
