Drive Angry

Title: Drive Safely with Drive Angry and Permissions API

Description:

Channeling the high-octane, vengeful spirit of Nicolas Cage in Drive Angry, this project leverages the Permissions API to create a web application that monitors and manages user permissions for various device features. The app’s interface and functionality are inspired by the relentless, action-packed pursuit in Drive Angry. Users will feel empowered, just like Cage’s character, John Milton, as they gain control over their device’s permissions, ensuring a safe and controlled digital environment.

Features:

Permission Status Monitoring: Check the status of permissions (granted, denied, or prompt) for features like location, notifications, and camera.
Permission Request Management: Request permissions dynamically, with prompts styled after key moments in Drive Angry.
User-Friendly Interface: An engaging UI that mimics the gritty and intense aesthetic of the film, complete with thematic icons and animations.

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>Drive Safely with Drive Angry</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #1a1a1a;
        color: #f2f2f2;
        text-align: center;
        padding: 50px;
    }
    .permission-card {
        background-color: #333;
        border: 1px solid #555;
        border-radius: 10px;
        padding: 20px;
        margin: 20px;
        display: inline-block;
    }
    button {
        background-color: #ff4500;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
        font-size: 16px;
    }
    button:hover {
        background-color: #ff6347;
    }
</style>
</head>
<body>
    <h1>Drive Safely with Drive Angry</h1>
    <p>Manage your device permissions like a pro!</p>

    <div class="permission-card">
        <h2>Location Permission</h2>
        <p id="location-status">Status: Unknown</p>
        <button onclick="requestLocationPermission()">Request Location Permission</button>
    </div>

    <div class="permission-card">
        <h2>Notification Permission</h2>
        <p id="notification-status">Status: Unknown</p>
        <button onclick="requestNotificationPermission()">Request Notification Permission</button>
    </div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        checkLocationPermission();
        checkNotificationPermission();
    });

    function checkLocationPermission() {
        navigator.permissions.query({name: 'geolocation'}).then(function(permissionStatus) {
            document.getElementById('location-status').textContent = 'Status: ' + permissionStatus.state;
            permissionStatus.onchange = function() {
                document.getElementById('location-status').textContent = 'Status: ' + this.state;
            };
        });
    }

    function requestLocationPermission() {
        navigator.geolocation.getCurrentPosition(
            () => {
                alert('Location access granted!');
                checkLocationPermission();
            },
            () => {
                alert('Location access denied!');
                checkLocationPermission();
            }
        );
    }

    function checkNotificationPermission() {
        const permission = Notification.permission;
        document.getElementById('notification-status').textContent = 'Status: ' + permission;
    }

    function requestNotificationPermission() {
        Notification.requestPermission().then(function(permission) {
            alert('Notification permission: ' + permission);
            checkNotificationPermission();
        });
    }
</script>
</body>
</html>

References:

Project Overview:

This project provides a practical and engaging way to understand and manage device permissions using the Permissions API. The thematic inspiration from Drive Angry makes the learning experience more enjoyable and memorable. Embrace the power of Nicolas Cage’s cinematic energy to take control of your digital permissions and ensure a safer browsing experience. Praise Cage!