Hugging Face's logo

Spaces:
whtet
/
burmese-chatbot
Sleeping

App Files Community
whtet commited on
Commit
b1990ef
·
verified ·
1 Parent(s): a915ce2

Update static/css/style.css

Browse files
Files changed (1) hide show
  1. static/css/style.css +87 -43
static/css/style.css CHANGED
@@ -1,43 +1,87 @@
1
- /* static/css/style.css */
2
- body {
3
- font-family: Arial, sans-serif;
4
- display: flex;
5
- justify-content: center;
6
- align-items: center;
7
- height: 100vh;
8
- background-color: #f5f5f5;
9
- }
10
- .chat-container {
11
- width: 90%;
12
- max-width: 400px;
13
- background: white;
14
- border-radius: 10px;
15
- box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
16
- overflow: hidden;
17
- }
18
- .chat-box {
19
- height: 400px;
20
- overflow-y: auto;
21
- padding: 10px;
22
- border-bottom: 1px solid #ccc;
23
- }
24
- .input-area {
25
- display: flex;
26
- padding: 10px;
27
- background: #eee;
28
- }
29
- input {
30
- flex: 1;
31
- padding: 8px;
32
- border: none;
33
- border-radius: 5px;
34
- }
35
- button {
36
- margin-left: 5px;
37
- padding: 8px 10px;
38
- background: blue;
39
- color: white;
40
- border: none;
41
- border-radius: 5px;
42
- cursor: pointer;
43
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ margin: 0;
4
+ padding: 0;
5
+ background: #f5f5f5;
6
+ }
7
+
8
+ .chat-container {
9
+ display: flex;
10
+ flex-direction: column;
11
+ height: 100vh;
12
+ }
13
+
14
+ .chat-header {
15
+ background: #d71a28;
16
+ color: white;
17
+ padding: 15px;
18
+ text-align: center;
19
+ font-size: 18px;
20
+ font-weight: bold;
21
+ display: flex;
22
+ align-items: center;
23
+ gap: 10px;
24
+ }
25
+
26
+ .back-button {
27
+ background: none;
28
+ border: none;
29
+ color: white;
30
+ font-size: 20px;
31
+ cursor: pointer;
32
+ }
33
+
34
+ .chat-box {
35
+ flex-grow: 1;
36
+ overflow-y: auto;
37
+ padding: 10px;
38
+ display: flex;
39
+ flex-direction: column;
40
+ }
41
+
42
+ .message {
43
+ max-width: 75%;
44
+ padding: 10px;
45
+ border-radius: 10px;
46
+ margin: 5px 0;
47
+ word-wrap: break-word;
48
+ }
49
+
50
+ .user-message {
51
+ background: #007bff;
52
+ color: white;
53
+ align-self: flex-end;
54
+ border-top-right-radius: 0;
55
+ }
56
+
57
+ .bot-message {
58
+ background: #e0e0e0;
59
+ color: black;
60
+ align-self: flex-start;
61
+ border-top-left-radius: 0;
62
+ }
63
+
64
+ .input-area {
65
+ display: flex;
66
+ align-items: center;
67
+ padding: 10px;
68
+ background: white;
69
+ border-top: 1px solid #ccc;
70
+ }
71
+
72
+ input[type="text"] {
73
+ flex: 1;
74
+ padding: 10px;
75
+ border: none;
76
+ border-radius: 20px;
77
+ background: #f0f0f0;
78
+ outline: none;
79
+ margin: 0 10px;
80
+ }
81
+
82
+ button {
83
+ background: none;
84
+ border: none;
85
+ font-size: 20px;
86
+ cursor: pointer;
87
+ }