Hugging Face's logo

Spaces:
redfernstech
/
ipip
Running

App Files Community
Srinivasulu kethanaboina commited on
Commit
1770839
·
verified ·
1 Parent(s): 2c05e02

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +244 -18
style.css CHANGED
@@ -1,28 +1,254 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
28
  }
 
1
+
2
  body {
3
+ font-family: Arial, sans-serif;
4
+ margin: 0;
5
+ padding: 0;
6
+ background-color: #f0f0f0;
7
+ }
8
+
9
+ /* Chat Icon Styles */
10
+ #chat-icon {
11
+ width: 60px;
12
+ height: 60px;
13
+ background-color: #e84533;
14
+ color: #fff;
15
+ display: flex;
16
+ justify-content: center;
17
+ align-items: center;
18
+ border-radius: 50%;
19
+ position: fixed;
20
+ bottom: 20px;
21
+ right: 20px;
22
+ cursor: pointer;
23
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
24
+ z-index: 999;
25
+ transition: background-color 0.3s;
26
+ }
27
+
28
+ #chat-icon:hover {
29
+ background-color: #e84533;
30
+ }
31
+
32
+ #chat-icon img {
33
+ width: 30px;
34
+ height: 30px;
35
+ }
36
+
37
+ /* Form Container Styles */
38
+ #form-container {
39
+ display: none;
40
+ width: 350px;
41
+ height: 500px;
42
+ border: 1px solid #ddd;
43
+ border-radius: 10px;
44
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
45
+ background-color: #ffd1d1;
46
+ position: fixed;
47
+ bottom: 90px; /* Above the chat icon */
48
+ right: 20px;
49
+ z-index: 1000;
50
+ text-align: center;
51
+ padding: 30px 20px;
52
+ box-sizing: border-box;
53
+ }
54
+
55
+ #form-container h2 {
56
+ margin-bottom: 15px;
57
+ font-size: 24px;
58
+ color: #010a08;
59
+ }
60
+
61
+ #form-container p {
62
+ margin-bottom: 25px;
63
+ color: #555;
64
+ font-size: 16px;
65
+ }
66
+
67
+ #form-container input {
68
+ width: 100%;
69
+ padding: 12px 10px;
70
+ margin-bottom: 20px;
71
+ border-radius: 5px;
72
+ border: 1px solid #ccc;
73
+ font-size: 16px;
74
+ box-sizing: border-box;
75
+ }
76
+ #form-container select {
77
+ width: 100%;
78
+ padding: 12px 10px;
79
+ margin-bottom: 20px;
80
+ border-radius: 5px;
81
+ border: 1px solid #ccc;
82
+ font-size: 16px;
83
+ box-sizing: border-box;
84
+ }
85
+
86
+
87
+ #form-container button {
88
+ width: 100%;
89
+ padding: 12px;
90
+ background-color: #007bff;
91
+ color: #dd6e3e;
92
+ border: none;
93
+ border-radius: 5px;
94
+ font-size: 16px;
95
+ cursor: pointer;
96
+ transition: background-color 0.3s;
97
+ }
98
+
99
+ #form-container button:hover {
100
+ background-color: #0056b3;
101
+ }
102
+
103
+ /* Chatbox Styles */
104
+ #chat-box {
105
+ display: none;
106
+ width: 350px;
107
+ height: 450px;
108
+ border: 1px solid #ddd;
109
+ border-radius: 10px;
110
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
111
+ position: fixed;
112
+ bottom: 90px; /* Above the chat icon */
113
+ right: 20px;
114
+ background-color: #fff;
115
+ z-index: 1000;
116
+ display: flex;
117
+ flex-direction: column;
118
+ }
119
+
120
+ #chat-header {
121
+ background-color: #df3923;
122
+ color: #fff;
123
+ padding: 15px;
124
+ border-radius: 10px 10px 0 0;
125
+ display: flex;
126
+ justify-content: space-between;
127
+ align-items: center;
128
+ font-size: 18px;
129
+ }
130
+
131
+ #chat-header #close-chat {
132
+ cursor: pointer;
133
+ font-weight: bold;
134
+ font-size: 20px;
135
+ }
136
+
137
+ #chat-body {
138
+ padding: 15px;
139
+ flex: 1;
140
+ overflow-y: auto;
141
+ background-color: #f9f9f9;
142
+ }
143
+
144
+ .message {
145
+ margin: 10px 0;
146
+ padding: 10px 15px;
147
+ border-radius: 20px;
148
+ max-width: 80%;
149
+ font-size: 14px;
150
+ line-height: 1.4;
151
+ word-wrap: break-word;
152
+ }
153
+
154
+ .user-message {
155
+ background-color: #ffd1d1;
156
+ color: #0e0101;
157
+ margin-left: auto;
158
+ text-align: right;
159
+ border-bottom-right-radius: 0;
160
+ }
161
+
162
+ .bot-message {
163
+ background-color: #e5e5e5;
164
+ color: #000;
165
+ margin-right: auto;
166
+ text-align: left;
167
+ border-bottom-left-radius: 0;
168
+ }
169
+
170
+ .bot-message button {
171
+ display: block;
172
+ width: 100%;
173
+ padding: 10px;
174
+ margin-top: 10px;
175
+ background-color: #fff;
176
+ border: 1px solid #007bff;
177
+ border-radius: 5px;
178
+ color: #007bff;
179
+ cursor: pointer;
180
+ font-size: 14px;
181
+ text-align: left;
182
+ transition: background-color 0.3s, color 0.3s;
183
+ }
184
+
185
+ .bot-message button:hover {
186
+ background-color: #007bff;
187
+ color: #fff;
188
+ }
189
+
190
+ /* Gradio Iframe Styles */
191
+ #gradio-iframe {
192
+ display: none;
193
+ width: 350px;
194
+ height: 450px;
195
+ border: 1px solid #ddd;
196
+ border-radius: 10px;
197
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
198
+ position: fixed;
199
+ bottom: 90px; /* Above the chat icon */
200
+ right: 20px;
201
+ background-color: #fff;
202
+ z-index: 1000;
203
+ display: flex;
204
+ flex-direction: column;
205
+ }
206
+
207
+ #gradio-header {
208
+ background-color: #de1d1df0;
209
+ color: #fff;
210
+ padding: 15px;
211
+ border-radius: 10px 10px 0 0;
212
+ display: flex;
213
+ justify-content: space-between;
214
+ align-items: center;
215
+ font-size: 18px;
216
+ }
217
+
218
+ #gradio-header #back-button {
219
+ cursor: pointer;
220
+ font-weight: bold;
221
+ font-size: 20px;
222
+ }
223
+ #form-container {
224
+ display: none; /* Hide the form initially */
225
+ /* Other existing styles */
226
  }
227
 
228
+ #chat-box {
229
+ display: none; /* Hide the chatbox initially */
230
+ /* Other existing styles */
231
  }
232
 
233
+ #chat-icon {
234
+ display: flex; /* Show the chat icon initially */
235
+ /* Other existing styles */
 
 
236
  }
237
 
238
+ #gradio-iframe {
239
+ display: none; /* Hide Gradio iframe initially */
240
+ /* Other existing styles */
 
 
 
241
  }
242
 
243
+
244
+ /* Responsive Adjustments */
245
+ @media (max-width: 400px) {
246
+ #form-container, #chat-box, #gradio-iframe {
247
+ width: 90%;
248
+ right: 5%;
249
+ }
250
+
251
+ #chat-icon {
252
+ right: 5%;
253
+ }
254
  }