From d58ba122c085abc874dd24fa0b7d06fc045e1d57 Mon Sep 17 00:00:00 2001
From: Omar Najjar <omar@bored.investments>
Date: Sun, 13 Apr 2025 03:10:56 +1000
Subject: [PATCH] x

---
 ...0262cdecb68465ef42397257c1000001962afa96be | 1242 +++++++++++++++++
 ...757e2bb35086217b5b783f6c3b2f53e05d7.sqlite |  Bin 0 -> 4096 bytes
 ...2bb35086217b5b783f6c3b2f53e05d7.sqlite-shm |  Bin 0 -> 32768 bytes
 ...2bb35086217b5b783f6c3b2f53e05d7.sqlite-wal |  Bin 0 -> 37112 bytes
 node_modules/.mf/cf.json                      |    1 +
 wrangler.toml                                 |    5 +
 6 files changed, 1248 insertions(+)
 create mode 100644 .wrangler/state/v3/r2/assets/blobs/b001bfbb03f029443c79b0860dae8e4710394f0262cdecb68465ef42397257c1000001962afa96be
 create mode 100644 .wrangler/state/v3/r2/miniflare-R2BucketObject/299a2f66a79fcedbb151ae222146d757e2bb35086217b5b783f6c3b2f53e05d7.sqlite
 create mode 100644 .wrangler/state/v3/r2/miniflare-R2BucketObject/299a2f66a79fcedbb151ae222146d757e2bb35086217b5b783f6c3b2f53e05d7.sqlite-shm
 create mode 100644 .wrangler/state/v3/r2/miniflare-R2BucketObject/299a2f66a79fcedbb151ae222146d757e2bb35086217b5b783f6c3b2f53e05d7.sqlite-wal
 create mode 100644 node_modules/.mf/cf.json

