Spaces:

cubdavid
/

behavioral-first-responder-space

Running

App Files Files Community

cubdavid commited on Apr 28

Commit

4258c01

verified ·

1 Parent(s): f10e467

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +237 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Behavioral First Responder Space
-emoji: 🦀
-colorFrom: green
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: behavioral-first-responder-space
+emoji: 🐳
+colorFrom: gray
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,237 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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">
+            <!-- Cards will be inserted here by JavaScript -->
+        </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');
+            // Create cards
+            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);
+            });
+            // Shuffle button functionality
+            document.getElementById('shuffle-btn').addEventListener('click', function() {
+                const cards = Array.from(grid.children);
+                cards.sort(() => Math.random() - 0.5);
+                // Remove all cards
+                while (grid.firstChild) {
+                    grid.removeChild(grid.firstChild);
+                }
+                // Add back shuffled cards
+                cards.forEach(card => {
+                    grid.appendChild(card);
+                    card.classList.remove('flipped');
+                });
+                // Add pulse animation to all cards
+                cards.forEach(card => {
+                    card.classList.add('pulse');
+                    setTimeout(() => {
+                        card.classList.remove('pulse');
+                    }, 2000);
+                });
+            });
+            // Add animation to header
+            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>

prompts.txt ADDED Viewed

File without changes