Skip to content

Commit

Permalink
Add files via upload (DhanushNehru#153)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mefisto04
Mefisto04 authored Oct 7, 2023
1 parent 056715d commit 33efa1d
Show file tree
Hide file tree
Showing 4 changed files with 498 additions and 0 deletions.
92 changes: 92 additions & 0 deletions City Finder/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Skypeia</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-middle"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
<a href="index.html" class="nav-link nav-link-home"></a>
</li>
<li class="nav-item">
<a href="https://www.instagram.com/rugvednarvenker/" class="nav-link nav-link-insta"></a>
</li>
</ul>
<!-- /.nav-list nav-list-mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
<a href="index.html" class="nav-link nav-link-home"></a>
</li>
<li class="nav-item">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="predictor.html" class="nav-link">Predictor</a>
</li>
<li class="nav-item">
<a href="option.html" class="nav-link">Option</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Option</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">My Account</a>
</li>
<li class="nav-item">
<a href="https://twitter.com/NarvenkerRugved" class="nav-link nav-link-twitter"></a>
</li>
<li class="nav-item nav-item-hidden">
<a href="https://www.instagram.com/rugvednarvenker/" class="nav-link nav-link-insta"></a>
</li>
</ul>
<!-- /.nav-list nav-list-larger -->
</nav>
</div>
</header>

<div class="Heading">
<div class="title">
<h3>Map<span</h3>
</div>


<div class="map-container">
<div id="map"></div>
</div>
<div class="location-form">
<form id="location-form">
<label for="district">Select Location:</label>
<select id="district">
<option value="Dehradun">Dehradun</option> <!-- Added Dehradun as a district -->
<!-- Add other district options here -->
</select>
<label for="station">Select Station:</label>
<select id="station">
<option value="Mussoorie">Mussoorie</option> <!-- Added Mussoorie as a station -->
<!-- Add other station options here -->
</select>
<input type="submit" value="Submit">
</form>
</div>


<script src="script.js"></script>
</body>
</html>
64 changes: 64 additions & 0 deletions City Finder/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
const selectElement = (element) => document.querySelector(element);

selectElement('.mobile-menu').addEventListener('click', () => {
selectElement('header').classList.toggle('active');
});

// ... (previous code)

document.addEventListener("DOMContentLoaded", function () {
const uttarakhandCenter = [21.146633, 79.088860];
const map = L.map('map').setView(uttarakhandCenter, 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://maps.openweathermap.org/maps/2.0/radar/{z}/{x}/{y}?appid={API key}&tm={date}">OpenStreetMap</a> contributors'
}).addTo(map);



const dehradunCoordinates = [21.146633, 79.088860];
const redIcon = L.icon({
iconUrl: 'pin.png', // Replace with the actual path to your red pointer PNG
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
L.marker(dehradunCoordinates, { icon: redIcon }).addTo(map)
.bindPopup('Dehradun, India')
.openPopup();



const dehradunCoordinates4 = [2.146633, 9.088860];
L.marker(dehradunCoordinates4).addTo(map)
.bindPopup('Nagpur, India')
.openPopup();

const rishikeshCoordinates = [18.516726, 73.856255];
L.marker(rishikeshCoordinates).addTo(map)
.bindPopup('Pune, India')
.openPopup();

const rishikeshCoordinates2 = [22.719568, 75.857727];
L.marker(rishikeshCoordinates2).addTo(map)
.bindPopup('Indore, India')
.openPopup();

const rishikeshCoordinates3 = [33.738045, 73.084488];
L.marker(rishikeshCoordinates3).addTo(map)
.bindPopup('Indore, India')
.openPopup();

// Add event listener for form submission
document.getElementById('location-form').addEventListener('submit', function (e) {
e.preventDefault();

const selectedStation = document.getElementById('station').value;

if (selectedStation === 'Mussoorie') {
const mussoorieCoordinates = [30.4591, 78.0667];
map.setView(mussoorieCoordinates, 12);
}
});
});


51 changes: 51 additions & 0 deletions City Finder/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
text-align: center;
/* Improved readability with margin and padding grouped */
/* margin: 20px auto; */
/* padding: 20px; */
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #555;
}
#map {
width: 100%;
height: 400px;
margin-top: 20px;
}
Loading

0 comments on commit 33efa1d

Please sign in to comment.