Hugging Face's logo

Spaces:
Atulsinghbirla
/
crop_recommendation
Sleeping

App Files Community
Atulsinghbirla commited on
Commit
6091d3f
·
verified ·
1 Parent(s): 0ad2e33

Update static/style.css

Browse files
Files changed (1) hide show
  1. static/style.css +160 -0
static/style.css CHANGED
@@ -0,0 +1,160 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ margin: 0;
4
+ min-height: 100vh;
5
+ display: flex;
6
+ flex-direction: column;
7
+ background-color: #f0f0f0;
8
+ background-image: url('https://images.nationalgeographic.org/image/upload/v1638892233/EducationHub/photos/crops-growing-in-thailand.jpg');
9
+ background-size: cover;
10
+ background-position: center;
11
+ transition: background-image 0.5s ease-in-out;
12
+ }
13
+
14
+ header {
15
+ background-color: #2e7d32;
16
+ color: white;
17
+ text-align: center;
18
+ padding: 1rem;
19
+ position: sticky;
20
+ top: 0;
21
+ z-index: 1000;
22
+ }
23
+
24
+ header h1 {
25
+ margin: 0;
26
+ font-size: 1.8em;
27
+ }
28
+
29
+ header p {
30
+ margin: 0.5rem 0;
31
+ font-size: 1em;
32
+ }
33
+
34
+ .home-button {
35
+ display: inline-block;
36
+ background-color: #4caf50;
37
+ color: white;
38
+ padding: 8px 16px;
39
+ border: none;
40
+ border-radius: 5px;
41
+ text-decoration: none;
42
+ margin-top: 0.5rem;
43
+ font-size: 0.9em;
44
+ cursor: pointer;
45
+ }
46
+
47
+ .home-button:hover {
48
+ background-color: #45a049;
49
+ }
50
+
51
+ main {
52
+ flex: 1;
53
+ display: flex;
54
+ justify-content: center;
55
+ align-items: center;
56
+ padding: 2rem 1rem;
57
+ }
58
+
59
+ .container {
60
+ background-color: rgba(255, 255, 255, 0.8);
61
+ padding: 20px;
62
+ border-radius: 10px;
63
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
64
+ text-align: center;
65
+ max-width: 400px;
66
+ width: 100%;
67
+ }
68
+
69
+ .container h2 {
70
+ color: #2e7d32;
71
+ margin-top: 0;
72
+ }
73
+
74
+ input[type="number"] {
75
+ width: 100%;
76
+ padding: 10px;
77
+ margin: 10px 0;
78
+ border: 1px solid #ccc;
79
+ border-radius: 5px;
80
+ box-sizing: border-box;
81
+ }
82
+
83
+ input[type="submit"] {
84
+ background-color: #4caf50;
85
+ color: white;
86
+ padding: 10px 20px;
87
+ border: none;
88
+ border-radius: 5px;
89
+ cursor: pointer;
90
+ }
91
+
92
+ input[type="submit"]:hover {
93
+ background-color: #45a049;
94
+ }
95
+
96
+ .prediction {
97
+ margin-top: 20px;
98
+ font-size: 1.2em;
99
+ color: #d32f2f;
100
+ }
101
+
102
+ .crop-image {
103
+ margin-top: 20px;
104
+ max-width: 100%;
105
+ height: auto;
106
+ border-radius: 5px;
107
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
108
+ }
109
+
110
+ footer {
111
+ background-color: #2e7d32;
112
+ color: white;
113
+ text-align: center;
114
+ padding: 1rem;
115
+ width: 100%;
116
+ }
117
+
118
+ footer p {
119
+ margin: 0;
120
+ font-size: 0.9em;
121
+ }
122
+
123
+ /* Responsive design */
124
+ @media (max-width: 600px) {
125
+ header h1 {
126
+ font-size: 1.4em;
127
+ }
128
+
129
+ header p {
130
+ font-size: 0.9em;
131
+ }
132
+
133
+ .home-button {
134
+ padding: 6px 12px;
135
+ font-size: 0.8em;
136
+ }
137
+
138
+ .container {
139
+ padding: 15px;
140
+ max-width: 90%;
141
+ }
142
+
143
+ .container h2 {
144
+ font-size: 1.2em;
145
+ }
146
+
147
+ input[type="number"],
148
+ input[type="submit"] {
149
+ font-size: 0.9em;
150
+ padding: 8px;
151
+ }
152
+
153
+ .prediction {
154
+ font-size: 1em;
155
+ }
156
+
157
+ footer p {
158
+ font-size: 0.8em;
159
+ }
160
+ }