Hugging Face's logo

Spaces:
rahuln2002
/
knowledge-assistant
Running

App Files Community
rahuln2002 commited on
Commit
8ac8c7b
·
verified ·
1 Parent(s): a744c1a

Update static/style.css

Browse files
Files changed (1) hide show
  1. static/style.css +136 -89
static/style.css CHANGED
@@ -1,90 +1,137 @@
1
- * {
2
- margin: 0;
3
- padding: 0;
4
- box-sizing: border-box;
5
- }
6
-
7
- body {
8
- font-family: Arial, sans-serif;
9
- background-color: #f4f4f4;
10
- display: flex;
11
- justify-content: center;
12
- align-items: center;
13
- height: 100vh;
14
- }
15
-
16
- .container {
17
- width: 50%;
18
- background: white;
19
- padding: 30px;
20
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
21
- border-radius: 8px;
22
- text-align: center;
23
- }
24
-
25
- h1 {
26
- color: #333;
27
- margin-bottom: 20px;
28
- }
29
-
30
- label {
31
- font-size: 16px;
32
- font-weight: bold;
33
- display: block;
34
- margin-top: 15px;
35
- color: #555;
36
- text-align: left;
37
- }
38
-
39
- textarea, select, input {
40
- width: 100%;
41
- padding: 10px;
42
- margin-top: 5px;
43
- border: 1px solid #ccc;
44
- border-radius: 5px;
45
- font-size: 16px;
46
- }
47
-
48
- select {
49
- cursor: pointer;
50
- }
51
-
52
- button {
53
- background: #4CAF50;
54
- color: white;
55
- padding: 12px 20px;
56
- margin-top: 20px;
57
- border: none;
58
- cursor: pointer;
59
- border-radius: 5px;
60
- font-size: 16px;
61
- width: 100%;
62
- transition: background 0.3s ease;
63
- }
64
-
65
- button:disabled {
66
- background: #ccc;
67
- cursor: not-allowed;
68
- }
69
-
70
- button:hover:not(:disabled) {
71
- background: #45a049;
72
- }
73
-
74
- #number_label {
75
- display: none;
76
- }
77
-
78
- #number {
79
- display: none;
80
- }
81
-
82
- .result-section {
83
- margin-top: 20px;
84
- padding: 15px;
85
- background-color: #eef;
86
- border-left: 5px solid #4CAF50;
87
- border-radius: 5px;
88
- font-size: 16px;
89
- text-align: left;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  }
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: 'Arial', sans-serif;
9
+ background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ height: 100vh;
14
+ padding: 20px;
15
+ }
16
+
17
+ .container {
18
+ width: 50%;
19
+ background: white;
20
+ padding: 30px;
21
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
22
+ border-radius: 10px;
23
+ text-align: center;
24
+ transition: transform 0.3s ease;
25
+ }
26
+
27
+ .container:hover {
28
+ transform: scale(1.02);
29
+ }
30
+
31
+ h1 {
32
+ color: #333;
33
+ margin-bottom: 20px;
34
+ font-size: 24px;
35
+ font-weight: bold;
36
+ }
37
+
38
+ label {
39
+ font-size: 16px;
40
+ font-weight: bold;
41
+ display: block;
42
+ margin-top: 15px;
43
+ color: #444;
44
+ text-align: left;
45
+ }
46
+
47
+ textarea, select, input {
48
+ width: 100%;
49
+ padding: 12px;
50
+ margin-top: 8px;
51
+ border: 1px solid #ccc;
52
+ border-radius: 6px;
53
+ font-size: 16px;
54
+ transition: border 0.3s ease, box-shadow 0.3s ease;
55
+ }
56
+
57
+ textarea {
58
+ resize: vertical;
59
+ min-height: 120px;
60
+ }
61
+
62
+ textarea:focus, select:focus, input:focus {
63
+ border-color: #4CAF50;
64
+ box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
65
+ outline: none;
66
+ }
67
+
68
+ select {
69
+ cursor: pointer;
70
+ background-color: #fff;
71
+ }
72
+
73
+ button {
74
+ background: #4CAF50;
75
+ color: white;
76
+ padding: 12px 20px;
77
+ margin-top: 20px;
78
+ border: none;
79
+ cursor: pointer;
80
+ border-radius: 6px;
81
+ font-size: 16px;
82
+ width: 100%;
83
+ transition: background 0.3s ease, transform 0.2s;
84
+ }
85
+
86
+ button:disabled {
87
+ background: #ccc;
88
+ cursor: not-allowed;
89
+ }
90
+
91
+ button:hover:not(:disabled) {
92
+ background: #388E3C;
93
+ transform: scale(1.03);
94
+ }
95
+
96
+ #number_label, #number {
97
+ display: none;
98
+ }
99
+
100
+ #charCount {
101
+ font-size: 14px;
102
+ color: #666;
103
+ margin-top: 5px;
104
+ text-align: right;
105
+ }
106
+
107
+ .result-section {
108
+ margin-top: 20px;
109
+ padding: 15px;
110
+ background-color: #f0fff0;
111
+ border-left: 5px solid #4CAF50;
112
+ border-radius: 6px;
113
+ font-size: 16px;
114
+ text-align: left;
115
+ font-weight: 500;
116
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
117
+ }
118
+
119
+ @media (max-width: 768px) {
120
+ .container {
121
+ width: 90%;
122
+ padding: 20px;
123
+ }
124
+
125
+ h1 {
126
+ font-size: 20px;
127
+ }
128
+
129
+ textarea, select, input {
130
+ font-size: 14px;
131
+ }
132
+
133
+ button {
134
+ font-size: 14px;
135
+ padding: 10px;
136
+ }
137
  }