Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Chat App – Bist du ChatGPT‑5?</title> | |
| <style> | |
| :root { | |
| --bg: #0d0d0f; | |
| --card: #1a1a1d; | |
| --accent: #6f4ef2; | |
| --text: #e8e8e8; | |
| --bubble-user: #6f4ef2; | |
| --bubble-ai: #2b2b31; | |
| --radius: 16px; | |
| --fade: 0.25s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: Inter, system-ui, sans-serif; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .app { | |
| width: 100%; | |
| max-width: 480px; | |
| background: var(--card); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| height: 90vh; | |
| } | |
| header { | |
| background: #131316; | |
| padding: 16px; | |
| font-size: 1.1rem; | |
| text-align: center; | |
| font-weight: 600; | |
| border-bottom: 1px solid #2a2a2e; | |
| } | |
| header a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| font-weight: 500; | |
| margin-left: 6px; | |
| font-size: 0.9rem; | |
| } | |
| #chat { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .bubble { | |
| max-width: 80%; | |
| padding: 12px 14px; | |
| border-radius: var(--radius); | |
| line-height: 1.4; | |
| animation: fadeIn var(--fade); | |
| } | |
| .user { | |
| margin-left: auto; | |
| background: var(--bubble-user); | |
| } | |
| .ai { | |
| margin-right: auto; | |
| background: var(--bubble-ai); | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(5px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| form { | |
| display: flex; | |
| padding: 12px; | |
| gap: 10px; | |
| background: #131316; | |
| border-top: 1px solid #2a2a2e; | |
| } | |
| input { | |
| flex: 1; | |
| padding: 12px; | |
| background: #1f1f23; | |
| border: none; | |
| border-radius: var(--radius); | |
| color: var(--text); | |
| outline: none; | |
| font-size: 1rem; | |
| } | |
| button { | |
| padding: 0 18px; | |
| background: var(--accent); | |
| border: none; | |
| border-radius: var(--radius); | |
| color: white; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: opacity .2s; | |
| } | |
| button:hover { | |
| opacity: 0.85; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <header> | |
| Mini Chat • <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </header> | |
| <div id="chat"></div> | |
| <form id="form"> | |
| <input id="input" placeholder="Frage eingeben..." autocomplete="off" /> | |
| <button>Senden</button> | |
| </form> | |
| </div> | |
| <script> | |
| const chat = document.getElementById("chat"); | |
| const form = document.getElementById("form"); | |
| const input = document.getElementById("input"); | |
| function addBubble(text, type) { | |
| const div = document.createElement("div"); | |
| div.className = "bubble " + type; | |
| div.textContent = text; | |
| chat.appendChild(div); | |
| chat.scrollTop = chat.scrollHeight; | |
| } | |
| function generateAIResponse(userText) { | |
| if (userText.toLowerCase().includes("bist du chatgpt5")) { | |
| return "Ich bin ein KI‑Modell, das auf ChatGPT‑5‑Technologie basiert."; | |
| } | |
| return "Ich habe dich verstanden: " + userText; | |
| } | |
| form.addEventListener("submit", function(e) { | |
| e.preventDefault(); | |
| const text = input.value.trim(); | |
| if (!text) return; | |
| addBubble(text, "user"); | |
| input.value = ""; | |
| setTimeout(() => { | |
| addBubble(generateAIResponse(text), "ai"); | |
| }, 400); | |
| }); | |
| addBubble("Hallo! Frage mich: 'Bist du ChatGPT5?'", "ai"); | |
| </script> | |
| </body> | |
| </html> |