From 68d1a2660d4e90cc033b42ddf53909058ce8c5c9 Mon Sep 17 00:00:00 2001
From: unclehowell <hywelapbuckler@gmail.com>
Date: Wed, 12 Nov 2025 20:50:17 -0300
Subject: [PATCH] Refine release slider and library routing

---
 index.html                                  | 706 +++++++++++++++++++-
 static/datro/404.html                       | 128 +++-
 static/datro/academy.html                   | 128 +++-
 static/datro/canceled.html                  | 132 +++-
 static/datro/docs-intro.html                | 132 +++-
 static/datro/docs.html                      | 128 +++-
 static/datro/documents.html                 | 148 +++-
 static/datro/history.html                   | 128 +++-
 static/datro/html/content/media-center.html | 132 +++-
 static/datro/html/docs-intro.html           | 132 +++-
 static/datro/html/search.html               | 128 +++-
 static/datro/html/statistics/website.html   | 132 +++-
 static/datro/index.html                     | 687 ++++++++++++++++++-
 static/datro/success.html                   | 128 +++-
 static/datro/team.html                      | 128 +++-
 static/datro/technology.html                | 128 +++-
 16 files changed, 3119 insertions(+), 106 deletions(-)

diff --git a/index.html b/index.html
index 2df539129c..a0c6fa4339 100755
--- a/index.html
+++ b/index.html
@@ -64,11 +64,202 @@
 	                  }
 .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-timeline-bar {
+        margin-top: 82px;
+}
+.release-timeline-bar {
+        background: rgba(20, 20, 50, 0.88);
+        color: #fff;
+        padding: 16px;
+        position: relative;
+        z-index: 9;
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
+}
+.release-timeline-inner {
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        flex-wrap: nowrap;
+}
+.release-tier-controls {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-shrink: 0;
+}
+.release-tier-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        border-radius: 4px;
+        color: #fff;
+        padding: 6px 14px;
+        font-size: 0.85rem;
+        cursor: pointer;
+        transition: background 0.2s ease, color 0.2s ease;
+}
+.release-tier-button:hover,
+.release-tier-button:focus {
+        background: rgba(255, 255, 255, 0.18);
+        color: #fff;
+        outline: none;
+}
+.release-tier-select {
+        background: rgba(14, 14, 35, 0.85);
+        border: 1px solid rgba(255, 255, 255, 0.35);
+        border-radius: 4px;
+        color: #fff;
+        padding: 6px 32px 6px 12px;
+        font-size: 0.85rem;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        min-width: 120px;
+        cursor: pointer;
+}
+.release-tier-select:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px rgba(102, 204, 255, 0.45);
+}
+.release-slider-scroll {
+        overflow-x: auto;
+        scrollbar-width: thin;
+        padding: 8px 0 12px;
+        flex: 1 1 auto;
+        min-width: 0;
+}
+.release-slider-scroll::-webkit-scrollbar {
+        height: 6px;
+}
+.release-slider-scroll::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.1);
+}
+.release-slider-scroll::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.35);
+        border-radius: 10px;
+}
+.release-slider-track {
+        min-width: max(680px, calc(var(--stage-count, 1) * 140px));
+        padding: 0 12px;
+}
+.release-stage-slider {
+        width: 100%;
+        appearance: none;
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15));
+        height: 6px;
+        border-radius: 999px;
+        outline: none;
+        position: relative;
+}
+.release-stage-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        height: 18px;
+        width: 18px;
+        border-radius: 50%;
+        border: 2px solid #ffffff;
+        background: #66CCFF;
+        cursor: pointer;
+        margin-top: -6px;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+        transition: transform 0.2s ease;
+}
+.release-stage-slider::-moz-range-thumb {
+        height: 18px;
+        width: 18px;
+        border-radius: 50%;
+        border: 2px solid #ffffff;
+        background: #66CCFF;
+        cursor: pointer;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+        transition: transform 0.2s ease;
+}
+.release-stage-slider::-webkit-slider-thumb:hover,
+.release-stage-slider::-moz-range-thumb:hover {
+        transform: scale(1.05);
+}
+.release-slider-labels {
+        display: flex;
+        justify-content: space-between;
+        gap: 0;
+        margin-top: 12px;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+        color: rgba(255, 255, 255, 0.75);
+}
+.release-slider-label {
+        flex: 1 1 0;
+        text-align: center;
+        min-width: 120px;
+        cursor: pointer;
+        position: relative;
+        white-space: nowrap;
+        background: none;
+        border: none;
+        color: inherit;
+        padding: 18px 4px 0;
+        font: inherit;
+}
+.release-slider-label::before {
+        content: '';
+        position: absolute;
+        top: -14px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 2px;
+        height: 10px;
+        background: rgba(255, 255, 255, 0.5);
+}
+.release-slider-label:focus {
+        outline: none;
+        color: #ffffff;
+}
+.release-slider-label.is-active {
+        color: #66CCFF;
+        font-weight: 600;
+}
+        .release-slider-label.is-active::before {
+                background: #66CCFF;
+                height: 14px;
+        }
+        .release-padlock {
+                font-size: 1.4rem;
+                line-height: 1;
+                display: block;
+                transition: color 0.2s ease, transform 0.2s ease;
+        }
+        .release-slider-label:hover .release-padlock,
+        .release-slider-label:focus .release-padlock {
+                transform: scale(1.05);
+        }
+        .release-slider-label.is-unlocked .release-padlock {
+                color: #66CCFF;
+        }
+        .release-stage-text {
+                font-size: 0.7rem;
+                text-transform: uppercase;
+                letter-spacing: 0.04em;
+        }
+        .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;
@@ -133,11 +324,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>
@@ -151,9 +342,82 @@ <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-timeline-bar">
+                <div class="release-timeline-inner">
+                        <div class="release-tier-controls" id="release-tier-controls">
+                                <button aria-label="Go back to primary options" class="release-tier-button" id="release-menu-back" type="button" hidden>Back</button>
+                                <select aria-label="Select an option" class="release-tier-select" id="release-tier-primary">
+                                        <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 follow-on option" class="release-tier-select" id="release-tier-secondary" hidden></select>
+                        </div>
+                        <div aria-label="Release timeline slider" class="release-slider-scroll">
+                                <div class="release-slider-track" id="release-slider-track" style="--stage-count: 10;">
+                                        <input aria-describedby="release-slider-labels" aria-label="Release timeline" class="release-stage-slider" id="release-stage-slider" list="release-stage-list" max="9" min="0" step="1" type="range" value="0">
+                                        <datalist id="release-stage-list">
+                                                <option value="0" label="Free"></option>
+                                                <option value="1" label="Q1-2024"></option>
+                                                <option value="2" label="Q2-2024"></option>
+                                                <option value="3" label="Q3-2024"></option>
+                                                <option value="4" label="Q4-2024"></option>
+                                                <option value="5" label="Q1-2025"></option>
+                                                <option value="6" label="Q2-2025"></option>
+                                                <option value="7" label="Q3-2025"></option>
+                                                <option value="8" label="Q4-2025"></option>
+                                                <option value="9" label="Restricted"></option>
+                                        </datalist>
+                                        <div class="release-slider-labels" id="release-slider-labels">
+                                                <button type="button" class="release-slider-label is-active" data-index="0" data-target="#release-popup-free">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Free</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="1" data-target="#release-popup-q1-2024">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q1-2024 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="2" data-target="#release-popup-q2-2024">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q2-2024 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="3" data-target="#release-popup-q3-2024">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q3-2024 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="4" data-target="#release-popup-q4-2024">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q4-2024 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="5" data-target="#release-popup-q1-2025">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q1-2025 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="6" data-target="#release-popup-q2-2025">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q2-2025 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="7" data-target="#release-popup-q3-2025">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q3-2025 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="8" data-target="#release-popup-q4-2025">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q4-2025 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="9" data-target="#release-popup-restricted">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Restricted Access Preview</span>
+                                                </button>
+                                        </div>
+                                </div>
+                        </div>
+                </div>
+        </section>
 <!-- preloader <div id="loader"></div> -->
 	<div id="loader-wrapper">
 		<div class="loader-section section-left"></div>
