Hugging Face's logo

Spaces:
FrederickSundeep
/
AIChatMate
Runtime error

App Files Community
FrederickSundeep commited on
Commit
4ec8214
·
1 Parent(s): 6275b06

commit 000368

Browse files
Files changed (2) hide show
  1. static/style.css +153 -171
  2. templates/index.html +1 -170
static/style.css CHANGED
@@ -1,184 +1,166 @@
1
- body {
2
- font-family: 'Segoe UI', sans-serif;
3
- background: #f9fafb;
4
- margin: 0;
5
- padding: 0;
6
- display: flex;
7
- justify-content: center;
8
- }
9
-
10
- .chat-container {
11
- max-width: 700px;
12
- width: 100%;
13
- padding: 20px;
14
- margin-top: 40px;
15
- background: #ffffff;
16
- border-radius: 12px;
17
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
18
- display: flex;
19
- flex-direction: column;
20
- }
21
-
22
- h2 {
23
- text-align: center;
24
- color: #3f51b5;
25
- margin-bottom: 20px;
26
- }
27
-
28
- .chat-box {
29
- flex-grow: 1;
30
- max-height: 450px;
31
- overflow-y: auto;
32
- padding: 12px;
33
- border: 1px solid #ddd;
34
- border-radius: 8px;
35
- background: #f0f0f0;
36
- display: flex;
 
 
 
 
37
  flex-direction: column;
38
- }
39
-
40
  .message {
 
 
 
41
  margin-bottom: 12px;
42
  padding: 10px 14px;
43
- border-radius: 8px;
44
- max-width: 90%;
 
45
  }
46
 
47
  .message.user {
48
- background: #e3f2fd;
49
  align-self: flex-end;
50
- text-align: right;
51
  margin-left: auto;
 
 
 
52
  }
53
 
54
  .message.assistant {
55
- background: #eeeeee;
56
  align-self: flex-start;
57
- }
58
-
59
- .text-content {
60
- white-space: pre-wrap;
61
- word-wrap: break-word;
62
- }
63
-
64
- .input-area {
65
- display: flex;
66
- flex-direction: column;
67
- gap: 10px;
68
- margin-top: 10px;
69
- }
70
-
71
- textarea {
72
- padding: 12px;
73
- resize: none;
74
- border-radius: 6px;
75
- border: 1px solid #ccc;
76
- font-size: 14px;
77
- width: 100%;
78
- box-sizing: border-box;
79
- }
80
-
81
- button {
82
- background: #3f51b5;
83
- color: white;
84
- padding: 10px 16px;
85
- font-size: 15px;
86
- border: none;
87
- border-radius: 6px;
88
- cursor: pointer;
89
- align-self: flex-end;
90
- transition: background 0.3s ease;
91
- }
92
-
93
- button:hover {
94
- background: #303f9f;
95
- }
96
-
97
- .typing-indicator {
98
- display: flex;
99
- gap: 6px;
100
- margin: 5px 0 10px 5px;
101
- }
102
-
103
- .dot {
104
- width: 10px;
105
- height: 10px;
106
- background-color: #3f51b5;
107
- border-radius: 50%;
108
- animation: blink 1.4s infinite both;
109
- }
110
-
111
- .dot:nth-child(2) {
112
- animation-delay: 0.2s;
113
- }
114
- .dot:nth-child(3) {
115
- animation-delay: 0.4s;
116
- }
117
-
118
- @keyframes blink {
119
- 0%, 80%, 100% { opacity: 0.2; }
120
- 40% { opacity: 1; }
121
- }
122
-
123
- .code-block {
124
- position: relative;
125
- border-radius: 6px;
126
- overflow: hidden;
127
- margin-top: 10px;
128
- margin-bottom: 10px;
129
- }
130
-
131
- .code-block pre {
132
- background: #1e1e1e;
133
- color: #eee;
134
- padding: 12px;
135
- margin: 0;
136
- border-radius: 6px;
137
- font-size: 13px;
138
- overflow-x: auto;
139
- }
140
-
141
- .code-block code {
142
- white-space: pre-wrap;
143
- word-wrap: break-word;
144
- }
145
-
146
- .copy-btn {
147
- position: absolute;
148
- top: 8px;
149
- right: 12px;
150
- background: #374151;
151
- color: white;
152
- border: none;
153
- padding: 4px 10px;
154
- border-radius: 4px;
155
- font-size: 12px;
156
- cursor: pointer;
157
- z-index: 10;
158
- }
159
-
160
- .copy-btn:hover {
161
- background: #4b5563;
162
- }
163
-
164
- @media (max-width: 768px) {
165
- .chat-container {
166
- margin: 10px;
167
- padding: 16px;
168
- }
169
-
170
- .chat-box {
171
- max-height: 60vh;
172
- }
173
-
174
- textarea {
175
- font-size: 13px;
176
- }
177
-
178
- button {
179
- font-size: 14px;
180
- }
181
- }
182
-
183
-
184
-
 
