Feature : "Quick Exit" (Panic Button) for Immediate Safety

[vivek0369]

📝 Description

This PR introduces a ubiquitous "Quick Exit" (Panic Button) to the SafeVoice platform. This is a standard and critical safety feature commonly found on domestic violence, harassment support, and mental health websites.

The feature allows users to instantly leave the platform and hide their activity if someone unexpectedly approaches, prioritizing user safety and privacy.

---

🎯 Key Features

🔴 Floating Action Button

• Added a highly visible floating “QUICK EXIT” button fixed at the bottom-left corner of the screen.
• Available globally across all pages/routes.
• Styled using Tailwind CSS with an emergency-focused UI.

---

⌨️ Keyboard Shortcut Support

Users can trigger the quick exit without touching the mouse by:

• Pressing the Escape key 3 times within 2 seconds

This improves accessibility and enables faster emergency exits.

---

🛡️ Safe Redirection Using History API

Implemented:

window.location.replace("https://www.google.com");

instead of:

window.location.href

Why?

Using location.replace() removes SafeVoice from the browser back stack so pressing the browser Back button will not immediately reopen the site.

This helps protect user privacy in unsafe situations.

---

🌍 Global Integration

• Mounted directly inside:

App.tsx

This ensures the feature remains active and accessible regardless of route navigation.

---

🧠 Why this Enhances the Product

This feature demonstrates:

• Strong product thinking
• Empathy-driven UX design
• Awareness of real-world user safety concerns
• Practical use of the Browser History API
• Accessibility-first engineering

It directly aligns with the mission of SafeVoice by prioritizing user protection and emergency usability.

---

🛠️ Implementation Details

Added:

• QuickExit.tsx reusable component
• Global keyboard listener using useEffect
• Escape key sequence tracking logic
• Tailwind CSS styling
• Pulsing alert icon using lucide-react

Escape Detection Logic

• Stores timestamps of Escape key presses
• Validates 3 presses within a 2-second window
• Automatically triggers emergency redirect

---

📸 Screenshots / Video

Please attach screenshots or a short screen recording demonstrating:

• Floating Quick Exit button
• Escape key shortcut
• Redirect behavior

---

✅ Checklist

• Tested manual button click redirection
• Tested Escape ×3 keyboard shortcut
• Verified browser back button does not return to SafeVoice
• Ensured mobile responsiveness
• Checked compatibility with existing floating UI elements
• Added accessibility-friendly interaction support

---

🔖 Labels

enhancement frontend UX accessibility security GSSoC'26

---

🔗 Related Issue

Closes #143

[netlify]

👷 Deploy request for safevoiceforwomen pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	c4e1626

[Piyushydv08]

📝 Description

This PR introduces a ubiquitous "Quick Exit" (Panic Button) to the SafeVoice platform. This is a standard and critical safety feature commonly found on domestic violence, harassment support, and mental health websites.

The feature allows users to instantly leave the platform and hide their activity if someone unexpectedly approaches, prioritizing user safety and privacy.

🎯 Key Features

🔴 Floating Action Button

• Added a highly visible floating “QUICK EXIT” button fixed at the bottom-left corner of the screen.
• Available globally across all pages/routes.
• Styled using Tailwind CSS with an emergency-focused UI.

⌨️ Keyboard Shortcut Support

Users can trigger the quick exit without touching the mouse by:

• Pressing the Escape key 3 times within 2 seconds

This improves accessibility and enables faster emergency exits.

🛡️ Safe Redirection Using History API

Implemented:

window.location.replace("https://www.google.com");

instead of:

window.location.href

Why?

Using location.replace() removes SafeVoice from the browser back stack so pressing the browser Back button will not immediately reopen the site.

This helps protect user privacy in unsafe situations.

🌍 Global Integration

• Mounted directly inside:

App.tsx

This ensures the feature remains active and accessible regardless of route navigation.

🧠 Why this Enhances the Product

This feature demonstrates:

• Strong product thinking
• Empathy-driven UX design
• Awareness of real-world user safety concerns
• Practical use of the Browser History API
• Accessibility-first engineering

It directly aligns with the mission of SafeVoice by prioritizing user protection and emergency usability.

🛠️ Implementation Details

Added:

• QuickExit.tsx reusable component
• Global keyboard listener using useEffect
• Escape key sequence tracking logic
• Tailwind CSS styling
• Pulsing alert icon using lucide-react

Escape Detection Logic

• Stores timestamps of Escape key presses
• Validates 3 presses within a 2-second window
• Automatically triggers emergency redirect

📸 Screenshots / Video

Please attach screenshots or a short screen recording demonstrating:

• Floating Quick Exit button
• Escape key shortcut
• Redirect behavior

✅ Checklist

• Tested manual button click redirection
• Tested Escape ×3 keyboard shortcut
• Verified browser back button does not return to SafeVoice
• Ensured mobile responsiveness
• Checked compatibility with existing floating UI elements
• Added accessibility-friendly interaction support

🔖 Labels

enhancement frontend UX accessibility security GSSoC'26

🔗 Related Issue

Closes #143

Just one little change can u reduce the size of exit button i.e. reduce it to half size

[vivek0369]

@Piyushydv08 but this issue is not beginner level this is intermediate level

[vivek0369]

@Piyushydv08 , Ok I reduce the button size

[Piyushydv08]

@Piyushydv08 but this issue is not beginner level this is intermediate level

Don't worry i will give u intermediate level but adding a button is beginner level