diff --git a/.wrangler/state/v3/r2/assets/blobs/b001bfbb03f029443c79b0860dae8e4710394f0262cdecb68465ef42397257c1000001962afa96be b/.wrangler/state/v3/r2/assets/blobs/b001bfbb03f029443c79b0860dae8e4710394f0262cdecb68465ef42397257c1000001962afa96be
new file mode 100644
index 0000000..7b2ab92
--- /dev/null
+++ b/.wrangler/state/v3/r2/assets/blobs/b001bfbb03f029443c79b0860dae8e4710394f0262cdecb68465ef42397257c1000001962afa96be
@@ -0,0 +1,1242 @@
+
+        :root {
+            --primary: #ff0099;
+            --primary-light: #ff66c4;
+            --primary-dark: #cc007a;
+            --secondary: #ffffff;
+            --accent: #ff0099;
+            --dark: #000000;
+            --darker: #111111;
+            --light: #ffffff;
+            --border: #333333;
+            --text: #ffffff;
+            --text-muted: #aaaaaa;
+            --success: #11cc77;
+            --danger: #ff0099;
+            --card-bg: rgba(0, 0, 0, 0.8);
+        }
+        
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Roboto Mono', monospace;
+        }
+        
+        body {
+            background-color: var(--dark);
+            color: var(--text);
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 40px 20px;
+        }
+        
+        header {
+            text-align: center;
+            margin-bottom: 50px;
+            padding: 40px 20px;
+            border-radius: 0;
+            background: var(--card-bg);
+            border: 1px solid var(--primary);
+            box-shadow: 0 0 20px rgba(255, 0, 153, 0.3);
+        }
+        
+        header h1 {
+            font-size: 4rem;
+            font-weight: 700;
+            letter-spacing: -2px;
+            margin-bottom: 5px;
+            text-transform: uppercase;
+            color: var(--primary);
+            text-shadow: 0 0 10px rgba(255, 0, 153, 0.5);
+        }
+        
+        header p {
+            font-size: 1.1rem;
+            font-weight: 400;
+            margin-top: 10px;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+            color: var(--text);
+        }
+        
+        .tagline {
+            display: inline-block;
+            background-color: var(--primary);
+            padding: 8px 20px;
+            border-radius: 0;
+            font-size: 0.9rem;
+            margin-top: 20px;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+            color: var(--dark);
+            font-weight: 600;
+        }
+        
+        .new-proposal {
+            background: var(--card-bg);
+            border-radius: 0;
+            padding: 30px;
+            margin-bottom: 40px;
+            box-shadow: 0 0 20px rgba(255, 0, 153, 0.2);
+            border: 1px solid var(--border);
+            transition: all 0.3s ease;
+        }
+        
+        .new-proposal:hover {
+            box-shadow: 0 0 30px rgba(255, 0, 153, 0.3);
+            border-color: var(--primary);
+        }
+        
+        .proposal-input {
+            width: 100%;
+            padding: 20px;
+            border: none;
+            border-radius: 0;
+            resize: none;
+            font-size: 16px;
+            margin-bottom: 15px;
+            background-color: rgba(17, 17, 17, 1);
+            color: var(--text);
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+            transition: all 0.3s ease;
+            border: 1px solid var(--border);
+            font-family: 'Roboto Mono', monospace;
+        }
+        
+        .proposal-input:focus {
+            outline: none;
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 0, 153, 0.3);
+            border-color: var(--primary);
+        }
+        
+        .proposal-input::placeholder {
+            color: var(--text-muted);
+        }
+        
+        .char-counter {
+            font-size: 14px;
+            color: var(--text-muted);
+            text-align: right;
+            margin-bottom: 20px;
+            font-weight: 400;
+        }
+        
+        .char-counter.limit {
+            color: var(--primary);
+            font-weight: 700;
+        }
+        
+        .post-button {
+            background-color: var(--primary);
+            color: var(--dark);
+            border: none;
+            border-radius: 0;
+            padding: 12px 30px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            float: right;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            box-shadow: 0 0 10px rgba(255, 0, 153, 0.3);
+            transition: all 0.3s ease;
+            font-family: 'Roboto Mono', monospace;
+        }
+        
+        .post-button:hover {
+            background-color: var(--primary-light);
+            transform: translateY(-2px);
+            box-shadow: 0 0 15px rgba(255, 0, 153, 0.4);
+        }
+        
+        .post-button:active {
+            transform: translateY(1px);
+            box-shadow: 0 0 5px rgba(255, 0, 153, 0.4);
+        }
+        
+        .post-button:disabled {
+            background-color: #333;
+            color: #555;
+            cursor: not-allowed;
+            box-shadow: none;
+            transform: none;
+        }
+        
+        .proposals {
+            margin-top: 40px;
+        }
+        
+        .filter-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+            border-bottom: 1px solid var(--border);
+            padding-bottom: 15px;
+        }
+        
+        .filter-title {
+            font-size: 1.1rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: var(--primary);
+        }
+        
+        .sort-select {
+            padding: 10px 20px;
+            border-radius: 0;
+            border: 1px solid var(--border);
+            background-color: var(--darker);
+            color: var(--text);
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-family: 'Roboto Mono', monospace;
+        }
+        
+        .sort-select:hover {
+            border-color: var(--primary);
+        }
+        
+        .sort-select:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(255, 0, 153, 0.3);
+        }
+        
+        .proposal-card {
+            background: var(--card-bg);
+            border-radius: 0;
+            padding: 30px;
+            margin-bottom: 25px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+            border: 1px solid var(--border);
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        
+        .proposal-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 0 30px rgba(255, 0, 153, 0.2);
+            border-color: var(--primary);
+        }
+        
+        .proposal-author {
+            font-weight: 600;
+            margin-bottom: 15px;
+            font-size: 1rem;
+            color: var(--primary);
+        }
+        
+        .proposal-text {
+            margin-bottom: 15px;
+            word-wrap: break-word;
+            font-size: 1.1rem;
+            line-height: 1.7;
+            color: var(--text);
+        }
+        
+        .proposal-stats {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 14px;
+            border-top: 1px solid var(--border);
+            padding-top: 15px;
+        }
+        
+        .vote-buttons {
+            display: flex;
+            gap: 15px;
+        }
+        
+        .vote-button {
+            background: var(--darker);
+            border: 1px solid var(--border);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            color: var(--text-muted);
+            font-size: 14px;
+            transition: all 0.2s ease;
+            padding: 6px 14px;
+            border-radius: 0;
+            font-family: 'Roboto Mono', monospace;
+        }
+        
+        .vote-button:hover {
+            background-color: var(--darker);
+            color: var(--text);
+            border-color: var(--primary);
+        }
+        
+        .vote-button.upvoted {
+            color: var(--dark);
+            background-color: var(--primary);
+            border-color: var(--primary);
+        }
+        
+        .vote-button.downvoted {
+            color: var(--primary);
+            background-color: transparent;
+            border-color: var(--primary);
+        }
+        
+        .vote-icon {
+            margin-right: 8px;
+            font-size: 16px;
+        }
+        
+        .vote-count {
+            font-weight: 600;
+        }
+        
+        .net-votes {
+            margin-left: 10px;
+            font-weight: 600;
+        }
+        
+        .net-votes.positive {
+            color: var(--primary);
+        }
+        
+        .net-votes.negative {
+            color: var(--text-muted);
+        }
+        
+        .proposal-time {
+            color: var(--text-muted);
+            font-size: 0.85rem;
+        }
+        
+        .empty-state {
+            text-align: center;
+            padding: 60px 40px;
+            color: var(--text-muted);
+            background: var(--card-bg);
+            border-radius: 0;
+            border: 1px dashed var(--border);
+        }
+        
+        .empty-state p {
+            font-size: 1.2rem;
+            margin-bottom: 20px;
+        }
+        
+        .power-badge {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background-color: var(--primary);
+            color: var(--dark);
+            padding: 5px 12px;
+            border-radius: 0;
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .trending-badge {
+            background-color: var(--light);
+            color: var(--dark);
+        }
+        
+        footer {
+            text-align: center;
+            margin-top: 80px;
+            padding: 30px 20px;
+            color: var(--text-muted);
+            font-size: 14px;
+            border-top: 1px solid var(--border);
+        }
+        
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            gap: 30px;
+            margin-top: 20px;
+        }
+        
+        .footer-links a {
+            color: var(--primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-weight: 500;
+        }
+        
+        .footer-links a:hover {
+            color: var(--primary-light);
+            text-decoration: underline;
+        }
+        
+        .loading-indicator {
+            text-align: center;
+            padding: 30px;
+            color: var(--text-muted);
+        }
+        
+        .loading-spinner {
+            display: inline-block;
+            width: 30px;
+            height: 30px;
+            border: 3px solid var(--primary);
+            border-radius: 50%;
+            border-top-color: transparent;
+            animation: spin 1s linear infinite;
+            margin-bottom: 15px;
+        }
+        
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        
+        .error-state {
+            text-align: center;
+            padding: 40px;
+            color: var(--text-muted);
+            background: var(--card-bg);
+            border-radius: 0;
+            border: 1px dashed var(--primary);
+        }
+        
+        .error-state p {
+            font-size: 1.2rem;
+            margin-bottom: 20px;
+            color: var(--primary);
+        }
+        
+        .retry-button {
+            background-color: var(--primary);
+            color: var(--dark);
+            border: none;
+            border-radius: 0;
+            padding: 10px 20px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-top: 15px;
+            font-family: 'Roboto Mono', monospace;
+        }
+
+        /* Petition Modal Styles */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.85);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            backdrop-filter: blur(4px);
+        }
+        
+        .modal-container {
+            background: var(--card-bg);
+            width: 90%;
+            max-width: 500px;
+            border: 1px solid var(--primary);
+            box-shadow: 0 0 30px rgba(255, 0, 153, 0.4);
+            padding: 0;
+            position: relative;
+        }
+        
+        .modal-header {
+            padding: 20px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .modal-header h3 {
+            margin: 0;
+            color: var(--primary);
+            font-size: 1.2rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .modal-close {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            font-size: 20px;
+            cursor: pointer;
+            padding: 0;
+            margin: 0;
+        }
+        
+        .modal-close:hover {
+            color: var(--primary);
+        }
+        
+        .modal-body {
+            padding: 20px;
+        }
+        
+        .modal-body p {
+            margin-bottom: 20px;
+            font-size: 0.9rem;
+            line-height: 1.6;
+        }
+        
+        .petition-form {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        
+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+        
+        .form-group label {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            font-weight: 500;
+        }
+        
+        .form-input {
+            padding: 12px;
+            background-color: var(--darker);
+            border: 1px solid var(--border);
+            color: var(--text);
+            font-size: 14px;
+            font-family: 'Roboto Mono', monospace;
+        }
+        
+        .form-input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 2px rgba(255, 0, 153, 0.2);
+        }
+        
+        .form-error {
+            color: var(--primary);
+            font-size: 0.8rem;
+            margin-top: 5px;
+        }
+        
+        .consent-checkbox {
+            display: flex;
+            align-items: flex-start;
+            gap: 10px;
+            margin-top: 10px;
+        }
+        
+        .consent-checkbox input {
+            margin-top: 2px;
+        }
+        
+        .consent-checkbox label {
+            font-size: 0.8rem;
+            line-height: 1.4;
+            color: var(--text-muted);
+        }
+        
+        .petition-submit-btn {
+            background-color: var(--primary);
+            color: var(--dark);
+            border: none;
+            padding: 12px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-top: 10px;
+            transition: all 0.3s ease;
+            font-family: 'Roboto Mono', monospace;
+        }
+        
+        .petition-submit-btn:hover:not([disabled]) {
+            background-color: var(--primary-light);
+            transform: translateY(-2px);
+        }
+        
+        .petition-submit-btn:disabled {
+            background-color: #333;
+            color: #555;
+            cursor: not-allowed;
+            transform: none;
+        }
+        
+        .petition-badge {
+            background-color: #11cc77;
+            color: var(--dark);
+        }
+        
+        .petition-info {
+            padding: 10px 20px;
+            margin-top: -10px;
+            margin-bottom: 15px;
+            font-size: 0.8rem;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background-color: rgba(17, 204, 119, 0.1);
+            border-top: 1px solid rgba(17, 204, 119, 0.3);
+            border-bottom: 1px solid rgba(17, 204, 119, 0.3);
+        }
+        
+        .petition-icon {
+            color: #11cc77;
+            font-weight: bold;
+        }
+        
+        .petition-count {
+            font-weight: 600;
+            color: #11cc77;
+        }
+        
+        .info-text {
+            font-style: italic;
+            font-size: 0.7rem;
+            color: var(--text-muted);
+            line-height: 1.4;
+            margin-top: 5px;
+            border-left: 2px solid var(--border);
+            padding-left: 10px;
+        }
+        
+        /* Meme Upload Styles */
+        .meme-upload {
+            margin: 15px 0;
+            padding: 15px;
+            border: 1px solid var(--border);
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+        
+        .meme-upload-label {
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            background-color: var(--darker);
+            padding: 10px 15px;
+            border: 1px dashed var(--border);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            width: 100%;
+        }
+        
+        .meme-upload-label:hover {
+            border-color: var(--primary);
+            background-color: rgba(255, 0, 153, 0.1);
+        }
+        
+        .meme-upload-input {
+            display: none;
+        }
+        
+        .meme-upload-icon {
+            color: var(--primary);
+            font-size: 1.5rem;
+        }
+        
+        .meme-upload-text {
+            font-size: 0.9rem;
+            color: var(--text-muted);
+        }
+        
+        .meme-preview {
+            width: 100%;
+            max-height: 300px;
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            position: relative;
+            border: 1px solid var(--border);
+            background-color: var(--darker);
+            margin-top: 15px;
+            padding: 10px;
+        }
+        
+        .meme-preview img {
+            max-width: 100%;
+            max-height: 250px;
+            object-fit: contain;
+            margin: 10px 0;
+        }
+        
+        .meme-remove {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: rgba(0, 0, 0, 0.7);
+            color: var(--light);
+            border: none;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+        
+        .meme-remove:hover {
+            background-color: var(--primary);
+        }
+        
+        .meme-upload-progress {
+            margin-top: 10px;
+            height: 6px;
+            width: 100%;
+            background-color: var(--darker);
+            overflow: hidden;
+            border-radius: 3px;
+        }
+        
+        .meme-upload-progress-bar {
+            height: 100%;
+            background-color: var(--primary);
+            width: 0;
+            transition: width 0.3s ease;
+        }
+        
+        .proposal-meme {
+            margin: 15px 0;
+            border: 1px solid var(--border);
+            padding: 10px;
+            background-color: rgba(0, 0, 0, 0.3);
+            text-align: center;
+        }
+        
+        .proposal-meme img {
+            max-width: 100%;
+            max-height: 300px;
+            object-fit: contain;
+            display: inline-block;
+        }
+        
+        @media (max-width: 600px) {
+            .container {
+                padding: 20px;
+            }
+            
+            header h1 {
+                font-size: 2.5rem;
+            }
+            
+            header, .new-proposal, .proposal-card {
+                padding: 25px;
+            }
+            
+            .filter-bar {
+                flex-direction: column;
+                gap: 15px;
+                align-items: flex-start;
+            }
+            
+            .modal-container {
+                width: 95%;
+                max-height: 90vh;
+                overflow-y: auto;
+            }
+
+            /* Add these styles to your existing CSS */
+
+.share-button {
+  background: var(--darker);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  font-size: 14px;
+  transition: all 0.2s ease;
+  padding: 6px 14px;
+  border-radius: 0;
+  margin-left: 10px;
+}
+
+.share-icon {
+  display: block;
+  background-color: transparent !important;
+  mix-blend-mode: screen; /* This helps with image transparency */
+}
+
+
+/* Optional: Add a tooltip for the share button */
+.share-button {
+    position: relative;
+}
+
+.share-button::after {
+    content: 'Copy link';
+    position: absolute;
+    top: -25px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--primary);
+    color: var(--dark);
+    padding: 4px 8px;
+    font-size: 10px;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease;
+}
+
+.share-button:hover::after {
+    opacity: 1;
+    visibility: visible;
+}
+
+.share-button.copied::after {
+    content: 'Copied!';
+}
+
+/* Styles for the proposal view modal */
+.modal-container.proposal-view {
+    max-width: 600px;
+}
+
+.modal-body .proposal-text {
+    font-size: 1.3rem;
+    margin: 20px 0;
+    line-height: 1.7;
+}
+
+.share-link-container {
+    display: flex;
+    gap: 10px;
+    margin-top: 15px;
+}
+
+.share-link-field {
+    flex: 1;
+    padding: 12px;
+    background-color: var(--darker);
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    font-size: 14px;
+    font-family: 'Roboto Mono', monospace;
+    cursor: text;
+}
+
+.share-copy-button {
+    background-color: var(--primary);
+    color: var(--dark);
+    border: none;
+    padding: 0 15px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: all 0.3s ease;
+    font-family: 'Roboto Mono', monospace;
+}
+
+.share-copy-button:hover {
+    background-color: var(--primary-light);
+}
+
+/* Social share buttons */
+.social-share-buttons {
+    display: flex;
+    gap: 10px;
+    margin-top: 15px;
+}
+
+.social-share-button {
+    background-color: var(--darker);
+    color: var(--text);
+    border: 1px solid var(--border);
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.social-share-button:hover {
+    background-color: var(--primary);
+    color: var(--dark);
+    border-color: var(--primary);
+}
+
+.social-icon {
+    font-size: 16px;
+}
+
+/* Animation for copying */
+@keyframes copyFlash {
+    0% { background-color: var(--primary); }
+    100% { background-color: var(--darker); }
+}
+
+.flash-animation {
+    animation: copyFlash 0.5s;
+}
+        }
+
+        /* Comments Section Styles */
+.comments-section {
+  margin-top: 15px;
+  border-top: 1px solid var(--border);
+  padding-top: 15px;
+}
+
+.comments-toggle {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+  padding: 0;
+  margin-bottom: 10px;
+}
+
+.comments-toggle:hover {
+  color: var(--primary);
+}
+
+.comments-toggle-icon {
+  margin-right: 5px;
+  transition: transform 0.3s ease;
+}
+
+.comments-toggle[aria-expanded="true"] .comments-toggle-icon {
+  transform: rotate(90deg);
+}
+
+.comments-container {
+  display: none;
+  margin-top: 10px;
+}
+
+.comments-container.show {
+  display: block;
+}
+
+.comment-item {
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.comment-item:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.comment-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+}
+
+.comment-author {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--primary);
+}
+
+.comment-time {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.comment-text {
+  font-size: 0.95rem;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.comment-form {
+  display: flex;
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+
+.comment-input {
+  flex: 1;
+  padding: 10px;
+  background-color: var(--darker);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 0.9rem;
+  resize: none;
+  min-height: 38px;
+  max-height: 100px;
+  overflow-y: auto;
+  font-family: 'Roboto Mono', monospace;
+}
+
+.comment-input:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.comment-submit {
+  background-color: var(--primary);
+  color: var(--dark);
+  border: none;
+  padding: 0 15px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: 'Roboto Mono', monospace;
+}
+
+.comment-submit:disabled {
+  background-color: #333;
+  color: #555;
+  cursor: not-allowed;
+}
+
+.comments-loading {
+  text-align: center;
+  padding: 10px;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+}
+
+.no-comments {
+  text-align: center;
+  padding: 15px 0;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  font-style: italic;
+}   
+
+.music-controls {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 1000;
+        background-color: var(--card-bg);
+        border: 1px solid var(--primary);
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        box-shadow: 0 0 10px rgba(255, 0, 153, 0.3);
+        transition: all 0.3s ease;
+    }
+    
+    .music-controls:hover {
+        box-shadow: 0 0 15px rgba(255, 0, 153, 0.5);
+    }
+    
+    .music-button {
+        background: none;
+        border: none;
+        color: var(--text);
+        font-size: 24px;
+        cursor: pointer;
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+    }
+    
+    .music-button:hover {
+        color: var(--primary);
+        transform: scale(1.1);
+    }
+    
+    .music-label {
+        color: var(--text-muted);
+        font-size: 12px;
+        font-family: 'Roboto Mono', monospace;
+    }
+    
+    @keyframes spin {
+        0% { transform: rotate(0deg) scale(1); }
+        100% { transform: rotate(360deg) scale(1); }
+    }
+    
+    @keyframes pulse {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.1); }
+        100% { transform: scale(1); }
+    }
+    
+    .vinyl-spinning {
+        display: inline-block;
+        animation: spin 3s linear infinite;
+        transform-origin: center center;
+        font-size: 28px; /* Make it a bit bigger than the radio */
+    }
+    
+    .vinyl-ready {
+        display: inline-block;
+        font-size: 24px;
+        animation: pulse 2s infinite;
+    }
+
+    /* Initial prompt to click for music */
+    .music-prompt {
+        position: fixed;
+        bottom: 80px;
+        right: 20px;
+        background-color: var(--primary);
+        color: var(--dark);
+        padding: 8px 15px;
+        font-size: 12px;
+        font-family: 'Roboto Mono', monospace;
+        border-radius: 0;
+        opacity: 0;
+        transform: translateY(20px);
+        transition: all 0.3s ease;
+        pointer-events: none;
+        z-index: 1000;
+    }
+    
+    .music-prompt.visible {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+.loader {
+    width: 16px;
+    height: 16px;
+    border: 3px solid #FFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+    }
+
+    @keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+a {
+    text-decoration: unset;
+    color: unset;
+}
+
+/* Comment voting styles */
+.comment-vote-buttons {
+    display: flex;
+    align-items: center;
+    margin-top: 8px;
+  }
+  
+  .comment-vote-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--text-light);
+    padding: 3px 6px;
+    border-radius: 3px;
+    margin-right: 10px;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+  }
+  
+  .comment-vote-button:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+  
+  .comment-vote-button.upvoted {
+    color: var(--primary);
+  }
+  
+  .comment-vote-button.downvoted {
+    color: var(--primary);
+  }
+  
+  .comment-vote-icon {
+    font-size: 10px;
+    margin-right: 4px;
+  }
+  
+  .comment-vote-count {
+    font-size: 12px;
+    min-width: 15px;
+    text-align: center;
+  }
+  
+  /* Adjust existing comment styles to accommodate voting */
+  .comment-item {
+    padding: 12px;
+    border-bottom: 1px solid var(--border);
+    animation: fadeIn 0.3s ease;
+  }
+  
+  .comment-text {
+    margin: 6px 0;
+    font-size: 14px;
+    line-height: 1.4;
+    word-break: break-word;
+  }
+  
+  .comment-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 8px;
+  }
+  
+  /* Mobile optimizations */
+  @media (max-width: 768px) {
+    .comment-vote-buttons {
+      margin-top: 6px;
+    }
+    
+    .comment-vote-button {
+      padding: 2px 4px;
+    }
+  }
+
+  .login-link {
+    display: inline-block;
+    background-color: var(--primary);
+    color: var(--dark);
+    padding: 8px 20px;
+    border-radius: 0;
+    font-size: 0.9rem;
+    margin-top: 20px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.login-link:hover {
+    background-color: var(--primary-light);
+    transform: translateY(-2px);
+    box-shadow: 0 0 15px rgba(255, 0, 153, 0.4);
+}
\ No newline at end of file
diff --git a/.wrangler/state/v3/r2/miniflare-R2BucketObject/299a2f66a79fcedbb151ae222146d757e2bb35086217b5b783f6c3b2f53e05d7.sqlite b/.wrangler/state/v3/r2/miniflare-R2BucketObject/299a2f66a79fcedbb151ae222146d757e2bb35086217b5b783f6c3b2f53e05d7.sqlite
new file mode 100644
index 0000000000000000000000000000000000000000..0b58f0dca7d6ce95907cb0b322dc4802f04688c0
GIT binary patch
literal 4096
zcmWFz^vNtqRY=P(%1ta$FlG>7U}9o$P*7lCU|@t|AVoG{WYDXN;00+HAlr;ljiVtj
n8UmvsFd71*Aut*OqaiRF0;3@?8UmvsFd71*Aut*O6ovo**AfQj

literal 0
HcmV?d00001

diff --git a/.wrangler/state/v3/r2/miniflare-R2BucketObject/299a2f66a79fcedbb151ae222146d757e2bb35086217b5b783f6c3b2f53e05d7.sqlite-shm b/.wrangler/state/v3/r2/miniflare-R2BucketObject/299a2f66a79fcedbb151ae222146d757e2bb35086217b5b783f6c3b2f53e05d7.sqlite-shm
new file mode 100644
index 0000000000000000000000000000000000000000..a01b357cfde07272d24f713486f67e6978f2fd4d
GIT binary patch
literal 32768
zcmeI)Ep9?V6b8`gYk6&51!*1zPZL%`Fvw~gD=2GVAsE)d0#MkRIwZE-OGtyQggIYw
zGs)!r%$x;$-S@a;nwW=D-d<yUj+rmo<8ZY8noc$!pM#(NcD8)quXcy-pU=mq&dG27
zUgfg=x5U5CXLyYDDW(_G#^if>w%iv21PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C7
z2oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB=De6Uf#HAyB74
zQ(o%4xLXs5MxpFF5&|^}WXF~es8b-@<%B?;0@<r51nLyXMo}R^fB*pk1PBlyK!5-N
n0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyaGL@r*eWEP

literal 0
HcmV?d00001

diff --git a/.wrangler/state/v3/r2/miniflare-R2BucketObject/299a2f66a79fcedbb151ae222146d757e2bb35086217b5b783f6c3b2f53e05d7.sqlite-wal b/.wrangler/state/v3/r2/miniflare-R2BucketObject/299a2f66a79fcedbb151ae222146d757e2bb35086217b5b783f6c3b2f53e05d7.sqlite-wal
new file mode 100644
index 0000000000000000000000000000000000000000..788a7d4bd8ee820fe49203d4dc1f22d2fbe81089
GIT binary patch
literal 37112
zcmeI*Pi)&%90zbaZJjlx>nc?WJ1}|brJ1(Lj-A-n4iGjMnWX`;Ok0qU@t+qKnlxSP
zPznsx4mcph2~`sU1SdcUX-H_?fL$gbA;g6XC&UiiCqRINz%O>ZwDk&t6VdlIX`bI7
zJMZ&zBKhe>R$kyXnPWfP%`gWTnwCy~bmY;4KhFL6dgbx2oO{inh#f9he*XN;=hoCu
z&OB0X`h;(Ex^2tnrJ#2z#oWj9LEBXDOw&G58Vg>>2OGg_e}6;UN!b*0{Q2|KGruz2
zl)>zOdFJ}`iTx+0jJtkHYK$@nKmY;|fB*y_009X6Zv-wcOr*1t#J;rVTXu_>?S|Rz
zwfyF))%8vK&r2xcPFD3&P3LQ+`^!3?(12ga@ImUWwmOz;HeJ4^pRe(ihl1zXa+$B{
zi+WYBoYc?k=p1(N7UGV%qx~KA-_1&|ZIdo<RBHMIdNtl#*urjg>|F;6tGwnj<PN=v
zZ#}X7y@g$z3&dIWdTq1q7Lw{a_LIc%&1JG4*6tWkSnVwY^*R0&9c;BPWmJrsQ7V_~
zQK5b+Jlw-oW2scF^QZMXe|zjl`JrLwGC7^&vUQ1Nnkz1O+Pl~aE`Us{=Xd(sW<nH9
zF`+QMacL}_RTTE}!GwrM0odLzDjeS<>QR&AxDO349B=G4I3vR13%<W<wu6|smTx7o
zJ3Y_u1VP!OiRW9vbz#k@)PwVcGMCPlYrGJjEt#A#&Sf7{{u$$dV+UkZJh7>=>FoSG
z`=Sz4Mxm#GQ8u-UEvksHVvJo(!{>A;^c3lO&CW`a&A&Ly!(kBj4j+!ehrmlZ+<%Kz
zCRa#tSz~^$C=4X~_R$8tmfshBx6<qUc)sAZZ|Au0zvFLC)535nf##4P009U<00Izz
z00bZa0SG_<0uUHY0Xjzz&kMYB?$9ff7jN8?p@o<ipbAJ3fB*y_009U<00Izz00bZa
zfl(Id{{~?2`+{%Y?apo9)UIN^z$k|tV}k$$AOHafKmY;|fB*y_009WZ0uwYhm>2kP
z@wY4016yxny+G`P3<Mwm0SG_<0uX=z1Rwwb2tZ(z1vomm!MwnyuU<)gF#TQ+>jg$R
z<QN+SAOHafKmY;|fB*y_009U<AQqta7Dx}~1@^shZSjw{K3>Cmf!GHb2tWV=5P$##
zAOHafKmY;|fWRmVY`Y)9waKqP<K<g7=z0Nm=0PTSAVB~E5P$##AOHafKmY;|fB*y_
z@V5dR5<7Kx<JeMaX<~ME*7Mg}#5?YIo-GKX-LP#zY6y8vmL*5gY(Xswu0>QLE21E2
za!^&wJ1%kTqAC{)q#@@eP01G&M-*rhwPN0CSX$90q9CiplGH*&5Ea{Y9E%i0S+=aA
ztVwxWS^uJ_x_MQ~i<(m;nkosRV-rhLBtek{BD#5Y>&Wk0Up{+@{sqIL_alhc3;e<@
wyX)`g4$<`j?944DcpyOl0uX=z1Rwwb2tWV=5P$##ATTll(_@DxZ_ir%1<CXWqW}N^

literal 0
HcmV?d00001

diff --git a/node_modules/.mf/cf.json b/node_modules/.mf/cf.json
new file mode 100644
index 0000000..5725519
--- /dev/null
+++ b/node_modules/.mf/cf.json
@@ -0,0 +1 @@
+{"clientTcpRtt":10,"requestHeaderNames":{},"httpProtocol":"HTTP/1.1","tlsCipher":"AEAD-AES256-GCM-SHA384","continent":"OC","asn":1221,"clientAcceptEncoding":"br, gzip, deflate","verifiedBotCategory":"","country":"AU","region":"New South Wales","tlsClientCiphersSha1":"JZtiTn8H/ntxORk+XXvU2EvNoz8=","tlsClientAuth":{"certIssuerDNLegacy":"","certIssuerSKI":"","certSubjectDNRFC2253":"","certSubjectDNLegacy":"","certFingerprintSHA256":"","certNotBefore":"","certSKI":"","certSerial":"","certIssuerDN":"","certVerified":"NONE","certNotAfter":"","certSubjectDN":"","certPresented":"0","certRevoked":"0","certIssuerSerial":"","certIssuerDNRFC2253":"","certFingerprintSHA1":""},"tlsClientRandom":"ilPa1VNgnrztAxPSGlv993RzvoO9Le0gOgFRtYv2nrc=","tlsExportedAuthenticator":{"clientFinished":"08b29c32b28d2581447d615862fd7a73b66b292bb3eb0f08631e25009ba81410b2cc8bbabb13cfd13065c9b64b0ba299","clientHandshake":"a023c63fd7fa25d2784cefa1f29aa9296e662132f9e5acce858977c66da3016500e69e9b649c8b698d18b1ef1aec95fb","serverHandshake":"f94a8d0f87c4300e44d358ee1dbf4d6a0d8cfe18d7d45231046855d7691a781a568416e72a9065d889fa35f657639010","serverFinished":"9514c7fe6cf67c42c2dd858e6be919947b9aa493d309b6a453a96c4f7581f4ff0b9d522cb2fb1043ac32b4d2d40e7a3d"},"tlsClientHelloLength":"386","colo":"SYD","timezone":"Australia/Sydney","longitude":"150.98450","latitude":"-33.80690","edgeRequestKeepAliveStatus":1,"requestPriority":"","postalCode":"2145","city":"Sydney","tlsVersion":"TLSv1.3","regionCode":"NSW","asOrganization":"Telstra Internet","tlsClientExtensionsSha1Le":"6e+q3vPm88rSgMTN/h7WTTxQ2wQ=","tlsClientExtensionsSha1":"Y7DIC8A6G0/aXviZ8ie/xDbJb7g=","botManagement":{"corporateProxy":false,"verifiedBot":false,"jsDetection":{"passed":false},"staticResource":false,"detectionIds":{},"score":99}}
\ No newline at end of file
diff --git a/wrangler.toml b/wrangler.toml
index 4d7baf2..b9ff90a 100644
--- a/wrangler.toml
+++ b/wrangler.toml
@@ -13,6 +13,11 @@ database_id = "1f2a5273-bfcb-45c8-a759-5d675c05620c"
 binding = "MEMES_BUCKET"
 bucket_name = "memes"
 
+# Static Assets Binding
+[[r2_buckets]]
+binding = "ASSETS"
+bucket_name = "assets"
+
 # Environment variables (optional)
 [vars]
 ENVIRONMENT = "production"