🛡️ Self-Defense Master

Self-Defense Master is a comprehensive personal safety guide built with HTML5, CSS3, and vanilla JavaScript.

This interactive guide covers essential self-defense principles, practical techniques, common attack scenarios, injury recovery protocols, and the psychology of self-defense. Designed for complete beginners, it provides actionable knowledge to help you stay safe in various situations.

The project requires no frameworks, no backend, no database, and no build tools. It runs directly in a modern web browser.

🎮 Live Demo

🔗 Explore Self-Defense Master

✨ Features

🛡️ Comprehensive self-defense principles
👀 Situational awareness training
🤜 Essential defense techniques with visual cards
🎯 Interactive technique explanations
🚨 Emergency guide with vibration feedback
📱 Mobile-friendly responsive design
🎭 Multiple scenario-based learning
💚 Interactive HP (Health) recovery simulation
🧠 Mental game and psychology training
⚡ Quick navigation with tab system
🔄 Smooth animations and transitions
📊 Progress tracking with HP bar animation
🎨 Modern dark theme with gradient design
🖱️ Touch-friendly interface
🏠 Bottom navigation for easy access
⚠️ Warning signs identification

🕹️ How to Use

Navigation

The app is divided into 5 main sections:

Section	Content
🏠 Basics	Core principles, awareness tips, and prevention strategies
🤜 Techniques	Essential self-defense moves with interactive cards
⚠️ Scenarios	Common attack situations and how to respond
💚 Recovery	First aid, injury assessment, and HP simulation
🧠 Mental	Psychology, confidence building, and mental preparation

Quick Access

Top Navigation - Switch between sections using tabs at the top
Bottom Navigation - Quick access buttons fixed at bottom of screen
Emergency Button - Red button in hero section for immediate emergency guide

🛡️ Core Self-Defense Principles

┌─────────────────────────────────────────────┐
│         SELF-DEFENSE MASTER PRINCIPLES      │
├─────────────────────────────────────────────┤
│                                             │
│  1. AWARENESS                               │
│     └── Know what's happening around you    │
│                                             │
│  2. DE-ESCALATION                           │
│     └── Use words to calm situations        │
│                                             │
│  3. BOUNDARIES                              │
│     └── Say "NO" or "STOP" firmly           │
│                                             │
│  4. ESCAPE                                  │
│     └── Your goal is to get away safely     │
│                                             │
│  5. LEGAL RIGHTS                            │
│     └── Know your self-defense laws         │
└─────────────────────────────────────────────┘

🎯 Defense Techniques Covered

Basic Strikes

Technique	Target	Description
👊 Palm Strike	Nose/Chin	Strike with base of palm
🦵 Groin Kick	Groin	Kick upward forcefully
💪 Elbow Strike	Face/Ribs	Close-range strike
🏃 Escape & Run	N/A	Create distance and flee

Vulnerable Targets

Eyes - Disorient with a poke
Nose - Causes tears and confusion
Throat - Disrupts breathing
Groin - Extremely sensitive area
Knees - Side kick to disable movement

📱 Scenario-Based Learning

Scenario 1: Wrist Grab

Action: Twist arm toward attacker's thumb (weakest point)
        Strike with free hand
        Run to safety

Avoid: Don't pull straight back
       Don't freeze in panic

Scenario 2: Front Approach

Action: Create distance immediately
        Use firm voice: "STOP! BACK AWAY!"
        Target vulnerable areas if they continue
        Escape

Avoid: Don't turn your back
       Don't engage in conversation

Scenario 3: Being Followed

Action: Change direction or cross street
        Go to crowded, well-lit area
        Call someone and speak loudly
        Enter a store or public building

Avoid: Don't go home (they'll know where you live)
       Don't confront unless necessary

💚 HP Recovery System

The app includes an interactive HP (Health) recovery simulation:

// HP Status Animation
Initial State: 30% (Low HP - Visual Warning)
After Recovery: 85% (Recovering)

Recovery Steps

Assess Injuries - Check for bleeding, broken bones, head trauma
Call for Help - Dial emergency services
Get to Safety - Move to secure location
Control Bleeding - Apply direct pressure with clean cloth
Reduce Swelling - Apply ice packs for 15-20 minutes
See a Doctor - Professional medical evaluation
Mental Recovery - Talk to someone you trust

Warning Signs Requiring Immediate Medical Attention

❌ Difficulty breathing
❌ Severe bleeding that won't stop
❌ Loss of consciousness (even briefly)
❌ Confusion, dizziness, or vision problems
❌ Chest or abdominal pain

🧠 Mental Game Training

Key Mental Skills

