Skip to content

Commit 33efa1d

Browse files
Mefisto04Mefisto04
authored
Add files via upload (#153)
1 parent 056715d commit 33efa1d

File tree

4 files changed

+498
-0
lines changed

4 files changed

+498
-0
lines changed

‎City Finder/index.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Skypeia</title>
9+
<link rel="stylesheet" href="styles.css">
10+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
11+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
12+
</head>
13+
<body>
14+
<header>
15+
<div class="container">
16+
<nav class="nav">
17+
<ul class="nav-list nav-list-mobile">
18+
<li class="nav-item">
19+
<div class="mobile-menu">
20+
<span class="line line-top"></span>
21+
<span class="line line-middle"></span>
22+
<span class="line line-bottom"></span>
23+
</div>
24+
</li>
25+
<li class="nav-item">
26+
<a href="index.html" class="nav-link nav-link-home"></a>
27+
</li>
28+
<li class="nav-item">
29+
<a href="https://www.instagram.com/rugvednarvenker/" class="nav-link nav-link-insta"></a>
30+
</li>
31+
</ul>
32+
<!-- /.nav-list nav-list-mobile -->
33+
<ul class="nav-list nav-list-larger">
34+
<li class="nav-item nav-item-hidden">
35+
<a href="index.html" class="nav-link nav-link-home"></a>
36+
</li>
37+
<li class="nav-item">
38+
<a href="index.html" class="nav-link">Home</a>
39+
</li>
40+
<li class="nav-item">
41+
<a href="predictor.html" class="nav-link">Predictor</a>
42+
</li>
43+
<li class="nav-item">
44+
<a href="option.html" class="nav-link">Option</a>
45+
</li>
46+
<li class="nav-item">
47+
<a href="#" class="nav-link">Option</a>
48+
</li>
49+
<li class="nav-item">
50+
<a href="#" class="nav-link">My Account</a>
51+
</li>
52+
<li class="nav-item">
53+
<a href="https://twitter.com/NarvenkerRugved" class="nav-link nav-link-twitter"></a>
54+
</li>
55+
<li class="nav-item nav-item-hidden">
56+
<a href="https://www.instagram.com/rugvednarvenker/" class="nav-link nav-link-insta"></a>
57+
</li>
58+
</ul>
59+
<!-- /.nav-list nav-list-larger -->
60+
</nav>
61+
</div>
62+
</header>
63+
64+
<div class="Heading">
65+
<div class="title">
66+
<h3>Map<span</h3>
67+
</div>
68+
69+
70+
<div class="map-container">
71+
<div id="map"></div>
72+
</div>
73+
<div class="location-form">
74+
<form id="location-form">
75+
<label for="district">Select Location:</label>
76+
<select id="district">
77+
<option value="Dehradun">Dehradun</option> <!-- Added Dehradun as a district -->
78+
<!-- Add other district options here -->
79+
</select>
80+
<label for="station">Select Station:</label>
81+
<select id="station">
82+
<option value="Mussoorie">Mussoorie</option> <!-- Added Mussoorie as a station -->
83+
<!-- Add other station options here -->
84+
</select>
85+
<input type="submit" value="Submit">
86+
</form>
87+
</div>
88+
89+
90+
<script src="script.js"></script>
91+
</body>
92+
</html>

‎City Finder/script.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
const selectElement = (element) => document.querySelector(element);
2+
3+
selectElement('.mobile-menu').addEventListener('click', () => {
4+
selectElement('header').classList.toggle('active');
5+
});
6+
7+
// ... (previous code)
8+
9+
document.addEventListener("DOMContentLoaded", function () {
10+
const uttarakhandCenter = [21.146633, 79.088860];
11+
const map = L.map('map').setView(uttarakhandCenter, 8);
12+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
13+
attribution: '&copy; <a href="https://maps.openweathermap.org/maps/2.0/radar/{z}/{x}/{y}?appid={API key}&tm={date}">OpenStreetMap</a> contributors'
14+
}).addTo(map);
15+
16+
17+
18+
const dehradunCoordinates = [21.146633, 79.088860];
19+
const redIcon = L.icon({
20+
iconUrl: 'pin.png', // Replace with the actual path to your red pointer PNG
21+
iconSize: [32, 32],
22+
iconAnchor: [16, 32],
23+
popupAnchor: [0, -32]
24+
});
25+
L.marker(dehradunCoordinates, { icon: redIcon }).addTo(map)
26+
.bindPopup('Dehradun, India')
27+
.openPopup();
28+
29+
30+
31+
const dehradunCoordinates4 = [2.146633, 9.088860];
32+
L.marker(dehradunCoordinates4).addTo(map)
33+
.bindPopup('Nagpur, India')
34+
.openPopup();
35+
36+
const rishikeshCoordinates = [18.516726, 73.856255];
37+
L.marker(rishikeshCoordinates).addTo(map)
38+
.bindPopup('Pune, India')
39+
.openPopup();
40+
41+
const rishikeshCoordinates2 = [22.719568, 75.857727];
42+
L.marker(rishikeshCoordinates2).addTo(map)
43+
.bindPopup('Indore, India')
44+
.openPopup();
45+
46+
const rishikeshCoordinates3 = [33.738045, 73.084488];
47+
L.marker(rishikeshCoordinates3).addTo(map)
48+
.bindPopup('Indore, India')
49+
.openPopup();
50+
51+
// Add event listener for form submission
52+
document.getElementById('location-form').addEventListener('submit', function (e) {
53+
e.preventDefault();
54+
55+
const selectedStation = document.getElementById('station').value;
56+
57+
if (selectedStation === 'Mussoorie') {
58+
const mussoorieCoordinates = [30.4591, 78.0667];
59+
map.setView(mussoorieCoordinates, 12);
60+
}
61+
});
62+
});
63+
64+

‎City Finder/style.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/* styles.css */
2+
body {
3+
font-family: Arial, sans-serif;
4+
background-color: #f2f2f2;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
header {
9+
background-color: #333;
10+
color: #fff;
11+
padding: 10px;
12+
text-align: center;
13+
}
14+
.container {
15+
max-width: 800px;
16+
margin: 20px auto;
17+
padding: 20px;
18+
background-color: #fff;
19+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
20+
text-align: center;
21+
/* Improved readability with margin and padding grouped */
22+
/* margin: 20px auto; */
23+
/* padding: 20px; */
24+
}
25+
label {
26+
display: block;
27+
margin-bottom: 10px;
28+
}
29+
input[type="text"] {
30+
width: 100%;
31+
padding: 8px;
32+
margin-bottom: 10px;
33+
border: 1px solid #ccc;
34+
border-radius: 4px;
35+
}
36+
button {
37+
background-color: #333;
38+
color: #fff;
39+
border: none;
40+
padding: 10px 20px;
41+
cursor: pointer;
42+
transition: background-color 0.3s;
43+
}
44+
button:hover {
45+
background-color: #555;
46+
}
47+
#map {
48+
width: 100%;
49+
height: 400px;
50+
margin-top: 20px;
51+
}

0 commit comments

Comments
 (0)