Skip to content

Commit

Permalink
Merge pull request #1081 from TBorundia/main
Browse files Browse the repository at this point in the history 
feat: Trip Planner page UI
  • Loading branch information
@apu52
apu52 authored Jul 17, 2024
2 parents 2f047d8 + 571b11b commit 9d93e3e
Showing 1 changed file with 207 additions and 118 deletions.
325 changes: 207 additions & 118 deletions plantrip.html
View file
Original file line number Diff line number Diff line change
@@ -1,164 +1,253 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trip Planner</title>
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"
/>
<style>
body {
font-family: 'Nunito Sans', sans-serif;
background-color: #b1e5f748;
margin: 0;
padding: 0;
}

body {
font-family: "Nunito Sans", sans-serif;
background-image: url("https://c8.alamy.com/comp/2C3TB2W/travel-planning-concept-top-view-taking-notes-to-notebook-on-map-background-search-for-best-trip-in-tablet-with-blank-screen-copy-space-for-text-2C3TB2W.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}

header {
background-color: rgba(1, 1, 39, 0.8);
color: #fff;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
height: 60px;
}

.nav__logo {
font-size: 1.75rem;
font-weight: 600;
color: #ffffff;
text-decoration: none;
}

.nav__logo span {
color: #3685fb;
}

h1 {
padding-right: 690px;
text-align: center;
}

form {
max-width: 550px;
margin: 80px auto;
background-color: rgba(236, 248, 222, 0);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0);
}

.container {
margin-bottom: 50px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: bold;
text-align: center;
}

input,
select {
width: 100%;
padding: 10px;
margin-bottom: 16px;
border: 2px solid #1e0d7f;
border-radius: 4px;
box-sizing: border-box;
font-weight: bold;
font-family: inherit;
}

button {
display: block;
margin: 0 auto;
background-color: #195253;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
font-family: inherit;
transition: transform 0.3s ease-in-out,
background-color 0.3s ease-in-out;
}

button:hover {
background-color: #aef1b2;
color: black;
transform: scale(1.15);
}

select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
background-repeat: no-repeat;
background-position: right 10px top 50%;
background-size: 24px auto;
padding-right: 30px;
font-weight: bold;
font-family: inherit;
}

select:focus {
border-color: #4caf50;
outline: none;
}

@media (max-width: 768px) {
header {
background-color: #091020;
color: #fff;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
transform: scale(1.00);
height: 60px;
}
.nav__logo {
font-size: 1.75rem;
font-weight: 600;
color: #ffffff;
text-decoration: none; /* Remove underline from link */
flex-direction: column;
height: auto;
}

.nav__logo span {
color: #3685fb;
}

h1{
padding-right: 690px;
text-align: center;
h1 {
padding-right: 0;
}

form {
max-width: 600px;
margin: 20px auto;
background-color: #add8e6e3;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
width: 90%;
}

label {
display: block;
margin-bottom: 8px;
font-weight: bold;
.container {
padding: 10px;
}
}

input,
select {
width: 100%;
padding: 10px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-weight: bold;
font-family: inherit;
@media (max-width: 480px) {
.nav__logo {
font-size: 1.25rem;
}

button {
background-color: #4c854e;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
font-family: inherit;
transition: transform 0.3s ease-in-out;
h1 {
font-size: 1.5rem;
}

button:hover {
background-color: #87af89;
transform: scale(1.15);
input,
select,
button {
font-size: 14px;
}

select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
/* Add custom dropdown arrow */
background-repeat: no-repeat;
background-position: right 10px top 50%;
background-size: 24px auto;
padding-right: 30px;
font-weight: bold;
font-family: inherit;
.container {
padding: 0px;
margin-bottom: 20px;
}
}

select:focus {
border-color: #4CAF50;
outline: none;
}
.swal2-popup {
background-color: #fbfcfc !important;
border: 3px solid black !important;
}

.swal2-title {
color: black !important;
}

.swal2-content {
color: black !important;
}

.swal2-confirm {
background-color: #096cf7 !important;
color: white !important;
}
</style>
<script>
function handleSubmit(event) {
event.preventDefault();
const today = new Date(); // Get today's date
const startDate = new Date(document.getElementById('startDate').value);
const endDate = new Date(document.getElementById('endDate').value);

if (endDate < startDate) {
alert('End date cannot be earlier than start date.');
} else if (startDate < today || endDate < today) {
alert('Start and end dates cannot be earlier than today.');
} else {
alert('Trip planned successfully!');
// You can proceed to submit the form or perform other actions here
// For demonstration, form submission is prevented.
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function handleSubmit(event) {
event.preventDefault();
const today = new Date(); // Get today's date
const startDate = new Date(document.getElementById("startDate").value);
const endDate = new Date(document.getElementById("endDate").value);

if (endDate < startDate) {
Swal.fire({
icon: "error",
title: "Oops...",
text: "End date cannot be earlier than start date.",
});
} else if (startDate < today || endDate < today) {
Swal.fire({
icon: "error",
title: "Oops...",
text: "Start and end dates cannot be earlier than today.",
});
} else {
Swal.fire({
icon: "success",
title: "Success!",
text: "Trip planned successfully!",
}).then((result) => {
if (result.isConfirmed || result.isDismissed) {
document.getElementById("tripForm").reset();
}
});
}
}

document.addEventListener('DOMContentLoaded', function () {
document.getElementById('tripForm').addEventListener('submit', handleSubmit);
});
document.addEventListener("DOMContentLoaded", function () {
document
.getElementById("tripForm")
.addEventListener("submit", handleSubmit);
});
</script>
</head>

<body>

</head>
<body>
<header>
<a href="index.html" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
<h1>Trip Planner</h1>
<a href="index.html" class="nav__logo" data-aos="fade-right"
>Tourguide<span>.</span></a
>
<h1>Trip Planner</h1>
</header>

<form id="tripForm">
<div class="container">
<label for="destination">Destination:</label>
<input type="text" id="destination" name="destination" required>
<input type="text" id="destination" name="destination" required />

<label for="startDate">Start Date:</label>
<input type="date" id="startDate" name="startDate" required>
<input type="date" id="startDate" name="startDate" required />

<label for="endDate">End Date:</label>
<input type="date" id="endDate" name="endDate" required>
<input type="date" id="endDate" name="endDate" required />

<label for="budget">Budget:</label>
<input type="number" id="budget" name="budget" required>
<input type="number" id="budget" name="budget" required />

<label for="accommodation">Accommodation:</label>
<select id="accommodation" name="accommodation">
<option value="hotel">Hotel</option>
<option value="apartment">Apartment</option>
<option value="hostel">Hostel</option>
<option value="hotel">Hotel</option>
<option value="apartment">Apartment</option>
<option value="hostel">Hostel</option>
</select>

<button type="submit">Plan My Trip</button>
</div>
</form>

</body>

</body>
</html>

0 comments on commit 9d93e3e

Please sign in to comment.