index.html

<!DOCTYPE html>
<html>
<head>
    <title>Digital Solidarity Network</title>
    <!-- Security Headers -->
    <meta http-equiv="Content-Security-Policy" 
          content="default-src 'self';
                   script-src 'self' 'unsafe-inline';
                   style-src 'self' 'unsafe-inline';
                   img-src 'self' data:">
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="X-Frame-Options" content="DENY">
    <meta http-equiv="X-XSS-Protection" content="1; mode=block">

    <style>
        /* Critical CSS to prevent white flash */
        html, body {
            background: black !important;
            margin: 0 !important;
            overflow: hidden !important;
        }
        canvas {
            background: black;
        }

        /* Main CSS */
        body {
            font-family: system-ui, sans-serif;
            color: rgb(255, 255, 255);
        }

        /* Matrix Canvas */
        #matrix {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 0;
            background: linear-gradient(rgba(0,255,0,0.1) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(0,255,0,0.1) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        /* Content Overlay System */
        .content-wrapper {
            position: relative;
            height: 100vh;
            display: flex;
            flex-direction: column;
            z-index: 1;
        }

        /* Scrollable Content */
        .scroll-content {
            flex: 1;
            overflow-y: auto;
            padding: 2rem 0;
        }

        /* Layout Structure */
        .content-column {
            max-width: 600px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Section Styling */
        .section {
            background: rgba(0, 0, 0, 0.9);
            border: 1px solid rgba(0, 255, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
            border-radius: 4px;
        }

        .banner {
            text-align: center;
            margin-bottom: 3rem;
            padding: 2rem;
            border: 1px solid rgba(0, 255, 0, 0.2);
            background: rgba(0, 0, 0, 0.85);
            border-radius: 4px;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.25);
            position: relative;
            overflow: hidden;
        }

        /* Link Styling */
        a.link-block {
            display: block;
            padding: 1rem;
            margin: 0.5rem 0;
            color: #00ff88;
            border: 1px solid rgba(0, 255, 0, 0.1);
            text-decoration: none;
            transition: all 0.2s ease;
        }

        a.link-block:hover {
            background: rgba(0, 255, 0, 0.05);
            border-color: rgba(0, 255, 0, 0.3);
            transform: translateX(5px);
        }

        .link-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .link-title {
            flex: 1;
        }

        .link-description {
            color: #d0d0d0;
            font-size: 0.85em;
            text-align: right;
            padding-left: 1rem;
            max-width: 60%;
        }

        .dropdown-container {
            position: relative;
            margin: 0.5rem 0;
        }

        .dropdown-button {
            width: 100%;
            padding: 1rem;
            text-align: left;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 255, 0, 0.1);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s ease;
            font-family: inherit;
            font-size: 1em;
            margin: 0.5rem 0;
            border-radius: 0;
        }

        .dropdown-button:hover {
            background: rgba(0, 255, 0, 0.05);
            border-color: rgba(0, 255, 0, 0.3);
            transform: translateX(5px);
        }

        .dropdown-button::after {
            content: "▼";
            font-size: 0.8em;
            transition: transform 0.2s ease;
            color: #00ff88;
        }

        .dropdown-button.expanded::after {
            transform: rotate(180deg);
        }

        .dropdown-content {
            display: none;
            padding-left: 1rem;
        }

        .dropdown-content.show {
            display: block;
        }

        .dropdown-content a {
            transform: translateX(10px);
            margin: 0.5rem 0;
        }

        /* Button text styling */
        .button-title {
            color: #00ff88;
            font-weight: bold;
            display: block;
            flex: 1;
        }

        .button-description {
            color: #d0d0d0;
            font-size: 0.9em;
            text-align: right;
            font-weight: normal;
            display: block;
            margin-top: 0.25rem;
            margin-right: 1rem;
        }

        /* No-Script Warning */
        .noscript-warning {
            position: fixed;
            top: 0;
            width: 100%;
            background: #330000;
            color: #ff4444;
            padding: 1rem;
            text-align: center;
            z-index: 9999;
        }

        /* Tor Browser Fallback */
        @media (pointer: coarse) {
            .dropdown-content {
                display: block !important;
            }
        }
    
    /* i hate css. :) */
    </style>
</head>
<body>
    <noscript>
        <div class="noscript-warning">
            ⚠️ Some features require JavaScript. For Tor Browser users, basic functionality remains available.
        </div>
    </noscript>

    <canvas id="matrix"></canvas>

    <div class="content-wrapper">
        <div class="scroll-content">
            <div class="content-column">
                <div class="banner">
                    <h2>We Keep Us Safe</h2>
                </div>

                <!-- Link sections -->
                <!-- currently missing: the Proton suite -->
                <section class="section" id="resources">
                    <h3>Mental Health Resources</h3>
                    <div class="dropdown-container">
                        <button class="dropdown-button" onclick="toggleDropdown(event)">
                            <span class="button-title">Crisis Support Networks</span>
                            <span class="button-description">you are not alone</span>
                        </button>
                        <div class="dropdown-content">
                            <a href="https://translifeline.org/"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="link-block">Mental Health Support Hotline for Trans People</a>

                            <a href="https://www.thetrevorproject.org/get-help/"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="link-block">Trevor Project (LGBTQ+ Crisis Support)</a>

                            <a href="https://www.thehotline.org/get-help/"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="link-block">Domestic Violence Hotline</a>

                            <a href="https://988lifeline.org/"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="link-block">24/7 Suicide Prevention</a>

                            <a href="https://holistic-security.tacticaltech.org/" 
                               target="_blank" 
                               rel="noopener noreferrer" 
                               class="link-block">
                                <div class="link-content">
                                    <span class="link-title">Holistic Security Guide</span>
                                    <span class="link-description">guide for human rights defenders to maintain mental well-being throughout their activism</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </section>

                <section class="section" id="digital-security">
                    <h3>Digital Safety for Activists</h3>
                    
                    <!-- First dropdown: Online Security Guides -->
                    <div class="dropdown-container">
                        <button class="dropdown-button" onclick="toggleDropdown(event)">
                            <span class="button-title">Online Security Guides</span>
                            <span class="button-description">beginners start here</span>
                        </button>
                        <div class="dropdown-content">
                            <a href="https://ssd.eff.org/" 
                               target="_blank" 
                               rel="noopener noreferrer" 
                               class="link-block">
                                <div class="link-content">
                                    <span class="link-title">Surveillance Self-Defense (EFF)</span>
                                    <span class="link-description">beginner's first step</span>
                                </div>
                            </a>
                            
                            <a href="https://www.accessnow.org/wp-content/uploads/2020/10/A-first-look-at-digital-security-OCT2020.pdf" 
                               target="_blank" 
                               rel="noopener noreferrer" 
                               class="link-block">
                                <div class="link-content">
                                    <span class="link-title">Access Now's' First Look at Digital Security</span>
                                    <span class="link-description">easiest to read and understand - perfect for older generations and those with low technological know-how</span>
                                </div>
                            </a>
                            
                            <a href="https://securitylab.amnesty.org/digital-resources/" 
                               target="_blank" 
                               rel="noopener noreferrer" 
                               class="link-block">
                                <div class="link-content">
                                    <span class="link-title">Amnesty International's Security Lab Hub</span>
                                    <span class="link-description">filter resources tailored to your demographic's needs</span>
                                </div>
                            </a>
                            
                            <a href="https://securityinabox.org/en/" 
                               target="_blank" 
                               rel="noopener noreferrer" 
                               class="link-block">
                                <div class="link-content">
                                    <span class="link-title">Security In A Box</span>
                                    <span class="link-description">available in 30+ languages</span>
                                </div>
                            </a>

                            <a href="https://prism-break.org/" 
                               target="_blank" 
                               rel="noopener noreferrer" 
                               class="link-block">
                                <div class="link-content">
                                    <span class="link-title">PRISM Break</span>
                                    <span class="link-description">disconnect from mass surveillance</span>
                                </div>
                            </a>
                        </div>
                    </div>
                    
                    <!-- Second dropdown: Emergency Cybersecurity Help -->
                    <div class="dropdown-container">
                        <button class="dropdown-button" onclick="toggleDropdown(event)">
                            <span class="button-title">Emergency Cybersecurity Help</span>
                            <span class="button-description">immediate help</span>
                        </button>
                        <div class="dropdown-content">
                            <a href="https://accessnow.org/help" 
                               target="_blank" 
                               rel="noopener noreferrer" 
                               class="link-block">
                                <div class="link-content">
                                    <span class="link-title">Access Now's Cybersecurity Helpline</span>
                                    <span class="link-description">contact professionals for free help</span>
                                </div>
                            </a>
                            
                            <a href="https://digitalfirstaid.org/" 
                               target="_blank" 
                               rel="noopener noreferrer" 
                               class="link-block">
                                <div class="link-content">
                                    <span class="link-title">Digital First Aid Kit</span>
                                    <span class="link-description">action steps and immediate guidance</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </section>

                <section class="section" id="projects">
                    <h3>Encrypted Communications</h3>
                    <a href="https://signal.org/" 
                       target="_blank" 
                       rel="noopener noreferrer" 
                       class="link-block">
                        <div class="link-content">
                                <span class="link-title">Signal Messenger</span>
                                <span class="link-description">Privacy focused, powerful, and secure messenging platform.
                        </div>

                    <a href="https://getsession.org/download" 
                       target="_blank" 
                       rel="noopener noreferrer" 
                       class="link-block">
                        <div class="link-content">
                                <span class="link-title">Session, Private Communications Platform</span>
                                <span class="link-description">decentralized, open-source,<br> onion-routed network</span>
                        </div>
                    </a>
                </section>
            </div>
        </div>
    </div>

    <script>
        // Canvas setup - ID changed to match HTML
        const canvas = document.getElementById('matrix');
        const ctx = canvas.getContext('2d');
        
        // Set canvas to full window size
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        // Matrix characters (Katakana, Latin, numbers, symbols)
        const chars = "アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ$#@%&*()[]{}<>";
        const charArray = chars.split('');
        
        // Transgender flag colors in RGB
        const transColors = [
            {r: 91, g: 206, b: 250},   // Light Blue
            {r: 245, g: 169, b: 184},  // Light Pink
            {r: 255, g: 255, b: 255}   // White
        ];
        
        // Font size and columns
        const fontSize = 14;
        const columns = canvas.width / fontSize;
        
        // Drops array - one per column
        const drops = [];
        for (let i = 0; i < columns; i++) {
            drops[i] = Math.floor(Math.random() * canvas.height / fontSize);
        }
        
        // Effect controls - removed button dependencies
        let animationId = null;
        const isPaused = false; // Always running
        const speed = 10; // Fixed speed
        
        // Draw function
        function draw() {
            // Semi-transparent black overlay for trailing effect
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            ctx.font = `${fontSize}px 'Courier New', monospace`;
            ctx.textAlign = 'start';
            
            for (let i = 0; i < drops.length; i++) {
                // Get random character
                const char = charArray[Math.floor(Math.random() * charArray.length)];
                
                const x = i * fontSize;
                const y = drops[i] * fontSize;
                
                // Draw character with gradient effect
                if (Math.random() > 0.975) {
                    // Head character - bright white
                    ctx.fillStyle = '#ffffff';
                } else {
                    // Trail characters - randomly choose from transgender flag colors
                    const color = transColors[Math.floor(Math.random() * transColors.length)];
                    ctx.fillStyle = `rgb(${color.r}, ${color.g}, ${color.b})`;
                }
                
                ctx.fillText(char, x, y);
                
                // Reset drop if it reaches the bottom
                if (y > canvas.height && Math.random() > 0.975) {
                    drops[i] = 0;
                }
                
                // Always move drop down (no pause functionality)
                drops[i]++;
            }
            
            // Animation loop with fixed speed
            setTimeout(() => {
                animationId = requestAnimationFrame(draw);
            }, 25 - (speed * 1.1));
        }
        
        // Initialize the effect
        draw();
        
        // Handle window resize
        window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            // Recalculate columns after resize
            const newColumns = canvas.width / fontSize;
            
            // Adjust drops array for new column count
            if (newColumns > drops.length) {
                // Add new columns
                for (let i = drops.length; i < newColumns; i++) {
                    drops[i] = Math.floor(Math.random() * canvas.height / fontSize);
                }
            } else if (newColumns < drops.length) {
                // Remove extra columns
                drops.length = newColumns;
            }
        });
        
        // Dropdown toggle function
        function toggleDropdown(event) {
            const button = event.currentTarget;
            const container = button.closest('.dropdown-container');
            const content = container.querySelector('.dropdown-content');
            
            // Toggle the expanded class on the button
            button.classList.toggle('expanded');
            
            // Toggle the show class on the dropdown content
            content.classList.toggle('show');
        }
    
    // I HATE JAVASCRIPT OMFGGGG
    </script>
</body>
</html>