| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI & Data Science Project Lifecycle Dashboard</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| </head> |
| <body> |
| |
| <header class="header"> |
| <div class="container"> |
| <h1 class="header__title">AI & Data Science Project Lifecycle</h1> |
| <p class="header__subtitle">Interactive Dashboard for ML Project Management</p> |
| </div> |
| </header> |
|
|
| |
| <main class="main"> |
| <div class="container"> |
| |
| <aside class="filters"> |
| <div class="filters__section"> |
| <h3 class="filters__title">Industry Domain</h3> |
| <select id="industryFilter" class="form-control"> |
| <option value="">All Industries</option> |
| <option value="Healthcare">Healthcare</option> |
| <option value="Retail">Retail</option> |
| <option value="Finance">Finance</option> |
| <option value="Manufacturing">Manufacturing</option> |
| <option value="Education">Education</option> |
| </select> |
| </div> |
|
|
| <div class="filters__section"> |
| <h3 class="filters__title">Model Type</h3> |
| <select id="modelFilter" class="form-control"> |
| <option value="">All Models</option> |
| <option value="Logistic Regression">Logistic Regression</option> |
| <option value="Random Forest">Random Forest</option> |
| <option value="SVM">SVM</option> |
| <option value="Neural Networks">Neural Networks</option> |
| <option value="Linear Regression">Linear Regression</option> |
| <option value="K-Means">K-Means</option> |
| </select> |
| </div> |
|
|
| <div class="filters__section"> |
| <h3 class="filters__title">Dataset Version</h3> |
| <select id="versionFilter" class="form-control"> |
| <option value="">All Versions</option> |
| <option value="v1.0">v1.0</option> |
| <option value="v1.1">v1.1</option> |
| <option value="v1.2">v1.2</option> |
| <option value="v2.0">v2.0</option> |
| </select> |
| </div> |
|
|
| <div class="filters__section"> |
| <h3 class="filters__title">Progress Overview</h3> |
| <div class="progress-summary"> |
| <div class="progress-item"> |
| <span class="progress-label">Completed:</span> |
| <span class="progress-value" id="completedCount">2</span> |
| </div> |
| <div class="progress-item"> |
| <span class="progress-label">In Progress:</span> |
| <span class="progress-value" id="inProgressCount">1</span> |
| </div> |
| <div class="progress-item"> |
| <span class="progress-label">Pending:</span> |
| <span class="progress-value" id="pendingCount">4</span> |
| </div> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <section class="timeline-container"> |
| <div class="timeline"> |
| <div class="timeline__line"></div> |
| <div class="timeline__stages" id="timelineStages"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="content-area"> |
| <div class="stage-detail" id="stageDetail"> |
| <div class="welcome-message"> |
| <h2>Welcome to the AI & Data Science Project Lifecycle</h2> |
| <p>Click on any stage in the timeline to explore detailed information about that phase of the project lifecycle.</p> |
| <div class="overview-stats"> |
| <div class="stat-card"> |
| <h3>Total Stages</h3> |
| <div class="stat-value">7</div> |
| </div> |
| <div class="stat-card"> |
| <h3>Completion Rate</h3> |
| <div class="stat-value">43%</div> |
| </div> |
| <div class="stat-card"> |
| <h3>Current Phase</h3> |
| <div class="stat-value">Preprocessing</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| </main> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