1
+ body {
2
+ font-family: 'Roboto', sans-serif;
3
+ background: #121212;
4
+ color: #ffffff;
5
+ margin: 0;
6
+ display: flex;
7
+ justify-content: center;
8
+ align-items: center;
9
+ min-height: 100vh;
10
+ padding: 0 16px;
11
+ }
12
+
13
+ .chat-container {
14
+ background: #1f1f1f;
15
+ border-radius: 12px;
16
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
17
+ padding: 20px;
18
+ max-width: 700px;
19
+ width: 100%;
20
+ display: flex;
21
+ flex-direction: column;
22
+ }
23
+
24
+ h2 {
25
+ text-align: center;
26
+ color: #bb86fc;
27
+ margin-bottom: 20px;
28
+ font-weight: 500;
29
+ }
30
+
31
+ .chat-box {
32
+ flex-grow: 1;
33
+ max-height: 420px;
34
+ overflow-y: auto;
35
+ padding: 12px;
36
+ border: 1px solid #2d2d2d;
37
+ border-radius: 8px;
38
+ background: #2a2a2a;
39
+ margin-bottom: 16px;
40
+ display: flex;
41
  flex-direction: column;
42
+ }
 
43
  .message {
44
+ display: block; /* ensures full-width layout */
45
+ width: fit-content;
46
+ max-width: 85%;
47
  margin-bottom: 12px;
48
  padding: 10px 14px;
49
+ border-radius: 16px;
50
+ line-height: 1.5;
51
+ word-wrap: break-word;
52
  }
53
 
54
  .message.user {
 
55
  align-self: flex-end;
 
56
  margin-left: auto;
57
+ background: #333c4d;
58
+ color: #e3f2fd;
59
+ border-bottom-right-radius: 0;
60
  }
61
 
