File size: 25,186 Bytes
0b2a6ce | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 | <!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Kyber Sales Enablement - Your strategic real-time video companion">
<title>Kyber Value Mapper | Home</title>
<link rel="icon" type="image/png" href="Images/kyber-logomark.png">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
// Using indigo as primary and purple as secondary
primary: '#6366f1', // Indigo-500
secondary: '#8b5cf6', // Purple-500
dark: '#1e293b'
}
}
}
}
</script>
<style>
/* --- UNIFIED HEADER STYLES --- */
.nav-link.active {
@apply text-primary font-medium border-b-2 border-primary;
}
.hamburger-line {
@apply w-6 h-0.5 bg-white transition-all duration-300;
}
#mobileMenuButton.open .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 6px);
}
#mobileMenuButton.open .hamburger-line:nth-child(2) {
opacity: 0;
}
#mobileMenuButton.open .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(5px, -6px);
}
/* --- PAGE-SPECIFIC STYLES --- */
select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1.25rem;
}
.dark select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col">
<header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<a href="index.html" class="flex items-center space-x-2">
<img src="Images/kyber-logomark.png" alt="Kyber Logo" class="h-8 mr-2">
<span class="text-xl font-bold text-gray-800 dark:text-white font-heading">Kyber Sales Enablement</span>
</a>
<nav class="hidden md:flex space-x-8">
<a href="value-mapper.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Mapper</a>
<a href="intel.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Products</a>
<a href="proof.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Proof</a>
<a href="scorecard.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Scorecard</a>
<a href="strategy.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Method</a>
<a href="academy.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Academy</a>
</nav>
<div class="flex items-center space-x-4">
<button id="themeToggle" class="p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700">
<i data-feather="moon" class="hidden dark:block"></i>
<i data-feather="sun" class="block dark:hidden"></i>
</button>
<button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 z-50 bg-primary rounded-lg">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</div>
</div>
</header>
<div id="mobileMenu" class="hidden fixed inset-0 z-40 bg-gray-900 bg-opacity-95 backdrop-blur-sm">
<div class="flex flex-col items-center justify-center h-full space-y-8">
<a href="index.html" class="nav-link text-3xl text-white">Home</a>
<a href="value-mapper.html" class="nav-link text-3xl text-white">Mapper</a>
<a href="intel.html" class="nav-link text-3xl text-white">Products</a>
<a href="proof.html" class="nav-link text-3xl text-white">Proof</a>
<a href="scorecard.html" class="nav-link text-3xl text-white">Scorecard</a>
<a href="strategy.html" class="nav-link text-3xl text-white">Method</a>
<a href="academy.html" class="nav-link text-3xl text-white">Academy</a>
</div>
</div>
<main class="flex-grow bg-gradient-to-br from-purple-600 to-indigo-700">
<div class="container mx-auto px-4 py-12">
<div class="bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-2xl mb-8">
<div class="text-center">
<h1 class="text-3xl sm:text-4xl font-heading font-extrabold text-gray-800 dark:text-white mb-3 leading-tight">Kyber Value Mapper</h1>
<div class="flex justify-center mb-6">
<img src="Images/kyber-mapper.png" alt="Kyber Value Mapper Graphic" class="h-48 w-auto">
</div>
</div>
<div class="max-w-md mx-auto">
<select id="industry-selector" onchange="updateContent(true)" class="block w-full py-3 px-4 pr-10 border border-gray-300 dark:border-gray-600 rounded-xl text-base font-semibold text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-primary focus:outline-none transition duration-200 shadow-lg">
<option value="placeholder" disabled selected class="text-gray-500">- Choose Industry to Map -</option>
<option value="Robotics & Tele-Operation">Robotics & Tele-Operation</option>
<option value="Cloud Gaming / Cloud Rendering">Cloud Gaming / Cloud Rendering</option>
<option value="Live Auctions & eSports Betting">Live Auctions & eSports Betting</option>
<option value="Healthcare / Tele-Surgery">Healthcare / Tele-Surgery (New)</option>
<option value="Industrial IoT / Machine Vision">Industrial IoT / Machine Vision (New)</option>
<option value="Remote Live Production (REMI)">Remote Live Production (REMI) (New)</option>
</select>
</div>
</div>
<div id="initial-message" class="text-center p-12 rounded-xl bg-white/80 dark:bg-gray-800/80 text-gray-600 dark:text-gray-300 border-2 border-dashed border-gray-400 dark:border-gray-600 backdrop-blur-sm">
<p class="text-lg font-medium">Please select an industry from the dropdown above to reveal targeted value mapping, discovery questions, and permission-based openers.</p>
</div>
<div id="dynamic-area" class="hidden space-y-8">
<h2 id="industry-title" class="text-3xl font-heading font-bold text-white text-center pt-4"></h2>
<div class="bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-xl shadow-lg">
<h3 class="text-xl font-heading font-bold mb-6 text-gray-800 dark:text-white">Recommended Value Proposition & Suggested Product Focus</h3>
<div id="value-drivers" class="space-y-4 text-gray-700 dark:text-gray-300 text-base"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
<h3 class="text-lg font-heading font-bold mb-4 text-gray-800 dark:text-white">Permission-Based Opener (PBO) / C-Level Hook</h3>
<p id="pbo1" class="text-gray-800 dark:text-white font-medium text-base"></p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
<h3 class="text-lg font-heading font-bold mb-4 text-gray-800 dark:text-white">Discovery Question (DQ) / Technical Deep Dive</h3>
<p id="dq1" class="text-gray-600 dark:text-gray-400 italic text-base"></p>
</div>
</div>
<div class="flex justify-center pt-4">
<button id="refresh-button" class="hidden items-center px-6 py-3 bg-white/20 hover:bg-white/30 rounded-lg text-white font-semibold transition flex space-x-2 shadow-lg">
<i data-feather="refresh-cw" class="w-5 h-5"></i>
<span>Cycle Inspiration</span>
</button>
</div>
</div>
</div>
</main>
<footer class="bg-purple-800/80 dark:bg-purple-800/80 backdrop-blur-sm border-t border-gray-700">
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<p class="text-gray-600 dark:text-gray-300 mt-2 text-sm">
Leveraging Kyber to Enable Real-Time Interaction
</p>
</div>
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400">
<p>© 2025 Kyber Technologies. Real-Time, All The Time.</p>
</div>
</div>
</footer>
<script>
// --- Mobile Menu Toggle ---
const mobileMenuButton = document.getElementById('mobileMenuButton');
const mobileMenu = document.getElementById('mobileMenu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
mobileMenuButton.classList.toggle('open');
document.body.classList.toggle('overflow-hidden');
});
// --- Theme Toggle ---
const themeToggle = document.getElementById('themeToggle');
const html = document.documentElement;
themeToggle.addEventListener('click', () => {
html.classList.toggle('dark');
localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
feather.replace();
});
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
html.classList.add('dark');
} else {
html.classList.remove('dark');
}
// --- Set Active Nav Link ---
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
document.querySelectorAll('.nav-link').forEach(link => {
const linkHref = link.getAttribute('href');
if (linkHref === currentPage) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
feather.replace();
</script>
<script>
// *** KYBER INDUSTRY DATA - Mapped from provided table ***
const INDUSTRY_DATA = {
"Robotics & Tele-Operation": {
valueDrivers: "Value Drivers: Kyber is essential for applications where ultra-low latency (<100ms) is critical for **precision, safety, and human control**. It enables reliable remote control of industrial robots, inspection drones (UAVs), and heavy machinery by minimizing jitter and ensuring deterministic control. Product Focus: Custom Kyber Stack (Encoder/Decoder/Player), Edge Compute Integration, Jitter Mitigation Protocol.",
questions: [
// Technical (DQ) paired with C-Level (PBO) - Cycle 1 (Original Index 1 & 1)
{ pbo: "Would it be helpful to discuss the annual financial exposure or primary safety risk associated with unexpected jitter or lag in your current tele-operation system?", dq: "What is your absolute glass-to-glass latency budget for the remote operator's visual feedback and input response?" },
// Technical (DQ) paired with C-Level (PBO) - Cycle 2 (Original Index 2 & 2)
{ pbo: "If you could own and adapt the full video/input stack (encoder to player) to meet specific national security or proprietary sensor needs, what would that unlock?", dq: "How do you currently handle network variability (jitter) to ensure deterministic control, and what is the cost of your current retransmission/error correction layer?" },
// Technical (DQ) paired with C-Level (PBO) - Cycle 3 (Original Index 3 & 3)
{ pbo: "How much complexity and expense is tied up in deploying your current system to new geographic locations or edge compute nodes?", dq: "Are you currently streaming bidirectional input (gamepad, mouse, USB-over-IP) with the video, and what proprietary protocol is currently driving that?" }
]
},
"Cloud Gaming / Cloud Rendering": {
valueDrivers: "Value Drivers: The core value is delivering a **seamless, highly interactive PC or console experience** streamed to any device. Kyber reduces the network/decoding stack latency to support native high refresh rates (120Hz/240Hz) essential for competitive gaming and high-end graphics work. Product Focus: Kyber Web Codec/WebTransport Client, GPU/CPU Agnostic Optimization, Input Reliability Module.",
questions: [
// Cycle 1
{ pbo: "What is the correlation between average latency and customer churn or session abandonment in your interactive cloud service?", dq: "What is the maximum acceptable frame-time added by the network/decoding stack to a native 120Hz or 240Hz rendered stream?" },
// Cycle 2
{ pbo: "If you could shift encoding/decoding optimization to an open, hardware-agnostic platform, what percentage savings could you realize in GPU/CPU rental costs?", dq: "Are you constrained by WebRTC's complexity or WebCodec's browser compatibility, and which codecs (AV1, HEVC) must you support on the client?" },
// Cycle 3
{ pbo: "How long does it currently take your team to port your streaming solution to a new platform (e.g., an embedded smart TV or a new operating system)?", dq: "What is your failover mechanism for input streams during network loss, and is there an unacceptable delay on reconnecting the input channel?" }
]
},
"Live Auctions & eSports Betting": {
valueDrivers: "Value Drivers: Kyber enables **real-time synchronization** of interactive data (bids, odds) with the video feed, requiring sub-300ms total latency. This eliminates missed monetization opportunities and ensures regulatory compliance for high-stakes, time-sensitive events. Product Focus: Kyber QUIC/WebTransport Protocol, Data Synchronization Layer, Custom Player SDK.",
questions: [
// Cycle 1
{ pbo: "How many millions of euros in potential revenue are lost annually due to the latency window between the live event and the user's ability to place a bet or bid?", dq: "What is the current delay difference (skew) between the video feed and the interactive data stream (e.g., bid button, betting odds update)?" },
// Cycle 2
{ pbo: "Does your current system provide the auditable, deterministic, and synchronized timestamping needed to satisfy fair-play regulations for high-stakes real-time events?", dq: "How much unnecessary bandwidth is consumed by using a high-latency (e.g., HLS) protocol to achieve scalability that Kyber could reduce with QUIC/WebTransport?" },
// Cycle 3
{ pbo: "What specific new high-interaction product (e.g., live dealer experience, interactive trivia) could you launch if you could guarantee a true real-time experience?", dq: "What custom logic or interactive overlays are you struggling to perfectly sync within the player due to mandated player buffer depths?" }
]
},
"Healthcare / Tele-Surgery": {
valueDrivers: "Value Drivers: Kyber provides the ultra-low latency (<100ms) and **diagnostic fidelity** required for life-critical applications like remote diagnostics, real-time consultation, and remote assistance in complex surgical procedures. **Security and interoperability** are non-negotiable. Product Focus: Kyber Secure Stream, End-to-End Encryption, Medical Imaging Interoperability Module.",
questions: [
// Cycle 1
{ pbo: "What is the liability or insurance premium reduction achievable by migrating to an auditable, sub-100ms video stack for remote assistance in the operating room?", dq: "Beyond latency, what is your threshold for acceptable packet loss or video artifacts during a critical remote diagnostic feed?" },
// Cycle 2
{ pbo: "What is the strategic value of securely providing expert surgical consultation or training to remote, low-bandwidth hospitals using an optimized open-source stack?", dq: "How complex is integrating your current real-time video stream with specialized medical imaging hardware (e.g., endoscopy cameras, MRI displays)?" },
// Cycle 3
{ pbo: "How much time is wasted daily by doctors and specialists due to poor video quality, dropped connections, or laggy interactive interfaces?", dq: "Can your current streaming solution meet the necessary end-to-end encryption and metadata privacy standards required by health data regulations (e.g., GDPR, HIPAA)?" }
]
},
"Industrial IoT / Machine Vision": {
valueDrivers: "Value Drivers: Enables **real-time AI inference and action control** on manufacturing lines and autonomous systems by ensuring the total round-trip latency (capture to command) is minimized. Kyber delivers higher operational efficiency and defect detection rates. Product Focus: Kyber Edge SDK, High-Efficiency Codecs (AV1/HEVC), Cloud/Edge Synchronization API.",
questions: [
// Cycle 1
{ pbo: "If you could cut 50ms from your control loop latency, what percentage increase would you see in manufacturing throughput or defect detection rate?", dq: "What is the total round-trip time (camera capture $\rightarrow$ cloud/edge inference $\rightarrow$ action command) you must hit to maintain line speed or control stability?" },
// Cycle 2
{ pbo: "Are you concerned about your reliance on a single vendor's proprietary stack for your critical Industrial IoT (IIoT) control plane, and what is the cost of switching?", dq: "How are you managing the synchronization of configuration and control messages between the edge device and the centralized cloud dashboard?" },
// Cycle 3
{ pbo: "Given the open-source nature of Kyber, how valuable is it to your strategy to have a transparent, auditable control stack where proprietary algorithms can be secured?", dq: "Are you leveraging modern, high-efficiency codecs (like AV1 or HEVC) on your embedded hardware to minimize bandwidth costs on cellular/remote connections?" }
]
},
"Remote Live Production (REMI)": {
valueDrivers: "Value Drivers: Kyber provides **high-quality, low-latency transport** of contribution feeds from a remote venue back to a centralized studio (REMI/At-Home Production). It is critical for reducing on-site crew costs while maintaining strict synchronization (genlock) and content quality. Product Focus: Kyber REMI Gateway, Genlock Synchronization Module, Bidirectional Comms API.",
questions: [
// Cycle 1
{ pbo: "What is the potential cost savings from reducing the size of your on-site production crew and equipment by shifting more tasks to a remote hub via low-latency feed?", dq: "What is your minimum requirement for synchronization (genlock) between multiple remote camera feeds ingested into the central production switcher?" },
// Cycle 2
{ pbo: "What is the maximum acceptable delay between the action occurring at the venue and the broadcast feed reaching your primary CDN ingest point?", dq: "Are you currently using SRT or NDI, and what specific limitations (jitter, complexity of NAT traversal, non-native web playback) are you encountering with that protocol?" },
// Cycle 3
{ pbo: "How quickly can you spin up a new, professional-grade remote production feed for a sudden, high-profile event using your existing infrastructure?", dq: "How critical is it to have guaranteed, low-latency, bidirectional audio/video communication for the director and camera operators back to the remote site?" }
]
}
};
// *** NEW SCRIPT LOGIC FOR CYCLING (Keep functionality) ***
// Global variable to track the current question
let currentQuestionIndex = 0;
const selector = document.getElementById('industry-selector');
const refreshButton = document.getElementById('refresh-button');
function cycleQuestions() {
const industry = selector.value;
if (!industry || industry === 'placeholder') return;
const data = INDUSTRY_DATA[industry];
if (!data.questions || data.questions.length === 0) return;
// Increment index and loop back to 0 if at the end
currentQuestionIndex = (currentQuestionIndex + 1) % data.questions.length;
const newPair = data.questions[currentQuestionIndex];
document.getElementById('pbo1').textContent = newPair.pbo;
document.getElementById('dq1').textContent = newPair.dq;
}
function updateContent(shouldScroll = false) {
const industry = selector.value;
const dynamicArea = document.getElementById('dynamic-area');
const initialMessage = document.getElementById('initial-message');
if (!industry || industry === 'placeholder') {
dynamicArea.classList.add('hidden');
initialMessage.classList.remove('hidden');
refreshButton.classList.add('hidden');
return;
}
const data = INDUSTRY_DATA[industry];
document.getElementById('industry-title').textContent = industry;
const valueDriversElement = document.getElementById('value-drivers');
// Format the Value Drivers and Product Focus
// Note: This regex relies on the exact formatting of the 'valueDrivers' string:
// "Value Drivers: [Content]. Product Focus: [Content]."
valueDriversElement.innerHTML = data.valueDrivers.replace(/Value Drivers: (.*?)\. Product Focus: (.*?)\./s,
`<p class="font-semibold text-lg mb-2 text-primary dark:text-blue-400">Value Drivers:</p>
<p class="mb-4">${'$1'}</p>
<p class="font-semibold text-lg mb-2 text-primary dark:text-blue-400">Product Focus:</p>
<p>${'$2'}</p>`);
// Reset index and load the *first* question for the new industry
currentQuestionIndex = 0;
if (data.questions && data.questions.length > 0) {
const firstPair = data.questions[0];
document.getElementById('pbo1').textContent = firstPair.pbo;
document.getElementById('dq1').textContent = firstPair.dq;
refreshButton.classList.remove('hidden'); // Show the button
} else {
// No questions for this industry
document.getElementById('pbo1').textContent = "No opener available for this industry.";
document.getElementById('dq1').textContent = "No discovery question available.";
refreshButton.classList.add('hidden'); // Hide the button
}
initialMessage.classList.add('hidden');
dynamicArea.classList.remove('hidden');
feather.replace(); // Refresh icons
if (shouldScroll) {
dynamicArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
// Add the event listener for the button
refreshButton.addEventListener('click', cycleQuestions);
// Call updateContent on load in case a value is pre-selected (e.g., browser back button)
window.onload = () => updateContent(false);
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |