proxy-explainer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy Server Explained - Cyberpunk Style</title>
    <style>
        :root {
            --neon-text-color: #f637ec;
            --neon-border-color: #08f7fe;
            --background-color: #0a0a16;
            --grid-color: rgba(8, 247, 254, 0.1);
            --accent-color: #fe53bb;
            --secondary-color: #09fbd3;
            --terminal-green: #39ff14;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Courier New', monospace;
            background-color: var(--background-color);
            color: white;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            min-height: 100vh;
        }

        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(var(--grid-color) 1px, transparent 1px),
                linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: -1;
            animation: grid-move 20s linear infinite;
        }

        .content {
            max-width: 800px;
            width: 100%;
            margin: 40px auto;
            padding: 20px;
            position: relative;
            z-index: 1;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }

        h1 {
            font-size: 3rem;
            margin: 0;
            padding: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: var(--neon-text-color);
            text-shadow: 
                0 0 5px var(--neon-text-color),
                0 0 10px var(--neon-text-color),
                0 0 20px var(--neon-text-color);
            animation: neon-pulse 2s infinite alternate;
        }

        .container {
            position: relative;
            border: 2px solid var(--neon-border-color);
            border-radius: 5px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 0 10px var(--neon-border-color);
            overflow: hidden;
            background-color: rgba(10, 10, 22, 0.8);
        }

        .container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(45deg, transparent 0%, 
                rgba(8, 247, 254, 0.1) 50%, 
                transparent 100%);
            z-index: -1;
            animation: scan-light 4s ease-in-out infinite;
        }

        .code-line {
            font-family: 'Courier New', monospace;
            color: var(--terminal-green);
            padding: 5px 0;
            opacity: 0;
            transform: translateY(20px);
            animation: fade-in 0.5s forwards;
        }

        .animation-container {
            height: 400px;
            width: 100%;
            position: relative;
            border: 2px solid var(--neon-border-color);
            margin: 40px 0;
            border-radius: 5px;
            overflow: visible;
            box-shadow: 0 0 10px var(--neon-border-color);
        }

        .device {
            position: absolute;
            width: 80px;
            height: 60px;
            background-color: var(--secondary-color);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            color: var(--background-color);
            box-shadow: 0 0 10px var(--secondary-color);
            z-index: 10;
            text-align: center;
        }

        .server {
            width: 80px;
            height: 100px;
            background-color: var(--accent-color);
            border-radius: 5px;
            box-shadow: 0 0 10px var(--accent-color);
            right: 50px; /* Ensure server is visible and positioned properly */
        }

        .proxy {
            background-color: var(--neon-text-color);
            box-shadow: 0 0 10px var(--neon-text-color);
        }

        .packet {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: var(--terminal-green);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--terminal-green);
            opacity: 0;
            z-index: 5;
        }

        .line {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.3);
            z-index: 1;
        }

        .info-panel {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 200px;
            padding: 10px;
            background-color: rgba(10, 10, 22, 0.9);
            border: 1px solid var(--neon-border-color);
            border-radius: 5px;
            font-size: 14px;
            color: white;
            box-shadow: 0 0 5px var(--neon-border-color);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .glow-button {
            background-color: transparent;
            border: 2px solid var(--neon-text-color);
            color: var(--neon-text-color);
            padding: 10px 20px;
            font-family: 'Courier New', monospace;
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin: 10px 0;
            cursor: pointer;
            border-radius: 5px;
            transition: all 0.3s ease;
            box-shadow: 0 0 5px var(--neon-text-color);
            text-shadow: 0 0 5px var(--neon-text-color);
        }

        .glow-button:hover {
            background-color: var(--neon-text-color);
            color: var(--background-color);
            box-shadow: 0 0 15px var(--neon-text-color);
        }

        .feature {
            border-left: 3px solid var(--neon-text-color);
            padding-left: 20px;
            margin: 20px 0;
            opacity: 0;
            transform: translateX(20px);
            animation: slide-in 0.5s forwards;
        }

        .feature h3 {
            color: var(--secondary-color);
            margin-bottom: 10px;
            text-shadow: 0 0 5px var(--secondary-color);
        }

        /* Animations */
        @keyframes neon-pulse {
            from {
                text-shadow: 
                    0 0 5px var(--neon-text-color),
                    0 0 10px var(--neon-text-color),
                    0 0 20px var(--neon-text-color);
            }
            to {
                text-shadow: 
                    0 0 5px var(--neon-text-color),
                    0 0 10px var(--neon-text-color),
                    0 0 20px var(--neon-text-color),
                    0 0 30px var(--neon-text-color);
            }
        }

        @keyframes scan-light {
            0% {
                background-position: -100% -100%;
            }
            100% {
                background-position: 200% 200%;
            }
        }

        @keyframes grid-move {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 40px 40px;
            }
        }

        @keyframes fade-in {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slide-in {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes typewriter {
            to {
                width: 100%;
            }
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .content {
                padding: 10px;
            }
            h1 {
                font-size: 2rem;
            }
            .animation-container {
                height: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="grid-bg"></div>
    
    <div class="content">
        <header>
            <h1>PROXY SERVERS</h1>
            <div class="code-line" style="animation-delay: 0.2s; text-align: center;">[ SECURE • BRIDGE • MIDDLEMAN ]</div>
            
            <div class="social-links" style="display: flex; justify-content: center; margin-top: 15px; flex-wrap: wrap; gap: 10px;">
                <a href="https://www.sambent.com" class="social-button website-button" title="Official Website" style="color: var(--secondary-color);">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px;">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="2" y1="12" x2="22" y2="12"></line>
                        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
                    </svg>
                </a>
                <a href="https://github.com/DoingFedTime" class="social-button github-button" title="GitHub" style="color: var(--secondary-color);">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px;">
                        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
                    </svg>
                </a>
                <a href="https://youtube.com/@sam_bent" class="social-button youtube-button" title="YouTube" style="color: var(--secondary-color);">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px;">
                        <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
                        <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
                    </svg>
                </a>
                <a href="https://www.facebook.com/TheOfficialSamBent/" class="social-button facebook-button" title="Facebook" style="color: var(--secondary-color);">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px;">
                        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                    </svg>
                </a>
                <a href="https://twitter.com/DoingFedTime" class="social-button twitter-button" title="Twitter/X" style="color: var(--secondary-color);">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px;">
                        <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
                    </svg>
                </a>
                <a href="https://www.linkedin.com/in/sam-bent/" class="social-button linkedin-button" title="LinkedIn" style="color: var(--secondary-color);">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px;">
                        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                        <rect x="2" y="9" width="4" height="12"></rect>
                        <circle cx="4" cy="4" r="2"></circle>
                    </svg>
                </a>
                <a href="mailto:contact@sambent.com" class="social-button email-button" title="Email" style="color: var(--secondary-color);">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px;">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                        <polyline points="22,6 12,13 2,6"></polyline>
                    </svg>
                </a>
                <a href="https://www.instagram.com/sambentoffical/" class="social-button instagram-button" title="Instagram" style="color: var(--secondary-color);">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px;">
                        <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                        <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                        <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                    </svg>
                </a>
                <a href="https://rumble.com/c/DoingFedTime" class="social-button rumble-button" title="Rumble" style="color: var(--secondary-color);">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px;">
                        <polygon points="23 7 16 12 23 17 23 7"></polygon>
                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
                    </svg>
                </a>
            </div>
        </header>
        
        <div class="container">
            <div class="code-line" style="animation-delay: 0.4s;">> INITIALIZING CONCEPT BREAKDOWN...</div>
            <div class="code-line" style="animation-delay: 0.8s;">> A proxy server is an intermediary between your device and the internet</div>
            <div class="code-line" style="animation-delay: 1.2s;">> It acts as a gateway that forwards your requests to their destination</div>
            <div class="code-line" style="animation-delay: 1.6s;">> PROXY PROTOCOLS: HTTP, SOCKS, FTP, SSL/TLS</div>
            <div class="code-line" style="animation-delay: 2.0s;">> LOADING VISUAL SIMULATOR...</div>
        </div>
        
        <div class="animation-container" id="animation">
            <!-- Elements will be dynamically added here by JavaScript -->
            <div class="info-panel" id="infoPanel"></div>
        </div>
        
        <div class="container">
            <div class="feature" style="animation-delay: 2.4s;">
                <h3>IP MASKING</h3>
                <p>Proxy servers mask your real IP address, providing a different one to websites. However, they require implicit trust as the proxy can see all your traffic - this is fundamentally a security risk for OPSEC.</p>
            </div>
            
            <div class="feature" style="animation-delay: 2.8s;">
                <h3>ACCESS CONTROL</h3>
                <p>Organizations use proxies to control web access, block malicious sites, filter content, and monitor traffic through a centralized point.</p>
            </div>
            
            <div class="feature" style="animation-delay: 3.2s;">
                <h3>PERFORMANCE</h3>
                <p>Caching proxies store copies of frequently accessed resources, reducing bandwidth usage and accelerating page load times.</p>
            </div>
            
            <div class="feature" style="animation-delay: 3.6s;">
                <h3>GEO-RESTRICTION BYPASS</h3>
                <p>By connecting to proxies in different countries, users can bypass geographic content restrictions and access region-locked services.</p>
            </div>
        </div>
        
        <div style="text-align: center; margin: 20px 0;">
            <button class="glow-button" id="restartAnimation">RESTART SIMULATION</button>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get animation container
            const animation = document.getElementById('animation');
            const infoPanel = document.getElementById('infoPanel');
            const restartBtn = document.getElementById('restartAnimation');
            
            // Create elements for the animation
            const client = createDevice('CLIENT', 80, 60, 50, 200);
            const proxy = createDevice('PROXY', 80, 60, 360, 200, 'proxy');
            const webServer = createDevice('SERVER', 80, 100, 670, 200, 'server');
            
            // Create connecting lines
            createLine(90, 230, 360, 230, 2);
            createLine(440, 230, 670, 230, 2);
            
            // Add fixed positioning to ensure elements are visible
            animation.style.position = 'relative';
            animation.style.overflow = 'visible';
            
            // Add them to the animation container
            animation.appendChild(client);
            animation.appendChild(proxy);
            animation.appendChild(webServer);
            
            // Start the animation sequence
            startAnimation();
            
            // Restart button event listener
            restartBtn.addEventListener('click', function() {
                // Remove all packets
                const packets = document.querySelectorAll('.packet');
                packets.forEach(packet => packet.remove());
                
                // Reset info panel
                infoPanel.style.opacity = 0;
                infoPanel.innerHTML = '';
                
                // Start the animation again
                setTimeout(startAnimation, 500);
            });
            
            // Helper function to create devices
            function createDevice(name, width, height, left, top, className = '') {
                const device = document.createElement('div');
                device.className = `device ${className}`;
                device.style.width = `${width}px`;
                device.style.height = `${height}px`;
                device.style.left = `${left}px`;
                device.style.top = `${top}px`;
                device.textContent = name;
                return device;
            }
            
            // Helper function to create connecting lines
            function createLine(x1, y1, x2, y2, thickness) {
                const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
                const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
                
                const line = document.createElement('div');
                line.className = 'line';
                line.style.width = `${length}px`;
                line.style.height = `${thickness}px`;
                line.style.left = `${x1}px`;
                line.style.top = `${y1}px`;
                line.style.transform = `rotate(${angle}deg)`;
                line.style.transformOrigin = '0 0';
                
                animation.appendChild(line);
                return line;
            }
            
            // Function to create a data packet
            function createPacket(startX, startY, color = null) {
                const packet = document.createElement('div');
                packet.className = 'packet';
                packet.style.left = `${startX}px`;
                packet.style.top = `${startY}px`;
                
                if (color) {
                    packet.style.backgroundColor = color;
                    packet.style.boxShadow = `0 0 10px ${color}`;
                }
                
                animation.appendChild(packet);
                return packet;
            }
            
            // Function to animate packet movement
            function animatePacket(packet, startX, startY, endX, endY, duration, delay = 0) {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        packet.style.opacity = 1;
                        packet.style.transition = `left ${duration}ms linear, top ${duration}ms linear`;
                        packet.style.left = `${endX}px`;
                        packet.style.top = `${endY}px`;
                        
                        setTimeout(() => {
                            resolve();
                        }, duration);
                    }, delay);
                });
            }
            
            // Function to update info panel
            function updateInfoPanel(message, delay = 0) {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        infoPanel.innerHTML = message;
                        infoPanel.style.opacity = 1;
                        resolve();
                    }, delay);
                });
            }
            
            // Function to start the animation sequence
            function startAnimation() {
                // Step 1: Client sends request
                const requestPacket = createPacket(90, 220, '#39ff14');
                
                // Animation sequence
                updateInfoPanel(`
                    <strong>STEP 1</strong><br>
                    Client sends a request to visit website<br>
                    <small>IP: 192.168.1.15</small>
                `, 1000)
                .then(() => animatePacket(requestPacket, 90, 220, 360, 220, 1500))
                .then(() => {
                    // Step 2: Proxy processes the request
                    requestPacket.style.opacity = 0;
                    return updateInfoPanel(`
                        <strong>STEP 2</strong><br>
                        Proxy receives the request<br>
                        - Hides client's IP address<br>
                        - May filter content<br>
                        - Checks cache for data
                    `, 500);
                })
                .then(() => {
                    // Step 3: Proxy forwards request to server
                    const forwardPacket = createPacket(440, 220, '#f637ec');
                    return animatePacket(forwardPacket, 440, 220, 670, 220, 1500, 1000)
                        .then(() => {
                            forwardPacket.style.opacity = 0;
                            return updateInfoPanel(`
                                <strong>STEP 3</strong><br>
                                Proxy forwards request to the server<br>
                                with its own IP address:<br>
                                <small>IP: 45.67.89.123</small><br>
                                Server never sees client's real IP
                            `, 500);
                        });
                })
                .then(() => {
                    // Step 4: Server sends response
                    const responsePacket = createPacket(670, 220, '#08f7fe');
                    return animatePacket(responsePacket, 670, 220, 440, 220, 1500, 1000)
                        .then(() => {
                            responsePacket.style.opacity = 0;
                            return updateInfoPanel(`
                                <strong>STEP 4</strong><br>
                                Server responds to the proxy<br>
                                - Thinks proxy is the client<br>
                                - Sends requested data
                            `, 500);
                        });
                })
                .then(() => {
                    // Step 5: Proxy forwards response to client
                    const finalPacket = createPacket(360, 220, '#09fbd3');
                    return animatePacket(finalPacket, 360, 220, 90, 220, 1500, 1000)
                        .then(() => {
                            finalPacket.style.opacity = 0;
                            return updateInfoPanel(`
                                <strong>STEP 5</strong><br>
                                Proxy forwards response to client<br>
                                - May cache content for future<br>
                                - May filter malicious content<br>
                                - Client thinks it's talking directly to server
                            `, 500);
                        });
                })
                .then(() => {
                    // Animation complete
                    setTimeout(() => {
                        updateInfoPanel(`
                            <strong>OPERATION COMPLETE</strong><br>
                            The proxy has successfully:<br>
                            ✓ Hidden client's identity<br>
                            ✓ Acted as a middleman<br>
                            ✓ Protected client's privacy
                        `, 1000);
                    }, 1000);
                });
            }
        });
    </script>
</body>
</html>