62
  .message.assistant {
 
63
  align-self: flex-start;
64
+ margin-right: auto;
65
+ background: #383838;
66
+ border-bottom-left-radius: 0;
67
+ }
68
+
69
+ .text-content {
70
+ white-space: pre-wrap;
71
+ }
72
+
73
+ .input-area {
74
+ display: flex;
75
+ gap: 10px;
76
+ }
77
+
78
+ textarea {
79
+ flex-grow: 1;
80
+ padding: 10px 12px;
81
+ resize: none;
82
+ border-radius: 6px;
83
+ background: #2a2a2a;
84
+ color: #fff;
85
+ border: 1px solid #444;
86
+ font-size: 14px;
87
+ }
88
+
89
+ button {
90
+ background: #6200ee;
91
+ color: white;
92
+ border: none;
93
+ border-radius: 6px;
94
+ padding: 10px 16px;
95
+ font-size: 14px;
96
+ font-weight: 500;
97
+ cursor: pointer;
98
+ transition: background 0.3s;
99
+ }
100
+
101
+ button:hover {
102
+ background: #3700b3;
103
+ }
104
+
105
+ .typing-indicator {
106
+ display: flex;
107
+ gap: 6px;
108
+ margin: 6px 0 12px;
109
+ }
110
+
111
+ .dot {
112
+ width: 8px;
113
+ height: 8px;
114
+ background-color: #bb86fc;
115
+ border-radius: 50%;
116
+ animation: blink 1.4s infinite both;
117
+ }
118
+
119
+ .dot:nth-child(2) {
120
+ animation-delay: 0.2s;
121
+ }
122
+
123
+ .dot:nth-child(3) {
124
+ animation-delay: 0.4s;
125
+ }
126
+
127
+ @keyframes blink {
128
+ 0%, 80%, 100% { opacity: 0.2; }
129
+ 40% { opacity: 1; }
130
+ }
131
+
132
+ .code-block {
133
+ position: relative;
134
+ background: #1e1e1e;
135
+ color: #eee;
136
+ padding: 12px;
137
+ border-radius: 8px;
138
+ margin-top: 8px;
139
+ }
140
+
141
+ .copy-btn {
142
+ position: absolute;
143
+ top: 8px;
144
+ right: 12px;
145
+ background: #444;
146
+ color: #fff;
147
+ border: none;
148
+ padding: 4px 8px;
149
+ font-size: 12px;
150
+ border-radius: 4px;
151
+ cursor: pointer;
152
+ }
153
+
154
+ .copy-btn:hover {
155
+ background: #666;
156
+ }
157
+
158
+ @media (max-width: 600px) {
159
+ .chat-box {
160
+ max-height: 60vh;
161
+ }
162
+
163
+ button {
164
+ padding: 8px 14px;
165
+ }
166
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/index.html CHANGED
@@ -4,7 +4,7 @@
4
  <meta charset="UTF-8" />
5
  <title>Chat Mate</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
-
8
  <!-- MDC Web & Icons -->
9
  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
10
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
@@ -13,175 +13,6 @@
13
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
14
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
15
  <script src="https://unpkg.com/vue@3"></script>
16
-
17
- <style>
18
- body {
19
- font-family: 'Roboto', sans-serif;
20
- background: #121212;
21
- color: #ffffff;
22
- margin: 0;
23
- display: flex;
24
- justify-content: center;
25
- align-items: center;
26
- min-height: 100vh;
27
- padding: 0 16px;
28
- }
29
-
30
- .chat-container {
31
- background: #1f1f1f;
32
- border-radius: 12px;
33
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
34
- padding: 20px;
35
- max-width: 700px;
36
- width: 100%;
37
- display: flex;
38
- flex-direction: column;
39
- }
40
-
41
- h2 {
42
- text-align: center;
43
- color: #bb86fc;
44
- margin-bottom: 20px;
45
- font-weight: 500;
46
- }
47
-
48
- .chat-box {
49
- flex-grow: 1;
50
- max-height: 420px;
51
- overflow-y: auto;
52
- padding: 12px;
53
- border: 1px solid #2d2d2d;
54
- border-radius: 8px;
55
- background: #2a2a2a;
56
- margin-bottom: 16px;
57
- display: flex;
58
- flex-direction: column;
59
- }
60
- .message {
61
- display: block; /* ensures full-width layout */
62
- width: fit-content;
63
- max-width: 85%;
64
- margin-bottom: 12px;
65
- padding: 10px 14px;
66
- border-radius: 16px;
67
- line-height: 1.5;
68
- word-wrap: break-word;
69
- }
70
-
71
- .message.user {
72
- align-self: flex-end;
73
- margin-left: auto;
74
- background: #333c4d;
75
- color: #e3f2fd;
76
- border-bottom-right-radius: 0;
77
- }
78
-
79
- .message.assistant {
80
- align-self: flex-start;
81
- margin-right: auto;
82
- background: #383838;
83
- border-bottom-left-radius: 0;
84
- }
85
-
86
- .text-content {
87
- white-space: pre-wrap;
88
- }
89
-
90
- .input-area {
91
- display: flex;
92
- gap: 10px;
93
- }
94
-
95
- textarea {
96
- flex-grow: 1;
97
- padding: 10px 12px;
98
- resize: none;
99
- border-radius: 6px;
100
- background: #2a2a2a;
101
- color: #fff;
102
- border: 1px solid #444;
103
- font-size: 14px;
104
- }
105
-
106
- button {
107
- background: #6200ee;
108
- color: white;
109
- border: none;
110
- border-radius: 6px;
111
- padding: 10px 16px;
112
- font-size: 14px;
113
- font-weight: 500;
114
- cursor: pointer;
115
- transition: background 0.3s;
116
- }
117
-
118
- button:hover {
119
- background: #3700b3;
120
- }
121
-
122
- .typing-indicator {
123
- display: flex;
124
- gap: 6px;
125
- margin: 6px 0 12px;
126
- }
127
-
128
- .dot {
129
- width: 8px;
130
- height: 8px;
131
- background-color: #bb86fc;
132
- border-radius: 50%;
133
- animation: blink 1.4s infinite both;
134
- }
135
-
136
- .dot:nth-child(2) {
137
- animation-delay: 0.2s;
138
- }
139
-
140
- .dot:nth-child(3) {
141
- animation-delay: 0.4s;
142
- }
143
-
144
- @keyframes blink {
145
- 0%, 80%, 100% { opacity: 0.2; }
146
- 40% { opacity: 1; }
147
- }
148
-
149
- .code-block {
150
- position: relative;
151
- background: #1e1e1e;
152
- color: #eee;
153
- padding: 12px;
154
- border-radius: 8px;
155
- margin-top: 8px;
156
- }
157
-
158
- .copy-btn {
159
- position: absolute;
160
- top: 8px;
161
- right: 12px;
162
- background: #444;
163
- color: #fff;
164
- border: none;
165
- padding: 4px 8px;
166
- font-size: 12px;
167
- border-radius: 4px;
168
- cursor: pointer;
169
- }
170
-
171
- .copy-btn:hover {
172
- background: #666;
173
- }
174
-
175
- @media (max-width: 600px) {
176
- .chat-box {
177
- max-height: 60vh;
178
- }
179
-
180
- button {
181
- padding: 8px 14px;
182
- }
183
- }
184
- </style>
185
  </head>
186
 
187
  <body>
 
4
  <meta charset="UTF-8" />
5
  <title>Chat Mate</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <link rel="stylesheet" href="/static/style.css" />
8
  <!-- MDC Web & Icons -->
9
  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
10
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
 
13
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
14
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
15
  <script src="https://unpkg.com/vue@3"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </head>
17
 
18
  <body>