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

refactor: migrer les partials vers le contenu localisé

Browse Source
This commit is contained in:
cedric
2026-07-06 08:14:52 +04:00
parent b4c7d557b6
commit b90228e0bd
16 changed files with 156 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/_includes/partials/clients.njk
+4 -4
View File
@@ -1,12 +1,12 @@
<section id="clients" class="partners">
<div class="section-container">
<h2>Ils nous ont <span class="accent-text">fait confiance</span></h2>
<h2>{{ t.clients.section_title }} <span class="accent-text">{{ t.clients.section_title_accent }}</span></h2>
<p class="section-subtitle">
Des organisations engagées qui ont choisi OKI pour construire leur présence numérique
{{ t.clients.section_subtitle }}
</p>
<div class="partners-grid">
{% for client in clients %}
{% for client in t.clients.items %}
<a href="{{ client.url }}" target="_blank" rel="noopener noreferrer" class="partner-card">
<div class="partner-logo-container">
<img src="{{ client.logo }}" alt="Logo {{ client.name }}" class="partner-logo">
@@ -15,7 +15,7 @@
<p class="project-domain">{{ client.domain }}</p>
<p class="partner-description">{{ client.description }}</p>
<span class="partner-link">
Visiter le site →
{{ t.clients.link_text }} →
</span>
</a>
{% endfor %}
src/_includes/partials/contact.njk
+3 -3
View File
@@ -1,12 +1,12 @@
<section class="contact" id="contact">
<div class="section-container">
<h2>Envie de passer à l'action ?</h2>
<h2>{{ t.contact.title }}</h2>
<p class="contact-lede">
« Mais je sais pas par où commencer ! » Aucun souci ! On t'accompagne pas à pas. Un message sur nos réseaux, un mail à <a href="mailto:kontak@o-k-i.net">kontak@o-k-i.net</a>, et on te montre comment ton talent peut changer les choses. Même si c'est juste une idée dans ta tête – chez nous, les idées deviennent des actions.
{{ t.contact.lede | safe }}
</p>
</div>
<div class="contact-grid">
{% for section in contact.sections %}
{% for section in t.contact.sections %}
<div class="contact-card">
<h3>{{ section.title }}</h3>
<div class="contact-links">
src/_includes/partials/djangokam.njk
+13 -13
View File
@@ -1,32 +1,32 @@
<section id="djangokam" class="djangokam">
<div class="section-container">
<p class="djangokam-surtitre">{{ djangokam.surtitre }}</p>
<h2>{{ djangokam.titre }} <span class="accent-text">{{ djangokam.titreAccent }}</span></h2>
<p class="section-subtitle">{{ djangokam.accroche }}</p>
<p class="djangokam-surtitre">{{ t.djangokam.surtitre }}</p>
<h2>{{ t.djangokam.titre }} <span class="accent-text">{{ t.djangokam.titreAccent }}</span></h2>
<p class="section-subtitle">{{ t.djangokam.accroche }}</p>
<img src="/assets/images/djangokam-portrait.webp" alt="Portrait officiel de DJANGOKAM" class="djangokam-portrait" width="512" height="512" loading="lazy">
<blockquote class="djangokam-highlight">
{{ djangokam.message_cle }}
{{ t.djangokam.message_cle }}
</blockquote>
<div class="djangokam-histoire-wrapper">
<div class="djangokam-histoire">
{% for paragraphe in djangokam.histoire %}
{% for paragraphe in t.djangokam.histoire %}
<p>{{ paragraphe }}</p>
{% endfor %}
</div>
<figure class="djangokam-duo">
<a href="{{ djangokam.duo.url }}" target="_blank" rel="noopener noreferrer">
<img src="{{ djangokam.duo.image }}" alt="{{ djangokam.duo.alt }}" loading="lazy">
<figcaption>{{ djangokam.duo.legende }}</figcaption>
<a href="{{ t.djangokam.duo.url }}" target="_blank" rel="noopener noreferrer">
<img src="{{ t.djangokam.duo.image }}" alt="{{ t.djangokam.duo.alt }}" loading="lazy">
<figcaption>{{ t.djangokam.duo.legende }}</figcaption>
</a>
</figure>
</div>
<div class="djangokam-facts">
{% for fait in djangokam.faits %}
{% for fait in t.djangokam.faits %}
<div class="djangokam-fact-card">
<div class="djangokam-fact-icon">{{ fait.icon }}</div>
<h3>{{ fait.chiffre }}</h3>
@@ -36,7 +36,7 @@
</div>
<div class="djangokam-clips">
{% for clip in djangokam.clips %}
{% for clip in t.djangokam.clips %}
<figure class="djangokam-clip">
<a href="{{ clip.url }}" target="_blank" rel="noopener noreferrer">
<img src="{{ clip.image }}" alt="{{ clip.alt }}" loading="lazy">
@@ -46,10 +46,10 @@
{% endfor %}
</div>
<p class="djangokam-instrument">{{ djangokam.ia_instrument | safe }}</p>
<p class="djangokam-instrument">{{ t.djangokam.ia_instrument | safe }}</p>
<div class="cta-buttons djangokam-buttons">
{% for bouton in djangokam.boutons %}
{% for bouton in t.djangokam.boutons %}
<a href="{{ bouton.url }}" target="_blank" rel="noopener noreferrer" class="btn {% if bouton.primary %}btn-primary{% else %}btn-secondary{% endif %}">
{{ bouton.text }} →
</a>
@@ -57,7 +57,7 @@
</div>
<p class="djangokam-presse">
{{ djangokam.presse.texte }} <a href="mailto:{{ djangokam.presse.email }}">{{ djangokam.presse.email }}</a>
{{ t.djangokam.presse.texte }} <a href="mailto:{{ t.djangokam.presse.email }}">{{ t.djangokam.presse.email }}</a>
</p>
</div>
</section>
src/_includes/partials/engagement.njk
+8 -20
View File
@@ -1,31 +1,19 @@
<section id="engagement" class="engagement">
<div class="section-container">
<h2>Votre projet <span class="accent-text">commence ici</span></h2>
<h2>{{ t.engagement.section_title }} <span class="accent-text">{{ t.engagement.section_title_accent }}</span></h2>
<p class="section-subtitle">
Parce que chaque organisation mérite des outils numériques à la hauteur de ses ambitions
{{ t.engagement.section_subtitle }}
</p>
<div class="engagement-options">
{% for card in t.engagement.cards %}
<div class="engagement-card">
<div class="engagement-icon">✊🏿</div>
<h3>Associations Militantes</h3>
<p>Une application web sur mesure avec tarifs préférentiels pour vos luttes</p>
<a href="#contact" class="btn btn-primary">Contactez-nous</a>
</div>
<div class="engagement-card">
<div class="engagement-icon">🏛️</div>
<h3>Associations & Collectifs</h3>
<p>Site vitrine, gestion de membres, agenda, développé pour vous</p>
<a href="#contact" class="btn btn-primary">Contactez-nous</a>
</div>
<div class="engagement-card">
<div class="engagement-icon">💼</div>
<h3>Entreprises Responsables</h3>
<p>Présence numérique éthique, hébergement indépendant des GAFAM</p>
<a href="#contact" class="btn btn-primary">Contactez-nous</a>
<div class="engagement-icon">{{ card.icon }}</div>
<h3>{{ card.title }}</h3>
<p>{{ card.text }}</p>
<a href="#contact" class="btn btn-primary">{{ card.cta }}</a>
</div>
{% endfor %}
</div>
</div>
</section>
src/_includes/partials/faq.njk
+5 -5
View File
@@ -1,12 +1,12 @@
<section id="faq" class="faq">
<div class="section-container">
<h2>Questions <span class="accent-text">fréquentes</span></h2>
<h2>{{ t.faq.section_title }} <span class="accent-text">{{ t.faq.section_title_accent }}</span></h2>
<p class="section-subtitle">
Tout ce que vous devez savoir pour commencer votre transition numérique
{{ t.faq.section_subtitle }}
</p>
<div class="faq-container">
{% for item in faq %}
{% for item in t.faq.items %}
<div class="faq-item">
<button class="faq-question" onclick="this.parentElement.classList.toggle('active')">
<span>{{ item.question }}</span>
@@ -21,10 +21,10 @@
<div class="faq-footer">
<p>
Vous avez d'autres questions ?
{{ t.faq.footer_text }}
</p>
<a href="#contact" class="btn btn-secondary">
Contactez-nous →
{{ t.faq.footer_cta }} →
</a>
</div>
</div>
src/_includes/partials/fediverse.njk
+3 -3
View File
@@ -1,12 +1,12 @@
<section id="services-libres" class="fediverse">
<div class="section-container">
<h2>Nos <span class="accent-text">services hébergés</span></h2>
<h2>{{ t.services.section_title }} <span class="accent-text">{{ t.services.section_title_accent }}</span></h2>
<p class="section-subtitle">
Des alternatives libres aux géants du web, vos données restent sous votre contrôle, pas dans les serveurs de Google ou d'Amazon.
{{ t.services.section_subtitle }}
</p>
<div class="services-grid">
{% for service in services %}
{% for service in t.services.items %}
<div class="service-card">
<div class="service-icon">{{ service.icon }}</div>
<h3>{{ service.name }}</h3>
src/_includes/partials/footer.njk
+4 -4
View File
@@ -2,17 +2,17 @@
<div class="flag-bar"></div>
<div class="footer-content">
<p class="footer-name">
{{ site.name }}
{{ t.site.name }}
</p>
<p>
Association à but non lucratif | Promotion des langues et cultures | Alternatives libres aux GAFAM
{{ t.footer.tagline_line }}
</p>
<p class="footer-meta">
{{ site.copyright }} | {{ site.tagline }}
{{ t.site.copyright }} | {{ t.site.tagline }}
</p>
<p class="footer-legal">
<a href="/mentions-legales/">
Mentions Légales
{{ t.footer.legal_link }}
</a>
</p>
</div>
src/_includes/partials/hero.njk
+7 -7
View File
@@ -3,17 +3,17 @@
<h1>ORGANISATION KA</h1>
<h2 class="hero-subtitle">INTERNATIONALE</h2>
<p class="hero-tagline">
{{ site.tagline }}
{{ t.site.tagline }}
</p>
<div class="hero-tags">
<span class="tag">✊🏿 Applications web pour vos associations</span>
<span class="tag">💸 Tarifs préférentiels pour les organisations militantes</span>
<span class="tag">🔓 Indépendant des GAFAM</span>
{% for tag in t.hero.tags %}
<span class="tag">{{ tag }}</span>
{% endfor %}
</div>
<p>{{ site.description }}</p>
<p>{{ t.site.description }}</p>
<div class="cta-buttons">
<a href="#solutions" class="btn btn-primary">Nos Solutions</a>
<a href="#mission" class="btn btn-secondary">Notre Mission</a>
<a href="#solutions" class="btn btn-primary">{{ t.hero.cta_primary }}</a>
<a href="#mission" class="btn btn-secondary">{{ t.hero.cta_secondary }}</a>
</div>
</div>
</section>
src/_includes/partials/hosting.njk
+27 -70
View File
@@ -1,104 +1,61 @@
<section id="hebergement" class="hosting">
<div class="section-container">
<h2>Développement <span class="accent-text">Web sur Mesure</span></h2>
<h2>{{ t.hosting.section_title }} <span class="accent-text">{{ t.hosting.section_title_accent }}</span></h2>
<p class="section-subtitle">
Chaque organisation a des besoins uniques. Nous concevons et développons l'outil numérique qui correspond exactement à votre fonctionnement, pas un template, une vraie application.
{{ t.hosting.section_subtitle }}
</p>
<div class="hosting-banner">
<h3>Des solutions complètes, de A à Z</h3>
<p>OKI accompagne les associations et collectifs à chaque étape : conception, développement, hébergement, formation et maintenance.</p>
<h3>{{ t.hosting.banner_title }}</h3>
<p>{{ t.hosting.banner_text }}</p>
<div class="hosting-features">
{% for feature in t.hosting.features %}
<div class="hosting-feature">
<span>✓</span> Développement d'applications web sur mesure
</div>
<div class="hosting-feature">
<span>✓</span> Sites vitrine professionnels
</div>
<div class="hosting-feature">
<span>✓</span> Instances Fédiverse clé en main
</div>
<div class="hosting-feature">
<span>✓</span> Hébergement sécurisé et indépendant
</div>
<div class="hosting-feature">
<span>✓</span> Gestion de noms de domaine
</div>
<div class="hosting-feature">
<span>✓</span> Sauvegardes automatiques quotidiennes
</div>
<div class="hosting-feature">
<span>✓</span> Formation et support technique inclus
<span>✓</span> {{ feature }}
</div>
{% endfor %}
</div>
</div>
<div class="services-offerings">
<h3>Nos offres de services</h3>
<h3>{{ t.hosting.offerings_title }}</h3>
<div class="offer-cards">
<div class="offer-card">
<h4>Application Web Sur Mesure</h4>
{% for card in t.hosting.offer_cards %}
<div class="offer-card{% if card.modifier %} offer-card--{{ card.modifier }}{% endif %}">
<h4>{{ card.title }}</h4>
{% if card.intro %}
<p class="offer-intro">{{ card.intro }}</p>
{% endif %}
<ul class="offer-list">
<li>Gestion de membres et adhésions</li>
<li>Agenda et gestion d'événements</li>
<li>Pétitions et mobilisation en ligne</li>
<li>Caisse de solidarité, dons</li>
<li>Newsletter et communication interne</li>
{% for item in card.items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
<p class="offer-tagline">Développement sur mesure</p>
</div>
<div class="offer-card offer-card--hosting">
<h4>Site Vitrine & Hébergement</h4>
<ul class="offer-list">
<li>WordPress ou site statique</li>
<li>Hébergement mutualisé sécurisé</li>
<li>Base de données MySQL/PostgreSQL</li>
<li>Certificat SSL gratuit</li>
<li>Serveur mail inclus</li>
</ul>
<p class="offer-tagline">Hébergement éthique</p>
</div>
<div class="offer-card offer-card--fediverse">
<h4>Instance Fédiverse</h4>
<p class="offer-intro">Votre association veut sa propre plateforme libre, sans dépendre d'un tiers ? On installe et administre votre instance :</p>
<ul class="offer-list">
<li>Mastodon / Pleroma (réseau social)</li>
<li>PeerTube (vidéo)</li>
<li>Castopod (podcast)</li>
<li>Pixelfed (photos)</li>
<li>Funkwhale (musique)</li>
</ul>
<p class="offer-tagline">Installation & maintenance</p>
<p class="offer-tagline">{{ card.tagline }}</p>
</div>
{% endfor %}
</div>
<div class="hosting-note">
<h4>Gestion numérique sécurisée</h4>
<p>OKI peut assurer la gestion complète de vos propriétés numériques :</p>
<h4>{{ t.hosting.note_title }}</h4>
<p>{{ t.hosting.note_intro }}</p>
<ul>
<li>Propriété et gestion de noms de domaine</li>
<li>Administration de comptes web (réseaux sociaux, emails)</li>
<li>Gestion sécurisée des accès et mots de passe</li>
<li>Protection contre les prises de contrôle internes</li>
<li>Médiation en cas de conflits sur les outils numériques</li>
{% for item in t.hosting.note_items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
</div>
<div class="hosting-why">
<h4>Pourquoi choisir OKI ?</h4>
<h4>{{ t.hosting.why_title }}</h4>
<p>
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 et nous appliquons des tarifs
préférentiels aux organisations militantes.
{{ t.hosting.why_text }}
</p>
<a href="#contact" class="btn btn-primary">
Contactez-nous →
{{ t.hosting.why_cta }} →
</a>
</div>
</div>
src/_includes/partials/mission.njk
+4 -4
View File
@@ -1,15 +1,15 @@
<section id="mission" class="mission">
<div class="section-container">
<h2>Notre <span class="accent-text">Mission</span></h2>
<h2>{{ t.mission.section_title }} <span class="accent-text">{{ t.mission.section_title_accent }}</span></h2>
<p class="mission-text">
OKI développe des applications web sur mesure pour les associations, collectifs et organisations qui changent le monde. Nous croyons que la qualité des outils numériques ne devrait pas être réservée à ceux qui ont les moyens, c'est pourquoi nous proposons des tarifs adaptés à la réalité de chaque structure, avec une attention particulière pour les organisations militantes.
{{ t.mission.paragraph_main }}
</p>
<p class="mission-text mission-text--secondary">
Nos langues, nos cultures, nos luttes méritent des outils qui leur ressemblent. Pas des templates génériques, de vraies solutions pensées pour vous.
{{ t.mission.paragraph_secondary }}
</p>
<div class="values-grid">
{% for value in values %}
{% for value in t.values %}
<div class="value-card">
<div class="value-icon">{{ value.icon }}</div>
<h3>{{ value.title }}</h3>
src/_includes/partials/nav.njk
+9 -4
View File
@@ -1,11 +1,11 @@
<nav>
<div class="nav-container">
<a href="/" class="logo">
<img src="/assets/images/logo-512x512.png" alt="{{ site.shortName }} Logo" class="logo-image">
<span>{{ site.shortName }}</span>
<img src="/assets/images/logo-512x512.png" alt="{{ t.site.shortName }} Logo" class="logo-image">
<span>{{ t.site.shortName }}</span>
</a>
<ul class="nav-links">
{% for item in navigation %}
{% for item in t.navigation %}
<li>
<a href="{{ item.url }}"{% if item.external %} target="_blank"{% endif %}>
{{ item.text }}
@@ -13,7 +13,12 @@
</li>
{% endfor %}
</ul>
<button id="theme-toggle" class="theme-toggle" aria-label="Changer de thème" title="Changer de thème">
{% if locale == 'en' %}
<a href="/" class="lang-switch" onclick="localStorage.setItem('oki-lang-pref','fr')">{{ t.ui.lang_switch_label }}</a>
{% else %}
<a href="/en/" class="lang-switch" onclick="localStorage.setItem('oki-lang-pref','en')">{{ t.ui.lang_switch_label }}</a>
{% endif %}
<button id="theme-toggle" class="theme-toggle" aria-label="{{ t.ui.theme_toggle }}" title="{{ t.ui.theme_toggle }}">
<span class="theme-icon theme-icon-dark">🌙</span>
<span class="theme-icon theme-icon-light">☀️</span>
</button>
src/_includes/partials/partners.njk
+4 -4
View File
@@ -1,12 +1,12 @@
<section id="partenaires" class="partners">
<div class="section-container">
<h2>Nos <span class="accent-text">Partenaires</span></h2>
<h2>{{ t.partners.section_title }} <span class="accent-text">{{ t.partners.section_title_accent }}</span></h2>
<p class="section-subtitle">
Ils partagent nos valeurs et contribuent à enrichir notre écosystème numérique libre
{{ t.partners.section_subtitle }}
</p>
<div class="partners-grid">
{% for partner in partners %}
{% for partner in t.partners.items %}
<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">
@@ -14,7 +14,7 @@
<h3>{{ partner.name }}</h3>
<p class="partner-description">{{ partner.description }}</p>
<span class="partner-link">
Découvrir sur GADE →
{{ t.partners.link_text }} →
</span>
</a>
{% endfor %}
src/_includes/partials/projects.njk
+3 -3
View File
@@ -1,16 +1,16 @@
<section id="projets" class="projects">
<div class="section-container">
<h2>Nos <span class="accent-text">Projets Web</span></h2>
<h2>{{ t.projects.section_title }} <span class="accent-text">{{ t.projects.section_title_accent }}</span></h2>
<div class="project-cards">
{% for project in projects %}
{% for project in t.projects.items %}
<a href="{{ project.url }}" target="_blank" rel="noopener noreferrer" class="project-card">
<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 project-card-link">
Visiter le site →
{{ t.projects.link_text }} →
</span>
</a>
{% endfor %}
src/_includes/partials/publics.njk
+6 -6
View File
@@ -1,19 +1,19 @@
<section id="solutions" class="publics">
<div class="section-container">
<h2>Des solutions pour <span class="accent-text">chaque besoin</span></h2>
<h2>{{ t.publics.section_title }} <span class="accent-text">{{ t.publics.section_title_accent }}</span></h2>
<p class="section-subtitle">
Que vous soyez association, entreprise ou citoyen engagé, nous avons les outils pour votre transition numérique
{{ t.publics.section_subtitle }}
</p>
<div class="publics-grid">
{% for public in publics %}
{% for public in t.publics.items %}
<div class="public-card">
<div class="public-icon">{{ public.icon }}</div>
<h3>{{ public.title }}</h3>
<p class="public-description">{{ public.description }}</p>
<div class="public-benefits">
<h4>Ce que vous obtenez :</h4>
<h4>{{ t.publics.benefits_label }}</h4>
<ul>
{% for benefit in public.benefits %}
<li>✓ {{ benefit }}</li>
@@ -30,10 +30,10 @@
<div class="publics-footer">
<p>
Prêt à franchir le pas ?
{{ t.publics.footer_line1 }}
</p>
<p>
Parce que tout grand changement commence par une conversation
{{ t.publics.footer_line2 }}
</p>
</div>
</div>
src/_includes/partials/support.njk
+30 -50
View File
@@ -1,76 +1,56 @@
<section id="dons" class="support">
<div class="section-container">
<h2>Nous <span class="accent-text">Soutenir</span></h2>
<h2>{{ t.support.section_title }} <span class="accent-text">{{ t.support.section_title_accent }}</span></h2>
<p class="support-lede">
Chaque like, chaque partage, chaque don compte pour construire cet internet-là
{{ t.support.lede }}
</p>
<p class="support-lede-secondary">
Celui où nos ancêtres ne seraient pas effacés par des algorithmes aveugles. Celui où une jeune fille de Lapwent (Pointe-à-Pitre) peut lancer un média en langue dite "créole", sans demander la permission à une multinationale.
{{ t.support.lede_secondary }}
</p>
<div class="donation-panels">
<div class="support-panel support-panel--primary">
<h3>Don ponctuel</h3>
<h3>{{ t.support.one_time_title }}</h3>
<div class="donation-grid">
<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€
{% for d in donations.oneTime %}
<a href="{{ d.url }}" class="donation-amount" target="_blank" rel="noopener noreferrer">
{{ d.amount }}{{ t.support.one_time_suffix }}
</a>
{% endfor %}
</div>
<div style="text-align: center;">
<label class="donation-form-label">Montant personnalisé :</label>
<label class="donation-form-label">{{ t.support.custom_amount_label }}</label>
<div class="custom-donation-form">
<input type="number" id="customAmountOneTime" placeholder="Montant" min="1" class="custom-amount-input">
<span class="currency-symbol">€</span>
<input type="number" id="customAmountOneTime" placeholder="{{ t.support.custom_amount_placeholder }}" min="1" class="custom-amount-input">
<span class="currency-symbol">{{ t.support.one_time_suffix }}</span>
<button onclick="handleCustomDonation('oneTime')" class="custom-donation-btn custom-donation-btn-primary">
Donner
{{ t.support.custom_amount_btn }}
</button>
</div>
</div>
</div>
<div class="support-panel support-panel--secondary">
<h3>Don mensuel</h3>
<h3>{{ t.support.monthly_title }}</h3>
<div class="donation-grid">
<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
{% for d in donations.monthly %}
<a href="{{ d.url }}" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
{{ d.amount }}{{ t.support.monthly_suffix }}
</a>
{% endfor %}
</div>
<div style="text-align: center;">
<label class="donation-form-label">Montant mensuel personnalisé :</label>
<label class="donation-form-label">{{ t.support.custom_monthly_label }}</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>
<input type="number" id="customAmountMonthly" placeholder="{{ t.support.custom_amount_placeholder }}" min="1" class="custom-amount-input custom-amount-input-monthly">
<span class="currency-symbol">{{ t.support.monthly_suffix }}</span>
<button onclick="handleCustomDonation('monthly')" class="custom-donation-btn custom-donation-btn-secondary">
S'abonner
{{ t.support.custom_monthly_btn }}
</button>
</div>
</div>
@@ -80,23 +60,23 @@
<div class="alt-donation-section">
<h3 class="alt-donation-title">
Autres moyens de nous soutenir
{{ t.support.alt_title }}
</h3>
<div class="alt-donation-grid">
<a href="https://liberapay.com/OKI/donate" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--liberapay">
<a href="{{ donations.liberapay }}" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--liberapay">
<div class="alt-donation-icon">💛</div>
<h4>Liberapay</h4>
<h4>{{ t.support.liberapay_title }}</h4>
<p>
Soutenez-nous via Liberapay, une plateforme libre et éthique
{{ t.support.liberapay_text }}
</p>
</a>
<a href="https://ko-fi.com/J3J5TOZPI" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--kofi">
<a href="{{ donations.kofi }}" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--kofi">
<div class="alt-donation-icon">☕</div>
<h4>Ko-fi</h4>
<h4>{{ t.support.kofi_title }}</h4>
<p>
Offrez-nous un café sur Ko-fi pour nous encourager
{{ t.support.kofi_text }}
</p>
</a>
</div>
@@ -104,10 +84,10 @@
<div class="security-note">
<p>
Les dons directs (montants ci-dessus) sont sécurisés par <a href="https://stripe.com/" target="_blank">Stripe</a>.
{{ t.support.security_stripe | safe }}
</p>
<p>
Liberapay et Ko-fi utilisent leurs propres systèmes de paiement sécurisés.
{{ t.support.security_alt }}
</p>
</div>
</div>
src/assets/css/styles.css
+26
View File
@@ -133,6 +133,14 @@ html.light-theme .nav-links a:hover {
color: var(--or-oki);
}
html.light-theme .lang-switch {
color: #0D0D0D;
}
html.light-theme .lang-switch:hover {
color: var(--or-oki);
}
/* Ajustements de contraste pour le thème clair (WCAG 2 AA) */
html.light-theme .tag {
background: rgba(184, 122, 0, 0.08);
@@ -224,6 +232,24 @@ html.light-theme .contact-links a:hover {
color: var(--or-oki);
}
/* Language Switch */
.lang-switch {
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 0.5rem 0.7rem;
color: var(--blanc-creme);
text-decoration: none;
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.04em;
transition: border-color 0.2s ease, color 0.2s ease;
}
.lang-switch:hover {
border-color: var(--or-oki);
color: var(--or-oki);
}
/* Theme Toggle Button */
.theme-toggle {
background: transparent;