Skip to content

[DASHBOARD] Add dashboard UI #95

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
Khadija-Zou wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[DASHBOARD] Add dashboard UI #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eef0b4e
[DASHBOARD] Add pipelines analysis dashboard UI
Khadija-Zou Jan 10, 2026
d691d17
Merge branch 'FinanceLake:main' into main
Khadija-Zou Jan 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,296 changes: 2,296 additions & 0 deletions Dashboard/dashboard.html
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added Dashboard/img/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 82 additions & 0 deletions Dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FinanceLake - Login</title>
<link rel="stylesheet" href="style.css">
<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;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="main-container">

<!-- Header Section -->
<header>
<div class="brand-container">
<img src="img/logo.png" alt="FinanceLake Logo" class="logo-img">
<h1 class="brand-name">FinanceLake</h1>
</div>
<p class="brand-tagline">The open-source data platform to build scalable financial analytics with confidence.</p>


</header>
<!-- Auth Card -->
<div class="auth-card">
<!-- Tabs -->
<div class="auth-tabs">
<button class="tab-btn active" data-tab="login">Connexion</button>
<button class="tab-btn" data-tab="signup">Inscription</button>
</div>
<!-- Login Form -->
<div class="form-container active" id="login-form">
<h2 class="form-title">Connexion</h2>
<p class="form-subtitle">Accédez à votre plateforme d'analyse financière</p>

<form onsubmit="event.preventDefault();">
<div class="input-group">
<label for="email">Email</label>
<div class="input-wrapper">
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<input type="email" id="email" placeholder="trader@financelake.io" value="trader@financelake.io">
</div>
</div>
<div class="input-group">
<label for="password">Mot de passe</label>
<div class="input-wrapper">
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<input type="password" id="password" value="........">
</div>
</div>
<button type="submit" class="submit-btn primary">Se connecter</button>
<div class="form-footer">
<a href="#" class="forgot-password">Mot de passe oublié ?</a>
<span class="mode-demo">Mode démo</span>
</div>
</form>
</div>
<!-- Signup Form (Hidden by default) -->
<div class="form-container" id="signup-form" style="display: none;">
<h2 class="form-title">Inscription</h2>
<p class="form-subtitle">Rejoignez FinanceLake aujourd'hui</p>
<form onsubmit="event.preventDefault();">
<div class="input-group">
<label for="signup-email">Email</label>
<div class="input-wrapper">
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<input type="email" id="signup-email" placeholder="votre@email.com">
</div>
</div>
<button type="submit" class="submit-btn primary">S'inscrire</button>
</form>
</div>
<div class="academic-info">
<p>Faculté Polydisciplinaire de Taroudant</p>
<p>Encadré par <span class="highlight">Prof. El Hajji</span></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
88 changes: 88 additions & 0 deletions Dashboard/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
// Function to handle Source Selection
function selectSource(sourceName) {
localStorage.setItem('selectedSource', sourceName);
window.location.href = 'dashboard.html';
}

document.addEventListener('DOMContentLoaded', () => {
// --- Login Page Logic ---
const loginForm = document.getElementById('login-form');
if (loginForm) {
// Tab Switching Logic
const tabs = document.querySelectorAll('.tab-btn');
const signupForm = document.getElementById('signup-form');

tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');

const target = tab.dataset.tab;
if (target === 'login') {
loginForm.style.display = 'block';
loginForm.classList.remove('active');
void loginForm.offsetWidth; // Trigger reflow
loginForm.classList.add('active');
signupForm.style.display = 'none';
} else {
loginForm.style.display = 'none';
signupForm.style.display = 'block';
signupForm.classList.remove('active');
void signupForm.offsetWidth;
signupForm.classList.add('active');
}
});
});

// Handle Login Submission
const form = loginForm.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
// Simulate login delay
const btn = form.querySelector('button');
const originalText = btn.innerText;
btn.innerText = 'Connexion...';

setTimeout(() => {
window.location.href = 'sources.html';
}, 800);
});
}

// --- Dashboard Logic ---
if (window.location.pathname.includes('dashboard.html')) {
const savedSource = localStorage.getItem('selectedSource');
if (savedSource) {
const badgeText = document.getElementById('source-name');
if (badgeText) {
badgeText.innerText = savedSource;
}
}

// Sidebar Navigation Logic
const navItems = document.querySelectorAll('.nav-item');
const views = document.querySelectorAll('.content-view');

navItems.forEach(item => {
if (item.dataset.target) {
item.addEventListener('click', (e) => {
e.preventDefault();

// Remove active from all navs
navItems.forEach(nav => nav.classList.remove('active'));
item.classList.add('active');

// Hide all views
views.forEach(view => view.classList.remove('active'));

// Show target view
const targetId = item.dataset.target;
const targetView = document.getElementById(targetId);
if (targetView) {
targetView.classList.add('active');
}
});
}
});
}
});
Loading
Loading