File size: 1,638 Bytes
5eec8a9
 
3e009ae
5eec8a9
 
 
 
3e009ae
ab09773
 
25c67ef
3e009ae
25c67ef
3e009ae
5eec8a9
3e009ae
 
5eec8a9
 
9ae3f55
 
 
3e009ae
 
9ae3f55
3e009ae
ab09773
 
25c67ef
3e009ae
25c67ef
3e009ae
 
 
9ae3f55
ab09773
 
25c67ef
3e009ae
25c67ef
3e009ae
25c67ef
3e009ae
 
9ae3f55
 
 
 
 
3e009ae
9ae3f55
 
 
3e009ae
9ae3f55
 
3e009ae
 
 
 
 
9ae3f55
ab09773
5eec8a9
3e009ae
 
 
 
 
 
5eec8a9
f6a6d9c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

#chat-container {
    width: 90%;
    max-width: 600px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

#chatbot {
    height: 400px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
}

#user-input {
    width: calc(100% - 80px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 25px;
    margin-top: 10px;
    font-size: 16px;
}

button {
    background-color: #f76c6c;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 25px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #f54b4b;
}

.chat-message {
    margin: 10px 0;
}

.chat-message.bot {
    background-color: #f8e3d0;
    padding: 10px;
    border-radius: 10px;
    max-width: 80%;
    align-self: flex-start;
}

.chat-message.user {
    background-color: #e0f7fa;
    padding: 10px;
    border-radius: 10px;
    max-width: 80%;
    align-self: flex-end;
}

button.selection-btn {
    border-radius: 25px;
    padding: 12px 20px;
    margin: 5px;
    font-size: 14px;
    cursor: pointer;
}

.green-btn {
    background-color: #4CAF50;
    color: white;
}

.red-btn {
    background-color: #f44336;
    color: white;
}

.purple-btn {
    background-color: #9C27B0;
    color: white;
}

.clear-btn {
    background-color: #ccc;
    color: black;
}