LawBot / src /apps /templates /safetytips.html
Vishwanath77's picture
Upload 13 files
4418e26 verified
Raw History Blame Contribute Delete
10.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Women's Safety & Protection Guidelines</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #E91E63;
--secondary: #9C27B0;
--accent: #FF4081;
--dark: #2A0944;
--light: #F8BBD0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient(135deg, #fff5f7 0%, #f8f4ff 100%);
color: var(--dark);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.safety-tips {
flex: 1;
padding: 4rem 5%;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.page-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.safety-tips .grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.safety-tips .feature-card {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(233, 30, 99, 0.1);
padding: 2rem;
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(233, 30, 99, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.safety-tips .feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(233, 30, 99, 0.1);
}
.safety-tips h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--dark);
border-bottom: 2px solid rgba(233, 30, 99, 0.1);
padding-bottom: 0.8rem;
}
.safety-tips ul {
list-style: none;
padding: 0;
margin: 0;
}
.safety-tips li {
padding: 0.8rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
gap: 1rem;
transition: transform 0.3s ease;
font-size: 0.95rem;
}
.safety-tips li:last-child {
border-bottom: none;
}
.safety-tips li:hover {
transform: translateX(8px);
}
.safety-tips i {
font-size: 1rem;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white;
flex-shrink: 0;
}
.safety-kit {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 2rem;
border: 1px solid rgba(233, 30, 99, 0.1);
box-shadow: 0 8px 32px rgba(233, 30, 99, 0.05);
margin: 3rem 0;
}
.safety-kit h2 {
margin-bottom: 1.5rem;
font-size: 1.8rem;
color: var(--dark);
}
.safety-kit p {
margin-bottom: 1rem;
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.8rem;
}
.action-buttons {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: 2rem;
}
.safety-button {
background: linear-gradient(135deg, var(--primary), var(--secondary));
border: none;
padding: 0.9rem 1.8rem;
border-radius: 50px;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 15px rgba(233, 30, 99, 0.2);
}
.safety-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(233, 30, 99, 0.3);
}
.back-button {
background: #555;
border: none;
padding: 0.9rem 1.8rem;
border-radius: 50px;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.back-button:hover {
background: #444;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.safety-tips {
padding: 2rem 5%;
}
.page-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.safety-tips .feature-card {
padding: 1.5rem;
}
.safety-kit {
padding: 1.5rem;
}
.action-buttons {
flex-direction: column;
gap: 1rem;
}
.safety-button, .back-button {
width: 100%;
justify-content: center;
}
}
</style>
</head>
<body>
<section class="safety-tips" id="safety">
<h1 class="page-title">Safety & Protection Guidelines</h1>
<div class="grid-container">
<div class="feature-card">
<h3>πŸ›‘οΈ General Safety Tips</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> Always share live location with trusted contacts</li>
<li><i class="fas fa-phone-volume"></i> Keep emergency numbers on speed dial (112, 1091)</li>
<li><i class="fas fa-car"></i> Verify cab details before boarding (Check plate)</li>
<li><i class="fas fa-lock"></i> Avoid isolated ATMs/restrooms at night</li>
</ul>
</div>
<div class="feature-card">
<h3>πŸš† Public Transport Safety</h3>
<ul>
<li><i class="fas fa-subway"></i> Use women-only coaches in metros/trains</li>
<li><i class="fas fa-bus"></i> Prefer front seats in buses</li>
<li><i class="fas fa-phone"></i> Download RailMadad app (152 emergency)</li>
<li><i class="fas fa-road"></i> Avoid empty bus stops at night</li>
</ul>
</div>
<div class="feature-card">
<h3>🏒 Workplace Safety</h3>
<ul>
<li><i class="fas fa-gavel"></i> Know POSH Act 2013 provisions</li>
<li><i class="fas fa-file-alt"></i> Document all incidents formally</li>
<li><i class="fas fa-users"></i> Use company transport for late hours</li>
<li><i class="fas fa-exclamation-triangle"></i> Report inappropriate behavior immediately</li>
</ul>
</div>
</div>
<!-- Emergency Preparedness Section -->
<div class="safety-kit">
<h2>Emergency Preparedness Kit</h2>
<p>βœ… Keep pepper spray in easy-to-reach pocket</p>
<p>βœ… Save ICE (In Case of Emergency) contacts</p>
<p>βœ… Create code word with family for danger situations</p>
<p>βœ… Keep β‚Ή100 cash separate for emergencies</p>
</div>
<div class="action-buttons">
<button class="safety-button" onclick="downloadSafetyGuide()">
<i class="fas fa-download"></i>
Download Safety Guide
</button>
<button class="back-button" onclick="goBack()">
<i class="fas fa-arrow-left"></i>
Back to Previous Page
</button>
</div>
</section>
<script>
function downloadSafetyGuide() {
const content = `==================================================
WOMEN'S SAFETY & PROTECTION HANDBOOK
==================================================
1. GENERAL SAFETY TIPS:
- Always share live location with trusted contacts.
- Keep emergency numbers on speed dial (112, 1091).
- Verify cab details before boarding (check number plate).
- Avoid isolated ATMs and restrooms at night.
2. PUBLIC TRANSPORT SAFETY:
- Use women-only coaches in metros and trains.
- Prefer front seats in buses.
- Download RailMadad app (152 for railway emergencies).
- Avoid empty bus stops at night.
3. WORKPLACE SAFETY:
- Know POSH Act 2013 provisions.
- Document all incidents formally.
- Use company transport for late hours.
- Report inappropriate behavior immediately.
4. EMERGENCY PREPAREDNESS CHECKLIST:
- Keep pepper spray in an easy-to-reach pocket.
- Save ICE (In Case of Emergency) contacts.
- Create a code word with family for danger situations.
- Keep a separate reserve of cash for emergencies.
==================================================
EMERGENCY NUMBERS:
National Emergency: 112
Women Helpline: 1091 / 181
Railway Helpline: 139 / 152
==================================================`;
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'Womens_Safety_Handbook.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
function goBack() {
if (window.history.length > 1) {
window.history.back();
} else {
window.location.href = '/woman.html';
}
}
</script>
</body>
</html>