@@ -439,19 +703,431 @@ <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>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q1-2024">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q2-2024">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q3-2024">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q4-2024">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q1-2025">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q2-2025">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q3-2025">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q4-2025">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-restricted">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></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 controls = document.getElementById('release-tier-controls');
+                var primarySelect = document.getElementById('release-tier-primary');
+                var secondarySelect = document.getElementById('release-tier-secondary');
+                var backButton = document.getElementById('release-menu-back');
+
+                if (controls && primarySelect && secondarySelect && backButton) {
+                        var secondaryOptionMap = {
+                                '1': [
+                                        { value: '1a', label: 'Community Overview' },
+                                        { value: '1b', label: 'Roadmap Highlights' },
+                                        { value: '1c', label: 'Support Channels' }
+                                ],
+                                '2': [
+                                        { value: '2a', label: 'Deployment Guides' },
+                                        { value: '2b', label: 'Pilot Programmes' },
+                                        { value: '2c', label: 'Integration Steps' }
+                                ],
+                                '3': [
+                                        { value: '3a', label: 'Partner Resources' },
+                                        { value: '3b', label: 'Training Tracks' },
+                                        { value: '3c', label: 'Market Access' }
+                                ]
+                        };
+
+                        function resetMenus() {
+                                controls.classList.remove('is-secondary', 'selection-made');
+                                backButton.hidden = true;
+                                primarySelect.hidden = false;
+                                primarySelect.value = '';
+                                secondarySelect.hidden = true;
+                                secondarySelect.innerHTML = '';
+                        }
+
+                        function buildSecondaryMenu(key) {
+                                var options = secondaryOptionMap[key];
+                                if (!options) {
+                                        resetMenus();
+                                        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);
+                                });
+
+                                controls.classList.add('is-secondary');
+                                primarySelect.hidden = true;
+                                secondarySelect.hidden = false;
+                                backButton.hidden = false;
+                                secondarySelect.focus();
+                        }
+
+                        primarySelect.addEventListener('change', function (event) {
+                                var value = event.target.value;
+                                if (value) {
+                                        buildSecondaryMenu(value);
+                                } else {
+                                        resetMenus();
+                                }
+                        });
+
+                        backButton.addEventListener('click', function () {
+                                resetMenus();
+                                primarySelect.focus();
+                        });
+
+                        secondarySelect.addEventListener('change', function () {
+                                if (secondarySelect.value) {
+                                        controls.classList.add('selection-made');
+                                }
+                        });
+                }
+
+                var sliderTrack = document.getElementById('release-slider-track');
+                var slider = document.getElementById('release-stage-slider');
+                var sliderLabels = document.getElementById('release-slider-labels');
+
+                var releaseStages = [
+                        { label: 'Free', target: '#release-popup-free' },
+                        { label: 'Q1-2024 Release', target: '#release-popup-q1-2024' },
+                        { label: 'Q2-2024 Release', target: '#release-popup-q2-2024' },
+                        { label: 'Q3-2024 Release', target: '#release-popup-q3-2024' },
+                        { label: 'Q4-2024 Release', target: '#release-popup-q4-2024' },
+                        { label: 'Q1-2025 Release', target: '#release-popup-q1-2025' },
+                        { label: 'Q2-2025 Release', target: '#release-popup-q2-2025' },
+                        { label: 'Q3-2025 Release', target: '#release-popup-q3-2025' },
+                        { label: 'Q4-2025 Release', target: '#release-popup-q4-2025' },
+                        { label: 'Restricted Access Preview', target: '#release-popup-restricted' }
+                ];
+
+                if (!(sliderTrack && slider && sliderLabels && releaseStages.length)) {
+                        return;
+                }
+
+                var labelButtons = Array.prototype.slice.call(sliderLabels.querySelectorAll('.release-slider-label'));
+
+                if (labelButtons.length !== releaseStages.length) {
+                        return;
+                }
+
+                sliderTrack.style.setProperty('--stage-count', releaseStages.length);
+                slider.setAttribute('max', releaseStages.length - 1);
+                slider.setAttribute('min', 0);
+                slider.setAttribute('step', 1);
+
+                function setPadlockState(button, isUnlocked) {
+                        if (!button) {
+                                return;
+                        }
+
+                        if (isUnlocked) {
+                                button.classList.add('is-unlocked');
+                        } else {
+                                button.classList.remove('is-unlocked');
+                        }
+
+                        var icon = button.querySelector('.release-padlock');
+                        if (icon) {
+                                icon.textContent = isUnlocked ? '🔓' : '🔒';
+                        }
+                }
+
+                function markStageUnlocked(index) {
+                        var button = labelButtons[index];
+                        if (!button) {
+                                return;
+                        }
+
+                        setPadlockState(button, true);
+                }
+
+                labelButtons.forEach(function (button) {
+                        setPadlockState(button, false);
+                });
+
+                function updateSliderFill(index) {
+                        var maxIndex = releaseStages.length > 1 ? releaseStages.length - 1 : 1;
+                        var percentage = maxIndex ? (index / maxIndex) * 100 : 0;
+                        var safePercent = Math.min(Math.max(percentage, 0), 100);
+                        slider.style.background = 'linear-gradient(90deg, #66CCFF 0%, #66CCFF ' + safePercent + '%, rgba(255, 255, 255, 0.15) ' + safePercent + '%, rgba(255, 255, 255, 0.15) 100%)';
+                }
+
+                function setActiveStage(index) {
+                        labelButtons.forEach(function (button, buttonIndex) {
+                                if (buttonIndex === index) {
+                                        button.classList.add('is-active');
+                                } else {
+                                        button.classList.remove('is-active');
+                                }
+                        });
+
+                        if (slider) {
+                                var stage = releaseStages[index];
+                                if (stage && stage.label) {
+                                        slider.setAttribute('aria-valuetext', stage.label);
+                                }
+                        }
+                }
+
+                function openStagePopup(index) {
+                        var stage = releaseStages[index];
+                        if (!stage || !stage.target) {
+                                return;
+                        }
+
+                        markStageUnlocked(index);
+
+                        if (window.jQuery && typeof $.featherlight === 'function') {
+                                $.featherlight($(stage.target), { persist: true });
+                        }
+                }
+
+                slider.addEventListener('input', function (event) {
+                        var index = Number(event.target.value);
+                        if (isNaN(index)) {
+                                index = 0;
+                        }
+                        index = Math.max(0, Math.min(index, releaseStages.length - 1));
+                        setActiveStage(index);
+                        updateSliderFill(index);
+                });
+
+                slider.addEventListener('change', function (event) {
+                        var index = Number(event.target.value);
+                        if (isNaN(index)) {
+                                index = 0;
+                        }
+                        index = Math.max(0, Math.min(index, releaseStages.length - 1));
+                        setActiveStage(index);
+                        updateSliderFill(index);
+                        openStagePopup(index);
+                });
+
+                labelButtons.forEach(function (button, index) {
+                        if (!button.getAttribute('data-index')) {
+                                button.setAttribute('data-index', index);
+                        }
+                        button.addEventListener('click', function () {
+                                slider.value = index;
+                                setActiveStage(index);
+                                updateSliderFill(index);
+                                openStagePopup(index);
+                                slider.focus();
+                        });
+
+                        button.addEventListener('keydown', function (event) {
+                                if (event.key !== 'Enter' && event.key !== ' ') {
+                                        return;
+                                }
+
+                                event.preventDefault();
+                                slider.value = index;
+                                setActiveStage(index);
+                                updateSliderFill(index);
+                                openStagePopup(index);
+                        });
+                });
+
+                var initialIndex = Number(slider.value);
+                if (isNaN(initialIndex)) {
+                        initialIndex = 0;
+                }
+                initialIndex = Math.max(0, Math.min(initialIndex, releaseStages.length - 1));
+                setActiveStage(initialIndex);
+                updateSliderFill(initialIndex);
+        });
+</script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var libraryLinks = document.querySelectorAll('a[href*="library"]');
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
+
+    for (var i = 0; i < libraryLinks.length; i++) {
+      var link = libraryLinks[i];
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
+      }
+    }
+  });
+</script>
 </body>
 </html>
 
