Enhance index.html and style.css: add a copy button for code snippets, update button styles for improved visibility, and implement a new download button for rules.yaml. Adjust CSS for better layout and responsiveness of code container elements.

Author: tomups

index.html

@@ -26,7 +26,7 @@ <h1 class="title">
             <span class="title-word-1">Agentic</span> <span class="title-word-2">GitHub</span> <span class="title-word-3">Guardrails</span>
         </h1>
         <p class="subtitle">
-            Replace static protection rules with context-aware monitoring. Let Watchflow ensure consistent quality standards so your team can focus on building.
+            Replace static protection rules with context-aware monitoring. Let <strong>Watchflow</strong> ensure consistent quality standards so your team can focus on building.
         </p>
     </header>
 
@@ -74,9 +74,16 @@ <h2 class="section-title">Your repo, your rules</h2>
                                 <div class="window-dot green"></div>
                             </div>
                         </div>
-                        <pre id="codeContent" class="code-content"></pre>
+                        <div class="code-container">
+                            <pre id="codeContent" class="code-content"></pre>
+                            <button id="copyIconBtn" class="copy-icon-btn" title="Copy to clipboard">
+                                <svg viewBox="0 0 24 24" width="16" height="16">
+                                    <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" fill="currentColor"/>
+                                </svg>
+                            </button>
+                        </div>
                         <div class="code-actions">
-                            <button id="copyBtn" class="code-action-btn copy-btn">Copy to clipboard</button>
+                            <button id="downloadBtn" class="code-action-btn download-btn">Download rules.yaml</button>
                             <a href="https://github.com/apps/watchflow" target="_blank" rel="noopener noreferrer" class="code-action-btn install-btn">Install Watchflow</a>
                         </div>
                     </div>

script.js

@@ -6,7 +6,8 @@ const loadingIndicator = document.getElementById('loadingIndicator');
 const errorAlert = document.getElementById('errorAlert');
 const errorMessage = document.getElementById('errorMessage');
 const codeContent = document.getElementById('codeContent');
-const copyBtn = document.getElementById('copyBtn');
+const downloadBtn = document.getElementById('downloadBtn');
+const copyIconBtn = document.getElementById('copyIconBtn');
 // showExamplesBtn removed - examples are now always visible
 const examplesGrid = document.getElementById('examplesGrid');
 
@@ -41,8 +42,11 @@ function initializeEventListeners() {
         }
     });
 
-    // Copy button click
-    copyBtn.addEventListener('click', handleCopyClick);
+    // Download button click
+    downloadBtn.addEventListener('click', handleDownloadClick);
+    
+    // Copy icon button click
+    copyIconBtn.addEventListener('click', handleCopyClick);
 
     // Examples are now always visible - no button needed
 
@@ -181,17 +185,40 @@ rules:
     }
 }
 
-// Handle copy button click
+// Handle download button click
+function handleDownloadClick() {
+    if (!currentRule) return;
+    
+    // Create blob with YAML content
+    const blob = new Blob([currentRule], { type: 'text/yaml' });
+    const url = URL.createObjectURL(blob);
+    
+    // Create temporary download link
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'rules.yaml';
+    document.body.appendChild(a);
+    a.click();
+    
+    // Cleanup
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    
+    // Show feedback
+    showDownloadFeedback();
+}
+
+// Handle copy icon button click
 async function handleCopyClick() {
     if (!currentRule) return;
 
     try {
         await navigator.clipboard.writeText(currentRule);
-        showCopyTooltip();
+        showCopyFeedback();
     } catch (error) {
         // Fallback for older browsers
         fallbackCopyToClipboard(currentRule);
-        showCopyTooltip();
+        showCopyFeedback();
     }
 }
 
@@ -227,15 +254,26 @@ function fallbackCopyToClipboard(text) {
     document.body.removeChild(textArea);
 }
 
+// Show download feedback
+function showDownloadFeedback() {
+    const originalText = downloadBtn.textContent;
+    downloadBtn.textContent = 'Downloaded!';
+    downloadBtn.style.background = '#4CAF50';
+    
+    setTimeout(() => {
+        downloadBtn.textContent = originalText;
+        downloadBtn.style.background = '';
+    }, 1500);
+}
+
 // Show copy feedback
