Hugging Face's logo

Spaces:
pranit144
/
Pestipedia
Sleeping

App Files Community
RushiMane2003 commited on
Commit
2d842e3
·
verified ·
1 Parent(s): cf7dc62

Update templates/style.css

Browse files
Files changed (1) hide show
  1. templates/style.css +87 -187
templates/style.css CHANGED
@@ -1,187 +1,87 @@
1
- :root {
2
- --primary-color: #38b000;
3
- --secondary-color: #007bff;
4
- --accent-color: #fb8500;
5
- --light-bg: #f8f9fa;
6
- --dark-text: #212529;
7
- --pest-color: #dc3545;
8
- --disease-color: #6f42c1;
9
- }
10
-
11
- body {
12
- background-color: var(--light-bg);
13
- padding: 20px;
14
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15
- }
16
-
17
- .page-header {
18
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
19
- color: white;
20
- padding: 2rem 0;
21
- border-radius: 10px;
22
- margin-bottom: 2rem;
23
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
24
- }
25
-
26
- .language-selector select {
27
- background-color: rgba(255, 255, 255, 0.2);
28
- color: white;
29
- border: 1px solid rgba(255, 255, 255, 0.3);
30
- }
31
-
32
- .language-selector select option {
33
- background-color: white;
34
- color: var(--dark-text);
35
- }
36
-
37
- .filter-buttons {
38
- margin-bottom: 20px;
39
- }
40
-
41
- .filter-btn {
42
- margin-right: 10px;
43
- border-radius: 20px;
44
- font-weight: 500;
45
- padding: 8px 16px;
46
- transition: all 0.3s ease;
47
- }
48
-
49
- .filter-btn:hover {
50
- transform: translateY(-2px);
51
- }
52
-
53
- .filter-btn.active {
54
- box-shadow: 0 4px 8px rgba(0,0,0,0.15);
55
- }
56
-
57
- .card {
58
- transition: all 0.3s ease;
59
- height: 100%;
60
- cursor: pointer;
61
- border-radius: 10px;
62
- border: none;
63
- box-shadow: 0 4px 8px rgba(0,0,0,0.05);
64
- overflow: hidden;
65
- }
66
-
67
- .card:hover {
68
- transform: translateY(-8px);
69
- box-shadow: 0 12px 24px rgba(0,0,0,0.15);
70
- }
71
-
72
- .card-img-top {
73
- height: 200px;
74
- object-fit: cover;
75
- transition: all 0.5s ease;
76
- }
77
-
78
- .card:hover .card-img-top {
79
- transform: scale(1.05);
80
- }
81
-
82
- .card-body {
83
- padding: 1.5rem;
84
- }
85
-
86
- .card-title {
87
- font-weight: 600;
88
- margin-bottom: 10px;
89
- }
90
-
91
- .loading {
92
- display: none;
93
- text-align: center;
94
- padding: 20px;
95
- }
96
-
97
- .modal-body {
98
- max-height: 70vh;
99
- overflow-y: auto;
100
- }
101
-
102
- .badge.pest {
103
- background-color: var(--pest-color);
104
- padding: 0.5em 0.8em;
105
- font-size: 0.8rem;
106
- }
107
-
108
- .badge.disease {
109
- background-color: var(--disease-color);
110
- padding: 0.5em 0.8em;
111
- font-size: 0.8rem;
112
- }
113
-
114
- .modal-content {
115
- border-radius: 15px;
116
- border: none;
117
- box-shadow: 0 10px 30px rgba(0,0,0,0.2);
118
- }
119
-
120
- .modal-header {
121
- border-bottom: 1px solid rgba(0,0,0,0.1);
122
- background-color: var(--light-bg);
123
- }
124
-
125
- .modal-title {
126
- font-weight: 600;
127
- }
128
-
129
- .section-title {
130
- margin-top: 1.5rem;
131
- margin-bottom: 0.75rem;
132
- font-weight: 600;
133
- color: var(--dark-text);
134
- border-bottom: 2px solid var(--primary-color);
135
- padding-bottom: 0.5rem;
136
- display: inline-block;
137
- }
138
-
139
- #backToTop {
140
- position: fixed;
141
- bottom: 20px;
142
- right: 20px;
143
- display: none;
144
- background-color: var(--primary-color);
145
- color: white;
146
- border: none;
147
- border-radius: 50%;
148
- width: 50px;
149
- height: 50px;
150
- text-align: center;
151
- font-size: 20px;
152
- line-height: 50px;
153
- cursor: pointer;
154
- z-index: 99;
155
- box-shadow: 0 4px 10px rgba(0,0,0,0.2);
156
- }
157
-
158
- .crop-badge {
159
- background-color: #17a2b8;
160
- color: white;
161
- font-size: 0.8rem;
162
- font-weight: normal;
163
- margin-right: 4px;
164
- }
165
-
166
- .no-results {
167
- text-align: center;
168
- padding: 40px;
169
- font-size: 1.2rem;
170
- color: #6c757d;
171
- }
172
-
173
- /* Spinner */
174
- .spinner {
175
- width: 40px;
176
- height: 40px;
177
- margin: 20px auto;
178
- border: 4px solid rgba(0, 0, 0, 0.1);
179
- border-left-color: var(--primary-color);
180
- border-radius: 50%;
181
- animation: spin 1s linear infinite;
182
- }
183
-
184
- @keyframes spin {
185
- 0% { transform: rotate(0deg); }
186
- 100% { transform: rotate(360deg); }
187
- }
 
