Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Storytelling - Chat</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .chat-container { | |
| height: calc(100vh - 180px); | |
| } | |
| .typing-indicator::after { | |
| content: '...'; | |
| animation: typing 1.5s infinite; | |
| } | |
| @keyframes typing { | |
| 0% { content: '.'; } | |
| 33% { content: '..'; } | |
| 66% { content: '...'; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex flex-col h-full"> | |
| <!-- Header --> | |
| <div class="bg-purple-600 text-white p-4 shadow-md"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <h2 class="text-xl font-bold">AI Storytelling Assistant</h2> | |
| <div class="flex items-center space-x-4"> | |
| <div id="userInfo" class="flex items-center"> | |
| <img id="userAvatar" src="http://static.photos/people/200x200" class="w-8 h-8 rounded-full mr-2"> | |
| <span id="username"></span> | |
| </div> | |
| <a href="index.html" class="p-2 rounded-full hover:bg-purple-700 transition"> | |
| <i data-feather="home"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Container --> | |
| <div class="flex-1 overflow-y-auto p-4 chat-container" id="chatContainer"> | |
| <div class="max-w-3xl mx-auto space-y-4"> | |
| <div class="flex justify-start"> | |
| <div class="bg-purple-100 rounded-xl p-4 max-w-xs md:max-w-md"> | |
| <p>Hello! I'm your AI writing assistant. Let's create an amazing story together. What genre are you interested in exploring today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t p-4 bg-white"> | |
| <div class="max-w-3xl mx-auto flex"> | |
| <input type="text" id="userInput" placeholder="Type your response here..." | |
| class="flex-1 border rounded-l-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-purple-300"> | |
| <button id="sendMessage" class="bg-purple-600 text-white px-6 py-3 rounded-r-full hover:bg-purple-700 transition"> | |
| <i data-feather="send"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Check session | |
| function checkSession() { | |
| const user = JSON.parse(localStorage.getItem('currentUser')); | |
| if (!user) { | |
| window.location.href = 'index.html'; | |
| return; | |
| } | |
| document.getElementById('username').textContent = user.username; | |
| document.getElementById('userAvatar').src = user.avatar || 'http://static.photos/people/200x200'; | |
| } | |
| checkSession(); | |
| // Chat functionality | |
| document.getElementById('sendMessage').addEventListener('click', sendMessage); | |
| document.getElementById('userInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| function sendMessage() { | |
| const userInput = document.getElementById('userInput'); | |
| const message = userInput.value.trim(); | |
| if (!message) return; | |
| // Add user message | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const userMessageDiv = document.createElement('div'); | |
| userMessageDiv.className = 'flex justify-end'; | |
| userMessageDiv.innerHTML = ` | |
| <div class="bg-purple-600 text-white rounded-xl p-4 max-w-xs md:max-w-md"> | |
| <p>${message}</p> | |
| </div> | |
| `; | |
| chatContainer.appendChild(userMessageDiv); | |
| // Clear input | |
| userInput.value = ''; | |
| // Add typing indicator | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'flex justify-start'; | |
| typingDiv.innerHTML = ` | |
| <div class="bg-purple-100 rounded-xl p-4 max-w-xs md:max-w-md"> | |
| <p class="typing-indicator">AI is thinking</p> | |
| </div> | |
| `; | |
| chatContainer.appendChild(typingDiv); | |
| // Scroll to bottom | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Simulate AI response after delay | |
| setTimeout(() => { | |
| // Remove typing indicator | |
| chatContainer.removeChild(typingDiv); | |
| // Add AI response | |
| const aiResponses = [ | |
| "That's an interesting direction! What kind of protagonist do you envision for this story?", | |
| "Great choice! How would you describe the main conflict in your story?", | |
| "Fascinating! What time period or setting are you imagining for this narrative?", | |
| "I like that idea! What emotional journey do you want your main character to experience?", | |
| "Excellent! Would you prefer a happy ending, tragic ending, or something more ambiguous?" | |
| ]; | |
| const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)]; | |
| const aiMessageDiv = document.createElement('div'); | |
| aiMessageDiv.className = 'flex justify-start'; | |
| aiMessageDiv.innerHTML = ` | |
| <div class="bg-purple-100 rounded-xl p-4 max-w-xs md:max-w-md"> | |
| <p>${randomResponse}</p> | |
| </div> | |
| `; | |
| chatContainer.appendChild(aiMessageDiv); | |
| // Scroll to bottom again | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }, 1500); | |
| } | |
| </script> | |
| </body> | |
| </html> |