A comprehensive web-based dashboard for controlling and managing IoT devices in smart home environments. LUR provides an intuitive interface to toggle devices, adjust settings, and manage your connected ecosystem through an accessible admin panel.

• Multi-Device Support – Control lights, thermostats, fans, locks, cameras, monitors, speakers, sensors, and plugs

• Device-Specific Controls:

  • Lights (💡) – On/off with brightness slider
  • Thermostat (🌡️) – Temperature control (60–85°F)
  • Fan (🌀) – Speed adjustment (1–5 levels)
  • Lock (🔒) – Lock/unlock with status indicator
  • Camera (📹) – Recording start/stop
  • Monitor (🖥️), Speaker (🔊), Sensor (📡), Plug (🔌) – On/off toggles

• Responsive Grid Layout – Adapts seamlessly to all screen sizes

• Interactive UI – Intuitive hover effects, click feedback, and full keyboard navigation

• Device Management – Add, edit, and delete devices through an admin panel

• Modal Interface – Easy device configuration with name, type, and IP settings

• Data Persistence – Automatic localStorage saves across sessions

• Simulated Backend – Mock PHP endpoints for testing and development

• Modern web browser (Chrome, Firefox, Edge, Safari)
• Local PHP development server (XAMPP, WAMP, or php -S localhost:8000)
• Optional: Code editor (VS Code, Sublime Text, etc.)

git clone https://github.com/your-username/lur-legacy-universal-recording.git
cd lur

Option A: Using PHP Built-in Server

php -S localhost:8000

Option B: Using XAMPP

• Place the project in C:\xampp\htdocs\lur\
• Start Apache and PHP from the XAMPP Control Panel

Open your browser and navigate to:

http://localhost:8000/index.html

The admin panel is accessible at:

http://localhost:8000/admin.html

• View Devices – All IoT devices displayed in a responsive grid
• Control Devices:
  • Click buttons to toggle devices on/off
  • Lock/unlock doors with the lock button
  • Start/stop camera recording
  • Use sliders to adjust brightness, temperature, or fan speed
• Manage Devices – Click the three-dot menu on any device to edit or delete
• Access Admin – Click "Manage Devices" button to add new devices

• Add Device – Enter device name, select type, and optionally set IP address
• Auto-Discovery – Simulate device discovery with predefined mock devices
• Return Dashboard – Click "Back to Dashboard" to exit admin panel

1. Click the three-dot menu (⋮) on any device card
2. Select "Edit" to open the configuration modal
3. Update device name, type, or IP address
4. Save changes – dashboard updates automatically

lur/
├── index.html          # Main dashboard interface
├── admin.html          # Device management panel
├── styles.css          # Responsive styling (dark theme)
├── script.js           # Dashboard logic and device control
├── admin.js            # Admin panel functionality
├── lighton.php         # Mock endpoint for device activation
├── lightoff.php        # Mock endpoint for device deactivation
└── README.md           # Project documentation

Place API calls in script.js:

// Example: API integration
fetch(`https://your-iot-api.com/device/${id}/control`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ action: 'on' })
});

Edit script.js to add new device categories:

case 'customDevice':
  return `<div class="device-card">
    <!-- Your custom HTML -->
  </div>`;

Modify styles.css to change colors, spacing, or hover effects. The dashboard uses a dark theme with:

• Primary background: #0f0f0f
• Card background: #1a1a1a
• Text color: #e8e8e8
• Accent colors: Blue (#3498db), Green (#2ecc71), Red (#e74c3c)

Device configurations are stored in browser localStorage under the iotDevices key. This ensures your settings persist across sessions.

To reset to default devices:

localStorage.removeItem('iotDevices');
location.reload();

• Simulation Mode – The dashboard currently simulates device control using localStorage and PHP endpoints
• IP Addresses – Optional field, used only in fetch requests for simulation
• Auto-Discovery – Currently returns predefined example devices; implementation of real UPnP/mDNS for device discovery planned

Update device initialization in admin.js:

const deviceTypes = ['light', 'thermostat', 'fan', 'lock', 'camera', 'monitor', 'speaker', 'sensor', 'plug', 'your-device'];

Customize styles.css for themes, animations, or additional layout options

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m "Add amazing feature")
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a pull request

This project is licensed under the MIT License. See the LICENSE file for details.

• Issues – Report bugs or request features on GitHub Issues
• Discussions – Share ideas and ask questions in GitHub Discussions

Made with ❤️ for smart home enthusiasts and developers