From ee17ee2158f651c78bb77e4dc42f2d8cac8ebf7a Mon Sep 17 00:00:00 2001
From: Timothy Rogers <github@hack13.me>
Date: Sat, 10 May 2025 10:41:44 -0400
Subject: [PATCH] Added 88x31 buttons

---
 src/pages/shrines/buttons.astro | 259 ++++++++++++++++++++++++++++++++
 src/pages/shrines/index.astro   |  30 +---
 2 files changed, 263 insertions(+), 26 deletions(-)
 create mode 100644 src/pages/shrines/buttons.astro

diff --git a/src/pages/shrines/buttons.astro b/src/pages/shrines/buttons.astro
new file mode 100644
index 0000000..b36a6c2
--- /dev/null
+++ b/src/pages/shrines/buttons.astro
@@ -0,0 +1,259 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="88x31 Buttons - Hack13">
+  <main class="container mx-auto px-4 py-8">
+    <h1 class="text-3xl font-bold mb-8 text-pink-500">88x31 Buttons</h1>
+
+    <p class="text-gray-900">
+        I have grown quite fond of the 88x31 buttons. I have used them on my site now for a bit, but I really wanted to update my button and 
+        try to have a bit more fun with it. So here are a few different versions of the button I made, and I am looking for friends and 
+        others who are interested in doing button site exchanges. This way I can help join the promotion of returning to the old days of 
+        sharing personal sites vs a social media link only... or just a simple card site.
+    </p>
+    <br />
+    <p class="text-gray-900">
+        If you are interested in doing a button site exchange, please contact me via email at <a href="mailto:88x31@hack13.dev" class="underline">88x31@hack13.dev</a>
+         or send me a message on the Fediverse <a href="https://cyberfurz.social/@hack13" class="underline">@hack13@cyberfurz.social</a>.
+    </p>
+    <br />
+    <div class="grid gap-8">
+      <!-- Pink Button Section -->
+      <div class="bg-pink-200 border-purple-400 border-4 rounded-md p-6">
+        <h2 class="text-xl font-semibold mb-4 text-pink-500">Hack13 Pink</h2>
+        
+        <div class="grid md:grid-cols-2 gap-6">
+          <!-- GIF Version -->
+          <div class="space-y-4">
+            <h3 class="font-medium text-pink-500">GIF Version</h3>
+            <div class="flex items-center gap-4">
+              <img 
+                src="https://storj.hack13.download/cdn/buttons/hack13-pink.gif" 
+                alt="Hack13 Pink Button (GIF)" 
+                width="88" 
+                height="31"
+                class="border border-purple-400 rounded"
+              />
+              <a 
+                href="https://storj.hack13.download/cdn/buttons/hack13-pink.gif" 
+                download
+                class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
+              >
+                Download GIF
+              </a>
+            </div>
+            <div class="relative">
+              <textarea 
+                readonly 
+                class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
+              >{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/hack13-pink.gif" alt="Hack13 Pink Button" width="88" height="31"></a>`}</textarea>
+              <button 
+                onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
+                class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
+              >
+                Copy
+              </button>
+            </div>
+          </div>
+
+          <!-- WebP Version -->
+          <div class="space-y-4">
+            <h3 class="font-medium text-pink-500">WebP Version</h3>
+            <div class="flex items-center gap-4">
+              <img 
+                src="https://storj.hack13.download/cdn/buttons/hack13-pink.webp" 
+                alt="Hack13 Pink Button (WebP)" 
+                width="88" 
+                height="31"
+                class="border border-purple-400 rounded"
+              />
+              <a 
+                href="https://storj.hack13.download/cdn/buttons/hack13-pink.webp" 
+                download
+                class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
+              >
+                Download WebP
+              </a>
+            </div>
+            <div class="relative">
+              <textarea 
+                readonly 
+                class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
+              >{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/hack13-pink.webp" alt="Hack13 Pink Button" width="88" height="31"></a>`}</textarea>
+              <button 
+                onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
+                class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
+              >
+                Copy
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Alt Button Section -->
+      <div class="bg-pink-200 border-purple-400 border-4 rounded-md p-6">
+        <h2 class="text-xl font-semibold mb-4 text-pink-500">Hack13 Alt</h2>
+        
+        <div class="grid md:grid-cols-2 gap-6">
+          <!-- GIF Version -->
+          <div class="space-y-4">
+            <h3 class="font-medium text-pink-500">GIF Version</h3>
+            <div class="flex items-center gap-4">
+              <img 
+                src="https://storj.hack13.download/cdn/buttons/hack13-alt.gif" 
+                alt="Hack13 Alt Button (GIF)" 
+                width="88" 
+                height="31"
+                class="border border-purple-400 rounded"
+              />
+              <a 
+                href="https://storj.hack13.download/cdn/buttons/hack13-alt.gif" 
+                download
+                class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
+              >
+                Download GIF
+              </a>
+            </div>
+            <div class="relative">
+              <textarea 
+                readonly 
+                class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
+              >{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/hack13-alt.gif" alt="Hack13 Alt Button" width="88" height="31"></a>`}</textarea>
+              <button 
+                onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
+                class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
+              >
+                Copy
+              </button>
+            </div>
+          </div>
+
+          <!-- WebP Version -->
+          <div class="space-y-4">
+            <h3 class="font-medium text-pink-500">WebP Version</h3>
+            <div class="flex items-center gap-4">
+              <img 
+                src="https://storj.hack13.download/cdn/buttons/hack13-alt.webp" 
+                alt="Hack13 Alt Button (WebP)" 
+                width="88" 
+                height="31"
+                class="border border-purple-400 rounded"
+              />
+              <a 
+                href="https://storj.hack13.download/cdn/buttons/hack13-alt.webp" 
+                download
+                class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
+              >
+                Download WebP
+              </a>
+            </div>
+            <div class="relative">
+              <textarea 
+                readonly 
+                class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
+              >{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/hack13-alt.webp" alt="Hack13 Alt Button" width="88" height="31"></a>`}</textarea>
+              <button 
+                onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
+                class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
+              >
+                Copy
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Two Version Button Section -->
+      <div class="bg-pink-200 border-purple-400 border-4 rounded-md p-6">
+        <h2 class="text-xl font-semibold mb-4 text-pink-500">Two Version Button</h2>
+        
+        <div class="grid md:grid-cols-2 gap-6">
+          <!-- GIF Version -->
+          <div class="space-y-4">
+            <h3 class="font-medium text-pink-500">GIF Version</h3>
+            <div class="flex items-center gap-4">
+              <img 
+                src="https://storj.hack13.download/cdn/buttons/two-version-btn.gif" 
+                alt="Two Version Button (GIF)" 
+                width="88" 
+                height="31"
+                class="border border-purple-400 rounded"
+              />
+              <a 
+                href="https://storj.hack13.download/cdn/buttons/two-version-btn.gif" 
+                download
+                class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
+              >
+                Download GIF
+              </a>
+            </div>
+            <div class="relative">
+              <textarea 
+                readonly 
+                class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
+              >{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/two-version-btn.gif" alt="Two Version Button" width="88" height="31"></a>`}</textarea>
+              <button 
+                onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
+                class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
+              >
+                Copy
+              </button>
+            </div>
+          </div>
+
+          <!-- WebP Version -->
+          <div class="space-y-4">
+            <h3 class="font-medium text-pink-500">WebP Version</h3>
+            <div class="flex items-center gap-4">
+              <img 
+                src="https://storj.hack13.download/cdn/buttons/two-version-btn.webp" 
+                alt="Two Version Button (WebP)" 
+                width="88" 
+                height="31"
+                class="border border-purple-400 rounded"
+              />
+              <a 
+                href="https://storj.hack13.download/cdn/buttons/two-version-btn.webp" 
+                download
+                class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
+              >
+                Download WebP
+              </a>
+            </div>
+            <div class="relative">
+              <textarea 
+                readonly 
+                class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
+              >{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/two-version-btn.webp" alt="Two Version Button" width="88" height="31"></a>`}</textarea>
+              <button 
+                onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
+                class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
+              >
+                Copy
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</Layout>
+
+<script>
+  // Add click handlers for copy buttons
+  document.querySelectorAll('button').forEach(button => {
+    button.addEventListener('click', function() {
+      const textarea = this.previousElementSibling as HTMLTextAreaElement;
+      navigator.clipboard.writeText(textarea.value);
+      
+      // Visual feedback
+      const originalText = this.textContent;
+      this.textContent = 'Copied!';
+      setTimeout(() => {
+        this.textContent = originalText;
+      }, 2000);
+    });
+  });
+</script>
diff --git a/src/pages/shrines/index.astro b/src/pages/shrines/index.astro
index 373925d..c06d042 100644
--- a/src/pages/shrines/index.astro
+++ b/src/pages/shrines/index.astro
@@ -3,14 +3,6 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <Layout title="Shrines">
-  <div class="text-center mb-4">
-    <img
-      src="/images/sparkle-divider.gif"
-      alt="sparkly divider"
-      class="mx-auto"
-    />
-  </div>
-
   <h1 class="text-3xl font-bold text-center mb-4 font-comic">
     ✨ Shrines To My Favorites ✨
   </h1>
@@ -19,23 +11,9 @@ import Layout from "../../layouts/Layout.astro";
     This page sections out places I have a fondness for or used to have a huge
     love for.
   </p>
-
-  <div class="text-center">
-    <img
-      src="/images/under-construction.gif"
-      alt="Under Construction"
-      class="mx-auto mb-2"
-    />
-    <p class="text-purple-600 animate-pulse">
-      🚧 This shrine is under construction! 🚧
-    </p>
-  </div>
-
-  <div class="text-center mt-4">
-    <img
-      src="/images/sparkle-divider.gif"
-      alt="sparkly divider"
-      class="mx-auto"
-    />
+  <div class="flex justify-center">
+  <button class="bg-pink-500 text-white px-4 py-2 rounded-md">
+      <a href="/shrines/buttons">88x31 Buttons</a>
+    </button>
   </div>
 </Layout>