Spaces:

AiCoderv2
/

quick-clean-hub

Running

App Files Files Community

AiCoderv2 commited on Oct 5

Commit

21e49cc

verified ·

1 Parent(s): e234610

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +201 -18

index.html CHANGED Viewed

@@ -1,19 +1,202 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A simple chatbot application built with HTML, CSS, and vanilla JavaScript.">
+    <meta name="keywords" content="chatbot, AI, simple bot">
+    <title>Simple Chatbot</title>
+    <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+<body>
+    <header>
+        <h1>Simple Chatbot</h1>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+    </header>
+    <main>
+        <div id="chat-container">
+            <div id="chat-messages">
+                <div class="message bot">Bot: Hello! How can I help you today?</div>
+            </div>
+            <div id="input-area">
+                <input type="text" id="user-input" placeholder="Type your message...">
+                <button id="send-button">Send</button>
+            </div>
+        </div>
+    </main>
+    <footer>
+        <p>&copy; 2023 Simple Chatbot. All rights reserved.</p>
+    </footer>
+    <script src="assets/js/chatbot.js"></script>
+</body>
 </html>
+=== assets/css/styles.css ===
+/* Mobile-first responsive design */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background-color: #f4f4f4;
+}
+header {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 1rem;
+}
+header h1 {
+    margin: 0;
+}
+header a {
+    color: #4CAF50;
+    text-decoration: none;
+    font-size: 0.9rem;
+    margin-top: 0.5rem;
+    display: block;
+}
+header a:hover {
+    text-decoration: underline;
+}
+main {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    padding: 1rem;
+}
+#chat-container {
+    width: 100%;
+    max-width: 600px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    height: 80vh;
+}
+#chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    border-bottom: 1px solid #ddd;
+}
+.message {
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+    border-radius: 4px;
+}
+.message.user {
+    background-color: #4CAF50;
+    color: white;
+    text-align: right;
+}
+.message.bot {
+    background-color: #e0e0e0;
+    color: #333;
+}
+#input-area {
+    display: flex;
+    padding: 1rem;
+}
+#user-input {
+    flex: 1;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px 0 0 4px;
+    outline: none;
+}
+#send-button {
+    padding: 0.5rem 1rem;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 0 4px 4px 0;
+    cursor: pointer;
+}
+#send-button:hover {
+    background-color: #45a049;
+}
+footer {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 1rem;
+    margin-top: auto;
+}
+/* Responsive adjustments */
+@media (min-width: 768px) {
+    #chat-container {
+        height: 70vh;
+    }
+}
+=== assets/js/chatbot.js ===
+document.addEventListener('DOMContentLoaded', function() {
+    const chatMessages = document.getElementById('chat-messages');
+    const userInput = document.getElementById('user-input');
+    const sendButton = document.getElementById('send-button');
+    // Simple response logic
+    function getBotResponse(message) {
+        message = message.toLowerCase();
+        if (message.includes('hello') || message.includes('hi')) {
+            return 'Bot: Hi there! How can I assist you?';
+        } else if (message.includes('how are you')) {
+            return 'Bot: I\'m doing well, thank you! What about you?';
+        } else if (message.includes('bye') || message.includes('goodbye')) {
+            return 'Bot: Goodbye! Have a great day!';
+        } else {
+            return 'Bot: Sorry, I didn\'t understand that. Can you try rephrasing?';
+        }
+    }
+    // Function to add message to chat
+    function addMessage(text, className) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${className}`;
+        messageDiv.textContent = text;
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight; // Auto-scroll to bottom
+    }
+    // Send message function
+    function sendMessage() {
+        const message = userInput.value.trim();
+        if (message) {
+            addMessage(`You: ${message}`, 'user');
+            userInput.value = '';
+            // Simulate bot response after a short delay
+            setTimeout(() => {
+                const response = getBotResponse(message);
+                addMessage(response, 'bot');
+            }, 500);
+        }
+    }
+    // Event listeners
+    sendButton.addEventListener('click', sendMessage);
+    userInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            sendMessage();
+        }
+    });
+});