Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ConnectSphere - Privates Netzwerk</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .post-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .post-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .upload-container { | |
| border: 2px dashed #a777e3; | |
| transition: all 0.3s; | |
| } | |
| .upload-container:hover { | |
| border-color: #6e8efb; | |
| background-color: rgba(110, 142, 251, 0.05); | |
| } | |
| .floating-btn { | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); | |
| } | |
| .avatar-upload { | |
| position: relative; | |
| } | |
| .avatar-upload input { | |
| display: none; | |
| } | |
| .avatar-upload label { | |
| cursor: pointer; | |
| } | |
| .avatar-preview { | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Login/Register Modal --> | |
| <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded-lg w-full max-w-md p-6 mx-4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">ConnectSphere</h2> | |
| <button id="closeAuthModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="authTabs" class="flex border-b mb-6"> | |
| <button class="tab-btn active py-2 px-4 font-medium text-purple-600 border-b-2 border-purple-600" data-tab="login">Anmelden</button> | |
| <button class="tab-btn py-2 px-4 font-medium text-gray-500" data-tab="register">Registrieren</button> | |
| </div> | |
| <!-- Login Form --> | |
| <div id="loginTab" class="auth-tab active"> | |
| <form id="loginForm"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="loginEmail">E-Mail</label> | |
| <input type="email" id="loginEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2" for="loginPassword">Passwort</label> | |
| <input type="password" id="loginPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| </div> | |
| <button type="submit" class="w-full bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700 transition duration-300">Anmelden</button> | |
| </form> | |
| <div class="mt-4 text-center"> | |
| <a href="#" id="forgotPassword" class="text-purple-600 hover:underline">Passwort vergessen?</a> | |
| </div> | |
| </div> | |
| <!-- Register Form --> | |
| <div id="registerTab" class="auth-tab hidden"> | |
| <form id="registerForm"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="fullName">Vollständiger Name</label> | |
| <input type="text" id="fullName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="email">E-Mail</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="password">Passwort</label> | |
| <input type="password" id="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2" for="confirmPassword">Passwort bestätigen</label> | |
| <input type="password" id="confirmPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="avatar-upload flex flex-col items-center"> | |
| <div class="avatar-preview mb-2 bg-gray-200"></div> | |
| <label class="text-purple-600 cursor-pointer"> | |
| <i class="fas fa-camera mr-2"></i> | |
| <span>Profilbild hochladen</span> | |
| <input type="file" id="avatar" accept="image/*"> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-6 flex items-center"> | |
| <input type="checkbox" id="terms" class="mr-2" required> | |
| <label for="terms" class="text-gray-700">Ich akzeptiere die <a href="#" class="text-purple-600 hover:underline">Nutzungsbedingungen</a></label> | |
| </div> | |
| <button type="submit" class="w-full bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700 transition duration-300">Konto erstellen</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main App (hidden until auth) --> | |
| <div id="appContainer" class="hidden"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex items-center py-2 px-2 text-2xl font-bold text-purple-600"> | |
| <i class="fas fa-users mr-2"></i> | |
| <span>ConnectSphere</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-1"> | |
| <a href="#" class="nav-link active"><i class="fas fa-home mr-1"></i> Start</a> | |
| <a href="#" class="nav-link"><i class="fas fa-user-friends mr-1"></i> Netzwerk</a> | |
| <a href="#" class="nav-link"><i class="fas fa-bell mr-1"></i> Benachrichtigungen</a> | |
| <a href="#" class="nav-link"><i class="fas fa-envelope mr-1"></i> Nachrichten</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative" id="searchContainer"> | |
| <input type="text" placeholder="Suchen..." class="px-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-purple-500 w-56"> | |
| <button class="absolute right-3 top-2 text-gray-500"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="ml-4 dropdown relative"> | |
| <button id="userDropdown" class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-8 w-8 rounded-full object-cover"> | |
| <span class="ml-2 hidden md:inline">Nina M.</span> | |
| </button> | |
| <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden"> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-purple-50"><i class="fas fa-user mr-2"></i> Profil</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-purple-50"><i class="fas fa-cog mr-2"></i> Einstellungen</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-purple-50"><i class="fas fa-sign-out-alt mr-2"></i> Abmelden</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="max-w-6xl mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <!-- Left Sidebar --> | |
| <div class="w-full md:w-1/4 flex flex-col gap-4"> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex flex-col items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-24 w-24 rounded-full object-cover border-4 border-white shadow mb-4"> | |
| <h3 class="font-bold text-lg">Nina Müller</h3> | |
| <p class="text-gray-600 text-sm">Web Developer</p> | |
| <div class="border-t border-gray-200 w-full my-3"></div> | |
| <div class="flex justify-between w-full text-sm mb-2"> | |
| <span>Beiträge</span> | |
| <span class="font-bold">124</span> | |
| </div> | |
| <div class="flex justify-between w-full text-sm mb-2"> | |
| <span>Freunde</span> | |
| <span class="font-bold">532</span> | |
| </div> | |
| <div class="flex justify-between w-full text-sm"> | |
| <span>Gruppen</span> | |
| <span class="font-bold">8</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <h3 class="font-bold mb-3">Kurznachrichten</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="h-10 w-10 rounded-full mr-2"> | |
| <div> | |
| <p class="text-sm font-medium">Tom Weber</p> | |
| <p class="text-xs text-gray-500">Wie war dein Wochenende?</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" class="h-10 w-10 rounded-full mr-2"> | |
| <div> | |
| <p class="text-sm font-medium">Sarah Klein</p> | |
| <p class="text-xs text-gray-500">Hast du den neuen Bericht gesehen?</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" class="h-10 w-10 rounded-full mr-2"> | |
| <div> | |
| <p class="text-sm font-medium">Markus Vogel</p> | |
| <p class="text-xs text-gray-500">Wir sollten uns bald treffen!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 text-purple-600 text-sm font-medium hover:underline">Alle Nachrichten anzeigen</button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <h3 class="font-bold mb-3">Beliebte Gruppen</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-2"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Web Developers</p> | |
| <p class="text-xs text-gray-500">342 Mitglieder</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-2"> | |
| <i class="fas fa-paint-brush"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Kreative Köpfe</p> | |
| <p class="text-xs text-gray-500">189 Mitglieder</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-2"> | |
| <i class="fas fa-leaf"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Nachhaltiges Leben</p> | |
| <p class="text-xs text-gray-500">526 Mitglieder</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 text-purple-600 text-sm font-medium hover:underline">Alle Gruppen anzeigen</button> | |
| </div> | |
| </div> | |
| <!-- Main Feed --> | |
| <div class="w-full md:w-2/4 flex flex-col gap-4"> | |
| <!-- Create Post --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-10 w-10 rounded-full mr-2"> | |
| <input type="text" placeholder="Was möchtest du teilen?" class="bg-gray-100 rounded-full px-4 w-full focus:outline-none" id="postInput"> | |
| </div> | |
| <div class="flex justify-between border-t pt-3"> | |
| <label for="imageUpload" class="flex items-center text-gray-500 hover:text-purple-600 cursor-pointer"> | |
| <i class="fas fa-image mr-2"></i> | |
| <span>Bild/Video</span> | |
| <input type="file" id="imageUpload" accept="image/*,video/*" class="hidden"> | |
| </label> | |
| <label class="flex items-center text-gray-500 hover:text-purple-600 cursor-pointer"> | |
| <i class="fas fa-user-tag mr-2"></i> | |
| <span>Personen markieren</span> | |
| </label> | |
| <label class="flex items-center text-gray-500 hover:text-purple-600 cursor-pointer"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> | |
| <span>Ort hinzufügen</span> | |
| </label> | |
| <button id="postBtn" class="bg-purple-600 text-white px-4 py-1 rounded-full hover:bg-purple-700">Posten</button> | |
| </div> | |
| </div> | |
| <!-- Post Feed --> | |
| <div id="postFeed" class="space-y-4"> | |
| <!-- Sample Post 1 --> | |
| <div class="bg-white rounded-lg shadow post-card"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="h-10 w-10 rounded-full mr-2"> | |
| <div> | |
| <h4 class="font-bold">Tom Weber</h4> | |
| <p class="text-xs text-gray-500">Vor 2 Stunden · <i class="fas fa-globe-americas"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-3">Heute war ein produktiver Tag! Hab endlich mein neues Projekt fertiggestellt. Wer möchte sich das Ergebnis ansehen?</p> | |
| <div class="mb-3 rounded-lg overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/600x400/?code" class="w-full h-auto"> | |
| </div> | |
| <div class="flex justify-between text-gray-500 border-t border-b py-2 mb-3"> | |
| <button class="flex items-center hover:text-purple-600"> | |
| <i class="far fa-thumbs-up mr-1"></i> | |
| <span>Gefällt mir</span> | |
| </button> | |
| <button class="flex items-center hover:text-purple-600"> | |
| <i class="far fa-comment mr-1"></i> | |
| <span>Kommentieren</span> | |
| </button> | |
| <button class="flex items-center hover:text-purple-600"> | |
| <i class="fas fa-share mr-1"></i> | |
| <span>Teilen</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" class="h-5 w-5 rounded-full border-2 border-white"> | |
| <img src="https://randomuser.me/api/portraits/men/91.jpg" class="h-5 w-5 rounded-full border-2 border-white"> | |
| </div> | |
| <p class="text-xs ml-2">12 Personen gefällt das</p> | |
| </div> | |
| <div class="flex items-center mt-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-8 w-8 rounded-full mr-2"> | |
| <div class="flex-grow"> | |
| <input type="text" placeholder="Schreibe einen Kommentar..." class="bg-gray-100 rounded-full px-3 py-1 w-full focus:outline-none"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sample Post 2 --> | |
| <div class="bg-white rounded-lg shadow post-card"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" class="h-10 w-10 rounded-full mr-2"> | |
| <div> | |
| <h4 class="font-bold">Sarah Klein</h4> | |
| <p class="text-xs text-gray-500">Gestern · <i class="fas fa-user-friends"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-3">War gestern bei diesem großartigen Konzert! Hier ein paar Eindrücke:</p> | |
| <div class="grid grid-cols-3 gap-1 mb-3 rounded-lg overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x300/?concert1" class="w-full h-32 object-cover"> | |
| <img src="https://source.unsplash.com/random/300x300/?concert2" class="w-full h-32 object-cover"> | |
| <img src="https://source.unsplash.com/random/300x300/?concert3" class="w-full h-32 object-cover"> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>Berlin, Deutschland</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500 mt-1"> | |
| <i class="fas fa-user-tag mr-1"></i> | |
| <span>Tom Weber, Nina Müller</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-gray-500 border-t border-b py-2 mb-3"> | |
| <button class="flex items-center hover:text-purple-600"> | |
| <i class="far fa-thumbs-up mr-1"></i> | |
| <span>Gefällt mir</span> | |
| </button> | |
| <button class="flex items-center hover:text-purple-600"> | |
| <i class="far fa-comment mr-1"></i> | |
| <span>Kommentieren</span> | |
| </button> | |
| <button class="flex items-center hover:text-purple-600"> | |
| <i class="fas fa-share mr-1"></i> | |
| <span>Teilen</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" class="h-5 w-5 rounded-full border-2 border-white"> | |
| <img src="https://randomuser.me/api/portraits/men/91.jpg" class="h-5 w-5 rounded-full border-2 border-white"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="h-5 w-5 rounded-full border-2 border-white"> | |
| </div> | |
| <p class="text-xs ml-2">23 Personen gefällt das</p> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="h-6 w-6 rounded-full mr-2 mt-1"> | |
| <div class="bg-gray-100 rounded-lg p-2 text-sm"> | |
| <p class="font-medium">Tom Weber</p> | |
| <p>Sieht super aus! Könnten wir das nächste Mal zusammen gehen :)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center mt-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-8 w-8 rounded-full mr-2"> | |
| <div class="flex-grow"> | |
| <input type="text" placeholder="Schreibe einen Kommentar..." class="bg-gray-100 rounded-full px-3 py-1 w-full focus:outline-none"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="w-full md:w-1/4 flex flex-col gap-4"> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <h3 class="font-bold mb-3">Veranstaltungen</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 text-purple-600 rounded-lg p-2 mr-3 text-center"> | |
| <p class="font-bold text-lg">15</p> | |
| <p class="text-xs">MAI</p> | |
| </div> | |
| <div> | |
| <p class="font-medium">Web Developer Meetup</p> | |
| <p class="text-xs text-gray-500">Berlin, 18:00 Uhr</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 rounded-lg p-2 mr-3 text-center"> | |
| <p class="font-bold text-lg">22</p> | |
| <p class="text-xs">MAI</p> | |
| </div> | |
| <div> | |
| <p class="font-medium">Team Workshop</p> | |
| <p class="text-xs text-gray-500">Remote, 10:00 Uhr</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 text-green-600 rounded-lg p-2 mr-3 text-center"> | |
| <p class="font-bold text-lg">30</p> | |
| <p class="text-xs">MAI</p> | |
| </div> | |
| <div> | |
| <p class="font-medium">Firmenfeier</p> | |
| <p class="text-xs text-gray-500">Hauptbüro, 19:00 Uhr</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 text-purple-600 text-sm font-medium hover:underline">Alle Veranstaltungen anzeigen</button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <h3 class="font-bold mb-3">Empfohlene Kontakte</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/92.jpg" class="h-10 w-10 rounded-full mr-2"> | |
| <div> | |
| <p class="font-medium">Alexander Becker</p> | |
| <p class="text-xs text-gray-500">5 gemeinsame Freunde</p> | |
| </div> | |
| </div> | |
| <button class="text-purple-600 border border-purple-600 rounded-full px-3 py-1 text-sm hover:bg-purple-50">Hinzufügen</button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" class="h-10 w-10 rounded-full mr-2"> | |
| <div> | |
| <p class="font-medium">Lisa Sommer</p> | |
| <p class="text-xs text-gray-500">Projektmanager</p> | |
| </div> | |
| </div> | |
| <button class="text-purple-600 border border-purple-600 rounded-full px-3 py-1 text-sm hover:bg-purple-50">Hinzufügen</button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" class="h-10 w-10 rounded-full mr-2"> | |
| <div> | |
| <p class="font-medium">Michael Braun</p> | |
| <p class="text-xs text-gray-500">3 gemeinsame Gruppen</p> | |
| </div> | |
| </div> | |
| <button class="text-purple-600 border border-purple-600 rounded-full px-3 py-1 text-sm hover:bg-purple-50">Hinzufügen</button> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 text-purple-600 text-sm font-medium hover:underline">Mehr vorschlagen</button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <h3 class="font-bold mb-3">Aktuelle Aktivitäten</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 text-purple-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-user-plus"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Tom Weber</span> hat dich zu seiner Freundesliste hinzugefügt</p> | |
| <p class="text-xs text-gray-500">Vor 15 Minuten</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Lisa Sommer</span> gefällt dein Beitrag</p> | |
| <p class="text-xs text-gray-500">Vor 2 Stunden</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 text-green-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-comment"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Markus Vogel</span> hat deinen Beitrag kommentiert</p> | |
| <p class="text-xs text-gray-500">Gestern</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Create Button (Mobile) --> | |
| <button id="mobilePostBtn" class="md:hidden fixed bottom-6 right-6 bg-purple-600 text-white rounded-full p-4 shadow-lg floating-btn"> | |
| <i class="fas fa-plus text-lg"></i> | |
| </button> | |
| <!-- Mobile Post Modal --> | |
| <div id="mobilePostModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-sm mx-4"> | |
| <div class="p-4 border-b"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-bold text-lg">Beitrag erstellen</h3> | |
| <button id="closeMobilePostModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-10 w-10 rounded-full mr-2"> | |
| <input type="text" placeholder="Was möchtest du teilen?" class="bg-gray-100 rounded-full px-4 w-full focus:outline-none"> | |
| </div> | |
| <div class="upload-container rounded-lg p-10 text-center mb-4 cursor-pointer"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i> | |
| <p class="text-gray-500">Bild oder Video hochladen</p> | |
| <input type="file" class="hidden"> | |
| </div> | |
| <div class="flex justify-between space-x-2"> | |
| <label class="flex-1 flex flex-col items-center text-gray-500 p-3 border rounded-lg cursor-pointer"> | |
| <i class="fas fa-image mb-1"></i> | |
| <span class="text-xs">Foto</span> | |
| <input type="file" accept="image/*" class="hidden"> | |
| </label> | |
| <label class="flex-1 flex flex-col items-center text-gray-500 p-3 border rounded-lg cursor-pointer"> | |
| <i class="fas fa-user-tag mb-1"></i> | |
| <span class="text-xs">Taggen</span> | |
| </label> | |
| <label class="flex-1 flex flex-col items-center text-gray-500 p-3 border rounded-lg cursor-pointer"> | |
| <i class="fas fa-map-marker-alt mb-1"></i> | |
| <span class="text-xs">Ort</span> | |
| </label> | |
| </div> | |
| <button class="w-full mt-4 bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700">Posten</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Auth Modal Logic | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const authModal = document.getElementById('authModal'); | |
| const appContainer = document.getElementById('appContainer'); | |
| const closeAuthModal = document.getElementById('closeAuthModal'); | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| const authTabs = document.querySelectorAll('.auth-tab'); | |
| const registerForm = document.getElementById('registerForm'); | |
| const loginForm = document.getElementById('loginForm'); | |
| const avatarInput = document.getElementById('avatar'); | |
| const avatarPreview = document.querySelector('.avatar-preview'); | |
| const mobilePostBtn = document.getElementById('mobilePostBtn'); | |
| const mobilePostModal = document.getElementById('mobilePostModal'); | |
| const closeMobilePostModal = document.getElementById('closeMobilePostModal'); | |
| // Show auth modal on load | |
| authModal.classList.remove('hidden'); | |
| // Tab switching | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const tabName = this.getAttribute('data-tab'); | |
| // Update active tab button | |
| tabButtons.forEach(btn => { | |
| btn.classList.remove('active', 'text-purple-600', 'border-purple-600'); | |
| btn.classList.add('text-gray-500'); | |
| }); | |
| this.classList.add('active', 'text-purple-600', 'border-purple-600'); | |
| this.classList.remove('text-gray-500'); | |
| // Show corresponding tab | |
| authTabs.forEach(tab => { | |
| tab.classList.add('hidden'); | |
| tab.classList.remove('active'); | |
| if(tab.id === `${tabName}Tab`) { | |
| tab.classList.remove('hidden'); | |
| tab.classList.add('active'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Close auth modal | |
| closeAuthModal.addEventListener('click', function() { | |
| authModal.classList.add('hidden'); | |
| }); | |
| // Register form submission | |
| registerForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const fullName = document.getElementById('fullName').value; | |
| const email = document.getElementById('email').value; | |
| const password = document.getElementById('password').value; | |
| const confirmPassword = document.getElementById('confirmPassword').value; | |
| if(password !== confirmPassword) { | |
| alert('Passwörter stimmen nicht überein!'); | |
| return; | |
| } | |
| // Here you would normally send data to server | |
| console.log('Registering:', {fullName, email, password}); | |
| // Simulate successful registration | |
| simulateSuccessfulAuth(); | |
| }); | |
| // Login form submission | |
| loginForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const email = document.getElementById('loginEmail').value; | |
| const password = document.getElementById('loginPassword').value; | |
| // Here you would normally send data to server | |
| console.log('Logging in:', {email, password}); | |
| // Simulate successful login | |
| simulateSuccessfulAuth(); | |
| }); | |
| // Avatar upload preview | |
| avatarInput.addEventListener('change', function(e) { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| avatarPreview.style.backgroundImage = `url(${event.target.result})`; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| }); | |
| // Mobile post button | |
| mobilePostBtn.addEventListener('click', function() { | |
| mobilePostModal.classList.remove('hidden'); | |
| }); | |
| closeMobilePostModal.addEventListener('click', function() { | |
| mobilePostModal.classList.add('hidden'); | |
| }); | |
| // User dropdown | |
| const userDropdown = document.getElementById('userDropdown'); | |
| const dropdownMenu = document.querySelector('.dropdown-menu'); | |
| userDropdown.addEventListener('click', function() { | |
| dropdownMenu.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function(event) { | |
| if (!event.target.closest('.dropdown')) { | |
| dropdownMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Image upload preview (for posts) | |
| const imageUpload = document.getElementById('imageUpload'); | |
| const postBtn = document.getElementById('postBtn'); | |
| const postInput = document.getElementById('postInput'); | |
| const postFeed = document.getElementById('postFeed'); | |
| postBtn.addEventListener('click', function() { | |
| const postText = postInput.value.trim(); | |
| if(postText) { | |
| const now = new Date(); | |
| const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`; | |
| const newPost = document.createElement('div'); | |
| newPost.className = 'bg-white rounded-lg shadow post-card'; | |
| newPost.innerHTML = ` | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-10 w-10 rounded-full mr-2"> | |
| <div> | |
| <h4 class="font-bold">Nina Müller</h4> | |
| <p class="text-xs text-gray-500">Gerade jetzt · <i class="fas fa-globe-americas"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-3">${postText}</p> | |
| ${imageUpload.files.length > 0 ? | |
| `<div class="mb-3 rounded-lg overflow-hidden"> | |
| <img src="${URL.createObjectURL(imageUpload.files[0])}" class="w-full h-auto"> | |
| </div>` : ''} | |
| <div class="flex justify-between text-gray-500 border-t border-b py-2 mb-3"> | |
| <button class="flex items-center hover:text-purple-600"> | |
| <i class="far fa-thumbs-up mr-1"></i> | |
| <span>Gefällt mir</span> | |
| </button> | |
| <button class="flex items-center hover:text-purple-600"> | |
| <i class="far fa-comment mr-1"></i> | |
| <span>Kommentieren</span> | |
| </button> | |
| <button class="flex items-center hover:text-purple-600"> | |
| <i class="fas fa-share mr-1"></i> | |
| <span>Teilen</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center mt-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-8 w-8 rounded-full mr-2"> | |
| <div class="flex-grow"> | |
| <input type="text" placeholder="Schreibe einen Kommentar..." class="bg-gray-100 rounded-full px-3 py-1 w-full focus:outline-none"> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| postFeed.prepend(newPost); | |
| postInput.value = ''; | |
| imageUpload.value = ''; | |
| } | |
| }); | |
| // Like buttons functionality | |
| document.addEventListener('click', function(e) { | |
| if (e.target.closest('.far.fa-thumbs-up')) { | |
| const likeBtn = e.target.closest('.far.fa-thumbs-up'); | |
| likeBtn.classList.toggle('far'); | |
| likeBtn.classList.toggle('fas'); | |
| likeBtn.classList.toggle('text-purple-600'); | |
| } | |
| }); | |
| // Simulate successful authentication | |
| function simulateSuccessfulAuth() { | |
| authModal.classList.add('hidden'); | |
| appContainer.classList.remove('hidden'); | |
| // Show welcome notification | |
| setTimeout(() => { | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed bottom-4 right-4 bg-white p-4 rounded-lg shadow-lg flex items-center z-50'; | |
| notification.innerHTML = ` | |
| <i class="fas fa-check-circle text-green-500 text-2xl mr-3"></i> | |
| <div> | |
| <p class="font-medium">Willkommen zurück!</p> | |
| <p class="text-sm text-gray-600">Schön dich wiederzusehen, Nina.</p> | |
| </div> | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 3000); | |
| }, 500); | |
| } | |
| }); | |
| </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=StinsonOne/space-me" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |