Skip to content

Add release timeline slider, dropdown, and popups #153

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

Draft
unclehowell wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Draft

Add release timeline slider, dropdown, and popups #153

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
316 changes: 301 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,135 @@
}
.v-h {
position: absolute !important;
height: 1px; width: 1px;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
#mainWrapper + .release-top-bar {
margin-top: 82px;
}
.release-top-bar {
background: rgba(20, 20, 50, 0.85);
backdrop-filter: blur(4px);
color: #fff;
padding: 12px 16px;
position: relative;
z-index: 9;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.release-top-bar-inner {
display: flex;
align-items: center;
gap: 18px;
overflow-x: auto;
padding-bottom: 4px;
}
.release-dropdown-wrapper {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.release-back-button {
display: none;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 4px;
color: #fff;
padding: 6px 12px;
font-size: 0.85rem;
transition: background 0.2s ease, color 0.2s ease;
}
.release-back-button:hover,
.release-back-button:focus {
background: rgba(255, 255, 255, 0.18);
color: #fff;
outline: none;
}
.release-select {
background: rgba(14, 14, 35, 0.8);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 4px;
color: #fff;
padding: 6px 32px 6px 12px;
font-size: 0.85rem;
appearance: none;
min-width: 110px;
cursor: pointer;
}
.release-select:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(102, 204, 255, 0.45);
}
.release-select-secondary {
display: none;
}
.release-dropdown-wrapper.is-secondary .release-back-button {
display: inline-flex;
}
.release-dropdown-wrapper.is-secondary .release-select-primary {
display: none;
}
.release-dropdown-wrapper.is-secondary .release-select-secondary {
display: inline-block;
}
.release-slider {
display: flex;
gap: 12px;
flex-wrap: nowrap;
overflow-x: auto;
padding: 4px 0;
scrollbar-width: thin;
}
.release-slider::-webkit-scrollbar {
height: 6px;
}
.release-slider::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}
.release-slider::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.35);
border-radius: 10px;
}
.release-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 18px;
background: rgba(102, 204, 255, 0.18);
border: 1px solid rgba(102, 204, 255, 0.4);
border-radius: 999px;
color: #fff;
font-size: 0.85rem;
text-transform: uppercase;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.release-toggle:focus,
.release-toggle:hover {
background: rgba(102, 204, 255, 0.35);
border-color: rgba(102, 204, 255, 0.75);
text-decoration: none;
color: #fff;
outline: none;
}
.release-toggle:active {
background: rgba(102, 204, 255, 0.55);
}
.release-popup-content {
display: none;
max-width: 520px;
}
.release-popup-content h2 {
font-size: 1.4rem;
margin-bottom: 0.75rem;
color: #333366;
}
.release-popup-content p {
margin-bottom: 0.5rem;
line-height: 1.5;
}
#bg-video {
position: fixed;
top: 0;
Expand Down Expand Up @@ -133,11 +257,11 @@
<source src="https://wayback.datro.xyz/2025-10-19_timeline-background_video_v0.0.1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<header id="mainWrapper">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<h1 class="v-h">Site Navigation</h1>
<header id="mainWrapper">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<h1 class="v-h">Site Navigation</h1>
<a data-content="DATRO" href="index.html" title="DATRO">
<img alt="DATRO Header Logo" class="navbar-brand" src="static/datro/img/datro_logo.webp"></a>
<img alt="DATRO Header Logo" class="navbar-brand" src="static/datro/img/datro_logo.webp"></a>
<button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarCollapse" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
Expand All @@ -151,9 +275,35 @@ <h1 class="v-h">Site Navigation</h1>
<a data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true" class="nav-link" href="static/library/">Library</a>
</li>
</ul>
</div>
</nav>
</header>
</div>
</nav>
</header>
<section aria-label="Release timeline" class="release-top-bar">
<div class="release-top-bar-inner">
<div class="release-dropdown-wrapper" id="release-dropdown-wrapper">
<button aria-label="Go back to main release options" class="release-back-button" id="release-back-button" type="button">Back</button>
<select aria-label="Select a release tier" class="release-select release-select-primary" id="release-primary-select">
<option selected value="">Select option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select aria-label="Select a detailed release option" class="release-select release-select-secondary" id="release-secondary-select"></select>
</div>
<div aria-label="Release timeline slider" class="release-slider" role="list">
<a class="release-toggle" data-featherlight="#release-popup-free" data-featherlight-persist="true" href="#release-popup-free">Free</a>
<a class="release-toggle" data-featherlight="#release-popup-q1-2024" data-featherlight-persist="true" href="#release-popup-q1-2024">Q1-2024 Release</a>
<a class="release-toggle" data-featherlight="#release-popup-q2-2024" data-featherlight-persist="true" href="#release-popup-q2-2024">Q2-2024 Release</a>
<a class="release-toggle" data-featherlight="#release-popup-q3-2024" data-featherlight-persist="true" href="#release-popup-q3-2024">Q3-2024 Release</a>
<a class="release-toggle" data-featherlight="#release-popup-q4-2024" data-featherlight-persist="true" href="#release-popup-q4-2024">Q4-2024 Release</a>
<a class="release-toggle" data-featherlight="#release-popup-q1-2025" data-featherlight-persist="true" href="#release-popup-q1-2025">Q1-2025 Release</a>
<a class="release-toggle" data-featherlight="#release-popup-q2-2025" data-featherlight-persist="true" href="#release-popup-q2-2025">Q2-2025 Release</a>
<a class="release-toggle" data-featherlight="#release-popup-q3-2025" data-featherlight-persist="true" href="#release-popup-q3-2025">Q3-2025 Release</a>
<a class="release-toggle" data-featherlight="#release-popup-q4-2025" data-featherlight-persist="true" href="#release-popup-q4-2025">Q4-2025 Release</a>
<a class="release-toggle" data-featherlight="#release-popup-restricted" data-featherlight-persist="true" href="#release-popup-restricted">Restricted Access Preview</a>
</div>
</div>
</section>
<!-- preloader <div id="loader"></div> -->
<div id="loader-wrapper">
<div class="loader-section section-left"></div>
Expand Down Expand Up @@ -439,19 +589,155 @@ <h3 class="FooterNew-link-title FooterNew-link-title--hideMobile" style="margin-
</div>
</footer>
</div>
<div aria-hidden="true">
<div class="release-popup-content" id="release-popup-free">
<h2>Free Tier Access</h2>
<p>Explore the open DATRO experience with unrestricted community features and public knowledge base materials.</p>
<p>Ideal for curious visitors who want to understand the vision and get started without commitment.</p>
</div>
<div class="release-popup-content" id="release-popup-q1-2024">
<h2>Q1-2024 Release</h2>
<p>Foundational connectivity services, platform login, and initial collaboration toolset are scheduled for this window.</p>
<p>Includes onboarding resources for early participants and technical partners.</p>
</div>
<div class="release-popup-content" id="release-popup-q2-2024">
<h2>Q2-2024 Release</h2>
<p>Expands on the Q1 build with integrated analytics dashboards and enhanced governance controls.</p>
<p>Designed for teams preparing pilot deployments and real-world field trials.</p>
</div>
<div class="release-popup-content" id="release-popup-q3-2024">
<h2>Q3-2024 Release</h2>
<p>Introduces partner APIs, data-exchange improvements, and wider interoperability for municipal roll-outs.</p>
<p>Engineering notes include upgrade strategies and migration helpers.</p>
</div>
<div class="release-popup-content" id="release-popup-q4-2024">
<h2>Q4-2024 Release</h2>
<p>Focuses on resilience testing, internationalisation, and live support readiness.</p>
<p>Recommended for operators scaling infrastructure beyond pilot programmes.</p>
</div>
<div class="release-popup-content" id="release-popup-q1-2025">
<h2>Q1-2025 Release</h2>
<p>Launches automated deployment pipelines and telemetry bundling for enterprise partners.</p>
<p>Highlights include extended documentation sets and curated training paths.</p>
</div>
<div class="release-popup-content" id="release-popup-q2-2025">
<h2>Q2-2025 Release</h2>
<p>Delivers marketplace integrations, subscription tooling, and improved SLA reporting.</p>
<p>Perfect for organisations aligning business operations with DATRO infrastructure.</p>
</div>
<div class="release-popup-content" id="release-popup-q3-2025">
<h2>Q3-2025 Release</h2>
<p>Centres on automation, AI-assisted monitoring, and policy templates for distributed governance.</p>
<p>Provides action plans for compliance and regulatory reviews.</p>
</div>
<div class="release-popup-content" id="release-popup-q4-2025">
<h2>Q4-2025 Release</h2>
<p>Marks the full ecosystem release with federation services and comprehensive support tiers.</p>
<p>Includes launch readiness kits and expanded customer success programmes.</p>
</div>
<div class="release-popup-content" id="release-popup-restricted">
<h2>Restricted Access Preview</h2>
<p>Request invitation-only access to experimental features, sandbox datasets, and early product concepts.</p>
<p>Ideal for strategic partners collaborating on the roadmap beyond 2025.</p>
</div>
</div>
<script src="static/datro/js/bootstrap.min.js"></script>
<script src="static/datro/js/holder2.js">
</script>
<script src="static/datro/js/carousel-dropdown.js">
</script>
<script src="static/datro/js/holder2.js">
</script>
<script src="static/datro/js/carousel-dropdown.js">
</script>
<script src="static/datro/js/currencydrop.js">
</script>
<script src="static/datro/js/scale.fix.js">
</script>
<script src="static/datro/html/featherlight/release/featherlight.min.js">
</script>
<script src="static/datro/js/smoothloader.js"></script>
<script src="static/datro/html/featherlight/release/featherlight.min.js">
</script>
<script src="static/datro/js/smoothloader.js"></script>
<script defer src="static/datro/js/footer-accordion.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var wrapper = document.getElementById('release-dropdown-wrapper');
if (!wrapper) {
return;
}

