Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FEATURE ENHANCEMENT: Family Vacation Itenerary UI Enhancement #1937

Merged
merged 1 commit into from
Nov 10, 2024
Merged

FEATURE ENHANCEMENT: Family Vacation Itenerary UI Enhancement #1937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 67 additions & 25 deletions Travel-Itineraries.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,33 +23,53 @@
</style>
</head>
<body>
<header>
<h2 class="logo">BuddyTrail</h2>
<nav class="navigation">
<a href="index.html" class="active">Home</a>
<a href="about.html">About</a>
<a href="index.html#itineraries">Travel Itineraries</a>
<a href="./contact.html">Contact</a>
</nav>
</header>
<section class="parallax">
<img src="img/hill1.png" id="hill1">
<img src="img/hill2.png" id="hill2">
<img src="img/hill3.png" id="hill3">
<img src="img/hill4.png" id="hill4">
<img src="img/hill5.png" id="hill5">
<img src="img/tree.png" id="tree">
<h2 id="text">Family Vacation</h2>
<img src="img/leaf.png" id="leaf">
<img src="img/plant.png" id="plant">
</section>

<div class="container-fluid py-4">
<h1 class="text-center mb-4">Family Vacation Explorer</h1>

<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Destination Selector</h5>
<div class="card-body" style="background-color:#E7F6FC; border-radius:5px;">
<h5 class="card-title"style="color:#0C1446; font-size:900">Explore Destinations </h5>
<select class="form-select mb-3" aria-label="Select destination">
<option selected>Choose your family-friendly destination</option>
<option selected>Where to Go?</option>
<option value="1">Orlando, Florida</option>
<option value="2">San Diego, California</option>
<option value="3">Yellowstone National Park</option>
</select>
<button type="submit" class="btn btn-primary">Select</button>
</div>
</div>
</div>

