wehub-resource-sync
969 lines
63 KiB
HTML
969 lines
63 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title id="page-title">Component - Claude Code Templates</title>
|
|
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YWW6FV2SGN"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-YWW6FV2SGN');
|
|
</script>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/x-icon" href="static/favicon/favicon.ico">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon/favicon-16x16.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="static/favicon/favicon-32x32.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="static/favicon/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="static/favicon/android-chrome-192x192.png">
|
|
<link rel="icon" type="image/png" sizes="512x512" href="static/favicon/android-chrome-512x512.png">
|
|
|
|
|
|
<!-- Meta tags -->
|
|
<meta name="description" content="Explore Claude Code templates, agents, commands, and automation tools for enhanced development workflows.">
|
|
<meta name="keywords" content="Claude Code, AI development, automation, templates, agents, commands">
|
|
<link rel="canonical" href="" id="canonical-url">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="Component - Claude Code Templates" id="og-title">
|
|
<meta property="og:description" content="Explore Claude Code templates, agents, commands, and automation tools for enhanced development workflows." id="og-description">
|
|
<meta property="og:image" content="https://aitmpl.com/images/social-preview.png">
|
|
<meta property="og:url" content="" id="og-url">
|
|
<meta property="og:type" content="website">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Component - Claude Code Templates" id="twitter-title">
|
|
<meta name="twitter:description" content="Explore Claude Code templates, agents, commands, and automation tools for enhanced development workflows." id="twitter-description">
|
|
<meta name="twitter:image" content="https://aitmpl.com/images/social-preview.png">
|
|
<meta name="twitter:url" content="" id="twitter-url">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" href="/css/component-page.css">
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Hotjar Tracking Code for https://aitmpl.com -->
|
|
<script>
|
|
(function(h,o,t,j,a,r){
|
|
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
|
|
h._hjSettings={hjid:6519181,hjsv:6};
|
|
a=o.getElementsByTagName('head')[0];
|
|
r=o.createElement('script');r.async=1;
|
|
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
|
|
a.appendChild(r);
|
|
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="terminal-header">
|
|
<div class="ascii-title">
|
|
<pre class="ascii-art"> ██████╗██╗ █████╗ ██╗ ██╗██████╗ ███████╗ ██████╗ ██████╗ ██████╗ ███████╗ ████████╗███████╗███╗ ███╗██████╗ ██╗ █████╗ ████████╗███████╗███████╗
|
|
██╔════╝██║ ██╔══██╗██║ ██║██╔══██╗██╔════╝ ██╔════╝██╔═══██╗██╔══██╗██╔════╝ ╚══██╔══╝██╔════╝████╗ ████║██╔══██╗██║ ██╔══██╗╚══██╔══╝██╔════╝██╔════╝
|
|
██║ ██║ ███████║██║ ██║██║ ██║█████╗ ██║ ██║ ██║██║ ██║█████╗ ██║ █████╗ ██╔████╔██║██████╔╝██║ ███████║ ██║ █████╗ ███████╗
|
|
██║ ██║ ██╔══██║██║ ██║██║ ██║██╔══╝ ██║ ██║ ██║██║ ██║██╔══╝ ██║ ██╔══╝ ██║╚██╔╝██║██╔═══╝ ██║ ██╔══██║ ██║ ██╔══╝ ╚════██║
|
|
╚██████╗███████╗██║ ██║╚██████╔╝██████╔╝███████╗ ╚██████╗╚██████╔╝██████╔╝███████╗ ██║ ███████╗██║ ╚═╝ ██║██║ ███████╗██║ ██║ ██║ ███████╗███████║
|
|
╚═════╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝ ╚═╝ ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚══════╝╚══════╝</pre>
|
|
</div>
|
|
<div class="terminal-subtitle">
|
|
<span class="status-dot"></span>
|
|
Ready-to-use configurations for your <strong>Claude Code</strong> projects
|
|
</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="/index.html" class="header-btn anthropic-btn" title="Learn about Anthropic's Claude Code">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
</svg>
|
|
Home
|
|
</a>
|
|
<a href="/blog/index.html" class="header-btn">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
|
|
</svg>
|
|
Blog
|
|
</a>
|
|
<a href="https://github.com/davila7/claude-code-templates" target="_blank" class="header-btn">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="component-page">
|
|
<!-- Back Navigation -->
|
|
<div class="back-navigation">
|
|
<div class="container">
|
|
<a href="/index.html" class="back-link">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z"/>
|
|
</svg>
|
|
Back to Components
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div class="loading-state" id="loadingState">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-text">Loading component...</div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div class="error-state" id="errorState" style="display: none;">
|
|
<div class="error-icon">❌</div>
|
|
<h2>Component Not Found</h2>
|
|
<p>The requested component could not be found. Please check the URL and try again.</p>
|
|
<a href="/index.html" class="btn-primary">Back to Components</a>
|
|
</div>
|
|
|
|
<!-- Component Content -->
|
|
<div class="component-content" id="componentContent" style="display: none;">
|
|
<div class="container">
|
|
<!-- Component Header -->
|
|
<div class="component-header">
|
|
<div class="header-actions">
|
|
<a id="githubLink" href="#" target="_blank" class="github-btn">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.30.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.30 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
View on GitHub
|
|
</a>
|
|
<div class="share-dropdown" id="componentShareDropdown">
|
|
<button class="share-btn" onclick="toggleComponentShareDropdown()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.6 20.92,19A2.84,2.84 0 0,0 18,16.08Z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="share-options" id="componentShareOptions">
|
|
<button class="share-option-btn" onclick="shareComponentOnTwitter()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
|
</svg>
|
|
Share on X
|
|
</button>
|
|
<button class="share-option-btn" onclick="shareComponentOnThreads()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.781 3.631 2.695 6.54 2.717 1.623-.02 3.094-.37 4.37-1.04.558-.29 1.029-.63 1.414-1.017.33-.33.602-.69.82-1.084.218-.395.381-.84.488-1.336.107-.495.16-1.044.16-1.644 0-.595-.053-1.144-.16-1.644-.107-.496-.27-.941-.488-1.336a3.79 3.79 0 00-.82-1.084 3.790 3.790 0 00-1.414-1.017c-1.276-.67-2.747-1.02-4.37-1.04h-.007c-1.623.02-3.094.37-4.37 1.04-.558.29-1.029.63-1.414 1.017-.33.33-.602.69-.82 1.084-.218.395-.381.84-.488 1.336-.107.5-.16 1.049-.16 1.644 0 .595.053 1.144.16 1.644.107.496.27.941.488 1.336.218.395.49.754.82 1.084.385.387.856.727 1.414 1.017 1.276.67 2.747 1.02 4.37 1.04z"/>
|
|
</svg>
|
|
Share on Threads
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="component-title-section">
|
|
<div class="component-icon-large" id="componentIcon">🤖</div>
|
|
<div class="component-title-info">
|
|
<div class="component-title-with-downloads">
|
|
<h1 id="componentTitle">Component Name</h1>
|
|
<div class="component-download-badge" id="componentDownloadBadge" style="display: none;">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/>
|
|
</svg>
|
|
<span id="downloadCount">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="component-meta">
|
|
<div class="component-type-badge-title" id="componentTypeBadge">AGENT</div>
|
|
<span class="component-category-title" id="componentCategory">Development</span>
|
|
<div class="component-validation-badge" id="componentValidationBadge" style="display: none;">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
|
|
</svg>
|
|
<span id="validationScore">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add to Stack Button - Positioned in bottom-right of title section -->
|
|
<button class="title-section-add-to-cart-btn" id="addToCartBtn">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M19,7H18V6A2,2 0 0,0 16,4H8A2,2 0 0,0 6,6V7H5A1,1 0 0,0 4,8A1,1 0 0,0 5,9H6V19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V9H19A1,1 0 0,0 20,8A1,1 0 0,0 19,7M8,6H16V7H8V6M16,19H8V9H16V19Z"/>
|
|
</svg>
|
|
<span>Add to Stack</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Navigation (GitHub PR style) -->
|
|
<div class="component-tabs" id="componentTabs">
|
|
<button class="tab-btn active" data-tab="overview">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
|
|
</svg>
|
|
Overview
|
|
</button>
|
|
<button class="tab-btn" data-tab="code">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6Z"/>
|
|
</svg>
|
|
Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content-wrapper">
|
|
|
|
<!-- ===== OVERVIEW TAB (default - like PR Conversation) ===== -->
|
|
<div class="tab-pane active" id="tab-overview">
|
|
<div class="tab-content-grid">
|
|
<!-- Main Content (left) -->
|
|
<div class="tab-main">
|
|
<!-- Description -->
|
|
<section class="content-section">
|
|
<h2>Overview</h2>
|
|
<div class="component-description-content">
|
|
<p id="componentDescription">Component description will be loaded here.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quality Validation Section -->
|
|
<section class="content-section validation-section" id="validationSection" style="display: none;">
|
|
<h2>Quality Validation</h2>
|
|
<div class="validation-compact-content">
|
|
<div class="validation-summary">
|
|
<div class="validation-score-display">
|
|
<div class="score-circle" id="scoreCircle">
|
|
<span id="scoreValue">--</span>
|
|
</div>
|
|
<div class="score-info">
|
|
<span class="score-label">Quality Score</span>
|
|
<span class="score-status" id="scoreStatus">Validated</span>
|
|
</div>
|
|
</div>
|
|
<div class="validation-stats-inline">
|
|
<div class="stat-inline">
|
|
<span class="stat-icon">❌</span>
|
|
<span class="stat-label">Errors:</span>
|
|
<span class="stat-number" id="inlineErrors">0</span>
|
|
</div>
|
|
<div class="stat-inline">
|
|
<span class="stat-icon">⚠️</span>
|
|
<span class="stat-label">Warnings:</span>
|
|
<span class="stat-number" id="inlineWarnings">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="validation-checks" id="validationChecks"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Comments Section (Giscus - GitHub Discussions) -->
|
|
<section class="content-section comments-section" id="commentsSection">
|
|
<h2>Comments</h2>
|
|
<p class="comments-description">Sign in with GitHub to leave a comment. Discussions are stored in the project's <a href="https://github.com/davila7/claude-code-templates/discussions" target="_blank">GitHub Discussions</a>.</p>
|
|
<div id="giscusContainer"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Sidebar (right - like PR sidebar) -->
|
|
<aside class="tab-sidebar">
|
|
<!-- Quick Install -->
|
|
<div class="sidebar-card">
|
|
<h3 class="sidebar-card-title">Quick Install</h3>
|
|
<div class="quick-install-block">
|
|
<code id="quickInstallCommand">npx claude-code-templates@latest --agent=example --yes</code>
|
|
<button class="quick-copy-btn" onclick="copyToClipboard(document.getElementById('quickInstallCommand').textContent)">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
|
|
</svg>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metadata -->
|
|
<div class="sidebar-card" id="metadataSection" style="display: none;">
|
|
<h3 class="sidebar-card-title">Metadata</h3>
|
|
<div class="sidebar-metadata-list">
|
|
<div class="sidebar-meta-row">
|
|
<span class="sidebar-meta-label">Version</span>
|
|
<span class="sidebar-meta-value" id="metadataVersion">--</span>
|
|
</div>
|
|
<div class="sidebar-meta-row">
|
|
<span class="sidebar-meta-label">Author</span>
|
|
<span class="sidebar-meta-value" id="metadataAuthor">--</span>
|
|
</div>
|
|
<div class="sidebar-meta-row">
|
|
<span class="sidebar-meta-label">License</span>
|
|
<span class="sidebar-meta-value" id="metadataLicense">--</span>
|
|
</div>
|
|
<div class="sidebar-meta-row">
|
|
<span class="sidebar-meta-label">Repository</span>
|
|
<a class="metadata-link" id="metadataRepository" href="#" target="_blank" style="display: none;">View</a>
|
|
<span class="sidebar-meta-value" id="metadataRepositoryNone" style="display: none;">--</span>
|
|
</div>
|
|
<div class="sidebar-meta-keywords-row">
|
|
<span class="sidebar-meta-label">Keywords</span>
|
|
<div class="metadata-keywords" id="metadataKeywords"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== CODE TAB (like PR Files Changed) ===== -->
|
|
<div class="tab-pane" id="tab-code">
|
|
|
|
<!-- ===== INSTALLATION TAB ===== -->
|
|
<div class="tab-pane" id="tab-installation">
|
|
<section class="content-section" id="installationSection">
|
|
<h2>Installation</h2>
|
|
|
|
<!-- Basic Installation -->
|
|
<div class="installation-method accordion-item">
|
|
<button class="accordion-header active" onclick="toggleAccordion(this)">
|
|
<span class="accordion-title">📦 Basic Installation</span>
|
|
<svg class="accordion-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M7,10L12,15L17,10H7Z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="accordion-content" style="display: block;">
|
|
<p class="method-description">Install this component locally in your project. Works with your existing Claude Code setup.</p>
|
|
<div class="command-block">
|
|
<div class="command-header">
|
|
<span class="command-label">Terminal</span>
|
|
</div>
|
|
<div class="command-content">
|
|
<code id="basicInstallCommand">npx claude-code-templates@latest --agent=example --yes</code>
|
|
<button class="copy-btn" onclick="copyToClipboard(document.getElementById('basicInstallCommand').textContent)">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global Agent Section (for agents only) -->
|
|
<div class="installation-method accordion-item" id="globalAgentSection" style="display: none;">
|
|
<button class="accordion-header" onclick="toggleAccordion(this)">
|
|
<span class="accordion-title">🌍 Global Agent (Claude Code SDK)</span>
|
|
<svg class="accordion-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M7,10L12,15L17,10H7Z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="accordion-content">
|
|
<p class="method-description">Create a global AI agent accessible from anywhere with zero configuration. Perfect for automation and CI/CD workflows.</p>
|
|
<div class="command-block">
|
|
<div class="command-header">
|
|
<span class="command-label">Terminal</span>
|
|
</div>
|
|
<div class="command-content">
|
|
<code id="globalAgentCommand">npx claude-code-templates@latest --create-agent example</code>
|
|
<button class="copy-btn" onclick="copyToClipboard(document.getElementById('globalAgentCommand').textContent)">Copy</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="usage-info">
|
|
<h4>After installation, use from anywhere:</h4>
|
|
<div class="command-block small">
|
|
<div class="command-content">
|
|
<code id="globalUsageCommand">example "your prompt here"</code>
|
|
<button class="copy-btn" onclick="copyToClipboard(document.getElementById('globalUsageCommand').textContent)">Copy</button>
|
|
</div>
|
|
</div>
|
|
<div class="features-list">
|
|
<div class="feature">✅ Works in scripts, CI/CD, npm tasks</div>
|
|
<div class="feature">✅ Auto-detects project context</div>
|
|
<div class="feature">✅ Powered by Claude Code SDK</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cloud Sandbox Execution Section (for agents only) -->
|
|
<div class="installation-method accordion-item" id="cloudSandboxSection" style="display: none;">
|
|
<button class="accordion-header" onclick="toggleAccordion(this)">
|
|
<span class="accordion-title">☁️ Run in Cloud Sandbox (Isolated Execution)</span>
|
|
<svg class="accordion-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M7,10L12,15L17,10H7Z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="accordion-content">
|
|
<p class="method-description">Execute Claude Code with this component in an isolated cloud environment. Perfect for testing complex projects without affecting your local system. Choose from multiple providers based on your needs.</p>
|
|
|
|
<!-- Provider Tabs -->
|
|
<div class="sandbox-provider-tabs">
|
|
<button class="sandbox-tab active" onclick="switchSandboxProvider('e2b')">
|
|
<span class="tab-icon">🚀</span>
|
|
<span class="tab-name">E2B</span>
|
|
<span class="tab-badge">Full Stack</span>
|
|
</button>
|
|
<button class="sandbox-tab" onclick="switchSandboxProvider('cloudflare')">
|
|
<span class="tab-icon">⚡</span>
|
|
<span class="tab-name">Cloudflare</span>
|
|
<span class="tab-badge">Serverless</span>
|
|
</button>
|
|
<button class="sandbox-tab" onclick="switchSandboxProvider('docker')">
|
|
<span class="tab-icon">🐳</span>
|
|
<span class="tab-name">Docker</span>
|
|
<span class="tab-badge">Local</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- E2B Provider Content -->
|
|
<div class="sandbox-provider-content" id="e2b-content" style="display: block;">
|
|
<div class="provider-description">
|
|
<h4>E2B Cloud Sandbox</h4>
|
|
<p>Full-featured cloud development environment with complete isolation and all development tools pre-installed.</p>
|
|
</div>
|
|
|
|
<div class="setup-requirements">
|
|
<h4>🔑 Setup API Keys</h4>
|
|
<p>Add to your .env file:</p>
|
|
<div class="env-block">
|
|
<code>ANTHROPIC_API_KEY=your_anthropic_key_here</code>
|
|
<div class="env-comment"># Required for Claude Code access</div>
|
|
<code>E2B_API_KEY=your_e2b_key_here</code>
|
|
</div>
|
|
<div class="api-key-links">
|
|
<a href="https://console.anthropic.com" target="_blank" class="api-key-link">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
|
|
</svg>
|
|
Get Anthropic API Key
|
|
</a>
|
|
<a href="https://e2b.dev" target="_blank" class="api-key-link">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
|
|
</svg>
|
|
Get E2B API Key
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="command-block">
|
|
<div class="command-header">
|
|
<span class="command-label">Terminal</span>
|
|
</div>
|
|
<div class="command-content">
|
|
<code id="e2bSandboxCommand">npx claude-code-templates@latest --sandbox e2b --agent=example --prompt "your development task"</code>
|
|
<button class="copy-btn" onclick="copyToClipboard(document.getElementById('e2bSandboxCommand').textContent)">Copy</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sandbox-features-grid">
|
|
<div class="feature-item">
|
|
<span class="feature-icon">☁️</span>
|
|
<span class="feature-text">Isolated cloud environment</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">🔧</span>
|
|
<span class="feature-text">Full development tools</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">📊</span>
|
|
<span class="feature-text">Real-time execution output</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">🔒</span>
|
|
<span class="feature-text">Secure & sandboxed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cloudflare Provider Content -->
|
|
<div class="sandbox-provider-content" id="cloudflare-content" style="display: none;">
|
|
<div class="provider-description">
|
|
<h4>Cloudflare Workers Sandbox</h4>
|
|
<p>Serverless execution environment perfect for lightweight tasks, API development, and edge computing scenarios.</p>
|
|
</div>
|
|
|
|
<div class="setup-requirements">
|
|
<h4>🔑 Setup API Key</h4>
|
|
<p>Add to your .env file:</p>
|
|
<div class="env-block">
|
|
<code>ANTHROPIC_API_KEY=your_anthropic_key_here</code>
|
|
<div class="env-comment"># Required for Claude Code access</div>
|
|
</div>
|
|
<div class="api-key-links">
|
|
<a href="https://console.anthropic.com" target="_blank" class="api-key-link">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
|
|
</svg>
|
|
Get Anthropic API Key
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="command-block">
|
|
<div class="command-header">
|
|
<span class="command-label">Terminal</span>
|
|
</div>
|
|
<div class="command-content">
|
|
<code id="cloudflareSandboxCommand">npx claude-code-templates@latest --sandbox cloudflare --agent=example --prompt "your development task"</code>
|
|
<button class="copy-btn" onclick="copyToClipboard(document.getElementById('cloudflareSandboxCommand').textContent)">Copy</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sandbox-features-grid">
|
|
<div class="feature-item">
|
|
<span class="feature-icon">⚡</span>
|
|
<span class="feature-text">Ultra-fast serverless execution</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">🌍</span>
|
|
<span class="feature-text">Global edge network</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">💰</span>
|
|
<span class="feature-text">Cost-effective for small tasks</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">🚀</span>
|
|
<span class="feature-text">Instant cold starts</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Docker Provider Content -->
|
|
<div class="sandbox-provider-content" id="docker-content" style="display: none;">
|
|
<div class="provider-description">
|
|
<h4>Docker Local Sandbox</h4>
|
|
<p>Run Claude Code in a local Docker container. Perfect for offline development, custom environments, and maximum control over the execution environment.</p>
|
|
</div>
|
|
|
|
<div class="setup-requirements">
|
|
<h4>🔧 Prerequisites</h4>
|
|
<div class="prerequisites-list">
|
|
<div class="prerequisite-item">
|
|
<span class="prerequisite-icon">🐳</span>
|
|
<span>Docker Desktop installed and running</span>
|
|
</div>
|
|
<div class="prerequisite-item">
|
|
<span class="prerequisite-icon">🔑</span>
|
|
<span>Anthropic API key configured</span>
|
|
</div>
|
|
</div>
|
|
<div class="api-key-links">
|
|
<a href="https://www.docker.com/products/docker-desktop" target="_blank" class="api-key-link">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
|
|
</svg>
|
|
Download Docker Desktop
|
|
</a>
|
|
<a href="https://console.anthropic.com" target="_blank" class="api-key-link">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
|
|
</svg>
|
|
Get Anthropic API Key
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="command-block">
|
|
<div class="command-header">
|
|
<span class="command-label">Terminal</span>
|
|
</div>
|
|
<div class="command-content">
|
|
<code id="dockerSandboxCommand">npx claude-code-templates@latest --sandbox docker --agent=example --prompt "your development task"</code>
|
|
<button class="copy-btn" onclick="copyToClipboard(document.getElementById('dockerSandboxCommand').textContent)">Copy</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sandbox-features-grid">
|
|
<div class="feature-item">
|
|
<span class="feature-icon">🏠</span>
|
|
<span class="feature-text">Fully local execution</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">🔒</span>
|
|
<span class="feature-text">Complete isolation</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">⚙️</span>
|
|
<span class="feature-text">Custom container images</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="feature-icon">💾</span>
|
|
<span class="feature-text">Local data & file access</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Provider Comparison -->
|
|
<div class="provider-comparison">
|
|
<h4>📊 Provider Comparison</h4>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Feature</th>
|
|
<th>E2B</th>
|
|
<th>Cloudflare</th>
|
|
<th>Docker</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Execution Location</td>
|
|
<td>☁️ Cloud</td>
|
|
<td>🌍 Edge</td>
|
|
<td>🏠 Local</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Setup Complexity</td>
|
|
<td>Easy</td>
|
|
<td>Easy</td>
|
|
<td>Medium</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Best For</td>
|
|
<td>Full stack projects</td>
|
|
<td>Serverless & APIs</td>
|
|
<td>Local dev & custom envs</td>
|
|
</tr>
|
|
<tr>
|
|
<td>API Keys Needed</td>
|
|
<td>Anthropic + E2B</td>
|
|
<td>Anthropic only</td>
|
|
<td>Anthropic only</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div><!-- end tab-installation -->
|
|
|
|
<!-- ===== CODE TAB (like PR Files Changed) ===== -->
|
|
<div class="tab-pane" id="tab-code">
|
|
<section class="component-code-section">
|
|
<h2>Component Code</h2>
|
|
<div class="code-editor">
|
|
<div class="code-header">
|
|
<span class="code-language" id="codeLanguage">markdown</span>
|
|
<button class="copy-code-btn" onclick="copyToClipboard(document.querySelector('#codeContent code').textContent)">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
|
|
</svg>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
<div class="code-body">
|
|
<div class="code-line-numbers" id="lineNumbers">
|
|
<span>1</span>
|
|
</div>
|
|
<div class="code-content" id="codeContent">
|
|
<pre><code class="language-markdown">Loading component code...</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div><!-- end tab-code -->
|
|
|
|
</div><!-- end tab-content-wrapper -->
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-left">
|
|
<div class="footer-ascii">
|
|
<pre class="footer-ascii-art"> █████╗ ██╗████████╗███╗ ███╗██████╗ ██╗
|
|
██╔══██╗██║╚══██╔══╝████╗ ████║██╔══██╗██║
|
|
███████║██║ ██║ ██╔████╔██║██████╔╝██║
|
|
██╔══██║██║ ██║ ██║╚██╔╝██║██╔═══╝ ██║
|
|
██║ ██║██║ ██║ ██║ ╚═╝ ██║██║ ███████╗
|
|
╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚══════╝</pre>
|
|
<p class="footer-tagline">Supercharge Anthropic's Claude Code</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-right">
|
|
<p class="footer-copyright">© 2025 Claude Code Templates. Open source project.</p>
|
|
<div class="footer-links">
|
|
<a href="/trending.html" class="footer-link">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z"/>
|
|
</svg>
|
|
Trending
|
|
</a>
|
|
<a href="https://docs.aitmpl.com/" target="_blank" class="footer-link">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
|
|
</svg>
|
|
Documentation
|
|
</a>
|
|
<a href="https://github.com/davila7/claude-code-templates" target="_blank" class="footer-link">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.30 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Shopping Cart Sidebar -->
|
|
<div id="shoppingCart" class="cart-sidebar">
|
|
<div class="cart-content">
|
|
<div class="cart-header">
|
|
<div class="cart-header-main">
|
|
<h3>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M7 18c-1.1 0-2 0.9-2 2s0.9 2 2 2 2-0.9 2-2-0.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-0.16 0.27-0.25 0.58-0.25 0.96 0 1.1 0.9 2 2 2h12v-2H7.42c-0.14 0-0.25-0.11-0.25-0.25l0.03-0.12L8.1 13h7.45c0.75 0 1.41-0.41 1.75-1.03L21.7 4H5.21l-0.94-2H1zM17 18c-1.1 0-2 0.9-2 2s0.9 2 2 2 2-0.9 2-2-0.9-2-2-2z"/>
|
|
</svg>
|
|
Stack Builder
|
|
</h3>
|
|
<button class="cart-close" onclick="closeCart()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Clear All Button - Subtle position -->
|
|
<div class="cart-clear-section-prominent" id="cartClearProminent" style="display: none;">
|
|
<button class="clear-all-btn-prominent" onclick="clearCart()">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"/>
|
|
</svg>
|
|
Clear All
|
|
<span class="clear-count" id="clearCount">(0)</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-body">
|
|
<div class="cart-empty" id="cartEmpty">
|
|
<div class="empty-cart-icon">🛒</div>
|
|
<p>Your stack is empty</p>
|
|
<small>Add agents, commands, settings, hooks, or MCPs to build your development stack</small>
|
|
</div>
|
|
|
|
<div class="cart-items" id="cartItems" style="display: none;">
|
|
|
|
<div class="cart-section">
|
|
<h4>
|
|
<span class="section-icon">🤖</span>
|
|
Agents (<span id="agentsCount">0</span>)
|
|
</h4>
|
|
<div class="cart-section-items" id="agentsList"></div>
|
|
</div>
|
|
|
|
<div class="cart-section">
|
|
<h4>
|
|
<span class="section-icon">⚡</span>
|
|
Commands (<span id="commandsCount">0</span>)
|
|
</h4>
|
|
<div class="cart-section-items" id="commandsList"></div>
|
|
</div>
|
|
|
|
<div class="cart-section">
|
|
<h4>
|
|
<span class="section-icon">⚙️</span>
|
|
Settings (<span id="settingsCount">0</span>)
|
|
</h4>
|
|
<div class="cart-section-items" id="settingsList"></div>
|
|
</div>
|
|
|
|
<div class="cart-section">
|
|
<h4>
|
|
<span class="section-icon">🪝</span>
|
|
Hooks (<span id="hooksCount">0</span>)
|
|
</h4>
|
|
<div class="cart-section-items" id="hooksList"></div>
|
|
</div>
|
|
|
|
<div class="cart-section">
|
|
<h4>
|
|
<span class="section-icon">🔌</span>
|
|
MCPs (<span id="mcpsCount">0</span>)
|
|
</h4>
|
|
<div class="cart-section-items" id="mcpsList"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-footer" id="cartFooter" style="display: none;">
|
|
<div class="command-preview">
|
|
<div class="command-preview-header">
|
|
<span>Generated Command:</span>
|
|
</div>
|
|
<div class="cart-command-container">
|
|
<div class="command-code" id="generatedCommand">
|
|
npx claude-code-templates@latest
|
|
</div>
|
|
<button class="cart-copy-overlay-btn" onclick="copyCartCommand()" title="Copy command">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
|
|
</svg>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-instructions">
|
|
<div class="instructions-header">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
|
|
</svg>
|
|
<strong>Instructions</strong>
|
|
</div>
|
|
<p>Navigate to your project root and run the generated command. All selected components will be installed automatically.</p>
|
|
</div>
|
|
|
|
<div class="cart-actions">
|
|
<button class="copy-command-btn" onclick="copyCartCommand()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
|
|
</svg>
|
|
Copy Command
|
|
</button>
|
|
<div class="share-dropdown" id="shareDropdown">
|
|
<button class="share-stack-btn" onclick="toggleShareDropdown()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.6 20.92,19A2.84,2.84 0 0,0 18,16.08Z"/>
|
|
</svg>
|
|
Share Stack
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" class="dropdown-arrow">
|
|
<path d="M7,10L12,15L17,10H7Z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="share-options" id="shareOptions">
|
|
<button class="share-option-btn" onclick="shareOnTwitter()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
|
</svg>
|
|
Share on X
|
|
</button>
|
|
<button class="share-option-btn" onclick="shareOnThreads()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.781 3.631 2.695 6.54 2.717 1.623-.02 3.094-.37 4.37-1.04.558-.29 1.029-.63 1.414-1.017.33-.33.602-.69.82-1.084.218-.395.381-.84.488-1.336.107-.495.16-1.044.16-1.644 0-.595-.053-1.144-.16-1.644-.107-.496-.27-.941-.488-1.336a3.79 3.79 0 00-.82-1.084 3.790 3.790 0 00-1.414-1.017c-1.276-.67-2.747-1.02-4.37-1.04h-.007c-1.623.02-3.094.37-4.37 1.04-.558.29-1.029.63-1.414 1.017-.33.33-.602.69-.82 1.084-.218.395-.381.84-.488 1.336-.107.5-.16 1.049-.16 1.644 0 .595.053 1.144.16 1.644.107.496.27.941.488 1.336.218.395.49.754.82 1.084.385.387.856.727 1.414 1.017 1.276.67 2.747 1.02 4.37 1.04z"/>
|
|
</svg>
|
|
Share on Threads
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cart Floating Button -->
|
|
<div id="cartFloatingBtn" class="cart-floating-btn" onclick="openCart()" style="display: none;">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M7 18c-1.1 0-2 0.9-2 2s0.9 2 2 2 2-0.9 2-2-0.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-0.16 0.27-0.25 0.58-0.25 0.96 0 1.1 0.9 2 2 2h12v-2H7.42c-0.14 0-0.25-0.11-0.25-0.25l0.03-0.12L8.1 13h7.45c0.75 0 1.41-0.41 1.75-1.03L21.7 4H5.21l-0.94-2H1zM17 18c-1.1 0-2 0.9-2 2s0.9 2 2 2 2-0.9 2-2-0.9-2-2-2z"/>
|
|
</svg>
|
|
<span class="cart-badge" id="cartBadge">0</span>
|
|
</div>
|
|
|
|
<!-- Validation modal is now created dynamically in component-page.js -->
|
|
|
|
<!-- Scripts -->
|
|
<script src="/js/data-loader.js"></script>
|
|
<script src="/js/cart-manager.js"></script>
|
|
<script src="/js/event-tracker.js"></script>
|
|
<script src="/js/component-page.js"></script>
|
|
<script src="/js/utils.js"></script>
|
|
|
|
<script>
|
|
// Accordion toggle function
|
|
function toggleAccordion(button) {
|
|
const accordionItem = button.closest('.accordion-item');
|
|
const content = accordionItem.querySelector('.accordion-content');
|
|
const isActive = button.classList.contains('active');
|
|
|
|
// Get all accordion items in the same section
|
|
const allAccordionItems = accordionItem.parentElement.querySelectorAll('.accordion-item');
|
|
|
|
// Close all other accordions
|
|
allAccordionItems.forEach(item => {
|
|
if (item !== accordionItem) {
|
|
const otherButton = item.querySelector('.accordion-header');
|
|
const otherContent = item.querySelector('.accordion-content');
|
|
if (otherButton && otherContent) {
|
|
otherButton.classList.remove('active');
|
|
otherContent.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Toggle current accordion
|
|
button.classList.toggle('active');
|
|
|
|
// Toggle content visibility with smooth animation
|
|
if (isActive) {
|
|
content.style.display = 'none';
|
|
} else {
|
|
content.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// Validation modal functions are now in component-page.js
|
|
// (Old inline modal code removed to use new modal system)
|
|
|
|
// Sandbox provider switcher function
|
|
function switchSandboxProvider(provider) {
|
|
console.log('Switching sandbox provider to:', provider);
|
|
|
|
// Update tab active states
|
|
const tabs = document.querySelectorAll('.sandbox-tab');
|
|
tabs.forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
event.target.closest('.sandbox-tab').classList.add('active');
|
|
|
|
// Hide all provider contents
|
|
const contents = document.querySelectorAll('.sandbox-provider-content');
|
|
contents.forEach(content => {
|
|
content.style.display = 'none';
|
|
});
|
|
|
|
// Show selected provider content
|
|
const selectedContent = document.getElementById(`${provider}-content`);
|
|
if (selectedContent) {
|
|
selectedContent.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// Debug script loading and ensure proper initialization
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
console.log('=== Component Page Debug ===');
|
|
console.log('Scripts loaded. Available objects:', {
|
|
DataLoader: typeof DataLoader,
|
|
ComponentPageManager: typeof ComponentPageManager,
|
|
addToCart: typeof addToCart,
|
|
CartManager: typeof CartManager,
|
|
windowAddToCart: typeof window.addToCart
|
|
});
|
|
|
|
// Ensure cart manager is initialized
|
|
if (typeof CartManager !== 'undefined' && !window.cartManager) {
|
|
console.log('Initializing CartManager...');
|
|
window.cartManager = new CartManager();
|
|
}
|
|
|
|
// Ensure component page manager is initialized
|
|
if (typeof ComponentPageManager !== 'undefined' && !window.componentPageManager) {
|
|
console.log('Initializing ComponentPageManager...');
|
|
window.componentPageManager = new ComponentPageManager();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |