Hugging Face's logo

Spaces:
faizanmumtaz
/
test
Running

App Files Community
faizanmumtaz commited on
Commit
72997cb
·
1 Parent(s): c4991a4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +100 -17
index.html CHANGED
@@ -1,19 +1,102 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <style>
5
+ body {
6
+ font-family: Arial, sans-serif;
7
+ margin: 0;
8
+ padding: 0;
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+ height: 100vh;
13
+ background-color: #f0f0f0;
14
+ }
15
+
16
+ .chat-container {
17
+ width: 300px;
18
+ border: 1px solid #ccc;
19
+ border-radius: 8px;
20
+ overflow: hidden;
21
+ }
22
+
23
+ .chat-box {
24
+ height: 300px;
25
+ overflow-y: scroll;
26
+ padding: 10px;
27
+ background-color: #fff;
28
+ }
29
+
30
+ .input-container {
31
+ display: flex;
32
+ padding: 10px;
33
+ background-color: #eee;
34
+ }
35
+
36
+ input {
37
+ flex: 1;
38
+ padding: 8px;
39
+ border: 1px solid #ccc;
40
+ border-radius: 4px;
41
+ margin-right: 5px;
42
+ }
43
+
44
+ button {
45
+ background-color: #4CAF50;
46
+ color: white;
47
+ border: none;
48
+ padding: 8px 15px;
49
+ border-radius: 4px;
50
+ cursor: pointer;
51
+ }
52
+
53
+ </style>
54
+ <meta charset="UTF-8">
55
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
56
+ <link rel="stylesheet" href="style.css">
57
+ <title>Chatbot</title>
58
+ </head>
59
+ <body>
60
+ <div class="chat-container">
61
+ <div class="chat-box" id="chat-box"></div>
62
+ <div class="input-container">
63
+ <input type="text" id="user-input" placeholder="Type your message...">
64
+ <button onclick="sendMessage()">Send</button>
65
+ </div>
66
+ </div>
67
+ <script>
68
+ function sendMessage() {
69
+ var userInput = document.getElementById('user-input');
70
+ var chatBox = document.getElementById('chat-box');
71
+
72
+ var userMessage = userInput.value;
73
+ if (userMessage.trim() === '') return;
74
+
75
+ // Display user message
76
+ appendMessage('You: ' + userMessage, 'user');
77
+
78
+ // Simulate a simple chatbot response (you can replace this with your actual chatbot logic)
79
+ var botMessage = 'Bot: Hi there! How can I help you?';
80
+ setTimeout(function() {
81
+ appendMessage(botMessage, 'bot');
82
+ }, 500);
83
+
84
+ // Clear user input
85
+ userInput.value = '';
86
+ }
87
+
88
+ function appendMessage(message, sender) {
89
+ var chatBox = document.getElementById('chat-box');
90
+ var messageElement = document.createElement('div');
91
+ messageElement.className = sender;
92
+ messageElement.innerHTML = message;
93
+ chatBox.appendChild(messageElement);
94
+
95
+ // Scroll to the bottom of the chat box
96
+ chatBox.scrollTop = chatBox.scrollHeight;
97
+ }
98
+
99
+ </script>
100
+
101
+ </body>
102
  </html>