npm - @trishchuk/coolors-mcp - Versions diffs - 1.0.1 → 1.1.0 - Mend

@trishchuk/coolors-mcp 1.0.1 → 1.1.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 (105) hide show

package/.github/workflows/ci.yml +23 -20
package/.github/workflows/deploy-docs.yml +6 -3
package/.github/workflows/release.yml +11 -9
package/README.md +123 -14
package/dist/bin/server.js +997 -256
package/dist/bin/server.js.map +1 -1
package/dist/{chunk-P3ARRKLS.js → chunk-HOMDMKUY.js} +3 -1
package/dist/{chunk-P3ARRKLS.js.map → chunk-HOMDMKUY.js.map} +1 -1
package/dist/{chunk-IQ7NN26V.js → chunk-LHW2ZTOU.js} +14 -2
package/dist/chunk-LHW2ZTOU.js.map +1 -0
package/dist/color/index.js +1 -1
package/dist/coolors-mcp.d.ts +4 -4
package/dist/coolors-mcp.js +1 -1
package/eslint.config.ts +13 -0
package/jsr.json +1 -1
package/package.json +16 -12
package/src/bin/server.ts +13 -1
package/src/color/__tests__/extract-colors.test.ts +20 -30
package/src/color/apca.ts +105 -0
package/src/color/color-blindness.ts +109 -0
package/src/coolors-mcp.ts +1 -1
package/src/session.ts +10 -2
package/src/theme/matcher.ts +1 -1
package/src/theme/refactor.ts +1 -1
package/src/theme/types.ts +3 -0
package/src/tools/__tests__/cohesion.test.ts +97 -0
package/src/tools/__tests__/color-blindness.test.ts +45 -0
package/src/tools/__tests__/color-conversion.test.ts +38 -0
package/src/tools/__tests__/contrast-checker.test.ts +56 -0
package/src/tools/__tests__/palette-export.test.ts +54 -0
package/src/tools/adjust-color.tool.ts +80 -0
package/src/tools/cohesion.tools.ts +380 -0
package/src/tools/color-blindness.tool.ts +168 -0
package/src/tools/color-conversion.tool.ts +1 -1
package/src/tools/contrast-checker.tool.ts +53 -14
package/src/tools/dislike-analyzer.tool.ts +41 -54
package/src/tools/image-extraction.tools.ts +62 -115
package/src/tools/index.ts +15 -2
package/src/tools/palette-export.tool.ts +174 -0
package/src/tools/palette-with-locks.tool.ts +8 -6
package/src/types.ts +2 -3
package/tsconfig.json +12 -2
package/vitest.config.js +1 -3
package/.claude/settings.local.json +0 -35
package/.env +0 -2
package/.mcp.json +0 -12
package/CLAUDE.md +0 -201
package/DOCUMENTATION.md +0 -274
package/GEMINI.md +0 -54
package/TOOLS_UK.md +0 -233
package/demo/content_based_color.png +0 -0
package/demo/music-player.html +0 -621
package/demo/podcast-player.html +0 -903
package/dist/chunk-IQ7NN26V.js.map +0 -1
package/docs/.vitepress/cache/deps/@braintree_sanitize-url.js +0 -111
package/docs/.vitepress/cache/deps/@braintree_sanitize-url.js.map +0 -7
package/docs/.vitepress/cache/deps/_metadata.json +0 -127
package/docs/.vitepress/cache/deps/chunk-BUSYA2B4.js +0 -12
package/docs/.vitepress/cache/deps/chunk-BUSYA2B4.js.map +0 -7
package/docs/.vitepress/cache/deps/chunk-JD3CXNQ6.js +0 -13614
package/docs/.vitepress/cache/deps/chunk-JD3CXNQ6.js.map +0 -7
package/docs/.vitepress/cache/deps/chunk-SYPOPCWC.js +0 -10698
package/docs/.vitepress/cache/deps/chunk-SYPOPCWC.js.map +0 -7
package/docs/.vitepress/cache/deps/cytoscape-cose-bilkent.js +0 -5609
package/docs/.vitepress/cache/deps/cytoscape-cose-bilkent.js.map +0 -7
package/docs/.vitepress/cache/deps/cytoscape.js +0 -36234
package/docs/.vitepress/cache/deps/cytoscape.js.map +0 -7
package/docs/.vitepress/cache/deps/dayjs.js +0 -507
package/docs/.vitepress/cache/deps/dayjs.js.map +0 -7
package/docs/.vitepress/cache/deps/debug.js +0 -512
package/docs/.vitepress/cache/deps/debug.js.map +0 -7
package/docs/.vitepress/cache/deps/package.json +0 -3
package/docs/.vitepress/cache/deps/prismjs.js +0 -1638
package/docs/.vitepress/cache/deps/prismjs.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-bash.js +0 -235
package/docs/.vitepress/cache/deps/prismjs_components_prism-bash.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-javascript.js +0 -173
package/docs/.vitepress/cache/deps/prismjs_components_prism-javascript.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-json.js +0 -27
package/docs/.vitepress/cache/deps/prismjs_components_prism-json.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-python.js +0 -72
package/docs/.vitepress/cache/deps/prismjs_components_prism-python.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-typescript.js +0 -56
package/docs/.vitepress/cache/deps/prismjs_components_prism-typescript.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-yaml.js +0 -107
package/docs/.vitepress/cache/deps/prismjs_components_prism-yaml.js.map +0 -7
package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -5074
package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -584
package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js +0 -1483
package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map +0 -7
package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js +0 -1779
package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map +0 -7
package/docs/.vitepress/cache/deps/vitepress___minisearch.js +0 -2023
package/docs/.vitepress/cache/deps/vitepress___minisearch.js.map +0 -7
package/docs/.vitepress/cache/deps/vue.js +0 -344
package/docs/.vitepress/cache/deps/vue.js.map +0 -7
package/examples/theme-matching.md +0 -113
package/mcp-config.json +0 -8
package/note.md +0 -34
package/research_results.md +0 -53
package/src/tools/colors.ts +0 -31
package/src/tools/registry.ts +0 -142
package/src/tools/simple-tools.ts +0 -37

