ORGANISATION-KA-INTERNATIONALE/o-k-i.net
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-11-05 17:32:17 +04:00
commit 0609bcceb5
34 changed files with 4748 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/_includes/layouts/base.njk
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% if title %}{{ title }} | {{ site.name }}{% else %}{{ site.name }} | {{ site.shortName }}{% endif %}</title>
<meta name="description" content="{{ description or site.description }}">
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
<link rel="icon" type="image/png" sizes="512x512" href="/assets/images/logo-512x512.png">
<link rel="apple-touch-icon" href="/assets/images/logo-512x512.png">
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
{% include "partials/nav.njk" %}
{{ content | safe }}
{% include "partials/footer.njk" %}
<script src="/assets/js/main.js"></script>
</body>
</html>
src/_includes/partials/contact.njk
+16
View File
@@ -0,0 +1,16 @@
<section class="contact" id="contact">
<div class="contact-grid">
{% for section in contact.sections %}
<div class="contact-card">
<h3>{{ section.title }}</h3>
<div class="contact-links">
{% for link in section.links %}
<a href="{{ link.url }}"{% if link.url.startsWith('http') %} target="_blank"{% endif %}>
{{ link.text }}
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</section>
src/_includes/partials/fediverse.njk
+22
View File
@@ -0,0 +1,22 @@
<section id="fediverse" class="fediverse">
<div class="section-container">
<h2>Nos Services <span class="accent-text">Fédiverse</span></h2>
<p class="section-subtitle">Alternatives libres et éthiques aux géants du numérique</p>
<div class="services-grid">
{% for service in services %}
<div class="service-card">
<div class="service-icon">{{ service.icon }}</div>
<h3>{{ service.name }}</h3>
<div class="service-platform">{{ service.platform }}</div>
<p class="service-description">
{{ service.description }}
</p>
<a href="{{ service.url }}" target="_blank" class="service-link">
{{ service.linkText }} →
</a>
</div>
{% endfor %}
</div>
</div>
</section>
src/_includes/partials/footer.njk
+18
View File
@@ -0,0 +1,18 @@
<footer>
<div class="footer-content">
<p style="font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem;">
{{ site.name }}
</p>
<p style="opacity: 0.8;">
Association à but non lucratif | Promotion des langues et cultures | Alternatives libres aux GAFAM
</p>
<p style="margin-top: 1rem; font-size: 0.9rem; opacity: 0.7;">
{{ site.copyright }} | {{ site.tagline }}
</p>
<p style="margin-top: 1rem;">
<a href="/mentions-legales/" style="color: var(--or-oki); text-decoration: none; transition: opacity 0.3s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
Mentions Légales
</a>
</p>
</div>
</footer>
src/_includes/partials/hero.njk
+24
View File
@@ -0,0 +1,24 @@
<section class="hero">
<div class="network-bg">
<div class="node" style="top: 20%; left: 10%;"></div>
<div class="node" style="top: 50%; left: 80%; animation-delay: 1s;"></div>
<div class="node" style="top: 70%; left: 30%; animation-delay: 2s;"></div>
<div class="node" style="top: 30%; left: 60%; animation-delay: 0.5s;"></div>
<div class="node" style="top: 80%; left: 70%; animation-delay: 1.5s;"></div>
</div>
<div class="hero-content">
<h1>ORGANISATION KA</h1>
<h2 class="hero-subtitle">INTERNATIONALE</h2>
<div class="hero-tags">
<span class="tag">🌍 Traductions</span>
<span class="tag">🎭 Cultures</span>
<span class="tag">📰 Actualités</span>
<span class="tag">🌐 Fédiverse</span>
</div>
<p>{{ site.description }}</p>
<div class="cta-buttons">
<a href="#fediverse" class="btn btn-primary">Découvrir nos Services</a>
<a href="#mission" class="btn btn-secondary">Notre Mission</a>
</div>
</div>
</section>
src/_includes/partials/hosting.njk
+84
View File
@@ -0,0 +1,84 @@
<section id="hebergement" class="hosting">
<div class="section-container">
<h2 style="text-align: center; margin-bottom: 3rem;">Services <span class="accent-text">d'Hébergement & Infrastructure</span></h2>
<div class="hosting-banner">
<h3>🚀 Solutions complètes pour votre souveraineté numérique</h3>
<p>OKI administre et sécurise les outils informatiques pour associations, collectifs et initiatives citoyennes.</p>
<div class="hosting-features">
<div class="hosting-feature">
<span>✓</span> Hébergement mutualisé sécurisé
</div>
<div class="hosting-feature">
<span>✓</span> Gestion de noms de domaine
</div>
<div class="hosting-feature">
<span>✓</span> Instances Fédiverse clé en main
</div>
<div class="hosting-feature">
<span>✓</span> Sauvegardes automatiques quotidiennes
</div>
<div class="hosting-feature">
<span>✓</span> Serveur mail inclus
</div>
<div class="hosting-feature">
<span>✓</span> Support technique
</div>
</div>
</div>
<div class="services-offerings">
<h3 style="text-align: center; color: var(--or-oki); margin: 3rem 0 2rem;">Nos offres de services</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 3rem;">
<div class="service-offering-card" style="background: rgba(0, 168, 84, 0.1); border: 2px solid var(--vert-oki); border-radius: 20px; padding: 2rem;">
<h4 style="color: var(--vert-oki); margin-bottom: 1rem;">📦 Hébergement Web</h4>
<ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
<li style="margin-bottom: 0.5rem;">• WordPress, Sites statiques</li>
<li style="margin-bottom: 0.5rem;">• Base de données MySQL/PostgreSQL</li>
<li style="margin-bottom: 0.5rem;">• Certificat SSL gratuit</li>
<li style="margin-bottom: 0.5rem;">• Stockage évolutif</li>
</ul>
<p style="color: var(--or-oki); font-weight: bold;">Mutualisé</p>
</div>
<div class="service-offering-card" style="background: rgba(237, 28, 76, 0.1); border: 2px solid var(--rouge-oki); border-radius: 20px; padding: 2rem;">
<h4 style="color: var(--rouge-oki); margin-bottom: 1rem;">🌐 Instances Fédiverse</h4>
<ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
<li style="margin-bottom: 0.5rem;">• PeerTube (vidéo)</li>
<li style="margin-bottom: 0.5rem;">• Mastodon/Pleroma (social)</li>
<li style="margin-bottom: 0.5rem;">• Funkwhale (audio)</li>
<li style="margin-bottom: 0.5rem;">• Pixelfed (photos)</li>
</ul>
<p style="color: var(--or-oki); font-weight: bold;">Installation & maintenance</p>
</div>
</div>
<div style="background: rgba(232, 166, 37, 0.1); border-radius: 15px; padding: 2rem; margin-bottom: 2rem;">
<h4 style="color: var(--or-oki); margin-bottom: 1rem;">🔐 Services de gestion sécurisée</h4>
<p style="margin-bottom: 1rem;">OKI peut assurer la gestion complète de vos propriétés numériques :</p>
<ul style="list-style: none; padding-left: 1rem;">
<li style="margin-bottom: 0.5rem;">✅ Propriété et gestion de noms de domaine</li>
<li style="margin-bottom: 0.5rem;">✅ Administration de comptes web (réseaux sociaux, emails)</li>
<li style="margin-bottom: 0.5rem;">✅ Gestion sécurisée des accès et mots de passe</li>
<li style="margin-bottom: 0.5rem;">✅ Protection contre les prises de contrôle internes</li>
<li style="margin-bottom: 0.5rem;">✅ Médiation en cas de conflits sur les outils numériques</li>
</ul>
</div>
<div style="text-align: center; margin-top: 3rem;">
<h4 style="color: var(--or-oki); margin-bottom: 1rem;">💡 Pourquoi choisir OKI ?</h4>
<p style="max-width: 800px; margin: 0 auto 2rem; line-height: 1.6;">
Notre équipe technique, composée d'experts engagés, garantit l'impartialité,
la sécurité et la pérennité de vos outils numériques. Nous mutualisons les coûts entre
projets solidaires pour des tarifs justes et accessibles.
</p>
<a href="#contact" class="btn btn-primary">
Contactez-nous →
</a>
</div>
</div>
</div>
</section>
src/_includes/partials/mission.njk
+19
View File
@@ -0,0 +1,19 @@
<section id="mission" class="mission">
<div class="section-container">
<h2>Notre <span class="accent-text">Mission</span></h2>
<p class="mission-text">
Soutenez notre mission de promotion de nos langues tout en contribuant à la diffusion d'une information libre et indépendante.
Votre soutien nous aide à maintenir des alternatives aux géants du numérique et à financer nos coûts de serveur.
</p>
<div class="values-grid">
{% for value in values %}
<div class="value-card">
<div class="value-icon">{{ value.icon }}</div>
<h3>{{ value.title }}</h3>
<p>{{ value.description }}</p>
</div>
{% endfor %}
</div>
</div>
</section>
src/_includes/partials/nav.njk
+22
View File
@@ -0,0 +1,22 @@
<nav>
<div class="nav-container">
<a href="/" class="logo logo-with-glow" style="display: flex; align-items: center; gap: 0.5rem;">
<img src="/assets/images/logo-512x512.png" alt="{{ site.shortName }} Logo" class="logo-image" style="height: 2.5rem; width: auto;">
<span>{{ site.shortName }}</span>
</a>
<ul class="nav-links">
{% for item in navigation %}
<li>
<a href="{{ item.url }}"{% if item.external %} target="_blank"{% endif %}>
{{ item.text }}
</a>
</li>
{% endfor %}
</ul>
<div class="menu-toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
src/_includes/partials/partners.njk
+23
View File
@@ -0,0 +1,23 @@
<section id="partenaires" class="partners">
<div class="section-container">
<h2 style="text-align: center; margin-bottom: 1rem;">Nos <span class="accent-text">Partenaires</span></h2>
<p class="section-subtitle">
Ils partagent nos valeurs et contribuent à enrichir notre écosystème numérique libre
</p>
<div class="partners-grid">
{% for partner in partners %}
<a href="{{ partner.url }}" target="_blank" rel="noopener noreferrer" class="partner-card">
<div class="partner-logo-container">
<img src="{{ partner.logo }}" alt="Logo {{ partner.name }}" class="partner-logo">
</div>
<h3>{{ partner.name }}</h3>
<p class="partner-description">{{ partner.description }}</p>
<span class="partner-link">
Découvrir sur GADE →
</span>
</a>
{% endfor %}
</div>
</div>
</section>
src/_includes/partials/projects.njk
+19
View File
@@ -0,0 +1,19 @@
<section id="projets" class="projects">
<div class="section-container">
<h2>Nos <span class="accent-text">Projets Web</span></h2>
<div class="project-cards">
{% for project in projects %}
<a href="{{ project.url }}" target="_blank" rel="noopener noreferrer" class="project-card" style="text-decoration: none; color: inherit;">
<div class="project-icon">{{ project.icon }}</div>
<h3>{{ project.name }}</h3>
<p class="project-domain">{{ project.domain }}</p>
<p>{{ project.description }}</p>
<span class="service-link" style="margin-top: 1rem;">
Visiter le site →
</span>
</a>
{% endfor %}
</div>
</div>
</section>
src/_includes/partials/support.njk
+149
View File
@@ -0,0 +1,149 @@
<section class="support">
<div class="section-container">
<h2>Nous <span class="accent-text">Soutenir</span></h2>
<p style="font-size: 1.3rem; margin-bottom: 1rem;">
Soutenez notre mission de promotion de nos langues et d'alternatives libres aux GAFAM
</p>
<p style="font-size: 1.1rem; margin-bottom: 3rem; opacity: 0.9;">
Votre don nous aide à maintenir nos services et à financer nos coûts de serveur.<br>
Chaque contribution renforce notre engagement envers la diversité linguistique, technologique et médiatique.
</p>
<!-- Donation Options Container -->
<div style="max-width: 900px; margin: 0 auto;">
<!-- One-time Donations -->
<div style="background: rgba(232, 166, 37, 0.1); border-radius: 20px; padding: 2rem; margin-bottom: 2rem;">
<h3 style="color: var(--or-oki); margin-bottom: 1.5rem; text-align: center;">
💸 Don ponctuel
</h3>
<div class="donation-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
<a href="https://don.o-k-i.net/b/aEUdTw5SD3SH7m0bII" class="donation-amount" target="_blank" rel="noopener noreferrer">
1€
</a>
<a href="https://don.o-k-i.net/b/4gw6r480L1Kz5dScMO" class="donation-amount" target="_blank" rel="noopener noreferrer">
5€
</a>
<a href="https://don.o-k-i.net/b/5kA02G1Cn4WLbCgeUV" class="donation-amount" target="_blank" rel="noopener noreferrer">
10€
</a>
<a href="https://don.o-k-i.net/b/fZebLo94PfBpayc5kn" class="donation-amount" target="_blank" rel="noopener noreferrer">
20€
</a>
<a href="https://don.o-k-i.net/b/6oE5n05SDdth49O004" class="donation-amount" target="_blank" rel="noopener noreferrer">
50€
</a>
</div>
<div style="text-align: center;">
<label style="display: block; margin-bottom: 1rem; color: var(--blanc-creme);">Montant personnalisé :</label>
<div class="custom-donation-form">
<input type="number" id="customAmountOneTime" placeholder="Montant" min="1" class="custom-amount-input">
<span class="currency-symbol">€</span>
<button onclick="handleCustomDonation('oneTime')" class="custom-donation-btn custom-donation-btn-primary" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
Donner
</button>
</div>
</div>
</div>
<!-- Monthly Donations -->
<div style="background: rgba(0, 168, 84, 0.1); border-radius: 20px; padding: 2rem;">
<h3 style="color: var(--vert-oki); margin-bottom: 1.5rem; text-align: center;">
⭐ Don mensuel
</h3>
<div class="donation-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
<a href="https://don.o-k-i.net/b/7sI9Dgch14WL7m0fZ3" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
1€/mois
</a>
<a href="https://don.o-k-i.net/b/8wM4iW4Ozbl95dS6ow" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
5€/mois
</a>
<a href="https://don.o-k-i.net/b/8wM2aO80L74TcGk3ci" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
10€/mois
</a>
<a href="https://don.o-k-i.net/b/00g7v894P88XgWAfZ7" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
20€/mois
</a>
<a href="https://don.o-k-i.net/b/4gw8zc6WHgFtcGkbIP" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
50€/mois
</a>
</div>
<div style="text-align: center;">
<label style="display: block; margin-bottom: 1rem; color: var(--blanc-creme);">Montant mensuel personnalisé :</label>
<div class="custom-donation-form">
<input type="number" id="customAmountMonthly" placeholder="Montant" min="1" class="custom-amount-input custom-amount-input-monthly">
<span class="currency-symbol">€/mois</span>
<button onclick="handleCustomDonation('monthly')" class="custom-donation-btn custom-donation-btn-secondary" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
S'abonner
</button>
</div>
</div>
</div>
</div>
<!-- Alternative Donation Methods -->
<div style="margin-top: 3rem;">
<h3 style="text-align: center; color: var(--or-oki); margin-bottom: 2rem; font-size: 1.5rem;">
Autres moyens de nous soutenir
</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 700px; margin: 0 auto;">
<!-- Liberapay -->
<a href="https://liberapay.com/OKI/donate" target="_blank" rel="noopener noreferrer" style="
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 2rem;
background: rgba(242, 179, 54, 0.1);
border: 2px solid #F2B336;
border-radius: 15px;
text-decoration: none;
transition: all 0.3s ease;
" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 30px rgba(242, 179, 54, 0.3)'" onmouseout="this.style.transform=''; this.style.boxShadow=''">
<div style="font-size: 3rem;">💛</div>
<h4 style="color: #F2B336; font-size: 1.3rem; margin: 0;">Liberapay</h4>
<p style="color: var(--blanc-creme); text-align: center; margin: 0; font-size: 0.95rem;">
Soutenez-nous via Liberapay, une plateforme libre et éthique
</p>
</a>
<!-- Ko-fi -->
<a href="https://ko-fi.com/J3J5TOZPI" target="_blank" rel="noopener noreferrer" style="
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 2rem;
background: rgba(255, 93, 93, 0.1);
border: 2px solid #FF5E5B;
border-radius: 15px;
text-decoration: none;
transition: all 0.3s ease;
" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 30px rgba(255, 93, 93, 0.3)'" onmouseout="this.style.transform=''; this.style.boxShadow=''">
<div style="font-size: 3rem;">☕</div>
<h4 style="color: #FF5E5B; font-size: 1.3rem; margin: 0;">Ko-fi</h4>
<p style="color: var(--blanc-creme); text-align: center; margin: 0; font-size: 0.95rem;">
Offrez-nous un café sur Ko-fi pour nous encourager
</p>
</a>
</div>
</div>
<div style="text-align: center; margin-top: 3rem; padding: 1.5rem; background: rgba(0, 0, 0, 0.3); border-radius: 15px;">
<p style="font-size: 0.95rem; margin-bottom: 0.5rem;">
🔒 Vos paiements sont sécurisés et traités de manière fiable par <a href="https://stripe.com/" target="_blank" style="color: var(--or-oki); text-decoration: none;">Stripe</a>.
</p>
<p style="font-size: 0.9rem; opacity: 0.8;">
Aucune information de paiement n'est stockée sur notre site.
</p>
</div>
</div>
</section>