Ricrea questa struttura con animazioni, incentrando tutto su una rete di cooperative di scopo sociale e educativo
Browse files- README.md +7 -4
- components/footer.js +297 -0
- components/header.js +309 -0
- index.html +213 -19
- script.js +348 -0
- style.css +176 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title: Cooperative Constellation Network
|
| 3 |
-
emoji: 📉
|
| 4 |
colorFrom: green
|
| 5 |
-
colorTo:
|
|
|
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Cooperative Constellation Network 🌟
|
|
|
|
| 3 |
colorFrom: green
|
| 4 |
+
colorTo: green
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
components/footer.js
ADDED
|
@@ -0,0 +1,297 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CooperativeFooter extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
:host {
|
| 7 |
+
display: block;
|
| 8 |
+
width: 100%;
|
| 9 |
+
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
| 10 |
+
color: #cbd5e1;
|
| 11 |
+
}
|
| 12 |
+
|
| 13 |
+
.footer-container {
|
| 14 |
+
max-width: 1280px;
|
| 15 |
+
margin: 0 auto;
|
| 16 |
+
padding: 3rem 1.5rem;
|
| 17 |
+
}
|
| 18 |
+
|
| 19 |
+
.footer-grid {
|
| 20 |
+
display: grid;
|
| 21 |
+
grid-template-columns: 1fr;
|
| 22 |
+
gap: 2rem;
|
| 23 |
+
margin-bottom: 3rem;
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
.footer-logo {
|
| 27 |
+
display: flex;
|
| 28 |
+
align-items: center;
|
| 29 |
+
margin-bottom: 1rem;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
.footer-logo-icon {
|
| 33 |
+
display: flex;
|
| 34 |
+
align-items: center;
|
| 35 |
+
justify-content: center;
|
| 36 |
+
width: 40px;
|
| 37 |
+
height: 40px;
|
| 38 |
+
background: linear-gradient(135deg, #3B82F6, #10B981);
|
| 39 |
+
border-radius: 10px;
|
| 40 |
+
margin-right: 0.75rem;
|
| 41 |
+
color: white;
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
.footer-logo-text {
|
| 45 |
+
font-size: 1.25rem;
|
| 46 |
+
font-weight: bold;
|
| 47 |
+
color: white;
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
.footer-tagline {
|
| 51 |
+
font-size: 0.875rem;
|
| 52 |
+
line-height: 1.5;
|
| 53 |
+
color: #94a3b8;
|
| 54 |
+
}
|
| 55 |
+
|
| 56 |
+
.footer-section-title {
|
| 57 |
+
font-size: 1.125rem;
|
| 58 |
+
font-weight: 600;
|
| 59 |
+
color: white;
|
| 60 |
+
margin-bottom: 1rem;
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
.footer-links {
|
| 64 |
+
display: flex;
|
| 65 |
+
flex-direction: column;
|
| 66 |
+
gap: 0.75rem;
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
.footer-links a {
|
| 70 |
+
color: #cbd5e1;
|
| 71 |
+
text-decoration: none;
|
| 72 |
+
font-size: 0.875rem;
|
| 73 |
+
transition: color 0.2s;
|
| 74 |
+
display: flex;
|
| 75 |
+
align-items: center;
|
| 76 |
+
}
|
| 77 |
+
|
| 78 |
+
.footer-links a:hover {
|
| 79 |
+
color: #60a5fa;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
.footer-links a i {
|
| 83 |
+
margin-right: 0.5rem;
|
| 84 |
+
width: 1rem;
|
| 85 |
+
height: 1rem;
|
| 86 |
+
}
|
| 87 |
+
|
| 88 |
+
.footer-social {
|
| 89 |
+
display: flex;
|
| 90 |
+
gap: 1rem;
|
| 91 |
+
margin-top: 1rem;
|
| 92 |
+
}
|
| 93 |
+
|
| 94 |
+
.footer-social a {
|
| 95 |
+
display: flex;
|
| 96 |
+
align-items: center;
|
| 97 |
+
justify-content: center;
|
| 98 |
+
width: 36px;
|
| 99 |
+
height: 36px;
|
| 100 |
+
background: rgba(255, 255, 255, 0.1);
|
| 101 |
+
border-radius: 50%;
|
| 102 |
+
color: #cbd5e1;
|
| 103 |
+
text-decoration: none;
|
| 104 |
+
transition: all 0.2s;
|
| 105 |
+
}
|
| 106 |
+
|
| 107 |
+
.footer-social a:hover {
|
| 108 |
+
background: #3B82F6;
|
| 109 |
+
color: white;
|
| 110 |
+
transform: translateY(-2px);
|
| 111 |
+
}
|
| 112 |
+
|
| 113 |
+
.footer-bottom {
|
| 114 |
+
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
| 115 |
+
padding-top: 2rem;
|
| 116 |
+
display: flex;
|
| 117 |
+
flex-direction: column;
|
| 118 |
+
gap: 1rem;
|
| 119 |
+
align-items: center;
|
| 120 |
+
text-align: center;
|
| 121 |
+
}
|
| 122 |
+
|
| 123 |
+
.footer-copyright {
|
| 124 |
+
font-size: 0.875rem;
|
| 125 |
+
color: #94a3b8;
|
| 126 |
+
}
|
| 127 |
+
|
| 128 |
+
.footer-legal {
|
| 129 |
+
display: flex;
|
| 130 |
+
gap: 1.5rem;
|
| 131 |
+
font-size: 0.875rem;
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
.footer-legal a {
|
| 135 |
+
color: #cbd5e1;
|
| 136 |
+
text-decoration: none;
|
| 137 |
+
transition: color 0.2s;
|
| 138 |
+
}
|
| 139 |
+
|
| 140 |
+
.footer-legal a:hover {
|
| 141 |
+
color: #60a5fa;
|
| 142 |
+
}
|
| 143 |
+
|
| 144 |
+
@media (min-width: 640px) {
|
| 145 |
+
.footer-grid {
|
| 146 |
+
grid-template-columns: repeat(2, 1fr);
|
| 147 |
+
}
|
| 148 |
+
|
| 149 |
+
.footer-bottom {
|
| 150 |
+
flex-direction: row;
|
| 151 |
+
justify-content: space-between;
|
| 152 |
+
text-align: left;
|
| 153 |
+
}
|
| 154 |
+
}
|
| 155 |
+
|
| 156 |
+
@media (min-width: 768px) {
|
| 157 |
+
.footer-grid {
|
| 158 |
+
grid-template-columns: repeat(4, 1fr);
|
| 159 |
+
}
|
| 160 |
+
}
|
| 161 |
+
</style>
|
| 162 |
+
|
| 163 |
+
<div class="footer-container">
|
| 164 |
+
<div class="footer-grid">
|
| 165 |
+
<!-- Logo and Description -->
|
| 166 |
+
<div>
|
| 167 |
+
<div class="footer-logo">
|
| 168 |
+
<div class="footer-logo-icon">
|
| 169 |
+
<i data-feather="star"></i>
|
| 170 |
+
</div>
|
| 171 |
+
<div class="footer-logo-text">Cooperative Constellation</div>
|
| 172 |
+
</div>
|
| 173 |
+
<p class="footer-tagline">
|
| 174 |
+
A global network of social and educational purpose cooperatives collaborating for positive change through shared resources and collective impact.
|
| 175 |
+
</p>
|
| 176 |
+
<div class="footer-social">
|
| 177 |
+
<a href="https://twitter.com" aria-label="Twitter">
|
| 178 |
+
<i data-feather="twitter"></i>
|
| 179 |
+
</a>
|
| 180 |
+
<a href="https://linkedin.com" aria-label="LinkedIn">
|
| 181 |
+
<i data-feather="linkedin"></i>
|
| 182 |
+
</a>
|
| 183 |
+
<a href="https://facebook.com" aria-label="Facebook">
|
| 184 |
+
<i data-feather="facebook"></i>
|
| 185 |
+
</a>
|
| 186 |
+
<a href="https://instagram.com" aria-label="Instagram">
|
| 187 |
+
<i data-feather="instagram"></i>
|
| 188 |
+
</a>
|
| 189 |
+
</div>
|
| 190 |
+
</div>
|
| 191 |
+
|
| 192 |
+
<!-- Quick Links -->
|
| 193 |
+
<div>
|
| 194 |
+
<h3 class="footer-section-title">Quick Links</h3>
|
| 195 |
+
<div class="footer-links">
|
| 196 |
+
<a href="/">
|
| 197 |
+
<i data-feather="home"></i>
|
| 198 |
+
Home
|
| 199 |
+
</a>
|
| 200 |
+
<a href="cooperatives.html">
|
| 201 |
+
<i data-feather="users"></i>
|
| 202 |
+
Cooperatives
|
| 203 |
+
</a>
|
| 204 |
+
<a href="network.html">
|
| 205 |
+
<i data-feather="globe"></i>
|
| 206 |
+
Network Map
|
| 207 |
+
</a>
|
| 208 |
+
<a href="resources.html">
|
| 209 |
+
<i data-feather="book"></i>
|
| 210 |
+
Resources
|
| 211 |
+
</a>
|
| 212 |
+
<a href="events.html">
|
| 213 |
+
<i data-feather="calendar"></i>
|
| 214 |
+
Events
|
| 215 |
+
</a>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
|
| 219 |
+
<!-- About -->
|
| 220 |
+
<div>
|
| 221 |
+
<h3 class="footer-section-title">About Us</h3>
|
| 222 |
+
<div class="footer-links">
|
| 223 |
+
<a href="about.html">
|
| 224 |
+
<i data-feather="info"></i>
|
| 225 |
+
Our Mission
|
| 226 |
+
</a>
|
| 227 |
+
<a href="team.html">
|
| 228 |
+
<i data-feather="user-check"></i>
|
| 229 |
+
Our Team
|
| 230 |
+
</a>
|
| 231 |
+
<a href="impact.html">
|
| 232 |
+
<i data-feather="trending-up"></i>
|
| 233 |
+
Impact Report
|
| 234 |
+
</a>
|
| 235 |
+
<a href="partners.html">
|
| 236 |
+
<i data-feather="handshake"></i>
|
| 237 |
+
Partners
|
| 238 |
+
</a>
|
| 239 |
+
<a href="contact.html">
|
| 240 |
+
<i data-feather="mail"></i>
|
| 241 |
+
Contact Us
|
| 242 |
+
</a>
|
| 243 |
+
</div>
|
| 244 |
+
</div>
|
| 245 |
+
|
| 246 |
+
<!-- Join Network -->
|
| 247 |
+
<div>
|
| 248 |
+
<h3 class="footer-section-title">Join Our Network</h3>
|
| 249 |
+
<div class="footer-links">
|
| 250 |
+
<a href="join.html">
|
| 251 |
+
<i data-feather="plus-circle"></i>
|
| 252 |
+
Start a Cooperative
|
| 253 |
+
</a>
|
| 254 |
+
<a href="membership.html">
|
| 255 |
+
<i data-feather="user-plus"></i>
|
| 256 |
+
Individual Membership
|
| 257 |
+
</a>
|
| 258 |
+
<a href="volunteer.html">
|
| 259 |
+
<i data-feather="heart"></i>
|
| 260 |
+
Volunteer Opportunities
|
| 261 |
+
</a>
|
| 262 |
+
<a href="donate.html">
|
| 263 |
+
<i data-feather="dollar-sign"></i>
|
| 264 |
+
Support Our Work
|
| 265 |
+
</a>
|
| 266 |
+
<a href="newsletter.html">
|
| 267 |
+
<i data-feather="bell"></i>
|
| 268 |
+
Newsletter Signup
|
| 269 |
+
</a>
|
| 270 |
+
</div>
|
| 271 |
+
</div>
|
| 272 |
+
</div>
|
| 273 |
+
|
| 274 |
+
<div class="footer-bottom">
|
| 275 |
+
<div class="footer-copyright">
|
| 276 |
+
© ${new Date().getFullYear()} Cooperative Constellation Network. All rights reserved.
|
| 277 |
+
</div>
|
| 278 |
+
<div class="footer-legal">
|
| 279 |
+
<a href="privacy.html">Privacy Policy</a>
|
| 280 |
+
<a href="terms.html">Terms of Service</a>
|
| 281 |
+
<a href="cookies.html">Cookie Policy</a>
|
| 282 |
+
<a href="accessibility.html">Accessibility</a>
|
| 283 |
+
</div>
|
| 284 |
+
</div>
|
| 285 |
+
</div>
|
| 286 |
+
`;
|
| 287 |
+
|
| 288 |
+
// Initialize feather icons after rendering
|
| 289 |
+
setTimeout(() => {
|
| 290 |
+
if (window.feather) {
|
| 291 |
+
window.feather.replace({ class: 'footer-icons' });
|
| 292 |
+
}
|
| 293 |
+
}, 100);
|
| 294 |
+
}
|
| 295 |
+
}
|
| 296 |
+
|
| 297 |
+
customElements.define('cooperative-footer', CooperativeFooter);
|
components/header.js
ADDED
|
@@ -0,0 +1,309 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CooperativeHeader extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
:host {
|
| 7 |
+
display: block;
|
| 8 |
+
width: 100%;
|
| 9 |
+
position: sticky;
|
| 10 |
+
top: 0;
|
| 11 |
+
z-index: 50;
|
| 12 |
+
backdrop-filter: blur(10px);
|
| 13 |
+
background: rgba(255, 255, 255, 0.9);
|
| 14 |
+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
| 15 |
+
}
|
| 16 |
+
|
| 17 |
+
.header-container {
|
| 18 |
+
max-width: 1280px;
|
| 19 |
+
margin: 0 auto;
|
| 20 |
+
padding: 1rem 1.5rem;
|
| 21 |
+
display: flex;
|
| 22 |
+
justify-content: space-between;
|
| 23 |
+
align-items: center;
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
.logo {
|
| 27 |
+
display: flex;
|
| 28 |
+
align-items: center;
|
| 29 |
+
text-decoration: none;
|
| 30 |
+
font-weight: bold;
|
| 31 |
+
font-size: 1.5rem;
|
| 32 |
+
color: #1f2937;
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
.logo-icon {
|
| 36 |
+
display: flex;
|
| 37 |
+
align-items: center;
|
| 38 |
+
justify-content: center;
|
| 39 |
+
width: 40px;
|
| 40 |
+
height: 40px;
|
| 41 |
+
background: linear-gradient(135deg, #3B82F6, #10B981);
|
| 42 |
+
border-radius: 10px;
|
| 43 |
+
margin-right: 0.75rem;
|
| 44 |
+
color: white;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
.nav-links {
|
| 48 |
+
display: none;
|
| 49 |
+
}
|
| 50 |
+
|
| 51 |
+
.nav-links a {
|
| 52 |
+
color: #4b5563;
|
| 53 |
+
text-decoration: none;
|
| 54 |
+
font-weight: 500;
|
| 55 |
+
padding: 0.5rem 1rem;
|
| 56 |
+
border-radius: 0.5rem;
|
| 57 |
+
transition: all 0.2s;
|
| 58 |
+
display: flex;
|
| 59 |
+
align-items: center;
|
| 60 |
+
}
|
| 61 |
+
|
| 62 |
+
.nav-links a i {
|
| 63 |
+
margin-right: 0.5rem;
|
| 64 |
+
width: 1.125rem;
|
| 65 |
+
height: 1.125rem;
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
.nav-links a:hover {
|
| 69 |
+
color: #3B82F6;
|
| 70 |
+
background-color: #eff6ff;
|
| 71 |
+
}
|
| 72 |
+
|
| 73 |
+
.nav-links a.active {
|
| 74 |
+
color: #3B82F6;
|
| 75 |
+
background-color: #eff6ff;
|
| 76 |
+
}
|
| 77 |
+
|
| 78 |
+
.mobile-menu-btn {
|
| 79 |
+
background: none;
|
| 80 |
+
border: none;
|
| 81 |
+
padding: 0.5rem;
|
| 82 |
+
color: #4b5563;
|
| 83 |
+
cursor: pointer;
|
| 84 |
+
border-radius: 0.5rem;
|
| 85 |
+
}
|
| 86 |
+
|
| 87 |
+
.mobile-menu-btn:hover {
|
| 88 |
+
background-color: #f3f4f6;
|
| 89 |
+
}
|
| 90 |
+
|
| 91 |
+
.mobile-menu {
|
| 92 |
+
position: fixed;
|
| 93 |
+
top: 0;
|
| 94 |
+
left: 0;
|
| 95 |
+
right: 0;
|
| 96 |
+
bottom: 0;
|
| 97 |
+
background: white;
|
| 98 |
+
z-index: 100;
|
| 99 |
+
padding: 2rem;
|
| 100 |
+
transform: translateX(100%);
|
| 101 |
+
transition: transform 0.3s ease;
|
| 102 |
+
}
|
| 103 |
+
|
| 104 |
+
.mobile-menu.active {
|
| 105 |
+
transform: translateX(0);
|
| 106 |
+
}
|
| 107 |
+
|
| 108 |
+
.mobile-menu-header {
|
| 109 |
+
display: flex;
|
| 110 |
+
justify-content: space-between;
|
| 111 |
+
align-items: center;
|
| 112 |
+
margin-bottom: 2rem;
|
| 113 |
+
}
|
| 114 |
+
|
| 115 |
+
.mobile-nav-links {
|
| 116 |
+
display: flex;
|
| 117 |
+
flex-direction: column;
|
| 118 |
+
gap: 1rem;
|
| 119 |
+
}
|
| 120 |
+
|
| 121 |
+
.mobile-nav-links a {
|
| 122 |
+
color: #1f2937;
|
| 123 |
+
text-decoration: none;
|
| 124 |
+
font-weight: 500;
|
| 125 |
+
padding: 1rem;
|
| 126 |
+
border-radius: 0.5rem;
|
| 127 |
+
display: flex;
|
| 128 |
+
align-items: center;
|
| 129 |
+
font-size: 1.125rem;
|
| 130 |
+
}
|
| 131 |
+
|
| 132 |
+
.mobile-nav-links a:hover {
|
| 133 |
+
background-color: #f3f4f6;
|
| 134 |
+
}
|
| 135 |
+
|
| 136 |
+
.mobile-nav-links a i {
|
| 137 |
+
margin-right: 1rem;
|
| 138 |
+
width: 1.25rem;
|
| 139 |
+
height: 1.25rem;
|
| 140 |
+
}
|
| 141 |
+
|
| 142 |
+
.mobile-menu-overlay {
|
| 143 |
+
position: fixed;
|
| 144 |
+
top: 0;
|
| 145 |
+
left: 0;
|
| 146 |
+
right: 0;
|
| 147 |
+
bottom: 0;
|
| 148 |
+
background: rgba(0, 0, 0, 0.5);
|
| 149 |
+
z-index: 99;
|
| 150 |
+
opacity: 0;
|
| 151 |
+
pointer-events: none;
|
| 152 |
+
transition: opacity 0.3s ease;
|
| 153 |
+
}
|
| 154 |
+
|
| 155 |
+
.mobile-menu-overlay.active {
|
| 156 |
+
opacity: 1;
|
| 157 |
+
pointer-events: all;
|
| 158 |
+
}
|
| 159 |
+
|
| 160 |
+
@media (min-width: 768px) {
|
| 161 |
+
.nav-links {
|
| 162 |
+
display: flex;
|
| 163 |
+
gap: 0.5rem;
|
| 164 |
+
}
|
| 165 |
+
|
| 166 |
+
.mobile-menu-btn {
|
| 167 |
+
display: none;
|
| 168 |
+
}
|
| 169 |
+
}
|
| 170 |
+
|
| 171 |
+
@media (min-width: 1024px) {
|
| 172 |
+
.nav-links {
|
| 173 |
+
gap: 1rem;
|
| 174 |
+
}
|
| 175 |
+
}
|
| 176 |
+
</style>
|
| 177 |
+
|
| 178 |
+
<div class="header-container">
|
| 179 |
+
<a href="/" class="logo">
|
| 180 |
+
<div class="logo-icon">
|
| 181 |
+
<i data-feather="star"></i>
|
| 182 |
+
</div>
|
| 183 |
+
<span>Cooperative Constellation</span>
|
| 184 |
+
</a>
|
| 185 |
+
|
| 186 |
+
<nav class="nav-links">
|
| 187 |
+
<a href="/" class="active">
|
| 188 |
+
<i data-feather="home"></i>
|
| 189 |
+
Home
|
| 190 |
+
</a>
|
| 191 |
+
<a href="cooperatives.html">
|
| 192 |
+
<i data-feather="users"></i>
|
| 193 |
+
Cooperatives
|
| 194 |
+
</a>
|
| 195 |
+
<a href="network.html">
|
| 196 |
+
<i data-feather="globe"></i>
|
| 197 |
+
Network
|
| 198 |
+
</a>
|
| 199 |
+
<a href="resources.html">
|
| 200 |
+
<i data-feather="book"></i>
|
| 201 |
+
Resources
|
| 202 |
+
</a>
|
| 203 |
+
<a href="about.html">
|
| 204 |
+
<i data-feather="info"></i>
|
| 205 |
+
About
|
| 206 |
+
</a>
|
| 207 |
+
<a href="join.html" class="bg-primary-500 text-white hover:bg-primary-600 px-4 py-2 rounded-lg">
|
| 208 |
+
<i data-feather="plus-circle"></i>
|
| 209 |
+
Join Us
|
| 210 |
+
</a>
|
| 211 |
+
</nav>
|
| 212 |
+
|
| 213 |
+
<button class="mobile-menu-btn" aria-label="Open menu">
|
| 214 |
+
<i data-feather="menu"></i>
|
| 215 |
+
</button>
|
| 216 |
+
|
| 217 |
+
<div class="mobile-menu-overlay"></div>
|
| 218 |
+
|
| 219 |
+
<div class="mobile-menu">
|
| 220 |
+
<div class="mobile-menu-header">
|
| 221 |
+
<a href="/" class="logo">
|
| 222 |
+
<div class="logo-icon">
|
| 223 |
+
<i data-feather="star"></i>
|
| 224 |
+
</div>
|
| 225 |
+
<span>Cooperative Constellation</span>
|
| 226 |
+
</a>
|
| 227 |
+
<button class="mobile-menu-close" aria-label="Close menu">
|
| 228 |
+
<i data-feather="x"></i>
|
| 229 |
+
</button>
|
| 230 |
+
</div>
|
| 231 |
+
|
| 232 |
+
<nav class="mobile-nav-links">
|
| 233 |
+
<a href="/">
|
| 234 |
+
<i data-feather="home"></i>
|
| 235 |
+
Home
|
| 236 |
+
</a>
|
| 237 |
+
<a href="cooperatives.html">
|
| 238 |
+
<i data-feather="users"></i>
|
| 239 |
+
Cooperatives
|
| 240 |
+
</a>
|
| 241 |
+
<a href="network.html">
|
| 242 |
+
<i data-feather="globe"></i>
|
| 243 |
+
Network
|
| 244 |
+
</a>
|
| 245 |
+
<a href="resources.html">
|
| 246 |
+
<i data-feather="book"></i>
|
| 247 |
+
Resources
|
| 248 |
+
</a>
|
| 249 |
+
<a href="about.html">
|
| 250 |
+
<i data-feather="info"></i>
|
| 251 |
+
About
|
| 252 |
+
</a>
|
| 253 |
+
<a href="join.html" style="background-color: #3B82F6; color: white;">
|
| 254 |
+
<i data-feather="plus-circle"></i>
|
| 255 |
+
Join Our Network
|
| 256 |
+
</a>
|
| 257 |
+
</nav>
|
| 258 |
+
</div>
|
| 259 |
+
</div>
|
| 260 |
+
`;
|
| 261 |
+
|
| 262 |
+
this.initializeMobileMenu();
|
| 263 |
+
this.updateActiveLink();
|
| 264 |
+
}
|
| 265 |
+
|
| 266 |
+
initializeMobileMenu() {
|
| 267 |
+
const menuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
|
| 268 |
+
const closeBtn = this.shadowRoot.querySelector('.mobile-menu-close');
|
| 269 |
+
const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
|
| 270 |
+
const overlay = this.shadowRoot.querySelector('.mobile-menu-overlay');
|
| 271 |
+
const mobileLinks = this.shadowRoot.querySelectorAll('.mobile-nav-links a');
|
| 272 |
+
|
| 273 |
+
const openMenu = () => {
|
| 274 |
+
mobileMenu.classList.add('active');
|
| 275 |
+
overlay.classList.add('active');
|
| 276 |
+
document.body.style.overflow = 'hidden';
|
| 277 |
+
};
|
| 278 |
+
|
| 279 |
+
const closeMenu = () => {
|
| 280 |
+
mobileMenu.classList.remove('active');
|
| 281 |
+
overlay.classList.remove('active');
|
| 282 |
+
document.body.style.overflow = '';
|
| 283 |
+
};
|
| 284 |
+
|
| 285 |
+
menuBtn.addEventListener('click', openMenu);
|
| 286 |
+
closeBtn.addEventListener('click', closeMenu);
|
| 287 |
+
overlay.addEventListener('click', closeMenu);
|
| 288 |
+
|
| 289 |
+
mobileLinks.forEach(link => {
|
| 290 |
+
link.addEventListener('click', closeMenu);
|
| 291 |
+
});
|
| 292 |
+
}
|
| 293 |
+
|
| 294 |
+
updateActiveLink() {
|
| 295 |
+
const currentPath = window.location.pathname;
|
| 296 |
+
const navLinks = this.shadowRoot.querySelectorAll('.nav-links a, .mobile-nav-links a');
|
| 297 |
+
|
| 298 |
+
navLinks.forEach(link => {
|
| 299 |
+
const href = link.getAttribute('href');
|
| 300 |
+
if (href === currentPath || (href === '/' && currentPath.endsWith('/'))) {
|
| 301 |
+
link.classList.add('active');
|
| 302 |
+
} else {
|
| 303 |
+
link.classList.remove('active');
|
| 304 |
+
}
|
| 305 |
+
});
|
| 306 |
+
}
|
| 307 |
+
}
|
| 308 |
+
|
| 309 |
+
customElements.define('cooperative-header', CooperativeHeader);
|
index.html
CHANGED
|
@@ -1,19 +1,213 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en" class="light">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Cooperative Constellation Network | Social & Educational Purpose Cooperatives</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<script>
|
| 11 |
+
tailwind.config = {
|
| 12 |
+
theme: {
|
| 13 |
+
extend: {
|
| 14 |
+
colors: {
|
| 15 |
+
primary: {
|
| 16 |
+
DEFAULT: '#3B82F6',
|
| 17 |
+
50: '#EFF6FF',
|
| 18 |
+
100: '#DBEAFE',
|
| 19 |
+
200: '#BFDBFE',
|
| 20 |
+
300: '#93C5FD',
|
| 21 |
+
400: '#60A5FA',
|
| 22 |
+
500: '#3B82F6',
|
| 23 |
+
600: '#2563EB',
|
| 24 |
+
700: '#1D4ED8',
|
| 25 |
+
800: '#1E40AF',
|
| 26 |
+
900: '#1E3A8A'
|
| 27 |
+
},
|
| 28 |
+
secondary: {
|
| 29 |
+
DEFAULT: '#10B981',
|
| 30 |
+
50: '#ECFDF5',
|
| 31 |
+
100: '#D1FAE5',
|
| 32 |
+
200: '#A7F3D0',
|
| 33 |
+
300: '#6EE7B7',
|
| 34 |
+
400: '#34D399',
|
| 35 |
+
500: '#10B981',
|
| 36 |
+
600: '#059669',
|
| 37 |
+
700: '#047857',
|
| 38 |
+
800: '#065F46',
|
| 39 |
+
900: '#064E3B'
|
| 40 |
+
}
|
| 41 |
+
},
|
| 42 |
+
animation: {
|
| 43 |
+
'float': 'float 6s ease-in-out infinite',
|
| 44 |
+
'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
|
| 45 |
+
'slide-up': 'slide-up 0.6s ease-out',
|
| 46 |
+
'fade-in': 'fade-in 0.8s ease-out',
|
| 47 |
+
'constellation-spin': 'constellation-spin 20s linear infinite'
|
| 48 |
+
},
|
| 49 |
+
keyframes: {
|
| 50 |
+
float: {
|
| 51 |
+
'0%, 100%': { transform: 'translateY(0px)' },
|
| 52 |
+
'50%': { transform: 'translateY(-20px)' }
|
| 53 |
+
},
|
| 54 |
+
'pulse-glow': {
|
| 55 |
+
'0%, 100%': { opacity: 1 },
|
| 56 |
+
'50%': { opacity: 0.7 }
|
| 57 |
+
},
|
| 58 |
+
'slide-up': {
|
| 59 |
+
'0%': { transform: 'translateY(20px)', opacity: 0 },
|
| 60 |
+
'100%': { transform: 'translateY(0)', opacity: 1 }
|
| 61 |
+
},
|
| 62 |
+
'fade-in': {
|
| 63 |
+
'0%': { opacity: 0 },
|
| 64 |
+
'100%': { opacity: 1 }
|
| 65 |
+
},
|
| 66 |
+
'constellation-spin': {
|
| 67 |
+
'0%': { transform: 'rotate[0deg'] },
|
| 68 |
+
{ '100%': ['transform: rotate(360deg)']}
|
| 69 |
+
}
|
| 70 |
+
}
|
| 71 |
+
}
|
| 72 |
+
}
|
| 73 |
+
} ],
|
| 74 |
+
{ [],
|
| 75 |
+
}
|
| 76 |
+
}
|
| 77 |
+
</script>
|
| 78 |
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
| 79 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 80 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 81 |
+
</head>
|
| 82 |
+
<body class="bg-gray-50 text-gray-800 font-sans min-h-screen">
|
| 83 |
+
<cooperative-header></cooperative-header>
|
| 84 |
+
|
| 85 |
+
<main class="container mx-auto px-4 py-8">
|
| 86 |
+
<!-- Hero Section -->
|
| 87 |
+
<section class="text-center py-16 md:py-24 animate-fade-in">
|
| 88 |
+
<div class="relative">
|
| 89 |
+
<div class="absolute inset-0 flex items-center justify-center opacity-10">
|
| 90 |
+
<div class="w-64 h-64 rounded-full border-4 border-primary-300 animate-constellation-spin"></div>
|
| 91 |
+
<div class="w-48 h-48 rounded-full border-4 border-secondary-300 animate-constellation-spin" style="animation-delay: -10s;"></div>
|
| 92 |
+
</div>
|
| 93 |
+
<h1 class="text-4xl md:text-6xl font-bold mb-6 relative z-10 animate-slide-up">
|
| 94 |
+
<span class="text-primary-600">Cooperative Constellation</span>
|
| 95 |
+
<span class="text-secondary-600 block mt-2">Network</span>
|
| 96 |
+
</h1>
|
| 97 |
+
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto relative z-10">
|
| 98 |
+
A collaborative network of social and educational purpose cooperatives working together to create positive change through shared values and collective impact.
|
| 99 |
+
</p>
|
| 100 |
+
<div class="flex flex-col sm:flex-row gap-4 justify-center relative z-10">
|
| 101 |
+
<a href="#cooperatives" class="bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 px-8 rounded-lg transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
|
| 102 |
+
<i data-feather="users" class="inline mr-2 w-5 h-5"></i>Explore Cooperatives
|
| 103 |
+
</a>
|
| 104 |
+
<a href="#join" class="bg-secondary-500 hover:bg-secondary-600 text-white font-medium py-3 px-8 rounded-lg transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
|
| 105 |
+
<i data-feather="plus-circle" class="inline mr-2 w-5 h-5"></i>Join Our Network
|
| 106 |
+
</a>
|
| 107 |
+
</div>
|
| 108 |
+
</div>
|
| 109 |
+
</section>
|
| 110 |
+
|
| 111 |
+
<!-- Features Grid -->
|
| 112 |
+
<section class="py-16">
|
| 113 |
+
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-800">Our Collaborative Framework</h2>
|
| 114 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 115 |
+
<div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 animate-slide-up" style="animation-delay: 0.1s;">
|
| 116 |
+
<div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
| 117 |
+
<i data-feather="share-2" class="w-8 h-8 text-primary-600"></i>
|
| 118 |
+
</div>
|
| 119 |
+
<h3 class="text-xl font-bold mb-4 text-center text-gray-800">Shared Resources</h3>
|
| 120 |
+
<p class="text-gray-600">Pooling educational materials, funding opportunities, and expertise across our cooperative network to maximize impact and efficiency.</p>
|
| 121 |
+
</div>
|
| 122 |
+
<div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 animate-slide-up" style="animation-delay: 0.2s;">
|
| 123 |
+
<div class="bg-secondary-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
| 124 |
+
<i data-feather="book" class="w-8 h-8 text-secondary-600"></i>
|
| 125 |
+
</div>
|
| 126 |
+
<h3 class="text-xl font-bold mb-4 text-center text-gray-800">Educational Synergy</h3>
|
| 127 |
+
<p class="text-gray-600">Developing integrated curricula and training programs that combine social impact with practical skills for community transformation.</p>
|
| 128 |
+
</div>
|
| 129 |
+
<div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 animate-slide-up" style="animation-delay: 0.3s;">
|
| 130 |
+
<div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
| 131 |
+
<i data-feather="globe" class="w-8 h-8 text-primary-600"></i>
|
| 132 |
+
</div>
|
| 133 |
+
<h3 class="text-xl font-bold mb-4 text-center text-gray-800">Community Impact</h3>
|
| 134 |
+
<p class="text-gray-600">Measuring and amplifying our collective social impact through shared metrics and collaborative community projects.</p>
|
| 135 |
+
</div>
|
| 136 |
+
</div>
|
| 137 |
+
</section>
|
| 138 |
+
|
| 139 |
+
<!-- Cooperatives Showcase -->
|
| 140 |
+
<section id="cooperatives" class="py-16">
|
| 141 |
+
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-800">Featured Cooperatives</h2>
|
| 142 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="cooperatives-container">
|
| 143 |
+
<!-- Cooperatives will be loaded dynamically from API -->
|
| 144 |
+
</div>
|
| 145 |
+
<div class="text-center mt-12">
|
| 146 |
+
<a href="cooperatives.html" class="text-primary-600 hover:text-primary-700 font-medium inline-flex items-center">
|
| 147 |
+
View All Cooperatives
|
| 148 |
+
<i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
|
| 149 |
+
</a>
|
| 150 |
+
</div>
|
| 151 |
+
</section>
|
| 152 |
+
|
| 153 |
+
<!-- Network Visualization -->
|
| 154 |
+
<section class="py-16 bg-gradient-to-r from-primary-50 to-secondary-50 rounded-3xl p-8 mb-16">
|
| 155 |
+
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-800">Our Growing Constellation</h2>
|
| 156 |
+
<div class="relative h-96 flex items-center justify-center">
|
| 157 |
+
<div class="absolute w-full h-full flex items-center justify-center">
|
| 158 |
+
<div class="network-visualization w-64 h-64 md:w-96 md:h-96"></div>
|
| 159 |
+
</div>
|
| 160 |
+
<div class="relative z-10 text-center bg-white/80 backdrop-blur-sm p-8 rounded-2xl max-w-lg mx-auto">
|
| 161 |
+
<h3 class="text-2xl font-bold mb-4 text-primary-700">42 Cooperatives Connected</h3>
|
| 162 |
+
<p class="text-gray-600 mb-4">Spanning 18 countries across 6 continents, working collectively toward social and educational transformation.</p>
|
| 163 |
+
<div class="flex justify-center space-x-8 mt-6">
|
| 164 |
+
<div class="text-center">
|
| 165 |
+
<div class="text-3xl font-bold text-primary-600">1,200+</div>
|
| 166 |
+
<div class="text-sm text-gray-500">Educators</div>
|
| 167 |
+
</div>
|
| 168 |
+
<div class="text-center">
|
| 169 |
+
<div class="text-3xl font-bold text-secondary-600">8,500+</div>
|
| 170 |
+
<div class="text-sm text-gray-500">Community Members</div>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
</section>
|
| 176 |
+
|
| 177 |
+
<!-- Join CTA -->
|
| 178 |
+
<section id="join" class="py-16 text-center">
|
| 179 |
+
<div class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-3xl p-12 text-white">
|
| 180 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Join Our Constellation?</h2>
|
| 181 |
+
<p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
|
| 182 |
+
Become part of a growing network of purpose-driven cooperatives making real impact in communities worldwide.
|
| 183 |
+
</p>
|
| 184 |
+
<a href="join.html" class="bg-white text-primary-600 hover:bg-gray-100 font-bold py-4 px-10 rounded-full text-lg transition-all duration-300 transform hover:scale-105 hover:shadow-2xl inline-flex items-center">
|
| 185 |
+
<i data-feather="star" class="mr-3 w-6 h-6"></i>
|
| 186 |
+
Start Your Cooperative Journey
|
| 187 |
+
</a>
|
| 188 |
+
</div>
|
| 189 |
+
</section>
|
| 190 |
+
</main>
|
| 191 |
+
|
| 192 |
+
<cooperative-footer></cooperative-footer>
|
| 193 |
+
|
| 194 |
+
<!-- Component Scripts -->
|
| 195 |
+
<script src="components/header.js"></script>
|
| 196 |
+
<script src="components/footer.js"></script>
|
| 197 |
+
|
| 198 |
+
<script src="script.js"></script>
|
| 199 |
+
<script>
|
| 200 |
+
feather.replace();
|
| 201 |
+
|
| 202 |
+
// Initialize network visualization
|
| 203 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 204 |
+
const cooperativesContainer = document.getElementById('cooperatives-container');
|
| 205 |
+
if (cooperativesContainer) {
|
| 206 |
+
loadCooperatives();
|
| 207 |
+
}
|
| 208 |
+
createNetworkVisualization();
|
| 209 |
+
});
|
| 210 |
+
</script>
|
| 211 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 212 |
+
</body>
|
| 213 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,348 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// Main application script for Cooperative Constellation Network
|
| 2 |
+
|
| 3 |
+
// DOM Ready
|
| 4 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 5 |
+
// Initialize all components and functionality
|
| 6 |
+
initCooperatives();
|
| 7 |
+
initAnimations();
|
| 8 |
+
initEventListeners();
|
| 9 |
+
});
|
| 10 |
+
|
| 11 |
+
// Initialize cooperatives from API
|
| 12 |
+
async function initCooperatives() {
|
| 13 |
+
const container = document.getElementById('cooperatives-container');
|
| 14 |
+
if (!container) return;
|
| 15 |
+
|
| 16 |
+
try {
|
| 17 |
+
// Using a mock API endpoint - in production, replace with real API
|
| 18 |
+
const cooperatives = await fetchCooperatives();
|
| 19 |
+
displayCooperatives(container, cooperatives.slice(0, 6)); // Show first 6
|
| 20 |
+
} catch (error) {
|
| 21 |
+
console.error('Error loading cooperatives:', error);
|
| 22 |
+
displayFallbackCooperatives(container);
|
| 23 |
+
}
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
// Fetch cooperatives from API (mock version)
|
| 27 |
+
async function fetchCooperatives() {
|
| 28 |
+
// Mock data - in production, replace with real API call
|
| 29 |
+
return new Promise((resolve) => {
|
| 30 |
+
setTimeout(() => {
|
| 31 |
+
resolve([
|
| 32 |
+
{
|
| 33 |
+
id: 1,
|
| 34 |
+
name: "EduCollective North",
|
| 35 |
+
location: "Toronto, Canada",
|
| 36 |
+
focus: "Digital Literacy Education",
|
| 37 |
+
members: 45,
|
| 38 |
+
established: 2018,
|
| 39 |
+
description: "Promoting digital inclusion through community-based tech education programs.",
|
| 40 |
+
image: "http://static.photos/technology/640x360/101"
|
| 41 |
+
},
|
| 42 |
+
{
|
| 43 |
+
id: 2,
|
| 44 |
+
name: "Social Impact Educators Co-op",
|
| 45 |
+
location: "Berlin, Germany",
|
| 46 |
+
focus: "Sustainable Development",
|
| 47 |
+
members: 32,
|
| 48 |
+
established: 2015,
|
| 49 |
+
description: "Training educators in sustainable development practices for schools and communities.",
|
| 50 |
+
image: "http://static.photos/nature/640x360/102"
|
| 51 |
+
},
|
| 52 |
+
{
|
| 53 |
+
id: 3,
|
| 54 |
+
name: "Community Learning Hub",
|
| 55 |
+
location: "Nairobi, Kenya",
|
| 56 |
+
focus: "Early Childhood Education",
|
| 57 |
+
members: 28,
|
| 58 |
+
established: 2020,
|
| 59 |
+
description: "Providing early childhood education resources and teacher training in underserved communities.",
|
| 60 |
+
image: "http://static.photos/education/640x360/103"
|
| 61 |
+
},
|
| 62 |
+
{
|
| 63 |
+
id: 4,
|
| 64 |
+
name: "Indigenous Knowledge Cooperative",
|
| 65 |
+
location: "Auckland, New Zealand",
|
| 66 |
+
focus: "Cultural Preservation",
|
| 67 |
+
members: 36,
|
| 68 |
+
established: 2016,
|
| 69 |
+
description: "Integrating indigenous knowledge systems with modern educational frameworks.",
|
| 70 |
+
image: "http://static.photos/travel/640x360/104"
|
| 71 |
+
},
|
| 72 |
+
{
|
| 73 |
+
id: 5,
|
| 74 |
+
name: "Urban Youth Empowerment Co-op",
|
| 75 |
+
location: "São Paulo, Brazil",
|
| 76 |
+
focus: "Youth Development",
|
| 77 |
+
members: 52,
|
| 78 |
+
established: 2019,
|
| 79 |
+
description: "Empowering urban youth through vocational training and mentorship programs.",
|
| 80 |
+
image: "http://static.photos/cityscape/640x360/105"
|
| 81 |
+
},
|
| 82 |
+
{
|
| 83 |
+
id: 6,
|
| 84 |
+
name: "Environmental Education Network",
|
| 85 |
+
location: "Melbourne, Australia",
|
| 86 |
+
focus: "Environmental Education",
|
| 87 |
+
members: 41,
|
| 88 |
+
established: 2017,
|
| 89 |
+
description: "Connecting environmental educators and developing climate literacy curricula.",
|
| 90 |
+
image: "http://static.photos/green/640x360/106"
|
| 91 |
+
}
|
| 92 |
+
]);
|
| 93 |
+
}, 300);
|
| 94 |
+
});
|
| 95 |
+
}
|
| 96 |
+
|
| 97 |
+
// Display cooperatives in container
|
| 98 |
+
function displayCooperatives(container, cooperatives) {
|
| 99 |
+
container.innerHTML = '';
|
| 100 |
+
|
| 101 |
+
cooperatives.forEach((coop, index) => {
|
| 102 |
+
const card = document.createElement('div');
|
| 103 |
+
card.className = 'cooperative-card bg-white rounded-2xl overflow-hidden shadow-lg animate-slide-up';
|
| 104 |
+
card.style.animationDelay = `${index * 0.1}s`;
|
| 105 |
+
|
| 106 |
+
card.innerHTML = `
|
| 107 |
+
<div class="h-48 overflow-hidden">
|
| 108 |
+
<img src="${coop.image}" alt="${coop.name}" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
|
| 109 |
+
</div>
|
| 110 |
+
<div class="p-6">
|
| 111 |
+
<div class="flex justify-between items-start mb-4">
|
| 112 |
+
<h3 class="text-xl font-bold text-gray-800">${coop.name}</h3>
|
| 113 |
+
<span class="bg-primary-100 text-primary-800 text-xs font-semibold px-3 py-1 rounded-full">
|
| 114 |
+
${coop.established}
|
| 115 |
+
</span>
|
| 116 |
+
</div>
|
| 117 |
+
<div class="flex items-center text-gray-600 mb-3">
|
| 118 |
+
<i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
|
| 119 |
+
<span>${coop.location}</span>
|
| 120 |
+
</div>
|
| 121 |
+
<div class="mb-4">
|
| 122 |
+
<span class="inline-block bg-secondary-100 text-secondary-800 text-sm font-medium px-3 py-1 rounded-full mb-2">
|
| 123 |
+
${coop.focus}
|
| 124 |
+
</span>
|
| 125 |
+
</div>
|
| 126 |
+
<p class="text-gray-600 mb-4">${coop.description}</p>
|
| 127 |
+
<div class="flex items-center justify-between">
|
| 128 |
+
<div class="flex items-center">
|
| 129 |
+
<i data-feather="users" class="w-4 h-4 mr-2 text-primary-600"></i>
|
| 130 |
+
<span class="text-sm font-medium">${coop.members} Members</span>
|
| 131 |
+
</div>
|
| 132 |
+
<a href="cooperative.html?id=${coop.id}" class="text-primary-600 hover:text-primary-700 font-medium text-sm inline-flex items-center">
|
| 133 |
+
Learn More
|
| 134 |
+
<i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
|
| 135 |
+
</a>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
`;
|
| 139 |
+
|
| 140 |
+
container.appendChild(card);
|
| 141 |
+
});
|
| 142 |
+
|
| 143 |
+
feather.replace();
|
| 144 |
+
}
|
| 145 |
+
|
| 146 |
+
// Display fallback cooperatives if API fails
|
| 147 |
+
function displayFallbackCooperatives(container) {
|
| 148 |
+
container.innerHTML = `
|
| 149 |
+
<div class="col-span-full text-center py-12">
|
| 150 |
+
<div class="bg-gray-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
|
| 151 |
+
<i data-feather="users" class="w-10 h-10 text-gray-400"></i>
|
| 152 |
+
</div>
|
| 153 |
+
<h3 class="text-xl font-semibold text-gray-700 mb-2">Network Loading</h3>
|
| 154 |
+
<p class="text-gray-600 mb-4">Our cooperative network is currently connecting...</p>
|
| 155 |
+
<button onclick="initCooperatives()" class="bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-6 rounded-lg transition-colors duration-300">
|
| 156 |
+
Retry Connection
|
| 157 |
+
</button>
|
| 158 |
+
</div>
|
| 159 |
+
`;
|
| 160 |
+
feather.replace();
|
| 161 |
+
}
|
| 162 |
+
|
| 163 |
+
// Create network visualization
|
| 164 |
+
function createNetworkVisualization() {
|
| 165 |
+
const container = document.querySelector('.network-visualization');
|
| 166 |
+
if (!container) return;
|
| 167 |
+
|
| 168 |
+
// Clear container
|
| 169 |
+
container.innerHTML = '';
|
| 170 |
+
|
| 171 |
+
// Create nodes
|
| 172 |
+
const nodeCount = 15;
|
| 173 |
+
const nodes = [];
|
| 174 |
+
|
| 175 |
+
for (let i = 0; i < nodeCount; i++) {
|
| 176 |
+
const angle = (i / nodeCount) * Math.PI * 2;
|
| 177 |
+
const radius = Math.random() * 0.7 + 0.1;
|
| 178 |
+
const x = 50 + Math.cos(angle) * radius * 50;
|
| 179 |
+
const y = 50 + Math.sin(angle) * radius * 50;
|
| 180 |
+
|
| 181 |
+
const node = document.createElement('div');
|
| 182 |
+
node.className = 'network-node';
|
| 183 |
+
node.style.left = `${x}%`;
|
| 184 |
+
node.style.top = `${y}%`;
|
| 185 |
+
node.style.animationDelay = `${i * 0.2}s`;
|
| 186 |
+
node.style.width = `${Math.random() * 8 + 8}px`;
|
| 187 |
+
node.style.height = node.style.width;
|
| 188 |
+
|
| 189 |
+
node.addEventListener('click', () => {
|
| 190 |
+
showNodeInfo(i);
|
| 191 |
+
});
|
| 192 |
+
|
| 193 |
+
container.appendChild(node);
|
| 194 |
+
nodes.push({ x, y, element: node });
|
| 195 |
+
}
|
| 196 |
+
|
| 197 |
+
// Create connections between nodes
|
| 198 |
+
for (let i = 0; i < nodes.length; i++) {
|
| 199 |
+
for (let j = i + 1; j < nodes.length; j++) {
|
| 200 |
+
// Only connect some nodes
|
| 201 |
+
if (Math.random() > 0.7) {
|
| 202 |
+
const node1 = nodes[i];
|
| 203 |
+
const node2 = nodes[j];
|
| 204 |
+
|
| 205 |
+
const dx = node2.x - node1.x;
|
| 206 |
+
const dy = node2.y - node1.y;
|
| 207 |
+
const distance = Math.sqrt(dx * dx + dy * dy);
|
| 208 |
+
|
| 209 |
+
// Only connect if not too far apart
|
| 210 |
+
if (distance < 40) {
|
| 211 |
+
const connection = document.createElement('div');
|
| 212 |
+
connection.className = 'network-connection';
|
| 213 |
+
|
| 214 |
+
const angle = Math.atan2(dy, dx) * 180 / Math.PI;
|
| 215 |
+
connection.style.width = `${distance}%`;
|
| 216 |
+
connection.style.left = `${node1.x}%`;
|
| 217 |
+
connection.style.top = `${node1.y}%`;
|
| 218 |
+
connection.style.transform = `rotate(${angle}deg)`;
|
| 219 |
+
connection.style.opacity = 0.3 - (distance / 100);
|
| 220 |
+
|
| 221 |
+
container.insertBefore(connection, node1.element);
|
| 222 |
+
}
|
| 223 |
+
}
|
| 224 |
+
}
|
| 225 |
+
}
|
| 226 |
+
|
| 227 |
+
// Add central hub
|
| 228 |
+
const hub = document.createElement('div');
|
| 229 |
+
hub.className = 'network-node animate-pulse-glow';
|
| 230 |
+
hub.style.left = '50%';
|
| 231 |
+
hub.style.top = '50%';
|
| 232 |
+
hub.style.width = '24px';
|
| 233 |
+
hub.style.height = '24px';
|
| 234 |
+
hub.style.background = 'linear-gradient(135deg, #3B82F6, #10B981)';
|
| 235 |
+
hub.style.zIndex = '10';
|
| 236 |
+
|
| 237 |
+
hub.addEventListener('click', () => {
|
| 238 |
+
showNodeInfo('hub');
|
| 239 |
+
});
|
| 240 |
+
|
| 241 |
+
container.appendChild(hub);
|
| 242 |
+
}
|
| 243 |
+
|
| 244 |
+
// Show information for a network node
|
| 245 |
+
function showNodeInfo(nodeId) {
|
| 246 |
+
const info = [
|
| 247 |
+
"Community Learning Initiative",
|
| 248 |
+
"Educational Resource Hub",
|
| 249 |
+
"Social Impact Project",
|
| 250 |
+
"Teacher Training Center",
|
| 251 |
+
"Youth Mentorship Program",
|
| 252 |
+
"Digital Education Platform",
|
| 253 |
+
"Sustainability Project",
|
| 254 |
+
"Cultural Exchange Network",
|
| 255 |
+
"Vocational Training Cooperative",
|
| 256 |
+
"Early Childhood Program",
|
| 257 |
+
"Environmental Education Center",
|
| 258 |
+
"Technology Access Initiative",
|
| 259 |
+
"Rural Education Network",
|
| 260 |
+
"Urban Development Program",
|
| 261 |
+
"Health Education Cooperative",
|
| 262 |
+
"Network Central Hub"
|
| 263 |
+
];
|
| 264 |
+
|
| 265 |
+
const nodeName = info[nodeId] || "Cooperative Node";
|
| 266 |
+
alert(`🌐 ${nodeName}\n\nThis node represents one of the many interconnected cooperatives in our network, each contributing unique expertise and resources to our collective mission.`);
|
| 267 |
+
}
|
| 268 |
+
|
| 269 |
+
// Initialize animations
|
| 270 |
+
function initAnimations() {
|
| 271 |
+
// Add scroll reveal animations
|
| 272 |
+
const revealElements = document.querySelectorAll('.reveal-on-scroll');
|
| 273 |
+
|
| 274 |
+
const observer = new IntersectionObserver((entries) => {
|
| 275 |
+
entries.forEach(entry => {
|
| 276 |
+
if (entry.isIntersecting) {
|
| 277 |
+
entry.target.classList.add('visible');
|
| 278 |
+
}
|
| 279 |
+
});
|
| 280 |
+
}, {
|
| 281 |
+
threshold: 0.1,
|
| 282 |
+
rootMargin: '0px 0px -50px 0px'
|
| 283 |
+
});
|
| 284 |
+
|
| 285 |
+
revealElements.forEach(element => {
|
| 286 |
+
observer.observe(element);
|
| 287 |
+
});
|
| 288 |
+
|
| 289 |
+
// Add hover animation to cards
|
| 290 |
+
const cards = document.querySelectorAll('.cooperative-card, .bg-white.shadow-lg');
|
| 291 |
+
cards.forEach(card => {
|
| 292 |
+
card.addEventListener('mouseenter', () => {
|
| 293 |
+
card.style.transform = 'translateY(-8px)';
|
| 294 |
+
});
|
| 295 |
+
|
| 296 |
+
card.addEventListener('mouseleave', () => {
|
| 297 |
+
card.style.transform = 'translateY(0)';
|
| 298 |
+
});
|
| 299 |
+
});
|
| 300 |
+
}
|
| 301 |
+
|
| 302 |
+
// Initialize event listeners
|
| 303 |
+
function initEventListeners() {
|
| 304 |
+
// Smooth scrolling for anchor links
|
| 305 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 306 |
+
anchor.addEventListener('click', function(e) {
|
| 307 |
+
e.preventDefault();
|
| 308 |
+
const targetId = this.getAttribute('href');
|
| 309 |
+
if (targetId === '#') return;
|
| 310 |
+
|
| 311 |
+
const targetElement = document.querySelector(targetId);
|
| 312 |
+
if (targetElement) {
|
| 313 |
+
window.scrollTo({
|
| 314 |
+
top: targetElement.offsetTop - 80,
|
| 315 |
+
behavior: 'smooth'
|
| 316 |
+
});
|
| 317 |
+
}
|
| 318 |
+
});
|
| 319 |
+
});
|
| 320 |
+
|
| 321 |
+
// Network visualization refresh
|
| 322 |
+
const refreshBtn = document.getElementById('refresh-network');
|
| 323 |
+
if (refreshBtn) {
|
| 324 |
+
refreshBtn.addEventListener('click', createNetworkVisualization);
|
| 325 |
+
}
|
| 326 |
+
}
|
| 327 |
+
|
| 328 |
+
// Utility function to format numbers
|
| 329 |
+
function formatNumber(num) {
|
| 330 |
+
if (num >= 1000000) {
|
| 331 |
+
return (num / 1000000).toFixed(1) + 'M';
|
| 332 |
+
} else if (num >= 1000) {
|
| 333 |
+
return (num / 1000).toFixed(1) + 'K';
|
| 334 |
+
}
|
| 335 |
+
return num.toString();
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
// Global function to load cooperatives (for retry button)
|
| 339 |
+
window.loadCooperatives = initCooperatives;
|
| 340 |
+
|
| 341 |
+
// Export for module usage if needed
|
| 342 |
+
if (typeof module !== 'undefined' && module.exports) {
|
| 343 |
+
module.exports = {
|
| 344 |
+
initCooperatives,
|
| 345 |
+
createNetworkVisualization,
|
| 346 |
+
initAnimations
|
| 347 |
+
};
|
| 348 |
+
}
|
style.css
CHANGED
|
@@ -1,28 +1,186 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
margin-top: 0;
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
font-size: 15px;
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
|
| 27 |
-
|
|
|
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
|
| 2 |
+
|
| 3 |
+
* {
|
| 4 |
+
margin: 0;
|
| 5 |
+
padding: 0;
|
| 6 |
+
box-sizing: border-box;
|
| 7 |
+
}
|
| 8 |
+
|
| 9 |
body {
|
| 10 |
+
font-family: 'Inter', sans-serif;
|
| 11 |
+
overflow-x: hidden;
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
h1, h2, h3, h4, h5, h6 {
|
| 15 |
+
font-family: 'Poppins', sans-serif;
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
/* Animations */
|
| 19 |
+
@keyframes float {
|
| 20 |
+
0%, 100% {
|
| 21 |
+
transform: translateY(0px);
|
| 22 |
+
}
|
| 23 |
+
50% {
|
| 24 |
+
transform: translateY(-20px);
|
| 25 |
+
}
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
@keyframes pulse-glow {
|
| 29 |
+
0%, 100% {
|
| 30 |
+
opacity: 1;
|
| 31 |
+
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
| 32 |
+
}
|
| 33 |
+
50% {
|
| 34 |
+
opacity: 0.8;
|
| 35 |
+
box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
|
| 36 |
+
}
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
@keyframes slide-up {
|
| 40 |
+
from {
|
| 41 |
+
transform: translateY(20px);
|
| 42 |
+
opacity: 0;
|
| 43 |
+
}
|
| 44 |
+
to {
|
| 45 |
+
transform: translateY(0);
|
| 46 |
+
opacity: 1;
|
| 47 |
+
}
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
@keyframes fade-in {
|
| 51 |
+
from {
|
| 52 |
+
opacity: 0;
|
| 53 |
+
}
|
| 54 |
+
to {
|
| 55 |
+
opacity: 1;
|
| 56 |
+
}
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
@keyframes constellation-spin {
|
| 60 |
+
from {
|
| 61 |
+
transform: rotate(0deg);
|
| 62 |
+
}
|
| 63 |
+
to {
|
| 64 |
+
transform: rotate(360deg);
|
| 65 |
+
}
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
.animate-float {
|
| 69 |
+
animation: float 6s ease-in-out infinite;
|
| 70 |
+
}
|
| 71 |
+
|
| 72 |
+
.animate-pulse-glow {
|
| 73 |
+
animation: pulse-glow 2s ease-in-out infinite;
|
| 74 |
+
}
|
| 75 |
+
|
| 76 |
+
.animate-slide-up {
|
| 77 |
+
animation: slide-up 0.6s ease-out forwards;
|
| 78 |
+
}
|
| 79 |
+
|
| 80 |
+
.animate-fade-in {
|
| 81 |
+
animation: fade-in 0.8s ease-out forwards;
|
| 82 |
+
}
|
| 83 |
+
|
| 84 |
+
.animate-constellation-spin {
|
| 85 |
+
animation: constellation-spin 20s linear infinite;
|
| 86 |
+
}
|
| 87 |
+
|
| 88 |
+
/* Network Visualization Styles */
|
| 89 |
+
.network-visualization {
|
| 90 |
+
position: relative;
|
| 91 |
+
border-radius: 50%;
|
| 92 |
+
background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
|
| 93 |
+
}
|
| 94 |
+
|
| 95 |
+
.network-visualization::before {
|
| 96 |
+
content: '';
|
| 97 |
+
position: absolute;
|
| 98 |
+
top: 50%;
|
| 99 |
+
left: 50%;
|
| 100 |
+
transform: translate(-50%, -50%);
|
| 101 |
+
width: 100%;
|
| 102 |
+
height: 100%;
|
| 103 |
+
border: 2px dashed rgba(59, 130, 246, 0.3);
|
| 104 |
+
border-radius: 50%;
|
| 105 |
+
animation: constellation-spin 40s linear infinite reverse;
|
| 106 |
+
}
|
| 107 |
+
|
| 108 |
+
.network-node {
|
| 109 |
+
position: absolute;
|
| 110 |
+
width: 12px;
|
| 111 |
+
height: 12px;
|
| 112 |
+
background: #3B82F6;
|
| 113 |
+
border-radius: 50%;
|
| 114 |
+
transform: translate(-50%, -50%);
|
| 115 |
+
animation: pulse-glow 3s ease-in-out infinite;
|
| 116 |
+
cursor: pointer;
|
| 117 |
+
transition: all 0.3s ease;
|
| 118 |
+
}
|
| 119 |
+
|
| 120 |
+
.network-node:hover {
|
| 121 |
+
transform: translate(-50%, -50%) scale(1.5);
|
| 122 |
+
background: #10B981;
|
| 123 |
+
}
|
| 124 |
+
|
| 125 |
+
.network-connection {
|
| 126 |
+
position: absolute;
|
| 127 |
+
background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(16, 185, 129, 0.4));
|
| 128 |
+
height: 2px;
|
| 129 |
+
transform-origin: 0 0;
|
| 130 |
+
}
|
| 131 |
+
|
| 132 |
+
/* Cooperative Card Styles */
|
| 133 |
+
.cooperative-card {
|
| 134 |
+
transition: all 0.3s ease;
|
| 135 |
+
border: 2px solid transparent;
|
| 136 |
+
}
|
| 137 |
+
|
| 138 |
+
.cooperative-card:hover {
|
| 139 |
+
transform: translateY(-8px);
|
| 140 |
+
border-color: #3B82F6;
|
| 141 |
+
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
|
| 142 |
+
}
|
| 143 |
+
|
| 144 |
+
/* Scroll Animation */
|
| 145 |
+
.reveal-on-scroll {
|
| 146 |
+
opacity: 0;
|
| 147 |
+
transform: translateY(30px);
|
| 148 |
+
transition: all 0.8s ease;
|
| 149 |
+
}
|
| 150 |
+
|
| 151 |
+
.reveal-on-scroll.visible {
|
| 152 |
+
opacity: 1;
|
| 153 |
+
transform: translateY(0);
|
| 154 |
+
}
|
| 155 |
+
|
| 156 |
+
/* Gradient Backgrounds */
|
| 157 |
+
.gradient-primary {
|
| 158 |
+
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
|
| 159 |
}
|
| 160 |
|
| 161 |
+
.gradient-secondary {
|
| 162 |
+
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
|
|
|
| 163 |
}
|
| 164 |
|
| 165 |
+
.gradient-dual {
|
| 166 |
+
background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
|
|
|
|
|
|
|
|
|
|
| 167 |
}
|
| 168 |
|
| 169 |
+
/* Custom Scrollbar */
|
| 170 |
+
::-webkit-scrollbar {
|
| 171 |
+
width: 10px;
|
|
|
|
|
|
|
|
|
|
| 172 |
}
|
| 173 |
|
| 174 |
+
::-webkit-scrollbar-track {
|
| 175 |
+
background: #f1f1f1;
|
| 176 |
+
border-radius: 5px;
|
| 177 |
}
|
| 178 |
+
|
| 179 |
+
::-webkit-scrollbar-thumb {
|
| 180 |
+
background: linear-gradient(to bottom, #3B82F6, #10B981);
|
| 181 |
+
border-radius: 5px;
|
| 182 |
+
}
|
| 183 |
+
|
| 184 |
+
::-webkit-scrollbar-thumb:hover {
|
| 185 |
+
background: linear-gradient(to bottom, #2563EB, #059669);
|
| 186 |
+
}
|