Hugging Face's logo

Spaces:
geethareddy
/
AI_chatbhot
Runtime error

App Files Community
geethareddy commited on
Commit
e9de30f
·
verified ·
1 Parent(s): f5a1145

Update static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +33 -94
static/styles.css CHANGED
@@ -1,110 +1,49 @@
1
- /* General Styles */
2
  body {
3
- font-family: Arial, sans-serif;
4
- background-color: #f8f9fa;
5
- margin: 0;
6
- padding: 0;
7
- display: flex;
8
- justify-content: center;
9
- align-items: center;
10
- height: 100vh;
11
  }
12
 
13
- .chat-container {
14
- width: 400px;
15
- background-color: #ffffff;
16
- border-radius: 10px;
17
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
18
- overflow: hidden;
 
19
  }
20
 
21
- .chat-header {
22
- background-color: #3b82f6;
23
- color: #ffffff;
24
- padding: 10px;
25
- text-align: center;
26
  }
27
 
28
- .logo-container {
29
- display: flex;
30
- align-items: center;
31
- justify-content: center;
32
- gap: 10px;
33
  }
34
 
35
- .chatbot-logo {
36
- width: 40px;
37
- height: 40px;
38
- border-radius: 50%;
39
  }
40
 
41
- .chat-box {
42
- padding: 15px;
43
- max-height: 300px;
44
- overflow-y: auto;
45
- background-color: #f0f4f8;
 
 
 
46
  }
47
 
48
- .bot-message,
49
- .user-message {
50
- background-color: #e0e0e0;
51
- padding: 10px;
52
- margin: 5px 0;
53
- border-radius: 8px;
54
- max-width: 80%;
55
  }
56
 
57
- .user-message {
58
- background-color: #3b82f6;
59
- color: #ffffff;
60
- align-self: flex-end;
61
- }
62
-
63
- .user-input {
64
- display: flex;
65
- padding: 10px;
66
- background-color: #ffffff;
67
- border-top: 1px solid #e0e0e0;
68
- }
69
-
70
- .user-input input {
71
- flex: 1;
72
- padding: 10px;
73
- border: 1px solid #ddd;
74
- border-radius: 8px;
75
- margin-right: 10px;
76
- }
77
-
78
- .user-input button {
79
- padding: 10px 20px;
80
- background-color: #3b82f6;
81
- color: white;
82
- border: none;
83
- border-radius: 8px;
84
- cursor: pointer;
85
- }
86
-
87
- .user-input button:hover {
88
- background-color: #2563eb;
89
- }
90
-
91
- .dropdown {
92
- width: 100%;
93
- padding: 10px;
94
- border-radius: 8px;
95
- margin-top: 10px;
96
- }
97
-
98
- #submit-btn {
99
- width: 100px;
100
- background-color: #3b82f6;
101
- color: white;
102
- border: none;
103
- padding: 10px;
104
- border-radius: 8px;
105
- cursor: pointer;
106
- }
107
-
108
- #submit-btn:hover {
109
- background-color: #2563eb;
110
  }
 
 
1
  body {
2
+ font-family: Arial, sans-serif;
3
+ background-color: #f4f4f4;
4
+ margin: 0;
5
+ padding: 0;
 
 
 
 
6
  }
7
 
8
+ .container {
9
+ width: 50%;
10
+ margin: 0 auto;
11
+ background-color: #fff;
12
+ padding: 20px;
13
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
14
+ border-radius: 8px;
15
  }
16
 
17
+ h1 {
18
+ text-align: center;
19
+ color: #333;
 
 
20
  }
21
 
22
+ form {
23
+ display: flex;
24
+ flex-direction: column;
25
+ margin-bottom: 20px;
 
26
  }
27
 
28
+ select {
29
+ padding: 10px;
30
+ margin: 10px 0;
 
31
  }
32
 
33
+ button {
34
+ padding: 10px;
35
+ background-color: #4CAF50;
36
+ color: white;
37
+ border: none;
38
+ cursor: pointer;
39
+ font-size: 16px;
40
+ border-radius: 5px;
41
  }
42
 
43
+ button:hover {
44
+ background-color: #45a049;
 
 
 
 
 
45
  }
46
 
47
+ #recipes {
48
+ margin-top: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  }