Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/TBorundia/Travel_Website
Browse files Browse the repository at this point in the history
  • Loading branch information
@TBorundia
TBorundia committed Aug 8, 2024
2 parents 4ecb83d + e6c44e5 commit fd5c4d7
Show file tree
Hide file tree
Showing 62 changed files with 5,738 additions and 887 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
250 changes: 221 additions & 29 deletions Adventure.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,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 @@ -118,36 +269,43 @@
</head>

<body>
<!-- <nav>
<div class="nav__logo">Tourguide<span>.</span></div>
<ul class="nav__links">
<li class="link"><a href="./index.html">Home</a></li>
<li class="link"><a href="/index.html" >AboutUs</a></li>
<li class="link"><a href="./index.html">Destinations</a></li>
<li class="link"><a href="/index.html">Pricing</a></li>
<li class="link"><a href="/index.html">Testimonials</a></li>
<li class="link"><a href="/index.html">Reviews</a></li>
<li class="link"><a href="login.html">Login</a></li>
</ul>
<a href="/index.html"><button class="btn">Contact Us</button></a>
</nav> -->
<div class="nav-container">
<div class="nav-container" id="top">
<nav class="newNav">
<a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>

<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>
<li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
<li class="link" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
<li class="link" data-aos=""><a href="#Home">Home</a></li>
<li class="link" data-aos=""><a href="#AboutUs">About</a></li>
<li class="link dropdown" 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" data-aos=""><a href="#testimonials">Testimonial</a></li>
<li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
<li class="link" data-aos=""><a href="#cnt-form">Contact Us</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>

<a href="newLogin.html" class="contact-btn" id="nav-login-btn">
<button class="btn login" id="btn-style" data-aos="fade-down">Login/SignUp</button>
</a>
<a href="mapa.html" class="contact-btn" id="nav-view-btn">
<button class="btn" 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" id="logout-btn" style="margin: 0; display: none;" data-aos="fade-down" disabled>Log Out</button>
</a>

<div class="toggle-container" data-aos="fade-down">
<input id="themeToggle" class="toggle" type="checkbox">
</div>
<div class="hamburger" data-aos="fade-down">
<div class="line"></div>
<div class="line"></div>
Expand Down Expand Up @@ -666,15 +824,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 +868,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 +956,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 fd5c4d7

Please sign in to comment.