package/demo/podcast-player.html DELETED Viewed

@@ -1,903 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Podcast Player with Chapters - Content-Based Colors</title>
-    <style>
-      :root {
-        /* Material Design 3 - Generated from podcast cover */
-        --md-sys-color-primary: #7c4dff;
-        --md-sys-color-on-primary: #ffffff;
-        --md-sys-color-primary-container: #e1d5ff;
-        --md-sys-color-on-primary-container: #21005d;
-        --md-sys-color-secondary: #625b71;
-        --md-sys-color-on-secondary: #ffffff;
-        --md-sys-color-secondary-container: #e8def8;
-        --md-sys-color-on-secondary-container: #1d192b;
-        --md-sys-color-tertiary: #7d5260;
-        --md-sys-color-on-tertiary: #ffffff;
-        --md-sys-color-tertiary-container: #ffd8e4;
-        --md-sys-color-on-tertiary-container: #31111d;
-        --md-sys-color-background: #fdfbff;
-        --md-sys-color-on-background: #1c1b1f;
-        --md-sys-color-surface: #fdfbff;
-        --md-sys-color-on-surface: #1c1b1f;
-        --md-sys-color-surface-variant: #e7e0ec;
-        --md-sys-color-on-surface-variant: #49454f;
-        --md-sys-color-outline: #79747e;
-        --md-sys-color-outline-variant: #cac4d0;
-        --md-sys-color-surface-container: #f4eff7;
-        --md-sys-color-surface-container-high: #ece7f0;
-        --md-sys-color-surface-container-highest: #e7e0ec;
-      }
-      @media (prefers-color-scheme: dark) {
-        :root {
-          --md-sys-color-primary: #c9a8ff;
-          --md-sys-color-on-primary: #370093;
-          --md-sys-color-primary-container: #5029ca;
-          --md-sys-color-on-primary-container: #e1d5ff;
-          --md-sys-color-secondary: #ccc2dc;
-          --md-sys-color-on-secondary: #332d41;
-          --md-sys-color-secondary-container: #4a4459;
-          --md-sys-color-on-secondary-container: #e8def8;
-          --md-sys-color-tertiary: #efb8c8;
-          --md-sys-color-on-tertiary: #492532;
-          --md-sys-color-tertiary-container: #633b48;
-          --md-sys-color-on-tertiary-container: #ffd8e4;
-          --md-sys-color-background: #141318;
-          --md-sys-color-on-background: #e6e1e5;
-          --md-sys-color-surface: #1c1b1f;
-          --md-sys-color-on-surface: #e6e1e5;
-          --md-sys-color-surface-variant: #49454f;
-          --md-sys-color-on-surface-variant: #cac4d0;
-          --md-sys-color-outline: #938f99;
-          --md-sys-color-outline-variant: #49454f;
-          --md-sys-color-surface-container: #211f26;
-          --md-sys-color-surface-container-high: #2b2930;
-          --md-sys-color-surface-container-highest: #36343b;
-        }
-      }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      body {
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-          sans-serif;
-        background: var(--md-sys-color-background);
-        color: var(--md-sys-color-on-background);
-        min-height: 100vh;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 20px;
-        background: linear-gradient(
-          135deg,
-          var(--md-sys-color-primary-container) 0%,
-          var(--md-sys-color-secondary-container) 50%,
-          var(--md-sys-color-tertiary-container) 100%
-        );
-      }
-      .container {
-        width: 100%;
-        max-width: 480px;
-        background: var(--md-sys-color-surface);
-        border-radius: 28px;
-        box-shadow:
-          0 10px 40px rgba(0, 0, 0, 0.2),
-          0 0 0 1px var(--md-sys-color-outline-variant);
-        overflow: hidden;
-      }
-      .player-section {
-        padding: 24px;
-        background: var(--md-sys-color-surface);
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      }
-      .podcast-header {
-        display: flex;
-        gap: 16px;
-        margin-bottom: 24px;
-      }
-      .podcast-cover {
-        width: 120px;
-        height: 120px;
-        border-radius: 16px;
-        background: linear-gradient(
-          135deg,
-          var(--md-sys-color-primary),
-          var(--md-sys-color-secondary)
-        );
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 48px;
-        color: var(--md-sys-color-on-primary);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        position: relative;
-        overflow: hidden;
-      }
-      .cover-pattern {
-        position: absolute;
-        inset: 0;
-        opacity: 0.3;
-        background-image:
-          repeating-linear-gradient(
-            45deg,
-            transparent,
-            transparent 10px,
-            rgba(255, 255, 255, 0.1) 10px,
-            rgba(255, 255, 255, 0.1) 20px
-          ),
-          repeating-linear-gradient(
-            -45deg,
-            transparent,
-            transparent 10px,
-            rgba(0, 0, 0, 0.1) 10px,
-            rgba(0, 0, 0, 0.1) 20px
-          );
-      }
-      .podcast-info {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      .podcast-title {
-        font-size: 20px;
-        font-weight: 600;
-        color: var(--md-sys-color-on-surface);
-        margin-bottom: 4px;
-      }
-      .podcast-author {
-        font-size: 14px;
-        color: var(--md-sys-color-on-surface-variant);
-        margin-bottom: 8px;
-      }
-      .episode-title {
-        font-size: 16px;
-        color: var(--md-sys-color-primary);
-        font-weight: 500;
-      }
-      .waveform-container {
-        height: 60px;
-        margin-bottom: 16px;
-        background: var(--md-sys-color-surface-container);
-        border-radius: 8px;
-        padding: 8px;
-        position: relative;
-        overflow: hidden;
-      }
-      .waveform {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        gap: 2px;
-      }
-      .wave-bar {
-        flex: 1;
-        background: var(--md-sys-color-primary);
-        opacity: 0.3;
-        border-radius: 2px;
-        transition: opacity 0.3s;
-      }
-      .wave-bar.active {
-        opacity: 1;
-        background: var(--md-sys-color-primary);
-      }
-      .wave-bar.played {
-        opacity: 0.6;
-        background: var(--md-sys-color-secondary);
-      }
-      .progress-time {
-        display: flex;
-        justify-content: space-between;
-        font-size: 12px;
-        color: var(--md-sys-color-on-surface-variant);
-        margin-bottom: 20px;
-      }
-      .controls {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 16px;
-        margin-bottom: 20px;
-      }
-      .control-btn {
-        background: transparent;
-        border: none;
-        color: var(--md-sys-color-on-surface);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.2s;
-        border-radius: 50%;
-      }
-      .control-btn:hover {
-        background: var(--md-sys-color-surface-variant);
-      }
-      .control-btn.small {
-        width: 40px;
-        height: 40px;
-      }
-      .control-btn.primary {
-        width: 56px;
-        height: 56px;
-        background: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-        box-shadow: 0 4px 12px rgba(124, 77, 255, 0.3);
-      }
-      .control-btn.primary:hover {
-        transform: scale(1.05);
-        box-shadow: 0 6px 16px rgba(124, 77, 255, 0.4);
-      }
-      .speed-controls {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
-      }
-      .speed-btn {
-        padding: 6px 12px;
-        background: var(--md-sys-color-surface-container);
-        color: var(--md-sys-color-on-surface);
-        border: none;
-        border-radius: 8px;
-        font-size: 13px;
-        cursor: pointer;
-        transition: all 0.2s;
-      }
-      .speed-btn.active {
-        background: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-      }
-      .speed-btn:hover {
-        background: var(--md-sys-color-surface-container-high);
-      }
-      .speed-btn.active:hover {
-        background: var(--md-sys-color-primary);
-      }
-      .chapters-section {
-        padding: 20px;
-        background: var(--md-sys-color-surface);
-        max-height: 400px;
-        overflow-y: auto;
-      }
-      .section-title {
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--md-sys-color-on-surface);
-        margin-bottom: 16px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .chapter-list {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-      .chapter-item {
-        display: flex;
-        align-items: center;
-        padding: 12px;
-        background: var(--md-sys-color-surface);
-        border-radius: 12px;
-        cursor: pointer;
-        transition: all 0.2s;
-        border: 1px solid transparent;
-      }
-      .chapter-item:hover {
-        background: var(--md-sys-color-surface-container);
-      }
-      .chapter-item.active {
-        background: var(--md-sys-color-primary-container);
-        border-color: var(--md-sys-color-primary);
-      }
-      .chapter-item.played {
-        opacity: 0.7;
-      }
-      .chapter-number {
-        width: 32px;
-        height: 32px;
-        border-radius: 8px;
-        background: var(--md-sys-color-surface-variant);
-        color: var(--md-sys-color-on-surface-variant);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 14px;
-        font-weight: 600;
-        margin-right: 12px;
-      }
-      .chapter-item.active .chapter-number {
-        background: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-      }
-      .chapter-info {
-        flex: 1;
-      }
-      .chapter-title {
-        font-size: 15px;
-        font-weight: 500;
-        color: var(--md-sys-color-on-surface);
-        margin-bottom: 2px;
-      }
-      .chapter-description {
-        font-size: 13px;
-        color: var(--md-sys-color-on-surface-variant);
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
-      .chapter-time {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        gap: 2px;
-      }
-      .chapter-timestamp {
-        font-size: 13px;
-        color: var(--md-sys-color-primary);
-        font-weight: 500;
-      }
-      .chapter-duration {
-        font-size: 11px;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      .icon {
-        width: 24px;
-        height: 24px;
-        fill: currentColor;
-      }
-      .icon.large {
-        width: 32px;
-        height: 32px;
-      }
-      /* Custom scrollbar */
-      .chapters-section::-webkit-scrollbar {
-        width: 6px;
-      }
-      .chapters-section::-webkit-scrollbar-track {
-        background: var(--md-sys-color-surface-container);
-        border-radius: 3px;
-      }
-      .chapters-section::-webkit-scrollbar-thumb {
-        background: var(--md-sys-color-outline);
-        border-radius: 3px;
-      }
-      .chapters-section::-webkit-scrollbar-thumb:hover {
-        background: var(--md-sys-color-primary);
-      }
-      /* Playing animation */
-      @keyframes pulse {
-        0%,
-        100% {
-          transform: scaleY(0.3);
-        }
-        50% {
-          transform: scaleY(1);
-        }
-      }
-      .playing-indicator {
-        display: none;
-        gap: 2px;
-        height: 16px;
-        align-items: flex-end;
-      }
-      .chapter-item.active .playing-indicator {
-        display: flex;
-      }
-      .playing-bar {
-        width: 3px;
-        height: 100%;
-        background: var(--md-sys-color-primary);
-        animation: pulse 1s ease-in-out infinite;
-      }
-      .playing-bar:nth-child(2) {
-        animation-delay: 0.2s;
-      }
-      .playing-bar:nth-child(3) {
-        animation-delay: 0.4s;
-      }
-      /* Theme switcher */
-      .theme-fab {
-        position: fixed;
-        bottom: 24px;
-        right: 24px;
-        width: 56px;
-        height: 56px;
-        border-radius: 16px;
-        background: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-        border: none;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
-        transition: all 0.3s;
-      }
-      .theme-fab:hover {
-        transform: scale(1.05);
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-      }
-    </style>
-  </head>
-  <body>
-    <div class="container">
-      <div class="player-section">
-        <div class="podcast-header">
-          <div class="podcast-cover">
-            <div class="cover-pattern"></div>
-            <span>🎙️</span>
-          </div>
-          <div class="podcast-info">
-            <div class="podcast-title">Tech Talks Daily</div>
-            <div class="podcast-author">by Sarah Chen</div>
-            <div class="episode-title">Episode 42: The Future of AI</div>
-          </div>
-        </div>
-        <div class="waveform-container">
-          <div class="waveform" id="waveform"></div>
-        </div>
-        <div class="progress-time">
-          <span id="currentTime">15:32</span>
-          <span id="totalTime">45:00</span>
-        </div>
-        <div class="controls">
-          <button class="control-btn small" onclick="skipBack()">
-            <svg class="icon" viewBox="0 0 24 24">
-              <path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" />
-            </svg>
-          </button>
-          <button class="control-btn small" onclick="rewind()">
-            <svg class="icon" viewBox="0 0 24 24">
-              <text
-                x="50%"
-                y="50%"
-                text-anchor="middle"
-                dy=".3em"
-                font-size="12"
-                font-weight="bold"
-              >
-                -15
-              </text>
-            </svg>
-          </button>
-          <button
-            class="control-btn primary"
-            onclick="togglePlay()"
-            id="playBtn"
-          >
-            <svg class="icon large" viewBox="0 0 24 24">
-              <path d="M8 5v14l11-7z" />
-            </svg>
-          </button>
-          <button class="control-btn small" onclick="forward()">
-            <svg class="icon" viewBox="0 0 24 24">
-              <text
-                x="50%"
-                y="50%"
-                text-anchor="middle"
-                dy=".3em"
-                font-size="12"
-                font-weight="bold"
-              >
-                +30
-              </text>
-            </svg>
-          </button>
-          <button class="control-btn small" onclick="skipForward()">
-            <svg class="icon" viewBox="0 0 24 24">
-              <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
-            </svg>
-          </button>
-        </div>
-        <div class="speed-controls">
-          <button class="speed-btn" onclick="setSpeed(0.75)">0.75x</button>
-          <button class="speed-btn active" onclick="setSpeed(1)">1x</button>
-          <button class="speed-btn" onclick="setSpeed(1.25)">1.25x</button>
-          <button class="speed-btn" onclick="setSpeed(1.5)">1.5x</button>
-          <button class="speed-btn" onclick="setSpeed(2)">2x</button>
-        </div>
-      </div>
-      <div class="chapters-section">
-        <div class="section-title">
-          <svg class="icon" viewBox="0 0 24 24">
-            <path
-              d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"
-            />
-          </svg>
-          Chapters
-        </div>
-        <div class="chapter-list">
-          <div class="chapter-item played" onclick="playChapter(0)">
-            <div class="chapter-number">1</div>
-            <div class="chapter-info">
-              <div class="chapter-title">Introduction</div>
-              <div class="chapter-description">
-                Welcome to today's episode about AI
-              </div>
-            </div>
-            <div class="chapter-time">
-              <span class="chapter-timestamp">00:00</span>
-              <span class="chapter-duration">2:15</span>
-            </div>
-          </div>
-          <div class="chapter-item played" onclick="playChapter(1)">
-            <div class="chapter-number">2</div>
-            <div class="chapter-info">
-              <div class="chapter-title">Guest Introduction</div>
-              <div class="chapter-description">
-                Meet Dr. Alex Johnson from OpenAI
-              </div>
-            </div>
-            <div class="chapter-time">
-              <span class="chapter-timestamp">02:15</span>
-              <span class="chapter-duration">3:45</span>
-            </div>
-          </div>
-          <div class="chapter-item played" onclick="playChapter(2)">
-            <div class="chapter-number">3</div>
-            <div class="chapter-info">
-              <div class="chapter-title">Current State of AI</div>
-              <div class="chapter-description">
-                Overview of where we are today with artificial intelligence
-              </div>
-            </div>
-            <div class="chapter-time">
-              <span class="chapter-timestamp">06:00</span>
-              <span class="chapter-duration">8:30</span>
-            </div>
-          </div>
-          <div class="chapter-item active" onclick="playChapter(3)">
-            <div class="chapter-number">
-              <div class="playing-indicator">
-                <div class="playing-bar"></div>
-                <div class="playing-bar"></div>
-                <div class="playing-bar"></div>
-              </div>
-            </div>
-            <div class="chapter-info">
-              <div class="chapter-title">Large Language Models</div>
-              <div class="chapter-description">
-                Deep dive into GPT and similar models
-              </div>
-            </div>
-            <div class="chapter-time">
-              <span class="chapter-timestamp">14:30</span>
-              <span class="chapter-duration">10:15</span>
-            </div>
-          </div>
-          <div class="chapter-item" onclick="playChapter(4)">
-            <div class="chapter-number">5</div>
-            <div class="chapter-info">
-              <div class="chapter-title">Ethical Considerations</div>
-              <div class="chapter-description">
-                Discussing the importance of responsible AI development
-              </div>
-            </div>
-            <div class="chapter-time">
-              <span class="chapter-timestamp">24:45</span>
-              <span class="chapter-duration">7:20</span>
-            </div>
-          </div>
-          <div class="chapter-item" onclick="playChapter(5)">
-            <div class="chapter-number">6</div>
-            <div class="chapter-info">
-              <div class="chapter-title">Future Predictions</div>
-              <div class="chapter-description">
-                What might the next 5 years look like?
-              </div>
-            </div>
-            <div class="chapter-time">
-              <span class="chapter-timestamp">32:05</span>
-              <span class="chapter-duration">6:40</span>
-            </div>
-          </div>
-          <div class="chapter-item" onclick="playChapter(6)">
-            <div class="chapter-number">7</div>
-            <div class="chapter-info">
-              <div class="chapter-title">Q&A Session</div>
-              <div class="chapter-description">
-                Answering listener questions
-              </div>
-            </div>
-            <div class="chapter-time">
-              <span class="chapter-timestamp">38:45</span>
-              <span class="chapter-duration">4:30</span>
-            </div>
-          </div>
-          <div class="chapter-item" onclick="playChapter(7)">
-            <div class="chapter-number">8</div>
-            <div class="chapter-info">
-              <div class="chapter-title">Closing Thoughts</div>
-              <div class="chapter-description">
-                Wrapping up and next episode preview
-              </div>
-            </div>
-            <div class="chapter-time">
-              <span class="chapter-timestamp">43:15</span>
-              <span class="chapter-duration">1:45</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <button class="theme-fab" onclick="changeTheme()">
-      <svg class="icon" viewBox="0 0 24 24">
-        <path
-          d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
-        />
-      </svg>
-    </button>
-    <script>
-      // Generate waveform bars
-      const waveform = document.getElementById("waveform");
-      for (let i = 0; i < 50; i++) {
-        const bar = document.createElement("div");
-        bar.className = "wave-bar";
-        bar.style.height = Math.random() * 80 + 20 + "%";
-        // Simulate played progress
-        if (i < 17) {
-          bar.classList.add("played");
-        } else if (i === 17) {
-          bar.classList.add("active");
-        }
-        waveform.appendChild(bar);
-      }
-      let isPlaying = false;
-      let currentSpeed = 1;
-      let currentChapter = 3;
-      function togglePlay() {
-        isPlaying = !isPlaying;
-        const playBtn = document.getElementById("playBtn");
-        if (isPlaying) {
-          playBtn.innerHTML =
-            '<svg class="icon large" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>';
-        } else {
-          playBtn.innerHTML =
-            '<svg class="icon large" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>';
-        }
-      }
-      function setSpeed(speed) {
-        currentSpeed = speed;
-        document.querySelectorAll(".speed-btn").forEach((btn) => {
-          btn.classList.remove("active");
-        });
-        event.target.classList.add("active");
-      }
-      function playChapter(index) {
-        currentChapter = index;
-        document.querySelectorAll(".chapter-item").forEach((item, i) => {
-          item.classList.remove("active");
-          if (i < index) {
-            item.classList.add("played");
-          } else {
-            item.classList.remove("played");
-          }
-        });
-        document
-          .querySelectorAll(".chapter-item")
-          [index].classList.add("active");
-        // Update waveform
-        updateWaveform(index);
-      }
-      function updateWaveform(chapterIndex) {
-        const bars = document.querySelectorAll(".wave-bar");
-        const progress = (chapterIndex + 0.5) / 8; // 8 chapters total
-        const activeBar = Math.floor(progress * bars.length);
-        bars.forEach((bar, i) => {
-          bar.classList.remove("played", "active");
-          if (i < activeBar) {
-            bar.classList.add("played");
-          } else if (i === activeBar) {
-            bar.classList.add("active");
-          }
-        });
-      }
-      function skipBack() {
-        if (currentChapter > 0) {
-          playChapter(currentChapter - 1);
-        }
-      }
-      function skipForward() {
-        if (currentChapter < 7) {
-          playChapter(currentChapter + 1);
-        }
-      }
-      function rewind() {
-        // Simulate 15 second rewind
-        console.log("Rewind 15 seconds");
-      }
-      function forward() {
-        // Simulate 30 second forward
-        console.log("Forward 30 seconds");
-      }
-      // Theme variations
-      const themes = [
-        {
-          name: "Purple Dream",
-          primary: "#7c4dff",
-          secondary: "#625b71",
-          tertiary: "#7d5260",
-          primaryContainer: "#e1d5ff",
-          secondaryContainer: "#e8def8",
-          tertiaryContainer: "#ffd8e4",
-        },
-        {
-          name: "Ocean Breeze",
-          primary: "#0061a4",
-          secondary: "#535f70",
-          tertiary: "#6f5575",
-          primaryContainer: "#d1e4ff",
-          secondaryContainer: "#d9e3f0",
-          tertiaryContainer: "#f8d8ff",
-        },
-        {
-          name: "Forest",
-          primary: "#006e1c",
-          secondary: "#52634f",
-          tertiary: "#386666",
-          primaryContainer: "#b6f397",
-          secondaryContainer: "#d6e8cd",
-          tertiaryContainer: "#bbebeb",
-        },
-        {
-          name: "Sunset",
-          primary: "#bc004b",
-          secondary: "#775653",
-          tertiary: "#775a00",
-          primaryContainer: "#ffd9dc",
-          secondaryContainer: "#ffdad7",
-          tertiaryContainer: "#ffdeaa",
-        },
-      ];
-      let currentTheme = 0;
-      function changeTheme() {
-        currentTheme = (currentTheme + 1) % themes.length;
-        const theme = themes[currentTheme];
-        const root = document.documentElement;
-        root.style.setProperty("--md-sys-color-primary", theme.primary);
-        root.style.setProperty("--md-sys-color-secondary", theme.secondary);
-        root.style.setProperty("--md-sys-color-tertiary", theme.tertiary);
-        root.style.setProperty(
-          "--md-sys-color-primary-container",
-          theme.primaryContainer,
-        );
-        root.style.setProperty(
-          "--md-sys-color-secondary-container",
-          theme.secondaryContainer,
-        );
-        root.style.setProperty(
-          "--md-sys-color-tertiary-container",
-          theme.tertiaryContainer,
-        );
-        // Animate the change
-        root.style.transition = "all 0.3s ease";
-      }
-      // Simulate time updates
-      let seconds = 932; // 15:32
-      setInterval(() => {
-        if (isPlaying) {
-          seconds += currentSpeed;
-          const mins = Math.floor(seconds / 60);
-          const secs = Math.floor(seconds % 60);
-          document.getElementById("currentTime").textContent =
-            `${mins}:${secs.toString().padStart(2, "0")}`;
-        }
-      }, 1000);
-    </script>
-  </body>
-</html>