diff --git a/static/datro/404.html b/static/datro/404.html
index 12117d784a..258178fc89 100755
--- a/static/datro/404.html
+++ b/static/datro/404.html
@@ -512,17 +512,131 @@ <h5 class="FooterNew-link-title FooterNew-link-title--hideMobile" style="margin-
 	</script> <!--// SystemJS  -->
 <script defer src="js/footer-accordion.js"></script>
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
     var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
 
     for (var i = 0; i < libraryLinks.length; i++) {
       var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
       }
     }
   });
diff --git a/static/datro/academy.html b/static/datro/academy.html
index 191d19d9ef..c75bb6118f 100755
--- a/static/datro/academy.html
+++ b/static/datro/academy.html
@@ -942,17 +942,131 @@ <h5 class="FooterNew-link-title FooterNew-link-title--hideMobile" style="margin-
 	</script>
 <script defer src="js/footer-accordion.js"></script>
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
     var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
 
     for (var i = 0; i < libraryLinks.length; i++) {
       var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
       }
     }
   });
diff --git a/static/datro/canceled.html b/static/datro/canceled.html
index 9d03270d43..7340d9d0e0 100755
--- a/static/datro/canceled.html
+++ b/static/datro/canceled.html
@@ -519,6 +519,136 @@ <h5 class="FooterNew-link-title FooterNew-link-title--hideMobile">Hotspotβnβ V
 
 <!--// SystemJS  -->
 <script defer src="js/footer-accordion.js"></script>
-	</body>
+	<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var libraryLinks = document.querySelectorAll('a[href*="library"]');
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
+
+    for (var i = 0; i < libraryLinks.length; i++) {
+      var link = libraryLinks[i];
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
+      }
+    }
+  });
+</script>
+</body>
 
 </html>
diff --git a/static/datro/docs-intro.html b/static/datro/docs-intro.html
index d4e14ef778..dc1bbb8184 100755
--- a/static/datro/docs-intro.html
+++ b/static/datro/docs-intro.html
@@ -121,6 +121,136 @@ <h1 class="segment-title" style="color:rgba(255,255,255,0.9)!important;">Documen
 
 
 <script defer src="js/footer-accordion.js"></script>
-	</body>
+	<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var libraryLinks = document.querySelectorAll('a[href*="library"]');
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
+
+    for (var i = 0; i < libraryLinks.length; i++) {
+      var link = libraryLinks[i];
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
+      }
+    }
+  });
+</script>
+</body>
 
 </html>
diff --git a/static/datro/docs.html b/static/datro/docs.html
index 79b9164088..558b5fbd31 100755
--- a/static/datro/docs.html
+++ b/static/datro/docs.html
@@ -92,17 +92,131 @@
 </script>
 <!-- google tracking code end -->
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
     var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
 
     for (var i = 0; i < libraryLinks.length; i++) {
       var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
       }
     }
   });
diff --git a/static/datro/documents.html b/static/datro/documents.html
index 37f339f803..987180ee94 100755
--- a/static/datro/documents.html
+++ b/static/datro/documents.html
@@ -160,17 +160,131 @@
 </script>
 <!-- google tracking code end -->
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
     var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
 
     for (var i = 0; i < libraryLinks.length; i++) {
       var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
       }
     }
   });
@@ -182,18 +296,14 @@
 			<a data-content="Documents" href="../../index.html" title="Logo"><img alt="DATRO Logo" class="navbar-brand" src="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>
 			<div class="collapse navbar-collapse" id="navbarCollapse">
 				<ul class="navbar-nav mr-auto">
-					<li class="nav-item"></li>
-					<li class="nav-item">
-						<a class="nav-link" href="technology.html">Technology</a>
-					</li>
-					<li class="nav-item"></li>
-					<li class="nav-item">
-						<a class="nav-link" href="#">Documents</a>
-					</li>
-					<li class="nav-item"></li>
-					<li class="nav-item">
-						<a class="nav-link" href="academy.html">Academy</a>
-					</li>
+                                        <li class="nav-item"></li>
+                                        <li class="nav-item">
+                                                <a class="nav-link" href="technology.html">Portfolio</a>
+                                        </li>
+                                        <li class="nav-item"></li>
+                                        <li class="nav-item">
+                                                <a class="nav-link" data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true" href="/library/">Library</a>
+                                        </li>
 				</ul>
 			</div>
 		</nav>
diff --git a/static/datro/history.html b/static/datro/history.html
index fd4171498b..eb8fb63773 100755
--- a/static/datro/history.html
+++ b/static/datro/history.html
@@ -78,17 +78,131 @@
 </script>
 <!-- google tracking code end -->
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
     var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
 
     for (var i = 0; i < libraryLinks.length; i++) {
       var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
       }
     }
   });
diff --git a/static/datro/html/content/media-center.html b/static/datro/html/content/media-center.html
index 9f72e28cb7..212d3cf68f 100755
--- a/static/datro/html/content/media-center.html
+++ b/static/datro/html/content/media-center.html
@@ -65,5 +65,135 @@ <h2 class="paragraph-title">Get Started</h2>
 			<h2 class="paragraph-title">Notes</h2>
 				<p class="paragraph-content">Smart TV's have web browsers and so the Wi-Fi Hotspot Menu can be accessed without a second Wave  device connected to the TV's. However accessing the web-browser on the TV can be tedious. With Wave  your Wi-Fi Hotspot Menu is displayed as soon as you turn the TV on.</p>
 		</div>
-	</body>
+	<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var libraryLinks = document.querySelectorAll('a[href*="library"]');
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
+
+    for (var i = 0; i < libraryLinks.length; i++) {
+      var link = libraryLinks[i];
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
+      }
+    }
+  });
+</script>
+</body>
 </html>
diff --git a/static/datro/html/docs-intro.html b/static/datro/html/docs-intro.html
index cc2741abf3..43d825eb63 100755
--- a/static/datro/html/docs-intro.html
+++ b/static/datro/html/docs-intro.html
@@ -123,6 +123,136 @@ <h1 class="segment-title" style="color:rgba(255,255,255,0.9)!important;">Documen
 	
 
 
-	</body>
+	<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var libraryLinks = document.querySelectorAll('a[href*="library"]');
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
+
+    for (var i = 0; i < libraryLinks.length; i++) {
+      var link = libraryLinks[i];
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
+      }
+    }
+  });
+</script>
+</body>
 
 </html>
diff --git a/static/datro/html/search.html b/static/datro/html/search.html
index 58af908dec..21c6fa7906 100755
--- a/static/datro/html/search.html
+++ b/static/datro/html/search.html
@@ -675,17 +675,131 @@ <h5 class="FooterNew-link-title FooterNew-link-title--hideMobile">Hotspotβnβ V
 		</script>
 
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
     var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
 
     for (var i = 0; i < libraryLinks.length; i++) {
       var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
       }
     }
   });
diff --git a/static/datro/html/statistics/website.html b/static/datro/html/statistics/website.html
index 9c0e7769d8..4b0fbff6d5 100755
--- a/static/datro/html/statistics/website.html
+++ b/static/datro/html/statistics/website.html
@@ -263,5 +263,135 @@ <h3 class="segment-subtitle" style="font-size:90%;text-align:center;">(right cli
   }
 }
 	  </script>
