Liiketunnistin kamerasta hälyytyksellä

To make this page work as an offline HTML and as a component that can be implemented into a website, you'll need to create two additional files: 1. `service-worker.js` for offline functionality: ```javascript const CACHE_NAME = 'webcam-motion-detector-v1'; const urlsToCache = [ '/', 'index.html', 'styles.css', 'script.js' ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) ); }); ``` 2. `manifest.json` for PWA support: ```json { "name": "Webcam Motion Detector", "short_name": "MotionDetector", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#3498db", "icons": [ { "src": "icon.png", "sizes": "192x192", "type": "image/png" } ] } ``` To implement this as a component in a website, you can: 1. Extract the CSS into a separate file (`styles.css`). 2. Extract the JavaScript into a separate file (`script.js`). 3. Modify the HTML to reference these external files. Here's how you can structure your files: ``` / +-- index.html +-- styles.css +-- script.js +-- service-worker.js +-- manifest.json +-- icon.png ``` Update the `` section of your HTML to include: ```html ``` And at the end of the ``: ```html ``` With these changes, you can now use this as a standalone offline-capable web application or integrate it into an existing website by including the necessary HTML, CSS, and JavaScript files.