Deep Analytics
Dive into granular metrics and user behaviour patterns mapped across global node deployments.
Resources · Build & design
Studio Apps.
A specimen gallery of themed interface blocks — information cards, custom toggle switches and bordered inputs across six colour themes, with live border width, border opacity and staggered entrance controls. Each block carries a code panel so you can copy or download its HTML, CSS and JS and drop it into another design.
<div class="controls-container">
<div class="form-group slide-toggle-control">
<label for="border-width-slider">Border Width: <output id="width-output">6px</output></label>
<input type="range" id="border-width-slider" min="0" max="24" value="6" step="1">
</div>
<div class="form-group slide-toggle-control">
<label for="border-opacity-slider">Border Opacity: <output id="opacity-output">0.40</output></label>
<input type="range" id="border-opacity-slider" min="0" max="1" value="0.4" step="0.05">
</div>
<div class="form-group slide-toggle-control toggle-wrapper">
<span class="control-label">Card Animation:</span>
<label class="custom-switch">
<input type="checkbox" id="animate-cards-toggle">
<span class="switch-slider"></span>
</label>
</div>
</div>
<!-- Drives #card-grid: set its id to "card-grid" for the animation replay -->.controls-container { display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; }
.slide-toggle-control { min-width:250px; }
.slide-toggle-control label { display:flex; justify-content:space-between; font-size:1rem; }
.slide-toggle-control output { color:#0284c7; font-family:monospace; font-size:1.1rem; }
.slide-toggle-control input[type="range"] { width:100%; cursor:pointer; }
.toggle-wrapper { display:flex; align-items:center; justify-content:space-between; }
.control-label { font-weight:600; color:#333; font-size:1rem; }document.addEventListener('DOMContentLoaded', function () {
var root = document.documentElement;
var widthSlider = document.getElementById('border-width-slider');
var opacitySlider = document.getElementById('border-opacity-slider');
var widthOut = document.getElementById('width-output');
var opacityOut = document.getElementById('opacity-output');
var animate = document.getElementById('animate-cards-toggle');
var grid = document.getElementById('card-grid');
function updateWidth() {
root.style.setProperty('--dynamic-border-width', widthSlider.value + 'px');
widthOut.textContent = widthSlider.value + 'px';
}
function updateOpacity() {
var v = parseFloat(opacitySlider.value).toFixed(2);
root.style.setProperty('--dynamic-border-opacity', v);
opacityOut.textContent = v;
}
function replay(e) {
if (!grid) { return; }
if (e.target.checked) { grid.classList.remove('animate-mode'); void grid.offsetWidth; grid.classList.add('animate-mode'); }
else { grid.classList.remove('animate-mode'); }
}
if (widthSlider) { widthSlider.addEventListener('input', updateWidth); updateWidth(); }
if (opacitySlider) { opacitySlider.addEventListener('input', updateOpacity); updateOpacity(); }
if (animate) { animate.addEventListener('change', replay); }
});Team Directory
Search and manage organisational roles, department allocations, and direct reporting lines.
System Overrides
Bypass standard protocols. Access requires level-4 clearance and biometric multi-factor authentication.
Audit Logs
Immutable ledger of all administrative actions, permission escalations, and system configuration changes.
Revenue Forecast
Q4 projected earnings based on historical conversion rates and active subscription renewals.
Compliance Framework
Review SOC2 and GDPR alignment statuses. Ensure all data processing agreements are up to date.
<div class="card-grid">
<article class="info-card theme-oceanic">
<header><h2>Deep Analytics</h2></header>
<p>Dive into granular metrics and user behaviour patterns.</p>
<footer><a href="#" class="btn">Explore</a></footer>
</article>
<article class="info-card theme-sunset">
<header><h2>Revenue Forecast</h2></header>
<p>Q4 projected earnings based on historical conversion rates.</p>
<footer><a href="#" class="btn">Generate Report</a></footer>
</article>
</div>
<!-- Theme classes: theme-oceanic | theme-pastel | theme-cyber | theme-minimal | theme-sunset | theme-corporate -->:root { --dynamic-border-width:6px; --dynamic-border-opacity:.4; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2.5rem; }
.info-card {
border-radius:16px;
border:var(--dynamic-border-width) solid rgba(var(--border-rgb), var(--dynamic-border-opacity));
background-color:var(--bg); color:var(--text); background-clip:padding-box;
padding:2rem; display:flex; flex-direction:column; gap:1rem;
box-shadow:0 10px 20px rgba(0,0,0,.05); transition:transform .2s ease, box-shadow .2s ease;
}
.info-card:hover { transform:translateY(-4px); box-shadow:0 15px 30px rgba(0,0,0,.1); }
.info-card h2 { font-size:1.5rem; color:var(--heading); }
.info-card p { line-height:1.6; flex-grow:1; font-size:.95rem; opacity:.9; }
.info-card footer { margin-top:1rem; }
.btn { display:inline-block; padding:.6rem 1.2rem; text-decoration:none; font-weight:600; border-radius:8px; background-color:var(--accent); color:var(--btn-text); transition:filter .2s ease; }
.btn:hover, .btn:focus { filter:brightness(1.15); }
/* Staggered entrance — add .animate-mode to the grid to replay */
@keyframes slowDissolve { 0% { opacity:0; transform:translateY(30px); } 100% { opacity:1; transform:translateY(0); } }
.animate-mode .info-card { opacity:0; animation:slowDissolve 1.2s ease-out forwards; }
.animate-mode .info-card:nth-child(1){animation-delay:.1s;}
.animate-mode .info-card:nth-child(2){animation-delay:.4s;}
.animate-mode .info-card:nth-child(3){animation-delay:.7s;}
.animate-mode .info-card:nth-child(4){animation-delay:1.0s;}
.animate-mode .info-card:nth-child(5){animation-delay:1.3s;}
.animate-mode .info-card:nth-child(6){animation-delay:1.6s;}
/* Themes — shared across cards, toggles and inputs */
.theme-oceanic { --bg:#0f172a; --text:#cbd5e1; --heading:#38bdf8; --accent:#0284c7; --btn-text:#fff; --border-rgb:56,189,248; }
.theme-pastel { --bg:#fdfbf7; --text:#5c5c5c; --heading:#d97777; --accent:#d97777; --btn-text:#fff; --border-rgb:217,119,119; text-align:center; }
.theme-cyber { --bg:#000; --text:#a3a3a3; --heading:#39ff14; --accent:#39ff14; --btn-text:#000; --border-rgb:57,255,20; border-radius:0; text-transform:uppercase; font-family:monospace; }
.theme-minimal { --bg:#fff; --text:#000; --heading:#000; --accent:#000; --btn-text:#fff; --border-rgb:0,0,0; border-style:dashed; }
.theme-sunset { --bg:linear-gradient(135deg,#ff9a9e 0%,#fecfef 100%); --text:#4a4a4a; --heading:#fff; --accent:#ff758c; --btn-text:#fff; --border-rgb:255,255,255; text-shadow:0 1px 2px rgba(0,0,0,.1); }
.theme-corporate { --bg:#fff; --text:#4b5563; --heading:#1e3a8a; --accent:#1e3a8a; --btn-text:#fff; --border-rgb:30,58,138; }Plain Themed Toggles
Dynamic Text Toggles
<!-- Plain -->
<label class="custom-switch theme-oceanic">
<input type="checkbox">
<span class="switch-slider"></span>
</label>
<!-- With dynamic text -->
<label class="custom-switch theme-corporate">
<input type="checkbox" checked>
<span class="switch-slider"></span>
<span class="status-text" data-on="Compliant" data-off="Non-Compliant"></span>
</label>.custom-switch { position:relative; display:inline-flex; align-items:center; gap:1rem; cursor:pointer; }
.custom-switch input[type="checkbox"] { opacity:0; width:0; height:0; position:absolute; }
.switch-slider { position:relative; width:52px; height:28px; background-color:#cbd5e1; border-radius:34px; transition:background-color .3s ease; flex-shrink:0; }
.switch-slider::before { content:""; position:absolute; height:20px; width:20px; left:4px; bottom:4px; background-color:#fff; border-radius:50%; transition:transform .3s ease; box-shadow:0 2px 4px rgba(0,0,0,.2); }
.custom-switch input:checked + .switch-slider { background-color:var(--accent); }
.custom-switch input:checked + .switch-slider::before { transform:translateX(24px); }
.custom-switch input:focus-visible + .switch-slider { outline:3px solid var(--accent); outline-offset:3px; }
.status-text { font-weight:600; font-size:.95rem; color:#64748b; transition:color .3s ease; }
.status-text::before { content:attr(data-off); }
.custom-switch input:checked ~ .status-text { color:var(--accent); }
.custom-switch input:checked ~ .status-text::before { content:attr(data-on); }
/* Square variant (optional) */
.theme-cyber.custom-switch .switch-slider,
.theme-cyber.custom-switch .switch-slider::before { border-radius:0; }
/* Themes — shared across cards, toggles and inputs */
.theme-oceanic { --bg:#0f172a; --text:#cbd5e1; --heading:#38bdf8; --accent:#0284c7; --btn-text:#fff; --border-rgb:56,189,248; }
.theme-pastel { --bg:#fdfbf7; --text:#5c5c5c; --heading:#d97777; --accent:#d97777; --btn-text:#fff; --border-rgb:217,119,119; text-align:center; }
.theme-cyber { --bg:#000; --text:#a3a3a3; --heading:#39ff14; --accent:#39ff14; --btn-text:#000; --border-rgb:57,255,20; border-radius:0; text-transform:uppercase; font-family:monospace; }
.theme-minimal { --bg:#fff; --text:#000; --heading:#000; --accent:#000; --btn-text:#fff; --border-rgb:0,0,0; border-style:dashed; }
.theme-sunset { --bg:linear-gradient(135deg,#ff9a9e 0%,#fecfef 100%); --text:#4a4a4a; --heading:#fff; --accent:#ff758c; --btn-text:#fff; --border-rgb:255,255,255; text-shadow:0 1px 2px rgba(0,0,0,.1); }
.theme-corporate { --bg:#fff; --text:#4b5563; --heading:#1e3a8a; --accent:#1e3a8a; --btn-text:#fff; --border-rgb:30,58,138; }Square Corner Inputs
Radius Inputs (4px Border)
<!-- Square corners, thin themed border -->
<div class="form-group theme-cyber square-input">
<label for="key">Cyber Access Key</label>
<input type="text" id="key" placeholder="Enter 64-bit key...">
</div>
<!-- Rounded, thick themed border -->
<div class="form-group theme-oceanic radius-input">
<label for="node">Oceanic Identifier</label>
<input type="text" id="node" placeholder="Enter node ID...">
</div>.form-group { display:flex; flex-direction:column; gap:.5rem; }
.form-group label { font-weight:600; color:#333; font-size:.9rem; }
.form-group input[type="text"] {
width:100%; padding:.75rem 1rem; font-size:1rem; color:#333;
background-color:rgba(var(--border-rgb), .02);
transition:border-color .2s ease, box-shadow .2s ease;
}
.form-group input::placeholder { color:#94a3b8; }
.square-input input:focus, .radius-input input:focus {
outline:none; border-color:rgba(var(--border-rgb), .6);
box-shadow:0 0 0 3px rgba(var(--border-rgb), .15);
}
.square-input input { border-radius:0; border:2px solid rgba(var(--border-rgb), .1); }
.radius-input input { border-radius:12px; border:4px solid rgba(var(--border-rgb), .1); background-clip:padding-box; }
/* Themes — shared across cards, toggles and inputs */
.theme-oceanic { --bg:#0f172a; --text:#cbd5e1; --heading:#38bdf8; --accent:#0284c7; --btn-text:#fff; --border-rgb:56,189,248; }
.theme-pastel { --bg:#fdfbf7; --text:#5c5c5c; --heading:#d97777; --accent:#d97777; --btn-text:#fff; --border-rgb:217,119,119; text-align:center; }
.theme-cyber { --bg:#000; --text:#a3a3a3; --heading:#39ff14; --accent:#39ff14; --btn-text:#000; --border-rgb:57,255,20; border-radius:0; text-transform:uppercase; font-family:monospace; }
.theme-minimal { --bg:#fff; --text:#000; --heading:#000; --accent:#000; --btn-text:#fff; --border-rgb:0,0,0; border-style:dashed; }
.theme-sunset { --bg:linear-gradient(135deg,#ff9a9e 0%,#fecfef 100%); --text:#4a4a4a; --heading:#fff; --accent:#ff758c; --btn-text:#fff; --border-rgb:255,255,255; text-shadow:0 1px 2px rgba(0,0,0,.1); }
.theme-corporate { --bg:#fff; --text:#4b5563; --heading:#1e3a8a; --accent:#1e3a8a; --btn-text:#fff; --border-rgb:30,58,138; }