Snowden

Title: Secure Shadows with Snowden and Houdini API

Description:

Inspired by Nicolas Cage’s supporting role in Snowden, this project uses the CSS Houdini API to create a web application focused on enhancing and visualizing data security. The application draws on the themes of surveillance and data protection from the film, leveraging Houdini’s capabilities to create custom CSS properties and effects that illustrate the importance of secure data handling. Users can visualize encrypted data, simulate data breaches, and see how CSS Houdini can be used to create complex visual effects that communicate security concepts.

Features:

• Custom CSS Properties: Use CSS Houdini to create and manage custom CSS properties for visualizing security concepts.
• Data Visualization: Simulate and visualize encrypted data and data breaches.
• Interactive Security Education: Provide an interactive interface to educate users about data security through visual effects.

Starting Code:

Beginner Hints:

• Create a single index.html file.
• Copy the full HTML code block into that file.
• Open index.html in your browser. If something doesn’t work, try a local server like python -m http.server.
• Open DevTools Console to spot errors and typos quickly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure Shadows with Snowden and Houdini API</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        color: #333;
        text-align: center;
        padding: 50px;
    }
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    h1 {
        margin-bottom: 20px;
    }
    .secure-data {
        display: inline-block;
        margin: 20px;
        padding: 20px;
        border: 2px solid #007bff;
        border-radius: 5px;
        background: paint(data-background);
    }
    .breach-data {
        display: inline-block;
        margin: 20px;
        padding: 20px;
        border: 2px solid #dc3545;
        border-radius: 5px;
        background: paint(breach-background);
    }
</style>
</head>
<body>
    <div class="container">
        <h1>Secure Shadows</h1>
        <p>Visualize and understand data security with CSS Houdini.</p>
        <div class="secure-data">Encrypted Data</div>
        <div class="breach-data">Data Breach</div>
    </div>
<script>
    const dataWorklet = `registerPaint('data-background', class {
        static get inputProperties() {
            return [];
        }

        paint(ctx, geom, properties) {
            ctx.fillStyle = '#007bff';
            ctx.fillRect(0, 0, geom.width, geom.height);

            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.arc(geom.width / 2, geom.height / 2, 20, 0, 2 * Math.PI);
            ctx.fill();
        }
    });`;

    const breachWorklet = `registerPaint('breach-background', class {
        static get inputProperties() {
            return [];
        }

        paint(ctx, geom, properties) {
            ctx.fillStyle = '#dc3545';
            ctx.fillRect(0, 0, geom.width, geom.height);

            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 5;
            ctx.beginPath();
            ctx.moveTo(geom.width / 4, geom.height / 4);
            ctx.lineTo(geom.width * 3 / 4, geom.height * 3 / 4);
            ctx.moveTo(geom.width * 3 / 4, geom.height / 4);
            ctx.lineTo(geom.width / 4, geom.height * 3 / 4);
            ctx.stroke();
        }
    });`;

    if ('paintWorklet' in CSS) {
        const dataBlob = new Blob([dataWorklet], { type: 'application/javascript' });
        const breachBlob = new Blob([breachWorklet], { type: 'application/javascript' });
        CSS.paintWorklet.addModule(URL.createObjectURL(dataBlob));
        CSS.paintWorklet.addModule(URL.createObjectURL(breachBlob));
    } else {
        alert('CSS Houdini is not supported in this browser.');
    }
</script>
</body>
</html>

References:

• Snowden (2016) - Wikipedia
• CSS Houdini - MDN Web Docs
• Houdini Paint API - MDN Web Docs

Project Overview:

This project captures the themes of surveillance and data protection from Snowden using the CSS Houdini API to create interactive visualizations of data security concepts. Users can see the effects of encryption and data breaches through custom CSS properties, enhancing their understanding of data security. The application leverages Houdini’s powerful capabilities to create dynamic and educational visual effects, reflecting the meticulous and protective nature of Nicolas Cage’s character. Embrace the power of CSS Houdini to visualize and communicate security concepts effectively. Praise Cage!