| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Identity & Mental Health</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| min-height: 100vh; |
| } |
| |
| .identity-card { |
| transition: all 0.3s ease; |
| transform-style: preserve-3d; |
| perspective: 1000px; |
| cursor: pointer; |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| |
| .identity-card:hover { |
| transform: translateY(-5px) scale(1.03); |
| box-shadow: 0 15px 30px rgba(0,0,0,0.2); |
| } |
| |
| .card-front, .card-back { |
| backface-visibility: hidden; |
| transition: all 0.6s ease; |
| } |
| |
| .card-back { |
| transform: rotateY(180deg); |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .flipped .card-front { |
| transform: rotateY(180deg); |
| } |
| |
| .flipped .card-back { |
| transform: rotateY(0deg); |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .rainbow-text { |
| background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); |
| background-size: 400% 400%; |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| animation: rainbow 8s ease infinite; |
| } |
| |
| @keyframes rainbow { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| </style> |
| </head> |
| <body class="py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="max-w-7xl mx-auto"> |
| <header class="text-center mb-16"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 rainbow-text">Dimensions of Identity</h1> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Exploring how different aspects of identity intersect with mental health and wellbeing</p> |
| <div class="mt-8"> |
| <button id="shuffle-btn" class="px-6 py-3 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition flex items-center mx-auto"> |
| <i class="fas fa-random mr-2"></i> Shuffle Layout |
| </button> |
| </div> |
| </header> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="identity-grid"> |
| |
| </div> |
| |
| <div class="mt-16 bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Understanding Identity & Mental Health</h2> |
| <p class="text-gray-600 mb-4"> |
| Each aspect of our identity can influence our mental health experiences. Societal attitudes, discrimination, |
| and personal acceptance all play roles in how these identities affect wellbeing. |
| </p> |
| <div class="bg-indigo-50 rounded-lg p-4 border-l-4 border-indigo-500"> |
| <p class="text-indigo-800"> |
| <i class="fas fa-info-circle mr-2"></i> Click on any identity card to learn more about its mental health implications. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const identities = [ |
| { |
| title: "Race", |
| icon: "fas fa-globe", |
| color: "bg-blue-500", |
| backContent: "Racial discrimination and microaggressions can lead to chronic stress, anxiety, and depression." |
| }, |
| { |
| title: "Religion", |
| icon: "fas fa-praying-hands", |
| color: "bg-purple-500", |
| backContent: "Religious identity can provide community support but may also lead to discrimination or internal conflict." |
| }, |
| { |
| title: "Gender-Science", |
| icon: "fas fa-atom", |
| color: "bg-green-500", |
| backContent: "Gender stereotypes in STEM fields can create barriers and impact self-esteem and career satisfaction." |
| }, |
| { |
| title: "Sexuality", |
| icon: "fas fa-rainbow", |
| color: "bg-pink-500", |
| backContent: "LGBTQ+ individuals face higher rates of mental health challenges due to stigma and minority stress." |
| }, |
| { |
| title: "Asian", |
| icon: "fas fa-yin-yang", |
| color: "bg-red-500", |
| backContent: "Model minority myth can create pressure and mask mental health needs in Asian communities." |
| }, |
| { |
| title: "Transgender", |
| icon: "fas fa-transgender", |
| color: "bg-indigo-500", |
| backContent: "Gender dysphoria and transphobia contribute to higher rates of depression and anxiety." |
| }, |
| { |
| title: "Age", |
| icon: "fas fa-hourglass-half", |
| color: "bg-yellow-500", |
| backContent: "Ageism affects self-worth and can lead to isolation, particularly in older adults." |
| }, |
| { |
| title: "Gender-Career", |
| icon: "fas fa-briefcase", |
| color: "bg-teal-500", |
| backContent: "Gender roles in the workplace can create stress, imposter syndrome, and career limitations." |
| }, |
| { |
| title: "Weight", |
| icon: "fas fa-weight", |
| color: "bg-orange-500", |
| backContent: "Weight stigma is linked to body dissatisfaction, eating disorders, and depression." |
| }, |
| { |
| title: "Arab-Muslim", |
| icon: "fas fa-mosque", |
| color: "bg-emerald-500", |
| backContent: "Islamophobia and stereotyping can lead to anxiety, hypervigilance, and identity conflicts." |
| }, |
| { |
| title: "Disability", |
| icon: "fas fa-wheelchair", |
| color: "bg-amber-500", |
| backContent: "Ableism and accessibility barriers contribute to social isolation and mental health challenges." |
| } |
| ]; |
| |
| const grid = document.getElementById('identity-grid'); |
| |
| |
| identities.forEach(identity => { |
| const card = document.createElement('div'); |
| card.className = `identity-card relative rounded-xl overflow-hidden h-48 ${identity.color} text-white`; |
| card.innerHTML = ` |
| <div class="card-front h-full flex flex-col items-center justify-center p-6"> |
| <i class="${identity.icon} text-4xl mb-4"></i> |
| <h3 class="text-2xl font-bold text-center">${identity.title}</h3> |
| <p class="mt-2 text-sm opacity-80">Click to learn more</p> |
| </div> |
| <div class="card-back ${identity.color} h-full flex items-center justify-center p-6"> |
| <p class="text-center">${identity.backContent}</p> |
| </div> |
| `; |
| |
| card.addEventListener('click', function() { |
| this.classList.toggle('flipped'); |
| }); |
| |
| grid.appendChild(card); |
| }); |
| |
| |
| document.getElementById('shuffle-btn').addEventListener('click', function() { |
| const cards = Array.from(grid.children); |
| cards.sort(() => Math.random() - 0.5); |
| |
| |
| while (grid.firstChild) { |
| grid.removeChild(grid.firstChild); |
| } |
| |
| |
| cards.forEach(card => { |
| grid.appendChild(card); |
| card.classList.remove('flipped'); |
| }); |
| |
| |
| cards.forEach(card => { |
| card.classList.add('pulse'); |
| setTimeout(() => { |
| card.classList.remove('pulse'); |
| }, 2000); |
| }); |
| }); |
| |
| |
| const header = document.querySelector('header h1'); |
| setInterval(() => { |
| header.classList.toggle('animate-bounce'); |
| }, 3000); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cubdavid/behavioral-first-responder-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
