HTML5 Features & Modern Capabilities

<!-- Defines a detail that the user can open and close -->
<details>
    <summary>Click to expand</summary>
    <p>Additional information that is shown when expanded.</p>
</details>

<!-- Defines marked or highlighted text -->
<p>This is <mark>highlighted text</mark> within a paragraph.</p>

<!-- Defines the progress of a task -->
<progress value="70" max="100">70%</progress>

<!-- Defines a scalar measurement within a known range -->
<meter value="0.7" min="0" max="1">70%</meter>

<!-- Defines a multi-line text input control -->
<output name="result">60</output>

<script>
// Example of accessing HTML5 form validation from JavaScript
document.querySelector('form').addEventListener('submit', function(event) {
    const form = event.target;
    
    if (!form.checkValidity()) {
        event.preventDefault();
        
        // Display custom error messages
        Array.from(form.elements).forEach(input => {
            if (!input.validity.valid) {
                // Custom error handling here
                console.log(input.id + ' is invalid: ' + input.validationMessage);
            }
        });
    }
});

// Update output for range input
document.getElementById('rating').addEventListener('input', function(event) {
    document.querySelector('output[for="rating"]').value = event.target.value;
});
</script>

<script>
// Get references to media elements
const video = document.querySelector('video');
const audio = document.querySelector('audio');

// Play/pause functions
function playVideo() {
    video.play();
}

function pauseVideo() {
    video.pause();
}

// Event listeners
video.addEventListener('canplay', function() {
    console.log('Video can start playing');
});

video.addEventListener('ended', function() {
    console.log('Video finished playing');
});

// Set current time
function seekTo(timeInSeconds) {
    video.currentTime = timeInSeconds;
}

// Set volume (0.0 to 1.0)
function setVolume(level) {
    video.volume = level;
}

// Check if media is playing
function isPlaying() {
    return !video.paused;
}
</script>

<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            // Success callback
            function(position) {
                const latitude = position.coords.latitude;
                const longitude = position.coords.longitude;
                console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
                
                // Display on map or use coordinates for other purposes
                displayLocationOnMap(latitude, longitude);
            },
            // Error callback
            function(error) {
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        console.error("User denied the request for geolocation.");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        console.error("Location information is unavailable.");
                        break;
                    case error.TIMEOUT:
                        console.error("The request to get user location timed out.");
                        break;
                    case error.UNKNOWN_ERROR:
                        console.error("An unknown error occurred.");
                        break;
                }
            },
            // Options
            {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0
            }
        );
        
        // For continuous location updates
        // const watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);
        // To stop watching: navigator.geolocation.clearWatch(watchId);
    } else {
        console.error("Geolocation is not supported by this browser.");
    }
}

function displayLocationOnMap(latitude, longitude) {
    // Implementation would depend on map library used
    console.log("Displaying location at coordinates:", latitude, longitude);
}

// Call the function when needed
// getLocation();
</script>

<style>
.draggable {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    color: white;
    padding: 10px;
    margin: 10px;
    cursor: move;
}

.drop-zone {
    width: 300px;
    height: 200px;
    border: 2px dashed #2c3e50;
    padding: 20px;
    margin: 20px 0;
}

.drop-zone.drag-over {
    background-color: #ecf0f1;
}
</style>

<div class="draggable" draggable="true" id="item1">Drag me</div>

<div class="drop-zone" id="dropZone">Drop Zone</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const draggable = document.getElementById('item1');
    const dropZone = document.getElementById('dropZone');
    
    // Add event listeners for the draggable element
    draggable.addEventListener('dragstart', function(e) {
        // Set data to be dragged
        e.dataTransfer.setData('text/plain', this.id);
        
        // Set the drag effect
        e.dataTransfer.effectAllowed = 'move';
        
        // Add a class for styling during drag
        this.classList.add('dragging');
    });
    
    draggable.addEventListener('dragend', function() {
        // Remove styling class
        this.classList.remove('dragging');
    });
    
    // Add event listeners for the drop zone
    dropZone.addEventListener('dragover', function(e) {
        // Prevent default to allow drop
        e.preventDefault();
        
        // Set the drop effect
        e.dataTransfer.dropEffect = 'move';
        
        // Add styling for when dragging over
        this.classList.add('drag-over');
    });
    
    dropZone.addEventListener('dragleave', function() {
        // Remove styling when dragging out
        this.classList.remove('drag-over');
    });
    
    dropZone.addEventListener('drop', function(e) {
        // Prevent default action
        e.preventDefault();
        
        // Remove styling
        this.classList.remove('drag-over');
        
        // Get the dragged element's ID
        const id = e.dataTransfer.getData('text/plain');
        const draggedElement = document.getElementById(id);
        
        // Append the element to the drop zone
        if (draggedElement) {
            this.appendChild(draggedElement);
        }
    });
});
</script>

