🌌 AetherHome — Smart Home Automation Simulator

A stunning, ultra-premium single-page smart home automation and analytics dashboard. Built entirely using high-fidelity Vanilla HTML5, modern custom CSS3 (glassmorphism design system), and state-driven modular JavaScript.

Developed by Disha Gowswami • Status: Live & Operational

---

📸 Project Showcase & Key Features

AetherHome simulates a fully autonomous, interactive smart home environment right inside your browser. No framework overhead, no dependencies—just raw, lightweight, lightning-fast performance designed with premium dark glassmorphism styling.

1. Interactive Rooms Dashboard

• Living Room: Aether LED Chandelier (RGB color picker & brightness dimming), Dual Zone Inverter AC (adjustable target comfort temp dial, Cool/Heat/Eco modes, adjustable fan speed level), and an 85" QLED Smart TV with canvas noise and a simulated channel player interface.
• Bedroom: Bedside Sleep Lamp with warm bedtime preset glows, Panoramic Blinds (with rolling slats that physically darken or brighten the room panel), and a Wake-up Alarm clock time-setter.
• Kitchen: Convection Wall Oven (preheating progress simulator with real-time temperature increments), Barista Espresso Station (brewing Espresso/Latte/Americano with simulated vapour steam animations), and a Four-Door Smart Fridge with dynamic food inventory tracking (add or remove items).
• Garage: Security Sectional Rollup Door (with SVG roll door height animation) and an EV Supercharger (plug-in switch, slow/fast charging rate selectors, battery charging progress).
• Smart Garden: Micro-Drip Sprinklers (with custom flow rates and dynamic water spray particle animations) and a Soil Moisture Sensor.

2. Environmental Simulation Loop

• Time Progression: A dynamic 24-hour cycle running in the background (accelerated at 1 minute per real second).
• Weather Engine: Cycles randomly through Sunny, Cloudy, Rainy, Stormy, and Windy. Weather changes instantly alter outdoor temperature, soil moisture levels, and solar panel power harvesting yields.
• Power & Battery Balancer: Real-time home load calculation. Solar panels generate power in the day which charges the 20 kWh battery storage bank. If load exceeds solar generation, the battery discharges. If the battery empties, electricity draws from the grid and accrues simulated billing costs ($0.14 / kWh).
• Dynamic Thermostats: AC units work dynamically, shifting room climates towards target comfort temperatures based on fan speed.

3. Rules & Automation Engine

• Preset Routines: Quick buttons to trigger pre-packaged configurations:
  • Sleep Mode: Locks all doors, dims lights to amber, rolls down window blinds, arms security.
  • Away Mode: Powers off all lights/HVACs, lowers garage, bolts locks, arms cameras.
  • Party Mode: Sets lights to colorful violet, turns on the TV to sports channels, opens blinds.
  • Eco Mode: Optimizes temperature targets, dims bulbs to save power, sets chargers to Slow.
• Custom Automations Builder: Build your own rules:
  • IF (e.g., Motion detected in Garage, Sunset at 6 PM, Battery Low, Soil Moisture < 35%)
  • THEN (e.g., Lock all doors, Start sprinklers, Turn AC on, Sound warning panic alarm).

4. CCTV Surveillance Security

• Dual-screen surveillance cameras rendered using HTML5 Canvas drawing static noise, scanlines, digital HUD overlays, and rendering green targeting grids when threats are simulated.
• "Smart Threat Simulator" buttons to manually test front doorbell triggers, garage driveway intruders, and Master Lockdown procedures.
• Dual-oscillator synthesized warning siren chimes generated natively using the Web Audio API.

5. Energy Analytics Charting

• A responsive custom SVG line chart dynamically graphing Power Demand (kW) vs. Solar Harvest (kW) in real-time using smooth Bezier paths.

---

🛠️ Technology Stack & Architecture

• HTML5 Markup: Semantic layout including headers, navigation lists, main content sections, canvas viewports, and custom SVG nodes.
• CSS3 Styling: Vanilla design system utilizing custom variables, backdrop-filter: blur(), glowing borders, grid & flexbox models, and advanced keyframe animations.
• JavaScript (ES6+): Custom state-driven engine, event logger, local storage persistence, Web Audio synthesizer, SVG mapping algorithms, and Canvas rendering loops.

---

🚀 How to Run Locally

Since this application is built without complex node modules or build steps, running it locally is incredibly simple:

1. Clone this repository to your computer.
2. Open index.html directly in any modern web browser (Double click it, or right click -> Open With -> Google Chrome / Microsoft Edge / Safari).
3. Alternative: Use the "Live Server" extension in VS Code to run it on a local port.

---

🌐 How to Deploy to GitHub Pages (Make it Live!)

To host this project live for free on GitHub Pages, follow these simple steps:

Step 1: Initialize Git and Commit Files

Open a terminal in the folder containing these files (sloth_git) and run:

# Initialize local git repository
git init

# Add all files to staging
git add .

# Make the initial commit
git commit -m "Initial commit of AetherHome Smart Simulator"

Step 2: Create a Repository on GitHub

1. Go to github.com and log into your account.
2. Click the "+" button in the top right and select New repository.
3. Name your repository: sloth_git (or any name you prefer).
4. Leave it Public (required for free GitHub Pages).
5. Do NOT check "Add a README", "Add .gitignore", or "Choose a license".
6. Click Create repository.

Step 3: Link and Push to GitHub

Copy the commands shown on your GitHub repository page under "or push an existing repository from the command line" and run them in your terminal:

# Rename the default branch to main
git branch -M main

# Link your local repository to GitHub (replace with your URL)
git remote add origin https://github.com/<your-username>/sloth_git.git

# Push the code to GitHub
git push -u origin main

Step 4: Turn on GitHub Pages (Make it Live!)

1. In your GitHub repository, click on the Settings tab (the gear icon at the top of the repository page).
2. In the left sidebar, scroll down to the Code and automation section and click Pages.
3. Under the Build and deployment section, look for Source. Make sure it is set to Deploy from a branch.
4. Under Branch, click the dropdown that says None, select main, and keep the folder as / (root).
5. Click the Save button.
6. Wait 1-2 minutes. Refresh the page, and you will see a banner at the top of the Pages section:

   Your site is live at https://<your-username>.github.io/sloth_git/

---

Enjoy the premium smart home simulator experience, crafted with love! Created by Disha Gowswami