🎯 Stay Calm Under Pressure
   └── Practice deep breathing daily

🎯 Visualize Success
   └── Mentally rehearse defense scenarios

🎯 Develop a "Fighter's Stance"
   └── Stand with confidence, make eye contact

🎯 Learn From Close Calls
   └── Analyze and improve

🎯 Trust Your Instincts
   └── Your subconscious detects danger early

Daily Confidence Building Habits

✅ Walk with purpose and awareness
✅ Practice saying "NO" firmly in the mirror
✅ Take a self-defense class (even online)
✅ Share safety tips with friends and family
✅ Regularly check your environment

💻 Technologies Used

HTML5

Semantic structure
Tab navigation system
Interactive cards
Responsive layout

CSS3

Dark cosmic theme with gradients
Glowing effects and animations
Responsive grid system
Card hover effects
HP bar animations
Mobile-first design

JavaScript ES6

Tab switching functionality
HP bar animation
Interactive technique cards
Emergency button with vibration
Touch event handling
Smooth transitions

📂 Project Structure

Self_Defence_Master/
│
├── index.html      # Complete Self-Defense Master app
└── README.md       # Project documentation

The entire application is contained in a single HTML file with embedded CSS and JavaScript.

🚀 Run Locally

Clone the repository:

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

Navigate into the project:

cd Self_Defence_Master

Open index.html in a modern web browser.

No dependencies. No build process. No server required.

You can also use VS Code Live Server for development.

🌐 Browser Compatibility

Self-Defense Master uses standard modern browser APIs.

Recommended Browsers:

✅ Google Chrome
✅ Microsoft Edge
✅ Mozilla Firefox
✅ Safari
✅ Mobile browsers

🎨 Visual Design

Theme

🌑 Dark Background - Cosmic gradient ( #1a1a2e to #16213e )
🔴 Primary Colors - Red (#e74c3c) for emergencies
🔵 Accent Colors - Blue (#3498db) for information
💚 Success Colors - Green (#2ecc71) for recovery
⚠️ Warning Colors - Yellow (#f39c12) for scenarios
✨ Glassmorphism - Frosted glass effects
🎭 Gradient Text - Animated logo with gradient
📱 Mobile-Friendly - Fully responsive design

🔧 Core Functions

`tab-switching`

Handles navigation between sections with smooth transitions.

`animateHPBar()`

Simulates HP recovery with visual bar animation.

`emergencyButton`

Shows emergency guide with vibration feedback.

`techniqueCard`

Interactive cards that show technique details on click.

📈 Feature Matrix

Feature	Status
Self-Defense Principles	✅ Complete
Situational Awareness	✅ Complete
Defense Techniques	✅ Complete
Scenario Learning	✅ Complete
HP Recovery System	✅ Complete
Mental Game Training	✅ Complete
Emergency Guide	✅ Complete
Mobile Responsive	✅ Complete
Interactive Cards	✅ Complete
Animations	✅ Complete
Touch Support	✅ Complete
Bottom Navigation	✅ Complete

🔒 Privacy

The game runs entirely inside the browser.

It does not require:

User accounts
Backend server
Database
Cloud storage
External APIs
User tracking

No data is stored or transmitted anywhere.

🚧 Future Improvements

Possible future enhancements:

📹 Video demonstrations of techniques
🎮 Interactive self-defense quiz
📍 Location-based safety tips
🔔 Daily safety reminders
📊 Progress tracking system
🏆 Achievement badges
🔊 Audio guides
🌐 Multiple language support
📱 Offline mode (PWA)
🎯 Real-time risk assessment
👥 Community safety tips sharing
📅 Self-defense training schedule
💡 Scenario-based simulations
🧪 Self-defense technique rating system

🤝 Contributing

Contributions and improvements are welcome!

Fork the repository
Create a feature branch:

git checkout -b feature/your-feature

Make your changes
Test locally
Commit your changes:

git commit -m "Add your feature"

Push to your branch:

git push origin feature/your-feature

Open a Pull Request

📜 License

This project is licensed under the MIT License.

See the LICENSE file for full license details.

👨‍💻 Author

Dhruv Pandit

GitHub: @dhruvpandit46
LinkedIn: Dhruv Pandit
Instagram: @dhruv_pandit2007

⭐ Support

If you found Self-Defense Master useful, consider giving the repository a ⭐ on GitHub!

It helps support development and motivates the creation of more helpful projects.

🙏 Acknowledgments

Font Awesome for icons
The self-defense community for real-world insights
Everyone who prioritizes personal safety

Stay safe, stay aware, stay confident! 🛡️

Latest commit

History

Folders and files

Repository files navigation