Hugging Face's logo

Spaces:
Zain437
/
puter
Running

App Files Community
Zain437 commited on
Commit
7840acc
·
verified ·
1 Parent(s): 8b2178b

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +65 -101
style.css CHANGED
@@ -1,164 +1,128 @@
1
- /* General layout */
2
  body {
3
- font-family: 'Segoe UI', Arial, sans-serif;
 
4
  margin: 0;
5
  padding: 0;
6
  display: flex;
7
  justify-content: center;
8
  align-items: center;
9
  height: 100vh;
10
- background: linear-gradient(135deg, #e0e7ff, #f3f4f6);
11
- flex-direction: column;
12
  }
13
 
14
- /* Authentication screen */
15
- #auth-container {
 
16
  background: white;
17
  border-radius: 12px;
18
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
19
- padding: 40px 30px;
20
- text-align: center;
21
- width: 340px;
22
  }
23
 
24
- #auth-container h2 {
25
- margin-bottom: 10px;
 
 
 
 
 
26
  }
27
 
28
- #auth-container p {
29
- color: #555;
30
- margin-bottom: 20px;
31
  }
32
 
33
- #sign-in {
34
- padding: 10px 20px;
35
- background: #007bff;
36
  border: none;
37
- border-radius: 8px;
38
- color: white;
39
  cursor: pointer;
40
- transition: 0.3s;
41
- font-size: 15px;
42
- }
43
-
44
- #sign-in:hover {
45
- background: #0056b3;
46
  }
47
 
48
- #auth-status {
49
- text-align: left;
50
- font-size: 12px;
51
- color: #333;
52
- margin-top: 15px;
53
- background: #f9f9f9;
54
- border: 1px solid #ddd;
55
- padding: 10px;
56
- border-radius: 8px;
57
- max-height: 200px;
58
- overflow-y: auto;
59
  }
60
 
61
- /* Chat container */
62
  #chat-container {
63
- width: 80%;
64
- max-width: 600px;
65
- background: #ffffff;
66
- border-radius: 12px;
67
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
68
- padding: 20px;
69
  display: flex;
70
  flex-direction: column;
 
71
  }
72
 
73
- /* Messages box */
74
  #messages {
75
- flex-grow: 1;
76
- height: 350px;
77
  overflow-y: auto;
78
- border-bottom: 1px solid #ddd;
79
- margin-bottom: 15px;
80
  padding: 10px;
81
- display: flex;
82
- flex-direction: column;
 
83
  }
84
 
85
- /* Message styles */
86
  .message {
87
- margin: 8px 0;
88
- padding: 10px 14px;
 
89
  border-radius: 10px;
90
- word-wrap: break-word;
91
  max-width: 80%;
92
- animation: fadeIn 0.3s ease-in-out;
 
93
  }
94
 
95
- .message.user {
96
- background-color: #007bff;
97
- color: white;
98
  align-self: flex-end;
99
- border-bottom-right-radius: 2px;
100
- }
101
-
102
- .message.ai {
103
- background-color: #f1f1f1;
104
- color: #000;
105
- align-self: flex-start;
106
- border-bottom-left-radius: 2px;
107
  }
108
 
109
- /* Chat input */
110
  #chat-input {
111
  display: flex;
112
  gap: 10px;
113
  }
114
 
115
- #input-message {
116
- flex-grow: 1;
117
  padding: 10px;
 
118
  border: 1px solid #ccc;
119
- border-radius: 8px;
120
- font-size: 14px;
121
- outline: none;
122
- transition: border-color 0.2s ease;
123
- }
124
-
125
- #input-message:focus {
126
- border-color: #007bff;
127
  }
128
 
129
- button {
130
- padding: 10px 20px;
131
  background: #007bff;
132
- border: none;
133
- border-radius: 8px;
134
  color: white;
 
 
 
135
  cursor: pointer;
136
- transition: 0.3s;
137
- font-weight: 500;
138
  }
139
 
140
- button:hover {
141
  background: #0056b3;
142
  }
143
 
