Hugging Face's logo

Spaces:
Swathi6
/
chatbot1
Sleeping

App Files Community
Swathi6 commited on
Commit
bb63c76
·
verified ·
1 Parent(s): 43125ec

Update static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +61 -49
static/styles.css CHANGED
@@ -1,84 +1,96 @@
1
- /* Basic Reset */
2
- * {
3
- margin: 0;
4
- padding: 0;
5
- box-sizing: border-box;
6
- }
7
-
8
- /* Page Layout */
9
  body {
10
- font-family: 'Arial', sans-serif;
11
- background-color: #f4f4f9;
12
  display: flex;
13
  justify-content: center;
14
  align-items: center;
15
  height: 100vh;
 
16
  }
17
 
18
  .chat-container {
19
- background-color: white;
20
- width: 100%;
21
- max-width: 500px;
22
  border-radius: 10px;
23
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
24
- padding: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
25
  text-align: center;
 
26
  }
27
 
28
- /* Chat Box */
29
- .chat-box {
30
- max-height: 300px;
31
  overflow-y: auto;
32
- border: 1px solid #ddd;
 
 
 
 
33
  padding: 10px;
34
- margin-bottom: 20px;
35
- background-color: #f9f9f9;
 
 
 
 
36
  border-radius: 5px;
37
  }
38
 
39
- .message {
40
- margin: 10px 0;
 
 
 
 
 
41
  }
42
 
43
- .bot-response {
44
- color: #2c3e50;
45
- font-weight: bold;
46
  }
47
 
48
- .user-message {
49
- color: #16a085;
 
 
 
50
  }
51
 
52
- #menu {
53
- margin-top: 20px;
54
- font-size: 16px;
55
  }
56
 
57
- /* User Input Form */
58
- .chat-form {
59
- display: flex;
60
- justify-content: space-between;
61
  }
62
 
63
- .user-input {
64
- width: 80%;
65
  padding: 10px;
66
- font-size: 16px;
67
- border: 1px solid #ccc;
68
- border-radius: 5px;
69
- margin-right: 10px;
70
  }
71
 
72
- .send-btn {
73
- padding: 10px 20px;
74
- font-size: 16px;
75
- background-color: #16a085;
76
- color: white;
77
- border: none;
78
  border-radius: 5px;
79
  cursor: pointer;
80
  }
81
 
82
- .send-btn:hover {
83
- background-color: #1abc9c;
84
  }
 
 
 
 
 
 
 
 
 
1
  body {
2
+ font-family: Arial, sans-serif;
3
+ background-color: #f4f4f4;
4
  display: flex;
5
  justify-content: center;
6
  align-items: center;
7
  height: 100vh;
8
+ margin: 0;
9
  }
10
 
11
  .chat-container {
12
+ width: 400px;
13
+ border: 1px solid #ddd;
 
14
  border-radius: 10px;
15
+ background-color: #fff;
16
+ overflow: hidden;
17
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
18
+ }
19
+
20
+ .chatbox {
21
+ display: flex;
22
+ flex-direction: column;
23
+ height: 400px;
24
+ }
25
+
26
+ .chatbox-header {
27
+ background-color: #4CAF50;
28
+ color: white;
29
  text-align: center;
30
+ padding: 10px;
31
  }
32
 
33
+ .chatbox-body {
34
+ flex: 1;
35
+ padding: 10px;
36
  overflow-y: auto;
37
+ height: 300px;
38
+ }
39
+
40
+ .chatbox-footer {
41
+ display: flex;
42
  padding: 10px;
43
+ }
44
+
45
+ .chatbox-footer input {
46
+ flex: 1;
47
+ padding: 5px;
48
+ border: 1px solid #ddd;
49
  border-radius: 5px;
50
  }
51
 
52
+ .chatbox-footer button {
53
+ padding: 5px 10px;
54
+ background-color: #4CAF50;
55
+ color: white;
56
+ border: none;
57
+ border-radius: 5px;
58
+ cursor: pointer;
59
  }
60
 
61
+ .chatbox-footer button:hover {
62
+ background-color: #45a049;
 
63
  }
64
 
65
+ .message {
66
+ margin: 10px 0;
67
+ padding: 8px;
68
+ border-radius: 5px;
69
+ background-color: #f1f1f1;
70
  }
71
 
72
+ .bot-message {
73
+ background-color: #e8f5e9;
 
74
  }
75
 
76
+ .user-message {
77
+ background-color: #e1f5fe;
78
+ text-align: right;
 
79
  }
80
 
81
+ .food-items {
 
82
  padding: 10px;
83
+ display: none;
 
 
 
84
  }
85
 
86
+ .food-items div {
87
+ margin: 5px;
88
+ padding: 10px;
89
+ background-color: #e8f5e9;
 
 
90
  border-radius: 5px;
91
  cursor: pointer;
92
  }
93
 
94
+ .food-items div:hover {
95
+ background-color: #c8e6c9;
96
  }