Skip to content

Commit

Permalink
Merge branch 'main' into feature/tourguide
Browse files Browse the repository at this point in the history
  • Loading branch information
@DevNandini02
DevNandini02 authored Aug 8, 2024
2 parents bda40a2 + d9f0ea2 commit e7f35f0
Show file tree
Hide file tree
Showing 59 changed files with 5,490 additions and 694 deletions.
265 changes: 246 additions & 19 deletions Adventure.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,15 @@
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.newNav{
opacity:1 !important;
translate: none !important;
rotate: none !important;
scale: none !important;
transform: none !important;
}



.top-btn {
display: none;
Expand Down Expand Up @@ -88,6 +97,157 @@
}
}
</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;
}


@media screen and (max-width:390px) {
.nav__logo {
position: relative;
right: 1.9rem;
}

.contact-btn {
position: relative;
right: 2.5rem;
}

.toggle-container {
position: relative;
right: 2.5rem;

}

.toggle {
width: 130%;
}

.line {
width: 150%;
}

.hamburger {
position: relative;
right: 1rem;
}
}

body.dark-mode .each{
background-color: #ffffffab;

border: 1px solid #ffffff;
}

body.dark-mode .each h5{
color:#0c4581;
}

body.dark-mode .trip__details{
background-color: #0a0035;
}
body.dark-mode .trip__details p{
color:#caf9ff;
}
body.dark-mode .price span{
color:#dbdbdb;
}
body.dark-mode .price{
color:#dbdbdb;
}
body.dark-mode .info .tags i{
color:#8cc0ff;
}

body.dark-mode .trip__details button{
background-color: #cfe4fb;
}

body.dark-mode .trip__details button:hover{
background-color: transparent;
}

#progress-container {
position: fixed ;
top: 0px;
left: 0;
width: 100%;
height: 15px;
z-index: 99990;
/* background: #f3f3f3; */
}

#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 7px;
width: 0;
background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(153, 187, 255) 50%, rgb(0, 184, 250) 100%);
box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
transition: width 0.09s ease-in-out;
border-radius: 10px;
}

</style>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
Expand Down Expand Up @@ -115,6 +275,14 @@
}
</style>

<!-- sticky animation -->
<script type="text/javascript">
window.addEventListener("scroll", function () {
var header = document.querySelector("nav");
header.classList.toggle("sticky", window.scrollY > 50)
})
</script>

</head>

<body>
Expand All @@ -132,29 +300,54 @@
</ul>
<a href="/index.html"><button class="btn">Contact Us</button></a>
</nav> -->
<div class="nav-container">
<div id="progress-container">
<div id="progress-bar"></div>
</div>

<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 &amp; 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">
Expand Down Expand Up @@ -666,15 +859,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,
Expand Down Expand Up @@ -710,10 +903,20 @@ <h4>Contact Us</h4>
opacity: 0,
x:-50,
duration: 0.7,
})
}) -->

</script>

<script>

window.addEventListener('scroll', function() {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById('progress-bar').style.width = scrolled + '%';
});
</script>

<script>

let cards = document.querySelectorAll(".trip__card");
Expand Down Expand Up @@ -788,6 +991,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>
Loading

0 comments on commit e7f35f0

Please sign in to comment.