Skip to content

Commit 8cf821d

Browse files
Phantom-fsPhantom-fs
authored
Add files via upload
Herbify website v1
1 parent ef12b87 commit 8cf821d

File tree

7 files changed

+776
-0
lines changed

7 files changed

+776
-0
lines changed

Diff for: ‎css/bg.jpg

3.65 MB
Loading

Diff for: ‎css/icon.jpeg

48.5 KB
Loading

Diff for: ‎css/styles.css

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
body {
2+
font-family: 'Arial', sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-image: url('bg.jpg');
6+
background-size: cover;
7+
background-repeat: no-repeat;
8+
}
9+
10+
.container {
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
15+
padding: 20px;
16+
max-width: 800px;
17+
margin: 50px auto;
18+
background-color: rgba(229, 255, 191, 0.8);
19+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
20+
}
21+
22+
.container h1 {
23+
font-size: 2.5em;
24+
color: #333333;
25+
text-align: center;
26+
}
27+
28+
p {
29+
font-size: 1em;
30+
color: #666666;
31+
line-height: 1.6;
32+
}
33+
34+
.wiki-container {
35+
display: flex;
36+
flex-direction: column;
37+
justify-content: center;
38+
padding: 20px;
39+
max-width: 80%;
40+
margin: 50px auto;
41+
background-color: #ffffff;
42+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
43+
}
44+
45+
.container h1 {
46+
font-size: 2.5em;
47+
color: #333333;
48+
text-align: center;
49+
}
50+
51+
.container h2 {
52+
font-size: 2em;
53+
color: #333333;
54+
}
55+
56+
p {
57+
font-size: 1em;
58+
color: #666666;
59+
line-height: 1.6;
60+
}
61+
62+
button {
63+
font-size: 1.2rem;
64+
padding: 10px 20px;
65+
background-color: #0d900f;
66+
color: #fff;
67+
border: none;
68+
border-radius: 5px;
69+
cursor: pointer;
70+
transition: background-color 0.3s ease;
71+
}
72+
73+
button:hover {
74+
background-color: #9bb316;
75+
}
76+
77+
78+
/* NAVIGATION BAR */
79+
nav {
80+
display: flex;
81+
justify-content: space-between;
82+
align-items: center;
83+
padding: 15px;
84+
color: white;
85+
font-size: large;
86+
}
87+
88+
.nav-links {
89+
display: flex;
90+
gap: 15px;
91+
}
92+
93+
.nav-links a {
94+
font-size: 1.2rem;
95+
padding: 10px 20px;
96+
color: white;
97+
text-decoration: none;
98+
border-radius: 5px;
99+
transition: background-color 0.3s;
100+
}
101+
102+
.nav-links a:hover {
103+
background-color: #128a3cc7;
104+
}
105+
106+
/* Style for mobile navigation toggle button */
107+
.nav-toggle {
108+
display: none;
109+
background: none;
110+
border: none;
111+
font-size: 24px;
112+
color: white;
113+
cursor: pointer;
114+
}
115+
116+
/* Screen size updater */
117+
@media screen and (max-width: 768px) {
118+
nav-links {
119+
display: none;
120+
flex-direction: column;
121+
position: absolute;
122+
top: 60px;
123+
left: 0;
124+
width: 100%;
125+
background-color: #333;
126+
text-align: center;
127+
border-radius: 5px;
128+
}
129+
130+
.nav-links a {
131+
display: block;
132+
padding: 10px;
133+
}
134+
135+
.nav-toggle {
136+
display: block;
137+
}
138+
}

Diff for: ‎css/styles_d.css