-	</body>
+	<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var libraryLinks = document.querySelectorAll('a[href*="library"]');
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
+
+    for (var i = 0; i < libraryLinks.length; i++) {
+      var link = libraryLinks[i];
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
+      }
+    }
+  });
+</script>
+</body>
 </html>
diff --git a/static/datro/index.html b/static/datro/index.html
index d7b9d3ca53..9e910ae342 100644
--- a/static/datro/index.html
+++ b/static/datro/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="no-js is-responsive is-mobile-first" lang="en">
 <head>
+        <!-- Minor no-op update to enable follow-up deployment -->
 	<meta charset="utf-8">
 	<link href="//datro.xyz/static/datro/index.html" rel="canonical">
 		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" name="viewport"><!-- GitHub Pages -->
@@ -60,9 +61,204 @@
 	               .add-to-cart-btn { width:120px; max-height:30px; min-height:25px; min-width:80px;  padding-top:3px; font-weight:lighter;}
 	              }
 
-	              .btn, a.btn {display:inline-block; background:#333366!important; color:#fff; font-size:1rem; min-height:2rem;  text-align:center; border-radius:4px; padding:1px;  border:1px solid white!important; min-width:90px;   max-width:120px; width:30vw; margin:1px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}
+                     .btn, a.btn {display:inline-block; background:#333366!important; color:#fff; font-size:1rem; min-height:2rem;  text-align:center; border-radius:4px; padding:1px;  border:1px solid white!important; min-width:90px;   max-width:120px; width:30vw; margin:1px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}
 
 .glyphinbutton {}
+        #mainWrapper + .release-timeline-bar {
+                margin-top: 82px;
+        }
+        .release-timeline-bar {
+                background: rgba(20, 20, 50, 0.88);
+                color: #fff;
+                padding: 16px;
+                position: relative;
+                z-index: 9;
+                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
+        }
+        .release-timeline-inner {
+                display: flex;
+                align-items: center;
+                gap: 18px;
+                flex-wrap: nowrap;
+        }
+        .release-tier-controls {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                flex-shrink: 0;
+        }
+        .release-tier-button {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                background: transparent;
+                border: 1px solid rgba(255, 255, 255, 0.4);
+                border-radius: 4px;
+                color: #fff;
+                padding: 6px 14px;
+                font-size: 0.85rem;
+                cursor: pointer;
+                transition: background 0.2s ease, color 0.2s ease;
+        }
+        .release-tier-button:hover,
+        .release-tier-button:focus {
+                background: rgba(255, 255, 255, 0.18);
+                color: #fff;
+                outline: none;
+        }
+        .release-tier-select {
+                background: rgba(14, 14, 35, 0.85);
+                border: 1px solid rgba(255, 255, 255, 0.35);
+                border-radius: 4px;
+                color: #fff;
+                padding: 6px 32px 6px 12px;
+                font-size: 0.85rem;
+                -webkit-appearance: none;
+                -moz-appearance: none;
+                appearance: none;
+                min-width: 120px;
+                cursor: pointer;
+        }
+        .release-tier-select:focus {
+                outline: none;
+                box-shadow: 0 0 0 2px rgba(102, 204, 255, 0.45);
+        }
+        .release-slider-scroll {
+                overflow-x: auto;
+                scrollbar-width: thin;
+                padding: 8px 0 12px;
+                flex: 1 1 auto;
+                min-width: 0;
+        }
+        .release-slider-scroll::-webkit-scrollbar {
+                height: 6px;
+        }
+        .release-slider-scroll::-webkit-scrollbar-track {
+                background: rgba(255, 255, 255, 0.1);
+        }
+        .release-slider-scroll::-webkit-scrollbar-thumb {
+                background: rgba(255, 255, 255, 0.35);
+                border-radius: 10px;
+        }
+        .release-slider-track {
+                min-width: max(680px, calc(var(--stage-count, 1) * 140px));
+                padding: 0 12px;
+        }
+        .release-stage-slider {
+                width: 100%;
+                appearance: none;
+                background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15));
+                height: 6px;
+                border-radius: 999px;
+                outline: none;
+                position: relative;
+        }
+        .release-stage-slider::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                height: 18px;
+                width: 18px;
+                border-radius: 50%;
+                border: 2px solid #ffffff;
+                background: #66CCFF;
+                cursor: pointer;
+                margin-top: -6px;
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+                transition: transform 0.2s ease;
+        }
+        .release-stage-slider::-moz-range-thumb {
+                height: 18px;
+                width: 18px;
+                border-radius: 50%;
+                border: 2px solid #ffffff;
+                background: #66CCFF;
+                cursor: pointer;
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+                transition: transform 0.2s ease;
+        }
+        .release-stage-slider::-webkit-slider-thumb:hover,
+        .release-stage-slider::-moz-range-thumb:hover {
+                transform: scale(1.05);
+        }
+        .release-slider-labels {
+                display: flex;
+                justify-content: space-between;
+                gap: 0;
+                margin-top: 12px;
+                font-size: 0.75rem;
+                text-transform: uppercase;
+                letter-spacing: 0.03em;
+                color: rgba(255, 255, 255, 0.75);
+        }
+        .release-slider-label {
+                flex: 1 1 0;
+                text-align: center;
+                min-width: 120px;
+                cursor: pointer;
+                position: relative;
+                white-space: normal;
+                background: none;
+                border: none;
+                color: inherit;
+                padding: 34px 4px 0;
+                font: inherit;
+                display: inline-flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 6px;
+        }
+        .release-slider-label::before {
+                content: '';
+                position: absolute;
+                top: -14px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 2px;
+                height: 10px;
+                background: rgba(255, 255, 255, 0.5);
+        }
+        .release-slider-label:focus {
+                outline: none;
+                color: #ffffff;
+        }
+        .release-slider-label.is-active {
+                color: #66CCFF;
+                font-weight: 600;
+        }
+        .release-slider-label.is-active::before {
+                background: #66CCFF;
+                height: 14px;
+        }
+        .release-padlock {
+                font-size: 1.4rem;
+                line-height: 1;
+                display: block;
+                transition: color 0.2s ease, transform 0.2s ease;
+        }
+        .release-slider-label:hover .release-padlock,
+        .release-slider-label:focus .release-padlock {
+                transform: scale(1.05);
+        }
+        .release-slider-label.is-unlocked .release-padlock {
+                color: #66CCFF;
+        }
+        .release-stage-text {
+                font-size: 0.7rem;
+                text-transform: uppercase;
+                letter-spacing: 0.04em;
+        }
+        .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;
+        }
 	                  @media (max-width: 600px) and (min-width: 345px) and (orientation: portrait) {
 	                  .video-iframe {min-height:45vw; min-width: 78vw; max-height: 48vw!important; max-width: 80vw!Important;}
 	                  }