144
- /* Footer */
145
- .footer-text {
146
- margin-top: 20px;
147
- font-size: 14px;
148
- color: #444;
 
149
  }
150
 
151
- /* Scrollbar styling */
152
- #messages::-webkit-scrollbar {
153
- width: 6px;
154
- }
155
- #messages::-webkit-scrollbar-thumb {
156
- background: #ccc;
157
- border-radius: 3px;
158
  }
159
 
160
- /* Animation */
161
- @keyframes fadeIn {
162
- from { opacity: 0; transform: translateY(5px); }
163
- to { opacity: 1; transform: translateY(0); }
164
  }
 
 
1
  body {
2
+ font-family: "Segoe UI", Arial, sans-serif;
3
+ background: #f4f7fb;
4
  margin: 0;
5
  padding: 0;
6
  display: flex;
7
  justify-content: center;
8
  align-items: center;
9
  height: 100vh;
 
 
10
  }
11
 
12
+ #app {
13
+ width: 90%;
14
+ max-width: 700px;
15
  background: white;
16
  border-radius: 12px;
17
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
18
+ overflow: hidden;
19
+ display: flex;
20
+ flex-direction: column;
21
  }
22
 
23
+ header {
24
+ background: #007bff;
25
+ color: white;
26
+ display: flex;
27
+ justify-content: space-between;
28
+ align-items: center;
29
+ padding: 12px 20px;
30
  }
31
 
32
+ header h1 {
33
+ margin: 0;
34
+ font-size: 1.2rem;
35
  }
36
 
37
+ header button {
38
+ background: #fff;
39
+ color: #007bff;
40
  border: none;
41
+ border-radius: 6px;
42
+ padding: 6px 12px;
43
  cursor: pointer;
44
+ font-weight: 600;
45
+ transition: 0.2s;
 
 
 
 
46
  }
47
 
48
+ header button:hover {
49
+ background: #e6f0ff;
 
 
 
 
 
 
 
 
 
50
  }
51
 
 
52
  #chat-container {
53
+ flex: 1;
 
 
 
 
 
54
  display: flex;
55
  flex-direction: column;
56
+ padding: 15px;
57
  }
58
 
 
59
  #messages {
60
+ flex: 1;
 
61
  overflow-y: auto;
62
+ margin-bottom: 10px;
 
63
  padding: 10px;
64
+ background: #fafafa;
65
+ border-radius: 8px;
66
+ border: 1px solid #eee;
67
  }
68
 
 
69
  .message {
70
+ background: #007bff;
71
+ color: white;
72
+ padding: 8px 12px;
73
  border-radius: 10px;
74
+ margin-bottom: 8px;
75
  max-width: 80%;
76
+ word-wrap: break-word;
77
+ align-self: flex-start;
78
  }
79
 
80
+ .user-message {
81
+ background: #e0f7fa;
82
+ color: #333;
83
  align-self: flex-end;
 
 
 
 
 
 
 
 
84
  }
85
 
 
86
  #chat-input {
87
  display: flex;
88
  gap: 10px;
89
  }
90
 
91
+ #chat-input input {
92
+ flex: 1;
93
  padding: 10px;
94
+ border-radius: 6px;
95
  border: 1px solid #ccc;
96
+ font-size: 1rem;
 
 
 
 
 
 
 
97
  }
98
 
99
+ #chat-input button {
 
100
  background: #007bff;
 
 
101
  color: white;
102
+ border: none;
103
+ padding: 10px 16px;
104
+ border-radius: 6px;
105
  cursor: pointer;
106
+ transition: 0.2s;
 
107
  }
108
 
109
+ #chat-input button:hover {
110
  background: #0056b3;
111
  }
112
 
113
+ footer {
114
+ background: #f9f9f9;
115
+ padding: 10px;
116
+ text-align: center;
117
+ font-size: 0.9rem;
118
+ color: #555;
119
  }
120
 
121
+ footer a {
122
+ color: #007bff;
123
+ text-decoration: none;
 
 
 
 
124
  }
125
 
126
+ footer a:hover {
127
+ text-decoration: underline;
 
 
128
  }