Skip to content

Commit e3046c1

Browse files
Azure9733Azure9733
authored
Major UI and Feature Updates
Signed-off-by: Azure <uttam.mitmpl2023@learner.manipal.edu>
1 parent 4a5f82b commit e3046c1

File tree

3 files changed

+599
-201
lines changed

3 files changed

+599
-201
lines changed

‎index.html‎

Lines changed: 109 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
<!-- index.html -->
21
<!DOCTYPE html>
32
<html lang="en">
43
<head>
54
<meta charset="UTF-8">
65
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>MapMIT - A Nakshatra Pilot Project </title>
6+
<title>MapMIT - A Nakshatra Pilot Project</title>
87
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">
98
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
109
<link rel="stylesheet" href="styles.css">
10+
<link rel="icon" href="data:,"> <!-- Added to suppress favicon 404 error -->
1111
<script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
1212
</head>
1313
<body>
14-
<div class="game-container">
14+
<div class="map-container">
1515
<!-- Top Navigation Bar -->
1616
<nav class="top-nav">
1717
<div class="nav-content">
1818
<div class="nav-title">
19-
<i class="fas fa-map-marked-alt"></i>
20-
<span>MapMIT - an Open Horizon Project</span>
19+
<span>NAKSHATRA</span>
2120
</div>
2221
<div class="nav-controls">
2322
<button id="toggleLegend" class="nav-button">
@@ -32,123 +31,129 @@
3231
<i class="fas fa-search"></i>
3332
Search
3433
</button>
34+
<button id="toggleTracking" class="nav-button">
35+
<i class="fas fa-location-arrow"></i>
36+
Tracking
37+
</button>
3538
</div>
3639
</div>
3740
</nav>
3841

39-
<!-- Main Map Container -->
40-
<div class="map-container">
41-
<div id="map" class="map"></div>
42-
43-
<!-- Search Panel -->
44-
<div class="search-panel" id="searchPanel">
45-
<input type="text" placeholder="Search locations..." id="searchInput">
46-
<div class="search-results" id="searchResults"></div>
42+
<div class="game-container">
43+
<!-- Main Map Container -->
44+
<div id="map" class="map">
45+
<!-- North Arrow -->
46+
<div id="northArrow" class="north-arrow">
47+
<i class="fas fa-arrow-up"></i>
48+
</div>
49+
50+
<!-- Zoom and Rotation Controls -->
51+
<div class="map-controls">
52+
<button id="zoomIn" class="control-button" title="Zoom In"><i class="fas fa-plus"></i></button>
53+
<button id="zoomOut" class="control-button" title="Zoom Out"><i class="fas fa-minus"></i></button>
54+
<button id="rotateLeft" class="control-button" title="Rotate Left"><i class="fas fa-undo"></i></button>
55+
<button id="rotateRight" class="control-button" title="Rotate Right"><i class="fas fa-redo"></i></button>
56+
<button id="resetRotation" class="control-button" title="Reset Rotation"><i class="fas fa-compass"></i></button>
57+
</div>
4758
</div>
59+
</div>
4860