@@ -117,8 +313,81 @@ <h1 class="v-h">Site Navigation</h1>
 				</ul>
 			</div>
 		</nav>
-	</header>
-	<main style="background-color: #333366;">
+</header>
+        <section aria-label="Release timeline" class="release-timeline-bar">
+                <div class="release-timeline-inner">
+                        <div class="release-tier-controls" id="release-tier-controls">
+                                <button aria-label="Go back to primary options" class="release-tier-button" id="release-menu-back" type="button" hidden>Back</button>
+                                <select aria-label="Select an option" class="release-tier-select" id="release-tier-primary">
+                                        <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 follow-on option" class="release-tier-select" id="release-tier-secondary" hidden></select>
+                        </div>
+                        <div aria-label="Release timeline slider" class="release-slider-scroll">
+                                <div class="release-slider-track" id="release-slider-track" style="--stage-count: 10;">
+                                        <input aria-describedby="release-slider-labels" aria-label="Release timeline" class="release-stage-slider" id="release-stage-slider" list="release-stage-list" max="9" min="0" step="1" type="range" value="0">
+                                        <datalist id="release-stage-list">
+                                                <option value="0" label="Free"></option>
+                                                <option value="1" label="Q1-2024"></option>
+                                                <option value="2" label="Q2-2024"></option>
+                                                <option value="3" label="Q3-2024"></option>
+                                                <option value="4" label="Q4-2024"></option>
+                                                <option value="5" label="Q1-2025"></option>
+                                                <option value="6" label="Q2-2025"></option>
+                                                <option value="7" label="Q3-2025"></option>
+                                                <option value="8" label="Q4-2025"></option>
+                                                <option value="9" label="Restricted"></option>
+                                        </datalist>
+                                        <div class="release-slider-labels" id="release-slider-labels">
+                                                <button type="button" class="release-slider-label is-active" data-index="0" data-target="#release-popup-free">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Free</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="1" data-target="#release-popup-q1-2024">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q1-2024 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="2" data-target="#release-popup-q2-2024">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q2-2024 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="3" data-target="#release-popup-q3-2024">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q3-2024 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="4" data-target="#release-popup-q4-2024">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q4-2024 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="5" data-target="#release-popup-q1-2025">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q1-2025 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="6" data-target="#release-popup-q2-2025">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q2-2025 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="7" data-target="#release-popup-q3-2025">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q3-2025 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="8" data-target="#release-popup-q4-2025">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Q4-2025 Release</span>
+                                                </button>
+                                                <button type="button" class="release-slider-label" data-index="9" data-target="#release-popup-restricted">
+                                                        <span aria-hidden="true" class="release-padlock">🔒</span>
+                                                        <span class="release-stage-text">Restricted Access Preview</span>
+                                                </button>
+                                        </div>
+                                </div>
+                        </div>
+                </div>
+        </section>
+        <main style="background-color: #333366;">
 		<div class="carousel" data-ride="carousel" id="myCarousel">
 			<div class="carousel-inner" style="overflow:visible!important;">
 				<div class="carousel-item active">
@@ -406,7 +675,49 @@ <h3 class="FooterNew-link-title FooterNew-link-title--hideMobile" style="margin-
                                 </div>
                         </div>
                 </footer>
-	</div>
+        </div>
+        <div aria-hidden="true">
+                <div class="release-popup-content" id="release-popup-free">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q1-2024">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q2-2024">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q3-2024">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q4-2024">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q1-2025">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q2-2025">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q3-2025">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q4-2025">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+                <div class="release-popup-content" id="release-popup-restricted">
+                        <h2>library.datro.xyz</h2>
+                        <p><a href="https://library.datro.xyz" rel="noopener" target="_blank">Visit library.datro.xyz</a></p>
+                </div>
+        </div>
 
 <script defer src="js/bootstrap.min.js"></script>
 
