102 |
103 | [](https://github.com/vishantrathi/woolconnect/stargazers)
104 |
105 |
106 |
107 | ## Repo Forked By:
108 |
109 |
110 |
111 | [](https://github.com/vishantrathi/woolconnect/network/members)
112 |
113 | ---
114 |
115 | Thank you for your interest in contributing to **WoolConnect**! 🧡 We appreciate your help in making this platform better for the wool community in India.
116 |
--------------------------------------------------------------------------------
/WOOL.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/WOOL.jpeg
--------------------------------------------------------------------------------
/about.css:
--------------------------------------------------------------------------------
1 | /* styles.css */
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | transition: all 0.3s ease;
8 | }
9 |
10 | body {
11 | font-family: "Arial", sans-serif;
12 | margin: 0;
13 | padding: 0;
14 | color: #fff;
15 | scroll-behavior: smooth;
16 | }
17 |
18 | body::before {
19 | content: '';
20 | position: fixed;
21 | top: 0;
22 | left: 0;
23 | width: 100%;
24 | height: 100%;
25 | background: url('images/jean-marc-vieregge-cDKqFb-NOZc-unsplash.jpg') no-repeat center center fixed;
26 | background-size: cover;
27 | filter: blur(6px);
28 | z-index: -1;
29 | }
30 |
31 | header {
32 | background: linear-gradient(to right, rgba(51, 51, 51, 0.8), rgba(85, 85, 85, 0.8));
33 | color: #fff;
34 | text-align: center;
35 | padding: 30px 0;
36 | position: sticky;
37 | top: 0;
38 | z-index: 100;
39 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
40 | backdrop-filter: blur(10px);
41 | animation: headerSlideDown 1.2s ease-in-out;
42 | }
43 |
44 | header h1 {
45 | margin: 0;
46 | font-size: 2.5rem;
47 | animation: fadeIn 1s ease-in-out;
48 | }
49 |
50 | main {
51 | max-width: 800px;
52 | margin: 30px auto;
53 | padding: 20px;
54 | background-color: #fff8ef;
55 | color: #1f1f1f;
56 | border-radius: 10px;
57 | box-shadow: 0 4px 15px rgba(28, 27, 27, 0.336);
58 | animation: slideIn 1.2s ease-in-out;
59 | }
60 |
61 | .container2 {
62 | background-color: rgba(211, 207, 207, 0.9);
63 | padding: 30px;
64 | border-radius: 10px;
65 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
66 | max-width: 800px;
67 | margin: 20px auto;
68 | }
69 |
70 | .container2 h1 {
71 | text-align: center;
72 | font-weight: bold;
73 | margin-bottom: 20px;
74 | font-size: 2rem;
75 | color: #333;
76 | }
77 |
78 | .container2 section {
79 | margin-bottom: 20px;
80 | }
81 |
82 | .container2 section h2 {
83 | font-weight: bold;
84 | margin-bottom: 10px;
85 | font-size: 1.5rem;
86 | color: #333;
87 | }
88 |
89 | .container2 section p {
90 | color: #6c757d;
91 | line-height: 1.8;
92 | margin-bottom: 15px;
93 | font-size: 1rem;
94 | }
95 |
96 | .container2 section ul {
97 | margin-top: 10px;
98 | margin-left: 20px;
99 | list-style-type: disc;
100 | }
101 |
102 | .container2 section ul li {
103 | margin-bottom: 10px;
104 | color: #555;
105 | }
106 |
107 | h2 {
108 | font-size: 1.8rem;
109 | margin-bottom: 15px;
110 | color: #FFFFFF;
111 | animation: fadeIn 1s ease-in-out;
112 | }
113 |
114 | p {
115 | font-size: 1rem;
116 | line-height: 1.8;
117 | margin-bottom: 10px;
118 | animation: fadeIn 1.2s ease-in-out;
119 | }
120 |
121 | .footer {
122 | background: #000000;
123 | color: #fff;
124 | text-align: center;
125 | z-index: 5;
126 | min-height: 100px;
127 | }
128 |
129 | .footer h2 {
130 | color: white;
131 | padding-top: 20px;
132 | padding-bottom: 0px;
133 | }
134 |
135 | .footer-container {
136 | display: flex;
137 | justify-content: center;
138 | flex-wrap: wrap;
139 | gap: 20px;
140 | }
141 |
142 | .footer-info {
143 | max-width: 400px;
144 | font-size: 16px;
145 | }
146 |
147 | .social-icons {
148 | display: flex;
149 | justify-content: center;
150 | gap: 10px;
151 | }
152 |
153 | .social-icon {
154 | color: #fff;
155 | font-size: 1.2rem;
156 | transition: color 0.3s ease;
157 | padding-bottom: 10px;
158 | }
159 |
160 | .social-icon:hover {
161 | color: #3e3636;
162 | }
163 |
164 | .copyright {
165 | font-size: 0.9rem;
166 | padding: 1px 10px;
167 | background-color: #222;
168 | }
169 |
170 | .copyright p {
171 | margin-bottom: 10px;
172 | margin-top: 10px;
173 | font-size: 0.9rem;
174 | }
175 |
176 | @keyframes fadeIn {
177 | 0% {
178 | opacity: 0;
179 | }
180 | 100% {
181 | opacity: 1;
182 | }
183 | }
184 |
185 | @keyframes slideIn {
186 | 0% {
187 | transform: translateY(20px);
188 | opacity: 0;
189 | }
190 | 100% {
191 | transform: translateY(0);
192 | opacity: 1;
193 | }
194 | }
195 |
196 | @keyframes headerSlideDown {
197 | 0% {
198 | transform: translateY(-100%);
199 | opacity: 0;
200 | }
201 | 100% {
202 | transform: translateY(0);
203 | opacity: 1;
204 | }
205 | }
206 |
207 | @media screen and (max-width: 768px) {
208 | header {
209 | padding: 15px 0;
210 | }
211 |
212 | header h1 {
213 | font-size: 2rem;
214 | }
215 |
216 | main {
217 | padding: 15px;
218 | }
219 |
220 | h2 {
221 | font-size: 1.5rem;
222 | }
223 |
224 | p {
225 | font-size: 0.9rem;
226 | }
227 |
228 | .footer-container {
229 | flex-direction: column;
230 | text-align: center;
231 | }
232 |
233 | #scrollBtn {
234 | display: none !important;
235 | }
236 | }
237 |
238 | #scrollBtn {
239 | position: fixed;
240 | bottom: 20px;
241 | right: 20px;
242 | display: none;
243 | background-color: #007bff;
244 | color: white;
245 | border: none;
246 | border-radius: 50%;
247 | padding: 15px;
248 | font-size: 18px;
249 | cursor: pointer;
250 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
251 | pointer-events: auto;
252 | transition: background-color 0.3s ease, transform 0.3s ease;
253 | }
254 |
255 | #scrollBtn:hover {
256 | background-color: #0056b3;
257 | transform: scale(1.2);
258 | }
259 |
--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
About Us
7 |
8 |
9 |
16 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
39 |
40 |
41 |
45 |
46 |
47 |
☰
48 |
49 |
50 |
59 |
61 |
62 |
65 |
66 |
67 |
68 | Our Mission
69 | At WoolConnect, our mission is to connect wool enthusiasts from around the world and provide them with the best resources and community support. We strive to create a platform where wool lovers can share their knowledge, experiences, and passion for wool. Our goal is to foster a supportive and inclusive community that encourages learning and growth. We believe in the power of community and the importance of preserving the art of wool crafting. Our mission is to ensure that this tradition continues to thrive in the modern world. Through our platform, we aim to provide educational resources, tutorials, and events that cater to both beginners and experienced wool crafters. We are committed to sustainability and ethical practices in the wool industry, and we strive to promote these values within our community
70 |
71 |
72 | Our History
73 | Founded in 2020, WoolConnect started as a small online forum and has grown into a vibrant community of wool lovers. Over the years, we have expanded our platform to include a wide range of resources, including tutorials, articles, and events. Our community has grown exponentially, and we are proud to have members from all over the world. Our journey began with a simple idea: to create a space where wool enthusiasts could connect and share their passion. This idea quickly gained traction, and WoolConnect was born. As our community grew, so did our offerings. We introduced new features and resources to meet the evolving needs of our members. Today, WoolConnect is a leading platform for wool enthusiasts, and we continue to innovate and expand our services to better serve our community.
74 |
75 |
76 | Our Team
77 | Our team is composed of passionate individuals who are dedicated to providing the best experience for our community. Each member of our team brings unique skills and expertise to the table, allowing us to offer a diverse range of content and support. We are committed to continuously improving our platform and meeting the needs of our community. Our team members are not only experts in their respective fields but also share a deep love for wool crafting. This passion drives us to deliver high-quality content and support to our members. We believe in collaboration and teamwork, and we work closely together to ensure that WoolConnect remains a valuable resource for wool enthusiasts. Our team is always here to help, and we are dedicated to providing exceptional customer service and support to our community.
78 |
79 |
80 | Our Success Story
81 | Through hard work and dedication, we have achieved numerous milestones and have been recognized as a leading platform for wool enthusiasts. Our success is a testament to the strength and passion of our community. Our journey has been filled with challenges and triumphs, and we are proud of what we have accomplished together as a community. We have hosted numerous events, workshops, and tutorials that have brought wool enthusiasts together and fostered a sense of camaraderie. Our platform has been featured in various publications and has received accolades for its contributions to the wool crafting community. We are grateful for the support of our members and are excited to continue growing and evolving as a leading platform for wool enthusiasts.
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
139 |
140 |
141 |
142 |
143 |
148 |
157 |
158 |
159 |
160 |
162 |
163 |
191 |
192 |
193 |
--------------------------------------------------------------------------------
/catalog.css:
--------------------------------------------------------------------------------
1 | /* Global Styles */
2 | body,
3 | html {
4 | margin: 0;
5 | padding: 0;
6 | font-family: Arial, sans-serif;
7 | box-sizing: border-box;
8 | scroll-behavior: smooth;
9 | }
10 |
11 | .container {
12 | width: 100%;
13 | margin: 0 auto;
14 | }
15 |
16 | /* Navbar */
17 | .navcontainer {
18 | width: 100%;
19 | display: flex;
20 | align-items: center;
21 | justify-content: space-between;
22 | padding: 0 1%;
23 | margin: 0 auto;
24 | }
25 |
26 | .navbar {
27 | background: linear-gradient(to right, #0f0f0f, #1b1b1b);
28 | display: flex;
29 | justify-content: space-between;
30 | align-items: center;
31 | padding: 10px 10px;
32 | top: 0;
33 | z-index: 1000;
34 | }
35 |
36 | .logo img {
37 | height: 50px;
38 | width: 50px;
39 | border-radius: 50%;
40 | }
41 |
42 | .nav-links {
43 | display: flex;
44 | gap: 50px;
45 | list-style: none;
46 | position: relative;
47 | }
48 |
49 | .nav-links li {
50 | position: relative;
51 | }
52 |
53 | .nav-links li a {
54 | text-decoration: none;
55 | color: #fff;
56 | font-size: 16px;
57 | transition: color 0.3s ease;
58 | position: relative;
59 | }
60 |
61 | .nav-links li a::before {
62 | content: "";
63 | position: absolute;
64 | border-radius: 15px;
65 | bottom: -5px;
66 | left: 0;
67 | width: 0%;
68 | height: 2.5px;
69 | background-color: #ee0653;
70 | transition: all 0.5s;
71 | }
72 |
73 | .nav-links li a:hover {
74 | color: #ccc;
75 | }
76 |
77 | .nav-links li a:hover::before {
78 | width: 100%;
79 | }
80 |
81 | .lastlink ul {
82 | display: flex;
83 | gap: 10px;
84 | list-style: none;
85 | }
86 |
87 | .lastlink a {
88 | color: #fff;
89 | text-decoration: none;
90 | border: 1px solid #fff;
91 | padding: 5px 10px;
92 | border-radius: 5px;
93 | transition: all 0.5s ease-in-out;
94 | }
95 |
96 | .lastlink a:hover {
97 | background: #fff;
98 | color: #000000;
99 | }
100 |
101 | /* Mobile Navbar Toggle */
102 | .nav-toggle {
103 | display: none;
104 | font-size: 1.8rem;
105 | color: #fff;
106 | background: none;
107 | border: none;
108 | cursor: pointer;
109 | }
110 |
111 | .product-list {
112 | display: grid;
113 | grid-template-columns: repeat(4, 1fr); /* Display products in 4 columns */
114 | gap: 20px;
115 | padding-top: 20px;
116 | }
117 |
118 | .product {
119 | background-color: #fff;
120 | border: 1px solid #ddd;
121 | padding: 20px;
122 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
123 | text-align: center;
124 | position: relative;
125 | overflow: hidden;
126 | border-radius: 15px;
127 | }
128 |
129 | .image-container {
130 | position: relative;
131 | display: inline-block;
132 | }
133 |
134 | .image-container img {
135 | max-width: 100%;
136 | height: 300px;
137 | border: 1px solid #000;
138 | border-radius: 25px;
139 | transition: filter 0.3s ease, transform 0.4s;
140 | }
141 |
142 | .image-container:hover img {
143 | filter: blur(5px);
144 | transform: scale(1.05);
145 | }
146 |
147 | .image-container button {
148 | background-color: #888078;
149 | color: #fff;
150 | border: none;
151 | padding: 10px 7px;
152 | font-size: 1rem;
153 | cursor: pointer;
154 | position: absolute;
155 | top: 80%;
156 | left: 50%;
157 | border-radius: 10px;
158 | transform: translate(-50%, -50%);
159 | opacity: 0;
160 | visibility: hidden;
161 | transition: opacity 0.3s ease, visibility 0.3s ease,
162 | background-color 0.4s ease-in-out;
163 | }
164 |
165 | .image-container:hover button {
166 | animation: slideUp 0.4s ease forwards;
167 | opacity: 1;
168 | visibility: visible;
169 | }
170 |
171 | @keyframes slideUp {
172 | from {
173 | top: 80%;
174 | opacity: 0;
175 | }
176 | to {
177 | top: 50%;
178 | opacity: 1;
179 | }
180 | }
181 |
182 | .image-container button:hover {
183 | background-color: #dcd2cb;
184 | }
185 |
186 | .details {
187 | align-items: flex-start;
188 | display: flex;
189 | justify-content: space-between;
190 | }
191 |
192 | .product h3 {
193 | font-size: 1.2rem;
194 | text-align: left;
195 | }
196 |
197 | .product p {
198 | font-size: 1rem;
199 | font-weight: bold;
200 | color: rgb(70, 68, 68);
201 | text-align: right;
202 | margin-top: 20px;
203 | }
204 |
205 | /* Footer */
206 | .footer {
207 | background: #000000;
208 | color: #fff;
209 | text-align: center;
210 | z-index: 5;
211 | min-height: 100px;
212 | }
213 |
214 | .footer-container {
215 | display: flex;
216 | justify-content: center;
217 | flex-wrap: wrap;
218 | gap: 20px;
219 | }
220 |
221 | .footer-info {
222 | max-width: 400px;
223 | }
224 |
225 | .social-icons {
226 | display: flex;
227 | justify-content: center;
228 | gap: 10px;
229 | }
230 |
231 | .social-icon {
232 | color: #fff;
233 | font-size: 1.2rem;
234 | transition: color 0.3s ease;
235 | padding-bottom: 10px;
236 | }
237 |
238 | .social-icon:hover {
239 | color: #3e3636;
240 | }
241 |
242 | .copyright {
243 | font-size: 0.9rem;
244 | padding: 1px 10px;
245 | background-color: #222;
246 | }
247 |
248 | @media (max-width: 1059px) {
249 | .nav-links,
250 | .lastlink {
251 | display: none;
252 | flex-direction: column;
253 | position: absolute;
254 | top: 60px;
255 | left: 0;
256 | right: 0;
257 | gap: 20px;
258 | background: rgba(35, 35, 35, 0.95);
259 | text-align: center;
260 | padding: 20px;
261 | z-index: 1001;
262 | }
263 |
264 | .nav-links.active,
265 | .lastlink.active {
266 | display: flex;
267 | }
268 |
269 | .nav-toggle {
270 | display: block;
271 | }
272 |
273 | .product-list {
274 | grid-template-columns: repeat(2, 1fr); /* Display products in 2 columns */
275 | gap: 15px;
276 | padding: 10px;
277 | }
278 |
279 | .product {
280 | padding: 15px;
281 | border-radius: 10px;
282 | }
283 |
284 | .image-container img {
285 | height: 200px; /* Adjust image height for smaller screens */
286 | }
287 |
288 | .details {
289 | flex-direction: column;
290 | align-items: center;
291 | }
292 |
293 | .product h3,
294 | .product p {
295 | text-align: center; /* Center-align text */
296 | }
297 | }
298 |
299 | /* Mobile View */
300 | @media (max-width: 700px) {
301 | .product-list {
302 | grid-template-columns: 1fr; /* Display products in 1 column */
303 | gap: 10px;
304 | }
305 |
306 | .product {
307 | padding: 10px;
308 | }
309 |
310 | .image-container img {
311 | height: 150px; /* Further reduce image height for very small screens */
312 | }
313 |
314 | .details {
315 | align-items: center;
316 | }
317 |
318 | .product h3,
319 | .product p {
320 | font-size: 1rem;
321 | text-align: center;
322 | }
323 |
324 | /* Navbar Adjustments */
325 | .nav-links,
326 | .lastlink {
327 | flex-direction: column;
328 | gap: 15px;
329 | }
330 |
331 | .nav-toggle {
332 | display: block;
333 | font-size: 1.5rem;
334 | }
335 |
336 | .nav-links.active,
337 | .lastlink.active {
338 | display: flex;
339 | }
340 |
341 | .footer-container {
342 | flex-direction: column;
343 | padding: 10px;
344 | text-align: center;
345 | }
346 |
347 | .footer-info h2 {
348 | font-size: 1.2rem;
349 | }
350 |
351 | .social-icons {
352 | flex-wrap: wrap;
353 | }
354 | }
355 |
356 | /* CSS for Scroll to Top Button */
357 | #scrollBtn {
358 | position: fixed;
359 | bottom: 20px;
360 | right: 20px;
361 | display: none;
362 | background-color: #007BFF;
363 | color: white;
364 | border: none;
365 | border-radius: 50%;
366 | padding: 15px;
367 | font-size: 18px;
368 | cursor: pointer;
369 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
370 | pointer-events: auto;
371 | transition: background-color 0.3s ease, transform 0.3s ease;
372 | }
373 |
374 | #scrollBtn:hover {
375 | background-color: #0056b3;
376 | transform: scale(1.2);
377 | }
378 |
--------------------------------------------------------------------------------
/catalog.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Wool Product Catalog
7 |
8 |
9 |
16 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
37 |
38 |
39 |
43 |
44 |
45 |
☰
46 |
47 |
48 |
57 |
59 |
63 |
64 |
65 |
66 |
67 |
68 |
Add to Cart
69 |
70 |
71 |
Wool Product 1
72 |
₹100.00
73 |
74 |
75 |
76 |
77 |
78 |
Add to Cart
79 |
80 |
81 |
Wool Product 2
82 |
₹220.00
83 |
84 |
85 |
86 |
87 |
88 |
Add to Cart
89 |
90 |
91 |
Wool Product 3
92 |
₹340.00
93 |
94 |
95 |
96 |
97 |
98 |
Add to Cart
99 |
100 |
101 |
Wool Product 4
102 |
₹490.00
103 |
104 |
105 |
106 |
107 |
108 |
Add to Cart
109 |
110 |
111 |
Wool Product 5
112 |
₹550.00
113 |
114 |
115 |
116 |
117 |
118 |
Add to Cart
119 |
120 |
121 |
Wool Product 6
122 |
₹600.00
123 |
124 |
125 |
126 |
127 |
128 |
Add to Cart
129 |
130 |
131 |
Wool Product 7
132 |
₹730.00
133 |
134 |
135 |
136 |
137 |
138 |
164 |
165 |
166 |
168 |
169 |
170 |
198 |
199 |
--------------------------------------------------------------------------------
/catalog.js:
--------------------------------------------------------------------------------
1 | // Sample product image URLs
2 | const productImages = [
3 | ];
4 |
5 | // Function to create product listings with images
6 | function createProductListings() {
7 | const productContainer = document.querySelector(".product-list");
8 |
9 | productImages.forEach((imageUrl) => {
10 | const productCard = document.createElement("div");
11 | productCard.classList.add("product-card");
12 |
13 | const productImage = document.createElement("img");
14 | productImage.src = imageUrl;
15 | productImage.alt = "Product Image";
16 |
17 | productCard.appendChild(productImage);
18 | productContainer.appendChild(productCard);
19 | });
20 | }
21 |
22 | // Call the function to create product listings when the page loads
23 | window.addEventListener("load", createProductListings);
24 |
--------------------------------------------------------------------------------
/catalog2.css:
--------------------------------------------------------------------------------
1 | /* Global Styles */
2 | body,
3 | html {
4 | margin: 0;
5 | padding: 0;
6 | font-family: "Arial", sans-serif;
7 | box-sizing: border-box;
8 | scroll-behavior: smooth;
9 | }
10 |
11 | .container {
12 | width: 100%;
13 | margin: 0 auto;
14 | }
15 |
16 | /* Navbar */
17 | .navcontainer {
18 | width: 100%;
19 | display: flex;
20 | align-items: center;
21 | justify-content: space-between;
22 | padding: 0 2%;
23 | margin: 0 auto;
24 | }
25 |
26 | .navbar {
27 | background: linear-gradient(to right, #0f0f0f, #1b1b1b);
28 | display: flex;
29 | justify-content: space-between;
30 | align-items: center;
31 | padding: 15px 20px;
32 | top: 0;
33 | z-index: 1000;
34 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
35 | }
36 |
37 | .logo img {
38 | height: 50px;
39 | width: 50px;
40 | border-radius: 50%;
41 | }
42 |
43 | .nav-links {
44 | display: flex;
45 | gap: 30px;
46 | list-style: none;
47 | }
48 |
49 | .nav-links li a {
50 | text-decoration: none;
51 | color: #fff;
52 | font-size: 16px;
53 | transition: color 0.3s ease, transform 0.3s ease;
54 | }
55 |
56 | .nav-links li a:hover {
57 | color: #ee0653;
58 | transform: scale(1.1);
59 | }
60 |
61 | .lastlink ul {
62 | display: flex;
63 | gap: 10px;
64 | list-style: none;
65 | }
66 |
67 | .lastlink a {
68 | color: #fff;
69 | text-decoration: none;
70 | border: 1px solid #fff;
71 | padding: 5px 15px;
72 | border-radius: 5px;
73 | transition: all 0.4s ease-in-out;
74 | }
75 |
76 | .lastlink a:hover {
77 | background: #ee0653;
78 | color: #fff;
79 | border: 1px solid #ee0653;
80 | }
81 |
82 | /* Mobile Navbar Toggle */
83 | .nav-toggle {
84 | display: none;
85 | font-size: 1.8rem;
86 | color: #fff;
87 | background: none;
88 | border: none;
89 | cursor: pointer;
90 | }
91 |
92 | .product-list {
93 | display: grid;
94 | grid-template-columns: repeat(4, 1fr);
95 | gap: 20px;
96 | padding: 40px 5%;
97 | }
98 |
99 | .product {
100 | background-color: #fff;
101 | border: 1px solid #ddd;
102 | padding: 20px;
103 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
104 | text-align: center;
105 | position: relative;
106 | overflow: hidden;
107 | border-radius: 15px;
108 | transition: transform 0.3s ease, box-shadow 0.3s ease;
109 | }
110 |
111 | .product:hover {
112 | transform: translateY(-5px);
113 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
114 | }
115 |
116 | .image-container {
117 | position: relative;
118 | display: inline-block;
119 | perspective: 1000px; /* Enables the flipping effect */
120 | }
121 |
122 | .image-container .product-info {
123 | position: absolute;
124 | top: 0;
125 | left: 0;
126 | right: 0;
127 | bottom: 0;
128 | backface-visibility: hidden; /* Hides the front face when flipped */
129 | display: flex;
130 | flex-direction: column;
131 | justify-content: center;
132 | align-items: center;
133 | padding: 10px;
134 | background-color: #fff;
135 | border-radius: 15px;
136 | transition: transform 0.6s ease;
137 | }
138 |
139 | .image-container:hover .product-info {
140 | transform: rotateY(180deg);
141 | }
142 |
143 | .image-container .product-info .description {
144 | display: none; /* Hide description by default */
145 | }
146 |
147 | .image-container:hover .product-info .description {
148 | display: block; /* Show description when image is flipped */
149 | }
150 |
151 | .image-container img {
152 | max-width: 100%;
153 | height: 250px;
154 | border: 1px solid #ccc;
155 | border-radius: 15px;
156 | transition: transform 0.6s ease;
157 | backface-visibility: hidden;
158 | }
159 |
160 | .image-container:hover img {
161 | transform: rotateY(180deg);
162 | }
163 |
164 | .details {
165 | display: flex;
166 | justify-content: space-between;
167 | align-items: center;
168 | margin-top: 15px;
169 | }
170 |
171 | .product h3 {
172 | font-size: 1.1rem;
173 | text-align: left;
174 | color: #333;
175 | }
176 |
177 | .product p {
178 | font-size: 1rem;
179 | font-weight: bold;
180 | color: black;
181 | text-align: justify;
182 | }
183 |
184 | /* Footer */
185 | .footer {
186 | background: #0f0f0f;
187 | color: #fff;
188 | padding: 20px 0;
189 | text-align: center;
190 | }
191 |
192 | .footer-container {
193 | display: flex;
194 | justify-content: center;
195 | flex-wrap: wrap;
196 | gap: 20px;
197 | }
198 |
199 | .footer-info h2 {
200 | font-size: 1.5rem;
201 | margin-bottom: 10px;
202 | }
203 |
204 | .footer-info p {
205 | margin: 5px 0;
206 | }
207 |
208 | .social-icons {
209 | display: flex;
210 | justify-content: center;
211 | gap: 15px;
212 | }
213 |
214 | .social-icon {
215 | color: #fff;
216 | font-size: 1.5rem;
217 | transition: color 0.3s ease, transform 0.3s ease;
218 | }
219 |
220 | .social-icon:hover {
221 | color: #ee0653;
222 | transform: scale(1.2);
223 | }
224 |
225 | .copyright {
226 | margin-top: 10px;
227 | font-size: 0.9rem;
228 | }
229 |
230 | /* Responsive Design */
231 | @media (max-width: 1059px) {
232 | .product-list {
233 | grid-template-columns: repeat(2, 1fr);
234 | gap: 15px;
235 | }
236 |
237 | .product {
238 | padding: 15px;
239 | }
240 |
241 | .image-container img {
242 | height: 200px;
243 | }
244 | }
245 |
246 | @media (max-width: 700px) {
247 | .product-list {
248 | grid-template-columns: 1fr;
249 | gap: 10px;
250 | }
251 |
252 | .product {
253 | padding: 10px;
254 | }
255 |
256 | .image-container img {
257 | height: 150px;
258 | }
259 |
260 | .nav-links,
261 | .lastlink {
262 | flex-direction: column;
263 | gap: 15px;
264 | }
265 |
266 | .nav-toggle {
267 | display: block;
268 | }
269 |
270 | .footer-container {
271 | flex-direction: column;
272 | text-align: center;
273 | }
274 | }
275 |
276 | /* CSS for Scroll to Top Button */
277 | #scrollBtn {
278 | position: fixed;
279 | bottom: 20px;
280 | right: 20px;
281 | display: none;
282 | background-color: #007BFF;
283 | color: white;
284 | border: none;
285 | border-radius: 50%;
286 | padding: 15px;
287 | font-size: 18px;
288 | cursor: pointer;
289 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
290 | pointer-events: auto;
291 | transition: background-color 0.3s ease, transform 0.3s ease;
292 | }
293 |
294 | #scrollBtn:hover {
295 | background-color: #0056b3;
296 | transform: scale(1.2);
297 | }
--------------------------------------------------------------------------------
/catalog2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Wool Product Catalog
7 |
8 |
15 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
35 |
36 |
37 |
☰
38 |
39 |
40 |
48 |
49 |
50 |
56 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
Cashmere Wool Sweater
72 |
73 | Soft and luxurious cashmere wool sweater, perfect for chilly evenings and stylish occasions.
74 |
75 |
₹150.00
76 |
Add to Cart
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
Merino Wool Scarf
92 |
93 | Lightweight and breathable, this Merino wool scarf is ideal for layering during colder months.
94 |
95 |
₹200.00
96 |
Add to Cart
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
Alpaca Wool Hat
112 |
113 | Stay warm with this beautifully crafted alpaca wool hat, a perfect blend of warmth and style.
114 |
115 |
₹300.00
116 |
Add to Cart
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
Organic Wool Blanket
132 |
133 | A sustainable choice, this organic wool blanket provides warmth and comfort for restful nights.
134 |
135 |
₹340.00
136 |
Add to Cart
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
Wool Knit Socks
152 |
153 | Keep your feet cozy and stylish with these high-quality wool-knit socks, perfect for any cold weather.
154 |
155 |
₹400.00
156 |
Add to Cart
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
Lambswool Throw
172 |
173 | A super-soft lambswool throw to add a touch of luxury and warmth to your living room or bedroom.
174 |
175 |
₹500.00
176 |
Add to Cart
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
Woolen Cardigan
192 |
193 | This woolen cardigan provides comfort and elegance with its soft texture and versatile style.
194 |
195 |
₹650.00
196 |
Add to Cart
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
Wool Woolen Mittens
212 |
213 | Keep your hands warm in style with these woolen mittens, designed for both comfort and fashion.
214 |
215 |
₹500.00
216 |
Add to Cart
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
244 |
245 |
246 |
248 |
249 |
277 |
278 |
279 |
--------------------------------------------------------------------------------
/contact.css:
--------------------------------------------------------------------------------
1 | /* Global Styles */
2 | body {
3 | font-family: "Arial", sans-serif;
4 | margin: 0;
5 | padding: 0;
6 | background: linear-gradient(
7 | 135deg,
8 | #ffffff,
9 | #ffffff,
10 | #ffffff
11 | ); /* Vibrant gradient background */
12 | background-size: 400% 400%; /* Smooth gradient transition */
13 | animation: gradientShift 8s ease infinite; /* Gradual background animation */
14 | color: #333;
15 | }
16 |
17 | header {
18 | background: linear-gradient(
19 | 90deg,
20 | #262424,
21 | #262424
22 | ); /* Darker gradient header */
23 | color: #fff;
24 | text-align: center;
25 | padding: 20px 0;
26 | border-bottom: 4px solid #000000;
27 | }
28 |
29 | header h1 {
30 | margin: 0;
31 | font-size: 2rem;
32 | text-transform: uppercase;
33 | letter-spacing: 2px;
34 | }
35 |
36 | main {
37 | max-width: 800px;
38 | margin: 20px auto;
39 | padding: 20px;
40 | background: linear-gradient(
41 | 145deg,
42 | #fff4e6,
43 | #fef4f0
44 | ); /* Soft gradient for form background */
45 | border-radius: 12px; /* Rounded corners */
46 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
47 | border: 1px solid #ddd;
48 | position: relative; /* For button positioning */
49 | animation: fadeIn 1.5s ease-out; /* Form fade-in animation */
50 | }
51 |
52 | .form-group {
53 | margin-bottom: 20px;
54 | }
55 |
56 | label {
57 | display: block;
58 | font-weight: bold;
59 | margin-bottom: 10px;
60 | color: #555;
61 | }
62 |
63 | input[type="text"],
64 | input[type="email"],
65 | input[type="tel"],
66 | select,
67 | textarea {
68 | width: 100%;
69 | padding: 10px;
70 | border: 1px solid #ddd;
71 | border-radius: 4px;
72 | font-size: 1rem;
73 | background-color: #f8f8f8; /* Light background for input fields */
74 | box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
75 | transition: all 0.3s ease;
76 | }
77 |
78 | input:focus,
79 | textarea:focus {
80 | border-color: #413e3f;
81 | outline: none;
82 | box-shadow: 0 0 8px rgba(22, 21, 22, 0.5); /* Glow effect on focus */
83 | }
84 |
85 | textarea {
86 | height: 120px;
87 | }
88 |
89 | /* Submit Button */
90 | /* Submit Button */
91 | .submit {
92 | background: linear-gradient(
93 | 90deg,
94 | #000000
95 | ); /* Black, Green, Yellow gradient */
96 | color: #fff;
97 | padding: 15px 30px;
98 | border: none;
99 | border-radius: 30px; /* Rounded corners for button */
100 | font-size: 1.2rem;
101 | font-weight: bold;
102 | text-transform: uppercase;
103 | cursor: pointer;
104 | margin-top: 20px;
105 | display: block;
106 | width: 50%;
107 | margin-left: auto;
108 | margin-right: auto; /* Center button horizontally */
109 | transition: all 0.3s ease;
110 | animation: bounce 1.5s infinite; /* Bounce animation for attention */
111 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Shadow for depth */
112 | }
113 |
114 | .submit:hover {
115 | transform: scale(1.1); /* Zoom-in effect on hover */
116 | box-shadow: 0 10px 20px rgba(0, 183, 18, 0.6); /* Glow effect with green tint */
117 | background: linear-gradient(
118 | 90deg,
119 | #000000
120 | );
121 |
122 | }
123 |
124 | .submit:active {
125 | transform: scale(0.95); /* Shrink effect on click */
126 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Darker shadow on click */
127 | }
128 |
129 | /* adding tooltips */
130 | .tooltip {
131 | visibility: hidden;
132 | color: #fff;
133 | width: 200px;
134 | text-align: center;
135 | padding: 5px;
136 | border-radius: 5px;
137 | position: relative;
138 | z-index: 1;
139 | bottom: 40px;
140 | left: 60%;
141 | transform: translateX(-50%);
142 | opacity: 0;
143 | transition: opacity 0.3s;
144 | font-size: 14px;
145 | }
146 |
147 | .form-group:hover .tooltip {
148 | visibility: visible;
149 | opacity: 1;
150 | }
151 |
152 | /* Animations */
153 | @keyframes bounce {
154 | 0%,
155 | 100% {
156 | transform: translateY(0);
157 | }
158 | 50% {
159 | transform: translateY(-8px);
160 | }
161 | }
162 |
163 | /* Footer Styling */
164 | footer {
165 | background: linear-gradient(
166 | 90deg,
167 | #6a0572,
168 | #a40606
169 | ); /* Dark gradient footer */
170 | color: #fff;
171 | text-align: center;
172 | padding: 10px 0;
173 | margin-top: 20px;
174 | border-top: 4px solid #383637;
175 | }
176 |
177 | /* Animations */
178 | @keyframes gradientShift {
179 | 0% {
180 | background-position: 0% 50%;
181 | }
182 | 50% {
183 | background-position: 100% 50%;
184 | }
185 | 100% {
186 | background-position: 0% 50%;
187 | }
188 | }
189 |
190 | @keyframes fadeIn {
191 | from {
192 | opacity: 0;
193 | transform: translateY(-10px);
194 | }
195 | to {
196 | opacity: 1;
197 | transform: translateY(0);
198 | }
199 | }
200 |
201 | @keyframes pulse {
202 | 0%,
203 | 100% {
204 | transform: scale(1);
205 | }
206 | 50% {
207 | transform: scale(1.05);
208 | }
209 | }
210 |
211 | /* Scroll button styles */
212 | #scrollBtn {
213 | position: fixed;
214 | bottom: 20px;
215 | right: 20px;
216 | display: none;
217 | background-color: #007bff;
218 | color: white;
219 | border: none;
220 | border-radius: 50%;
221 | padding: 15px;
222 | font-size: 18px;
223 | cursor: pointer;
224 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
225 | transition: background-color 0.3s ease, transform 0.3s ease;
226 | }
227 |
228 | #scrollBtn i {
229 | pointer-events: none;
230 | transition: transform 0.3s ease;
231 | }
232 |
233 | /* Hover effect */
234 | #scrollBtn:hover {
235 | background-color: #0056b3;
236 | transform: scale(1.1); /* Slightly enlarges the button */
237 | }
238 |
239 | #scrollBtn:hover i {
240 | transform: scale(1.2); /* Slightly enlarges the icon */
241 | }
242 |
243 | /* footer section */
244 | .footer {
245 | background: #000000;
246 | color: #fff;
247 | text-align: center;
248 | z-index: 5;
249 | min-height: 100px;
250 | }
251 |
252 | .footer-container {
253 | display: flex;
254 | justify-content: center;
255 | flex-wrap: wrap;
256 | gap: 20px;
257 | }
258 |
259 | .footer-info {
260 | max-width: 400px;
261 | }
262 |
263 | .social-icons {
264 | display: flex;
265 | justify-content: center;
266 | gap: 10px;
267 | }
268 |
269 | .social-icon {
270 | color: #fff;
271 | font-size: 1.2rem;
272 | transition: color 0.3s ease;
273 | padding-bottom: 10px;
274 | }
275 |
276 | .social-icon:hover {
277 | color: #000000;
278 | }
279 |
280 | .copyright {
281 | font-size: 0.9rem;
282 | padding: 1px 10px;
283 | background-color: #222;
284 | }
285 |
286 | .social-icons {
287 | display: flex;
288 | justify-content: center;
289 | gap: 10px;
290 | }
291 |
292 | .social-icon {
293 | color: #fff;
294 | font-size: 1.2rem;
295 | transition: color 0.3s ease;
296 | padding-bottom: 10px;
297 | }
298 |
299 | .social-icon:hover {
300 | color: #3e3636;
301 | }
302 |
303 | .copyright {
304 | font-size: 0.9rem;
305 | padding: 1px 10px;
306 | background-color: #222;
307 | }
308 |
309 | @media (max-width: 768px) {
310 | .footer-container {
311 | flex-direction: column;
312 | text-align: center;
313 | }
314 | }
315 |
--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Contact Us
7 |
8 |
9 |
10 |
17 |
21 |
22 |
23 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
42 |
43 |
44 |
51 |
52 |
53 |
☰
54 |
55 |
56 |
65 |
67 |
68 |
71 |
72 |
73 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
157 |
158 |
159 |
160 |
161 |
166 |
175 |
176 |
177 |
178 |
179 |
181 |
182 |
213 |
214 |
215 |
--------------------------------------------------------------------------------
/contributors/contributor.css:
--------------------------------------------------------------------------------
1 | /* Basic Reset */
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | }
7 |
8 | body {
9 | font-family: Arial, sans-serif;
10 | color: #fff;
11 | min-height: 100vh;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | justify-content: flex-start;
16 | padding: 20px;
17 | overflow-x: hidden;
18 | position: relative;
19 | }
20 |
21 | body::before {
22 | content: "";
23 | position: absolute;
24 | top: 0;
25 | left: 0;
26 | width: 100%;
27 | height: 100%;
28 | background: url('../images/raSxSYFwHiyY36AmSkBQQ-transformed.png') no-repeat center center fixed;
29 | background-size: cover;
30 | filter: blur(10px);
31 | z-index: -1;
32 | transform: scale(1.1);
33 | }
34 |
35 | h1 {
36 | font-size: 2.5rem;
37 | color: #ffffff;
38 | margin-bottom: 30px;
39 | font-weight: bold;
40 | letter-spacing: 1.5px;
41 | text-align: center;
42 | text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
43 | }
44 |
45 | /* Contributor Card Grid */
46 | .contributors-grid {
47 | display: grid;
48 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
49 | gap: 20px;
50 | justify-content: center;
51 | width: 100vw;
52 | max-width: 1200px;
53 | padding: 20px;
54 | }
55 |
56 | /* Contributor Card Styling */
57 | .contributor-card {
58 | background: rgba(255, 255, 255, 0.1);
59 | backdrop-filter: blur(10px);
60 | border-radius: 15px;
61 | padding: 20px;
62 | width: 100%;
63 | max-width: 280px;
64 | box-shadow: 0 5px 20px rgba(132, 129, 129, 0.2);
65 | text-align: center;
66 | transition: transform 0.3s ease, box-shadow 0.3s ease;
67 | position: relative;
68 | border: 2px solid transparent;
69 | animation: pulse 2s infinite;
70 | }
71 |
72 | .contributor-card:hover {
73 | transform: translateY(-8px);
74 | box-shadow: 0 10px 30px rgba(97, 93, 93, 0.3);
75 | border: 2px solid #0f0f0f;
76 | }
77 |
78 | .contributor-card img {
79 | width: 120px;
80 | height: 120px;
81 | border-radius: 50%;
82 | border: 4px solid #0e0e0e;
83 | transition: transform 0.3s ease;
84 | margin-bottom: 15px;
85 | }
86 |
87 | .contributor-card img:hover {
88 | transform: scale(1.1) rotate(5deg);
89 | }
90 |
91 | .contributor-card h3 {
92 | font-size: 1.5rem;
93 | margin: 10px 0;
94 | color: #222;
95 | font-weight: bold;
96 | letter-spacing: 1px;
97 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
98 | }
99 |
100 | .contributor-card p {
101 | font-size: 0.95rem;
102 | color: #666;
103 | margin-top: 8px;
104 | line-height: 1.4;
105 | }
106 |
107 | .contributor-card a {
108 | display: inline-block;
109 | margin-top: 10px;
110 | padding: 8px 15px;
111 | font-size: 0.9rem;
112 | text-decoration: none;
113 | color: #fff;
114 | background: #1e1d1c;
115 | border-radius: 5px;
116 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
117 | transition: background 0.3s ease, transform 0.3s ease;
118 | }
119 |
120 | .contributor-card a:hover {
121 | background: #161614;
122 | transform: translateY(-3px);
123 | }
124 |
125 | /* Certificate Button Styling */
126 | .certificate-button {
127 | background: linear-gradient(to right, #0f0f0f, #0f0f0f); /* Warm cream gradient */
128 | color: #fff; /* Black text */
129 | font-size: 12px;
130 | font-weight: bold;
131 | padding: 12px 20px;
132 | border: 2px solid #0f0f0f; /* Dark brown border */
133 | border-radius: 8px;
134 | cursor: pointer;
135 | transition: all 0.3s ease-in-out;
136 | outline: none;
137 | text-transform: uppercase;
138 | box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
139 | margin-top: 10px; /* Added margin to create space between buttons */
140 | }
141 |
142 | .certificate-button:hover {
143 | background: linear-gradient(to right, #0f0f0f, #0f0f0f); /* Softer cream */
144 | color: #fff; /* Dark brown text */
145 | box-shadow: 5px 5px 15px rgba(129, 126, 126, 0.3);
146 | transform: scale(1.05);
147 | }
148 |
149 | .certificate-button:active {
150 | transform: scale(0.98);
151 | box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
152 | }
153 |
154 | /* Dynamic Pulse Animation */
155 | @keyframes pulse {
156 | 0% {
157 | transform: scale(1);
158 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
159 | }
160 | 50% {
161 | transform: scale(1.04);
162 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
163 | }
164 | 100% {
165 | transform: scale(1);
166 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
167 | }
168 | }
169 |
170 | /* Scroll to Top Button */
171 | #scrollBtn {
172 | position: fixed;
173 | bottom: 20px;
174 | right: 20px;
175 | display: none;
176 | background-color: #007BFF;
177 | color: white;
178 | border: none;
179 | border-radius: 50%;
180 | padding: 15px;
181 | font-size: 18px;
182 | cursor: pointer;
183 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
184 | transition: background-color 0.3s ease, transform 0.3s ease;
185 | }
186 |
187 | #scrollBtn:hover {
188 | background-color: #0056b3;
189 | transform: scale(1.2);
190 | }
191 |
192 | /* Footer */
193 | .footer {
194 | background: #000000;
195 | color: #fff;
196 | text-align: center;
197 | z-index: 5;
198 | min-height: 100px;
199 | }
200 |
201 | .footer-container {
202 | display: flex;
203 | justify-content: center;
204 | flex-wrap: wrap;
205 | gap: 20px;
206 | }
207 |
208 | .footer-info {
209 | max-width: 400px;
210 | }
211 |
212 | .social-icons {
213 | display: flex;
214 | justify-content: center;
215 | gap: 10px;
216 | }
217 |
218 | .social-icon {
219 | color: #fff;
220 | font-size: 1.2rem;
221 | transition: color 0.3s ease;
222 | padding-bottom: 10px;
223 | }
224 |
225 | .social-icon:hover {
226 | color: #3e3636;
227 | }
228 |
229 | .auth-button {
230 | color: #fff;
231 | text-decoration: none;
232 | border: 1px solid #fff;
233 | padding: 5px 10px;
234 | border-radius: 5px;
235 | transition: all 0.5s ease-in-out;
236 | }
237 |
238 | .auth-button:hover {
239 | background: #fff;
240 | color: #000000;
241 | }
242 |
--------------------------------------------------------------------------------
/contributors/contributor.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Contributors Page
7 |
8 |
9 |
10 |
17 |
21 |
22 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
172 |
173 |
174 |
178 |
179 |
180 |
☰
181 |
182 |
183 |
192 |
194 |
195 |
196 |
Contributors of Woolconnect
197 |
198 |
199 |
200 |
201 |
203 |
204 |
205 |
253 |
254 |
255 |
256 |
257 |
262 |
271 |
272 |
273 |
281 |
299 |
300 |
301 |
302 |
--------------------------------------------------------------------------------
/contributors/contributor.js:
--------------------------------------------------------------------------------
1 | const REPO_OWNER = "vishantrathi";
2 | const REPO_NAME = "woolconnect";
3 | const GITHUB_TOKEN = ""; // Optional: Add your GitHub personal access token to avoid rate limits
4 |
5 | async function fetchContributors() {
6 | const contributorsContainer = document.getElementById("contributors");
7 | const canvas = document.createElement("canvas"); // Create a hidden canvas for certificate generation
8 | const ctx = canvas.getContext("2d");
9 |
10 |
11 |
12 | try {
13 | // Fetch contributors from the GitHub API
14 | const response = await fetch(
15 | `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contributors?per_page=100`,
16 | {
17 | headers: GITHUB_TOKEN ? { Authorization: `token ${GITHUB_TOKEN}` } : {},
18 | }
19 | );
20 |
21 |
22 |
23 | if (!response.ok) {
24 | const errorDetails = await response.text();
25 | throw new Error(`Failed to fetch contributors: ${errorDetails}`);
26 |
27 |
28 | }
29 |
30 | const contributors = await response.json();
31 |
32 | contributors.forEach((contributor) => {
33 | // Create a card for each contributor
34 | const card = document.createElement("div");
35 | card.className = "contributor-card";
36 |
37 | // Profile image
38 | const img = document.createElement("img");
39 | img.src = contributor.avatar_url;
40 | img.alt = contributor.login;
41 |
42 |
43 |
44 | // GitHub username
45 | const name = document.createElement("h5");
46 | name.textContent = contributor.login;
47 |
48 | // GitHub profile link
49 | const githubLink = document.createElement("a");
50 | githubLink.href = contributor.html_url;
51 | githubLink.target = "_blank";
52 | githubLink.textContent = "GitHub Profile";
53 |
54 |
55 |
56 | // Generate Certificate Button
57 | const button = document.createElement("button");
58 | button.textContent = "Certificate";
59 | button.classList.add("certificate-button"); // Apply styling
60 | button.addEventListener("click", () => {
61 | generateCertificate(contributor.login, contributor.avatar_url);
62 | });
63 |
64 | // Append elements to card
65 | card.appendChild(img);
66 | card.appendChild(name);
67 | card.appendChild(githubLink);
68 | card.appendChild(button);
69 |
70 |
71 |
72 | // Append card to container
73 | contributorsContainer.appendChild(card);
74 | });
75 |
76 | // Function to generate a certificate
77 | function generateCertificate(username, avatarUrl) {
78 | // Set canvas size
79 | canvas.width = 1600;
80 | canvas.height = 1000;
81 |
82 | // Background gradient (shades of gray)
83 | const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
84 | gradient.addColorStop(0, "#f0f0f0"); // Light gray
85 | gradient.addColorStop(1, "#ffffff"); // White
86 | ctx.fillStyle = gradient;
87 | ctx.fillRect(0, 0, canvas.width, canvas.height);
88 |
89 | // Decorative border (light gray)
90 | ctx.strokeStyle = "#d3d3d3"; // Light gray
91 | ctx.lineWidth = 20;
92 | ctx.strokeRect(50, 50, canvas.width - 100, canvas.height - 100);
93 |
94 | // Certificate title (dark gray)
95 | ctx.fillStyle = "#333333"; // Dark gray for text
96 | ctx.font = "bold 80px Georgia";
97 | ctx.textAlign = "center";
98 | ctx.fillText("Certificate of Contribution", canvas.width / 2, 150);
99 |
100 | // Decorative underline (dark gray)
101 | ctx.strokeStyle = "#333333"; // Dark gray
102 | ctx.lineWidth = 5;
103 | ctx.beginPath();
104 | ctx.moveTo(canvas.width / 2 - 400, 180);
105 | ctx.lineTo(canvas.width / 2 + 400, 180);
106 | ctx.stroke();
107 |
108 | // Add user's GitHub image (circular)
109 | const image = new Image();
110 | image.crossOrigin = "Anonymous";
111 | image.src = avatarUrl;
112 | image.onload = () => {
113 | const imageSize = 200;
114 | ctx.save();
115 | ctx.beginPath();
116 | ctx.arc(canvas.width / 2, 300, imageSize / 2, 0, Math.PI * 2);
117 | ctx.clip();
118 | ctx.drawImage(
119 | image,
120 | canvas.width / 2 - imageSize / 2,
121 | 200,
122 | imageSize,
123 | imageSize
124 | );
125 | ctx.restore();
126 |
127 | // GitHub username under the image (dark gray)
128 | ctx.font = "bold 50px Arial";
129 | ctx.fillStyle = "#333333"; // Dark gray for username
130 | ctx.fillText(username, canvas.width / 2, 500);
131 |
132 | // Certificate content (light gray)
133 | ctx.font = "35px Arial";
134 | const content = `This certificate is proudly presented to ${username} for their valuable
135 | contribution to Wool_Connect in Social Winter of Code (SWoC)
136 | from January 1, 2025 to March 1, 2025.`;
137 | const contentLines = content.split("\n");
138 | contentLines.forEach((line, index) => {
139 | ctx.fillText(line.trim(), canvas.width / 2, 600 + index * 40);
140 | });
141 |
142 | // Signature with decorative underline (dark gray)
143 | ctx.font = "italic 30px Georgia";
144 | ctx.fillText("Vishant Rathi", canvas.width / 1.5, 850);
145 | ctx.strokeStyle = "#333333"; // Dark gray
146 | ctx.lineWidth = 2;
147 | ctx.beginPath();
148 | ctx.moveTo(canvas.width / 1.5 - 150, 860);
149 | ctx.lineTo(canvas.width / 1.5 + 150, 860);
150 | ctx.stroke();
151 |
152 | // Generated date (dark gray)
153 | const date = new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString();
154 | ctx.font = "25px Arial";
155 | ctx.fillText(`Generated on: ${date}`, canvas.width / 5, 900);
156 |
157 | // Open the certificate in a new tab and display the certificate image
158 | const certWindow = window.open("", "_blank");
159 | certWindow.document.write(`
160 |
161 |
162 |
Certificate of Contribution
163 |
194 |
195 |
196 |
Certificate of Contribution
197 |
198 |
199 |
Download Certificate
200 |
208 |
209 |
210 | `);
211 | };
212 | }
213 | } catch (error) {
214 | console.error("Error fetching contributors:", error);
215 |
216 | // Show error message on the page
217 | const errorMessage = document.createElement("p");
218 | contributorsContainer.innerHTML = "
Failed to load contributors. Please check your internet connection or try again later.
";
219 | contributorsContainer.appendChild(errorMessage);
220 | }
221 | }
222 |
223 | // Fetch and render contributors on page load
224 | fetchContributors();
--------------------------------------------------------------------------------
/customer.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/customer.jpeg
--------------------------------------------------------------------------------
/demand.css:
--------------------------------------------------------------------------------
1 | /* Add your CSS styles here */
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | }
7 |
8 | .container {
9 | max-width: 1540px;
10 | }
11 | .logo {
12 | padding-top: 10px;
13 | }
14 | .logo img {
15 | border-radius: 50%;
16 | }
17 | .nav {
18 | display: flex;
19 | padding-left: 30px;
20 | line-height: 40px;
21 | background-color: #333;
22 | }
23 | .nav ul {
24 | display: flex;
25 | gap: 20px;
26 | padding-top: 15px;
27 | }
28 | .nav ul li {
29 | list-style-type: none;
30 | }
31 | .nav ul li a {
32 | text-decoration: none;
33 | color: #fff;
34 | font-size: 20px;
35 | font-weight: 400;
36 | }
37 | .nav > a {
38 | padding-right: 30px;
39 | }
40 | .nav ul li a:hover {
41 | color: #333;
42 | background-color: #fff;
43 | padding: 5px 5px;
44 | }
45 | body {
46 | font-family: Arial, sans-serif;
47 | background-color: #f5f5f5;
48 | margin: 0;
49 | padding: 0;
50 | }
51 |
52 | header {
53 | background-color: #333;
54 | color: #fff;
55 | padding: 10px 0;
56 | }
57 |
58 | nav ul {
59 | list-style-type: none;
60 | text-align: center;
61 | }
62 |
63 | nav ul li {
64 | display: inline;
65 | margin-right: 20px;
66 | }
67 |
68 | nav a {
69 | text-decoration: none;
70 | color: #fff;
71 | font-weight: bold;
72 | }
73 |
74 | /* Container Styles */
75 | .container {
76 | max-width: 960px;
77 | margin: 0 auto;
78 | padding: 20px;
79 | }
80 |
81 | /* Form Styles */
82 | #demandForm {
83 | background-color: #fff;
84 | padding: 20px;
85 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
86 | }
87 |
88 | label {
89 | display: block;
90 | margin-bottom: 10px;
91 | }
92 |
93 | input[type="number"],
94 | input[type="text"] {
95 | width: 100%;
96 | padding: 10px;
97 | margin-bottom: 20px;
98 | border: 1px solid #ccc;
99 | border-radius: 5px;
100 | font-size: 16px;
101 | }
102 |
103 | button[type="submit"] {
104 | background-color: #007bff;
105 | color: #fff;
106 | border: none;
107 | padding: 10px 20px;
108 | font-size: 1rem;
109 | cursor: pointer;
110 | }
111 |
112 | button[type="submit"]:hover {
113 | background-color: #0056b3;
114 | }
115 |
116 | /* Pop-up Styles */
117 | .popup {
118 | display: none;
119 | position: fixed;
120 | top: 0;
121 | left: 0;
122 | width: 100%;
123 | height: 100%;
124 | background-color: rgba(0, 0, 0, 0.5);
125 | z-index: 1000;
126 | }
127 |
128 | .popup-content {
129 | position: absolute;
130 | top: 50%;
131 | left: 50%;
132 | transform: translate(-50%, -50%);
133 | background-color: #fff;
134 | padding: 20px;
135 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
136 | text-align: center;
137 | }
138 |
139 | .close {
140 | position: absolute;
141 | top: 10px;
142 | right: 10px;
143 | font-size: 24px;
144 | cursor: pointer;
145 | }
146 |
147 | .footer {
148 | background-color: #000000;
149 | color: white;
150 | padding: 20px 0 0;
151 | text-align: center;
152 | width: 100%;
153 | }
154 |
155 | .footer-container {
156 | display: flex;
157 | justify-content: center;
158 | flex-wrap: wrap;
159 | gap: 20px;
160 | }
161 |
162 | .footer-info {
163 | max-width: 400px;
164 | }
165 |
166 | .footer-info h2 {
167 | font-size: 24px;
168 | margin-bottom: 10px;
169 | }
170 |
171 | .footer-info p {
172 | font-size: 16px;
173 | line-height: 1.5;
174 | margin-bottom: 15px;
175 | }
176 |
177 | .footer-info a {
178 | color: white;
179 | text-decoration: none;
180 | }
181 |
182 | .footer-info a:hover {
183 | text-decoration: underline;
184 | }
185 |
186 | .copyright {
187 | /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
188 | padding-top: 20px;
189 | font-size: 0.9rem;
190 | background-color: #222;
191 | padding-bottom: 20px;
192 | }
193 |
194 | .social-icons {
195 | display: flex;
196 | justify-content: center;
197 | gap: 10px;
198 | }
199 |
200 | .social-icon {
201 | color: white;
202 | font-size: 1.2rem;
203 | transition: color 0.3s ease;
204 | padding-bottom: 10px;
205 | }
206 |
207 | .social-icon:hover {
208 | color: #3e3636;
209 | }
210 |
211 | /* Responsive adjustments */
212 | @media (max-width: 768px) {
213 | .footer-info h2 {
214 | font-size: 20px;
215 | }
216 |
217 | .footer-info p {
218 | font-size: 14px;
219 | }
220 |
221 | .social-icons {
222 | gap: 15px;
223 | }
224 | }
225 |
226 | /* Styles for the pop-up */
227 | .popup {
228 | display: none;
229 | position: fixed;
230 | top: 0;
231 | left: 0;
232 | width: 100%;
233 | height: 100%;
234 | background-color: rgba(0, 0, 0, 0.5);
235 | z-index: 1000;
236 | }
237 |
238 | .popup-content {
239 | position: absolute;
240 | top: 50%;
241 | left: 50%;
242 | transform: translate(-50%, -50%);
243 | background-color: #fff;
244 | padding: 20px;
245 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
246 | text-align: center;
247 | }
248 |
249 | .close {
250 | position: absolute;
251 | top: 10px;
252 | right: 10px;
253 | font-size: 24px;
254 | cursor: pointer;
255 | }
256 |
257 | /* Scroll button styles */
258 | #scrollBtn {
259 | position: fixed;
260 | bottom: 20px;
261 | right: 20px;
262 | display: none;
263 | background-color: #007bff;
264 | color: white;
265 | border: none;
266 | border-radius: 50%;
267 | padding: 15px;
268 | font-size: 18px;
269 | cursor: pointer;
270 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
271 | transition: background-color 0.3s ease, transform 0.3s ease;
272 | }
273 |
274 | #scrollBtn i {
275 | pointer-events: none;
276 | transition: transform 0.3s ease;
277 | }
278 |
279 | /* Hover effect */
280 | #scrollBtn:hover {
281 | background-color: #0056b3;
282 | transform: scale(1.1); /* Slightly enlarges the button */
283 | }
284 |
285 | #scrollBtn:hover i {
286 | transform: scale(1.2); /* Slightly enlarges the icon */
287 | }
288 |
289 | /* Add any other styles for your form and page as needed */
290 |
--------------------------------------------------------------------------------
/demand.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Wool Demand
7 |
8 |
9 |
10 |
11 |
18 |
22 |
23 |
24 |
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
45 |
52 |
53 |
54 |
61 |
62 |
63 |
☰
64 |
65 |
66 |
75 |
77 |
78 |
Submit Your Wool Demand
79 |
We supply high-quality wool in bulk. Kindly enter your requirements, and our team will get back to you promptly.
80 |
81 |
82 |
91 |
92 |
93 |
99 |
100 |
101 |
102 |
103 |
104 |
152 |
153 |
154 |
155 |
156 |
161 |
170 |
171 |
172 |
173 |
174 |
176 |
177 |
178 |
179 |
180 |
181 |
--------------------------------------------------------------------------------
/demand.js:
--------------------------------------------------------------------------------
1 | // Get the form and popup elements
2 | const demandForm = document.getElementById("demandForm");
3 | const popup = document.getElementById("popup");
4 | const closePopup = document.getElementById("closePopup");
5 |
6 | // Add a submit event listener to the form
7 | demandForm.addEventListener("submit", function (e) {
8 | e.preventDefault(); // Prevent the form from submitting normally
9 |
10 | // Display the popup
11 | popup.style.display = "block";
12 |
13 | // Clear the form (optional)
14 | demandForm.reset();
15 |
16 | // Close the popup when the close button is clicked
17 | closePopup.addEventListener("click", function () {
18 | popup.style.display = "none";
19 | });
20 | });
21 |
22 | const toggleButton = document.getElementById("nav-toggle");
23 | const navLinks = document.getElementById("nav-links");
24 |
25 | toggleButton.addEventListener("click", () => {
26 | navLinks.classList.toggle("active");
27 | });
28 |
29 | // Get the button element
30 | const scrollBtn = document.getElementById('scrollBtn');
31 |
32 | // Show the button when the user scrolls down 20px from the top
33 | window.onscroll = function () {
34 | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
35 | scrollBtn.style.display = "block";
36 | } else {
37 | scrollBtn.style.display = "none";
38 | }
39 | };
40 |
41 | // Scroll to the top of the page when the button is clicked
42 | scrollBtn.onclick = function () {
43 | window.scrollTo({
44 | top: 0,
45 | behavior: "smooth"
46 | });
47 | };
--------------------------------------------------------------------------------
/eco_wool.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/eco_wool.jpeg
--------------------------------------------------------------------------------
/images/51Z4ty8n+-L._SL500_.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/51Z4ty8n+-L._SL500_.jpg
--------------------------------------------------------------------------------
/images/7657a88e50faca3b56a2ee0cf95fa8b7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/7657a88e50faca3b56a2ee0cf95fa8b7.jpg
--------------------------------------------------------------------------------
/images/DALL·E 2023-09-11 20.54.30 - Make exact like this image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/DALL·E 2023-09-11 20.54.30 - Make exact like this image.png
--------------------------------------------------------------------------------
/images/DALL·E 2023-09-11 21.09.54 - A indian farmer with his sheep .png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/DALL·E 2023-09-11 21.09.54 - A indian farmer with his sheep .png
--------------------------------------------------------------------------------
/images/DALL·E 2023-09-11 21.14.10 - A phadi farmer with his sheep.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/DALL·E 2023-09-11 21.14.10 - A phadi farmer with his sheep.png
--------------------------------------------------------------------------------
/images/H_M.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/H_M.jpg
--------------------------------------------------------------------------------
/images/arrowDown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/arrowDown.png
--------------------------------------------------------------------------------
/images/bg.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/bg.mp4
--------------------------------------------------------------------------------
/images/bg1.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/bg1.mp4
--------------------------------------------------------------------------------
/images/c0fc74e37a4dcfc3eaac55862222f02c.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/c0fc74e37a4dcfc3eaac55862222f02c.jpg
--------------------------------------------------------------------------------
/images/depositphotos_328265802-stock-photo-stylish-sweater-on-white-background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/depositphotos_328265802-stock-photo-stylish-sweater-on-white-background.jpg
--------------------------------------------------------------------------------
/images/download.jpeg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/download.jpeg.jpg
--------------------------------------------------------------------------------
/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/favicon.ico
--------------------------------------------------------------------------------
/images/images (1).jpeg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/images (1).jpeg.jpg
--------------------------------------------------------------------------------
/images/images (2).jpeg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/images (2).jpeg.jpg
--------------------------------------------------------------------------------
/images/images (3).jpeg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/images (3).jpeg.jpg
--------------------------------------------------------------------------------
/images/images (4).jpeg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/images (4).jpeg.jpg
--------------------------------------------------------------------------------
/images/images (5).jpeg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/images (5).jpeg.jpg
--------------------------------------------------------------------------------
/images/images (6).jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/images (6).jpg
--------------------------------------------------------------------------------
/images/images.jpeg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/images.jpeg.jpg
--------------------------------------------------------------------------------
/images/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/img2.jpg
--------------------------------------------------------------------------------
/images/img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/img3.jpg
--------------------------------------------------------------------------------
/images/img4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/img4.jpg
--------------------------------------------------------------------------------
/images/img5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/img5.jpg
--------------------------------------------------------------------------------
/images/jean-marc-vieregge-cDKqFb-NOZc-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/jean-marc-vieregge-cDKqFb-NOZc-unsplash.jpg
--------------------------------------------------------------------------------
/images/raSxSYFwHiyY36AmSkBQQ-transformed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/raSxSYFwHiyY36AmSkBQQ-transformed.png
--------------------------------------------------------------------------------
/images/stack-various-sweaters-isolated-white-background_93675-132438.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/stack-various-sweaters-isolated-white-background_93675-132438.png
--------------------------------------------------------------------------------
/images/take-care-of-woolen-clothes.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/take-care-of-woolen-clothes.jpg
--------------------------------------------------------------------------------
/images/woolbg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/woolbg.png
--------------------------------------------------------------------------------
/images/woolen-clothing-250x250.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/images/woolen-clothing-250x250.jpg
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | // Ensure the DOM is fully loaded before executing scripts
2 | document.addEventListener('DOMContentLoaded', () => {
3 | // Navbar Toggle Functionality
4 | const toggleButton = document.getElementById('nav-toggle');
5 | const navLinks = document.getElementById('nav-links');
6 |
7 | if (toggleButton && navLinks) {
8 | toggleButton.addEventListener('click', () => {
9 | navLinks.classList.toggle('active');
10 | });
11 | }
12 |
13 | // Scroll to Top Button Functionality
14 | const scrollBtn = document.getElementById('scrollBtn');
15 |
16 | if (scrollBtn) {
17 | // Show or hide the button based on scroll position
18 | const toggleScrollBtnVisibility = () => {
19 | if (window.scrollY > 20) {
20 | scrollBtn.classList.add('visible');
21 | } else {
22 | scrollBtn.classList.remove('visible');
23 | }
24 | };
25 |
26 | window.addEventListener('scroll', toggleScrollBtnVisibility);
27 |
28 | // Scroll smoothly to the top when the button is clicked
29 | scrollBtn.addEventListener('click', () => {
30 | window.scrollTo({
31 | top: 0,
32 | behavior: 'smooth',
33 | });
34 | });
35 | }
36 |
37 | // Carousel Functionality
38 | const carousels = document.querySelectorAll('.carousel');
39 |
40 | carousels.forEach((carousel) => {
41 | const items = carousel.querySelectorAll('.carousel-item');
42 | const nextButton = carousel.querySelector('.next');
43 | const prevButton = carousel.querySelector('.prev');
44 | let currentIndex = 0;
45 | let carouselInterval;
46 |
47 | if (items.length === 0) return; // Exit if no carousel items
48 |
49 | const updateCarousel = () => {
50 | items.forEach((item, index) => {
51 | item.classList.toggle('active', index === currentIndex);
52 | });
53 | };
54 |
55 | const showNextItem = () => {
56 | currentIndex = (currentIndex + 1) % items.length;
57 | updateCarousel();
58 | };
59 |
60 | const showPrevItem = () => {
61 | currentIndex = (currentIndex - 1 + items.length) % items.length;
62 | updateCarousel();
63 | };
64 |
65 | // Event listeners for next and previous buttons
66 | if (nextButton) {
67 | nextButton.addEventListener('click', () => {
68 | showNextItem();
69 | resetCarouselInterval();
70 | });
71 | }
72 |
73 | if (prevButton) {
74 | prevButton.addEventListener('click', () => {
75 | showPrevItem();
76 | resetCarouselInterval();
77 | });
78 | }
79 |
80 | // Automatic carousel sliding
81 | const startCarouselInterval = () => {
82 | carouselInterval = setInterval(showNextItem, 5000); // Change slide every 5 seconds
83 | };
84 |
85 | const resetCarouselInterval = () => {
86 | clearInterval(carouselInterval);
87 | startCarouselInterval();
88 | };
89 |
90 | updateCarousel();
91 | startCarouselInterval();
92 | });
93 |
94 | // Image Hover Effect for Carousel Items
95 | const carouselImages = document.querySelectorAll('.carousel-item img');
96 |
97 | carouselImages.forEach((img) => {
98 | img.addEventListener('mouseenter', () => {
99 | img.style.filter = 'brightness(1.2)';
100 | img.style.transition = 'filter 0.3s ease';
101 | });
102 |
103 | img.addEventListener('mouseleave', () => {
104 | img.style.filter = 'brightness(1)';
105 | img.style.transition = 'filter 0.3s ease';
106 | });
107 | });
108 |
109 | // Rotating Banner Images
110 | const bannerImages = ['wq1.jpeg', 'wq2.jpeg', 'wq4.jpeg', 'WOOL.jpeg'];
111 | let bannerCurrentIndex = 0;
112 | const bannerImageElement = document.getElementById('x-banner-img');
113 |
114 | if (bannerImageElement) {
115 | const changeBannerImage = () => {
116 | bannerCurrentIndex = (bannerCurrentIndex + 1) % bannerImages.length;
117 | bannerImageElement.src = bannerImages[bannerCurrentIndex];
118 | };
119 |
120 | // Change the banner image every 1.5 seconds
121 | const bannerInterval = setInterval(changeBannerImage, 1500);
122 |
123 | // Optional: Pause banner rotation on hover
124 | bannerImageElement.addEventListener('mouseenter', () => {
125 | clearInterval(bannerInterval);
126 | });
127 |
128 | bannerImageElement.addEventListener('mouseleave', () => {
129 | setInterval(changeBannerImage, 1500);
130 | });
131 | }
132 | });
133 |
134 |
135 | var timl = gsap.timeline()
136 | timl.from(".logo", {
137 | y: -0.5,
138 | opacity: 0,
139 | delay: 1,
140 | duration: 1,
141 | stagger: 0.5
142 | })
143 | timl.from(".auth-buttons", {
144 | y: -20,
145 | opacity: 0,
146 | duration: 1,
147 | })
148 | timl.from(".nav-links li",{
149 | y:-30,
150 | opacity:0,
151 | duration:1,
152 | stagger:0.5
153 | })
154 | timl.from(".banner-content",{
155 | scale:0.2,
156 | opacity:0,
157 | duration:1
158 | })
--------------------------------------------------------------------------------
/login.css:
--------------------------------------------------------------------------------
1 | /* Global Styles */
2 | body {
3 | font-family: Arial, sans-serif;
4 | margin: 0;
5 | padding: 0;
6 | background-color: #f4f4f4;
7 | }
8 |
9 | .container {
10 | max-width: 400px;
11 | margin: 0 auto;
12 | padding: 20px;
13 | background-color: #fff;
14 | border: 1px solid #ddd;
15 | border-radius: 5px;
16 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
17 | }
18 |
19 | form {
20 | text-align: center;
21 | }
22 |
23 | h2 {
24 | margin-top: 0;
25 | }
26 |
27 | .form-group {
28 | margin-bottom: 20px;
29 | text-align: left;
30 | }
31 |
32 | label {
33 | display: block;
34 | font-weight: bold;
35 | }
36 |
37 | input[type="email"],
38 | input[type="password"] {
39 | width: 100%;
40 | padding: 10px;
41 | border: 1px solid #ddd;
42 | border-radius: 4px;
43 | }
44 |
45 | button {
46 | background-color: #333;
47 | color: #fff;
48 | padding: 10px 20px;
49 | border: none;
50 | cursor: pointer;
51 | }
52 |
53 | button:hover {
54 | background-color: #555;
55 | }
56 |
57 | .login-btn {
58 | background-color: #333;
59 | color: #fff;
60 | padding: 10px 20px;
61 | border: none;
62 | border-radius: 20px; /* Rounded corners */
63 | cursor: pointer;
64 | transition: background-color 0.3s ease;
65 | }
66 |
67 | .login-btn:hover {
68 | background-color: #555;
69 | }
70 |
71 | .forgot-password {
72 | text-decoration: none;
73 | color: #333;
74 | }
75 |
76 | .forgot-password:hover {
77 | text-decoration: underline;
78 | }
79 |
--------------------------------------------------------------------------------
/navbar.css:
--------------------------------------------------------------------------------
1 | .navcontainer {
2 | width: 100%;
3 | display: flex;
4 | align-items: center;
5 | justify-content: space-between;
6 | padding: 0 1%;
7 | margin: 0 auto;
8 | }
9 |
10 | .navbar {
11 | background: linear-gradient(to right, #0f0f0f, #1b1b1b);
12 | display: flex;
13 | justify-content: space-between;
14 | align-items: center;
15 | padding: 10px 10px;
16 | top: 0;
17 | z-index: 1000;
18 | }
19 |
20 | .logo img {
21 | height: 50px;
22 | width: 50px;
23 | border-radius: 50%;
24 | }
25 |
26 | .nav-links {
27 | display: flex;
28 | gap: 50px;
29 | list-style: none;
30 | position: relative;
31 | }
32 |
33 | .nav-links li {
34 | position: relative;
35 | }
36 |
37 | .nav-links li a {
38 | text-decoration: none;
39 | color: #fff;
40 | font-size: 16px;
41 | transition: color 0.3s ease;
42 | position: relative;
43 | }
44 |
45 | .nav-links li a::before {
46 | content: "";
47 | position: absolute;
48 | border-radius: 15px;
49 | bottom: -5px;
50 | left: 0;
51 | width: 0%;
52 | height: 2.5px;
53 | background-color: #ee0653;
54 | transition: all 0.5s;
55 | }
56 |
57 | .nav-links li a:hover {
58 | color: #ccc;
59 | }
60 |
61 | .nav-links li a:hover::before {
62 | width: 100%;
63 | }
64 |
65 | .auth-buttons {
66 | display: flex;
67 | gap: 10px;
68 | margin-left: 20px;
69 | }
70 |
71 | .auth-button {
72 | color: #fff;
73 | text-decoration: none;
74 | border: 1px solid #fff;
75 | padding: 5px 10px;
76 | border-radius: 5px;
77 | transition: all 0.5s ease-in-out;
78 | }
79 |
80 | .auth-button:hover {
81 | background: #fff;
82 | color: #000000;
83 | }
84 |
85 | .nav-toggle {
86 | display: none;
87 | font-size: 1.8rem;
88 | color: #fff;
89 | background: none;
90 | border: none;
91 | cursor: pointer;
92 | }
93 |
94 | @media (max-width: 1059px) {
95 | .nav-links, .auth-buttons {
96 | display: none;
97 | flex-direction: column;
98 | position: absolute;
99 | top: 60px;
100 | left: 0;
101 | right: 0;
102 | gap: 20px;
103 | background: rgba(35, 35, 35, 0.95);
104 | text-align: center;
105 | padding: 20px;
106 | z-index: 1001;
107 | }
108 |
109 | .nav-links.active, .auth-buttons.active {
110 | display: flex;
111 | }
112 |
113 | .nav-toggle {
114 | display: block;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/privacy policy.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | transition: all 0.3s ease;
6 | }
7 |
8 | body {
9 | font-family: "Arial", sans-serif;
10 | margin: 0;
11 | padding: 0;
12 | /* background: linear-gradient(to bottom, #333, #444); */
13 | color: #fff;
14 | }
15 | body::before {
16 | content: '';
17 | position: fixed; /* Fix the image to the viewport */
18 | top: 0;
19 | left: 0;
20 | width: 100%;
21 | height: 100%;
22 | background: url('images/jean-marc-vieregge-cDKqFb-NOZc-unsplash.jpg') no-repeat center center fixed;
23 | background-size: cover; /* Ensures the image covers the entire area */
24 | filter: blur(6px); /* Blur the image */
25 | z-index: -1; /* Keep the image behind the content */
26 | }
27 | header {
28 | background: linear-gradient(
29 | to right,
30 | rgba(51, 51, 51, 0.8),
31 | rgba(85, 85, 85, 0.8)
32 | );
33 | color: #fff;
34 | text-align: center;
35 | padding: 30px 0;
36 | position: sticky;
37 | top: 0;
38 | z-index: 100;
39 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
40 | backdrop-filter: blur(10px);
41 | animation: headerSlideDown 1.2s ease-in-out;
42 | }
43 |
44 | header h1 {
45 | margin: 0;
46 | font-size: 2.5rem;
47 | animation: fadeIn 1s ease-in-out;
48 | }
49 |
50 | main {
51 | max-width: 800px;
52 | margin: 30px auto;
53 | padding: 20px;
54 | background-color: rgb(253, 242, 224);
55 | color: #302f2f;
56 | border-radius: 10px;
57 | box-shadow: 0 4px 15px rgba(28, 27, 27, 0.336);
58 | animation: slideIn 1.2s ease-in-out;
59 | }
60 |
61 | .container2 {
62 | background-color: rgba(211, 207, 207, 0.9);
63 | padding: 30px;
64 | border-radius: 10px;
65 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
66 | max-width: 800px;
67 | margin: 20px auto;
68 | }
69 |
70 | .container2 h1 {
71 | text-align: center;
72 | font-weight: bold;
73 | margin-bottom: 20px;
74 | font-size: 2rem;
75 | color: #333;
76 | }
77 |
78 | .container2 section {
79 | margin-bottom: 20px;
80 | }
81 |
82 | .container2 section h2 {
83 | font-weight: bold;
84 | margin-bottom: 10px;
85 | font-size: 1.5rem;
86 | color: #333;
87 | }
88 |
89 | .container2 section p {
90 | color: #6c757d;
91 | line-height: 1.8;
92 | margin-bottom: 15px;
93 | font-size: 1rem;
94 | }
95 |
96 | .container2 section ul {
97 | margin-top: 10px;
98 | margin-left: 20px;
99 | list-style-type: disc;
100 | }
101 |
102 | .container2 section ul li {
103 | margin-bottom: 10px;
104 | color: #555;
105 | }
106 |
107 | h2 {
108 | font-size: 1.8rem;
109 | margin-bottom: 15px;
110 | color: #FFFFFF;
111 | border-bottom: 0px solid #555;
112 | padding-bottom: 5px;
113 | animation: fadeIn 1s ease-in-out;
114 | }
115 |
116 | p {
117 | font-size: 1rem;
118 | line-height: 1.8;
119 | margin-bottom: 10px;
120 | animation: fadeIn 1.2s ease-in-out;
121 | }
122 |
123 | /* footer section */
124 | .footer {
125 | background: #000000;
126 | color: #fff;
127 | text-align: center;
128 | z-index: 5;
129 | min-height: 100px;
130 | }
131 |
132 | .footer h2 {
133 | color: white;
134 | border-bottom: 0px solid transparent;
135 | padding-top: 20px;
136 | padding-bottom:0px ;
137 | }
138 |
139 | .footer-container {
140 | display: flex;
141 | justify-content: center;
142 | flex-wrap: wrap;
143 | gap: 20px;
144 | }
145 |
146 | .footer-info {
147 | max-width: 400px;
148 | margin-bottom: 0px;
149 | font-size: 16px;
150 | }
151 |
152 | .social-icons {
153 | display: flex;
154 | justify-content: center;
155 | gap: 10px;
156 | }
157 |
158 | .social-icon {
159 | color: #fff;
160 | font-size: 1.2rem;
161 | transition: color 0.3s ease;
162 |
163 | }
164 |
165 | .social-icon:hover {
166 | color: #000000;
167 | }
168 |
169 | .copyright {
170 | font-size: 0.9rem;
171 | padding: 1px 10px;
172 | background-color: #222;
173 | }
174 |
175 | .copyright p{
176 | margin-bottom: 10px;
177 | margin-top: 10px;
178 | font-size: 0.9rem;
179 | }
180 |
181 | .social-icons {
182 | display: flex;
183 | justify-content: center;
184 | gap: 10px;
185 | }
186 |
187 | .social-icon {
188 | color: #fff;
189 | font-size: 1.2rem;
190 | transition: color 0.3s ease;
191 | padding-bottom: 10px;
192 | }
193 |
194 | .social-icon:hover {
195 | color: #3e3636;
196 | }
197 |
198 | .copyright {
199 | font-size: 0.9rem;
200 | padding: 1px 10px;
201 | background-color: #222;
202 | }
203 |
204 | @media (max-width: 768px) {
205 | .footer-container {
206 | flex-direction: column;
207 | text-align: center;
208 | }
209 | }
210 | /* Animations */
211 | @keyframes fadeIn {
212 | 0% {
213 | opacity: 0;
214 | }
215 | 100% {
216 | opacity: 1;
217 | }
218 | }
219 |
220 | @keyframes slideIn {
221 | 0% {
222 | transform: translateY(20px);
223 | opacity: 0;
224 | }
225 | 100% {
226 | transform: translateY(0);
227 | opacity: 1;
228 | }
229 | }
230 |
231 | @keyframes headerSlideDown {
232 | 0% {
233 | transform: translateY(-100%);
234 | opacity: 0;
235 | }
236 | 100% {
237 | transform: translateY(0);
238 | opacity: 1;
239 | }
240 | }
241 |
242 |
243 | /* Responsive Design */
244 | @media screen and (max-width: 768px) {
245 | header h1 {
246 | font-size: 2rem;
247 | }
248 |
249 | main {
250 | padding: 15px;
251 | }
252 |
253 | h2 {
254 | font-size: 1.5rem;
255 | }
256 |
257 | p {
258 | font-size: 0.9rem;
259 | }
260 | }
261 |
262 | /* CSS for Scroll to Top Button */
263 | #scrollBtn {
264 | position: fixed;
265 | bottom: 20px;
266 | right: 20px;
267 | display: none;
268 | background-color: #007bff;
269 | color: white;
270 | border: none;
271 | border-radius: 50%;
272 | padding: 15px;
273 | font-size: 18px;
274 | cursor: pointer;
275 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
276 | pointer-events: auto;
277 | transition: background-color 0.3s ease, transform 0.3s ease;
278 | }
279 |
280 | #scrollBtn:hover {
281 | background-color: #0056b3;
282 | transform: scale(1.2);
283 | }
284 |
--------------------------------------------------------------------------------
/research.md:
--------------------------------------------------------------------------------
1 | Research for WoolConnect
2 |
3 | 1. 🏢 Wool Storage and Warehousing
4 |
5 | Efficient wool storage and warehousing are critical components of the supply chain, ensuring that wool remains in good condition until it is processed or sold. Below are key aspects:
6 |
7 | 🔑 Importance of Wool Storage
8 |
9 | Protects wool from environmental factors like moisture, pests, and contamination.
10 |
11 | Maintains quality and grading of wool for higher market value.
12 |
13 | Facilitates bulk storage for seasonal wool production.
14 |
15 | ✅ Best Practices for Wool Storage
16 |
17 | Climate-Controlled Facilities:
18 |
19 | Maintain optimal temperature (10-20°C) and humidity (60-70%) to prevent degradation.
20 |
21 | Use dehumidifiers in high-moisture regions to avoid mold and mildew.
22 |
23 | Pest Control:
24 |
25 | Regular fumigation to prevent infestations from moths and rodents.
26 |
27 | Use mothproofing agents that comply with regulatory standards.
28 |
29 | Packaging:
30 |
31 | Store wool in breathable, durable packaging materials such as jute or cotton bags.
32 |
33 | Avoid plastic packaging that can trap moisture.
34 |
35 | Warehouse Layout:
36 |
37 | Design warehouses with proper ventilation and separate storage areas for different wool grades.
38 |
39 | Implement shelving systems to maximize space and facilitate easy access.
40 |
41 | Technology Integration:
42 |
43 | Use RFID tags and inventory management systems to track wool batches.
44 |
45 | Monitor environmental conditions using IoT-based sensors.
46 |
47 | 🚀 Emerging Trends
48 |
49 | Smart Warehouses: Automated sorting and inventory systems.
50 |
51 | Blockchain Technology: For traceability in the wool supply chain.
52 |
53 | 2. 📊 Wool Market Information
54 |
55 | The wool market is a dynamic industry influenced by various global and local factors. Below is a detailed overview:
56 |
57 | 🌍 Global Wool Market Overview
58 |
59 | Key Producers: Australia, China, New Zealand, and India.
60 |
61 | Major Consumers: Textile industries in Europe, the US, and Asia.
62 |
63 | Price Influencers:
64 |
65 | Quality and grade of wool.
66 |
67 | Global demand for woolen products, especially in winter seasons.
68 |
69 | Trade policies and tariffs.
70 |
71 | 🇮🇳 Indian Wool Market
72 |
73 | Leading States: Rajasthan, Jammu & Kashmir, Himachal Pradesh.
74 |
75 | Predominantly produces coarse wool for carpets, blankets, and local handicrafts.
76 |
77 | Growing domestic demand for sustainable and natural fibers.
78 |
79 | 💡 Key Insights
80 |
81 | Price Trends:
82 |
83 | Monitor daily wool price indices on platforms like IWTO and NCDEX.
84 |
85 | Seasonal fluctuations occur during shearing periods (spring and autumn).
86 |
87 | Market Challenges:
88 |
89 | Fragmented supply chains and lack of direct producer-to-buyer connections.
90 |
91 | Quality inconsistencies due to lack of standardization.
92 |
93 | Opportunities:
94 |
95 | Increasing demand for organic and sustainable wool products.
96 |
97 | Rising export opportunities to Europe and the US.
98 |
99 | Digital Platforms:
100 |
101 | Integration of platforms like WoolConnect for real-time pricing and direct sales.
102 |
103 | Blockchain-based systems for transparency and traceability.
104 |
105 | 3. ✂️ Wool Processing
106 |
107 | Wool processing transforms raw fleece into usable textile material. Below are the major stages and advancements:
108 |
109 | 🛠️ Key Stages of Wool Processing
110 |
111 | Shearing:
112 |
113 | Manual or machine-based removal of fleece.
114 |
115 | Ensure humane practices to avoid stress to animals.
116 |
117 | Scouring:
118 |
119 | Cleaning wool to remove grease, dirt, and impurities.
120 |
121 | Use biodegradable detergents to reduce environmental impact.
122 |
123 | Sorting and Grading:
124 |
125 | Separate wool by length, texture, and color.
126 |
127 | Grading ensures higher pricing for finer wool.
128 |
129 | Carding:
130 |
131 | Aligns fibers to prepare them for spinning.
132 |
133 | Mechanical carding machines enhance efficiency.
134 |
135 | Dyeing:
136 |
137 | Use eco-friendly, azo-free dyes for sustainable practices.
138 |
139 | Pre-dyeing or post-dyeing methods are used based on end-use.
140 |
141 | Spinning:
142 |
143 | Converts carded wool into yarn.
144 |
145 | Advanced spinning techniques produce high-strength, fine yarns.
146 |
147 | 🌟 Recent Innovations
148 |
149 | Bio-Scouring: Use of enzymes instead of chemicals for wool cleaning.
150 |
151 | Automated Sorting Systems: Reduce manual errors and improve efficiency.
152 |
153 | Sustainable Dyeing: Adoption of natural dyes extracted from plants and minerals.
154 |
155 | 4. 📚 Wool Education and Training
156 |
157 | Education and training are crucial to improve skills and knowledge among wool producers and artisans. Below are the key aspects:
158 |
159 | 🎓 Training Modules
160 |
161 | Wool Production Techniques:
162 |
163 | Sustainable farming and sheep breeding practices.
164 |
165 | Climate-resilient wool production methods.
166 |
167 | Quality Control:
168 |
169 | Hands-on training for wool grading and classification.
170 |
171 | Use of modern tools for quality assurance.
172 |
173 | Processing Skills:
174 |
175 | Workshops on shearing, scouring, dyeing, and spinning.
176 |
177 | Emphasis on eco-friendly and sustainable practices.
178 |
179 | Design and Marketing:
180 |
181 | Training on creating market-ready woolen products like garments and carpets.
182 |
183 | Digital marketing strategies to reach global markets.
184 |
185 | 📌 Regional Insights
186 |
187 | North India: Focus on high-altitude sheep rearing techniques.
188 |
189 | Rajasthan: Emphasis on carpet-grade wool production and weaving.
190 |
191 | Southern India: Training on wool blending with cotton and synthetic fibers.
192 |
193 | 🌐 E-Learning Platforms
194 |
195 | Online courses and tutorials on wool processing and marketing.
196 |
197 | Virtual reality simulations for hands-on training.
198 |
199 | 🤝 Government and NGO Initiatives
200 |
201 | Central Wool Development Board (CWDB) conducts regular training programs.
202 |
203 | Collaborations with international organizations like IWTO for knowledge exchange.
204 |
205 | This research provides a comprehensive insight into the wool sector, addressing key aspects such as storage, market dynamics, processing, and education. It ensures that all stakeholders have access to the tools and knowledge necessary for growth and sustainability in the industry.
206 |
--------------------------------------------------------------------------------
/rev1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/rev1.webp
--------------------------------------------------------------------------------
/rev2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/rev2.webp
--------------------------------------------------------------------------------
/rev3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/rev3.webp
--------------------------------------------------------------------------------
/right_yarn.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/right_yarn.jpeg
--------------------------------------------------------------------------------
/server/.env.sample:
--------------------------------------------------------------------------------
1 | PORT=
2 | MONGODB_URL=
3 | JWT_SECRET=
--------------------------------------------------------------------------------
/server/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | .env
--------------------------------------------------------------------------------
/server/db.js:
--------------------------------------------------------------------------------
1 | const mongoose=require('mongoose');
2 | require('dotenv').config();
3 | const mongoURL=process.env.MONGODB_URL;
4 | mongoose.connect(mongoURL,{
5 | useNewUrlParser:true,
6 | useUnifiedTopology:true
7 | })
8 | const db=mongoose.connection;
9 | db.on('connected',()=>{
10 | console.log('connected to mongodb');
11 | });
12 | db.on('error',(err)=>{
13 | console.log('connection error');
14 | });
15 | db.on('disconnected',()=>{
16 | console.log('mongodb disconnected');
17 | });
18 | module.exports=db;
--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
1 | const express=require('express');
2 | const app=express();
3 | const cors=require('cors');
4 | const User=require('./models/User');
5 | const authRoutes=require('./routes/auth');
6 | app.use(cors());
7 | app.use(cors({
8 | origin:'your origin',
9 | methods:['GET','POST','PUT','DELETE'],
10 | allowedHeaders: ['Content-Type','Authorization']
11 | }));
12 | app.use(express.json());
13 | require('dotenv').config();
14 | const PORT=process.env.PORT||3000;
15 | app.use('/auth',authRoutes);
16 | app.listen(PORT,()=>{
17 | console.log('Server is running on port 3000');
18 | });
--------------------------------------------------------------------------------
/server/jwt.js:
--------------------------------------------------------------------------------
1 | const passport = require('passport');
2 | const mongoose=require('mongoose');
3 | const User=require('./models/User');
4 | require('dotenv').config();
5 | const JwtStrategy = require('passport-jwt').Strategy,
6 | ExtractJwt = require('passport-jwt').ExtractJwt;
7 | let opts = {}
8 | opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();
9 | opts.secretOrKey = process.env.JWT_SECRET;
10 | passport.use(new JwtStrategy(opts, function(jwt_payload, done) {
11 | User.findOne({id: jwt_payload.sub}, function(err, user) {
12 | if (err) {
13 | return done(err, false);
14 | }
15 | if (user) {
16 | return done(null, user);
17 | } else {
18 | return done(null, false);
19 | }
20 | });
21 | }));
--------------------------------------------------------------------------------
/server/models/User.js:
--------------------------------------------------------------------------------
1 | const { uniq } = require('lodash');
2 | const mongoose=require('mongoose');
3 | const User=new mongoose.Schema({
4 | name:{
5 | type:String,
6 | required:true
7 | },
8 | surname:{
9 | type:String,
10 | required:true
11 | },
12 | phoneNumber:{
13 | type:String,
14 | required:true,
15 | unique:true,
16 | validate:{
17 | validator:function(v){
18 | return /^\d{10}$/.test(v);
19 | },
20 | message:"Invalid phone number!",
21 | },
22 | },
23 | email:{
24 | type:String,
25 | required:true,
26 | unique:true,
27 | lowercase:true,
28 | validate:{
29 | validator:function(v){
30 | return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); // Validates email format
31 | },
32 | message:"Invalid email address!",
33 | },
34 | },
35 | stateAndCity:{
36 | type:String,
37 | required:true,
38 | },
39 | password:{
40 | type:String,
41 | required:true,
42 | minlength:8,
43 | },
44 | termsAccepted:{
45 | type:Boolean,
46 | required:true,
47 | default:false,
48 | },
49 | });
50 | const UserModel=mongoose.model('User',User);
51 | module.exports=UserModel;
--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "server",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "scripts": {
6 | "test": "echo \"Error: no test specified\" && exit 1"
7 | },
8 | "author": "",
9 | "license": "ISC",
10 | "description": "",
11 | "dependencies": {
12 | "bcrypt": "^5.1.1",
13 | "body-parser": "^1.20.2",
14 | "cors": "^2.8.5",
15 | "dotenv": "^16.4.5",
16 | "express": "^4.18.2",
17 | "jsonwebtoken": "^9.0.2",
18 | "local": "^0.3.3",
19 | "lodash": "^4.17.21",
20 | "mongodb": "^6.3.0",
21 | "mongoose": "^5.13.20",
22 | "multer": "^1.4.5-lts.1",
23 | "nodemon": "^3.1.0",
24 | "passport": "^0.7.0",
25 | "passport-jwt": "^4.0.1",
26 | "passport-local": "^1.0.0"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/server/routes/auth.js:
--------------------------------------------------------------------------------
1 | const express=require('express');
2 | const router=express.Router();
3 | const db=require('../db');
4 | const User=require('../models/User');
5 | const bcrypt=require('bcrypt');
6 | const {getToken}=require('../utils/helper');
7 | router.post('/register',async(req,res)=>{
8 | const {name,surname,phoneNumber,email,stateAndCity,password,termsAccepted}=req.body;
9 | const user=await User.findOne({email:email});
10 | if(user){
11 | return res.status(403).json({error:"User already exists"});
12 | }
13 | const hasedPassword=await bcrypt.hash(password,10);
14 | const newUserData=new User({
15 | email,
16 | password:hasedPassword,
17 | name,
18 | surname,
19 | phoneNumber,
20 | stateAndCity,
21 | termsAccepted
22 | });
23 | const newUser=await User.create(newUserData);
24 | const token=await getToken(email,newUser);
25 | const userToReturn={...newUser.toJSON(),token};
26 | delete userToReturn.password;
27 | return res.status(200).json(userToReturn);
28 | });
29 | router.post('/login',async(req,res)=>{
30 | const {password,email}=req.body;
31 | const user=await User.findOne({email:email});
32 | if(!user){
33 | return res.status(403).json({error:"user does not exist please register"});
34 | }
35 | const issame=await bcrypt.compare(password,user.password);
36 | if(!issame){
37 | return res.status(403).json({error:"Invalid password"});
38 | }
39 | const token=await getToken(email,user);
40 | const userToReturn={...user.toJSON(),token};
41 | delete userToReturn.password;
42 | return res.status(200).json(userToReturn);
43 | })
44 | module.exports=router;
--------------------------------------------------------------------------------
/server/utils/helper.js:
--------------------------------------------------------------------------------
1 | const jwt=require('jsonwebtoken');
2 | exports={}
3 | exports.getToken=async (email,user)=>{
4 | const token=jwt.sign({identifier:user._id},process.env.JWT_SECRET);
5 | return token;
6 | };
7 | module.exports=exports;
--------------------------------------------------------------------------------
/signup.css:
--------------------------------------------------------------------------------
1 | /* General Styles */
2 | body {
3 | font-family: 'Arial', sans-serif;
4 | background: url('https://images.unsplash.com/photo-1544195522-04e7c58ba945?q=80&w=1779&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
5 | display: flex;
6 | justify-content: center;
7 | align-items: center;
8 | height: 100vh;
9 | margin: 0;
10 | color: #111;
11 | }
12 |
13 | /* Login and Signup Page */
14 | #login-page, #signup-page {
15 | background: transparent;
16 | backdrop-filter: blur(5px);
17 | padding: 40px;
18 | border-radius: 20px;
19 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
20 | text-align: center;
21 | max-width: 400px;
22 | width: 100%;
23 | }
24 |
25 | #login-page h1, #signup-page h1 {
26 | font-size: 2rem;
27 | margin-bottom: 10px;
28 | color: #21273f;
29 | }
30 |
31 | #login-page p, #signup-page p {
32 | font-size: 1rem;
33 | margin-bottom: 20px;
34 | color: rgb(12, 39, 45);
35 | }
36 | #login-page p a, #signup-page p a{
37 | color: red;
38 | }
39 | /* Form Styles */
40 | .form-group {
41 | margin-bottom: 15px;
42 | text-align: left;
43 | }
44 |
45 | .form-group label {
46 | display: block;
47 | margin-bottom: 5px;
48 | font-weight: bold;
49 | }
50 |
51 | .form-group input {
52 | width: 100%;
53 | padding: 10px;
54 | border: 1px solid #ddd;
55 | border-radius: 8px;
56 | font-size: 1rem;
57 | }
58 |
59 | .form-group input:focus {
60 | outline: none;
61 | border-color: #667eea;
62 | }
63 |
64 | /* Buttons */
65 | .btn {
66 | padding: 10px 20px;
67 | background: #21273f;
68 | color: white;
69 | border: none;
70 | border-radius: 8px;
71 | cursor: pointer;
72 | font-size: 1rem;
73 | transition: background 0.3s ease;
74 | }
75 |
76 | .btn:hover {
77 | background: #5a6fd1;
78 | }
79 |
80 | .btn-secondary {
81 | background: #34a853;
82 | }
83 |
84 | .btn-secondary:hover {
85 | background: #2d8c4a;
86 | }
87 |
88 |
89 |
--------------------------------------------------------------------------------
/signup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Signup Page
7 |
8 |
9 |
10 |
11 |
12 |
13 |
Login
14 |
Welcome back! Please login to continue.
15 |
26 |
Don't have an account? Sign Up
27 |
28 |
29 |
30 |
31 |
Sign Up
32 |
Create a new account to get started.
33 |
48 |
Already have an account? Login
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/signup.js:
--------------------------------------------------------------------------------
1 | document.getElementById('show-signup').addEventListener('click', function (e) {
2 | e.preventDefault();
3 | document.getElementById('login-page').style.display = 'none';
4 | document.getElementById('signup-page').style.display = 'block';
5 | });
6 |
7 | document.getElementById('show-login').addEventListener('click', function (e) {
8 | e.preventDefault();
9 | document.getElementById('signup-page').style.display = 'none';
10 | document.getElementById('login-page').style.display = 'block';
11 | });
12 |
13 | document.getElementById('login-form').addEventListener('submit', function (e) {
14 | e.preventDefault();
15 | const email = document.getElementById('login-email').value;
16 | const password = document.getElementById('login-password').value;
17 |
18 | if (email && password) {
19 | alert('Login successful!');
20 | document.getElementById('login-page').style.display = 'none';
21 | document.getElementById('chat-page').style.display = 'block';
22 | } else {
23 | alert('Please fill in all fields.');
24 | }
25 | });
26 |
27 | document.getElementById('signup-form').addEventListener('submit', function (e) {
28 | e.preventDefault();
29 | const email = document.getElementById('signup-email').value;
30 | const password = document.getElementById('signup-password').value;
31 | const confirmPassword = document.getElementById('confirm-password').value;
32 |
33 | if (email && password && confirmPassword) {
34 | if (password === confirmPassword) {
35 | alert('Signup successful!');
36 | document.getElementById('signup-page').style.display = 'none';
37 | document.getElementById('chat-page').style.display = 'block';
38 | } else {
39 | alert('Passwords do not match.');
40 | }
41 | } else {
42 | alert('Please fill in all fields.');
43 | }
44 | });
45 |
46 | // Login Logic
47 | function login(email, password) {
48 | window.location.href = 'index.html';
49 | }
50 |
51 | document.getElementById('login-form').addEventListener('submit', function (e) {
52 | e.preventDefault();
53 | const email = document.getElementById('login-email').value;
54 | const password = document.getElementById('login-password').value;
55 |
56 | // Simple validation
57 | if (email && password) {
58 | login(email, password);
59 | } else {
60 | alert('Please fill in all fields.');
61 | }
62 | });
--------------------------------------------------------------------------------
/terms and service.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | body {
7 | font-family: "Arial", sans-serif;
8 | margin: 0;
9 | padding: 0;
10 |
11 | /* background: linear-gradient(to bottom, #333, #444); */
12 | color: #fff;
13 |
14 | color: rgb(253, 242, 224);
15 |
16 | }
17 | body::before {
18 | content: '';
19 | position: fixed; /* Fix the image to the viewport */
20 | top: 0;
21 | left: 0;
22 | width: 100%;
23 | height: 100%;
24 | background: url('images/raSxSYFwHiyY36AmSkBQQ-transformed.png') no-repeat center center fixed;
25 | background-size: cover; /* Ensures the image covers the entire area */
26 | filter: blur(4px); /* Blur the image */
27 | z-index: -1; /* Keep the image behind the content */
28 | }
29 |
30 | .navbar{
31 | position: sticky;
32 | top: 0;
33 | z-index: 100;
34 | }
35 |
36 | header {
37 | color: #1f1f1f;
38 | padding: 30px 40px;
39 | text-decoration: underline;
40 | background-color: rgb(253, 242, 224);
41 | animation: headerSlideDown 1.2s ease-in-out;
42 | }
43 |
44 | header h1 {
45 | margin: 0;
46 | font-size: 2.5rem;
47 | animation: fadeIn 1s ease-in-out;
48 | }
49 |
50 | main {
51 | max-width: 100%;
52 | padding: 40px;
53 | background-color: rgb(253, 242, 224);
54 | color: #302f2f;
55 | animation: slideIn 1.2s ease-in-out;
56 | }
57 | .container2 {
58 | background-color: rgba(211, 207, 207, 0.9);
59 | padding: 30px;
60 | border-radius: 10px;
61 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
62 | max-width: 800px;
63 | margin: 20px auto;
64 | }
65 |
66 | .container2 h1 {
67 | text-align: center;
68 | font-weight: bold;
69 | margin-bottom: 20px;
70 | font-size: 2rem;
71 | color: #333;
72 | }
73 |
74 | .container2 section {
75 | margin-bottom: 20px;
76 | }
77 |
78 | .container2 section h2 {
79 | font-weight: bold;
80 | margin-bottom: 10px;
81 | font-size: 1.5rem;
82 | color: #333;
83 | }
84 |
85 | .container2 section p {
86 | color: #6c757d;
87 | line-height: 1.8;
88 | margin-bottom: 15px;
89 | font-size: 1rem;
90 | }
91 |
92 | .container2 section ul {
93 | margin-top: 10px;
94 | margin-left: 20px;
95 | list-style-type: disc;
96 | }
97 |
98 | .container2 section ul li {
99 | margin-bottom: 10px;
100 | color: #555;
101 | }
102 |
103 |
104 | h2 {
105 | font-size: 1.8rem;
106 | margin-bottom: 15px;
107 | color: #333;
108 | border-bottom: 2px solid #555;
109 | padding-bottom: 5px;
110 | animation: fadeIn 1s ease-in-out;
111 | }
112 |
113 | p {
114 | font-size: 1rem;
115 | line-height: 1.8;
116 |
117 | animation: fadeIn 1.2s ease-in-out;
118 | }
119 |
120 | /* Animations */
121 | @keyframes fadeIn {
122 | 0% {
123 | opacity: 0;
124 | }
125 | 100% {
126 | opacity: 1;
127 | }
128 | }
129 |
130 | @keyframes slideIn {
131 | 0% {
132 | transform: translateY(20px);
133 | opacity: 0;
134 | }
135 | 100% {
136 | transform: translateY(0);
137 | opacity: 1;
138 | }
139 | }
140 |
141 | @keyframes headerSlideDown {
142 | 0% {
143 | transform: translateY(-100%);
144 | opacity: 0;
145 | }
146 | 100% {
147 | transform: translateY(0);
148 | opacity: 1;
149 | }
150 | }
151 |
152 | @keyframes footerFadeIn {
153 | 0% {
154 | opacity: 0;
155 | }
156 | 100% {
157 | opacity: 1;
158 | }
159 | }
160 |
161 | @keyframes bounce {
162 | 0%,
163 | 20%,
164 | 50%,
165 | 80%,
166 | 100% {
167 | transform: translateY(0);
168 | }
169 | 40% {
170 | transform: translateY(-10px);
171 | }
172 | 60% {
173 | transform: translateY(-5px);
174 | }
175 | }
176 |
177 | /* Responsive Design */
178 | @media screen and (max-width: 768px) {
179 | header h1 {
180 | font-size: 2rem;
181 | }
182 |
183 | main {
184 | padding: 15px;
185 | }
186 |
187 | h2 {
188 | font-size: 1.5rem;
189 | }
190 |
191 | p {
192 | font-size: 0.9rem;
193 | }
194 | }
195 |
196 | /* CSS for Scroll to Top Button */
197 | #scrollBtn {
198 | position: fixed;
199 | bottom: 20px;
200 | right: 20px;
201 | display: none;
202 | background-color: #007bff;
203 | color: white;
204 | border: none;
205 | border-radius: 50%;
206 | padding: 15px;
207 | font-size: 18px;
208 | cursor: pointer;
209 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
210 | pointer-events: auto;
211 | transition: background-color 0.3s ease, transform 0.3s ease;
212 | }
213 |
214 | #scrollBtn:hover {
215 | background-color: #0056b3;
216 | transform: scale(1.2);
217 | }
218 |
219 | /* footer section */
220 | .footer {
221 | background: #000000;
222 | color: #fff;
223 | text-align: center;
224 | z-index: 5;
225 | min-height: 100px;
226 | }
227 |
228 | .footer h2 {
229 | color: white;
230 | border-bottom: 0px solid transparent;
231 | padding-top: 20px;
232 | padding-bottom: 0px;
233 | }
234 |
235 | .footer-container {
236 | display: flex;
237 | justify-content: center;
238 | flex-wrap: wrap;
239 | gap: 20px;
240 | }
241 |
242 | .footer-info {
243 | max-width: 400px;
244 | margin-bottom: 0px;
245 | font-size: 16px;
246 | }
247 |
248 | .social-icons {
249 | display: flex;
250 | justify-content: center;
251 | gap: 10px;
252 | padding-top: 10px;
253 | }
254 |
255 | .social-icon {
256 | color: #fff;
257 | font-size: 1.2rem;
258 | transition: color 0.3s ease;
259 | }
260 |
261 | .social-icon:hover {
262 | color: #000000;
263 | }
264 |
265 | .copyright {
266 | font-size: 0.9rem;
267 | padding: 1px 10px;
268 | background-color: #222;
269 | }
270 |
271 | .copyright p {
272 | margin-bottom: 10px;
273 | margin-top: 10px;
274 | font-size: 0.9rem;
275 | }
276 |
277 | .social-icons {
278 | display: flex;
279 | justify-content: center;
280 | gap: 10px;
281 | }
282 |
283 | .social-icon {
284 | color: #fff;
285 | font-size: 1.2rem;
286 | transition: color 0.3s ease;
287 | padding-bottom: 10px;
288 | }
289 |
290 | .social-icon:hover {
291 | color: #3e3636;
292 | }
293 |
294 | .copyright {
295 | font-size: 0.9rem;
296 | padding: 1px 10px;
297 | background-color: #222;
298 | }
299 |
300 | @media (max-width: 768px) {
301 | .footer-container {
302 | flex-direction: column;
303 | text-align: center;
304 | }
305 | }
306 |
--------------------------------------------------------------------------------
/terms and service.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Terms and Services
7 |
8 |
9 |
16 |
20 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
42 |
43 |
44 |
51 |
52 |
53 |
☰
54 |
55 |
56 |
67 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | Understand the rules and policies governing the use of our website and services.
76 |
77 |
78 |
79 | Introduction
80 | Welcome to Wool Connect . By using our website and services, you agree to comply with the terms outlined in this document. These Terms and Conditions govern your use of our platform and outline your rights and responsibilities. Please read them carefully.
81 |
82 |
83 |
84 | Eligibility
85 | You must be at least 18 years old to use our website and services. By accessing our platform, you confirm that you meet this age requirement and can form a binding contract under applicable laws.
86 |
87 |
88 |
89 | Use of Services
90 | Our services are provided for personal and non-commercial use. You agree not to misuse our platform, including but not limited to unauthorized access, data mining, or distributing harmful content.
91 |
92 |
93 |
94 | Intellectual Property
95 | All content, logos, and trademarks displayed on our website are the property of Wool Connect . Unauthorized use of our intellectual property is strictly prohibited.
96 |
97 |
98 |
99 | Limitation of Liability
100 | While we strive to provide accurate information and reliable services, we are not responsible for any direct or indirect damages resulting from your use of our platform. This includes loss of data, revenue, or unauthorized access.
101 |
102 |
103 |
104 | Changes to Terms
105 | We reserve the right to modify these Terms and Conditions at any time. Changes will be communicated through our website. Your continued use of our platform constitutes acceptance of the updated terms.
106 |
107 |
108 |
109 | Contact Us
110 | If you have any questions or concerns about these Terms and Conditions, please reach out to us:
111 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
157 |
158 |
159 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
173 |
174 |
205 |
206 |
207 |
--------------------------------------------------------------------------------
/tips.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/tips.webp
--------------------------------------------------------------------------------
/user_wool_ratings.csv:
--------------------------------------------------------------------------------
1 | user_id,wool_type1,wool_type2,wool_type3,wool_type4,wool_type5
2 | 1,5,0,4,0,0
3 | 2,3,2,0,1,0
4 | 3,0,0,5,2,1
5 | 4,4,0,0,5,0
6 | 5,1,3,0,4,2
7 | 6,0,0,4,5,5
8 | 7,2,5,3,0,0
9 | 8,3,2,4,0,3
10 |
--------------------------------------------------------------------------------
/wool_type_prediction_model.py:
--------------------------------------------------------------------------------
1 | import pandas as pd
2 | from sklearn.metrics.pairwise import cosine_similarity
3 | import numpy as np
4 |
5 | # Load data from CSV file
6 | df = pd.read_csv('user_wool_ratings.csv')
7 |
8 | # Set user_id as index to make similarity calculations easier
9 | df = df.set_index('user_id')
10 |
11 | # Compute the similarity matrix based on ratings using Cosine Similarity
12 | similarity_matrix = cosine_similarity(df.fillna(0)) # Fill NA with 0 for similarity calculation
13 |
14 | # Create a DataFrame for similarity matrix
15 | similarity_df = pd.DataFrame(similarity_matrix, index=df.index, columns=df.index)
16 |
17 | def get_recommendations(user_id, num_recommendations=3):
18 | """
19 | Get wool type recommendations for a specific user based on collaborative filtering.
20 |
21 | Args:
22 | user_id (int): The user for whom we want to generate recommendations.
23 | num_recommendations (int): The number of wool types to recommend.
24 |
25 | Returns:
26 | dict: Recommended wool types with their estimated ratings.
27 | """
28 | # Get the most similar users to the current user
29 | similar_users = similarity_df[user_id].sort_values(ascending=False)
30 |
31 | # Get the top similar user (excluding the user itself)
32 | top_similar_user = similar_users.index[1] # Skip the user itself, so take the second most similar user
33 |
34 | # Retrieve wool ratings from the top similar user
35 | recommended_wool = df.loc[top_similar_user].to_dict()
36 |
37 | # Sort the recommended wool based on ratings in descending order and select the top n recommendations
38 | sorted_recommendations = sorted(recommended_wool.items(), key=lambda x: x[1], reverse=True)
39 |
40 | # Get the top 'num_recommendations' recommendations
41 | top_recommendations = dict(sorted_recommendations[:num_recommendations])
42 |
43 | return top_recommendations
44 |
45 | # Example: Get recommendations for user_id = 1
46 | user_id = 1
47 | recommendations = get_recommendations(user_id)
48 |
49 | print(f"Recommendations for user {user_id}:")
50 | for wool_type, rating in recommendations.items():
51 | print(f"{wool_type}: {rating}")
52 |
--------------------------------------------------------------------------------
/workwithus.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | margin: 0;
4 | padding: 0;
5 | background-color: #fff;
6 | color: #333;
7 | }
8 |
9 |
10 | /* Mobile View Adjustments */
11 | @media (max-width: 768px) {
12 | .navbar-nav {
13 | flex-direction: column;
14 | align-items: flex-start;
15 | padding-left: 1rem;
16 | }
17 |
18 | .nav-item {
19 | margin: 5px 0; /* Add vertical spacing for mobile view */
20 | }
21 |
22 | .dropdown-menu {
23 | width: 100%; /* Full width for mobile dropdowns */
24 | }
25 | }
26 |
27 | /* Meal Plan Link */
28 | .nav-item.meal-plan a {
29 | display: flex;
30 | align-items: center;
31 | padding: 8px 12px;
32 | font-weight: 600;
33 | font-size: 14px;
34 | text-transform: uppercase;
35 | color: rgb(0, 0, 0);
36 | }
37 |
38 | /* Red line effect on hover for Meal Plan */
39 | .nav-item.meal-plan a::after {
40 | content: '';
41 | position: absolute;
42 | width: 0;
43 | height: 2px;
44 | left: 50%;
45 | bottom: 0;
46 | background-color: red;
47 | transition: width 0.3s ease, left 0.3s ease;
48 | }
49 |
50 | .nav-item.meal-plan a:hover::after {
51 | width: 100%;
52 | left: 0;
53 | }
54 |
55 | /* Dropdown Menu - Initially hidden */
56 | .nav-item.dropdown .dropdown-menu {
57 | display: none;
58 | position: absolute;
59 | top: 100%;
60 | left: 0;
61 | right: 0;
62 | z-index: 1000;
63 | background-color: white;
64 | border: 1px solid #ddd;
65 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
66 | }
67 |
68 | /* Show dropdown on hover */
69 | .nav-item.dropdown:hover .dropdown-menu {
70 | display: block;
71 | }
72 |
73 | .dropdown-menu {
74 | min-width: 180px; /* Optional, you can adjust the width */
75 | }
76 |
77 |
78 |
79 | #contact-us {
80 | padding: 20px;
81 | max-width: 800px;
82 | margin: 50px auto;
83 | background: #f9f9f9;
84 | border-radius: 10px;
85 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
86 | }
87 |
88 | .contact-header h2 {
89 | text-align: center;
90 | margin-bottom: 20px;
91 | color: black;
92 | font-size: 2rem;
93 | animation: fadeInDown 1s ease-out;
94 | }
95 |
96 | @keyframes fadeInDown {
97 | from {
98 | opacity: 0;
99 | transform: translateY(-20px);
100 | }
101 | to {
102 | opacity: 1;
103 | transform: translateY(0);
104 | }
105 | }
106 |
107 | .contact-container {
108 | display: flex;
109 | justify-content: center;
110 | }
111 |
112 | .contact-form {
113 | width: 100%;
114 | }
115 |
116 | form {
117 | display: flex;
118 | flex-direction: column;
119 | align-items: center; /* Center all elements horizontally */
120 | }
121 |
122 | form label {
123 | font-weight: bold;
124 | margin-bottom: 5px;
125 | margin-left: 10px;
126 | width: 95%; /* Align labels to the same width as inputs */
127 | }
128 |
129 | form input, form textarea, form select {
130 | margin-bottom: 15px;
131 | padding: 12px;
132 | font-size: 16px;
133 | border: 2px solid black;
134 | border-radius: 5px;
135 | width: 95%;
136 | transition: all 0.3s ease;
137 | }
138 |
139 | form input:focus, form textarea:focus, form select:focus {
140 | border-color: #302e2d;
141 | box-shadow: 0 0 10px black;
142 | }
143 |
144 | form textarea {
145 | resize: none;
146 | height: 120px;
147 | }
148 |
149 | form button {
150 | background-color: black;
151 | color: white;
152 | border: none;
153 | cursor: pointer;
154 | padding: 12px 30px; /* Reduced padding for smaller size */
155 | font-size: 14px; /* Slightly smaller font size */
156 | font-weight: bold;
157 | border-radius: 25px;
158 | transition: all 0.3s ease;
159 | text-align: center; /* Ensure button text is centered */
160 | }
161 |
162 | form button:hover {
163 | background-color: #3f3b3a;
164 | transform: scale(1.1);
165 | }
166 |
167 | form button:active {
168 | transform: scale(0.95);
169 | }
170 |
171 | .contact-header {
172 | margin-bottom: 30px;
173 | }
174 |
175 | @media (max-width: 768px) {
176 | form button {
177 | width: auto;
178 | }
179 | }
180 |
181 |
182 |
183 |
184 | /* Success Animation Container */
185 | .success-animation {
186 | text-align: center;
187 | margin: 50px auto;
188 | padding: 20px;
189 | max-width: 500px;
190 | background-color: #f9fff9;
191 | border: 1px solid #d4f0d4;
192 | border-radius: 8px;
193 | position: relative;
194 | animation: fadeIn 0.6s ease-out;
195 | }
196 |
197 | /* Green Tick Styling */
198 | .green-tick {
199 | width: 60px;
200 | height: 60px;
201 | margin: 0 auto 20px;
202 | background: rgb(69, 68, 68) !important; /* Ensures Bootstrap doesn't override */
203 | color: white !important; /* Keeps the text white */
204 | font-size: 36px !important;
205 | font-weight: bold;
206 | line-height: 60px;
207 | text-align: center;
208 | border-radius: 50%;
209 | display: flex;
210 | align-items: center;
211 | justify-content: center;
212 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
213 | }
214 |
215 | /* Success Message Styling */
216 | .success-message {
217 | font-size: 18px;
218 | color: #5d665d !important;
219 | text-align: center;
220 | margin: 10px 0;
221 | line-height: 1.5;
222 | }
223 |
224 | /* Go Back Button Styling */
225 | .go-back-btn {
226 | display: block;
227 | margin: 20px auto;
228 | padding: 10px 20px;
229 | font-size: 16px;
230 | color: white !important;
231 | background-color: #232425 !important;
232 | border: none !important;
233 | border-radius: 5px;
234 | cursor: pointer;
235 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
236 | transition: background-color 0.3s ease, transform 0.2s ease;
237 | }
238 |
239 | .go-back-btn:hover {
240 | background-color: #252628 !important;
241 | transform: scale(1.05);
242 | }
243 |
244 | .go-back-btn:active {
245 | transform: scale(1);
246 | }
247 |
248 | /* Success Message */
249 | .success-message {
250 | font-size: 18px;
251 | color: #242724;
252 | font-weight: bold;
253 | }
254 |
255 | .success-note {
256 | font-size: 16px;
257 | color: black;
258 | }
259 |
260 |
261 | /* Fade-in Animation */
262 | @keyframes fadeIn {
263 | from {
264 | opacity: 0;
265 | transform: translateY(-20px);
266 | }
267 | to {
268 | opacity: 1;
269 | transform: translateY(0);
270 | }
271 | }
272 |
273 |
274 |
275 |
276 | /* Footer Styling */
277 | footer {
278 | background-color: #f8f9fa;
279 | padding: 40px 0;
280 | font-family: 'Arial', sans-serif;
281 | color: #6c757d;
282 | }
283 |
284 | .footer-content {
285 | display: grid;
286 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
287 | gap: 20px;
288 | /* max-width: 1200px; */
289 | margin: auto 20px;
290 | padding: 20px;
291 | box-sizing: border-box;
292 | border-radius: 8px;
293 | /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
294 | }
295 |
296 | .footer-section {
297 | margin: 20px;
298 | }
299 |
300 | .footer-section h2 {
301 | font-size: 18px;
302 | font-weight: bold;
303 | margin-bottom: 20px;
304 | }
305 |
306 | .footer-section ul {
307 | list-style: none;
308 | padding: 0;
309 | }
310 |
311 | .footer-section ul li {
312 | margin-bottom: 10px;
313 | }
314 |
315 | .footer-section ul li a {
316 | text-decoration: none;
317 | color: #6c757d;
318 | font-size: 14px;
319 | }
320 |
321 | .footer-section ul li a:hover {
322 | color: #000;
323 | }
324 |
325 | .social-icons {
326 | display: flex;
327 | gap: 10px;
328 | }
329 |
330 | .social-icons li {
331 | list-style: none;
332 | }
333 |
334 | .social-icons li a {
335 | font-size: 20px;
336 | color: #6c757d;
337 | }
338 |
339 |
--------------------------------------------------------------------------------
/workwithus.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Work With Us
7 |
8 |
9 |
10 |
17 |
18 |
19 |
23 |
24 |
25 |
26 |
59 |
60 |
61 |
62 |
80 |
81 |
82 |
83 |
132 |
133 |
134 |
140 |
141 |
142 |
143 |
144 |
191 |
192 |
193 |
194 |
195 |
200 |
209 |
210 |
211 |
212 |
226 |
227 |
228 |
--------------------------------------------------------------------------------
/workwithus.js:
--------------------------------------------------------------------------------
1 |
2 | // Target the form and the container where the form is located
3 | var form = document.getElementById("feedbackForm");
4 | var formContainer = document.getElementsByClassName("contact-form")[0];
5 |
6 | // Function to handle a successful form submission
7 | function ajaxSuccess() {
8 | formContainer.innerHTML = `
9 |
10 |
✔
11 |
Your message has been submitted successfully!
12 |
Our team will get back to you soon.
13 |
14 |
Go Back
15 | `;
16 |
17 | // Add animation to the success message
18 | const successAnimation = document.querySelector(".success-animation");
19 | successAnimation.classList.add("animate-success");
20 | }
21 |
22 | // Function to handle an error during form submission
23 | function ajaxError() {
24 | formContainer.innerHTML = `
25 |
26 | Something went wrong! Please try again later.
27 |
28 |
Try Again
29 | `;
30 | }
31 |
32 | // Function to reload the form for a new submission
33 | function restartFeedback() {
34 | formContainer.innerHTML = `
35 |
63 | `;
64 |
65 | // Re-bind the form submission event after reloading
66 | document.getElementById("feedbackForm").addEventListener("submit", handleFormSubmission);
67 | }
68 |
69 | // Function to handle the form submission via AJAX
70 | function handleFormSubmission(event) {
71 | event.preventDefault(); // Prevent the default form submission behavior
72 |
73 | var formData = new FormData(document.getElementById("feedbackForm"));
74 |
75 | // Web3Forms API endpoint
76 | var url = "https://api.web3forms.com/submit";
77 |
78 | // Create a new XMLHttpRequest object
79 | var xhr = new XMLHttpRequest();
80 | xhr.open("POST", url, true);
81 | xhr.send(formData);
82 |
83 | // Handle the server response
84 | xhr.onload = function () {
85 | if (xhr.status === 200) {
86 | ajaxSuccess();
87 | } else {
88 | ajaxError();
89 | }
90 | };
91 |
92 | // Handle network or other errors
93 | xhr.onerror = function () {
94 | ajaxError();
95 | };
96 | }
97 |
98 | // Attach the event listener to the form submission
99 | form.addEventListener("submit", handleFormSubmission);
--------------------------------------------------------------------------------
/wph.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/wph.jpeg
--------------------------------------------------------------------------------
/wq1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/wq1.jpeg
--------------------------------------------------------------------------------
/wq2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/wq2.jpeg
--------------------------------------------------------------------------------
/wq4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/wq4.jpeg
--------------------------------------------------------------------------------
/wq6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishantrathi/woolconnect/5fb0c65ad3edb55fb4d0d5d0102d791fefc312eb/wq6.jpg
--------------------------------------------------------------------------------
68 |
69 | 
78 |
79 | 
88 |
89 | 
98 |
99 | 
108 |
109 | 
118 |
119 | 
128 |
129 | 
69 | 
89 | .jpeg.jpg)
109 | .jpeg.jpg)
129 | .jpeg.jpg)
149 | .jpeg.jpg)
169 | .jpeg.jpg)
189 | .jpg)
209 |