-
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 remote-tracking branch 'upstream/main'
- Loading branch information
Showing
31 changed files
with
1,713 additions
and
406 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,3 @@ | ||
| { | ||
| "liveServer.settings.port": 5501 | ||
| } |
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 |
|---|---|---|
|
|
@@ -88,6 +88,67 @@ | |
| } | ||
| } | ||
| </style> | ||
| <style> | ||
| /* Toggle button styles */ | ||
| .toggle-container { | ||
| position: fixed; /* Change this as needed for positioning */ | ||
| top: 10px; | ||
| right: 10px; | ||
| } | ||
|
|
||
| .toggle { | ||
| appearance: none; | ||
| outline: none; | ||
| cursor: pointer; | ||
| width: 100%; | ||
| height: 100%; | ||
| box-shadow: inset calc(var(--size)* 0.33) calc(var(--size)* -0.25) 0; | ||
| border-radius: 999px; | ||
| color: hsl(240, 100%, 95%); | ||
| transition: all 500ms; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| } | ||
|
|
||
| .toggle:checked { | ||
| background-color: #333; | ||
| } | ||
| .toggle:checked:before { | ||
| transform: translateX(25px); | ||
| } | ||
| .sticky { | ||
| margin: 10px 5px; | ||
| border-radius: 10px; | ||
| margin-top: 0.5rem; | ||
| background: linear-gradient(#002152, #271050); | ||
| scale: 0.99; | ||
| } | ||
| nav { | ||
| background-color: #123456; | ||
| position: fixed; | ||
| top: 0; | ||
| width: 100%; | ||
| z-index: 1001; | ||
| } | ||
| /* Dark mode feature */ | ||
| body.dark-mode{ | ||
| --secondary-color:#0e1525; | ||
| --btn-border: red; | ||
| } | ||
| body.dark-mode { | ||
| background-color: var(--secondary-color); | ||
| } | ||
|
|
||
| body.dark-mode .nav-container { | ||
| background-color: #343a40; | ||
| } | ||
|
|
||
| body.dark-mode .section__container { | ||
| background-color: #002152; | ||
| color: #ffffff; | ||
| } | ||
| </style> | ||
|
|
||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" /> | ||
| <link rel="stylesheet" href="styles.css" /> | ||
|
|
@@ -132,29 +193,50 @@ | |
| </ul> | ||
| <a href="/index.html"><button class="btn">Contact Us</button></a> | ||
| </nav> --> | ||
| <div class="nav-container"> | ||
| <nav class="newNav"> | ||
| <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a> | ||
| <div style="display: flex; flex-direction: row; align-items: center;"> | ||
| <img src="./img/tour1.png" class="sitelogo"> | ||
|
|
||
| <a href="#" class="nav__logo aos-init aos-animate" data-aos="fade-right">Tourguide<span>.</span></a> | ||
| </div> | ||
|
|
||
| <ul class="navLinks"> | ||
| <li class="link" data-aos="fade-down"><a href="./index.html#Home">Home</a></li> | ||
| <li class="link" data-aos="fade-down"><a href="./index.html#AboutUs">AboutUs</a></li> | ||
| <li class="link" data-aos="fade-down"><a href="./index.html#Destinations">Destinations</a></li> | ||
| <li class="link" data-aos="fade-down"><a href="./index.html#trip">Pricing</a></li> | ||
| <li class="link" data-aos="fade-down"><a href="./index.html#testimonials">Testimonials</a></li> | ||
| <li class="link" data-aos="fade-down"><a href="./index.html#ReviewGallery">Reviews</a></li> | ||
| <li class="link" data-aos="fade-down"><a href="./feedback.html">Rate Us?</a></li> | ||
| <li class="link" data-aos="fade-down"><a href="./login.html">Login</a></li> | ||
| </ul> | ||
| <a href="./index.html#contact" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;" | ||
| data-aos="fade-down">Contact Us</button></a> | ||
| <div class="hamburger" data-aos="fade-down"> | ||
| <li class="link aos-init aos-animate" id="View-link" data-aos=""><a href="mapa.html">View</a></li> | ||
| <li class="link aos-init aos-animate" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li> | ||
| <li class="link aos-init aos-animate" data-aos=""><a href="#Home">Home</a></li> | ||
| <li class="link aos-init aos-animate" data-aos=""><a href="#AboutUs">About</a></li> | ||
| <li class="link dropdown aos-init aos-animate" data-aos=""> | ||
| <a href="#Services" class="dropdown">Services</a> | ||
| <ul class="dropdown-menu"> | ||
| <li><a href="#Destinations">Destination</a></li> | ||
| <li><a href="#trip">Prices</a></li> | ||
| <li><a href="#ReviewGallery">Trip Gallery</a></li> | ||
| <li><a href="#tourist">Tourist Guide</a></li> | ||
| <li><a href="#hotel">Hotel & Resort</a></li> | ||
| </ul> | ||
| </li> | ||
| <li class="link aos-init aos-animate" data-aos=""><a href="#testimonials">Testimonial</a></li> | ||
| <li class="link aos-init aos-animate" data-aos=""><a href="feedback.html">Rate Us?</a></li> | ||
| <li class="link aos-init aos-animate" data-aos=""><a href="#cnt-form">Contact Us</a></li> | ||
| </ul> | ||
|
|
||
| <a href="newLogin.html" class="contact-btn" id="nav-login-btn"><button class="btn login aos-init aos-animate" id="btn-style" data-aos="fade-down" style="display: block;">Login/SignUp</button></a> | ||
| <a href="mapa.html" class="contact-btn" id="nav-view-btn"><button class="btn aos-init aos-animate" id="btn-style" style="margin: 0;" data-aos="fade-down">view <map name=""></map></button></a> | ||
|
|
||
| <a href="loginPage.html" class="contact-btn"><button class="btn aos-init aos-animate" id="logout-btn" style="margin: 0; display: none;" data-aos="fade-down" disabled="">Log Out</button></a> | ||
|
|
||
| <!-- <a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style" | ||
| style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a> --> | ||
|
|
||
| <div class="toggle-container aos-init aos-animate" data-aos="fade-down"> | ||
| <input id="themeToggle" class="toggle" type="checkbox"> | ||
| </div> | ||
| <div class="hamburger aos-init aos-animate" data-aos="fade-down"> | ||
| <div class="line"></div> | ||
| <div class="line"></div> | ||
| <div class="line"></div> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| <section class="trip" id="trip"> | ||
|
|
||
| <div class="section__container trip__container"> | ||
|
|
@@ -666,15 +748,15 @@ <h4>Contact Us</h4> | |
| <button class="top-btn" id="goToTopBtn" onclick="goToTop()"><i class="fa-solid fa-chevron-up" | ||
| style="color: #ffffff;"></i></button> | ||
|
|
||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" | ||
| <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" | ||
| integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" | ||
| crossorigin="anonymous" referrerpolicy="no-referrer"></script> | ||
| <script> | ||
| <script> --> | ||
|
|
||
|
|
||
|
|
||
| var tl = gsap.timeline(); | ||
| <!-- var tl = gsap.timeline(); | ||
| tl.from("nav", { | ||
| opacity: 0, | ||
|
|
@@ -710,7 +792,7 @@ <h4>Contact Us</h4> | |
| opacity: 0, | ||
| x:-50, | ||
| duration: 0.7, | ||
| }) | ||
| }) --> | ||
|
|
||
| </script> | ||
|
|
||
|
|
@@ -788,6 +870,30 @@ <h4>Contact Us</h4> | |
| } | ||
| } | ||
| </script> | ||
| <script> | ||
| document.addEventListener('DOMContentLoaded', () => { | ||
| const toggleCheckbox = document.getElementById('themeToggle'); | ||
| const body = document.body; | ||
|
|
||
| // Load saved dark mode preference from localStorage | ||
| if (localStorage.getItem('dark-mode') === 'enabled') { | ||
| body.classList.add('dark-mode'); | ||
| toggleCheckbox.checked = true; | ||
| } else { | ||
| toggleCheckbox.checked = false; | ||
| } | ||
|
|
||
| toggleCheckbox.addEventListener('change', () => { | ||
| if (toggleCheckbox.checked) { | ||
| body.classList.add('dark-mode'); | ||
| localStorage.setItem('dark-mode', 'enabled'); | ||
| } else { | ||
| body.classList.remove('dark-mode'); | ||
| localStorage.setItem('dark-mode', 'disabled'); | ||
| } | ||
| }); | ||
| }); | ||
| </script> | ||
| <script src="./Image-Gallery/script.js"></script> | ||
|
|
||
| </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
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
Oops, something went wrong.