Skip to content

feat: add results page #6

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

Merged
arnest00 merged 8 commits into from
Nov 7, 2025
Merged

feat: add results page #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
959e127
feat: update welcome panel text
arnest00 Oct 14, 2025
36141a8
fix: apply welcome panel css correctly
arnest00 Oct 14, 2025
8bc4ca2
feat: add results panel HTML and CSS
arnest00 Oct 14, 2025
3ced62f
feat: add logic to navigate between welcome and results panels
arnest00 Oct 14, 2025
b50a5f9
fix: update results.css location
arnest00 Nov 4, 2025
1e02add
fix: only one panel open at a time
arnest00 Nov 4, 2025
29b6495
fix: unable to scroll on smaller browser window
arnest00 Nov 4, 2025
7cd774f
fix: match CSS to `main`
arnest00 Nov 4, 2025
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
26 changes: 21 additions & 5 deletions src/core/ExtensionManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,24 @@ class ExtensionManager {
}
}

removeVisiblePanels() {
const panels = document.querySelectorAll('.cv-panel.cv-panel--visible');
if (!panels.length) return;

panels.forEach((panel) => {
panel.classList.remove('cv-panel--visible');
setTimeout(() => {
panel.remove();
}, 300);
});
}

async togglePanel(panelType) {
try {
const panel = this.panels.get(panelType);
const visiblePanels = document.querySelectorAll('.cv-panel.cv-panel--visible');

if (panel && panel.isVisible) {
this.closePanel(panelType);
if (visiblePanels.length) {
this.removeVisiblePanels();
} else {
await this.openPanel(panelType);
}
Expand All @@ -98,6 +110,8 @@ class ExtensionManager {
}

async openPanel(panelType, data = {}) {
this.removeVisiblePanels();

let panel = this.panels.get(panelType);

// Create a new panel if one does not already exist
Expand All @@ -111,10 +125,10 @@ class ExtensionManager {
await panel.show();
}

closePanel(panelType) {
async closePanel(panelType) {
const panel = this.panels.get(panelType);
if (panel) {
panel.hide();
await panel.hide();
}
}

Expand All @@ -137,3 +151,5 @@ class ExtensionManager {
}

export { ExtensionManager };

export const extensionManager = new ExtensionManager();
14 changes: 11 additions & 3 deletions src/core/Panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,15 @@ class Panel {
cssFile: 'src/styles/styles.css',
jsFile: 'src/panels/welcome/welcome.js',
containerId: 'carbon-visualizer-welcome-panel',
className: 'cv cv-panel--welcome'
}
className: 'cv-panel--welcome'
},
results: {
htmlFile: 'src/panels/results/results.html',
cssFile: 'src/panels/results/results.css',
jsFile: 'src/panels/results/results.js',
containerId: 'carbon-visualizer-results-panel',
className: 'cv-panel--results'
},
};

return configs[type] || configs.welcome;
Expand Down Expand Up @@ -119,8 +126,9 @@ class Panel {

while (retries < maxRetries) {
const analyzeBtn = this.container.querySelector('#analyze-page-btn');
const backToWelcomeBtn = this.container.querySelector('#back-to-welcome-btn');

if (analyzeBtn) {
if (analyzeBtn || backToWelcomeBtn) {
return; // Element found, we're good to go
}

Expand Down
30 changes: 30 additions & 0 deletions src/panels/results/results.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="cv-panel-content">
<header class="cv-panel__header">
<h1 class="cv-panel__title">Carbon Visualizer</h1>
</header>

<main class="cv-panel__content">
<div class="cv-results">
<div class="cv-results__icon">
🌱
</div>
<h2 class="cv-results__title">Results</h2>
<p class="cv-results__description">
This is where you'd see the results of the analysis. Coming soon!
</p>

<button class="cv-btn cv-btn--primary" id="back-to-welcome-btn">
Analyze another page
</button>
</div>
</main>
</div>
</body>
</html>
24 changes: 24 additions & 0 deletions src/panels/results/results.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
// Results panel JavaScript
import { extensionManager } from "../../core/ExtensionManager.js";

export function initializePanel(panelType, data) {
// Get the container element
const container = data.container;

if (!container) {
return;
}

// Get back to welcome button from within the container
const backToWelcomeBtn = container.querySelector('#back-to-welcome-btn');

// Check if button exists before adding event listener
if (!backToWelcomeBtn) {
return;
}

// Event listener for back to welcome button
backToWelcomeBtn.addEventListener('click', async () => {
await extensionManager.openPanel('welcome');
});
}
10 changes: 5 additions & 5 deletions src/panels/welcome/welcome.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@ <h1 class="cv-panel__title">Carbon Visualizer</h1>

<main class="cv-panel__content">
<div class="cv-welcome">
<div class="cv-welcome__icon">
<div class="cv-panel--welcome__icon">
🌱
</div>
<h2 class="cv-welcome__title">Welcome to Carbon Visualizer</h2>
<p class="cv-welcome__description">
<h2 class="cv-panel--welcome__title">Welcome to Carbon Visualizer</h2>
<p class="cv-panel--welcome__description">
Assess your website's carbon footprint using Lighthouse performance metrics and CO2.js calculations.
</p>

<ul class="cv-welcome__features">
<ul class="cv-panel--welcome__features">
<li class="cv-feature">
<span class="cv-feature__icon">⚡</span>
<span class="cv-feature__text">Performance Analysis</span>
Expand All @@ -36,7 +36,7 @@ <h2 class="cv-welcome__title">Welcome to Carbon Visualizer</h2>
</ul>

<button class="cv-btn cv-btn--primary" id="analyze-page-btn">
Analyze This Page
Analyze this website
</button>
</div>
</main>
Expand Down
12 changes: 3 additions & 9 deletions src/panels/welcome/welcome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// Welcome panel JavaScript
import { extensionManager } from "../../core/ExtensionManager.js";

export function initializePanel(panelType, data) {
// Get the container element
Expand All @@ -17,14 +18,7 @@ export function initializePanel(panelType, data) {
}

// Event listener for analyze button
analyzeBtn.addEventListener('click', () => {
// For now, just show a simple message
analyzeBtn.disabled = true;
analyzeBtn.textContent = 'Coming Soon!';

setTimeout(() => {
analyzeBtn.disabled = false;
analyzeBtn.textContent = 'Analyze This Page';
}, 2000);
analyzeBtn.addEventListener('click', async () => {
await extensionManager.openPanel('results');
Copy link
Contributor

@rise-erpelding rise-erpelding Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noting that the button from the welcome panel (and all of the other welcome panel elements) are still in the DOM when I'm on the results panel because the welcome panel is still open, would we want to remove those? Maybe over here when we open the results panel, also close the panel? (I think that may visually animate the welcome panel to slide out then slide in the results panel though, is that undesirable?)

Screenshot 2025-10-21 at 12 16 13 PM image

});
}
26 changes: 26 additions & 0 deletions src/styles/results.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@

/* Results panel variant styles */

.cv-panel--results {
text-align: center;
background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%);
color: var(--cv-white);
}

.cv-results__icon {
font-size: 3rem;
margin-bottom: 1rem;
}

.cv-results__title {
margin: 0 0 1rem 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--cv-white);
}

.cv-results__description {
margin: 0 0 2rem 0;
color: var(--cv-white);
line-height: 1.5;
}
2 changes: 0 additions & 2 deletions src/styles/welcome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
text-align: center;
background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%);
color: var(--cv-white);
min-block-size: fit-content;
}

.cv-panel--welcome__icon {
Expand All @@ -32,4 +31,3 @@
gap: 0.75rem;
margin-bottom: 2rem;
}