Tresspass

Project Title: “Trespass: Interactive Security with Visual Viewport API”

Description:

In this project, we integrate the intense and suspenseful atmosphere of Trespass with the capabilities of the Visual Viewport API. Trespass follows a family that is taken hostage by a group of criminals, highlighting themes of security, vigilance, and response. Similarly, this project will allow users to monitor and interact with the viewport’s dimensions and position, providing an interactive security feature for web applications.

Features:

1. Viewport Monitoring: Use the Visual Viewport API to monitor changes in the viewport’s dimensions and position.
2. Interactive Alerts: Trigger alerts based on viewport changes to simulate a security response.
3. Thematic Design: Implement a design inspired by the tense and vigilant atmosphere of Trespass.

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.

Here’s a basic setup to get you started. This includes the initial HTML, CSS, and JavaScript to integrate the Visual Viewport API and create an interactive security feature.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trespass: Interactive Security</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #111;
        color: #fff;
        text-align: center;
        padding: 20px;
    }

    h1 {
        color: #ff4500;
    }

    #viewportInfo {
        margin-top: 20px;
        font-size: 18px;
    }

    #alert {
        margin-top: 20px;
        font-size: 18px;
        color: red;
        font-weight: bold;
    }
</style>
</head>
<body>
    <h1>Trespass: Interactive Security</h1>
    <p>Monitor and respond to viewport changes with the Visual Viewport API!</p>
    <div id="viewportInfo"></div>
    <div id="alert"></div>
<script>
    function updateViewportInfo() {
        const viewportInfo = document.getElementById('viewportInfo');
        const visualViewport = window.visualViewport;

        viewportInfo.innerHTML = `
            <p>Width: ${visualViewport.width}px</p>
            <p>Height: ${visualViewport.height}px</p>
            <p>Offset Left: ${visualViewport.offsetLeft}px</p>
            <p>Offset Top: ${visualViewport.offsetTop}px</p>
            <p>Scale: ${visualViewport.scale}</p>
        `;

        if (visualViewport.width < 600) {
            showAlert('Viewport width is below 600px. Potential security risk!');
        } else {
            clearAlert();
        }
    }

    function showAlert(message) {
        const alertDiv = document.getElementById('alert');
        alertDiv.innerText = message;
    }

    function clearAlert() {
        const alertDiv = document.getElementById('alert');
        alertDiv.innerText = '';
    }

    window.visualViewport.addEventListener('resize', updateViewportInfo);
    window.visualViewport.addEventListener('scroll', updateViewportInfo);

    updateViewportInfo();
</script>
</body>
</html>

References:

• Trespass (2011):
  • Wikipedia
• Visual Viewport API:
  • MDN Web Docs

Praise Cage! Embark on this coding adventure and create an interactive security feature that leverages the Visual Viewport API to monitor and respond to viewport changes, inspired by the intense atmosphere of Trespass.