<!-- Main page script -->
<script>
// Check if Web Workers are supported
if (window.Worker) {
    // Create a new worker
    const myWorker = new Worker('worker.js');
    
    // Send data to the worker
    myWorker.postMessage({
        command: 'start',
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    });
    
    // Receive messages from the worker
    myWorker.onmessage = function(e) {
        console.log('Received from worker:', e.data);
        document.getElementById('result').textContent = e.data.result;
    };
    
    // Handle errors
    myWorker.onerror = function(error) {
        console.error('Worker error:', error.message);
    };
    
    // Terminate the worker when done
    function stopWorker() {
        myWorker.terminate();
        console.log('Worker terminated');
    }
} else {
    console.error('Your browser doesn\'t support Web Workers');
}
</script>

<!-- Contents of worker.js -->
/* 
// This would be in a separate file named worker.js
self.onmessage = function(e) {
    console.log('Worker received:', e.data);
    
    if (e.data.command === 'start') {
        const numbers = e.data.data;
        
        // Perform a CPU-intensive task
        let sum = 0;
        
        // Simulate a time-consuming calculation
        for (let i = 0; i < 1000000000; i++) {
            if (i % 100000000 === 0) {
                // Periodically post progress updates
                self.postMessage({
                    status: 'progress',
                    progress: i / 1000000000
                });
            }
            
            // Actual calculation
            if (i < numbers.length) {
                sum += numbers[i];
            }
        }
        
        // Post the result back to the main thread
        self.postMessage({
            status: 'complete',
            result: sum
        });
    }
};
*/
</script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Conditional CSS loading based on media queries -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="tablet.css" media="(min-width: 768px) and (max-width: 1024px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 1025px)">
<link rel="stylesheet" href="print.css" media="print">

<!-- Inline CSS with media queries -->
<style>
/* Base styles for all devices */
.container {
    padding: 15px;
}

/* Styles for tablets and larger */
@media (min-width: 768px) {
    .container {
        padding: 30px;
        max-width: 750px;
        margin: 0 auto;
    }
}

/* Styles for desktop */
@media (min-width: 1025px) {
    .container {
        max-width: 1200px;
    }
}

/* Styles for print */
@media print {
    .no-print {
        display: none;
    }
}

/* Styles based on display features */
@media (hover: hover) {
    /* Styles for devices that support hover */
    .button:hover {
        background-color: #e74c3c;
    }
}
</style>

<!-- Accessible form example -->
<form action="/submit" method="post">
    <fieldset>
        <legend>Personal Information</legend>
        
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" autocomplete="name" required>
        </div>
        
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" autocomplete="email" required>
            <div class="error-message" aria-live="polite"></div>
        </div>
    </fieldset>
    
    <fieldset>
        <legend>Preferences</legend>
        
        <div class="form-group">
            <label for="color">Favorite Color</label>
            <select id="color" name="color">
                <option value="">Choose a color</option>
                <option value="red">Red</option>
                <option value="blue">Blue</option>
                <option value="green">Green</option>
            </select>
        </div>
        
        <div class="form-group">
            <fieldset class="radio-group">
                <legend>Notification Preferences</legend>
                
                <div class="radio-option">
                    <input type="radio" id="notify-email" name="notification" value="email">
                    <label for="notify-email">Email</label>
                </div>
                
                <div class="radio-option">
                    <input type="radio" id="notify-sms" name="notification" value="sms">
                    <label for="notify-sms">SMS</label>
                </div>
                
                <div class="radio-option">
                    <input type="radio" id="notify-none" name="notification" value="none">
                    <label for="notify-none">None</label>
                </div>
            </fieldset>
        </div>
    </fieldset>
    
    <div class="form-group">
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </div>
</form>

<!-- Fallback content example for video -->
<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <p>Your browser doesn't support HTML5 video. Here's a <a href="video.mp4">link to the video</a> instead.</p>
</video>

<!-- Canvas fallback -->
<canvas id="myCanvas" width="500" height="300">
    <p>Your browser doesn't support the canvas element. Here's a static image instead:</p>
    <img src="fallback-image.png" alt="Fallback for canvas content">
</canvas>