49-
<!-- Legend Panel with Checkboxes -->
50-
<div class="legend-panel" id="legendPanel">
51-
<div class="legend-header">
52-
<h3>Map Legend</h3>
53-
<button class="close-button" id="closeLegend">
54-
<i class="fas fa-times"></i>
55-
</button>
61+
<!-- Search Panel -->
62+
<div class="search-panel" id="searchPanel">
63+
<input type="text" placeholder="Search locations..." id="searchInput">
64+
<div class="search-results" id="searchResults"></div>
65+
</div>
66+
67+
<!-- Legend Panel -->
68+
<div class="legend-panel" id="legendPanel">
69+
<div class="legend-header">
70+
<h3>Map Legend</h3>
71+
<button class="close-button" id="closeLegend">
72+
<i class="fas fa-times"></i>
73+
</button>
74+
</div>
75+
<div class="legend-content">
76+
<div class="legend-item">
77+
<input type="checkbox" id="academic-toggle" checked>
78+
<span class="legend-color academic"></span>
79+
<span>Academic Buildings</span>
80+
</div>
81+
<div class="legend-item">
82+
<input type="checkbox" id="hostel-toggle" checked>
83+
<span class="legend-color hostel"></span>
84+
<span>Hostels</span>
85+
</div>
86+
<div class="legend-item">
87+
<input type="checkbox" id="mess-toggle" checked>
88+
<span class="legend-color mess"></span>
89+
<span>Mess/Cafeteria</span>
90+
</div>
91+
<div class="legend-item">
92+
<input type="checkbox" id="sports-toggle" checked>
93+
<span class="legend-color sports"></span>
94+
<span>Sports Facilities</span>
5695
</div>
57-
<div class="legend-content">
58-
<div class="legend-item">
59-
<input type="checkbox" id="academic-toggle" checked>
60-
<span class="legend-color academic"></span>
61-
<span>Academic Buildings</span>
62-
</div>
63-
<div class="legend-item">
64-
<input type="checkbox" id="hostel-toggle" checked>
65-
<span class="legend-color hostel"></span>
66-
<span>Hostels</span>
67-
</div>
68-
<div class="legend-item">
69-
<input type="checkbox" id="mess-toggle" checked>
70-
<span class="legend-color mess"></span>
71-
<span>Mess/Cafeteria</span>
72-
</div>
73-
<div class="legend-item">
74-
<input type="checkbox" id="sports-toggle" checked>
75-
<span class="legend-color sports"></span>
76-
<span>Sports Facilities</span>
77-
</div>
78-
<div class="legend-item">
79-
<input type="checkbox" id="parking-toggle" checked>
80-
<span class="legend-color parking"></span>
81-
<span>Parking Areas</span>
82-
</div>
83-
<div class="legend-item">
84-
<input type="checkbox" id="grass-toggle" checked>
85-
<span class="legend-color grass"></span>
86-
<span>Green Areas</span>
87-
</div>
88-
<div class="legend-item">
89-
<input type="checkbox" id="temple-toggle" checked>
90-
<span class="legend-color temple"></span>
91-
<span>Temple</span>
92-
</div>
93-
<div class="legend-item">
94-
<input type="checkbox" id="tree-toggle" checked>
95-
<span class="legend-color tree"></span>
96-
<span>Trees</span>
97-
</div>
98-
<div class="legend-item">
99-
<input type="checkbox" id="walkways-toggle" checked>
100-
<span class="legend-color walkways"></span>
101-
<span>Walkways</span>
102-
</div>
103-
<div class="legend-item">
104-
<input type="checkbox" id="circles-toggle" checked>
105-
<span class="legend-color circles"></span>
106-
<span>Circles</span>
107-
</div>
108-
<div class="legend-item">
109-
<input type="checkbox" id="roads-main-toggle" checked>
110-
<span class="legend-color roads-main"></span>
111-
<span>Main Roads</span>
112-
</div>
113-
<div class="legend-item">
114-
<input type="checkbox" id="roads-second-toggle" checked>
115-
<span class="legend-color roads-second"></span>
116-
<span>Secondary Roads</span>
117-
</div>
118-
<div class="legend-item">
119-
<input type="checkbox" id="under-construction-toggle" checked>
120-
<span class="legend-color under-construction"></span>
121-
<span>Under Construction</span>
122-
</div>
96+
<div class="legend-item">
97+
<input type="checkbox" id="parking-toggle" checked>
98+
<span class="legend-color parking"></span>
99+
<span>Parking Areas</span>
100+
</div>
101+
<div class="legend-item">
102+
<input type="checkbox" id="grass-toggle" checked>
103+
<span class="legend-color grass"></span>
104+
<span>Green Areas</span>
105+
</div>
106+
<div class="legend-item">
107+
<input type="checkbox" id="temple-toggle" checked>
108+
<span class="legend-color temple"></span>
109+
<span>Temple</span>
110+
</div>
111+
<div class="legend-item">
112+
<input type="checkbox" id="tree-toggle" checked>
113+
<span class="legend-color tree"></span>
114+
<span>Trees</span>
115+
</div>
116+
<div class="legend-item">
117+
<input type="checkbox" id="walkways-toggle" checked>
118+
<span class="legend-color walkways"></span>
119+
<span>Walkways</span>
120+
</div>
121+
<div class="legend-item">
122+
<input type="checkbox" id="circles-toggle" checked>
123+
<span class="legend-color circles"></span>
124+
<span>Circles</span>
125+
</div>
126+
<div class="legend-item">
127+
<input type="checkbox" id="roads-main-toggle" checked>
128+
<span class="legend-color roads-main"></span>
129+
<span>Main Roads</span>
130+
</div>
131+
<div class="legend-item">
132+
<input type="checkbox" id="roads-second-toggle" checked>
133+
<span class="legend-color roads-second"></span>
134+
<span>Secondary Roads</span>
135+
</div>
136+
<div class="legend-item">
137+
<input type="checkbox" id="under-construction-toggle" checked>
138+
<span class="legend-color under-construction"></span>
139+
<span>Under Construction</span>
123140
</div>
124141
</div>
125142
</div>
126143

127-
<!-- Location Info Popup -->
128-
<div class="location-popup" id="locationPopup">
129-
<div class="popup-header">
144+
<!-- Location Info Sidebar -->
145+
<div class="location-sidebar" id="locationPopup">
146+
<div class="sidebar-header">
130147
<h3 id="popupTitle">Location Name</h3>
131148
<button class="close-button" id="closePopup">
132149
<i class="fas fa-times"></i>
133150
</button>
134151
</div>
135-
<div class="popup-content">
152+
<div class="sidebar-content">
136153
<p id="popupDescription">Location description goes here.</p>
137154
</div>
138-
<div class="popup-footer">
139-
<span class="popup-timestamp" id="popupTimestamp"></span>
140-
</div>
141-
</div>
142-
143-
<!-- Mini Stats -->
144-
<div class="mini-stats">
145-
<div class="stat-item">
146-
<i class="fas fa-map-marker-alt"></i>
147-
<span id="currentZoom">Zoom: 17</span>
148-
</div>
149-
<div class="stat-item">
150-
<i class="fas fa-clock"></i>
151-
<span id="currentTime">00:00</span>
155+
<div class="sidebar-footer">
156+
<span class="sidebar-timestamp" id="popupTimestamp"></span>
152157
</div>
153158
</div>
154159
</div>

0 commit comments

Comments
 (0)