<div class="col-md-8 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Day-by-Day Guides</h5>
<div class="card-body"style="background-color:#E7F6FC; border-radius:5px;">
<h5 class="card-title" style="color:#0C1446; font-size:x-large">Your Adventure Timeline</h5>
<div class="accordion" id="dayGuides">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Day 1: Adventure Begins
<span>Day 1: Adventure Begins</span>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#dayGuides">
Expand All @@ -65,7 +85,7 @@ <h2 class="accordion-header">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Day 2: Exploration Day
<span> Day 2: Exploration Day</span>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#dayGuides">
Expand All @@ -87,25 +107,25 @@ <h2 class="accordion-header">
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Interactive Itinerary</h5>
<div class="card-body"style="background-color:#A5CFE3; border-radius:5px;">
<h5 class="card-title"style="color:#0C1446; font-size:x-large">Activity Guide</h5>
<div class="row">
<div class="col-md-6">
<ul class="list-group" id="itineraryList">
<li class="list-group-item d-flex justify-content-between align-items-center">
Visit the local zoo
<li class="list-group-item d-flex justify-content-between align-items-center" style="color: #003329;font-weight: 600;">
Explore the City Zoo
<button class="btn btn-sm btn-danger delete-btn" aria-label="Remove item"><i class="bi bi-trash"></i></button>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Picnic at Central Park
<li class="list-group-item d-flex justify-content-between align-items-center" style="color: #003329;font-weight: 600;">
Lunchtime Picnic in Central Park
<button class="btn btn-sm btn-danger delete-btn" aria-label="Remove item"><i class="bi bi-trash"></i></button>
</li>
</ul>
</div>
<div class="col-md-6">
<div class="input-group mb-3">
<input type="text" class="form-control" id="activityInput" placeholder="Add new activity" aria-label="Add new activity">
<button class="btn btn-outline-secondary" id="addBtn" type="button">Add</button>
<button class="btn btn-secondary" id="addBtn" type="button">Add</button>
</div>
</div>
</div>
Expand All @@ -118,9 +138,9 @@ <h5 class="card-title">Interactive Itinerary</h5>
<div class="col-md-6 mb-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" class="card-img-top" alt="Family vacation">
<div class="card-body">
<h5 class="card-title">Share Your Adventure</h5>
<p class="card-text">Spread the joy of your family vacation! Share your itinerary with friends and family.</p>
<div class="card-body"style="background-color:#DDFFE7; border-radius:5px;">
<h5 class="card-title" style="color:#0C1446; font-size:x-large">Make Memories Together</h5>
<p class="card-text" style="color:#167D7F;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-style:italic">Take your loved ones along for the ride—share your itinerary! relive the best moments with family and friends!</p>
<div class="d-flex justify-content-around">
<button class="btn btn-primary"><i class="bi bi-facebook"></i> Share</button>
<button class="btn btn-info"><i class="bi bi-twitter"></i> Tweet</button>
Expand All @@ -131,24 +151,46 @@ <h5 class="card-title">Share Your Adventure</h5>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Feedback & Tips</h5>
<div class="card-body"style="background-color:#E7F6FC; border-radius:5px;">
<h5 class="card-title" style="color:#0C1446; font-size:x-large">Feedback & Suggestions</h5>
<form>
<div class="mb-3">
<label for="ratingInput" class="form-label">Rate your experience</label>
<label for="ratingInput" class="form-label">Rate Your Adventure</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="ratingInput">
</div>
<div class="mb-3">
<label for="feedbackText" class="form-label">Share your tips</label>
<textarea class="form-control" id="feedbackText" rows="3" placeholder="Your valuable feedback helps other families!"></textarea>
<label for="feedbackText" class="form-label">Share Your Best Tips</label>
<textarea class="form-control" id="feedbackText" rows="3" placeholder="Your feedback helps families make the most of their journeys!"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit Feedback</button>
<button type="submit" class="btn btn-primary">Share Experience</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
//parallax effect
let text = document.getElementById('text');
let leaf = document.getElementById('leaf');
let hill1 = document.getElementById('hill1');
let hill4 = document.getElementById('hill4');
let hill5 = document.getElementById('hill5');
let plant = document.getElementById('plant');

window.addEventListener('scroll', () => {
let value = window.scrollY;

text.style.marginTop = value * 2.5 + 'px';
leaf.style.top = value * -1.5 + 'px';
leaf.style.left = value * 1.5 + 'px';
hill5.style.left = value * 1.5 + 'px';
hill4.style.left = value * -1.5 + 'px';
hill1.style.top = value * 1 + 'px';

plant.style.top = value * 0.5 + 'px';
});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const addButton = document.getElementById('addBtn');
Expand Down
Binary file added img/hill1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/hill2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/hill3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/hill4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/hill5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/leaf.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/plant.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/tree.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
94 changes: 94 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
@import url('https://fonts.googleapis.com/css2?family=poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #f9f9f9;
min-height: 100vh;
overflow-x: hidden;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 100;
}
.logo {
font-size: 2em;
font-weight: 600;
color: #359381;
pointer-events: none;
margin-right: 100px;
}
.navigation a {
text-decoration: none;
color: #359381;
padding: 6px 15px;
border-radius: 20px;
margin: 0 10px;
font-weight: 600;
}
.navigation a:hover,
.navigation a.active {
background: #359381;
color: #fff;
}
.parallax {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
#text {
position: absolute;
font-size: 5em;
font-weight: 600;
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
/* margin-top: 250px; */
}
.parallax img {
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
}
.container-fluid {
position: relative;
background: #003329;
padding: 100px;
}
h5 {
font-weight: 600;
}
.form-select{
background-color: #F6D8CB;
}
li {
color: #003329;
font-weight: 600;
}
span {
color: blueviolet;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.form-range {
background-color: #028476;
border-radius: 12px;
}
.form-label{
color:#0C1446;
font-size: large;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
Loading