+252
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
body {
2+
font-family: 'Arial', sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-image: url('bg.jpg');
6+
background-size: cover;
7+
background-repeat: no-repeat;
8+
}
9+
10+
button {
11+
font-size: 1.2rem;
12+
padding: 10px 20px;
13+
background-color: #0d900f;
14+
color: #fff;
15+
border: none;
16+
border-radius: 5px;
17+
cursor: pointer;
18+
transition: background-color 0.3s ease;
19+
}
20+
21+
button:hover {
22+
background-color: #9bb316;
23+
}
24+
25+
.main-container {
26+
display: flex;
27+
flex-direction: column;
28+
align-items: center;
29+
/*justify-content: center;*/
30+
min-height: 100vh;
31+
padding: 20px;
32+
background-color: rgba(0, 0, 0, 0.4);
33+
}
34+
35+
.upload-container {
36+
text-align: center;
37+
background-color: rgba(229, 255, 191, 0.8);
38+
padding: 30px;
39+
border-radius: 15px;
40+
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
41+
margin-bottom: 30px;
42+
}
43+
44+
.upload-container h1 {
45+
color: #333;
46+
margin-bottom: 20px;
47+
}
48+
49+
#imageUpload {
50+
margin-bottom: 20px;
51+
}
52+
53+
#predictButton {
54+
font-size: 1.2rem;
55+
padding: 10px 20px;
56+
background-color: #1fbc19;
57+
color: #fff;
58+
border: none;
59+
border-radius: 5px;
60+
cursor: pointer;
61+
transition: background-color 0.3s ease;
62+
}
63+
64+
#predictButton:hover {
65+
background-color: #128a3c;
66+
}
67+
68+
.result-container {
69+
display: flex;
70+
flex-wrap: wrap;
71+
justify-content: center;
72+
}
73+
74+
.result-container h2 {
75+
color: #fff;
76+
text-align: center;
77+
margin-bottom: 20px;
78+
}
79+
80+
.processed-image-container,
81+
.predictions-container {
82+
flex: 1;
83+
display: flex;
84+
flex-direction: column;
85+
justify-content: flex-start;
86+
align-items: center;
87+
padding: 20px;
88+
background-color: rgba(13, 89, 101, 0.8);
89+
border-radius: 15px;
90+
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
91+
margin: 10px;
92+
}
93+
94+
#processedImage {
95+
max-width: 100%;
96+
height: auto;
97+
border-radius: 10px;
98+
}
99+
100+
#predictionsTable {
101+
width: 100%;
102+
border-collapse: collapse;
103+
}
104+
105+
#predictionsTable th {
106+
background-color: #1fbc19;
107+
color: #fff;
108+
border: 1px solid #fff;
109+
padding: 8px;
110+
}
111+
112+
#predictionsTable td {
113+
border: 1px solid #fff;
114+
padding: 8px;
115+
text-align: left;
116+
color: #fff;
117+
}
118+
119+
/* Bar Graph Styles */
120+
121+
.predictions-container-bar {
122+
flex: 1;
123+
display: flex;
124+
flex-direction: column;
125+
justify-content: flex-start;
126+
padding: 20px;
127+
background-color: rgba(70, 20, 105, 0.8);
128+
border-radius: 15px;
129+
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
130+
margin: 10px;
131+
}
132+
133+
.predictions-container-bar h2 {
134+
color: #fff;
135+
margin-bottom: 20px;
136+
}
137+
138+
#barGraph {
139+
margin-top: 20px;
140+
}
141+
142+
.bar {
143+
display: flex;
144+
align-items: center;
145+
margin-bottom: 10px;
146+
}
147+
148+
.bar-label {
149+
width: 400px;
150+
text-align: right;
151+
padding-right: 10px;
152+
color: #23d068;
153+
white-space: nowrap;
154+
overflow: hidden;
155+
text-overflow: ellipsis;
156+
}
157+
158+
.bar-percentage {
159+
flex-grow: 1;
160+
background-color: #66c2a5;
161+
height: 30px;
162+
border-radius: 5px;
163+
}
164+
165+
.bar-value {
166+
margin-left: 15px;
167+
color: #fff;
168+
}
169+
170+
/* NAVIGATION BAR */
171+
nav {
172+
display: flex;
173+
justify-content: space-between;
174+
align-items: center;
175+
padding: 15px;
176+
background-color: rgba(0, 0, 0, 0.4);
177+
color: white;
178+
font-size: large;
179+
}
180+
181+
.nav-links {
182+
display: flex;
183+
gap: 15px;
184+
}
185+
186+
.nav-links a {
187+
font-size: 1.2rem;
188+
padding: 10px 20px;
189+
color: white;
190+
text-decoration: none;
191+
border-radius: 5px;
192+
transition: background-color 0.3s;
193+
}
194+
195+
.nav-links a:hover {
196+
background-color: #128a3cc7;
197+
}
198+
199+
/* Style for mobile navigation toggle button */
200+
.nav-toggle {
201+
display: none;
202+
background: none;
203+
border: none;
204+
font-size: 24px;
205+
color: white;
206+
cursor: pointer;
207+
}
208+
209+
/* Screen size updater */
210+
211+
.hidden {
212+
display: none;
213+
}
214+
215+
@media screen and (max-width: 768px) {
216+
.result-container {
217+
flex-direction: column;
218+
align-items: center;
219+
}
220+
221+
.processed-image-container,
222+
.predictions-container {
223+
width: auto;
224+
height: auto;
225+
margin: 10px 0;
226+
}
227+
228+
nav-links {
229+
display: none;
230+
flex-direction: column;
231+
position: absolute;
232+
top: 60px;
233+
left: 0;
234+
width: 100%;
235+
background-color: #333;
236+
text-align: center;
237+
border-radius: 5px;
238+
}
239+
240+
.nav-links a {
241+
display: block;
242+
padding: 10px;
243+
}
244+
245+
.nav-toggle {
246+
display: block;
247+
}
248+
}
249+
250+
/*
251+
rgba(39, 123, 75, 0.8)
252+
*/

0 commit comments

Comments
 (0)