Spaces:
Running
Running
File size: 6,321 Bytes
a0be94a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 | <!DOCTYPE html>
<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> |