Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Privater Freundes-Chat</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| :root { | |
| --primary-color: #4361ee; | |
| --secondary-color: #3a0ca3; | |
| --accent-color: #7209b7; | |
| --light-color: #f8f9fa; | |
| --dark-color: #212529; | |
| --success-color: #4cc9f0; | |
| --warning-color: #f72585; | |
| --gray-color: #6c757d; | |
| --border-radius: 12px; | |
| --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1200px; | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| display: flex; | |
| height: 90vh; | |
| } | |
| .sidebar { | |
| width: 300px; | |
| background-color: var(--light-color); | |
| border-right: 1px solid #e9ecef; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px; | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .header h1 { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| } | |
| .header a { | |
| color: white; | |
| text-decoration: none; | |
| font-size: 0.8rem; | |
| } | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| padding: 15px; | |
| border-bottom: 1px solid #e9ecef; | |
| } | |
| .user-avatar { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background-color: var(--accent-color); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| font-weight: bold; | |
| margin-right: 10px; | |
| } | |
| .user-info h3 { | |
| font-size: 1rem; | |
| margin-bottom: 5px; | |
| } | |
| .user-info p { | |
| font-size: 0.8rem; | |
| color: var(--gray-color); | |
| } | |
| .nav-menu { | |
| flex-grow: 1; | |
| padding: 15px 0; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 12px 20px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .nav-item:hover { | |
| background-color: #e9ecef; | |
| } | |
| .nav-item.active { | |
| background-color: #e3f2fd; | |
| border-left: 4px solid var(--primary-color); | |
| } | |
| .nav-item i { | |
| margin-right: 10px; | |
| width: 20px; | |
| text-align: center; | |
| color: var(--gray-color); | |
| } | |
| .nav-item.active i { | |
| color: var(--primary-color); | |
| } | |
| .groups-section { | |
| padding: 0 20px 15px; | |
| } | |
| .groups-section h3 { | |
| font-size: 0.9rem; | |
| color: var(--gray-color); | |
| margin-bottom: 10px; | |
| text-transform: uppercase; | |
| } | |
| .group-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 8px 0; | |
| cursor: pointer; | |
| } | |
| .group-avatar { | |
| width: 35px; | |
| height: 35px; | |
| border-radius: 50%; | |
| background-color: var(--success-color); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| font-weight: bold; | |
| margin-right: 10px; | |
| font-size: 0.8rem; | |
| } | |
| .main-content { | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .chat-header { | |
| padding: 15px 20px; | |
| border-bottom: 1px solid #e9ecef; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .chat-header h2 { | |
| font-size: 1.2rem; | |
| } | |
| .chat-messages { | |
| flex-grow: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| background-color: #f8f9fa; | |
| } | |
| .message { | |
| margin-bottom: 15px; | |
| max-width: 70%; | |
| } | |
| .message.sent { | |
| margin-left: auto; | |
| } | |
| .message-content { | |
| padding: 12px 16px; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .message.sent .message-content { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .message.received .message-content { | |
| background-color: white; | |
| border-bottom-left-radius: 4px; | |
| } | |
| .message-info { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.7rem; | |
| margin-top: 5px; | |
| color: var(--gray-color); | |
| } | |
| .message.sent .message-info { | |
| text-align: right; | |
| } | |
| .chat-input { | |
| display: flex; | |
| padding: 15px; | |
| border-top: 1px solid #e9ecef; | |
| background-color: white; | |
| } | |
| .chat-input input { | |
| flex-grow: 1; | |
| padding: 12px 15px; | |
| border: 1px solid #e9ecef; | |
| border-radius: 30px; | |
| outline: none; | |
| transition: var(--transition); | |
| } | |
| .chat-input input:focus { | |
| border-color: var(--primary-color); | |
| } | |
| .send-button { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 45px; | |
| height: 45px; | |
| margin-left: 10px; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| transition: var(--transition); | |
| } | |
| .send-button:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| .file-types { | |
| display: flex; | |
| padding: 10px 20px; | |
| background-color: white; | |
| border-top: 1px solid #e9ecef; | |
| } | |
| .file-type { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-right: 25px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .file-type:hover { | |
| color: var(--primary-color); | |
| } | |
| .file-type i { | |
| font-size: 1.2rem; | |
| margin-bottom: 5px; | |
| } | |
| .file-type span { | |
| font-size: 0.7rem; | |
| } | |
| .login-container { | |
| width: 100%; | |
| max-width: 400px; | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| padding: 30px; | |
| } | |
| .login-header { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| .login-header h1 { | |
| color: var(--primary-color); | |
| margin-bottom: 10px; | |
| } | |
| .login-header p { | |
| color: var(--gray-color); | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 12px 15px; | |
| border: 1px solid #e9ecef; | |
| border-radius: var(--border-radius); | |
| outline: none; | |
| transition: var(--transition); | |
| } | |
| .form-group input:focus { | |
| border-color: var(--primary-color); | |
| } | |
| .login-button { | |
| width: 100%; | |
| padding: 12px; | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: var(--border-radius); | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: var(--transition); | |
| } | |
| .login-button:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| .register-link { | |
| text-align: center; | |
| margin-top: 20px; | |
| font-size: 0.9rem; | |
| } | |
| .register-link a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| } | |
| .tech-section { | |
| padding: 30px; | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| max-width: 800px; | |
| width: 100%; | |
| } | |
| .tech-section h2 { | |
| color: var(--primary-color); | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .tech-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .tech-card { | |
| background-color: var(--light-color); | |
| border-radius: var(--border-radius); | |
| padding: 20px; | |
| transition: var(--transition); | |
| border-left: 4px solid var(--primary-color); | |
| } | |
| .tech-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow); | |
| } | |
| .tech-card h3 { | |
| color: var(--secondary-color); | |
| margin-bottom: 10px; | |
| } | |
| .tech-card p { | |
| font-size: 0.9rem; | |
| color: var(--gray-color); | |
| margin-bottom: 15px; | |
| } | |
| .tech-card ul { | |
| padding-left: 20px; | |
| font-size: 0.8rem; | |
| } | |
| .tech-card li { | |
| margin-bottom: 5px; | |
| } | |
| .view-toggle { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 30px; | |
| } | |
| .toggle-btn { | |
| padding: 10px 20px; | |
| background-color: var(--light-color); | |
| border: none; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .toggle-btn.active { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .toggle-btn:first-child { | |
| border-radius: var(--border-radius) 0 0 var(--border-radius); | |
| } | |
| .toggle-btn:last-child { | |
| border-radius: 0 var(--border-radius) var(--border-radius) 0; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| flex-direction: column; | |
| height: auto; | |
| } | |
| .sidebar { | |
| width: 100%; | |
| height: auto; | |
| } | |
| .main-content { | |
| height: 60vh; | |
| } | |
| .message { | |
| max-width: 85%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="view-toggle"> | |
| <button class="toggle-btn active" onclick="showView('login')">Login</button> | |
| <button class="toggle-btn" onclick="showView('app')">App Demo</button> | |
| <button class="toggle-btn" onclick="showView('tech')">Technologien</button> | |
| </div> | |
| <!-- Login View --> | |
| <div id="login-view" class="login-container"> | |
| <div class="login-header"> | |
| <h1>Privater Freundes-Chat</h1> | |
| <p>Sicherer Chat mit Galerie und Gruppen</p> | |
| </div> | |
| <form id="login-form"> | |
| <div class="form-group"> | |
| <label for="username">Benutzername</label> | |
| <input type="text" id="username" placeholder="Dein Benutzername" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="password">Passwort</label> | |
| <input type="password" id="password" placeholder="Dein Passwort" required> | |
| </div> | |
| <button type="submit" class="login-button">Anmelden</button> | |
| </form> | |
| <div class="register-link"> | |
| <p>Noch keinen Account? <a href="#">Hier registrieren</a></p> | |
| </div> | |
| </div> | |
| <!-- App Demo View --> | |
| <div id="app-view" class="container hidden"> | |
| <div class="sidebar"> | |
| <div class="header"> | |
| <h1>Freundes-Chat</h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| <div class="user-profile"> | |
| <div class="user-avatar">MJ</div> | |
| <div class="user-info"> | |
| <h3>Max Mustermann</h3> | |
| <p>Online</p> | |
| </div> | |
| </div> | |
| <div class="nav-menu"> | |
| <div class="nav-item active"> | |
| <i class="fas fa-comments"></i> | |
| <span>Chats</span> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-users"></i> | |
| <span>Gruppen</span> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-images"></i> | |
| <span>Galerie</span> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-cog"></i> | |
| <span>Einstellungen</span> | |
| </div> | |
| </div> | |
| <div class="groups-section"> | |
| <h3>Meine Gruppen</h3> | |
| <div class="group-item"> | |
| <div class="group-avatar" style="background-color: #f72585;">WG</div> | |
| <span>Wohngemeinschaft</span> | |
| </div> | |
| <div class="group-item"> | |
| <div class="group-avatar" style="background-color: #4cc9f0;">SP</div> | |
| <span>Sportgruppe</span> | |
| </div> | |
| <div class="group-item"> | |
| <div class="group-avatar" style="background-color: #7209b7;">FS</div> | |
| <span>Freundeskreis</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="main-content"> | |
| <div class="chat-header"> | |
| <h2>Wohngemeinschaft</h2> | |
| </div> | |
| <div class="chat-messages"> | |
| <div class="message received"> | |
| <div class="message-content"> | |
| Hey Leute, wer ist heute für den Einkauf zuständig? | |
| </div> | |
| <div class="message-info"> | |
| <span>Anna</span> | |
| <span>10:24</span> | |
| </div> | |
| </div> | |
| <div class="message sent"> | |
| <div class="message-content"> | |
| Ich kann das übernehmen. Braucht jemand was Bestimmtes? | |
| </div> | |
| <div class="message-info"> | |
| <span>Du</span> | |
| <span>10:25</span> | |
| </div> | |
| </div> | |
| <div class="message received"> | |
| <div class="message-content"> | |
| <i class="fas fa-image"></i> Bild.jpg | |
| </div> | |
| <div class="message-info"> | |
| <span>Tom</span> | |
| <span>10:26</span> | |
| </div> | |
| </div> | |
| <div class="message received"> | |
| <div class="message-content"> | |
| Könntest du Milch mitbringen? Die ist alle. | |
| </div> | |
| <div class="message-info"> | |
| <span>Lisa</span> | |
| <span>10:27</span> | |
| </div> | |
| </div> | |
| <div class="message sent"> | |
| <div class="message-content"> | |
| Klar, mache ich. Noch weitere Wünsche? | |
| </div> | |
| <div class="message-info"> | |
| <span>Du</span> | |
| <span>10:28</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="file-types"> | |
| <div class="file-type"> | |
| <i class="fas fa-image"></i> | |
| <span>Bilder</span> | |
| </div> | |
| <div class="file-type"> | |
| <i class="fas fa-video"></i> | |
| <span>Videos</span> | |
| </div> | |
| <div class="file-type"> | |
| <i class="fas fa-music"></i> | |
| <span>Musik</span> | |
| </div> | |
| <div class="file-type"> | |
| <i class="fas fa-file"></i> | |
| <span>Dokumente</span> | |
| </div> | |
| <div class="file-type"> | |
| <i class="fas fa-link"></i> | |
| <span>Links</span> | |
| </div> | |
| </div> | |
| <div class="chat-input"> | |
| <input type="text" placeholder="Nachricht schreiben..."> | |
| <button class="send-button"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Technologies View --> | |
| <div id="tech-view" class="tech-section hidden"> | |
| <h2>Technologie-Empfehlungen für Ihre App</h2> | |
| <div class="tech-cards"> | |
| <div class="tech-card"> | |
| <h3>Backend & Verschlüsselung</h3> | |
| <p>Für die serverseitige Logik und Sicherheit</p> | |
| <ul> | |
| <li><strong>Python/Flask/Django:</strong> Ideal für Ihr Backend mit Verschlüsselung</li> | |
| <li><strong>End-to-End-Verschlüsselung:</strong> Signal-Protokoll oder ähnliche Implementierungen</li> | |
| <li><strong>Datenbank:</strong> PostgreSQL oder SQLite für Benutzer und Nachrichten</li> | |
| </ul> | |
| </div> | |
| <div class="tech-card"> | |
| <h3>Android-App</h3> | |
| <p>Für die native Android-Entwicklung</p> | |
| <ul> | |
| <li><strong>Kotlin:</strong> Ihre Kenntnisse passen perfekt!</li> | |
| <li><strong>Jetpack Compose:</strong> Moderne UI-Entwicklung</li> | |
| <li><strong>Room Database:</strong> Lokale Datenspeicherung</li> | |
| </ul> | |
| </div> | |
| <div class="tech-card"> | |
| <h3>Frontend & Web-App</h3> | |
| <p>Für die Benutzeroberfläche und spätere Web-Version</p> | |
| <ul> | |
| <li><strong>JavaScript/React:</strong> Für interaktive Web-Oberflächen</li> | |
| <li><strong>WebSockets:</strong> Echtzeit-Kommunikation</li> | |
| <li><strong>PWA:</strong> Progressive Web App für Desktop und Mobile</li> | |
| </ul> | |
| </div> | |
| <div class="tech-card"> | |
| <h3>Medien & Dateien</h3> | |
| <p>Für die Galerie und Dateifreigabe</p> | |
| <ul> | |
| <li><strong>Cloud Storage:</strong> AWS S3, Firebase Storage</li> | |
| <li><strong>Media Processing:</strong> FFmpeg für Video/Audio</li> | |
| <li><strong>Thumbnail Generation:</strong> Für schnelle Vorschauen</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function showView(viewName) { | |
| // Hide all views | |
| document.getElementById('login-view').classList.add('hidden'); | |
| document.getElementById('app-view').classList.add('hidden'); | |
| document.getElementById('tech-view').classList.add('hidden'); | |
| // Remove active class from all buttons | |
| document.querySelectorAll('.toggle-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| // Show selected view and activate corresponding button | |
| document.getElementById(viewName + '-view').classList.remove('hidden'); | |
| event.target.classList.add('active'); | |
| } | |
| // Handle login form submission | |
| document.getElementById('login-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const username = document.getElementById('username').value; | |
| const password = document.getElementById('password').value; | |
| // Simple validation | |
| if(username && password) { | |
| alert('Login erfolgreich! In einer echten App würden Sie nun zur Hauptanwendung weitergeleitet.'); | |
| showView('app'); | |
| } | |
| }); | |
| // Handle sending messages | |
| document.querySelector('.send-button').addEventListener('click', function() { | |
| const input = document.querySelector('.chat-input input'); | |
| const message = input.value.trim(); | |
| if(message) { | |
| const messagesContainer = document.querySelector('.chat-messages'); | |
| // Create new message element | |
| const messageElement = document.createElement('div'); | |
| messageElement.className = 'message sent'; | |
| messageElement.innerHTML = ` | |
| <div class="message-content">${message}</div> | |
| <div class="message-info"> | |
| <span>Du</span> | |
| <span>${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span> | |
| </div> | |
| `; | |
| messagesContainer.appendChild(messageElement); | |
| input.value = ''; | |
| // Scroll to bottom | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| // Simulate a response after a short delay | |
| setTimeout(() => { | |
| const responses = [ | |
| "Interessant!", | |
| "Das klingt gut!", | |
| "Kannst du mir mehr dazu erzählen?", | |
| "Danke für die Info!" | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| const responseElement = document.createElement('div'); | |
| responseElement.className = 'message received'; | |
| responseElement.innerHTML = ` | |
| <div class="message-content">${randomResponse}</div> | |
| <div class="message-info"> | |
| <span>Freund</span> | |
| <span>${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span> | |
| </div>`; | |
| messagesContainer.appendChild(responseElement); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| }, 1000); | |
| } | |
| }); | |
| // Allow sending messages with Enter key | |
| document.querySelector('.chat-input input').addEventListener('keypress', function(e) { | |
| if(e.key === 'Enter') { | |
| document.querySelector('.send-button').click(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |