🕶️ Device Hacked — Cyber Awareness Simulation

Device Hacked is a lighthearted cyber-awareness prank page. It simulates a dramatic "hacking in progress" sequence — Matrix rain, a glitchy typewriter title, and a scrolling fake terminal log — before revealing that it was all a harmless demo, paired with a real reminder about phishing and link safety. Built to send to friends and family as a fun way to test (and teach) digital street-smarts.

---

📑 Table of Contents

• Features
• Live Demo
• Technologies
• Project Structure
• How It Works
• Installation
• Ethical Use
• Future Improvements
• Contributing
• License
• Author

---

✨ Features

✅ 🟩 Matrix Rain Background — animated falling-character effect rendered on <canvas>

✅ ⌨️ Glitchy Typewriter Heading — "DEVICE HACKED" types itself out with a pulsing red glow

✅ 🖥️ Fake Terminal Log — a sequence of ominous, fictional system messages scrolls in like a live intrusion

✅ 🔊 Glitch Sound Effect — plays automatically on the first user interaction (click, keypress, or scroll)

✅ 😅 Awareness Reveal — after the scare, a clear "Just Kidding" message explains it was a simulation, with a real safety tip about not trusting unknown links

✅ 📢 One-Click Share — copies a ready-made prank/share message (with the page link) straight to the clipboard

✅ Fully Responsive — scales cleanly from desktop down to mobile

✅ Zero Dependencies — pure HTML, CSS, and vanilla JavaScript

---

🚀 Live Demo

https://dhruvpandit46.github.io/awarness/

---

⚙ Technologies Used

• HTML5
• CSS3 (glow/pulse animations, responsive layout)
• JavaScript (Vanilla, ES6)
• Canvas API (Matrix rain animation)
• Web Audio (<audio> element for the glitch sound effect)
• Clipboard API (navigator.clipboard)

---

📂 Project Structure

awarness/
│
├── index.html
├── style.css
├── script.js
├── glitch.mp3
└── README.md

---

⚡ How It Works

1. On load, a <canvas> element continuously renders falling green characters in classic Matrix style behind the content.
2. The heading "DEVICE HACKED" types itself out letter by letter with a pulsing red text-glow animation.
3. A fake terminal log area prints a sequence of dramatic (entirely fictional) intrusion messages one line at a time, auto-scrolling as it fills up.
4. On the very first click, keypress, or scroll, the glitch sound effect plays once — timed to land alongside the unfolding "hack."
5. After a short delay, the reveal panel fades in, clearly explaining that the whole thing was a harmless demo, and includes a genuine reminder: never trust links just because they appear to come from someone you know.
6. Clicking Share copies a pre-written prank message (with the page's URL) to the clipboard, ready to paste and send to the next person.

---

📦 Installation

Clone the repository

git clone https://github.com/dhruvpandit46/awarness.git

Go inside the project

cd awarness

Run

Simply open index.html in your browser. No build step, no dependencies — just make sure glitch.mp3 stays alongside index.html for the sound effect to play.

---

⚠️ Ethical Use

This project is intended purely as a playful, consensual awareness tool among friends and family — not as a way to genuinely frighten, deceive for gain, or target anyone without their willingness to be pranked. The reveal message and safety tip are a core part of the experience, not an afterthought: the goal is a quick laugh followed by a real, useful lesson about phishing and social engineering.

Please don't strip out the reveal panel or use this to imitate real malware behavior convincingly enough to cause genuine distress.

---

🎯 Future Improvements

• Customizable target name in the fake logs (e.g. "Hi [Name], your device...")
• Optional "skip the scare" button for accessibility
• A short in-page explainer on common phishing red flags after the reveal
• Multiple log/theme variants (e.g. "account breach," "camera access") to keep repeat pranks fresh
• Analytics-free share tracking (local counter only) for fun

---

🤝 Contributing

Contributions are welcome.

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push your branch
5. Open a Pull Request

---

📜 License

Licensed under the MIT License.

MIT © 2026 Dhruv Pandit.

See the LICENSE file for full license details.

---

👨‍💻 Author

Dhruv Pandit

GitHub — https://github.com/dhruvpandit46

LinkedIn — https://linkedin.com/in/dhruv-pandit-755786326

Instagram — https://instagram.com/dhruv_pandit2007

---

⭐ Support

If you found this project useful, please consider giving it a ⭐ on GitHub. It helps support future development.