From 1b9b2b4becc7f32b03d602c243f96e0722266686 Mon Sep 17 00:00:00 2001
From: Omar Najjar <omar@bored.investments>
Date: Fri, 7 Mar 2025 20:08:22 +1100
Subject: [PATCH] x

---
 index.html | 767 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 767 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3252443
--- /dev/null
+++ b/index.html
@@ -0,0 +1,767 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RADICAL - Australia's Democratic Revolution</title>
+    <style>
+        :root {
+            --primary: #10b981;
+            --primary-light: #34d399;
+            --primary-dark: #059669;
+            --secondary: #8b5cf6;
+            --accent: #f43f5e;
+            --dark: #0f172a;
+            --darker: #020617;
+            --light: #f8fafc;
+            --border: #1e293b;
+            --text: #e2e8f0;
+            --text-muted: #94a3b8;
+            --success: #10b981;
+            --danger: #ef4444;
+            --card-bg: rgba(30, 41, 59, 0.7);
+        }
+        
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        }
+        
+        body {
+            background-color: var(--dark);
+            background-image: 
+                radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 30%),
+                radial-gradient(circle at 80% 70%, rgba(20, 184, 166, 0.1) 0%, transparent 30%);
+            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: 16px;
+            background: var(--card-bg);
+            border: 1px solid var(--border);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+        
+        header h1 {
+            font-size: 4rem;
+            font-weight: 800;
+            letter-spacing: -2px;
+            margin-bottom: 5px;
+            text-transform: uppercase;
+            background: linear-gradient(to right, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        
+        header p {
+            font-size: 1.2rem;
+            font-weight: 300;
+            margin-top: 10px;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+            color: var(--text-muted);
+        }
+        
+        .tagline {
+            display: inline-block;
+            background-color: rgba(255, 255, 255, 0.05);
+            padding: 8px 20px;
+            border-radius: 50px;
+            font-size: 0.9rem;
+            margin-top: 20px;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .new-proposal {
+            background: var(--card-bg);
+            border-radius: 16px;
+            padding: 30px;
+            margin-bottom: 40px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            border: 1px solid var(--border);
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+        }
+        
+        .new-proposal:hover {
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+        }
+        
+        .proposal-input {
+            width: 100%;
+            padding: 20px;
+            border: none;
+            border-radius: 12px;
+            resize: none;
+            font-size: 16px;
+            margin-bottom: 15px;
+            background-color: rgba(15, 23, 42, 0.7);
+            color: var(--text);
+            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        
+        .proposal-input:focus {
+            outline: none;
+            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(16, 185, 129, 0.2);
+            border-color: rgba(16, 185, 129, 0.3);
+        }
+        
+        .proposal-input::placeholder {
+            color: var(--text-muted);
+        }
+        
+        .char-counter {
+            font-size: 14px;
+            color: var(--text-muted);
+            text-align: right;
+            margin-bottom: 20px;
+            font-weight: 300;
+        }
+        
+        .char-counter.limit {
+            color: var(--danger);
+            font-weight: 500;
+        }
+        
+        .post-button {
+            background-color: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            padding: 12px 30px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            float: right;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
+            transition: all 0.3s ease;
+        }
+        
+        .post-button:hover {
+            background-color: var(--primary-light);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3);
+        }
+        
+        .post-button:active {
+            transform: translateY(1px);
+            box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
+        }
+        
+        .post-button:disabled {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 0.3);
+            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 rgba(255, 255, 255, 0.05);
+            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: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            background-color: rgba(15, 23, 42, 0.7);
+            color: var(--text);
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .sort-select:hover {
+            background-color: rgba(30, 41, 59, 0.8);
+        }
+        
+        .sort-select:focus {
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
+        }
+        
+        .proposal-card {
+            background: var(--card-bg);
+            border-radius: 16px;
+            padding: 30px;
+            margin-bottom: 25px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            border: 1px solid var(--border);
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        
+        .proposal-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+        }
+        
+        .proposal-author {
+            font-weight: 600;
+            margin-bottom: 15px;
+            font-size: 1rem;
+            color: var(--primary);
+        }
+        
+        .proposal-text {
+            margin-bottom: 25px;
+            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 rgba(255, 255, 255, 0.05);
+            padding-top: 15px;
+        }
+        
+        .vote-buttons {
+            display: flex;
+            gap: 15px;
+        }
+        
+        .vote-button {
+            background: rgba(15, 23, 42, 0.5);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            color: var(--text-muted);
+            font-size: 14px;
+            transition: all 0.2s ease;
+            padding: 6px 14px;
+            border-radius: 8px;
+        }
+        
+        .vote-button:hover {
+            background-color: rgba(30, 41, 59, 0.8);
+            color: var(--text);
+        }
+        
+        .vote-button.upvoted {
+            color: var(--success);
+            background-color: rgba(16, 185, 129, 0.1);
+            border-color: rgba(16, 185, 129, 0.2);
+        }
+        
+        .vote-button.downvoted {
+            color: var(--danger);
+            background-color: rgba(239, 68, 68, 0.1);
+            border-color: rgba(239, 68, 68, 0.2);
+        }
+        
+        .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(--success);
+        }
+        
+        .net-votes.negative {
+            color: var(--danger);
+        }
+        
+        .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: 16px;
+            border: 1px dashed rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+        }
+        
+        .empty-state p {
+            font-size: 1.2rem;
+            margin-bottom: 20px;
+        }
+        
+        .power-badge {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background-color: var(--secondary);
+            color: white;
+            padding: 5px 12px;
+            border-radius: 8px;
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .trending-badge {
+            background-color: var(--accent);
+        }
+        
+        footer {
+            text-align: center;
+            margin-top: 80px;
+            padding: 30px 20px;
+            color: var(--text-muted);
+            font-size: 14px;
+            border-top: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        
+        .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);
+        }
+        
+        /* Glassmorphism effect on cards */
+        .glass {
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+        }
+        
+        /* Responsive design */
+        @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;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header class="glass">
+            <h1>RADICAL</h1>
+            <div class="tagline">Vibe, Vote, Veto</div>
+            <p>Australia's direct democracy movement. Share policy ideas, vote on proposals, take back control.</p>
+        </header>
+        
+        <section class="new-proposal glass">
+            <textarea id="proposal-input" class="proposal-input" placeholder="Your idea to revolutionize Australia? (280 character limit)" maxlength="280"></textarea>
+            <div id="char-counter" class="char-counter">280 characters remaining</div>
+            <button id="post-button" class="post-button" disabled>Post Proposal</button>
+            <div style="clear: both;"></div>
+        </section>
+        
+        <section class="proposals">
+            <div class="filter-bar">
+                <div class="filter-title">Democracy Goes Brrr</div>
+                <select id="sort-select" class="sort-select">
+                    <option value="newest">Latest Ideas</option>
+                    <option value="popular">Most Supported</option>
+                    <option value="controversial">Most Debated</option>
+                </select>
+            </div>
+            
+            <div id="proposals-container">
+                <div class="empty-state glass">
+                    <p>No proposals yet. Be the first to start the revolution!</p>
+                </div>
+            </div>
+        </section>
+        
+        <footer>
+            <p>RADICAL - Direct Democracy Movement 🇦🇺 &copy; 2025</p>
+            <div class="footer-links">
+                <a href="#about">About Us</a>
+                <a href="#join">Join The Movement</a>
+                <a href="#events">Events</a>
+                <a href="#contact">Contact</a>
+            </div>
+        </footer>
+    </div>
+
+    <script>
+        // DOM elements
+        const proposalInput = document.getElementById('proposal-input');
+        const charCounter = document.getElementById('char-counter');
+        const postButton = document.getElementById('post-button');
+        const proposalsContainer = document.getElementById('proposals-container');
+        const sortSelect = document.getElementById('sort-select');
+        
+        // Character limit
+        const CHAR_LIMIT = 280;
+        
+        // Store proposals in local storage
+        let proposals = JSON.parse(localStorage.getItem('radical_proposals')) || [];
+        
+        // User information (in a real app, this would come from authentication)
+        const currentUser = {
+            id: 'citizen_' + Math.random().toString(36).substr(2, 9),
+            name: 'Citizen ' + Math.floor(Math.random() * 9000 + 1000)
+        };
+        
+        // Catchy political slogans for placeholder text
+        const placeholders = [
+            "Your idea to revolutionize Australia? (280 character limit)",
+            "Got a hot take on Australian politics? (280 character limit)",
+            "Parliament failed the vibe check. Your solution? (280 character limit)",
+            "What would make Australia actually slap? (280 character limit)",
+            "Drop your 🔥 policy idea here (280 character limit)"
+        ];
+        
+        // Rotate placeholder text every 5 seconds
+        let placeholderIndex = 0;
+        setInterval(() => {
+            placeholderIndex = (placeholderIndex + 1) % placeholders.length;
+            proposalInput.placeholder = placeholders[placeholderIndex];
+        }, 5000);
+        
+        // Update character counter
+        proposalInput.addEventListener('input', () => {
+            const remaining = CHAR_LIMIT - proposalInput.value.length;
+            charCounter.textContent = `${remaining} characters remaining`;
+            
+            if (remaining < 20) {
+                charCounter.classList.add('limit');
+            } else {
+                charCounter.classList.remove('limit');
+            }
+            
+            // Enable/disable post button
+            postButton.disabled = proposalInput.value.trim().length === 0;
+        });
+        
+        // Post new proposal
+        postButton.addEventListener('click', () => {
+            const text = proposalInput.value.trim();
+            
+            if (text) {
+                const newProposal = {
+                    id: 'proposal_' + Date.now(),
+                    author: currentUser.name,
+                    authorId: currentUser.id,
+                    text: text,
+                    timestamp: Date.now(),
+                    upvotes: 0,
+                    downvotes: 0,
+                    voters: {},
+                    trending: Math.random() > 0.8 // Randomly mark some as trending for effect
+                };
+                
+                // Add to proposals array
+                proposals.unshift(newProposal);
+                
+                // Save to local storage
+                saveProposals();
+                
+                // Clear input
+                proposalInput.value = '';
+                charCounter.textContent = `${CHAR_LIMIT} characters remaining`;
+                postButton.disabled = true;
+                
+                // Show success animation
+                animatePostSuccess();
+                
+                // Render proposals
+                renderProposals();
+            }
+        });
+        
+        // Animation for successful post
+        function animatePostSuccess() {
+            const successEl = document.createElement('div');
+            successEl.textContent = '🔥 Take that, Parliament!';
+            successEl.style.position = 'fixed';
+            successEl.style.bottom = '20px';
+            successEl.style.left = '50%';
+            successEl.style.transform = 'translateX(-50%)';
+            successEl.style.backgroundColor = 'var(--primary)';
+            successEl.style.color = 'white';
+            successEl.style.padding = '12px 24px';
+            successEl.style.borderRadius = '8px';
+            successEl.style.zIndex = '1000';
+            successEl.style.boxShadow = '0 4px 20px rgba(16, 185, 129, 0.3)';
+            successEl.style.transition = 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)';
+            successEl.style.opacity = '0';
+            successEl.style.fontSize = '14px';
+            successEl.style.fontWeight = '500';
+            
+            document.body.appendChild(successEl);
+            
+            // Fade in
+            setTimeout(() => {
+                successEl.style.opacity = '1';
+            }, 100);
+            
+            // Fade out
+            setTimeout(() => {
+                successEl.style.opacity = '0';
+                setTimeout(() => {
+                    document.body.removeChild(successEl);
+                }, 500);
+            }, 3000);
+        }
+        
+        // Sort proposals when sort option changes
+        sortSelect.addEventListener('change', renderProposals);
+        
+        // Save proposals to local storage
+        function saveProposals() {
+            localStorage.setItem('radical_proposals', JSON.stringify(proposals));
+        }
+        
+        // Handle voting
+        function handleVote(proposalId, voteType) {
+            const proposalIndex = proposals.findIndex(p => p.id === proposalId);
+            
+            if (proposalIndex === -1) return;
+            
+            const proposal = proposals[proposalIndex];
+            const previousVote = proposal.voters[currentUser.id];
+            
+            // Remove previous vote if exists
+            if (previousVote) {
+                if (previousVote === 'upvote') {
+                    proposal.upvotes--;
+                } else if (previousVote === 'downvote') {
+                    proposal.downvotes--;
+                }
+            }
+            
+            // Add new vote if not cancelling the same vote
+            if (!previousVote || previousVote !== voteType) {
+                if (voteType === 'upvote') {
+                    proposal.upvotes++;
+                    proposal.voters[currentUser.id] = 'upvote';
+                } else if (voteType === 'downvote') {
+                    proposal.downvotes++;
+                    proposal.voters[currentUser.id] = 'downvote';
+                }
+            } else {
+                // If cancelling the same vote, remove the voter record
+                delete proposal.voters[currentUser.id];
+            }
+            
+            // Update proposals array
+            proposals[proposalIndex] = proposal;
+            
+            // Save to local storage
+            saveProposals();
+            
+            // Re-render proposals
+            renderProposals();
+        }
+        
+        // Format date
+        function formatDate(timestamp) {
+            const now = new Date();
+            const date = new Date(timestamp);
+            const diffMs = now - date;
+            const diffSec = Math.floor(diffMs / 1000);
+            const diffMin = Math.floor(diffSec / 60);
+            const diffHour = Math.floor(diffMin / 60);
+            const diffDay = Math.floor(diffHour / 24);
+            
+            if (diffSec < 60) {
+                return 'just now';
+            } else if (diffMin < 60) {
+                return diffMin + (diffMin === 1 ? ' minute ago' : ' minutes ago');
+            } else if (diffHour < 24) {
+                return diffHour + (diffHour === 1 ? ' hour ago' : ' hours ago');
+            } else if (diffDay < 30) {
+                return diffDay + (diffDay === 1 ? ' day ago' : ' days ago');
+            } else {
+                return date.toLocaleDateString();
+            }
+        }
+        
+        // Render proposals
+        function renderProposals() {
+            // Sort proposals
+            const sortBy = sortSelect.value;
+            
+            if (sortBy === 'newest') {
+                proposals.sort((a, b) => b.timestamp - a.timestamp);
+            } else if (sortBy === 'popular') {
+                proposals.sort((a, b) => (b.upvotes - b.downvotes) - (a.upvotes - a.downvotes));
+            } else if (sortBy === 'controversial') {
+                proposals.sort((a, b) => (b.upvotes + b.downvotes) - (a.upvotes + a.downvotes));
+            }
+            
+            // Clear container
+            proposalsContainer.innerHTML = '';
+            
+            // Show empty state if no proposals
+            if (proposals.length === 0) {
+                proposalsContainer.innerHTML = `
+                    <div class="empty-state glass">
+                        <p>No proposals yet. Be the first to drop your hot take!</p>
+                    </div>
+                `;
+                return;
+            }
+            
+            // Render each proposal
+            proposals.forEach(proposal => {
+                const userVote = proposal.voters[currentUser.id];
+                const netVotes = proposal.upvotes - proposal.downvotes;
+                const voteClass = netVotes > 0 ? 'positive' : netVotes < 0 ? 'negative' : '';
+                
+                const proposalCard = document.createElement('div');
+                proposalCard.className = 'proposal-card glass';
+                
+                // Badge for trending or power proposals
+                const badgeHtml = proposal.trending ? 
+                    `<div class="power-badge trending-badge">🔥 Based</div>` : 
+                    (netVotes > 5 ? `<div class="power-badge">💯 Vibing</div>` : '');
+                
+                proposalCard.innerHTML = `
+                    ${badgeHtml}
+                    <div class="proposal-author">${proposal.author}</div>
+                    <div class="proposal-text">${proposal.text}</div>
+                    <div class="proposal-stats">
+                        <div class="vote-buttons">
+                            <button class="vote-button ${userVote === 'upvote' ? 'upvoted' : ''}" data-proposal-id="${proposal.id}" data-vote-type="upvote">
+                                <span class="vote-icon">↑</span>
+                                <span class="vote-count">${proposal.upvotes}</span>
+                            </button>
+                            <button class="vote-button ${userVote === 'downvote' ? 'downvoted' : ''}" data-proposal-id="${proposal.id}" data-vote-type="downvote">
+                                <span class="vote-icon">↓</span>
+                                <span class="vote-count">${proposal.downvotes}</span>
+                            </button>
+                            <span class="net-votes ${voteClass}">${netVotes > 0 ? '+' : ''}${netVotes}</span>
+                        </div>
+                        <div class="proposal-time">${formatDate(proposal.timestamp)}</div>
+                    </div>
+                `;
+                
+                proposalsContainer.appendChild(proposalCard);
+                
+                // Add event listeners for vote buttons
+                const upvoteButton = proposalCard.querySelector('[data-vote-type="upvote"]');
+                const downvoteButton = proposalCard.querySelector('[data-vote-type="downvote"]');
+                
+                upvoteButton.addEventListener('click', () => {
+                    handleVote(proposal.id, 'upvote');
+                });
+                
+                downvoteButton.addEventListener('click', () => {
+                    handleVote(proposal.id, 'downvote');
+                });
+            });
+        }
+        
+        // Add some sample proposals if there aren't any yet - helps demonstrate functionality
+        if (proposals.length === 0) {
+            const sampleProposals = [
+                {
+                    text: "Politicians should earn the median wage. Watch how quickly they'll fix the economy then lol 💀",
+                    trending: true
+                },
+                {
+                    text: "Every Aussie gets to veto one bill per year. Parliament would actually have to make good laws or we'll just cancel them.",
+                    trending: false
+                },
+                {
+                    text: "Weekly online voting on major decisions. Parliament is just vibes and corruption at this point anyway.",
+                    trending: true
+                }
+            ];
+            
+            const now = Date.now();
+            
+            sampleProposals.forEach((sample, index) => {
+                proposals.push({
+                    id: 'proposal_sample_' + index,
+                    author: 'Radical' + (10000 + index),
+                    authorId: 'sample_' + index,
+                    text: sample.text,
+                    timestamp: now - (index * 3600000), // hours ago
+                    upvotes: Math.floor(Math.random() * 50) + 5,
+                    downvotes: Math.floor(Math.random() * 10),
+                    voters: {},
+                    trending: sample.trending
+                });
+            });
+            
+            saveProposals();
+        }
+        
+        // Initial render
+        renderProposals();
+    </script>
+</body>
+</html>
\ No newline at end of file