-function showCopyTooltip() {
-    const originalText = copyBtn.textContent;
-    copyBtn.textContent = 'Copied!';
-    copyBtn.style.background = '#4CAF50';
+function showCopyFeedback() {
+    copyIconBtn.style.background = '#4CAF50';
+    copyIconBtn.style.color = '#FFFFFF';
 
     setTimeout(() => {
-        copyBtn.textContent = originalText;
-        copyBtn.style.background = '';
+        copyIconBtn.style.background = '';
+        copyIconBtn.style.color = '';
     }, 1500);
 }
 

style.css

@@ -576,6 +576,20 @@ body::after {
     transform: translateY(-1px);
 }
 
+.download-btn {
+    background: var(--accent-secondary);
+    color: var(--text-primary);
+}
+
+.download-btn:hover {
+    background: #E6C200;
+    transform: translateY(-1px);
+}
+
+.code-container {
+    position: relative;
+}
+
 .code-content {
     padding: 1.5rem;
     color: var(--text-light);
@@ -586,6 +600,32 @@ body::after {
     overflow-x: auto;
 }
 
+.copy-icon-btn {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.9);
+    border: 2px solid var(--border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: var(--text-primary);
+    box-shadow: 2px 2px 0 var(--shadow-color);
+    z-index: 10;
+}
+
+.copy-icon-btn:hover {
+    background: var(--accent-secondary);
+    transform: translate(1px, 1px);
+    box-shadow: 1px 1px 0 var(--shadow-color);
+}
+
+.copy-icon-btn:active {
+    transform: translate(2px, 2px);
+    box-shadow: none;
+}
+
 /* Loading Indicator */
 .loading {
     display: flex;
@@ -1142,7 +1182,7 @@ body::after {
 
 /* Mobile devices */
 @media (max-width: 480px) {
-    /* Cartoony mobile bubbles */
+    /* Cartoony mobile bubbles - star colors */
     body::before {
         display: block;
         content: '';
@@ -1155,7 +1195,11 @@ body::after {
             radial-gradient(circle 40px at 20% 30%, rgba(78, 205, 196, 0.4) 0%, rgba(78, 205, 196, 0.2) 50%, rgba(0, 0, 0, 0.08) 55%, transparent 60%),
             radial-gradient(circle 50px at 80% 20%, rgba(255, 215, 0, 0.35) 0%, rgba(255, 215, 0, 0.18) 50%, rgba(0, 0, 0, 0.08) 55%, transparent 60%),
             radial-gradient(circle 30px at 60% 70%, rgba(255, 107, 107, 0.4) 0%, rgba(255, 107, 107, 0.2) 50%, rgba(0, 0, 0, 0.08) 55%, transparent 60%),
-            radial-gradient(circle 35px at 25% 80%, rgba(149, 225, 211, 0.35) 0%, rgba(149, 225, 211, 0.18) 50%, rgba(0, 0, 0, 0.08) 55%, transparent 60%);
+            radial-gradient(circle 35px at 25% 80%, rgba(149, 225, 211, 0.35) 0%, rgba(149, 225, 211, 0.18) 50%, rgba(0, 0, 0, 0.08) 55%, transparent 60%),
+            radial-gradient(circle 25px at 10% 15%, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0.15) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%),
+            radial-gradient(circle 45px at 90% 40%, rgba(78, 205, 196, 0.35) 0%, rgba(78, 205, 196, 0.18) 50%, rgba(0, 0, 0, 0.08) 55%, transparent 60%),
+            radial-gradient(circle 32px at 45% 10%, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0.15) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%),
+            radial-gradient(circle 38px at 75% 85%, rgba(149, 225, 211, 0.32) 0%, rgba(149, 225, 211, 0.16) 50%, rgba(0, 0, 0, 0.07) 55%, transparent 60%);
         animation: bubblesFloat 25s linear infinite;
         z-index: -1;
         pointer-events: none;
@@ -1170,8 +1214,12 @@ body::after {
         width: 100%;
         height: 120%;
         background: 
-            radial-gradient(circle 45px at 70% 50%, rgba(255, 182, 193, 0.3) 0%, rgba(255, 182, 193, 0.15) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%),
-            radial-gradient(circle 30px at 15% 60%, rgba(138, 43, 226, 0.25) 0%, rgba(138, 43, 226, 0.12) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%);
+            radial-gradient(circle 45px at 70% 50%, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0.15) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%),
+            radial-gradient(circle 30px at 15% 60%, rgba(149, 225, 211, 0.25) 0%, rgba(149, 225, 211, 0.12) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%),
+            radial-gradient(circle 42px at 95% 75%, rgba(255, 215, 0, 0.28) 0%, rgba(255, 215, 0, 0.14) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%),
+            radial-gradient(circle 28px at 35% 35%, rgba(78, 205, 196, 0.25) 0%, rgba(78, 205, 196, 0.12) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%),
+            radial-gradient(circle 36px at 55% 90%, rgba(255, 215, 0, 0.27) 0%, rgba(255, 215, 0, 0.13) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%),
+            radial-gradient(circle 33px at 5% 45%, rgba(78, 205, 196, 0.26) 0%, rgba(78, 205, 196, 0.13) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%);
         animation: bubblesFloat 30s linear infinite;
         animation-delay: -15s;
         z-index: -2;