forked from PriyaGhosal/BuddyTrail
-
Notifications
You must be signed in to change notification settings - Fork 0
/
experience.html
158 lines (141 loc) · 6.41 KB
/
experience.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Experience Sharing</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="experience.css" rel="stylesheet">
<style>
/* circle styles */
.circle {
height: 24px;
width: 24px;
border-radius: 24px;
background-color: rgb(255, 0, 0);
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
}
</style>
</head>
<body>
<div class="container my-5">
<h1 class="text-center mb-5 animate__animated animate__fadeIn">Share Your Travel Experience</h1>
<div class="row">
<div class="col-md-6 mb-4">
<form class="animate__animated animate__fadeInLeft">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" required aria-describedby="nameHelp">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="location" class="form-label">Location</label>
<select class="form-select" id="location" required>
<option value="" selected disabled>Select location</option>
<option value="paris">Paris, France</option>
<option value="tokyo">Tokyo, Japan</option>
<option value="newyork">New York, USA</option>
</select>
</div>
<div class="mb-3">
<label for="startDate" class="form-label">Start Date</label>
<input type="date" class="form-control" id="startDate" required>
</div>
<div class="mb-3">
<label for="endDate" class="form-label">End Date</label>
<input type="date" class="form-control" id="endDate" required>
</div>
<div class="mb-3">
<label for="experience" class="form-label">Your Experience</label>
<textarea class="form-control" id="experience" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit 🌍</button>
</form>
</div>
<div class="col-md-6">
<h2 class="mb-4 animate__animated animate__fadeInRight">Sample Experiences</h2>
<div class="card mb-3 animate__animated animate__fadeInUp">
<div class="card-body">
<h5 class="card-title">Emma Thompson</h5>
<h6 class="card-subtitle mb-2 text-muted">Paris, France</h6>
<p class="card-text">My trip to Paris was absolutely magical! The Eiffel Tower at night is a sight to behold. I enjoyed strolling along the Seine and visiting the Louvre. The food was exquisite, especially the croissants!</p>
<p class="card-text"><small class="text-muted">May 15, 2023 - May 22, 2023</small></p>
</div>
</div>
<div class="card mb-3 animate__animated animate__fadeInUp">
<div class="card-body">
<h5 class="card-title">James Wilson</h5>
<h6 class="card-subtitle mb-2 text-muted">Tokyo, Japan</h6>
<p class="card-text">Tokyo is a city that never sleeps! I was amazed by the blend of traditional culture and modern technology. The sushi at Tsukiji market was the best I've ever had. Don't miss out on a visit to the peaceful Meiji Shrine.</p>
<p class="card-text"><small class="text-muted">June 10, 2023 - June 20, 2023</small></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Circles -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<script>
// coordinates for the cursor :
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");
const colors = [
"#fc5720", "#fc6532", "#fc6532","#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#fefefe", "#cdf2c5", "#b2eca5", "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02",
];
circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});
// update the coordinates when the mouse moves:
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;
});
// animation function to move the circles:
function animateCircles() {
let x = coords.x;
let y = coords.y;
circles.forEach(function (circle, index) {
circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
circle.style.scale = (circles.length - index) / circles.length;
circle.x = x;
circle.y = y;
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});
requestAnimationFrame(animateCircles);
}
animateCircles();
</script>
</body>
</html>