@@ -420,17 +731,371 @@ <h3 class="FooterNew-link-title FooterNew-link-title--hideMobile" style="margin-
 
 <script defer src="js/footer-accordion.js"></script>
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
+        document.addEventListener('DOMContentLoaded', function () {
+                var controls = document.getElementById('release-tier-controls');
+                var primarySelect = document.getElementById('release-tier-primary');
+                var secondarySelect = document.getElementById('release-tier-secondary');
+                var backButton = document.getElementById('release-menu-back');
+
+                if (controls && primarySelect && secondarySelect && backButton) {
+                        var secondaryOptionMap = {
+                                '1': [
+                                        { value: '1a', label: 'Community Overview' },
+                                        { value: '1b', label: 'Roadmap Highlights' },
+                                        { value: '1c', label: 'Support Channels' }
+                                ],
+                                '2': [
+                                        { value: '2a', label: 'Deployment Guides' },
+                                        { value: '2b', label: 'Pilot Programmes' },
+                                        { value: '2c', label: 'Integration Steps' }
+                                ],
+                                '3': [
+                                        { value: '3a', label: 'Partner Resources' },
+                                        { value: '3b', label: 'Training Tracks' },
+                                        { value: '3c', label: 'Market Access' }
+                                ]
+                        };
+
+                        function resetMenus() {
+                                controls.classList.remove('is-secondary', 'selection-made');
+                                backButton.hidden = true;
+                                primarySelect.hidden = false;
+                                primarySelect.value = '';
+                                secondarySelect.hidden = true;
+                                secondarySelect.innerHTML = '';
+                        }
+
+                        function buildSecondaryMenu(key) {
+                                var options = secondaryOptionMap[key];
+                                if (!options) {
+                                        resetMenus();
+                                        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);
+                                });
+
+                                controls.classList.add('is-secondary');
+                                primarySelect.hidden = true;
+                                secondarySelect.hidden = false;
+                                backButton.hidden = false;
+                                secondarySelect.focus();
+                        }
+
+                        primarySelect.addEventListener('change', function (event) {
+                                var value = event.target.value;
+                                if (value) {
+                                        buildSecondaryMenu(value);
+                                } else {
+                                        resetMenus();
+                                }
+                        });
+
+                        backButton.addEventListener('click', function () {
+                                resetMenus();
+                                primarySelect.focus();
+                        });
+
+                        secondarySelect.addEventListener('change', function () {
+                                if (secondarySelect.value) {
+                                        controls.classList.add('selection-made');
+                                }
+                        });
+                }
+
+                var sliderTrack = document.getElementById('release-slider-track');
+                var slider = document.getElementById('release-stage-slider');
+                var sliderLabels = document.getElementById('release-slider-labels');
+
+                var releaseStages = [
+                        { label: 'Free', target: '#release-popup-free' },
+                        { label: 'Q1-2024 Release', target: '#release-popup-q1-2024' },
+                        { label: 'Q2-2024 Release', target: '#release-popup-q2-2024' },
+                        { label: 'Q3-2024 Release', target: '#release-popup-q3-2024' },
+                        { label: 'Q4-2024 Release', target: '#release-popup-q4-2024' },
+                        { label: 'Q1-2025 Release', target: '#release-popup-q1-2025' },
+                        { label: 'Q2-2025 Release', target: '#release-popup-q2-2025' },
+                        { label: 'Q3-2025 Release', target: '#release-popup-q3-2025' },
+                        { label: 'Q4-2025 Release', target: '#release-popup-q4-2025' },
+                        { label: 'Restricted Access Preview', target: '#release-popup-restricted' }
+                ];
+
+                if (!(sliderTrack && slider && sliderLabels && releaseStages.length)) {
+                        return;
+                }
+
+                var labelButtons = Array.prototype.slice.call(sliderLabels.querySelectorAll('.release-slider-label'));
+
+                if (labelButtons.length !== releaseStages.length) {
+                        return;
+                }
+
+                sliderTrack.style.setProperty('--stage-count', releaseStages.length);
+                slider.setAttribute('max', releaseStages.length - 1);
+                slider.setAttribute('min', 0);
+                slider.setAttribute('step', 1);
+
+                function setPadlockState(button, isUnlocked) {
+                        if (!button) {
+                                return;
+                        }
+
+                        if (isUnlocked) {
+                                button.classList.add('is-unlocked');
+                        } else {
+                                button.classList.remove('is-unlocked');
+                        }
+
+                        var icon = button.querySelector('.release-padlock');
+                        if (icon) {
+                                icon.textContent = isUnlocked ? '🔓' : '🔒';
+                        }
+                }
+
+                function markStageUnlocked(index) {
+                        var button = labelButtons[index];
+                        if (!button) {
+                                return;
+                        }
+
+                        setPadlockState(button, true);
+                }
+
+                labelButtons.forEach(function (button) {
+                        setPadlockState(button, false);
+                });
+
+                function updateSliderFill(index) {
+                        var maxIndex = releaseStages.length > 1 ? releaseStages.length - 1 : 1;
+                        var percentage = maxIndex ? (index / maxIndex) * 100 : 0;
+                        var safePercent = Math.min(Math.max(percentage, 0), 100);
+                        slider.style.background = 'linear-gradient(90deg, #66CCFF 0%, #66CCFF ' + safePercent + '%, rgba(255, 255, 255, 0.15) ' + safePercent + '%, rgba(255, 255, 255, 0.15) 100%)';
+                }
+
+                function setActiveStage(index) {
+                        labelButtons.forEach(function (button, buttonIndex) {
+                                if (buttonIndex === index) {
+                                        button.classList.add('is-active');
+                                } else {
+                                        button.classList.remove('is-active');
+                                }
+                        });
+
+                        if (slider) {
+                                var stage = releaseStages[index];
+                                if (stage && stage.label) {
+                                        slider.setAttribute('aria-valuetext', stage.label);
+                                }
+                        }
+                }
+
+                function openStagePopup(index) {
+                        var stage = releaseStages[index];
+                        if (!stage || !stage.target) {
+                                return;
+                        }
+
+                        markStageUnlocked(index);
+
+                        if (window.jQuery && typeof $.featherlight === 'function') {
+                                $.featherlight($(stage.target), { persist: true });
+                        }
+                }
+
+                slider.addEventListener('input', function (event) {
+                        var index = Number(event.target.value);
+                        if (isNaN(index)) {
+                                index = 0;
+                        }
+                        index = Math.max(0, Math.min(index, releaseStages.length - 1));
+                        setActiveStage(index);
+                        updateSliderFill(index);
+                });
+
+                slider.addEventListener('change', function (event) {
+                        var index = Number(event.target.value);
+                        if (isNaN(index)) {
+                                index = 0;
+                        }
+                        index = Math.max(0, Math.min(index, releaseStages.length - 1));
+                        setActiveStage(index);
+                        updateSliderFill(index);
+                        openStagePopup(index);
+                });
+
+                labelButtons.forEach(function (button, index) {
+                        if (!button.getAttribute('data-index')) {
+                                button.setAttribute('data-index', index);
+                        }
+                        button.addEventListener('click', function () {
+                                slider.value = index;
+                                setActiveStage(index);
+                                updateSliderFill(index);
+                                openStagePopup(index);
+                                slider.focus();
+                        });
+
+                        button.addEventListener('keydown', function (event) {
+                                if (event.key !== 'Enter' && event.key !== ' ') {
+                                        return;
+                                }
+
+                                event.preventDefault();
+                                slider.value = index;
+                                setActiveStage(index);
+                                updateSliderFill(index);
+                                openStagePopup(index);
+                        });
+                });
+
+                var initialIndex = Number(slider.value);
+                if (isNaN(initialIndex)) {
+                        initialIndex = 0;
+                }
+                initialIndex = Math.max(0, Math.min(initialIndex, releaseStages.length - 1));
+                setActiveStage(initialIndex);
+                updateSliderFill(initialIndex);
+        });
+</script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
     var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
 
     for (var i = 0; i < libraryLinks.length; i++) {
       var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
       }
     }
   });
