SecurOS – Smart Home Security System

A modern, touchscreen-optimized frontend for a home security system. Designed for wall-mounted mini displays (e.g. Raspberry Pi touchscreen).

⚠️ Frontend only! This project contains only the user interface. A working backend (sensors, cameras, alarm trigger, etc.) must be developed separately by you.

---

What is this?

SecurOS is a locally running web app that serves as the control panel for a DIY home security system. It displays sensor states, doors, windows and camera feeds in real time, and allows arming/disarming the system via PIN code.

UI Features:

• 🔒 Arm with PIN code entry
• 🚪 Door & window status (locked / open)
• 📷 Live camera view (via Webcam API)
• 🛡️ Configurable alarm zones (doors, windows, siren)
• 🌙 Dark glassmorphism design, touch-optimized for wall panels

---

Files

File	Description
index.html	Main HTML structure
style.css	All styling (Dark Glass UI, touch-optimized)
app.js	Full app logic (state, rendering, camera)
data.json	Config: devices, cameras, PIN code

---

Quick Start

Just open index.html in a browser — no server needed for basic use.

For webcam access the page must be served over http:// or https:// (not file://). Locally use:

npx serve .

---

Configuration (data.json)

{
  "system": {
    "passcode": "1234"
  },
  "doors": [
    { "id": "d1", "name": "Front Door", "locked": true, "icon": "door_front" }
  ],
  "windows": [
    { "id": "w1", "name": "Living Room", "open": false, "icon": "window" }
  ],
  "cameras": [
    { "id": "c1", "name": "Hallway", "status": "Online" }
  ]
}

Simply edit this file to add/remove devices, cameras, and change the PIN.

---

Backend — You'll need to build this yourself

This project contains no backend. To make the system fully functional, you need to build a server component that handles:

• Reading sensors (door contacts, window contacts via GPIO, Z-Wave, Zigbee, etc.)
• Keeping data.json up to date or providing a REST API that app.js can poll
• Triggering the siren / alarm when a sensor trips while the system is armed
• Providing camera streams (e.g. MJPEG via IP camera or v4l2rtspserver)
• Push notifications (optional — e.g. via Telegram bot or SMTP)

Recommended Backend Technologies

Purpose	Options
Sensors (Raspberry Pi)	Python + RPi.GPIO, Home Assistant
Web server / API	Node.js (Express), Python (FastAPI / Flask)
Real-time updates	WebSocket, Server-Sent Events
Camera stream	motion, mjpg-streamer, Frigate
Smart home integration	Home Assistant, MQTT

app.js currently reads statically from data.json. To get live data, replace the fetch('data.json') call with an endpoint from your own backend.

---

License

Free for personal home automation projects.