first commit
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
{
|
||||
"sections": [
|
||||
{
|
||||
"title": "🌐 Web & Contact",
|
||||
"links": [
|
||||
{
|
||||
"text": "o-k-i.net",
|
||||
"url": "https://o-k-i.net"
|
||||
},
|
||||
{
|
||||
"text": "kontak@o-k-i.net",
|
||||
"url": "mailto:kontak@o-k-i.net"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "💬 Réseaux sociaux",
|
||||
"links": [
|
||||
{
|
||||
"text": "Telegram",
|
||||
"url": "https://t.me/OrganisationKA"
|
||||
},
|
||||
{
|
||||
"text": "X (Twitter)",
|
||||
"url": "https://x.com/OrganisationKA"
|
||||
},
|
||||
{
|
||||
"text": "Pleroma",
|
||||
"url": "https://bokantaj.o-k-i.net/@admin"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "🎥 Médias",
|
||||
"links": [
|
||||
{
|
||||
"text": "Chaîne PeerTube",
|
||||
"url": "https://gade.o-k-i.net/a/oki/video-channels"
|
||||
},
|
||||
{
|
||||
"text": "Discord",
|
||||
"url": "https://discord.gg/a2r9NYNM"
|
||||
},
|
||||
{
|
||||
"text": "Revolt",
|
||||
"url": "https://rvlt.gg/e1zJrg3p"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "💻 Code & Développement",
|
||||
"links": [
|
||||
{
|
||||
"text": "Codeberg",
|
||||
"url": "https://codeberg.org/OKI"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
[
|
||||
{
|
||||
"text": "Fédiverse",
|
||||
"url": "#fediverse"
|
||||
},
|
||||
{
|
||||
"text": "Projets Web",
|
||||
"url": "#projets"
|
||||
},
|
||||
{
|
||||
"text": "Mission",
|
||||
"url": "#mission"
|
||||
},
|
||||
{
|
||||
"text": "Hébergement",
|
||||
"url": "#hebergement"
|
||||
},
|
||||
{
|
||||
"text": "Partenaires",
|
||||
"url": "#partenaires"
|
||||
},
|
||||
{
|
||||
"text": "Codeberg",
|
||||
"url": "https://codeberg.org/OKI",
|
||||
"external": true
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"name": "Joukawouvè",
|
||||
"logo": "/assets/images/joukawouve.png",
|
||||
"description": "Partage de l'actualité guadeloupéenne et internationale.",
|
||||
"url": "https://gade.o-k-i.net/accounts/joukawouve"
|
||||
},
|
||||
{
|
||||
"name": "Aktivist Vybz #AKV",
|
||||
"logo": "/assets/images/akv.png",
|
||||
"description": "Sélecteurs et DJs engagés, avec un contenu axé sur l'activisme et l'expression culturelle.",
|
||||
"url": "https://gade.o-k-i.net/accounts/aktivist_vybz_akv"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,37 @@
|
||||
[
|
||||
{
|
||||
"name": "FEDIVERSE OKI",
|
||||
"icon": "🌐",
|
||||
"domain": "fediverse.o-k-i.net",
|
||||
"description": "Portail d'accès à tous nos services Fédiverse",
|
||||
"url": "https://fediverse.o-k-i.net/"
|
||||
},
|
||||
{
|
||||
"name": "OKI.RE",
|
||||
"icon": "🎶",
|
||||
"domain": "oki.re",
|
||||
"description": "Transcriptions et traductions de productions musicales",
|
||||
"url": "https://oki.re/"
|
||||
},
|
||||
{
|
||||
"name": "NUVEL.NU",
|
||||
"icon": "📰",
|
||||
"domain": "nuvel.nu",
|
||||
"description": "Actualités multilingues de nos régions",
|
||||
"url": "https://nuvel.nu/"
|
||||
},
|
||||
{
|
||||
"name": "JWE.OVH",
|
||||
"icon": "🎮",
|
||||
"domain": "jwe.ovh",
|
||||
"description": "Jeu cartographique éducatif et ludique",
|
||||
"url": "https://jwe.ovh/"
|
||||
},
|
||||
{
|
||||
"name": "GONG.GP",
|
||||
"icon": "📚",
|
||||
"domain": "gong.gp",
|
||||
"description": "Documents historiques du GONG",
|
||||
"url": "https://gong.gp/"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,34 @@
|
||||
[
|
||||
{
|
||||
"name": "KUTE",
|
||||
"icon": "🎙️",
|
||||
"platform": "Castopod",
|
||||
"description": "Alternative libre pour le podcasting. Créez, hébergez et diffusez vos podcasts en toute autonomie.",
|
||||
"url": "https://kute.o-k-i.net/",
|
||||
"linkText": "Découvrir KUTE"
|
||||
},
|
||||
{
|
||||
"name": "GADE",
|
||||
"icon": "📺",
|
||||
"platform": "PeerTube",
|
||||
"description": "Alternative libre à YouTube pour le partage de vidéos. Hébergez et partagez vos contenus vidéo en toute liberté.",
|
||||
"url": "https://gade.o-k-i.net/",
|
||||
"linkText": "Accéder à GADE"
|
||||
},
|
||||
{
|
||||
"name": "BOKANTAJ",
|
||||
"icon": "🐦",
|
||||
"platform": "Pleroma + Soapbox",
|
||||
"description": "Alternative libre à X (Twitter) pour les réseaux sociaux. Communiquez librement dans un espace respectueux.",
|
||||
"url": "https://bokantaj.o-k-i.net/",
|
||||
"linkText": "Rejoindre BOKANTAJ"
|
||||
},
|
||||
{
|
||||
"name": "MIZIK",
|
||||
"icon": "🎵",
|
||||
"platform": "Funkwhale",
|
||||
"description": "Alternative libre à SoundCloud pour la musique. Partagez et découvrez de la musique sans limites.",
|
||||
"url": "https://mizik.o-k-i.net/library",
|
||||
"linkText": "Écouter sur MIZIK"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "ORGANISATION KA INTERNATIONALE",
|
||||
"shortName": "OKI",
|
||||
"description": "Association à but non lucratif dédiée à la promotion de nos langues et au traitement de l'actualité, proposant des alternatives libres aux GAFAM.",
|
||||
"url": "https://o-k-i.net",
|
||||
"email": "kontak@o-k-i.net",
|
||||
"copyright": "© 2025 ORGANISATION KA INTERNATIONALE",
|
||||
"tagline": "Hébergé avec 💛"
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
[
|
||||
{
|
||||
"icon": "🌍",
|
||||
"title": "Langues",
|
||||
"description": "Promotion et préservation de nos langues"
|
||||
},
|
||||
{
|
||||
"icon": "🔓",
|
||||
"title": "Liberté",
|
||||
"description": "Logiciels libres et données ouvertes"
|
||||
},
|
||||
{
|
||||
"icon": "🤝",
|
||||
"title": "Communauté",
|
||||
"description": "Ensemble pour un internet éthique"
|
||||
},
|
||||
{
|
||||
"icon": "🛡️",
|
||||
"title": "Souveraineté",
|
||||
"description": "Contrôle de nos données et infrastructures"
|
||||
}
|
||||
]
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,829 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Couleurs du logo OKI */
|
||||
--or-oki: #E8A625;
|
||||
--noir-oki: #000000;
|
||||
--vert-oki: #00A854;
|
||||
--rouge-oki: #ED1C4C;
|
||||
--blanc-creme: #F7F7F2;
|
||||
|
||||
/* Couleurs dérivées pour le design */
|
||||
--noir-profond: #1A1A1A;
|
||||
--gris-sombre: #2A2A2A;
|
||||
--or-clair: #F5BD4F;
|
||||
--vert-clair: #00C569;
|
||||
--rouge-clair: #FF2D5F;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: linear-gradient(135deg, var(--noir-oki) 0%, var(--gris-sombre) 100%);
|
||||
color: var(--blanc-creme);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 2px solid var(--or-oki);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, var(--or-oki), var(--or-clair));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
filter: drop-shadow(0 0 8px rgba(232, 166, 37, 0.6))
|
||||
drop-shadow(0 0 15px rgba(232, 166, 37, 0.4))
|
||||
drop-shadow(0 0 25px rgba(232, 166, 37, 0.2));
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
.logo-with-glow:hover .logo-image {
|
||||
filter: drop-shadow(0 0 12px rgba(232, 166, 37, 0.8))
|
||||
drop-shadow(0 0 20px rgba(232, 166, 37, 0.6))
|
||||
drop-shadow(0 0 35px rgba(232, 166, 37, 0.4));
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--blanc-creme);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--or-oki);
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-toggle span {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background: var(--or-oki);
|
||||
margin: 3px 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
padding: 8rem 2rem 4rem;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2rem, 6vw, 4rem);
|
||||
font-weight: 900;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.1;
|
||||
animation: fadeInUp 0.8s ease;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||
margin-bottom: 1rem;
|
||||
color: var(--or-oki);
|
||||
animation: fadeInUp 0.8s ease 0.1s both;
|
||||
}
|
||||
|
||||
.accent-text {
|
||||
background: linear-gradient(135deg, var(--or-oki), var(--rouge-oki));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
max-width: 700px;
|
||||
animation: fadeInUp 0.8s ease 0.2s both;
|
||||
}
|
||||
|
||||
.hero-tags {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.8s ease 0.3s both;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(232, 166, 37, 0.2);
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid var(--or-oki);
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
animation: fadeInUp 0.8s ease 0.4s both;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--or-oki), var(--or-clair));
|
||||
color: var(--noir-oki);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 30px rgba(232, 166, 37, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--or-oki);
|
||||
border: 2px solid var(--or-oki);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--or-oki);
|
||||
color: var(--noir-oki);
|
||||
}
|
||||
|
||||
/* Network Animation */
|
||||
.network-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.node {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: var(--or-oki);
|
||||
border-radius: 50%;
|
||||
animation: pulse 3s infinite;
|
||||
}
|
||||
|
||||
/* Fediverse Services Section */
|
||||
.fediverse {
|
||||
padding: 4rem 2rem;
|
||||
background: var(--noir-profond);
|
||||
}
|
||||
|
||||
.section-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.fediverse h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: rgba(0, 168, 84, 0.1);
|
||||
border: 2px solid var(--vert-oki);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--vert-oki), var(--or-oki));
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 168, 84, 0.3);
|
||||
background: rgba(0, 168, 84, 0.15);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
color: var(--or-oki);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.service-platform {
|
||||
color: var(--vert-oki);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service-description {
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.service-link {
|
||||
color: var(--or-oki);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: gap 0.3s ease;
|
||||
}
|
||||
|
||||
.service-link:hover {
|
||||
gap: 1rem;
|
||||
color: var(--or-clair);
|
||||
}
|
||||
|
||||
/* Web Projects Section */
|
||||
.projects {
|
||||
padding: 4rem 2rem;
|
||||
background: linear-gradient(135deg, var(--noir-profond) 0%, var(--gris-sombre) 100%);
|
||||
}
|
||||
|
||||
.projects h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.project-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 20px;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
text-align: center;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--or-oki);
|
||||
box-shadow: 0 20px 40px rgba(232, 166, 37, 0.2);
|
||||
}
|
||||
|
||||
.project-card h3 {
|
||||
color: var(--or-oki);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.project-domain {
|
||||
color: var(--rouge-oki);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.project-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Mission Section */
|
||||
.mission {
|
||||
padding: 4rem 2rem;
|
||||
background: var(--noir-profond);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mission h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mission-text {
|
||||
font-size: 1.3rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 3rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.values-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.value-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 2rem;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(232, 166, 37, 0.2);
|
||||
}
|
||||
|
||||
.value-card:hover {
|
||||
transform: translateY(-5px);
|
||||
background: rgba(232, 166, 37, 0.1);
|
||||
border-color: var(--or-oki);
|
||||
}
|
||||
|
||||
.value-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.value-card h3 {
|
||||
color: var(--or-oki);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
/* Hosting Services Section */
|
||||
.hosting {
|
||||
padding: 4rem 2rem;
|
||||
background: linear-gradient(135deg, var(--gris-sombre) 0%, var(--noir-profond) 100%);
|
||||
}
|
||||
|
||||
.hosting-banner {
|
||||
background: rgba(232, 166, 37, 0.1);
|
||||
border: 2px solid var(--or-oki);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hosting-banner h3 {
|
||||
color: var(--or-oki);
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hosting-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.hosting-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.hosting-feature span {
|
||||
color: var(--vert-oki);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Partners Section */
|
||||
.partners {
|
||||
padding: 4rem 2rem;
|
||||
background: linear-gradient(135deg, var(--gris-sombre) 0%, var(--noir-profond) 100%);
|
||||
}
|
||||
|
||||
.partners h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.partners-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.partner-card {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.partner-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--or-oki);
|
||||
box-shadow: 0 20px 40px rgba(232, 166, 37, 0.2);
|
||||
}
|
||||
|
||||
.partner-logo-container {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 50%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.partner-logo {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.partner-card h3 {
|
||||
color: var(--or-oki);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.partner-description {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.partner-link {
|
||||
color: var(--or-oki);
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: gap 0.3s ease;
|
||||
}
|
||||
|
||||
.partner-card:hover .partner-link {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Support Section */
|
||||
.support {
|
||||
padding: 4rem 2rem;
|
||||
background: var(--noir-profond);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.support h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.support-options {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contact {
|
||||
padding: 3rem 2rem;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-card h3 {
|
||||
color: var(--or-oki);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-links a {
|
||||
color: var(--blanc-creme);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.contact-links a:hover {
|
||||
color: var(--or-oki);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 2rem;
|
||||
background: var(--noir-oki);
|
||||
text-align: center;
|
||||
border-top: 2px solid var(--or-oki);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Donation Styles */
|
||||
.donation-amount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
background: rgba(232, 166, 37, 0.2);
|
||||
border: 2px solid var(--or-oki);
|
||||
color: var(--blanc-creme);
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.donation-amount:hover {
|
||||
background: var(--or-oki);
|
||||
color: var(--noir-oki);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 5px 15px rgba(232, 166, 37, 0.4);
|
||||
}
|
||||
|
||||
.donation-amount.monthly {
|
||||
background: rgba(0, 168, 84, 0.2);
|
||||
border-color: var(--vert-oki);
|
||||
}
|
||||
|
||||
.donation-amount.monthly:hover {
|
||||
background: var(--vert-oki);
|
||||
color: var(--blanc-creme);
|
||||
box-shadow: 0 5px 15px rgba(0, 168, 84, 0.4);
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--or-oki);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Custom Donation Form */
|
||||
.custom-donation-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 350px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.custom-amount-input {
|
||||
padding: 0.8rem;
|
||||
border: 2px solid var(--or-oki);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--blanc-creme);
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.custom-amount-input-monthly {
|
||||
border-color: var(--vert-oki);
|
||||
}
|
||||
|
||||
.currency-symbol {
|
||||
color: var(--blanc-creme);
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.custom-donation-btn {
|
||||
padding: 0.8rem 1.2rem;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.custom-donation-btn-primary {
|
||||
background: var(--or-oki);
|
||||
color: var(--noir-oki);
|
||||
}
|
||||
|
||||
.custom-donation-btn-secondary {
|
||||
background: var(--vert-oki);
|
||||
color: var(--blanc-creme);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.services-grid,
|
||||
.project-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Custom Donation Form Mobile */
|
||||
.custom-donation-form {
|
||||
gap: 0.4rem;
|
||||
padding: 0 0.5rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.custom-amount-input {
|
||||
padding: 0.6rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.currency-symbol {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.custom-donation-btn {
|
||||
padding: 0.6rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
/* Very small screens */
|
||||
.custom-donation-form {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.custom-amount-input {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.custom-donation-btn {
|
||||
padding: 0.5rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -0,0 +1,229 @@
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Mobile menu toggle
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
let menuOpen = false;
|
||||
|
||||
menuToggle?.addEventListener('click', () => {
|
||||
menuOpen = !menuOpen;
|
||||
if (menuOpen) {
|
||||
navLinks.style.display = 'flex';
|
||||
navLinks.style.position = 'absolute';
|
||||
navLinks.style.top = '100%';
|
||||
navLinks.style.left = '0';
|
||||
navLinks.style.right = '0';
|
||||
navLinks.style.background = 'rgba(0, 0, 0, 0.98)';
|
||||
navLinks.style.flexDirection = 'column';
|
||||
navLinks.style.padding = '1rem';
|
||||
navLinks.style.borderTop = '2px solid #E8A625';
|
||||
|
||||
// Animate menu toggle
|
||||
menuToggle.children[0].style.transform = 'rotate(45deg) translateY(8px)';
|
||||
menuToggle.children[1].style.opacity = '0';
|
||||
menuToggle.children[2].style.transform = 'rotate(-45deg) translateY(-8px)';
|
||||
} else {
|
||||
navLinks.style.display = 'none';
|
||||
|
||||
// Reset menu toggle
|
||||
menuToggle.children[0].style.transform = '';
|
||||
menuToggle.children[1].style.opacity = '1';
|
||||
menuToggle.children[2].style.transform = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (menuOpen && !menuToggle.contains(e.target) && !navLinks.contains(e.target)) {
|
||||
menuOpen = false;
|
||||
navLinks.style.display = 'none';
|
||||
menuToggle.children[0].style.transform = '';
|
||||
menuToggle.children[1].style.opacity = '1';
|
||||
menuToggle.children[2].style.transform = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -100px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.animation = 'fadeInUp 0.8s ease both';
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe all cards
|
||||
document.querySelectorAll('.service-card, .project-card, .value-card').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Navbar scroll effect
|
||||
let lastScroll = 0;
|
||||
const nav = document.querySelector('nav');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > 100) {
|
||||
nav.style.background = 'rgba(0, 0, 0, 0.98)';
|
||||
nav.style.boxShadow = '0 2px 20px rgba(232, 166, 37, 0.3)';
|
||||
} else {
|
||||
nav.style.background = 'rgba(0, 0, 0, 0.95)';
|
||||
nav.style.boxShadow = '';
|
||||
}
|
||||
|
||||
// Hide/show navbar on scroll
|
||||
if (currentScroll > lastScroll && currentScroll > 500) {
|
||||
nav.style.transform = 'translateY(-100%)';
|
||||
} else {
|
||||
nav.style.transform = 'translateY(0)';
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
|
||||
// Network animation enhancement
|
||||
function createNetworkLine() {
|
||||
const nodes = document.querySelectorAll('.node');
|
||||
const networkBg = document.querySelector('.network-bg');
|
||||
|
||||
if (nodes.length > 1 && networkBg) {
|
||||
for (let i = 0; i < nodes.length - 1; i++) {
|
||||
const line = document.createElement('div');
|
||||
line.style.position = 'absolute';
|
||||
line.style.height = '1px';
|
||||
line.style.background = 'linear-gradient(90deg, transparent, #E8A625, transparent)';
|
||||
line.style.opacity = '0.2';
|
||||
line.style.animation = `pulse 4s infinite ${i * 0.5}s`;
|
||||
|
||||
const node1 = nodes[i];
|
||||
const node2 = nodes[i + 1];
|
||||
|
||||
// Calculate line position and angle
|
||||
const x1 = parseFloat(node1.style.left);
|
||||
const y1 = parseFloat(node1.style.top);
|
||||
const x2 = parseFloat(node2.style.left);
|
||||
const y2 = parseFloat(node2.style.top);
|
||||
|
||||
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
|
||||
const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
|
||||
|
||||
line.style.width = distance + '%';
|
||||
line.style.left = x1 + '%';
|
||||
line.style.top = y1 + '%';
|
||||
line.style.transform = `rotate(${angle}deg)`;
|
||||
line.style.transformOrigin = '0 0';
|
||||
|
||||
networkBg.appendChild(line);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize network lines
|
||||
createNetworkLine();
|
||||
|
||||
// Dynamic typing effect for hero subtitle
|
||||
const subtitle = document.querySelector('.hero-subtitle');
|
||||
if (subtitle) {
|
||||
const text = subtitle.textContent;
|
||||
subtitle.textContent = '';
|
||||
let index = 0;
|
||||
|
||||
function typeWriter() {
|
||||
if (index < text.length) {
|
||||
subtitle.textContent += text.charAt(index);
|
||||
index++;
|
||||
setTimeout(typeWriter, 100);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(typeWriter, 800);
|
||||
}
|
||||
|
||||
// Add hover effect to project cards with tilt
|
||||
document.querySelectorAll('.project-card, .service-card').forEach(card => {
|
||||
card.addEventListener('mousemove', (e) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
|
||||
const rotateX = (y - centerY) / 20;
|
||||
const rotateY = (centerX - x) / 20;
|
||||
|
||||
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Easter egg: Konami code
|
||||
const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
|
||||
let konamiIndex = 0;
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === konamiCode[konamiIndex]) {
|
||||
konamiIndex++;
|
||||
if (konamiIndex === konamiCode.length) {
|
||||
document.body.style.animation = 'pulse 1s';
|
||||
setTimeout(() => {
|
||||
alert('🎮 Félicitations! Vous avez trouvé le code secret! Bienvenue dans la résistance numérique!');
|
||||
document.body.style.animation = '';
|
||||
}, 1000);
|
||||
konamiIndex = 0;
|
||||
}
|
||||
} else {
|
||||
konamiIndex = 0;
|
||||
}
|
||||
});
|
||||
|
||||
// Progressive enhancement: Add loading states
|
||||
// Disabled - not needed for external links
|
||||
// document.querySelectorAll('.service-link, .project-card').forEach(link => {
|
||||
// link.addEventListener('click', function(e) {
|
||||
// if (this.href && this.href !== '#') {
|
||||
// this.style.opacity = '0.6';
|
||||
// this.innerHTML += ' ⌛';
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
// Custom donation handler
|
||||
function handleCustomDonation(type) {
|
||||
const input = document.getElementById(type === 'oneTime' ? 'customAmountOneTime' : 'customAmountMonthly');
|
||||
const amount = input.value;
|
||||
|
||||
if (!amount || amount < 1) {
|
||||
alert('Veuillez entrer un montant valide');
|
||||
return;
|
||||
}
|
||||
|
||||
// Redirect to custom amount Stripe URL
|
||||
const stripeUrl = type === 'oneTime'
|
||||
? 'https://don.o-k-i.net/b/6oE2aO94P88X9u8eV4' // Custom one-time donation
|
||||
: 'https://don.o-k-i.net/b/6oE2aO94P88X9u8eV4'; // Uses same link for custom amounts
|
||||
|
||||
window.location.href = stripeUrl;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
---
|
||||
|
||||
{% include "partials/hero.njk" %}
|
||||
{% include "partials/fediverse.njk" %}
|
||||
{% include "partials/projects.njk" %}
|
||||
{% include "partials/mission.njk" %}
|
||||
{% include "partials/hosting.njk" %}
|
||||
{% include "partials/support.njk" %}
|
||||
{% include "partials/partners.njk" %}
|
||||
{% include "partials/contact.njk" %}
|
||||
@@ -0,0 +1,227 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
title: Mentions Légales
|
||||
---
|
||||
|
||||
<section style="padding: 8rem 2rem 4rem; min-height: 100vh; background: linear-gradient(135deg, var(--noir-profond) 0%, var(--gris-sombre) 100%);">
|
||||
<div class="section-container" style="max-width: 900px;">
|
||||
<h1 style="font-size: 2.5rem; margin-bottom: 3rem; text-align: center;">
|
||||
<span class="accent-text">Mentions Légales</span>
|
||||
</h1>
|
||||
|
||||
<!-- Présentation du site -->
|
||||
<div style="background: rgba(232, 166, 37, 0.1); border-left: 4px solid var(--or-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
|
||||
<h2 style="color: var(--or-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
|
||||
1. Présentation du site
|
||||
</h2>
|
||||
<p style="margin-bottom: 1rem; line-height: 1.6;">
|
||||
En vertu de l'article 6 de la loi n° 2004-575 du 21 juin 2004 pour la confiance dans l'économie numérique,
|
||||
il est précisé aux utilisateurs du site internet <strong>o-k-i.net</strong> l'identité des différents intervenants
|
||||
dans le cadre de sa réalisation et de son suivi :
|
||||
</p>
|
||||
<ul style="list-style: none; padding: 0; margin: 1.5rem 0;">
|
||||
<li style="margin-bottom: 1rem;">
|
||||
<strong style="color: var(--or-oki);">Propriétaire :</strong><br>
|
||||
ORGANISATION KA INTERNATIONALE<br>
|
||||
36 Rue Lethière, 97100 Basse-Terre
|
||||
</li>
|
||||
<li style="margin-bottom: 1rem;">
|
||||
<strong style="color: var(--or-oki);">Responsable publication :</strong><br>
|
||||
ORGANISATION KA INTERNATIONALE<br>
|
||||
Contact : <a href="mailto:kontak@o-k-i.net" style="color: var(--or-oki); text-decoration: none;">kontak@o-k-i.net</a>
|
||||
</li>
|
||||
<li style="margin-bottom: 1rem;">
|
||||
<strong style="color: var(--or-oki);">Webmaster :</strong><br>
|
||||
Cédric FAMIBELLE-PRONZOLA<br>
|
||||
Contact : <a href="mailto:contact@cedric-pronzola.re" style="color: var(--or-oki); text-decoration: none;">contact@cedric-pronzola.re</a>
|
||||
</li>
|
||||
<li style="margin-bottom: 1rem;">
|
||||
<strong style="color: var(--or-oki);">Hébergeur :</strong><br>
|
||||
OVH<br>
|
||||
2 rue Kellermann, 59100 Roubaix
|
||||
</li>
|
||||
<li style="margin-bottom: 1rem;">
|
||||
<strong style="color: var(--or-oki);">Délégué à la protection des données :</strong><br>
|
||||
ORGANISATION KA INTERNATIONALE<br>
|
||||
Contact : <a href="mailto:kontak@o-k-i.net" style="color: var(--or-oki); text-decoration: none;">kontak@o-k-i.net</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Conditions générales d'utilisation -->
|
||||
<div style="background: rgba(0, 168, 84, 0.1); border-left: 4px solid var(--vert-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
|
||||
<h2 style="color: var(--vert-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
|
||||
2. Conditions générales d'utilisation du site et des services proposés
|
||||
</h2>
|
||||
<p style="line-height: 1.6;">
|
||||
Le site est protégé par les dispositions relatives à la propriété intellectuelle.
|
||||
L'utilisation du site implique l'acceptation pleine et entière des conditions générales d'utilisation ci-après décrites.
|
||||
Ces conditions d'utilisation sont susceptibles d'être modifiées ou complétées à tout moment.
|
||||
</p>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
Les utilisateurs du site ne peuvent pas réutiliser ou exploiter les éléments du site sans autorisation préalable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Description des services -->
|
||||
<div style="background: rgba(237, 28, 76, 0.1); border-left: 4px solid var(--rouge-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
|
||||
<h2 style="color: var(--rouge-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
|
||||
3. Description des services fournis
|
||||
</h2>
|
||||
<p style="line-height: 1.6;">
|
||||
Le site <strong>o-k-i.net</strong> a pour objet de fournir une information concernant l'ensemble des activités de l'Organisation Ka Internationale.
|
||||
</p>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
ORGANISATION KA INTERNATIONALE s'efforce de fournir des informations aussi précises que possible.
|
||||
Toutefois, il ne pourra être tenu responsable des oublis, des inexactitudes et des carences dans la mise à jour,
|
||||
qu'elles soient de son fait ou du fait des tiers partenaires qui lui fournissent ces informations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Limitations techniques -->
|
||||
<div style="background: rgba(232, 166, 37, 0.1); border-left: 4px solid var(--or-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
|
||||
<h2 style="color: var(--or-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
|
||||
4. Limitations techniques
|
||||
</h2>
|
||||
<p style="line-height: 1.6;">
|
||||
Le site utilise la technologie JavaScript. Le site est hébergé dans l'Union Européenne conformément au RGPD.
|
||||
</p>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
ORGANISATION KA INTERNATIONALE ne pourra être tenue responsable de dommages matériels liés à l'utilisation du site.
|
||||
De plus, l'utilisateur du site s'engage à accéder au site en utilisant un matériel récent, ne contenant pas de virus
|
||||
et avec un navigateur de dernière génération mis à jour.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Propriété intellectuelle et licences -->
|
||||
<div style="background: rgba(0, 168, 84, 0.1); border-left: 4px solid var(--vert-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
|
||||
<h2 style="color: var(--vert-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
|
||||
5. Propriété intellectuelle et licences
|
||||
</h2>
|
||||
<p style="line-height: 1.6;">
|
||||
Le code source du site <strong>o-k-i.net</strong> est distribué sous licence <strong>GNU Affero General Public License v3.0 (AGPL-V3)</strong>,
|
||||
une licence libre qui garantit les libertés suivantes :
|
||||
</p>
|
||||
<ul style="list-style: disc; padding-left: 2rem; margin: 1rem 0;">
|
||||
<li style="margin-bottom: 0.5rem;">La liberté d'utiliser le logiciel à toute fin</li>
|
||||
<li style="margin-bottom: 0.5rem;">La liberté d'étudier le fonctionnement du programme et de l'adapter</li>
|
||||
<li style="margin-bottom: 0.5rem;">La liberté de redistribuer des copies</li>
|
||||
<li style="margin-bottom: 0.5rem;">La liberté d'améliorer le programme et de publier ces améliorations</li>
|
||||
</ul>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
Cette licence garantit que toute modification du code source doit être publiée sous la même licence AGPL-V3.
|
||||
Si vous utilisez ce code pour fournir un service en ligne, vous devez également rendre le code source modifié
|
||||
disponible aux utilisateurs de ce service.
|
||||
</p>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
Le texte complet de la licence est disponible sur :
|
||||
<a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" style="color: var(--or-oki); text-decoration: none;">
|
||||
https://www.gnu.org/licenses/agpl-3.0.html
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
Les contenus textuels et visuels originaux du site (hors code source) restent la propriété de
|
||||
ORGANISATION KA INTERNATIONALE. Leur utilisation est soumise aux conditions de la licence AGPL-V3 pour
|
||||
les éléments techniques, et requiert une autorisation pour les autres usages.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Limitations de responsabilité -->
|
||||
<div style="background: rgba(237, 28, 76, 0.1); border-left: 4px solid var(--rouge-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
|
||||
<h2 style="color: var(--rouge-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
|
||||
6. Limitations de responsabilité
|
||||
</h2>
|
||||
<p style="line-height: 1.6;">
|
||||
ORGANISATION KA INTERNATIONALE ne pourra être tenue responsable des dommages directs et indirects causés au
|
||||
matériel de l'utilisateur, lors de l'accès au site o-k-i.net, et résultant soit de l'utilisation d'un matériel
|
||||
ne répondant pas aux spécifications indiquées au point 4, soit de l'apparition d'un bug ou d'une incompatibilité.
|
||||
</p>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
ORGANISATION KA INTERNATIONALE ne pourra également être tenue responsable des dommages indirects (tels par exemple
|
||||
qu'une perte de marché ou perte d'une chance) consécutifs à l'utilisation du site o-k-i.net.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Gestion des données personnelles -->
|
||||
<div style="background: rgba(232, 166, 37, 0.1); border-left: 4px solid var(--or-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
|
||||
<h2 style="color: var(--or-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
|
||||
7. Gestion des données personnelles
|
||||
</h2>
|
||||
<p style="line-height: 1.6;">
|
||||
En France, les données personnelles sont notamment protégées par le Règlement européen 2016/679 du 27 avril 2016
|
||||
relatif à la protection des personnes physiques à l'égard du traitement des données à caractère personnel (RGPD).
|
||||
</p>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
Les données à caractère personnel recueillies sur le site o-k-i.net sont traitées pour les finalités suivantes :
|
||||
</p>
|
||||
<ul style="list-style: disc; padding-left: 2rem; margin: 1rem 0;">
|
||||
<li style="margin-bottom: 0.5rem;">Navigation sur le site</li>
|
||||
<li style="margin-bottom: 0.5rem;">Prévention de la fraude informatique</li>
|
||||
<li style="margin-bottom: 0.5rem;">Amélioration et optimisation de la navigation</li>
|
||||
<li style="margin-bottom: 0.5rem;">Mesure d'audience et statistiques</li>
|
||||
</ul>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
En application de ces dispositions, vous disposez d'un droit d'accès, de rectification, d'effacement et de
|
||||
portabilité de vos données personnelles. Vous pouvez exercer ces droits en contactant :
|
||||
<a href="mailto:kontak@o-k-i.net" style="color: var(--or-oki); text-decoration: none;">kontak@o-k-i.net</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Notification d'incident -->
|
||||
<div style="background: rgba(0, 168, 84, 0.1); border-left: 4px solid var(--vert-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
|
||||
<h2 style="color: var(--vert-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
|
||||
8. Notification d'incident
|
||||
</h2>
|
||||
<p style="line-height: 1.6;">
|
||||
Quels que soient les efforts fournis, aucune méthode de transmission sur Internet et aucune méthode de stockage
|
||||
électronique n'est complètement sûre. Nous ne pouvons en conséquence pas garantir une sécurité absolue.
|
||||
</p>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
Si nous prenions connaissance d'une brèche de la sécurité, nous avertirions les utilisateurs concernés afin
|
||||
qu'ils puissent prendre les mesures appropriées. Nos procédures de notification d'incident tiennent compte de
|
||||
nos obligations légales, qu'elles se situent au niveau national ou européen. Nous nous engageons à informer
|
||||
pleinement nos clients de toutes les questions relevant de la sécurité de leur compte et à leur fournir toutes
|
||||
les informations nécessaires pour les aider à respecter leurs propres obligations réglementaires en matière
|
||||
de reporting.
|
||||
</p>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
Les systèmes de sécurité mis en place comprennent : pare-feu, chiffrement, pseudonymisation et mesures de
|
||||
sécurité physiques.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Cookies -->
|
||||
<div style="background: rgba(237, 28, 76, 0.1); border-left: 4px solid var(--rouge-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
|
||||
<h2 style="color: var(--rouge-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
|
||||
9. Cookies et balises web
|
||||
</h2>
|
||||
<p style="line-height: 1.6;">
|
||||
Le site peut utiliser des cookies pour améliorer l'expérience utilisateur. L'utilisateur peut désactiver
|
||||
les cookies dans les paramètres de son navigateur.
|
||||
</p>
|
||||
<p style="margin-top: 1rem; line-height: 1.6;">
|
||||
Certaines pages peuvent contenir des balises web (pixels invisibles) permettant notamment de mesurer
|
||||
l'audience et la performance du site.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Droit applicable et juridiction -->
|
||||
<div style="background: rgba(232, 166, 37, 0.1); border-left: 4px solid var(--or-oki); padding: 2rem; margin-bottom: 2rem; border-radius: 10px;">
|
||||
<h2 style="color: var(--or-oki); margin-bottom: 1.5rem; font-size: 1.8rem;">
|
||||
10. Droit applicable et juridiction compétente
|
||||
</h2>
|
||||
<p style="line-height: 1.6;">
|
||||
Tout litige en relation avec l'utilisation du site o-k-i.net est soumis au droit français.
|
||||
En dehors des cas où la loi ne le permet pas, il est fait attribution exclusive de juridiction
|
||||
aux tribunaux compétents de Guadeloupe.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Retour à l'accueil -->
|
||||
<div style="text-align: center; margin-top: 3rem;">
|
||||
<a href="/" class="btn btn-primary">
|
||||
← Retour à l'accueil
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user