Spaces:

james123231
/

soulmatch-hovedside-v1

Running

App Files Files Community

james123231 commited on 12 days ago

Commit

1b55fe9

verified ·

1 Parent(s): aa19d30

Udskift billeder sådan de passer til tekst indhold - Initial Deployment

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +376 -18
prompts.txt +452 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Soulmatch Hovedside V1
-emoji: 🐠
-colorFrom: blue
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: soulmatch-hovedside-v1
+emoji: 🐳
+colorFrom: pink
+colorTo: green
 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,377 @@
-<!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="da">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SoulMatch - Bekæmp ensomhed gennem fysiske møder</title>
+    <link rel="icon" type="image/x-icon" href="https://q1f3.c3.e2-9.dev/soulmatch-uploads-public/SoulMatch%20logo.jpeg">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#006B76',
+                        'primary-light': '#E6F0F1',
+                        'primary-dark': '#005F69',
+                        accent: '#8A2BE2',
+                        background: '#F8F9FA',
+                        'text-primary': '#212529',
+                        'text-secondary': '#6C757D',
+                        'dark-background': '#121826',
+                        'dark-surface': '#1d2432',
+                        'dark-surface-light': '#2a3343',
+                        'dark-border': '#3c465b',
+                        'dark-text-primary': '#e2e8f0',
+                        'dark-text-secondary': '#94a3b8'
+                    }
+                }
+            },
+            darkMode: 'class'
+        }
+    </script>
+    <style>
+        body {
+            font-family: 'Nunito', sans-serif;
+        }
+        .hero-bg {
+            background: linear-gradient(135deg, #016a75 0%, #016a75 100%);
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #016a75 0%, #016a75 100%);
+        }
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #016a75 0%, #016a75 100%);
+        }
+        .icon-primary {
+            color: #016a75;
+        }
+    </style>
+</head>
+<body class="bg-background dark:bg-dark-background text-text-primary dark:text-dark-text-primary">
+    <!-- Header -->
+    <header class="sticky top-0 z-50 bg-white dark:bg-dark-surface shadow-sm">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <img src="https://q1f3.c3.e2-9.dev/soulmatch-uploads-public/SoulMatch%20logo.jpeg" alt="SoulMatch Logo" class="h-10 w-10 rounded-full">
+                <span class="text-xl font-bold text-primary">SoulMatch</span>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="#" class="font-semibold hover:text-primary transition">Hjem</a>
+                <a href="#" class="font-semibold hover:text-primary transition">Om os</a>
+                <a href="#" class="font-semibold hover:text-primary transition">Funktioner</a>
+                <a href="#" class="font-semibold hover:text-primary transition">Sikkerhed</a>
+                <a href="#" class="font-semibold hover:text-primary transition">Kontakt</a>
+            </nav>
+            <div class="flex items-center space-x-3">
+                <button class="px-4 py-2 rounded-full bg-primary text-white font-bold hover:bg-primary-dark transition">Download</button>
+                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-dark-surface-light">
+                    <i data-feather="moon" class="dark:hidden"></i>
+                    <i data-feather="sun" class="hidden dark:block"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="hero-bg text-white py-16 md:py-24">
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-up">Gem mobilen væk, og vær sammen som mennesker</h1>
+            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">SoulMatch forbinder dig med ligesindede og skaber meningsfulde fysiske møder i virkeligheden</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200">
+                <button class="px-8 py-4 bg-white text-[#016a75] font-bold rounded-full shadow-lg hover:bg-gray-100 transition">Download Appen</button>
+                <button class="px-8 py-4 bg-transparent border-2 border-white text-white font-bold rounded-full hover:bg-white/10 transition">Lær Mere</button>
+            </div>
+        </div>
+    </section>
+    <!-- Problem Section -->
+    <section class="py-16 bg-white dark:bg-dark-surface">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Et stigende samfundsproblem</h2>
+                <p class="text-xl text-text-secondary dark:text-dark-text-secondary max-w-3xl mx-auto">Ensomhed påvirker tusindvis af danskere, især unge. SoulMatch tager fat om kernen i problemet</p>
+            </div>
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div data-aos="fade-right">
+                    <img src="http://static.photos/people/640x360/42" alt="Ensom person i Danmark" class="rounded-2xl shadow-lg">
+                </div>
+                <div data-aos="fade-left">
+                    <h3 class="text-2xl font-bold mb-4">Hver fjerde ung føler sig ensom</h3>
+                    <p class="mb-4 text-text-secondary dark:text-dark-text-secondary">Langvarig ensomhed har alvorlige konsekvenser for både mental og fysisk sundhed. Det koster samfundet over 8 mia. kroner årligt.</p>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="icon-primary mt-1 mr-2"></i>
+                            <span>22% af unge (16-24 år) føler sig alvorligt ensomme</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="icon-primary mt-1 mr-2"></i>
+                            <span>Svært for unge med ADHD og autisme at finde fællesskaber</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="icon-primary mt-1 mr-2"></i>
+                            <span>Mange tilbud, men svært at finde det rigtige lokalt</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Solution Section -->
+    <section class="py-16 bg-primary-light dark:bg-dark-surface">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Hvordan SoulMatch hjælper</h2>
+                <p class="text-xl text-text-secondary dark:text-dark-text-secondary max-w-3xl mx-auto">Vi kombinerer avanceret teknologi med menneskelige behov for at skabe meningsfulde forbindelser</p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-white dark:bg-dark-surface rounded-2xl p-6 shadow-lg feature-card transition" data-aos="fade-up">
+                    <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mb-4">
+                        <i data-feather="users" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">AI-Drevet Matching</h3>
+                    <p class="text-text-secondary dark:text-dark-text-secondary">Matcher dig med ligesindede baseret på personlighed, interesser og baggrund</p>
+                </div>
+                <div class="bg-white dark:bg-dark-surface rounded-2xl p-6 shadow-lg feature-card transition" data-aos="fade-up" data-aos-delay="100">
+                    <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mb-4">
+                        <i data-feather="map-pin" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Fysiske Møder</h3>
+                    <p class="text-text-secondary dark:text-dark-text-secondary">Chatten kræver NFC-bekræftelse inden for 3 dage for at fortsætte samtalen</p>
+                </div>
+                <div class="bg-white dark:bg-dark-surface rounded-2xl p-6 shadow-lg feature-card transition" data-aos="fade-up" data-aos-delay="200">
+                    <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mb-4">
+                        <i data-feather="shield" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Sikkerhed & Tryghed</h3>
+                    <p class="text-text-secondary dark:text-dark-text-secondary">MitID-verificering, ansigtsgenkendelse og SOS-funktion skaber trygge møder</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-16 bg-white dark:bg-dark-background">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Funktioner der skaber forbindelse</h2>
+                <p class="text-xl text-text-secondary dark:text-dark-text-secondary max-w-3xl mx-auto">SoulMatch kombinerer teknologi og menneskelige behov for at skabe autentiske relationer</p>
+            </div>
+            <div class="space-y-16">
+                <div class="flex flex-col md:flex-row items-center gap-8">
+                    <div class="md:w-1/2" data-aos="fade-right">
+                        <img src="http://static.photos/technology/640x360/12" alt="AI Personlighedsmatching teknologi" class="rounded-2xl shadow-lg">
+                    </div>
+                    <div class="md:w-1/2" data-aos="fade-left">
+                        <h3 class="text-2xl font-bold mb-4">Dybdegående Personlighedsmatching</h3>
+                        <p class="mb-4 text-text-secondary dark:text-dark-text-secondary">Vores AI analyserer din personlighed og matcher dig med ligesindede baseret på Jungiansk psykologi og Big Five-modellen.</p>
+                        <ul class="space-y-2">
+                            <li class="flex items-center">
+                                <i data-feather="check" class="icon-primary mr-2"></i>
+                                <span>Valgfri personlighedstest for præcis matching</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="icon-primary mr-2"></i>
+                                <span>Match på interesser, kultur og opvækst</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="flex flex-col md:flex-row-reverse items-center gap-8">
+                    <div class="md:w-1/2" data-aos="fade-left">
+                        <img src="http://static.photos/people/640x360/78" alt="Let's Go funktion - fysiske møder" class="rounded-2xl shadow-lg">
+                    </div>
+                    <div class="md:w-1/2" data-aos="fade-right">
+                        <h3 class="text-2xl font-bold mb-4">"Let's Go" Funktion</h3>
+                        <p class="mb-4 text-text-secondary dark:text-dark-text-secondary">Find personer i dit område med fælles interesser og foreslå konkrete møder. Vores system hjælper med at organisere og planlægge.</p>
+                        <ul class="space-y-2">
+                            <li class="flex items-center">
+                                <i data-feather="check" class="icon-primary mr-2"></i>
+                                <span>Foreslå møder baseret på fælles interesser</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="icon-primary mr-2"></i>
+                                <span>Vælg gruppestørrelse og mødested</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="flex flex-col md:flex-row items-center gap-8">
+                    <div class="md:w-1/2" data-aos="fade-right">
+                        <img src="http://static.photos/cityscape/640x360/34" alt="Events og mødesteder i byen" class="rounded-2xl shadow-lg">
+                    </div>
+                    <div class="md:w-1/2" data-aos="fade-left">
+                        <h3 class="text-2xl font-bold mb-4">Events & Mødesteder</h3>
+                        <p class="mb-4 text-text-secondary dark:text-dark-text-secondary">Find og opret events i dit lokalsamfund. Vores database samler alle sociale tilbud på ét sted.</p>
+                        <ul class="space-y-2">
+                            <li class="flex items-center">
+                                <i data-feather="check" class="icon-primary mr-2"></i>
+                                <span>Database over lokale mødesteder og events</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="icon-primary mr-2"></i>
+                                <span>Opret dine egne events og inviter andre</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-16 bg-[#016a75] text-white">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">Vil du være med til at bekæmpe ensomheden?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Download SoulMatch i dag og tag det første skridt mod meningsfulde forbindelser</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <button class="px-8 py-4 bg-white text-[#016a75] font-bold rounded-full shadow-lg hover:bg-gray-100 transition flex items-center justify-center">
+                    <i data-feather="download" class="mr-2"></i> Download til iOS
+                </button>
+                <button class="px-8 py-4 bg-transparent border-2 border-white text-white font-bold rounded-full hover:bg-white/10 transition flex items-center justify-center">
+                    <i data-feather="download" class="mr-2"></i> Download til Android
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-dark-surface text-dark-text-primary py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <img src="https://q1f3.c3.e2-9.dev/soulmatch-uploads-public/SoulMatch%20logo.jpeg" alt="SoulMatch Logo" class="h-8 w-8 rounded-full">
+                        <span class="text-xl font-bold text-white">SoulMatch</span>
+                    </div>
+                    <p class="text-dark-text-secondary mb-4">Skaber meningsfulde forbindelser gennem fysiske møder og AI-drevet matching.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-dark-text-secondary hover:text-white transition">
+                            <i data-feather="facebook"></i>
+                        </a>
+                        <a href="#" class="text-dark-text-secondary hover:text-white transition">
+                            <i data-feather="instagram"></i>
+                        </a>
+                        <a href="#" class="text-dark-text-secondary hover:text-white transition">
+                            <i data-feather="twitter"></i>
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold text-white mb-4">Produkt</h3>
+                    <ul class="space-y-2 text-dark-text-secondary">
+                        <li><a href="#" class="hover:text-white transition">Funktioner</a></li>
+                        <li><a href="#" class="hover:text-white transition">Sikkerhed</a></li>
+                        <li><a href="#" class="hover:text-white transition">Download</a></li>
+                        <li><a href="#" class="hover:text-white transition">Priser</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold text-white mb-4">Virksomhed</h3>
+                    <ul class="space-y-2 text-dark-text-secondary">
+                        <li><a href="#" class="hover:text-white transition">Om os</a></li>
+                        <li><a href="#" class="hover:text-white transition">Blog</a></li>
+                        <li><a href="#" class="hover:text-white transition">Karriere</a></li>
+                        <li><a href="#" class="hover:text-white transition">Presse</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold text-white mb-4">Support</h3>
+                    <ul class="space-y-2 text-dark-text-secondary">
+                        <li><a href="#" class="hover:text-white transition">Hjælp & FAQ</a></li>
+                        <li><a href="#" class="hover:text-white transition">Kontakt os</a></li>
+                        <li><a href="#" class="hover:text-white transition">Privatlivspolitik</a></li>
+                        <li><a href="#" class="hover:text-white transition">Vilkår for brug</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-dark-border mt-12 pt-8 text-center text-dark-text-secondary">
+                <p>&copy; 2023 SoulMatch. Alle rettigheder forbeholdes.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Set initial theme
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+        // Initialize AOS
+        AOS.init({
+            duration: 800,
+            easing: 'ease-out-cubic'
+        });
+        // Initialize Feather Icons
+        feather.replace();
+        // Theme toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        themeToggle.addEventListener('click', function() {
+            document.documentElement.classList.toggle('dark');
+            if (document.documentElement.classList.contains('dark')) {
+                localStorage.setItem('theme', 'dark');
+            } else {
+                localStorage.setItem('theme', 'light');
+            }
+            // Update icon
+            const sunIcon = themeToggle.querySelector('[data-feather="sun"]');
+            const moonIcon = themeToggle.querySelector('[data-feather="moon"]');
+            if (document.documentElement.classList.contains('dark')) {
+                sunIcon.classList.remove('hidden');
+                moonIcon.classList.add('hidden');
+            } else {
+                sunIcon.classList.add('hidden');
+                moonIcon.classList.remove('hidden');
+            }
+        });
+        // Update theme toggle icon on load
+        function updateThemeIcon() {
+            const sunIcon = themeToggle.querySelector('[data-feather="sun"]');
+            const moonIcon = themeToggle.querySelector('[data-feather="moon"]');
+            if (document.documentElement.classList.contains('dark')) {
+                sunIcon.classList.remove('hidden');
+                moonIcon.classList.add('hidden');
+            } else {
+                sunIcon.classList.add('hidden');
+                moonIcon.classList.remove('hidden');
+            }
+            feather.replace();
+        }
+        // Initial icon update
+        updateThemeIcon();
+        // Listen for theme changes
+        themeToggle.addEventListener('click', updateThemeIcon);
+    </script>
+</body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,452 @@

+Lav denne hovedside for app:
+SoulMatch er en innovativ applikation designet til at bekæmpe den stigende ensomhed i
+Danmark ved at facilitere meningsfulde fællesskaber og trygge, fysiske møder mellem
+mennesker. Appen er skabt ud fra personlig erfaring med ensomhed hos stifteren, Buster, som
+selv har ADHD og autisme. Projektet er udviklet i tæt samarbejde med Aalborg Universitet,
+Psykologi, for at sikre en solid faglig finansiering.
+SoulMatch anvender avanceret AI-teknologi til at matche brugere baseret på en bred vifte af
+kriterier, herunder personlighed, interesser, hobbyer, kultur, opvækst og køn. Appens centrale
+motto er "Gem mobilen væk, og vær sammen som mennesker"
+. Dette understreges af en unik
+funktion, der kræver fysisk fremmøde og NFC-bekræftelse inden for tre dage for at opretholde
+chat forbindelsen. SoulMatch vil desuden integrere en database over sociale tilbud og frivillige
+organisationer, understøttet af kommuner og foreninger, for at gøre det nemmere at finde lokale
+fællesskaber.
+Formålet er at gøre det nemmere, sjovere og mere trygt for folk at mødes fysisk og få samtalen i
+gang, med en vision om at blive Danmarks mest brugte og anerkendte platform for sociale
+events, og senere udvide internationalt.
+2. Problemstilling
+Ensomhed er et alvorligt og stigende samfundsproblem i Danmark. Undersøgelser viser, at op
+mod hver fjerde ung føler sig ensom i længere perioder. Langvarig ensomhed er en alvorlig
+sundhedsmæssig udfordring, der koster samfundet over 8 mia. kroner årligt og øger risikoen for
+bl.a. forhøjet blodtryk, søvnforstyrrelser og depression. For unge i alderen 16-24 år føler 22%
+sig alvorligt ensomme. Ensomhed handler ofte om kvaliteten af relationer snarere end antallet.
+Specifikt for unge med ADHD og autisme, eller unge i generel mistrivsel, kan det være særligt
+svært at finde ligesindede og indgå i meningsfulde relationer. De kan have vanskeligheder med
+at navigere i komplekse sociale situationer, afkode sociale nuancer og tage initiativ til møder
+[Implied from 20, 38]. Der er mange tilbud derude, men det er svært for folk at gennemskue de
+præcise muligheder i deres lokale by inden for deres behov, og selv kommunale medarbejdere
+har svært ved at rumme og huske alle tilbuddene.
+3. Mission, Vision og Værdier
+Mission: At gøre det nemmere, sjovere og mere trygt for folk at mødes fysisk og få samtalen i
+gang.
+Vision: At skabe Danmarks mest brugte og anerkendte platform for sociale events, der hjælper
+folk med at mødes i virkeligheden, med en fremtidig udvidelse til udlandet.
+Værdier:
+●
+●
+●
+●
+●
+●
+●
+●
+Tryghed
+Nye venner
+Fordele med rabatkoder
+Sikkerhed (herunder MitID verificering og SOS alarm)
+Bekræftelse af personen bag skærmen (MitID og ansigtsgodkendelse)
+Gode steder at mødes i sin by
+Virksomheder som støtter kampen mod ensomhed
+Personlighedsanalyse
+Motto: "Gem mobilen væk, og vær sammen som mennesker"
+.
+4. Målgruppe
+Primær målgruppe:
+●
+●
+●
+Ensomme individer, især unge (16-24 år).
+Unge med ADHD og autisme, der oplever ensomhed og har svært ved at finde
+fællesskaber.
+Individer i generel mistrivsel, der søger meningsfulde relationer.
+Sekundær målgruppe:
+●
+Kommuner og deres medarbejdere, der har svært ved at overskue og formidle lokale
+●
+●
+sociale tilbud.
+Foreningslivet og frivillige organisationer, der tilbyder sociale aktiviteter.
+Virksomheder, der ønsker at støtte kampen mod ensomhed og tilbyde rabatter til
+brugere.
+5. Værdiskabelse
+SoulMatch leverer værdi ved at:
+●
+●
+●
+●
+●
+●
+●
+Bekæmpe ensomhed: Ved at facilitere meningsfulde forbindelser, der matcher brugere
+på dybdegående niveauer, adresserer appen ensomhedens kerne, som handler om
+kvaliteten af relationer.
+Fremme inklusion for sårbare grupper: Især for unge med ADHD og autisme tilbyder
+appen en struktureret og tryg ramme for at finde ligesindede, hvilket mindsker social
+angst og følelsen af isolation [Implied from 20, 38]. Dybdegående personlighedsmatch
+og aktivitetsbaserede møder er særligt gavnlige for disse grupper.
+Strukturere sociale møder: Gennem funktioner som "Let's Go" og personlighedsspil
+reduceres barrierer og kognitiv byrde ved at initiere sociale interaktioner.
+Gøre sociale tilbud tilgængelige: En centraliseret database for kommunale og
+foreningsdrevne tilbud løser problemet med informationsspredning og gør det nemmere
+for borgere at finde relevante fællesskaber lokalt.
+Incitament til fysiske møder: Den unikke 3-dages chatgrænse med NFC-bekræftelse
+tvinger brugere til at omsætte online interesse til offline interaktion, hvilket er afgørende
+for at opbygge reelle relationer.
+Sikre tryghed: Robuste sikkerhedsfunktioner som MitID-verificering, ansigts
+godkendelse og en SOS-funktion skaber et fundament af tillid, som er essentielt for
+sårbare brugere.
+Belønne social deltagelse: Rabatordninger og "Buddy Points" motiverer til aktiv
+deltagelse og gentagne møder, hvilket styrker fællesskaberne.
+6. Funktionelle Krav
+6.1. Brugerprofil & Onboarding
+●
+●
+●
+●
+Gratis tilmelding: Brugere skal kunne oprette en profil uden omkostninger.
+Sikkerhedskrav ved tilmelding:
+○
+MitID-verificering: Obligatorisk for at sikre ægte identitet og tryghed.
+○
+Ansigts godkendelse: Ved verificering og upload af profilbilleder for at matche
+person med billeder.
+Sikkerhed ved app-åbning: Ansigts Verificering, fingeraftryk eller pinkode er påkrævet
+for at åbne appen.
+Profiloprettelse:
+○
+Mulighed for at uploade profilbilleder.
+○
+Indtastning af interesser og hobbyer.
+○
+Valgfri personlighedsanalyse (hurtig eller dybdegående) for at øge match succes.
+○
+Indtastning af informationer om kultur, opvækst, køn og "meget mere" til
+AI-match.
+6.2. AI-drevet Matchnings System (Kommende efter beta)
+●
+Avanceret AI: Systemet skal benytte en gennemtestet og trænet AI til præcisions
+matchning.
+●
+●
+Matchnings Kriterier: AI'en matcher baseret på:
+○
+Personlighed: Fra valgfri personlighedsanalyse, inspireret af Jungiansk
+psykologi og Big Five (OCEAN) modeller.
+○
+Interesser og hobbyer: Specificerede af brugeren.
+○
+Kultur, opvækst, køn: Som dybdegående faktorer.
+○
+"Meget mere": Fleksibel udvidelse af kriterier.
+Formål: At skabe meningsfulde fællesskaber og dybe forbindelser ved at hjælpe
+brugere med at forstå sig selv og hinanden.
+6.3. Sociale Interaktion Funktioner
+●
+●
+●
+"Let's Go" Funktion:
+○
+Søgning: Brugere kan søge efter andre baseret på specifikke interesser.
+○
+Møde Initiativer: Mulighed for at foreslå konkrete tidspunkter og steder at
+mødes.
+○
+Gruppestørrelse: Brugere kan vælge, hvor mange der skal deltage i mødet.
+Chatfunktion:
+○
+Privat chat: Mulighed for at skrive med nye bekendtskaber privat, før de tilføjes
+som venner.
+○
+3-dages chat grænse: Chatten slettes automatisk efter 3 dage, medmindre
+brugerne mødes fysisk.
+○
+NFC-bekræftelse: Fysisk møde bekræftes ved at lade to telefoner røre hinanden
+via NFC-teknologi for at bevare chatten.
+○
+Venneanmodning: Efter fysisk møde kan brugere sende venneanmodninger i
+appen.
+○
+Del events: Mulighed for at dele events via chatten med venner.
+Personlighedsspil (valgfri, kommende efter beta):
+○
+Algoritme Genererede spørgsmål: Spørgsmål genereres baseret på brugerens
+personlighedsanalyse, for at facilitere bedre indledende samtaler.
+○
+"Sjove facts": Mulighed for brugere at dele sjove facts om sig selv.
+6.4. Event- og Stedbaserede Funktioner
+●
+●
+Database over mødesteder: En opdateret database over steder, hvor det er muligt at
+mødes med andre, med søgefunktion efter interesse og by.
+Database for kommunale og foreningsdrevne tilbud (Beta-version):
+○
+App'en skal initialt fungere som en opdateret database over frivillige
+organisationer og sociale tilbud i danske kommuner.
+○
+Kommunal/Forenings Login: Medarbejdere fra kommuner og foreninger får et
+login (via medarbejdersignatur) for at oprette og administrere tilbud og events.
+○
+Mailkampagner: Ansvarlige for foreninger får tilsendt login og inviteres ind i
+databasen.
+○
+Facebook Link Integration: Mulighed for automatisk at tilføje informationer fra
+Facebook sider.
+●
+●
+●
+Event Funktionalitet:
+○
+Opret begivenheder: Brugere kan selv oprette og foreslå begivenheder.
+○
+Se begivenheder: Oversigt over kommende begivenheder.
+○
+Hjemmeskærm Visning: Visning af venner og andre deltagere i events på
+hjemmeskærmen.
+○
+Kalenderintegration: Mulighed for automatisk at tilføje events til Google
+Kalender, Apple Kalender mv..
+Frivilligt arbejde: En funktion i appen til at finde frivilligt arbejde i lokalsamfundet.
+Placering Verifikation (kommende efter beta): Verifikation af placering ved events og
+mødesteder.
+6.5. Incitamenter og Belønninger
+●
+●
+●
+Rabatkoder: Brugere kan opnå rabatkoder til samarbejdspartnere (f.eks. Espresso
+House, Heidis Beer Bar), når de mødes med et nyt bekendtskab i minimum 15 minutter.
+○
+Fortjeneste: En del af rabatten (f.eks. 15%) eller en fast fee pr. kupon går til
+driften af appen.
+Buddy Points System (kommende efter beta): Brugere optjener points, når de mødes
+gentagne gange, hvilket giver adgang til yderligere rabatter.
+Sociale Medie Belønninger (ekstra draft funktion): Valgfri mulighed for at opnå f.eks.
+en ekstra kaffe ved at lave opslag på sociale medier om rabatter og tagge Soul Match
+profil.
+6.6. Sikkerhedsfunktioner
+●
+●
+●
+●
+Bruger Verificering: MitID-verificering og ansigts godkendelse ved tilmelding (se 6.1).
+Ansigts-/Fingerprint-/Pinkode-login: Ved hver åbning af app'en for at sikre brugerens
+profil.
+SOS-funktion (kommende efter beta): Aktiveres ved gentagne tryk på lydstyrke
+op-knappen (5 gange), hvorefter kameraet starter med at filme skjult i baggrunden.
+Rapporterings- og udelukkelse system:
+○
+Ved 2 utilfredse anklager mod en person udelukkes vedkommende permanent
+fra platformen.
+○
+Ved meget alvorlige anklager (med beviser) bandlyses personen øjeblikkeligt og
+bliver politianmeldt.
+6.7. Admin- og Backend-funktioner (for Soul Match Team & Partnere)
+●
+"Min side" for kommuner/foreninger: Medarbejderlogin til at administrere tilbud og
+●
+●
+events.
+Rabatkode database (kommende efter beta): Central administration af rabatkoder.
+B2B platform (kommende efter beta): Til virksomhedspartnere med medarbejder
+logins.
+●
+Personlighedstest database (kommende efter beta): Administration af
+personlighedstest data.
+Design guide:
+# SoulMatch Design System & Guide
+## 1. Introduktion & Filosofi
+Velkommen til SoulMatch Design System. Dette dokument er den centrale kilde til sandhed for vores visuelle identitet, UI-komponenter og designprincipper. Vores mål er at skabe en ensartet, intuitiv og tryg oplevelse for alle brugere, der bekæmper ensomhed i Danmark.
+### Vores Designprincipper
+-   **Tryghed Først (Safety First):** Designet skal altid fremstå professionelt, sikkert og troværdigt. Brugeren skal føle sig tryg ved at interagere med appen og andre mennesker.
+-   **Indbydende & Inkluderende (Welcoming & Inclusive):** Vores visuelle sprog er varmt, venligt og imødekommende. Vi designer for alle, uanset baggrund.
+-   **Opfordrende (Encouraging):** Designet skal motivere til handling – især til at deltage i events og mødes i den virkelige verden.
+-   **Simpelt & Fokuseret (Simple & Focused):** Vi undgår unødig kompleksitet. Hver skærm har et klart formål, og brugerflowet er ubesværet.
+---
+## 2. Visuel Identitet
+### 2.1. Logo
+Vores logo repræsenterer forbindelse og fællesskab.
+**Primært Logo:**
+`https://q1f3.c3.e2-9.dev/soulmatch-uploads-public/SoulMatch%20logo.jpeg`
+**Retningslinjer for brug:**
+-   **Frirum:** Bevar altid et frirum omkring logoet svarende til højden på "S"-et i "SoulMatch".
+-   **Baggrund:** Logoet skal primært bruges på lyse eller hvide baggrunde.
+-   **Ændringer:** Logoet må ikke strækkes, forvrænges, omfarves eller ændres på nogen måde.
+### 2.2. Farvepalette
+Vores farver er valgt for at skabe en følelse af ro, tillid og varme.
+#### Light Mode
+| Farve               | HEX-kode  | Tailwind Klasse     | Anvendelse                                          |
+| ------------------- | --------- | ------------------- | --------------------------------------------------- |
+| **Primary**         | `#006B76` | `primary`           | Vigtige knapper (CTAs), aktive links, branding.     |
+| **Primary Light**   | `#E6F0F1` | `primary-light`     | Baggrunde for sektioner, hover-effekter, tags.       |
+| **Primary Dark**    | `#005F69` | `primary-dark`      | Hover-effekter på primære knapper.                  |
+| **Accent**          | `#8A2BE2` | `accent`            | Specielle highlights, AI-funktioner, notifikationer. |
+| **Baggrund**        | `#F8F9FA` | `background`        | Appens overordnede baggrundsfarve.                  |
+| **Tekst Primær**    | `#212529` | `text-primary`      | Overskrifter og primær brødtekst.                   |
+| **Tekst Sekundær**  | `#6C757D` | `text-secondary`    | Undertekster, labels, mindre vigtig information.    |
+#### Dark Mode
+| Farve               | HEX-kode  | Tailwind Klasse         | Anvendelse                                      |
+| ------------------- | --------- | ----------------------- | ----------------------------------------------- |
+| **Baggrund**        | `#121826` | `dark-background`       | Appens overordnede baggrundsfarve.              |
+| **Overflade**       | `#1d2432` | `dark-surface`          | Baggrund for kort, modaler og navigation.       |
+| **Overflade Lys**   | `#2a3343` | `dark-surface-light`    | Baggrund for input-felter, hover-effekter.      |
+| **Kant**            | `#3c465b` | `dark-border`           | Kanter og skillevægge.                          |
+| **Tekst Primær**    | `#e2e8f0` | `dark-text-primary`     | Overskrifter og primær brødtekst.               |
+| **Tekst Sekundær**  | `#94a3b8` | `dark-text-secondary`   | Undertekster, labels.                           |
+#### Statusfarver
+| Status    | Light Mode                 | Dark Mode                      | Anvendelse                                    |
+| --------- | -------------------------- | ------------------------------ | --------------------------------------------- |
+| **Succes**| `bg-green-100`, `text-green-800` | `bg-green-900/30`, `text-green-300` | Bekræftelser, succesfulde handlinger.         |
+| **Fejl**  | `bg-red-100`, `text-red-600`     | `bg-red-900/20`, `text-red-400`       | Fejlmeddelelser, advarsler om sletning.     |
+| **Advarsel**| `bg-yellow-100`, `text-yellow-800` | `bg-yellow-900/30`, `text-yellow-300` | Vigtig information, der kræver opmærksomhed. |
+### 2.3. Typografi
+Vi bruger **Nunito** som vores primære font for dens venlige, læselige og moderne udtryk.
+| Element         | Størrelse        | Vægt         | Tailwind Klasse                  |
+| --------------- | ---------------- | ------------ | -------------------------------- |
+| **Overskrift 1**| 30px (1.875rem)  | Bold (700)   | `text-3xl font-bold`             |
+| **Overskrift 2**| 24px (1.5rem)    | Bold (700)   | `text-2xl font-bold`             |
+| **Overskrift 3**| 20px (1.25rem)   | Bold (700)   | `text-xl font-bold`              |
+| **Brødtekst**   | 16px (1rem)      | Normal (400) | `text-base`                      |
+| **Label/Lille** | 14px (0.875rem)  | Semibold(600)| `text-sm font-semibold`          |
+| **Ekstra Lille**| 12px (0.75rem)   | Normal (400) | `text-xs`                        |
+---
+## 3. Layout & Spacing
+Konsistens i afstand er nøglen til et rent og professionelt design. Vores system er baseret på en **4px grid**.
+| Værdi | Tailwind Eksempel |
+| ----- | ----------------- |
+| 4px   | `p-1`, `space-x-1`|
+| 8px   | `p-2`, `space-x-2`|
+| 12px  | `p-3`             |
+| 16px  | `p-4`, `m-4`      |
+| 24px  | `p-6`             |
+| 32px  | `p-8`             |
+**Generelle Layouts:**
+-   **Mobil:** Enkelt kolonne-layout med `BottomNav` i bunden.
+-   **Desktop:** To-kolonne-layout, hvor `BottomNav` omdannes til en `Sidebar` i venstre side, og hovedindholdet vises til højre.
+---
+## 4. Ikonografi
+Vi bruger **Lucide Icons** for deres rene, lette og konsistente stil.
+-   **Standardstørrelse:** 24px til navigation og store ikoner. 20px eller 16px til mindre ikoner i knapper eller lister.
+-   **Stroke Width:** `1.5` for organisation-ikoner, `2` for standard-ikoner, `2.5` for aktive navigations-ikoner.
+-   **Anvendelse:** Ikoner skal altid ledsages af en tekst-label, medmindre funktionen er universelt genkendelig (f.eks. et 'X' for at lukke). Brug `aria-label` for ikon-knapper uden synlig tekst.
+---
+## 5. Komponentbibliotek
+Dette er kernen i vores design system. Hver komponent er designet til at være genanvendelig, konsistent og tilgængelig.
+### 5.1. Knapper (Buttons)
+| Type                | Beskrivelse                                        | Klasse (Eksempel)                                                                |
+| ------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------- |
+| **Primær (CTA)**    | Til den vigtigste handling på en side.             | `bg-primary text-white font-bold py-3 px-6 rounded-full shadow-lg`                 |
+| **Sekundær**        | Til mindre vigtige handlinger.                     | `bg-primary-light text-primary font-bold py-3 px-6 rounded-full`                 |
+| **Tekst/Link**      | Til navigation eller handlinger med lav prioritet.  | `text-primary font-bold hover:underline`                                         |
+| **Destruktiv**      | Til handlinger, der sletter data.                  | `bg-red-600 text-white font-bold ...`                                            |
+**States:** Alle knapper skal have tydelige `hover`, `focus`, `active`, og `disabled` states.
+### 5.2. Kort (Cards)
+Kort er den primære måde, vi viser indhold som events og mødesteder.
+-   **`EventCard`:** Viser billede, tidspunkt, titel, antal deltagere og host. Har en `hover`-effekt, hvor billedet zoomer let.
+-   **`PlaceCard`:** Kompakt design med billede, tilbud, navn, adresse og kategori.
+-   **Generelt:** Alle kort har `rounded-2xl`, `bg-white dark:bg-dark-surface`, og en let `shadow-sm`.
+### 5.3. Formularer (Forms)
+-   **Input-felter:** Skal have en label, `bg-gray-50 dark:bg-dark-surface-light`, `rounded-lg`, og en tydelig `focus`-state med en `primary` ring.
+-   **Textareas:** Følger samme stil som input-felter.
+-   **`ToggleSwitch`:** En specialdesignet switch til til/fra-valg.
+-   **`CategorySelector`:** En genanvendelig komponent med indbygget søgefunktion og dropdown-funktionalitet til valg af kategorier.
+### 5.4. Modaler (Modals)
+-   **Baggrund:** En mørk, semi-transparent overlay (`bg-black bg-opacity-50`).
+-   **Indhold:** En centreret boks (`bg-white dark:bg-dark-surface`, `rounded-2xl`) med indholdet.
+-   **Lukning:** Skal kunne lukkes ved at klikke uden for modalen eller på et 'X'-ikon. Focus skal fanges inde i modalen.
+-   **Eksempler:** `PlaceDetailModal`, `ShareModal`, `ReportUserModal`.
+### 5.5. Navigation
+-   **`BottomNav` (Mobil):** Fast i bunden med 5 ikoner. Den centrale "Opret"-knap er større og hævet.
+-   **`OrganizationSidebar` (Desktop):** Fast i venstre side med ikoner og tekst-labels.
+### 5.6. Feedback & Notifikationer
+-   **`Toast`:** Vises nederst til højre. Forsvinder automatisk efter 5 sekunder. Bruges til ikke-kritiske notifikationer.
+-   **`LoadingScreen`:** En fuldskærms- eller inline-komponent med SoulMatch-logoet og en blød fade-animation. Bruges ved indlæsning af appen eller sider.
+-   **Fejlmeddelelser:** Vises inline i formularer eller som en banner-komponent for side-dækkende fejl. Skal være i fejlfarven (rød).
+---
+## 6. Animation & Bevægelse (Motion)
+Vi bruger **Framer Motion** til at tilføje subtile og meningsfulde animationer.
+-   **Side-overgange:** En simpel `fade`-effekt (`opacity: 0` til `1`).
+-   **Modal-visning:** En kombination af `scale` og `opacity` for en blød pop-up-effekt.
+-   **Liste-elementer:** Når nye elementer tilføjes til en liste (f.eks. tags), animeres de ind med `opacity` og `scale`.
+-   **Loading-animationer:** `pulse-slow` animation for at indikere aktivitet.
+---
+## 7. Tilgængelighed (Accessibility - a11y)
+Vi stræber efter at overholde **WCAG 2.1 AA**-standarderne.
+-   **Farvekontrast:** Al tekst skal have en kontrastratio på mindst 4.5:1 mod sin baggrund.
+-   **Semantisk HTML:** Korrekt brug af `<nav>`, `<main>`, `<button>`, etc.
+-   **Tastatur-navigation:** Alle interaktive elementer skal være tilgængelige og kunne betjenes via tastatur. En tydelig `focus`-ring skal være synlig.
+-   **ARIA-attributter:** Brug af `aria-label`, `role`, og `aria-live` for at give kontekst til skærmlæsere, især for ikon-knapper og dynamisk indhold som toasts.
+-   **Billeder:** Alle billeder, der formidler indhold, skal have en beskrivende `alt`-tekst. Dekorative billeder skal have en tom `alt=""`.
+---
+## 8. Sprog & Tone (Voice & Tone)
+-   **Sprog:** Dansk.
+-   **Tone:**
+    -   **Velkommende:** "Velkommen tilbage", "Fortæl os lidt om dig selv".
+    -   **Opmuntrende:** "Find din nye SoulMate", "Skal vi tage afsted sammen? 😊".
+    -   **Klar og direkte:** "Opret Event", "Gem Ændringer".
+    -   **Tryghedsskabende:** "Din anmeldelse er anonym."
+-   **Emojis:** Brug af emojis (😊, 😎, 🎉) er opfordret, hvor det passer, for at skabe en venlig og uformel tone, der appellerer til vores målgruppe.
+Lys mode virker ik
+Gradients skal være i designguide farverne #016a75
+Det skal være farverne #016a75
+Icon farver skal være 016a75
+Icon farver skal være #016a75
+Få billederne til at passe med titlerne
+Udskift billeder sådan de passer til tekst indhold