diff --git a/index.html b/index.html index 2df539129..afe1e7973 100755 --- a/index.html +++ b/index.html @@ -64,11 +64,184 @@ } .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-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 +306,11 @@ Your browser does not support the video tag. -
- +
+
+
+
+ + + +
+
+
+ + + + + + + + + + + + + +
+ + + + + + + + + + +
+
+
+
+
@@ -439,19 +655,279 @@

+
+

Free Tier Access

+

Explore the open DATRO experience with unrestricted community features and public knowledge base materials.

+

Ideal for curious visitors who want to understand the vision and get started without commitment.

+
+
+

Q1-2024 Release

+

Foundational connectivity services, platform login, and initial collaboration toolset are scheduled for this window.

+

Includes onboarding resources for early participants and technical partners.

+
+
+

Q2-2024 Release

+

Expands on the Q1 build with integrated analytics dashboards and enhanced governance controls.

+

Designed for teams preparing pilot deployments and real-world field trials.

+
+
+

Q3-2024 Release

+

Introduces partner APIs, data-exchange improvements, and wider interoperability for municipal roll-outs.

+

Engineering notes include upgrade strategies and migration helpers.

+
+
+

Q4-2024 Release

+

Focuses on resilience testing, internationalisation, and live support readiness.

+

Recommended for operators scaling infrastructure beyond pilot programmes.

+
+
+

Q1-2025 Release

+

Launches automated deployment pipelines and telemetry bundling for enterprise partners.

+

Highlights include extended documentation sets and curated training paths.

+
+
+

Q2-2025 Release

+

Delivers marketplace integrations, subscription tooling, and improved SLA reporting.

+

Perfect for organisations aligning business operations with DATRO infrastructure.

+
+
+

Q3-2025 Release

+

Centres on automation, AI-assisted monitoring, and policy templates for distributed governance.

+

Provides action plans for compliance and regulatory reviews.

+
+
+

Q4-2025 Release

+

Marks the full ecosystem release with federation services and comprehensive support tiers.

+

Includes launch readiness kits and expanded customer success programmes.

+
+
+

Restricted Access Preview

+

Request invitation-only access to experimental features, sandbox datasets, and early product concepts.

+

Ideal for strategic partners collaborating on the roadmap beyond 2025.

+
+

- - + + - - + + + diff --git a/static/datro/documents.html b/static/datro/documents.html index 37f339f80..ba52987a6 100755 --- a/static/datro/documents.html +++ b/static/datro/documents.html @@ -182,18 +182,14 @@ DATRO Logo diff --git a/static/datro/index.html b/static/datro/index.html index d7b9d3ca5..44948b2a5 100644 --- a/static/datro/index.html +++ b/static/datro/index.html @@ -60,9 +60,182 @@ .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: 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-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 +290,51 @@

Site Navigation

- -
+ +
+
+
+ + + +
+
+
+ + + + + + + + + + + + + +
+ + + + + + + + + + +
+
+
+
+
+