var primarySelect = document.getElementById('release-primary-select');
var secondarySelect = document.getElementById('release-secondary-select');
var backButton = document.getElementById('release-back-button');

var secondaryOptionMap = {
'1': [
{ value: 'prototype-overview', label: 'Prototype Overview' },
{ value: 'performance-metrics', label: 'Performance Metrics' },
{ value: 'deployment-notes', label: 'Deployment Notes' }
],
'2': [
{ value: 'integration-checklist', label: 'Integration Checklist' },
{ value: 'compliance-pack', label: 'Compliance Pack' },
{ value: 'field-support', label: 'Field Support' }
],
'3': [
{ value: 'partner-access', label: 'Partner Access' },
{ value: 'training-paths', label: 'Training Paths' },
{ value: 'market-insights', label: 'Market Insights' }
]
};

function resetToPrimary() {
wrapper.classList.remove('is-secondary');
primarySelect.value = '';
secondarySelect.innerHTML = '';
}

function populateSecondaryOptions(key) {
var options = secondaryOptionMap[key];
if (!options) {
resetToPrimary();
return;
}

secondarySelect.innerHTML = '';
var placeholder = document.createElement('option');
placeholder.value = '';
placeholder.textContent = 'Select detail';
placeholder.disabled = true;
placeholder.selected = true;
secondarySelect.appendChild(placeholder);

options.forEach(function (entry) {
var option = document.createElement('option');
option.value = entry.value;
option.textContent = entry.label;
secondarySelect.appendChild(option);
});

wrapper.classList.add('is-secondary');
secondarySelect.focus();
}

primarySelect.addEventListener('change', function (event) {
var value = event.target.value;
if (value) {
populateSecondaryOptions(value);
} else {
resetToPrimary();
}
});

backButton.addEventListener('click', function () {
resetToPrimary();
primarySelect.focus();
});

secondarySelect.addEventListener('change', function () {
if (!secondarySelect.value) {
return;
}

wrapper.classList.add('selection-made');
});
});
</script>
</body>
</html>