Atmosphere-Pro/map.html at main · RudranshGawande/Atmosphere-Pro · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atmosphere Pro - Interactive Weather Map</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@700;800&display=swap" rel="stylesheet">

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <style>
        /* Leaflet specific overrides for Atmosphere Pro */
        .leaflet-container {
            font-family: var(--font-body);
            background: #f0f4f8;
        }
        .leaflet-bar a {
            background-color: var(--surface-container-lowest);
            color: var(--primary);
            border: 1px solid var(--outline-variant);
        }
        .leaflet-popup-content-wrapper {
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-ambient);
        }
    </style>
</head>
<body style="background: var(--surface);">

    <!-- Navbar -->
    <nav class="navbar" id="navbar">
        <a href="home.html" class="nav-logo">
            <img src="logo.png" alt="Atmosphere Pro Logo">
            Atmosphere Pro
        </a>

        <div class="nav-links">
            <a href="home.html">Home</a>
            <a href="dashboard.html">Dashboard</a>
            <a href="map.html" class="active">Map View</a>
            <a href="forecast.html">Forecast</a>
            <a href="insights.html">Tips</a>
            <a href="about.html">About</a>
        </div>

        <div class="mobile-menu-btn" style="display: none;">
            <i data-lucide="menu"></i>
        </div>
    </nav>

    <!-- Page Header -->
    <header class="map-header" style="margin-top: 80px;">
        <h1 class="map-title">Interactive Weather Map</h1>
        <p class="map-subtitle">Tap anywhere on the globe for instant meteorological data.</p>
    </header>

    <!-- Main Map View -->
    <main class="map-view-container">

        <!-- Leaflet Map -->
        <div id="map"></div>

        <!-- Info Side Panel -->
        <aside class="map-side-panel">

            <!-- Location Panel -->
            <div class="info-panel-card">
                <span class="panel-section-title">Selected Location</span>
                <div class="coord-display">
                    <div class="coord-item">
                        <span class="coord-label">Latitude</span>
                        <span id="latVal" class="coord-value">0.000</span>
                    </div>
                    <div class="coord-item">
                        <span class="coord-label">Longitude</span>
                        <span id="lonVal" class="coord-value">0.000</span>
                    </div>
                </div>
                <div style="display: flex; align-items: center; gap: 0.5rem; color: var(--on-surface);">
                    <i data-lucide="map-pin" style="width: 18px; color: var(--primary);"></i>
                    <span id="locationName" style="font-weight: 600;">Click to select</span>
                </div>
            </div>

            <!-- Weather Details Panel -->
            <div class="info-panel-card" id="mapWeatherCard" style="display: none;">
                <span class="panel-section-title">Current Conditions</span>

                <div class="map-weather-main">
                    <div class="map-condition-box">
                        <i id="mapWeatherIcon" data-lucide="cloud"></i>
                        <span id="mapConditionText">Loading...</span>
                    </div>
                    <h2 class="map-temp"><span id="mapTempValue">--</span>°</h2>
                </div>

                <div class="map-stats-grid">
                    <div class="map-stat-item">
                        <i data-lucide="droplets"></i>
                        <span id="mapHumidity">--%</span>
                    </div>
                    <div class="map-stat-item">
                        <i data-lucide="wind"></i>
                        <span id="mapWind">-- km/h</span>
                    </div>
                </div>

                <div style="margin-top: var(--spacing-lg);">
                    <a href="dashboard.html" id="viewFullDashboardBtn" class="btn btn-primary" style="width: 100%; font-size: 0.875rem;">
                        View Full Dashboard
                        <i data-lucide="arrow-right" style="margin-left: 8px; width: 14px;"></i>
                    </a>
                </div>
            </div>

            <!-- Empty State -->
            <div class="info-panel-card" id="emptyState">
                <p style="color: var(--on-surface-variant); text-align: center; font-size: 0.9375rem;">
                    Please click on the map to retrieve local weather analytics.
                </p>
            </div>

        </aside>
    </main>

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

    <!-- Custom Map Script -->
    <script src="map.js"></script>
    <script>
        lucide.createIcons();
    </script>
</body>
</html>