diff --git a/static/datro/success.html b/static/datro/success.html
index 4708d8a802..8bbc2bb592 100755
--- a/static/datro/success.html
+++ b/static/datro/success.html
@@ -490,17 +490,131 @@ <h5 class="FooterNew-link-title FooterNew-link-title--hideMobile">Hotspotβnβ V
 <!--// SystemJS  -->
 <script defer src="js/footer-accordion.js"></script>
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
     var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
 
     for (var i = 0; i < libraryLinks.length; i++) {
       var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
       }
     }
   });
diff --git a/static/datro/team.html b/static/datro/team.html
index cec927cdc8..f852f3fcb8 100755
--- a/static/datro/team.html
+++ b/static/datro/team.html
@@ -699,17 +699,131 @@ <h5 class="FooterNew-link-title FooterNew-link-title--hideMobile">Hotspotβnβ V
 
 <script defer src="js/footer-accordion.js"></script>
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
     var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
 
     for (var i = 0; i < libraryLinks.length; i++) {
       var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
       }
     }
   });
diff --git a/static/datro/technology.html b/static/datro/technology.html
index 0878cda742..64c303139c 100755
--- a/static/datro/technology.html
+++ b/static/datro/technology.html
@@ -161,17 +161,131 @@
 </script>
 <!-- google tracking code end -->
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
     var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
+    if (!libraryLinks.length) {
+      return;
+    }
+
+    var remoteLibraryRoot = "https://library.datro.xyz";
+    var localLibraryRoot = determineLocalLibraryRoot();
+    var hostname = window.location.hostname || "";
+    var protocol = window.location.protocol;
+    var offlineHosts = ["localhost", "127.0.0.1", "0.0.0.0", "::1", ""];
+    var isOffline = protocol === "file:" || offlineHosts.indexOf(hostname) > -1;
+    var parser = document.createElement("a");
+
+    function determineLocalLibraryRoot() {
+      var path = window.location.pathname || "";
+      var staticMarker = "/static/";
+      var markerIndex = path.indexOf(staticMarker);
+      if (markerIndex === -1) {
+        return "static/library";
+      }
+
+      var relative = path.slice(markerIndex + staticMarker.length);
+      if (!relative) {
+        return "library";
+      }
+
+      var parts = relative.split("/").filter(function (segment) {
+        return segment.length > 0;
+      });
+
+      if (!parts.length) {
+        return "library";
+      }
+
+      var lastChar = path.charAt(path.length - 1);
+      if (lastChar !== "/" && parts.length) {
+        parts.pop();
+      }
+
+      var depth = parts.length;
+      if (depth <= 0) {
+        return "library";
+      }
+
+      var prefix = "";
+      for (var i = 0; i < depth; i++) {
+        prefix += "../";
+      }
+
+      return prefix + "library";
+    }
+
+    function extractLibrarySuffix(href) {
+      if (!href) {
+        return null;
+      }
+
+      var lowerHref = href.toLowerCase();
+      var remoteIndex = lowerHref.indexOf(remoteLibraryRoot);
+      if (remoteIndex === 0) {
+        var remoteSuffix = href.substring(remoteLibraryRoot.length);
+        return remoteSuffix || "/";
+      }
+
+      parser.href = href;
+      var path = parser.pathname || "";
+      var lowerPath = path.toLowerCase();
+      var libraryPos = lowerPath.indexOf("/library");
+      var suffixPart;
+
+      if (libraryPos > -1) {
+        suffixPart = path.substring(libraryPos + "/library".length);
+        if (!suffixPart) {
+          suffixPart = "/";
+        }
+      } else {
+        var host = (parser.hostname || "").toLowerCase();
+        if (host.indexOf("library.datro.xyz") > -1) {
+          suffixPart = path || "/";
+        } else {
+          return null;
+        }
+      }
+
+      return suffixPart + (parser.search || "") + (parser.hash || "");
+    }
+
+    function normalizeSuffix(suffix) {
+      if (!suffix) {
+        return "/";
+      }
+
+      if (suffix.charAt(0) === "/") {
+        return "/" + suffix.replace(/^\/+/, "");
+      }
+
+      if (suffix.charAt(0) === "?" || suffix.charAt(0) === "#") {
+        return "/" + suffix;
+      }
+
+      return "/" + suffix.replace(/^\/+/, "");
+    }
+
+    function convertHref(href, useRemote) {
+      var suffix = extractLibrarySuffix(href);
+      if (suffix === null) {
+        return null;
+      }
+
+      var normalized = normalizeSuffix(suffix);
+      var base = useRemote ? remoteLibraryRoot : localLibraryRoot;
+      return base.replace(/\/+$/, "") + normalized;
+    }
 
     for (var i = 0; i < libraryLinks.length; i++) {
       var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
+      var originalHref = link.getAttribute("href");
+      if (!originalHref) {
+        continue;
+      }
+
+      var targetHref = convertHref(originalHref, !isOffline);
+      if (targetHref) {
+        link.setAttribute("href", targetHref);
       }
     }
   });