npm - @caoscompanybr/merlin - Versions diffs - 3.5.0 - Mend

@caoscompanybr/merlin 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (762) hide show

package/.merlin-core/skills/general/blkskrn/templates/presenter.html ADDED Viewed

@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{CANVAS_NAME}}</title>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+* { margin: 0; padding: 0; box-sizing: border-box; }
+:root {
+  --pres-bg: #030508;
+  --pres-dot: rgba(125, 211, 252, 0.25);
+  --pres-dot-active: #7dd3fc;
+  --pres-text: #94a3b8;
+}
+html, body {
+  width: 100%; height: 100%;
+  background: var(--pres-bg);
+  font-family: 'Inter', system-ui, sans-serif;
+  overflow: hidden;
+}
+/* Slide container */
+.presenter {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.slide-section {
+  position: absolute;
+  inset: 0;
+  display: none;
+}
+.slide-section.active {
+  display: block;
+}
+.slide-section iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  pointer-events: none; /* Prevent iframes from stealing keyboard focus */
+}
+/* Invisible overlay to capture clicks for navigation */
+.click-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  cursor: pointer;
+}
+.click-overlay .click-left,
+.click-overlay .click-right {
+  position: absolute;
+  top: 0;
+  bottom: 48px; /* Leave space for nav bar */
+}
+.click-overlay .click-left {
+  left: 0;
+  width: 30%;
+}
+.click-overlay .click-right {
+  right: 0;
+  width: 70%;
+}
+/* Navigation bar */
+.nav-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: linear-gradient(to top, rgba(3,5,8,0.95) 0%, transparent 100%);
+  z-index: 1000;
+  padding: 0 24px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.presenter:hover .nav-bar,
+.nav-bar:hover {
+  opacity: 1;
+}
+/* Navigation dots */
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--pres-dot);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+  padding: 0;
+}
+.dot:hover {
+  background: rgba(125, 211, 252, 0.5);
+  transform: scale(1.3);
+}
+.dot.active {
+  background: var(--pres-dot-active);
+  box-shadow: 0 0 8px rgba(125, 211, 252, 0.4);
+  transform: scale(1.2);
+}
+/* Slide counter */
+.slide-counter {
+  position: fixed;
+  bottom: 54px;
+  right: 24px;
+  font-size: 11px;
+  color: var(--pres-text);
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 1000;
+}
+.presenter:hover .slide-counter {
+  opacity: 1;
+}
+/* Fullscreen hint */
+.fs-hint {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  font-size: 10px;
+  color: var(--pres-text);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 1000;
+}
+.presenter:hover .fs-hint {
+  opacity: 0.6;
+}
+</style>
+</head>
+<body>
+<div class="presenter" id="presenter" tabindex="0" style="outline:none;">
+  <!-- Slides injected here -->
+  {{SLIDES_CONTENT}}
+  <!-- Click overlay for navigation -->
+  <div class="click-overlay" id="clickOverlay">
+    <div class="click-left" id="clickLeft"></div>
+    <div class="click-right" id="clickRight"></div>
+  </div>
+  <!-- Navigation -->
+  <div class="nav-bar" id="navBar">
+    {{DOTS_HTML}}
+  </div>
+  <div class="slide-counter" id="counter">1 / {{SLIDE_COUNT}}</div>
+  <div class="fs-hint">Press F for fullscreen</div>
+</div>
+<script>
+(function() {
+  'use strict';
+  const slides = document.querySelectorAll('.slide-section');
+  const dots = document.querySelectorAll('.dot');
+  const counter = document.getElementById('counter');
+  const total = slides.length;
+  let current = 0;
+  function goTo(index) {
+    if (index < 0) index = 0;
+    if (index >= total) index = total - 1;
+    slides[current].classList.remove('active');
+    dots[current].classList.remove('active');
+    current = index;
+    slides[current].classList.add('active');
+    dots[current].classList.add('active');
+    counter.textContent = (current + 1) + ' / ' + total;
+  }
+  function next() { goTo(current + 1); }
+  function prev() { goTo(current - 1); }
+  function toggleFullscreen() {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen().catch(function() {});
+    } else {
+      document.exitFullscreen().catch(function() {});
+    }
+  }
+  // Keyboard controls
+  document.addEventListener('keydown', function(e) {
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+      case ' ':
+        e.preventDefault();
+        next();
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        e.preventDefault();
+        prev();
+        break;
+      case 'Home':
+        e.preventDefault();
+        goTo(0);
+        break;
+      case 'End':
+        e.preventDefault();
+        goTo(total - 1);
+        break;
+      case 'f':
+      case 'F':
+        e.preventDefault();
+        toggleFullscreen();
+        break;
+      case 'Escape':
+        if (document.fullscreenElement) {
+          document.exitFullscreen().catch(function() {});
+        }
+        break;
+    }
+  });
+  // Click overlay handlers
+  document.getElementById('clickRight').addEventListener('click', next);
+  document.getElementById('clickLeft').addEventListener('click', prev);
+  // Dot click handlers
+  dots.forEach(function(dot, i) {
+    dot.addEventListener('click', function() { goTo(i); });
+  });
+  // Keep focus on presenter so keyboard events always work
+  document.addEventListener('focusin', function(e) {
+    if (e.target.tagName === 'IFRAME') {
+      document.getElementById('presenter').focus();
+    }
+  });
+  // Initialize — check hash for direct slide link
+  var startSlide = 0;
+  var hash = window.location.hash.replace('#', '');
+  if (hash && !isNaN(parseInt(hash, 10))) {
+    startSlide = Math.min(parseInt(hash, 10), total - 1);
+  }
+  if (slides.length > 0) {
+    slides[startSlide].classList.add('active');
+    dots[startSlide].classList.add('active');
+    current = startSlide;
+    counter.textContent = (current + 1) + ' / ' + total;
+  }
+  // Auto-focus presenter so keyboard works immediately
+  document.getElementById('presenter').focus();
+})();
+</script>
+</body>
+</html>

