iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/framework (#1)

Browse Source 
Reviewed-on: #1
This commit is contained in:
master
2025-08-28 10:21:14 +02:00
parent e23b40e0cb
commit 6c58e479af
26 changed files with 7056 additions and 1361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
public/test-tabs.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab Test</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Tab Active State Test</h1>
<div class="tabs-container">
<div class="tabs-header">
<button class="tab-button active" data-tab="status">Status</button>
<button class="tab-button" data-tab="endpoints">Endpoints</button>
<button class="tab-button" data-tab="tasks">Tasks</button>
<button class="tab-button" data-tab="firmware">Firmware</button>
</div>
<div class="tab-content active" id="status-tab">
<h3>Status Tab</h3>
<p>This is the status tab content.</p>
</div>
<div class="tab-content" id="endpoints-tab">
<h3>Endpoints Tab</h3>
<p>This is the endpoints tab content.</p>
</div>
<div class="tab-content" id="tasks-tab">
<h3>Tasks Tab</h3>
<p>This is the tasks tab content.</p>
</div>
<div class="tab-content" id="firmware-tab">
<h3>Firmware Tab</h3>
<p>This is the firmware tab content.</p>
</div>
</div>
</div>
<script>
// Simple tab functionality test
document.addEventListener('DOMContentLoaded', function() {
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
const targetTab = this.dataset.tab;
// Remove active class from all buttons and contents
tabButtons.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// Add active class to clicked button and corresponding content
this.classList.add('active');
const targetContent = document.querySelector(`#${targetTab}-tab`);
if (targetContent) {
targetContent.classList.add('active');
}
console.log('Tab switched to:', targetTab);
});
});
});
</script>
</body>
</html>