Hugging Face's logo

Spaces:
studycode129
/
Free_Web_LLM_Tester
Running

App Files Community
1
studycode129 commited on
Commit
deeddbd
·
verified ·
1 Parent(s): e3200ea

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +161 -132
style.css CHANGED
@@ -1,133 +1,162 @@
1
  * {
2
- box-sizing: border-box;
3
- }
4
- body {
5
- font-family: 'Inter', sans-serif;
6
- background: linear-gradient(to right, #ede9fe, #f3e8ff);
7
- color: #374151;
8
- margin: 0;
9
- padding: 20px;
10
- display: flex;
11
- justify-content: center;
12
- align-items: center;
13
- min-height: 100vh;
14
- }
15
- .container {
16
- background: #faf5ff;
17
- padding: 32px;
18
- border-radius: 24px;
19
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
20
- width: 100%;
21
- max-width: 800px;
22
- border: 2px solid #c4b5fd;
23
- }
24
- h1 {
25
- text-align: center;
26
- margin-bottom: 24px;
27
- font-size: 28px;
28
- font-weight: 600;
29
- color: #6b21a8;
30
- }
31
- label {
32
- display: block;
33
- margin: 14px 0 6px;
34
- font-weight: 600;
35
- color: #6b21a8;
36
- }
37
- input[type="text"], select, textarea {
38
- width: 100%;
39
- padding: 12px;
40
- margin-bottom: 16px;
41
- border-radius: 10px;
42
- border: 1px solid #ddd6fe;
43
- font-size: 16px;
44
- font-family: inherit;
45
- background: #fff;
46
- transition: border-color 0.3s ease, box-shadow 0.3s ease;
47
- }
48
- input[type="text"]:focus, textarea:focus, select:focus {
49
- outline: none;
50
- border-color: #a78bfa;
51
- box-shadow: 0 0 0 2px #ddd6fe;
52
- }
53
- /*input[type="file"] {
54
- display: none;
55
- }*/
56
- .custom-file-upload {
57
- display: inline-block;
58
- padding: 12px 24px;
59
- background-color: #8b5cf6;
60
- color: white;
61
- font-weight: 600;
62
- border-radius: 10px;
63
- cursor: pointer;
64
- margin-bottom: 16px;
65
- transition: background-color 0.3s ease, transform 0.2s ease;
66
- }
67
- .custom-file-upload:hover {
68
- background-color: #7c3aed;
69
- transform: scale(1.02);
70
- }
71
- textarea {
72
- min-height: 120px;
73
- resize: vertical;
74
- }
75
- button {
76
- background-color: #8b5cf6;
77
- color: white;
78
- font-weight: 600;
79
- border: none;
80
- padding: 14px;
81
- border-radius: 10px;
82
- font-size: 16px;
83
- cursor: pointer;
84
- width: 100%;
85
- transition: background-color 0.3s ease, transform 0.2s ease;
86
- }
87
- button:hover {
88
- background-color: #7c3aed;
89
- transform: scale(1.02);
90
- }
91
-
92
- .loading {
93
- font-size: 16px;
94
- font-weight: bold;
95
- color: #6b21a8; /* purple */
96
- animation: pulse 1s infinite;
97
- margin: 10px 0;
98
- }
99
-
100
- @keyframes pulse {
101
- 0% { opacity: 0.3; }
102
- 50% { opacity: 1; }
103
- 100% { opacity: 0.3; }
104
- }
105
-
106
-
107
- pre {
108
- background: #f5f3ff;
109
- border: 1px solid #e9d5ff;
110
- padding: 16px;
111
- border-radius: 10px;
112
- white-space: pre-wrap;
113
- margin-top: 10px;
114
- }
115
- .download {
116
- text-align: center;
117
- margin-top: 20px;
118
- }
119
- @media (max-width: 768px) {
120
- body {
121
- padding: 10px;
122
- }
123
- .container {
124
- padding: 20px;
125
- }
126
- h1 {
127
- font-size: 24px;
128
- }
129
- button {
130
- font-size: 15px;
131
- padding: 12px;
132
- }
133
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  * {
2
+ box-sizing: border-box;
3
+ }
4
+
5
+ body {
6
+ font-family: 'Inter', sans-serif;
7
+ background: linear-gradient(to right, #ede9fe, #f3e8ff);
8
+ color: #374151;
9
+ margin: 0;
10
+ padding: 20px;
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
+ min-height: 100vh;
15
+ }
16
+
17
+ .container {
18
+ background: #faf5ff;
19
+ padding: 32px;
20
+ border-radius: 24px;
21
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
22
+ width: 100%;
23
+ max-width: 800px;
24
+ border: 2px solid #c4b5fd;
25
+ }
26
+
27
+ h1 {
28
+ text-align: center;
29
+ margin-bottom: 24px;
30
+ font-size: 28px;
31
+ font-weight: 600;
32
+ color: #6b21a8;
33
+ }
34
+
35
+ label {
36
+ display: block;
37
+ margin: 14px 0 6px;
38
+ font-weight: 600;
39
+ color: #6b21a8;
40
+ }
41
+
42
+ input[type="text"],
43
+ select,
44
+ textarea {
45
+ width: 100%;
46
+ padding: 12px;
47
+ margin-bottom: 16px;
48
+ border-radius: 10px;
49
+ border: 1px solid #ddd6fe;
50
+ font-size: 16px;
51
+ font-family: inherit;
52
+ background: #fff;
53
+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
54
+ }
55
+
56
+ input[type="text"]:focus,
57
+ textarea:focus,
58
+ select:focus {
59
+ outline: none;
60
+ border-color: #a78bfa;
61
+ box-shadow: 0 0 0 2px #ddd6fe;
62
+ }
63
+
64
+ /* File upload button */
65
+ .custom-file-upload {
66
+ display: inline-block;
67
+ padding: 12px 24px;
68
+ background-color: #8b5cf6;
69
+ color: white;
70
+ font-weight: 600;
71
+ border-radius: 10px;
72
+ cursor: pointer;
73
+ margin-bottom: 16px;
74
+ transition: background-color 0.3s ease, transform 0.2s ease;
75
+ }
76
+
77
+ .custom-file-upload:hover {
78
+ background-color: #7c3aed;
79
+ transform: scale(1.02);
80
+ }
81
+
82
+ /* File name preview */
83
+ #fileName {
84
+ font-weight: 500;
85
+ color: #4c1d95;
86
+ margin-bottom: 12px;
87
+ }
88
+
89
+ /* Textarea style */
90
+ textarea {
91
+ min-height: 120px;
92
+ resize: vertical;
93
+ }
94
+
95
+ /* Button style */
96
+ button {
97
+ background-color: #8b5cf6;
98
+ color: white;
99
+ font-weight: 600;
100
+ border: none;
101
+ padding: 14px;
102
+ border-radius: 10px;
103
+ font-size: 16px;
104
+ cursor: pointer;
105
+ width: 100%;
106
+ transition: background-color 0.3s ease, transform 0.2s ease;
107
+ }
108
+
109
+ button:hover {
110
+ background-color: #7c3aed;
111
+ transform: scale(1.02);
112
+ }
113
+
114
+ /* Loading animation */
115
+ .loading {
116
+ font-size: 16px;
117
+ font-weight: bold;
118
+ color: #6b21a8;
119
+ animation: pulse 1s infinite;
120
+ margin: 14px 0;
121
+ text-align: center;
122
+ }
123
+
124
+ @keyframes pulse {
125
+ 0% { opacity: 0.3; }
126
+ 50% { opacity: 1; }
127
+ 100% { opacity: 0.3; }
128
+ }
129
+
130
+ /* Response box */
131
+ pre {
132
+ background: #f5f3ff;
133
+ border: 1px solid #e9d5ff;
134
+ padding: 16px;
135
+ border-radius: 10px;
136
+ white-space: pre-wrap;
137
+ margin-top: 10px;
138
+ }
139
+
140
+ /* Download button wrapper */
141
+ .download {
142
+ text-align: center;
143
+ margin-top: 20px;
144
+ }
145
+
146
+ /* Responsive styles */
147
+ @media (max-width: 768px) {
148
+ body {
149
+ padding: 10px;
150
+ }
151
+ .container {
152
+ padding: 20px;
153
+ }
154
+ h1 {
155
+ font-size: 24px;
156
+ }
157
+ button {
158
+ font-size: 15px;
159
+ padding: 12px;
160
+ }
161
+ }
162
+