src/apps/templates/resources.html

<!-- Add this section below the Safety Section in your existing code -->
<section class="safety-tips" id="safety">
    <div class="grid-container">
        <div class="feature-card">
    <h3>🧠 Mental Health</h3>
    <ul>
        <li><i class="fas fa-phone-alt"></i> NIMHANS helpline: 080-4611 0007</li>
        
        <!-- Yoga & Meditation Section -->
        <li class="nested-item">
            <div class="expandable-section">
                <i class="fas fa-spa"></i> Yoga & Meditation Centers in Chennai
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <ul class="nested-list">
                <li class="nested-list"  onclick="window.open('https://www.ishayoga.org', '_blank')">
                    <strong>Isha Yoga Center</strong><br>
                    <small>Velliangiri Foothills | +91 83000 83111</small>
                </li>
                <li class="nested-list" onclick="window.open('https://aurosociety.org/', '_blank')">
                    <strong>Sri Aurobindo Society</strong><br>
                    <small>Alwarpet | +91 44 2499 6284</small>
                </li>
                <li class="nested-list" onclick="window.open('https://www.artofliving.org', '_blank')">
                    <strong>Art of Living Center</strong><br>
                    <small>Teynampet | +91 96000 96000</small>
                </li>
                <li class="nested-list" onclick="window.open('https://www.sivananda.org.in', '_blank')">
                    <strong>Sivananda Yoga Vedanta</strong><br>
                    <small>Mylapore | +91 44 2491 7726</small>
                </li>
            
            </ul>
        </li>
        
        <!-- Additional mental health resources can go here -->
    
    </ul>
</div>

        <div class="feature-card">
            <h3>⚖️ Legal Remedies</h3>
            <ul>
                <li><i class="fas fa-clipboard-check"></i> Right to Constitutional Remedies (Article 32)</li>
                <li><i class="fas fa-user-shield"></i> Right to Legal Aid</li>
                <li><i class="fas fa-scale-balanced"></i> File Public Interest Litigation (PIL)</li>
                <li><i class="fas fa-landmark"></i> Seek Protection Under Special Laws</li>
            </ul>
        </div>
    </div>

    <!-- Emergency Legal Assistance Section -->
    <div class="law-section">
        <h2>Immediate Health Assistance</h2>
        <div class="quick-links">
            <div class="safety-kit">
                <p>✅ Dial 108 for ambulance services</p>
                <p>✅ Telemedicine - eSanjeevani: World's largest telemedicine service</p>
                <p>✅ Approach Lok Adalats for quick settlements</p>
                <p>✅ Jan Aushadhi generic medicine stores locato</p>
            </div>
            <button class="safety-button" onclick="downloadLegalGuide()">
                <i class="fas fa-download"></i>
                Download Legal Rights Guide
            </button>
        </div>
    </div>
    
    <button class="back-button" onclick="goBack()">
        <i class="fas fa-arrow-left"></i>
        Back to Previous Page
    </button>
</section>

<!-- Existing CSS for Safety Section -->
<style>
.nested-list {
        cursor: pointer;
    }
.safety-tips {
    position: relative;
    padding: 8rem 5%;
    background: #f9f9f9;
}

.safety-tips .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
}

.safety-tips .feature-card {
    background: white;
    border: 1px solid #ddd;
    padding: 2.5rem;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.safety-tips .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.safety-tips h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #333;
}

.safety-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.safety-tips li {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease;
}

.safety-tips li:last-child {
    border-bottom: none;
}

.safety-tips li:hover {
    transform: translateX(8px);
}

.safety-tips i {
    font-size: 1.1rem;
    width: auto;
    height: auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e91e63;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.safety-kit {
    background: white;
    border-radius: 12px;
    padding: 2.5rem;
    border: 1px solid #ddd;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 4rem 0;
}

.safety-button {
    background: #e91e63;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
}

.safety-button:hover {
    background: #d81b60;
}

.back-button {
    background: #555;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    margin-top: 2rem;
}

.back-button:hover {
    background: #333;
}

@media (max-width: 768px) {
    .safety-tips {
        padding: 4rem 5%;
    }
    .safety-tips .feature-card {
        padding: 1.75rem;
    }
    .safety-kit {
        padding: 1.5rem;
    }
}
</style>

<script>
function downloadLegalGuide() {
    alert("Downloading Legal Rights Guide...");
}

function goBack() {
    window.history.back();
}
</script>