1
+ :root {
2
+ --primary-color: #38b000;
3
+ --secondary-color: #007bff;
4
+ --accent-color: #fb8500;
5
+ --light-bg: #f8f9fa;
6
+ --dark-text: #212529;
7
+ --pest-color: #dc3545;
8
+ --disease-color: #6f42c1;
9
+ }
10
+
11
+ body {
12
+ background-color: var(--light-bg);
13
+ padding: 20px;
14
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15
+ }
16
+
17
+ .page-header {
18
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
19
+ color: white;
20
+ padding: 2rem 0;
21
+ border-radius: 10px;
22
+ margin-bottom: 2rem;
23
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
24
+ }
25
+
26
+ .language-selector select {
27
+ background-color: rgba(255, 255, 255, 0.2);
28
+ color: white;
29
+ border: 1px solid rgba(255, 255, 255, 0.3);
30
+ }
31
+
32
+ .language-selector select option {
33
+ background-color: white;
34
+ color: var(--dark-text);
35
+ }
36
+
37
+ .filter-buttons { margin-bottom: 20px; }
38
+
39
+ .filter-btn {
40
+ margin-right: 10px;
41
+ border-radius: 20px;
42
+ font-weight: 500;
43
+ padding: 8px 16px;
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .filter-btn:hover { transform: translateY(-2px); }
48
+ .filter-btn.active { box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
49
+
50
+ .card { transition: all 0.3s ease; height: 100%; cursor: pointer; border-radius: 10px; border: none; box-shadow: 0 4px 8px rgba(0,0,0,0.05); overflow: hidden; }
51
+ .card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }
52
+
53
+ .card-img-top { height: 200px; object-fit: cover; transition: all 0.5s ease; }
54
+ .card:hover .card-img-top { transform: scale(1.05); }
55
+
56
+ .card-body { padding: 1.5rem; }
57
+ .card-title { font-weight: 600; margin-bottom: 10px; }
58
+
59
+ .modal-body { max-height: 70vh; overflow-y: auto; }
60
+
61
+ .badge.pest { background-color: var(--pest-color); padding: 0.5em 0.8em; font-size: 0.8rem; }
62
+ .badge.disease { background-color: var(--disease-color); padding: 0.5em 0.8em; font-size: 0.8rem; }
63
+
64
+ .modal-content { border-radius: 15px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
65
+ .modal-header { border-bottom: 1px solid rgba(0,0,0,0.1); background-color: var(--light-bg); }
66
+ .modal-title { font-weight: 600; }
67
+
68
+ .section-title {
69
+ margin-top: 1.5rem;
70
+ margin-bottom: 0.75rem;
71
+ font-weight: 600;
72
+ color: var(--dark-text);
73
+ border-bottom: 2px solid var(--primary-color);
74
+ padding-bottom: 0.5rem;
75
+ display: inline-block;
76
+ }
77
+
78
+ #backToTop { position: fixed; bottom: 20px; right: 20px; display: none; background-color: var(--primary-color); color: white; border: none; border-radius: 50%; width: 50px; height: 50px; text-align: center; font-size: 20px; line-height: 50px; cursor: pointer; z-index: 99; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
79
+
80
+ .crop-badge { background-color: #17a2b8; color: white; font-size: 0.8rem; font-weight: normal; margin-right: 4px; }
81
+
82
+ .no-results { text-align: center; padding: 40px; font-size: 1.2rem; color: #6c757d; }
83
+
84
+ .spinner {
85
+ width: 40px; height: 40px; margin: 20px auto; border: 4px solid rgba(0,0,0,0.1); border-left-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite;
86
+ }
87
+ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }