rizzo-css 0.0.17 → 0.0.18

package/scaffold/astro-app/src/components/CliCommandTabs.astro

@@ -1,90 +0,0 @@
----
-import Tabs from './Tabs.astro';
-import CodeBlock from './CodeBlock.astro';
-
-interface Props {
-  /** CLI command suffix, e.g. "init", "add", "theme" (will be "rizzo-css <command>") */
-  command: string;
-  /** Optional default tab id (npm, pnpm, yarn, bun) */
-  defaultTab?: string;
-  /** Optional class for the wrapper */
-  class?: string;
-}
-
-const { command, defaultTab = 'npm', class: className = '' } = Astro.props;
-
-const fullCommand = `rizzo-css ${command}`;
-const commands = {
-  npm: `npx ${fullCommand}`,
-  pnpm: `pnpm dlx ${fullCommand}`,
-  yarn: `yarn dlx ${fullCommand}`,
-  bun: `bunx ${fullCommand}`,
-};
-
-const tabs = [
-  { id: 'npm', label: 'npm' },
-  { id: 'pnpm', label: 'pnpm' },
-  { id: 'yarn', label: 'yarn' },
-  { id: 'bun', label: 'bun' },
-];
----
-
-<div class={`cli-command-tabs ${className}`.trim()} data-cli-command={command}>
-  <p class="cli-command-tabs__hint">Choose your package manager — click a tab to select, then copy the command.</p>
-  <Tabs tabs={tabs} defaultTab={defaultTab} id={`cli-tabs-${command.replace(/\s+/g, '-')}`} class="cli-command-tabs__tabs">
-    <div class="cli-command-tabs__panel">
-      <CodeBlock code={commands.npm} language="bash" />
-    </div>
-    <div class="cli-command-tabs__panel">
-      <CodeBlock code={commands.pnpm} language="bash" />
-    </div>
-    <div class="cli-command-tabs__panel">
-      <CodeBlock code={commands.yarn} language="bash" />
-    </div>
-    <div class="cli-command-tabs__panel">
-      <CodeBlock code={commands.bun} language="bash" />
-    </div>
-  </Tabs>
-</div>
-
-<style>
-  .cli-command-tabs {
-    margin: var(--spacing-2) 0;
-  }
-  .cli-command-tabs__hint {
-    font-size: var(--font-size-sm);
-    color: var(--text-dim);
-    margin-bottom: var(--spacing-1);
-  }
-  .cli-command-tabs__tabs {
-    margin-top: 0;
-  }
-  /* Tabs list: no scroll, all tabs visible (global so it overrides .tabs__list in components.css) */
-  .cli-command-tabs :global(.tabs__list) {
-    overflow-x: visible;
-    overflow-y: visible;
-    flex-wrap: nowrap;
-    scrollbar-width: none;
-    margin-bottom: var(--spacing-2);
-  }
-  .cli-command-tabs :global(.tabs__list)::-webkit-scrollbar {
-    display: none;
-  }
-  /* Remove default panel padding so code block sits tight */
-  .cli-command-tabs :global(.tabs__panel) {
-    padding: 0;
-    min-height: 0;
-  }
-  .cli-command-tabs__panel {
-    padding-top: var(--spacing-1);
-  }
-  .cli-command-tabs__panel :global(.code-block) {
-    margin: 0;
-  }
-  .cli-command-tabs__panel :global(.code-block__header) {
-    padding: var(--spacing-1) var(--spacing-2);
-  }
-  .cli-command-tabs__panel :global(.code-block pre) {
-    padding: var(--spacing-2);
-  }
-</style>

package/scaffold/astro-app/src/components/CodeBlock.astro

@@ -1,393 +0,0 @@
----
-import Copy from './icons/Copy.astro';
-import Check from './icons/Check.astro';
-import Css3 from './icons/devicons/Css3.astro';
-import Html5 from './icons/devicons/Html5.astro';
-import Javascript from './icons/devicons/Javascript.astro';
-import Nodejs from './icons/devicons/Nodejs.astro';
-import AstroIcon from './icons/devicons/Astro.astro';
-import Plaintext from './icons/devicons/Plaintext.astro';
-import Git from './icons/devicons/Git.astro';
-import Bash from './icons/devicons/Bash.astro';
-import Svelte from './icons/devicons/Svelte.astro';
-import React from './icons/devicons/React.astro';
-import Vue from './icons/devicons/Vue.astro';
-
-interface Props {
-  code: string;
-  language?: string;
-  class?: string;
-}
-
-const {
-  code,
-  language = '',
-  class: className = '',
-} = Astro.props;
-
-const languageLabel = language || '';
-const languageLower = language.toLowerCase();
-
-const codeId = `code-${Math.random().toString(36).substr(2, 9)}`;
-const copyButtonId = `copy-btn-${Math.random().toString(36).substr(2, 9)}`;
----
-
-<div class={`code-block ${className}`.trim()}>
-  <div class="code-block__header">
-    {language && (
-      <span class="code-block__language" aria-label={languageLabel}>
-        {languageLower === 'css' && (
-          <>
-            <Css3 width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'html' && (
-          <>
-            <Html5 width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'javascript' && (
-          <>
-            <Javascript width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'nodejs' && (
-          <>
-            <Nodejs width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'astro' && (
-          <>
-            <AstroIcon width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'plaintext' && (
-          <>
-            <Plaintext width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'git' && (
-          <>
-            <Git width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'svelte' && (
-          <>
-            <Svelte width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {(languageLower === 'react' || languageLower === 'jsx' || languageLower === 'tsx') && (
-          <>
-            <React width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'vue' && (
-          <>
-            <Vue width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {(languageLower === 'bash' || languageLower === 'shell' || languageLower === 'sh') && (
-          <>
-            <Bash width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {!['css', 'html', 'javascript', 'nodejs', 'astro', 'plaintext', 'git', 'svelte', 'react', 'jsx', 'tsx', 'vue', 'bash', 'shell', 'sh'].includes(languageLower) && (
-          <span class="code-block__language-text">{language}</span>
-        )}
-        <span class="sr-only">{languageLabel}</span>
-      </span>
-    )}
-    <span class="tooltip-host" data-tooltip="Copy code to clipboard">
-      <button
-        type="button"
-        class="code-block__copy-btn"
-        aria-label="Copy code to clipboard"
-        data-code-id={codeId}
-        id={copyButtonId}
-      >
-        <span class="code-block__copy-icon code-block__copy-icon--copy" aria-hidden="true">
-          <Copy width={20} height={20} />
-        </span>
-        <span class="code-block__copy-icon code-block__copy-icon--check" aria-hidden="true">
-          <Check width={20} height={20} />
-        </span>
-        <span class="sr-only">Copy code</span>
-      </button>
-    </span>
-  </div>
-  <pre><code id={codeId}>{code}</code></pre>
-</div>
-
-<script is:inline>
-  (function initCodeBlockCopy() {
-    const init = () => {
-      const copyButtons = document.querySelectorAll('.code-block__copy-btn');
-      
-      copyButtons.forEach((button) => {
-        if (button.hasAttribute('data-copy-initialized')) return;
-        button.setAttribute('data-copy-initialized', 'true');
-        
-        const codeId = button.getAttribute('data-code-id');
-        if (!codeId) return;
-        
-        const codeElement = document.getElementById(codeId);
-        if (!codeElement) return;
-        
-        const copyIcon = button.querySelector('.code-block__copy-icon--copy');
-        const checkIcon = button.querySelector('.code-block__copy-icon--check');
-        
-        // Remove title elements from SVG icons to prevent tooltip conflicts
-        const copyIconSvg = copyIcon?.querySelector('svg');
-        const checkIconSvg = checkIcon?.querySelector('svg');
-        if (copyIconSvg) {
-          const copyTitle = copyIconSvg.querySelector('title');
-          if (copyTitle) copyTitle.remove();
-        }
-        if (checkIconSvg) {
-          const checkTitle = checkIconSvg.querySelector('title');
-          if (checkTitle) checkTitle.remove();
-        }
-        
-        const copyToClipboard = async () => {
-          const codeText = codeElement.textContent || '';
-          
-          if (!codeText) return;
-          
-          try {
-            await navigator.clipboard.writeText(codeText);
-            
-            // Show success state
-            if (copyIcon) copyIcon.classList.add('code-block__copy-icon--hidden');
-            if (checkIcon) checkIcon.classList.remove('code-block__copy-icon--hidden');
-            button.setAttribute('aria-label', 'Code copied!');
-            const tooltipHost = button.closest('.tooltip-host');
-            if (tooltipHost) tooltipHost.setAttribute('data-tooltip', 'Code copied!');
-            
-            // Reset after 2 seconds
-            setTimeout(() => {
-              if (copyIcon) copyIcon.classList.remove('code-block__copy-icon--hidden');
-              if (checkIcon) checkIcon.classList.add('code-block__copy-icon--hidden');
-              button.setAttribute('aria-label', 'Copy code to clipboard');
-              if (tooltipHost) tooltipHost.setAttribute('data-tooltip', 'Copy code to clipboard');
-            }, 2000);
-          } catch (err) {
-            // Fallback for older browsers
-            const textArea = document.createElement('textarea');
-            textArea.value = codeText;
-            textArea.style.position = 'fixed';
-            textArea.style.left = '-999999px';
-            document.body.appendChild(textArea);
-            textArea.focus();
-            textArea.select();
-            
-            try {
-              document.execCommand('copy');
-              if (copyIcon) copyIcon.classList.add('code-block__copy-icon--hidden');
-              if (checkIcon) checkIcon.classList.remove('code-block__copy-icon--hidden');
-              button.setAttribute('aria-label', 'Code copied!');
-              const tooltipHostFallback = button.closest('.tooltip-host');
-              if (tooltipHostFallback) tooltipHostFallback.setAttribute('data-tooltip', 'Code copied!');
-              
-              setTimeout(() => {
-                if (copyIcon) copyIcon.classList.remove('code-block__copy-icon--hidden');
-                if (checkIcon) checkIcon.classList.add('code-block__copy-icon--hidden');
-                button.setAttribute('aria-label', 'Copy code to clipboard');
-                if (tooltipHostFallback) tooltipHostFallback.setAttribute('data-tooltip', 'Copy code to clipboard');
-              }, 2000);
-            } catch (fallbackErr) {
-              console.error('Failed to copy:', fallbackErr);
-            }
-            
-            document.body.removeChild(textArea);
-          }
-        };
-        
-        button.addEventListener('click', copyToClipboard);
-        
-        // Keyboard support
-        button.addEventListener('keydown', (e) => {
-          if (e && 'key' in e) {
-            const keyEvent = e;
-            if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
-              keyEvent.preventDefault();
-              copyToClipboard();
-            }
-          }
-        });
-      });
-    };
-    
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', init);
-    } else {
-      init();
-    }
-  })();
-</script>
-
-<style>
-  .code-block {
-    position: relative;
-    margin: var(--spacing-4) 0;
-    border-radius: var(--radius-lg);
-    overflow: visible;
-    background-color: var(--background-alt);
-    border: 1px solid var(--border);
-  }
-  
-  .code-block__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--spacing-2) var(--spacing-3);
-    background-color: var(--background);
-    border-bottom: 1px solid var(--border);
-    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-    overflow: visible;
-    position: relative;
-    z-index: 1;
-  }
-  
-  .code-block__language {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-2);
-    font-size: var(--font-size-xs);
-    color: var(--text-dim);
-    text-transform: uppercase;
-    letter-spacing: var(--letter-spacing-wider);
-    font-weight: var(--font-weight-medium);
-  }
-  
-  .code-block__language-icon {
-    display: block;
-    flex-shrink: 0;
-    color: var(--text-dim);
-    width: var(--spacing-5); /* 20px - larger for better visibility */
-    height: var(--spacing-5);
-  }
-  
-  .code-block__language-icon svg {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .code-block__language-text {
-    display: none;
-  }
-  
-  /* Show text next to icon on large screens */
-  @media (width >= 768px) {
-    .code-block__language-text {
-      display: inline;
-    }
-  }
-  
-  .code-block__copy-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--spacing-2);
-    min-width: var(--spacing-8);
-    height: var(--spacing-8);
-    margin-left: auto;
-    background-color: var(--background-alt);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    color: var(--text);
-    cursor: pointer;
-    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
-    position: relative;
-  }
-  
-  .code-block__copy-btn:hover {
-    background-color: var(--background);
-    border-color: var(--accent);
-    color: var(--accent);
-  }
-  
-  .code-block__copy-btn:focus-visible {
-    outline: var(--outline-width) solid var(--accent);
-    outline-offset: var(--outline-offset);
-  }
-  
-  .code-block__copy-icon {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--spacing-5); /* 20px - larger for better visibility */
-    height: var(--spacing-5);
-    transition: opacity var(--transition-base), transform var(--transition-base);
-  }
-  
-  .code-block__copy-icon svg {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .code-block__copy-icon--copy {
-    opacity: 1;
-    transform: scale(1);
-  }
-  
-  .code-block__copy-icon--check {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  
-  .code-block__copy-icon--check:not(.code-block__copy-icon--hidden) {
-    opacity: 1;
-    transform: scale(1);
-  }
-  
-  .code-block__copy-icon--copy.code-block__copy-icon--hidden {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  
-  .code-block pre {
-    margin: 0;
-    padding: var(--spacing-4);
-    overflow-x: auto;
-    background-color: var(--background-alt);
-    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-  }
-  
-  .code-block code {
-    font-family: var(--font-family-mono);
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-relaxed);
-    color: var(--text);
-    white-space: pre;
-    word-wrap: normal;
-  }
-  
-  @media (width <= 640px) {
-    .code-block__header {
-      flex-direction: row; /* Keep horizontal layout on mobile */
-      align-items: center; /* Vertically center all items */
-      gap: var(--spacing-2);
-    }
-    
-    .code-block__language {
-      align-items: center; /* Ensure language icon is vertically centered */
-    }
-    
-    .code-block__copy-btn {
-      margin-left: auto; /* Push copy button to the right */
-      flex-shrink: 0; /* Prevent copy button from shrinking */
-    }
-  }
-</style>

package/scaffold/astro-app/src/components/CopyToClipboard.astro

@@ -1,219 +0,0 @@
----
-import Copy from './icons/Copy.astro';
-import Check from './icons/Check.astro';
-
-interface Props {
-  value: string;
-  label?: string;
-  format?: string;
-  class?: string;
-  id?: string;
-}
-
-const {
-  value,
-  label,
-  format,
-  class: className = '',
-  id,
-} = Astro.props;
-
-const buttonId = id || `copy-btn-${Math.random().toString(36).substr(2, 9)}`;
-const defaultTooltip = label || 'Copy to clipboard';
----
-
-<span class="tooltip-host" data-tooltip={defaultTooltip}>
-  <button
-    type="button"
-    class={`copy-to-clipboard ${className}`.trim()}
-    data-copy-value={value}
-    data-copy-format={format}
-    aria-label={label || `Copy ${value} to clipboard`}
-    id={buttonId}
-  >
-    <span class="copy-to-clipboard__text">{value}</span>
-    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" aria-hidden="true">
-      <Copy width={16} height={16} />
-    </span>
-    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--check" aria-hidden="true">
-      <Check width={16} height={16} />
-    </span>
-    <span class="copy-to-clipboard__feedback" aria-live="polite"></span>
-  </button>
-</span>
-
-<script>
-  (function initCopyToClipboard() {
-    // Wait for DOM to be ready
-    const init = () => {
-      const buttons = document.querySelectorAll('.copy-to-clipboard');
-      
-      buttons.forEach((button) => {
-        // Skip if already initialized
-        if (button.hasAttribute('data-copy-initialized')) return;
-        button.setAttribute('data-copy-initialized', 'true');
-        
-        const tooltipHost = button.closest('.tooltip-host');
-        const defaultTooltip = tooltipHost ? (tooltipHost.getAttribute('data-tooltip') || 'Copy to clipboard') : 'Copy to clipboard';
-        const defaultAriaLabel = button.getAttribute('aria-label') || 'Copy to clipboard';
-        if (tooltipHost) tooltipHost.setAttribute('data-tooltip', defaultTooltip);
-        button.setAttribute('data-copy-aria-label', defaultAriaLabel);
-        if (tooltipHost) tooltipHost.setAttribute('data-copy-default-tooltip', defaultTooltip);
-        
-        const getValue = () => button.getAttribute('data-copy-value') || '';
-        const getFormat = () => button.getAttribute('data-copy-format') || '';
-        const feedback = button.querySelector('.copy-to-clipboard__feedback');
-        const copyIcon = button.querySelector('.copy-to-clipboard__icon--copy');
-        const checkIcon = button.querySelector('.copy-to-clipboard__icon--check');
-        const textSpan = button.querySelector('.copy-to-clipboard__text');
-        
-        // Update text span with current value
-        const updateDisplay = () => {
-          const value = getValue();
-          if (textSpan) {
-            textSpan.textContent = value || '';
-          }
-        };
-        
-        // Initial display update
-        updateDisplay();
-        
-        // Watch for attribute changes (for dynamic updates)
-        const observer = new MutationObserver((mutations) => {
-          let shouldUpdate = false;
-          mutations.forEach((mutation) => {
-            if (mutation.type === 'attributes') {
-              if (mutation.attributeName === 'data-copy-value' || mutation.attributeName === 'data-copy-format') {
-                shouldUpdate = true;
-              }
-            }
-          });
-          if (shouldUpdate) {
-            // Use requestAnimationFrame to ensure DOM is ready
-            requestAnimationFrame(() => {
-              updateDisplay();
-            });
-          }
-        });
-        observer.observe(button, {
-          attributes: true,
-          attributeFilter: ['data-copy-value', 'data-copy-format'],
-          attributeOldValue: false
-        });
-        
-        // Listen for custom value-updated event
-        button.addEventListener('value-updated', (event) => {
-          if (event && event.detail && event.detail.value) {
-            updateDisplay();
-          }
-        });
-        
-        // Fallback: Periodically check for value changes (in case MutationObserver misses something)
-        let lastValue = getValue();
-        const intervalId = setInterval(() => {
-          const currentValue = getValue();
-          if (currentValue !== lastValue) {
-            lastValue = currentValue;
-            updateDisplay();
-          }
-        }, 300);
-        
-        // Store interval ID for potential cleanup (though we don't need to clean it up in this case)
-        button.setAttribute('data-copy-interval-id', intervalId.toString());
-        
-        const copyToClipboard = async () => {
-          // Always read fresh value on click (in case it was updated dynamically)
-          let value = getValue();
-          const format = getFormat();
-          
-          // If value is still empty, try reading from text span as fallback
-          if (!value && textSpan) {
-            value = textSpan.textContent || '';
-          }
-          
-          if (!value) {
-            return;
-          }
-          
-          try {
-            await navigator.clipboard.writeText(value);
-            
-            // Show success state
-            if (copyIcon) copyIcon.classList.add('copy-to-clipboard__icon--hidden');
-            if (checkIcon) checkIcon.classList.remove('copy-to-clipboard__icon--hidden');
-            if (feedback) {
-              feedback.textContent = format ? `Copied ${format}!` : 'Copied!';
-            }
-            const tooltipHost = button.closest('.tooltip-host');
-            if (tooltipHost) tooltipHost.setAttribute('data-tooltip', format ? `Copied ${format}!` : 'Copied!');
-            button.setAttribute('aria-label', format ? `Copied ${format}!` : 'Copied!');
-            
-            // Reset after 2 seconds
-            setTimeout(() => {
-              if (copyIcon) copyIcon.classList.remove('copy-to-clipboard__icon--hidden');
-              if (checkIcon) checkIcon.classList.add('copy-to-clipboard__icon--hidden');
-              if (feedback) {
-                feedback.textContent = '';
-              }
-              if (tooltipHost) tooltipHost.setAttribute('data-tooltip', tooltipHost.getAttribute('data-copy-default-tooltip') || defaultTooltip);
-              button.setAttribute('aria-label', defaultAriaLabel);
-            }, 2000);
-          } catch (err) {
-            // Fallback for older browsers
-            const textArea = document.createElement('textarea');
-            textArea.value = value;
-            textArea.style.position = 'fixed';
-            textArea.style.left = '-999999px';
-            document.body.appendChild(textArea);
-            textArea.focus();
-            textArea.select();
-            
-            try {
-              document.execCommand('copy');
-              if (copyIcon) copyIcon.classList.add('copy-to-clipboard__icon--hidden');
-              if (checkIcon) checkIcon.classList.remove('copy-to-clipboard__icon--hidden');
-              if (feedback) {
-                feedback.textContent = format ? `Copied ${format}!` : 'Copied!';
-              }
-              const tooltipHostFb = button.closest('.tooltip-host');
-              if (tooltipHostFb) tooltipHostFb.setAttribute('data-tooltip', format ? `Copied ${format}!` : 'Copied!');
-              button.setAttribute('aria-label', format ? `Copied ${format}!` : 'Copied!');
-              
-              setTimeout(() => {
-                if (copyIcon) copyIcon.classList.remove('copy-to-clipboard__icon--hidden');
-                if (checkIcon) checkIcon.classList.add('copy-to-clipboard__icon--hidden');
-                if (feedback) {
-                  feedback.textContent = '';
-                }
-                if (tooltipHostFb) tooltipHostFb.setAttribute('data-tooltip', tooltipHostFb.getAttribute('data-copy-default-tooltip') || defaultTooltip);
-                button.setAttribute('aria-label', defaultAriaLabel);
-              }, 2000);
-            } catch (fallbackErr) {
-              if (feedback) {
-                feedback.textContent = 'Failed to copy';
-              }
-            }
-            
-            document.body.removeChild(textArea);
-          }
-        };
-        
-        button.addEventListener('click', copyToClipboard);
-        
-        // Keyboard support
-        button.addEventListener('keydown', (e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            copyToClipboard();
-          }
-        });
-      });
-    };
-    
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', init);
-    } else {
-      init();
-    }
-  })();
-</script>