forked from PriyaGhosal/BuddyTrail
-
Notifications
You must be signed in to change notification settings - Fork 0
/
solo-adventure.html
157 lines (142 loc) · 6.06 KB
/
solo-adventure.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solo Adventure Explorer</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
< main
<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>
<link rel="stylesheet" href="solo-adventure.css">
</head>
main
<body>
<div class="container mt-5">
<h1 class="mb-4">Solo Adventure Explorer</h1>
<div class="row mb-4">
<div class="col-md-6">
<input type="text" class="form-control" id="searchInput" placeholder="Search itineraries..." aria-label="Search itineraries">
</div>
<div class="col-md-3">
<select class="form-select" id="filterSelect" aria-label="Filter itineraries">
<option value="">Filter by category</option>
<option value="adventure">Adventure</option>
<option value="retreat">Retreat</option>
<option value="cultural">Cultural</option>
</select>
</div>
<div class="col-md-3">
<select class="form-select" id="sortSelect" aria-label="Sort itineraries">
<option value="relevance">Sort by relevance</option>
<option value="duration">Sort by duration</option>
<option value="popularity">Sort by popularity</option>
</select>
</div>
</div>
<div class="row" id="itineraryContainer">
<div class="col-md-4 mb-4">
<div class="card h-100 itinerary-card">
<img src="https://images.unsplash.com/photo-1551632811-561732d1e306" class="card-img-top" width="250px" height="300px" alt="Mountain hiking adventure">
<div class="card-body">
<h5 class="card-title">Mountain Trek Adventure</h5>
<p class="card-text">Embark on an exhilarating 7-day mountain trek through breathtaking landscapes.</p>
<button class="btn btn-primary" aria-label="View Mountain Trek Adventure itinerary">View Itinerary</button>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 itinerary-card">
<img src="https://images.unsplash.com/photo-1536697246787-1f7ae568d89a" class="card-img-top" width="250px" height="300px" alt="Peaceful beach retreat">
<div class="card-body">
<h5 class="card-title">Serene Beach Retreat</h5>
<p class="card-text">Unwind with a 5-day peaceful beach retreat, perfect for relaxation and self-discovery.</p>
<button class="btn btn-primary" aria-label="View Serene Beach Retreat itinerary">View Itinerary</button>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 itinerary-card">
<img src="https://images.unsplash.com/photo-1519923041107-e4dc8d9193da" class="card-img-top" width="250px" height="300px" alt="Cultural city exploration">
<div class="card-body">
<h5 class="card-title">Cultural City Discovery</h5>
<p class="card-text">Immerse yourself in a 10-day journey exploring the rich culture of historic cities.</p>
<button class="btn btn-primary" aria-label="View Cultural City Discovery itinerary">View Itinerary</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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>