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

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

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
</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">Map View</a>
            <a href="forecast.html" class="active">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="forecast-header" style="margin-top: 80px;">
        <h1 class="forecast-title">Weather Forecast</h1>
        <p class="forecast-subtitle">Detailed 7-day outlook for <span id="forecastLocation" style="font-weight: 700; color: var(--primary);">Pune</span></p>
    </header>

    <!-- Forecast Main Section -->
    <main class="forecast-container">

        <!-- Highlight Section (Tomorrow / Selected Day) -->
        <div class="forecast-highlight" style="display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative;">
            <!-- Content dynamically generated by forecast.js: updateHighlight() -->
            <div style="padding: var(--spacing-xxl); color: var(--on-primary); opacity: 0.6;">
                Initializing satellite link...
            </div>
        </div>

        <div class="main-forecast-content" style="display: flex; flex-direction: column; gap: var(--spacing-xxl);">

            <!-- 7-Day Grid -->
            <div>
                <header class="section-title-wrap" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg);">
                    <h2 style="font-size: 1.5rem; letter-spacing: -0.02em;">7-Day Outlook</h2>
                    <span style="font-size: 0.8125rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em;">Click for hourly data</span>
                </header>
                <div id="forecastGrid" class="forecast-grid-scrollable" style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem;">
                    <!-- Dynamically Populated -->
                </div>
            </div>

            <!-- Detail Split Panel (Chart + Secondary Stats) -->
            <section id="hourlySection" class="hourly-forecast-section" style="display: none; animation: slideInUp 0.6s ease-out;">
                <div class="section-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg);">
                    <div>
                        <h2 id="hourlyTitle" style="font-size: 1.75rem; letter-spacing: -0.02em;">Hourly Outlook</h2>
                        <p id="hourlySubtitle" style="color: var(--on-surface-variant); font-weight: 500;">24-hour temperature projection</p>
                    </div>
                    <button class="btn btn-secondary" onclick="hideHourlyGraph()" style="padding: 0.5rem 1.25rem; font-size: 0.8125rem;">
                        <i data-lucide="x" style="width: 16px; height: 16px; margin-right: 0.5rem;"></i> Close Graph
                    </button>
                </div>

                <div class="split-view" style="display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-xl);">
                    <!-- Chart Column -->
                    <div class="chart-container" style="background: var(--surface-container-lowest); padding: var(--spacing-xl); border-radius: var(--radius-xl); border: 1px solid var(--outline-variant); box-shadow: var(--shadow-ambient); height: 450px; position: relative;">
                        <canvas id="hourlyChart"></canvas>
                    </div>

                    <!-- Side Stats Column -->
                    <div class="side-breakdown" style="display: flex; flex-direction: column; gap: 1rem;">
                        <div class="sub-plate" style="background: var(--surface-container-low); padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--outline-variant);">
                            <span style="font-size: 0.75rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem;">Solar Energy</span>
                            <div style="display: flex; align-items: center; gap: 0.75rem;">
                                <i data-lucide="sun" style="color: #FBBF24;"></i>
                                <span style="font-size: 1.25rem; font-weight: 700;" id="insightSolar">High</span>
                            </div>
                            <p style="font-size: 0.8125rem; color: var(--on-surface-variant); margin-top: 0.5rem;">Optimal for solar power generation between 10 AM - 4 PM.</p>
                        </div>
                        <div class="sub-plate" style="background: var(--surface-container-low); padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--outline-variant);">
                            <span style="font-size: 0.75rem; font-weight: 800; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem;">Navigation Risk</span>
                            <div style="display: flex; align-items: center; gap: 0.75rem;">
                                <i data-lucide="shield-check" style="color: var(--secondary);"></i>
                                <span style="font-size: 1.25rem; font-weight: 700;" id="insightRisk">Low</span>
                            </div>
                            <p style="font-size: 0.8125rem; color: var(--on-surface-variant); margin-top: 0.5rem;">Wind conditions are stable for short-distance travel.</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Footer -->
    <footer style="padding: var(--spacing-xxl); text-align: center; background: var(--surface-container-lowest); border-top: 1px solid var(--outline-variant);">
        <p style="color: var(--on-surface-variant); font-size: 0.875rem;">&copy; 2026 Atmosphere Pro. Precision forecasting for global safety.</p>
    </footer>

    <!-- Scripts -->
    <script src="forecast.js"></script>
    <script>
        lucide.createIcons();
    </script>
</body>
</html>