package/.merlin-core/skills/general/blkskrn/templates/slide-base.html ADDED Viewed

@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1440, height=810">
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+* { margin: 0; padding: 0; box-sizing: border-box; }
+:root {
+  /* Background layers */
+  --mc-bg-base: #06080f;
+  --mc-bg-surface: #0c1018;
+  --mc-bg-card: #111622;
+  --mc-bg-elevated: #182034;
+  /* Text hierarchy */
+  --mc-text-primary: #f0f4f8;
+  --mc-text-secondary: #94a3b8;
+  --mc-text-tertiary: #64748b;
+  --mc-text-muted: #475569;
+  /* Accent colors */
+  --mc-accent: #7dd3fc;
+  --mc-accent-dim: rgba(125, 211, 252, 0.12);
+  --mc-info: #a78bfa;
+  --mc-success: #34d399;
+  --mc-warning: #fbbf24;
+  --mc-danger: #f87171;
+  /* Borders */
+  --mc-border: #1e293b;
+  /* Easing */
+  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-move: cubic-bezier(0.25, 1, 0.5, 1);
+  --ease-exit: cubic-bezier(0.55, 0, 1, 0.45);
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Durations */
+  --dur-fast: 200ms;
+  --dur-normal: 400ms;
+  --dur-slow: 800ms;
+}
+body {
+  background: var(--mc-bg-base);
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  color: var(--mc-text-primary);
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+/* === Layout === */
+.slide { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; }
+.slide-pad { padding: 56px 64px; flex: 1; display: flex; flex-direction: column; }
+.center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; flex: 1; }
+.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+.row { display: flex; gap: 16px; }
+.row-tight { display: flex; gap: 8px; }
+.row-wide { display: flex; gap: 24px; }
+/* === Brand === */
+.brand-line {
+  position: absolute; top: 0; left: 0; right: 0; height: 3px;
+  background: linear-gradient(90deg, #7dd3fc 0%, #a78bfa 50%, #7dd3fc 100%);
+}
+.title-bg {
+  position: absolute; inset: 0;
+  background:
+    radial-gradient(ellipse at 70% 40%, rgba(125,211,252,0.06) 0%, transparent 60%),
+    radial-gradient(ellipse at 30% 80%, rgba(167,139,250,0.04) 0%, transparent 50%);
+}
+.grid-bg {
+  position: absolute; inset: 0; z-index: 0;
+  background-image:
+    linear-gradient(rgba(125,211,252,0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(125,211,252,0.03) 1px, transparent 1px);
+  background-size: 60px 60px;
+}
+.logo-mark {
+  width: 72px; height: 72px; border-radius: 16px;
+  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #a78bfa 100%);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 36px; font-weight: 800; color: #06080f;
+  box-shadow: 0 0 40px rgba(125,211,252,0.2);
+  flex-shrink: 0;
+}
+.slide-num {
+  position: absolute; bottom: 24px; right: 32px;
+  font-size: 11px; color: var(--mc-text-muted); font-weight: 500;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+}
+.slide-footer {
+  position: absolute; bottom: 24px; left: 64px;
+  font-size: 10px; color: var(--mc-text-muted);
+}
+/* === Typography === */
+.section-label {
+  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
+  text-transform: uppercase; color: var(--mc-accent); margin-bottom: 8px;
+}
+.slide-title { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
+.slide-subtitle { font-size: 14px; color: var(--mc-text-secondary); margin-bottom: 32px; }
+.hero-title { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; }
+.text-gradient {
+  background: linear-gradient(135deg, #f0f4f8 0%, #7dd3fc 60%, #a78bfa 100%);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+/* === Cards === */
+.feat-card { background: var(--mc-bg-card); border: 1px solid var(--mc-border); border-radius: 10px; padding: 20px; }
+.feat-card-accent {
+  background: var(--mc-bg-card); border: 1px solid var(--mc-border);
+  border-radius: 10px; padding: 20px; border-top: 2px solid var(--mc-accent);
+}
+.card-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
+.card-body { font-size: 11px; color: var(--mc-text-tertiary); line-height: 1.5; }
+.stat-card {
+  background: var(--mc-bg-card); border: 1px solid var(--mc-border);
+  border-radius: 8px; padding: 16px; text-align: center;
+}
+.stat-value { font-size: 32px; font-weight: 800; color: var(--mc-accent); font-variant-numeric: tabular-nums; }
+.stat-label { font-size: 10px; color: var(--mc-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }
+/* === Badges === */
+.badge { display: inline-flex; padding: 4px 12px; border-radius: 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; }
+.badge-crystal { background: rgba(125,211,252,0.15); color: #7dd3fc; border: 1px solid rgba(125,211,252,0.3); }
+.badge-violet { background: rgba(167,139,250,0.15); color: #a78bfa; border: 1px solid rgba(167,139,250,0.3); }
+.badge-emerald { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
+.badge-amber { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
+.badge-red { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
+/* === Ambient Effects === */
+.orb {
+  position: absolute; border-radius: 50%; pointer-events: none;
+  filter: blur(80px); opacity: 0;
+  animation: orbAppear 2s ease-out forwards;
+}
+.orb-crystal {
+  width: 300px; height: 300px;
+  background: radial-gradient(circle, rgba(125,211,252,0.12) 0%, transparent 70%);
+}
+.orb-violet {
+  width: 250px; height: 250px;
+  background: radial-gradient(circle, rgba(167,139,250,0.10) 0%, transparent 70%);
+}
+.orb-emerald {
+  width: 200px; height: 200px;
+  background: radial-gradient(circle, rgba(52,211,153,0.08) 0%, transparent 70%);
+}
+.brand-line {
+  transform: scaleX(0); transform-origin: left;
+  animation: sweepIn 1.2s var(--ease-enter) 0.2s forwards;
+}
+/* === Animations === */
+.slide-up { opacity: 0; transform: translateY(24px); animation: slideUp var(--dur-normal) var(--ease-enter) forwards; }
+.slide-up-stagger > * { opacity: 0; transform: translateY(24px); animation: slideUp var(--dur-normal) var(--ease-enter) forwards; }
+.slide-up-stagger > *:nth-child(1)  { animation-delay: 0.6s; }
+.slide-up-stagger > *:nth-child(2)  { animation-delay: 0.65s; }
+.slide-up-stagger > *:nth-child(3)  { animation-delay: 0.7s; }
+.slide-up-stagger > *:nth-child(4)  { animation-delay: 0.75s; }
+.slide-up-stagger > *:nth-child(5)  { animation-delay: 0.8s; }
+.slide-up-stagger > *:nth-child(6)  { animation-delay: 0.85s; }
+.slide-up-stagger > *:nth-child(7)  { animation-delay: 0.9s; }
+.slide-up-stagger > *:nth-child(8)  { animation-delay: 0.95s; }
+.slide-up-stagger > *:nth-child(9)  { animation-delay: 1.0s; }
+.slide-up-stagger > *:nth-child(10) { animation-delay: 1.05s; }
+.slide-up-stagger > *:nth-child(11) { animation-delay: 1.1s; }
+.slide-up-stagger > *:nth-child(12) { animation-delay: 1.15s; }
+.slide-up-stagger > *:nth-child(n+13) { animation-delay: 1.2s; }
+.scale-pop { opacity: 0; transform: scale(0.5) translateY(8px); animation: scalePop 0.5s var(--ease-bounce) forwards; }
+.fade-in { opacity: 0; animation: fadeIn var(--dur-slow) ease forwards; }
+.from-left { opacity: 0; transform: translateX(-40px); animation: fromEdge 0.6s var(--ease-enter) forwards; }
+.from-right { opacity: 0; transform: translateX(40px); animation: fromEdge 0.6s var(--ease-enter) forwards; }
+.sweep-in { transform: scaleX(0); transform-origin: left; animation: sweepIn 1.2s var(--ease-enter) forwards; }
+.card-enter { opacity: 0; transform: translateY(20px) scale(0.96); animation: cardEnter 0.5s var(--ease-enter) forwards; }
+.glow-pulse::after {
+  content: ''; position: absolute; inset: -1px; border-radius: inherit;
+  background: linear-gradient(135deg, rgba(125,211,252,0.15), rgba(167,139,250,0.1));
+  opacity: 0; animation: glowPulse 3s ease-in-out infinite;
+}
+.grow-bar { transform: scaleX(0); transform-origin: left; animation: growBar 1.5s var(--ease-enter) forwards; }
+@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
+@keyframes scalePop {
+  0% { opacity: 0; transform: scale(0.5) translateY(8px); }
+  70% { transform: scale(1.08) translateY(-2px); }
+  100% { opacity: 1; transform: scale(1) translateY(0); }
+}
+@keyframes fadeIn { to { opacity: 1; } }
+@keyframes fromEdge { to { opacity: 1; transform: translate(0); } }
+@keyframes sweepIn { to { transform: scaleX(1); } }
+@keyframes orbAppear {
+  0% { opacity: 0; transform: scale(0.5); }
+  100% { opacity: 1; transform: scale(1); }
+}
+@keyframes cardEnter {
+  0% { opacity: 0; transform: translateY(20px) scale(0.96); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes glowPulse {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 0.8; }
+}
+@keyframes growBar {
+  0% { transform: scaleX(0); }
+  100% { transform: scaleX(1); }
+}
+@keyframes logoSpin {
+  0% { opacity: 0; transform: scale(0) rotate(-180deg); }
+  70% { opacity: 1; transform: scale(1.1) rotate(10deg); }
+  100% { opacity: 1; transform: scale(1) rotate(0); box-shadow: 0 0 60px rgba(125,211,252,0.25); }
+}
+/* === Fill Screen === */
+.fill { flex: 1; display: flex; flex-direction: column; }
+.fill-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.fill-grid { flex: 1; display: grid; align-content: center; }
+/* === Replay === */
+.replay-btn {
+  position: absolute; bottom: 20px; left: 32px;
+  padding: 6px 14px; border-radius: 6px;
+  background: rgba(125,211,252,0.1); border: 1px solid rgba(125,211,252,0.2);
+  color: #7dd3fc; font-size: 11px; font-weight: 600; cursor: pointer;
+  opacity: 0; animation: fadeIn 0.5s ease 5s forwards; transition: all 0.2s;
+}
+.replay-btn:hover { background: rgba(125,211,252,0.2); border-color: rgba(125,211,252,0.4); transform: scale(1.05); }
+/* === Accessibility === */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+</style>
+</head>
+<body>
+<div class="slide">
+  <div class="brand-line"></div>
+  <div class="grid-bg"></div>
+  <div class="orb orb-crystal" style="top:-80px;right:-60px;"></div>
+  <div class="orb orb-violet" style="bottom:-40px;left:-30px;animation-delay:0.5s;"></div>
+  <div class="slide-pad" style="position:relative;z-index:1;">
+    <!-- YOUR SLIDE CONTENT HERE -->
+  </div>
+  <span class="slide-num">01 / 01</span>
+</div>
+<script>
+/* Counter animation helper — use: animateCounter('elementId', 42, 1000) */
+function animateCounter(id, target, delay) {
+  setTimeout(function() {
+    var el = document.getElementById(id);
+    if (!el) return;
+    var start = performance.now();
+    function tick(now) {
+      var p = Math.min((now - start) / 1500, 1);
+      el.textContent = Math.round(target * (1 - Math.pow(1 - p, 3)));
+      if (p < 1) requestAnimationFrame(tick);
+    }
+    requestAnimationFrame(tick);
+  }, delay || 800);
+}
+</script>
+</body>
+</html>

package/.merlin-core/skills/general/blkskrn/templates/viewer.html ADDED Viewed

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{CANVAS_NAME}} — Viewer</title>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
+* { margin: 0; padding: 0; box-sizing: border-box; }
+:root {
+  --bg: #06080f;
+  --surface: #0c1018;
+  --card: #111622;
+  --accent: #7dd3fc;
+  --info: #a78bfa;
+  --t1: #f0f4f8;
+  --t2: #94a3b8;
+  --t3: #64748b;
+  --bdr: #1e293b;
+}
+body {
+  background: var(--bg);
+  font-family: 'Inter', system-ui, sans-serif;
+  color: var(--t1);
+  min-height: 100vh;
+  padding: 40px;
+}
+/* Header */
+.header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+.header h1 {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, #f0f4f8 0%, #7dd3fc 60%, #a78bfa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 8px;
+}
+.header p {
+  font-size: 13px;
+  color: var(--t3);
+}
+/* Slide Grid */
+.slide-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
+  gap: 24px;
+  max-width: 1800px;
+  margin: 0 auto;
+}
+.slide-thumb {
+  aspect-ratio: 16 / 9;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--bdr);
+  background: var(--card);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+.slide-thumb:hover {
+  border-color: var(--accent);
+  box-shadow: 0 0 20px rgba(125, 211, 252, 0.1);
+  transform: translateY(-2px);
+}
+.slide-thumb iframe {
+  width: 1440px;
+  height: 810px;
+  border: none;
+  transform-origin: top left;
+  pointer-events: none;
+}
+.slide-label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px 12px;
+  background: linear-gradient(to top, rgba(6,8,15,0.9) 0%, transparent 100%);
+  font-size: 11px;
+  color: var(--t2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.slide-label .num {
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--accent);
+  font-weight: 600;
+}
+/* Present button */
+.present-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 24px;
+  border-radius: 8px;
+  background: rgba(125, 211, 252, 0.1);
+  border: 1px solid rgba(125, 211, 252, 0.3);
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-top: 12px;
+}
+.present-btn:hover {
+  background: rgba(125, 211, 252, 0.2);
+  border-color: rgba(125, 211, 252, 0.5);
+  transform: scale(1.02);
+}
+</style>
+</head>
+<body>
+<div class="header">
+  <h1>{{CANVAS_NAME}}</h1>
+  <p>{{SLIDE_COUNT}} slides</p>
+  <button class="present-btn" onclick="window.location.href='index.html'">
+    &#9654; Present
+  </button>
+</div>
+<div class="slide-grid">
+  {{THUMBNAILS_HTML}}
+</div>
+<script>
+(function() {
+  'use strict';
+  // Scale iframes to fit thumbnails
+  function scaleIframes() {
+    document.querySelectorAll('.slide-thumb').forEach(function(thumb) {
+      var iframe = thumb.querySelector('iframe');
+      if (!iframe) return;
+      var rect = thumb.getBoundingClientRect();
+      var scale = rect.width / 1440;
+      iframe.style.transform = 'scale(' + scale + ')';
+    });
+  }
+  window.addEventListener('load', scaleIframes);
+  window.addEventListener('resize', scaleIframes);
+})();
+</script>
+</body>
+</html>