Skip to content

Feature/database for ml training #248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
heubert-69 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Feature/database for ml training #248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d09e3a6
Add: Database for weather data for ML Training; Postgres for long ter…
heubert-69 Jun 4, 2026
b6ecf2e
feat: implement theme switcher and improve UI contrast
Pooja0629 Jun 3, 2026
3a37c85
feat: implement theme persistence across pages
Pooja0629 Jun 4, 2026
f8171c7
feat: add timestamps to ClimateBot messages
Devengoyal885 Jun 3, 2026
cffa1f4
fix: remove duplicate chatbot implementation on home page
Devengoyal885 Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
134 changes: 127 additions & 7 deletions Frontend/Analysis/analysis.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,8 @@ body::before {
line-height: 0.98;
letter-spacing: -0.04em;
max-width: 10ch;
color: #f8fafc;
}
}

.analysis-hero p {
Expand Down Expand Up @@ -277,7 +279,7 @@ body::before {
border-radius: 999px;
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(56, 189, 248, 0.22);
color: #a5f3fc;
color: #0284c7;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
Expand Down Expand Up @@ -619,9 +621,10 @@ button:hover {
padding: 20px;
border-radius: 18px;
line-height: 1.7;
font-weight: 600;
font-weight: 700;
font-size: 0.98rem;
animation: fadeIn 0.35s ease;

}

.alert-box.alert-danger,
Expand All @@ -647,7 +650,7 @@ button:hover {

.alert-danger {
background: rgba(239, 68, 68, 0.16);
border: 1px solid rgba(239, 68, 68, 0.42);
border: 1px solid rgba(230, 10, 10, 0.42);
color: #fecaca;
}

Expand Down Expand Up @@ -944,13 +947,15 @@ button:hover {
}

.clear-btn {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.35);
color: #fecaca;
background: #fee2e2;
border: 2px solid #d80505;
color: #dc2626;
font-weight: 700;
}

.clear-btn:hover {
background: rgba(239, 68, 68, 0.25);
background: #fecaca;
color: #b91c1c;
}

/* =========================================================
Expand Down Expand Up @@ -1442,3 +1447,118 @@ button:hover {
.contact-links a:hover {
opacity: 0.8;
}
.theme-toggle {
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
cursor: pointer;
font-size: 1.2rem;
background: var(--panel);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
}
.theme-toggle:hover {
transform: translateY(-2px) scale(1.05);
}
body.light-mode {
color: #1e293b !important;
--bg-0: #f8fafc;
--bg-1: #eef6ff;
--bg-2: #e2e8f0;

--text: #1e293b;
--muted: #475569;
--muted-2: #64748b;

background:
radial-gradient(circle at top left, rgba(56,189,248,0.08), transparent 26%),
radial-gradient(circle at top right, rgba(34,197,94,0.06), transparent 22%),
linear-gradient(135deg, var(--bg-0), var(--bg-1), var(--bg-2));
}

body.light-mode .glass-card {
background: rgba(255,255,255,0.9);
color: #1e293b;
color: #1e293b !important;
}

body.light-mode .navbar {
background: rgba(255,255,255,0.9);
}

body.light-mode .footer {
background: rgba(255,255,255,0.9);
}

body.light-mode .footer a,
body.light-mode .footer p,
body.light-mode .footer strong {
color: #334155;
}
body.light-mode .glass-card,
body.light-mode .navbar,
body.light-mode .footer,
body.light-mode .mini-stats div,
body.light-mode .analysis-intro-meta div,
body.light-mode .weather-box,
body.light-mode .risk-card {
background: rgba(255,255,255,0.92);
color: #1e293b;
border-color: rgba(0,0,0,0.08);
}
body.light-mode .input-group input,
body.light-mode .subscribe-inputs input,
body.light-mode .subscribe-inputs select {
background: white;
color: #1e293b;
border: 1px solid #cbd5e1;
}
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode strong {
color: #1e293b;
}
body.light-mode .chatbot-panel {
background: white;
color: #1e293b;
}

body.light-mode .chatbot-form input {
background: #f8fafc;
color: #1e293b;
}
body.light-mode .analysis-hero p,
body.light-mode .eyebrow {
color: #475569;
}
body.light-mode .clear-btn {
background: #fee2e2;
border: 1px solid #ef4444;
color: #dc2626;
font-weight: 600;
}

body.light-mode .clear-btn:hover {
background: #fecaca;
}
body.dark-mode .analysis-hero h1 {
color: #1e293b !important;
}

body.dark-mode .analysis-hero p {
color: #cbd5e1;
}
body.light-mode .message-box.is-error {
background: #fee2e2;
border: 2px solid #ef4444;
color: #b91c1c;
}
body.light-mode .message-box.is-success {
background: #dcfce7;
border: 2px solid #22c55e;
color: #166534;
}
14 changes: 9 additions & 5 deletions Frontend/Analysis/analysis.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,16 @@
</a>

<div class="nav-links">
<a href="../index.html">Home</a>
<a href="#analysis-form">Analysis</a>
<a href="#results">Results</a>
</div>
<a href="../index.html">Home</a>
<a href="#analysis-form">Analysis</a>
<a href="#results">Results</a>
</div>

<button id="theme-toggle" class="theme-toggle">
☾
</button>

<a class="nav-cta" href="#analysis-form">Analyze now</a>
<a class="nav-cta" href="#analysis-form">Analyze now</a>
</nav>

<main class="analysis-layout">
Expand Down
25 changes: 24 additions & 1 deletion Frontend/Analysis/analysis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -553,4 +553,27 @@ window.useCurrentLocation = async function () {
alert("Location permission denied.");
},
);
};
};

const themeToggle = document.getElementById("theme-toggle");

if (themeToggle) {
const savedTheme = localStorage.getItem("theme");

if (savedTheme === "light") {
document.body.classList.add("light-mode");
themeToggle.textContent = "☀";
}

themeToggle.addEventListener("click", () => {
document.body.classList.toggle("light-mode");

if (document.body.classList.contains("light-mode")) {
localStorage.setItem("theme", "light");
themeToggle.textContent = "☀";
} else {
localStorage.setItem("theme", "dark");
themeToggle.textContent = "☾";
}
});
}
18 changes: 9 additions & 9 deletions Frontend/chatbot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,14 +209,14 @@ document.addEventListener('DOMContentLoaded', () => {
setChatStatus(status, '');

} catch (error) {
console.error(error);
appendChatMessage(
messages,
'Chatbot backend is not running.',
'bot',
true
);
setChatStatus(status, '');
}
console.error(error);
appendChatMessage(
messages,
'Chatbot backend is not running.',
'bot',
true
);
setChatStatus(status, '');
}
});
});
70 changes: 2 additions & 68 deletions Frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
>GitHub</a
>
</div>

<button id="theme-toggle" class="theme-toggle">☾</button>
<a class="nav-cta" href="Analysis/analysis.html">Start Analysis</a>
</nav>

Expand Down Expand Up @@ -244,72 +244,6 @@ <h3>Actionable alerts</h3>

<script src="script.js"></script>
<script src="chatbot.js"></script>
<script>
(function(){
const toggle = document.getElementById('chatbot-toggle');
const panel = document.getElementById('chatbot-panel');
const closeBtn = document.getElementById('chatbot-close');
const form = document.getElementById('chatbot-form');
const input = document.getElementById('chatbot-input');
const messagesDiv = document.getElementById('chatbot-messages');
const statusDiv = document.getElementById('chatbot-status');

function addMessage(text, isUser) {
const msgDiv = document.createElement('div');
msgDiv.className = isUser ? 'message user' : 'message bot';
msgDiv.innerText = text;
messagesDiv.appendChild(msgDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

function showStatus(msg) {
statusDiv.innerText = msg;
statusDiv.classList.remove('hidden');
setTimeout(() => statusDiv.classList.add('hidden'), 2200);
}

async function getBotReply(question) {
const q = question.toLowerCase();
if (q.includes('flood') || q.includes('flooding')) {
return "🌊 Flood risk is calculated using rainfall intensity, soil moisture, and river levels. Climate Shield monitors real-time precipitation and terrain vulnerability to flag potential flash floods.";
} else if (q.includes('heatwave') || q.includes('extreme heat')) {
return "🔥 Heatwave risks increase when temperatures exceed regional thresholds. We analyze thermal stress, humidity, and duration to provide early heat alerts.";
} else if (q.includes('cyclone') || q.includes('hurricane') || q.includes('typhoon')) {
return "🌀 Cyclones are tracked using wind speed patterns, pressure drops, and storm surge modeling. Our system highlights areas at risk of severe winds and coastal flooding.";
} else if (q.includes('climate change')) {
return "🌎 Climate change amplifies extreme weather events — heavier rainfall, prolonged heatwaves, and stronger storms. Climate Shield helps communities build adaptive resilience.";
} else {
return "💡 I can answer questions about flood risk, heatwaves, cyclones, climate adaptation, and weather preparedness. Try: 'How to prepare for floods?' or 'Heatwave safety tips'.";
}
}

form.addEventListener('submit', async (e) => {
e.preventDefault();
const userMsg = input.value.trim();
if (!userMsg) return;
addMessage(userMsg, true);
input.value = '';
showStatus('Analyzing climate data...');
try {
const reply = await getBotReply(userMsg);
addMessage(reply, false);
statusDiv.classList.add('hidden');
} catch (err) {
addMessage("Sorry, I'm having trouble. Please try again.", false);
statusDiv.classList.add('hidden');
}
});

toggle.addEventListener('click', () => {
panel.classList.toggle('hidden');
const expanded = !panel.classList.contains('hidden');
toggle.setAttribute('aria-expanded', expanded);
});
closeBtn.addEventListener('click', () => {
panel.classList.add('hidden');
toggle.setAttribute('aria-expanded', 'false');
});
})();
</script>

</body>
</html>
Loading