refactor: nouvelle identité visuelle, design plat et affirmé #2
@@ -38,6 +38,11 @@
|
|||||||
<link rel="icon" type="image/png" sizes="512x512" href="/assets/images/logo-512x512.png">
|
<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="apple-touch-icon" href="/assets/images/logo-512x512.png">
|
||||||
|
|
||||||
|
<!-- Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Stylesheet -->
|
<!-- Stylesheet -->
|
||||||
<link rel="stylesheet" href="/assets/css/styles.css">
|
<link rel="stylesheet" href="/assets/css/styles.css">
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<section id="clients" class="partners">
|
<section id="clients" class="partners">
|
||||||
<div class="section-container">
|
<div class="section-container">
|
||||||
<h2 style="text-align: center; margin-bottom: 1rem;">Ils nous ont <span class="accent-text">fait confiance</span></h2>
|
<h2>Ils nous ont <span class="accent-text">fait confiance</span></h2>
|
||||||
<p class="section-subtitle">
|
<p class="section-subtitle">
|
||||||
Des organisations engagées qui ont choisi OKI pour construire leur présence numérique
|
Des organisations engagées qui ont choisi OKI pour construire leur présence numérique
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<section class="contact" id="contact">
|
<section class="contact" id="contact">
|
||||||
<div class="section-container">
|
<div class="section-container">
|
||||||
<h2 style="text-align: center; margin-bottom: 1rem; color: var(--or-oki);">Envie de passer à l'action ?</h2>
|
<h2>Envie de passer à l'action ?</h2>
|
||||||
<p style="text-align: center; max-width: 800px; margin: 0 auto 3rem; font-size: 1.1rem; line-height: 1.6;">
|
<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" style="color: var(--or-oki);">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.
|
« 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.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-grid">
|
<div class="contact-grid">
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="faq-footer">
|
<div class="faq-footer">
|
||||||
<p style="font-size: 1.1rem; margin-bottom: 1rem;">
|
<p>
|
||||||
Vous avez d'autres questions ?
|
Vous avez d'autres questions ?
|
||||||
</p>
|
</p>
|
||||||
<a href="#contact" class="btn btn-secondary">
|
<a href="#contact" class="btn btn-secondary">
|
||||||
|
|||||||
@@ -1,16 +1,17 @@
|
|||||||
<footer>
|
<footer>
|
||||||
|
<div class="flag-bar"></div>
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
<p style="font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem;">
|
<p class="footer-name">
|
||||||
{{ site.name }}
|
{{ site.name }}
|
||||||
</p>
|
</p>
|
||||||
<p style="opacity: 0.8;">
|
<p>
|
||||||
Association à but non lucratif | Promotion des langues et cultures | Alternatives libres aux GAFAM
|
Association à but non lucratif | Promotion des langues et cultures | Alternatives libres aux GAFAM
|
||||||
</p>
|
</p>
|
||||||
<p style="margin-top: 1rem; font-size: 0.9rem; opacity: 0.7;">
|
<p class="footer-meta">
|
||||||
{{ site.copyright }} | {{ site.tagline }}
|
{{ site.copyright }} | {{ site.tagline }}
|
||||||
</p>
|
</p>
|
||||||
<p style="margin-top: 1rem;">
|
<p class="footer-legal">
|
||||||
<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'">
|
<a href="/mentions-legales/">
|
||||||
Mentions Légales
|
Mentions Légales
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -1,15 +1,8 @@
|
|||||||
<section class="hero">
|
<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">
|
<div class="hero-content">
|
||||||
<h1>ORGANISATION KA</h1>
|
<h1>ORGANISATION KA</h1>
|
||||||
<h2 class="hero-subtitle">INTERNATIONALE</h2>
|
<h2 class="hero-subtitle">INTERNATIONALE</h2>
|
||||||
<p style="font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--or-oki); font-weight: 600;">
|
<p class="hero-tagline">
|
||||||
{{ site.tagline }}
|
{{ site.tagline }}
|
||||||
</p>
|
</p>
|
||||||
<div class="hero-tags">
|
<div class="hero-tags">
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<section id="hebergement" class="hosting">
|
<section id="hebergement" class="hosting">
|
||||||
<div class="section-container">
|
<div class="section-container">
|
||||||
<h2 style="text-align: center; margin-bottom: 1rem;">Développement <span class="accent-text">Web sur Mesure</span></h2>
|
<h2>Développement <span class="accent-text">Web sur Mesure</span></h2>
|
||||||
|
|
||||||
<p class="section-subtitle" style="text-align: center; margin-bottom: 3rem;">
|
<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.
|
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.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="hosting-banner">
|
<div class="hosting-banner">
|
||||||
<h3>🚀 Des solutions complètes, de A à Z</h3>
|
<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>
|
<p>OKI accompagne les associations et collectifs à chaque étape : conception, développement, hébergement, formation et maintenance.</p>
|
||||||
|
|
||||||
<div class="hosting-features">
|
<div class="hosting-features">
|
||||||
@@ -36,63 +36,62 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="services-offerings">
|
<div class="services-offerings">
|
||||||
<h3 style="text-align: center; color: var(--or-oki); margin: 3rem 0 2rem;">Nos offres de services</h3>
|
<h3>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="offer-cards">
|
||||||
|
<div class="offer-card">
|
||||||
<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>Application Web Sur Mesure</h4>
|
||||||
<h4 style="color: var(--vert-oki); margin-bottom: 1rem;">💻 Application Web Sur Mesure</h4>
|
<ul class="offer-list">
|
||||||
<ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
|
<li>Gestion de membres et adhésions</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Gestion de membres et adhésions</li>
|
<li>Agenda et gestion d'événements</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Agenda et gestion d'événements</li>
|
<li>Pétitions et mobilisation en ligne</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Pétitions et mobilisation en ligne</li>
|
<li>Caisse de solidarité, dons</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Caisse de solidarité, dons</li>
|
<li>Newsletter et communication interne</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Newsletter et communication interne</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<p style="color: var(--or-oki); font-weight: bold;">Développement sur mesure</p>
|
<p class="offer-tagline">Développement sur mesure</p>
|
||||||
</div>
|
</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;">
|
<div class="offer-card offer-card--hosting">
|
||||||
<h4 style="color: var(--rouge-oki); margin-bottom: 1rem;">🌐 Site Vitrine & Hébergement</h4>
|
<h4>Site Vitrine & Hébergement</h4>
|
||||||
<ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
|
<ul class="offer-list">
|
||||||
<li style="margin-bottom: 0.5rem;">• WordPress ou site statique</li>
|
<li>WordPress ou site statique</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Hébergement mutualisé sécurisé</li>
|
<li>Hébergement mutualisé sécurisé</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Base de données MySQL/PostgreSQL</li>
|
<li>Base de données MySQL/PostgreSQL</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Certificat SSL gratuit</li>
|
<li>Certificat SSL gratuit</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Serveur mail inclus</li>
|
<li>Serveur mail inclus</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p style="color: var(--or-oki); font-weight: bold;">Hébergement éthique</p>
|
<p class="offer-tagline">Hébergement éthique</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="service-offering-card" style="background: rgba(232, 166, 37, 0.1); border: 2px solid var(--or-oki); border-radius: 20px; padding: 2rem;">
|
<div class="offer-card offer-card--fediverse">
|
||||||
<h4 style="color: var(--or-oki); margin-bottom: 1rem;">🕸️ Instance Fédiverse</h4>
|
<h4>Instance Fédiverse</h4>
|
||||||
<p style="margin-bottom: 1rem; font-size: 0.95rem; opacity: 0.9;">Votre association veut sa propre plateforme libre, sans dépendre d'un tiers ? On installe et administre votre instance :</p>
|
<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 style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
|
<ul class="offer-list">
|
||||||
<li style="margin-bottom: 0.5rem;">• Mastodon / Pleroma (réseau social)</li>
|
<li>Mastodon / Pleroma (réseau social)</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• PeerTube (vidéo)</li>
|
<li>PeerTube (vidéo)</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Castopod (podcast)</li>
|
<li>Castopod (podcast)</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Pixelfed (photos)</li>
|
<li>Pixelfed (photos)</li>
|
||||||
<li style="margin-bottom: 0.5rem;">• Funkwhale (musique)</li>
|
<li>Funkwhale (musique)</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p style="color: var(--or-oki); font-weight: bold;">Installation & maintenance</p>
|
<p class="offer-tagline">Installation & maintenance</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="background: rgba(232, 166, 37, 0.1); border-radius: 15px; padding: 2rem; margin-bottom: 2rem;">
|
<div class="hosting-note">
|
||||||
<h4 style="color: var(--or-oki); margin-bottom: 1rem;">🔐 Gestion numérique sécurisée</h4>
|
<h4>Gestion numérique sécurisée</h4>
|
||||||
<p style="margin-bottom: 1rem;">OKI peut assurer la gestion complète de vos propriétés numériques :</p>
|
<p>OKI peut assurer la gestion complète de vos propriétés numériques :</p>
|
||||||
<ul style="list-style: none; padding-left: 1rem;">
|
<ul>
|
||||||
<li style="margin-bottom: 0.5rem;">✅ Propriété et gestion de noms de domaine</li>
|
<li>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>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>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>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>
|
<li>Médiation en cas de conflits sur les outils numériques</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="text-align: center; margin-top: 3rem;">
|
<div class="hosting-why">
|
||||||
<h4 style="color: var(--or-oki); margin-bottom: 1rem;">💡 Pourquoi choisir OKI ?</h4>
|
<h4>Pourquoi choisir OKI ?</h4>
|
||||||
<p style="max-width: 800px; margin: 0 auto 2rem; line-height: 1.6;">
|
<p>
|
||||||
Notre équipe technique, composée d'experts engagés, garantit l'impartialité,
|
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
|
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
|
projets solidaires pour des tarifs justes et accessibles et nous appliquons des tarifs
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<p class="mission-text">
|
<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.
|
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.
|
||||||
</p>
|
</p>
|
||||||
<p class="mission-text" style="font-size: 1.1rem; margin-top: 1rem;">
|
<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.
|
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.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<nav>
|
<nav>
|
||||||
<div class="nav-container">
|
<div class="nav-container">
|
||||||
<a href="/" class="logo logo-with-glow" style="display: flex; align-items: center; gap: 0.5rem;">
|
<a href="/" class="logo">
|
||||||
<img src="/assets/images/logo-512x512.png" alt="{{ site.shortName }} Logo" class="logo-image" style="height: 2.5rem; width: auto;">
|
<img src="/assets/images/logo-512x512.png" alt="{{ site.shortName }} Logo" class="logo-image">
|
||||||
<span>{{ site.shortName }}</span>
|
<span>{{ site.shortName }}</span>
|
||||||
</a>
|
</a>
|
||||||
<ul class="nav-links">
|
<ul class="nav-links">
|
||||||
@@ -23,4 +23,5 @@
|
|||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flag-bar"></div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<section id="partenaires" class="partners">
|
<section id="partenaires" class="partners">
|
||||||
<div class="section-container">
|
<div class="section-container">
|
||||||
<h2 style="text-align: center; margin-bottom: 1rem;">Nos <span class="accent-text">Partenaires</span></h2>
|
<h2>Nos <span class="accent-text">Partenaires</span></h2>
|
||||||
<p class="section-subtitle">
|
<p class="section-subtitle">
|
||||||
Ils partagent nos valeurs et contribuent à enrichir notre écosystème numérique libre
|
Ils partagent nos valeurs et contribuent à enrichir notre écosystème numérique libre
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -4,12 +4,12 @@
|
|||||||
|
|
||||||
<div class="project-cards">
|
<div class="project-cards">
|
||||||
{% for project in projects %}
|
{% for project in projects %}
|
||||||
<a href="{{ project.url }}" target="_blank" rel="noopener noreferrer" class="project-card" style="text-decoration: none; color: inherit;">
|
<a href="{{ project.url }}" target="_blank" rel="noopener noreferrer" class="project-card">
|
||||||
<div class="project-icon">{{ project.icon }}</div>
|
<div class="project-icon">{{ project.icon }}</div>
|
||||||
<h3>{{ project.name }}</h3>
|
<h3>{{ project.name }}</h3>
|
||||||
<p class="project-domain">{{ project.domain }}</p>
|
<p class="project-domain">{{ project.domain }}</p>
|
||||||
<p>{{ project.description }}</p>
|
<p>{{ project.description }}</p>
|
||||||
<span class="service-link" style="margin-top: 1rem;">
|
<span class="service-link project-card-link">
|
||||||
Visiter le site →
|
Visiter le site →
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -29,10 +29,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="publics-footer">
|
<div class="publics-footer">
|
||||||
<p style="font-size: 1.2rem; margin-bottom: 1rem; font-weight: 600;">
|
<p>
|
||||||
💡 Prêt à franchir le pas ?
|
Prêt à franchir le pas ?
|
||||||
</p>
|
</p>
|
||||||
<p style="opacity: 0.9;">
|
<p>
|
||||||
Parce que tout grand changement commence par une conversation
|
Parce que tout grand changement commence par une conversation
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,23 +1,19 @@
|
|||||||
<section id="dons" class="support">
|
<section id="dons" class="support">
|
||||||
<div class="section-container">
|
<div class="section-container">
|
||||||
<h2>Nous <span class="accent-text">Soutenir</span></h2>
|
<h2>Nous <span class="accent-text">Soutenir</span></h2>
|
||||||
<p style="font-size: 1.3rem; margin-bottom: 1rem;">
|
<p class="support-lede">
|
||||||
Chaque like, chaque partage, chaque don compte pour construire cet internet-là
|
Chaque like, chaque partage, chaque don compte pour construire cet internet-là
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1rem; margin-bottom: 3rem; opacity: 0.9;">
|
<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.
|
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.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Donation Options Container -->
|
<div class="donation-panels">
|
||||||
<div style="max-width: 900px; margin: 0 auto;">
|
|
||||||
|
|
||||||
<!-- One-time Donations -->
|
<div class="support-panel support-panel--primary">
|
||||||
<div style="background: rgba(232, 166, 37, 0.1); border-radius: 20px; padding: 2rem; margin-bottom: 2rem;">
|
<h3>Don ponctuel</h3>
|
||||||
<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;">
|
<div class="donation-grid">
|
||||||
<a href="https://don.o-k-i.net/b/aEUdTw5SD3SH7m0bII" class="donation-amount" target="_blank" rel="noopener noreferrer">
|
<a href="https://don.o-k-i.net/b/aEUdTw5SD3SH7m0bII" class="donation-amount" target="_blank" rel="noopener noreferrer">
|
||||||
1€
|
1€
|
||||||
</a>
|
</a>
|
||||||
@@ -36,24 +32,21 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
<label style="display: block; margin-bottom: 1rem; color: var(--blanc-creme);">Montant personnalisé :</label>
|
<label class="donation-form-label">Montant personnalisé :</label>
|
||||||
<div class="custom-donation-form">
|
<div class="custom-donation-form">
|
||||||
<input type="number" id="customAmountOneTime" placeholder="Montant" min="1" class="custom-amount-input">
|
<input type="number" id="customAmountOneTime" placeholder="Montant" min="1" class="custom-amount-input">
|
||||||
<span class="currency-symbol">€</span>
|
<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=''">
|
<button onclick="handleCustomDonation('oneTime')" class="custom-donation-btn custom-donation-btn-primary">
|
||||||
Donner
|
Donner
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Monthly Donations -->
|
<div class="support-panel support-panel--secondary">
|
||||||
<div style="background: rgba(0, 168, 84, 0.1); border-radius: 20px; padding: 2rem;">
|
<h3>Don mensuel</h3>
|
||||||
<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;">
|
<div class="donation-grid">
|
||||||
<a href="https://don.o-k-i.net/b/7sI9Dgch14WL7m0fZ3" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
|
<a href="https://don.o-k-i.net/b/7sI9Dgch14WL7m0fZ3" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
|
||||||
1€/mois
|
1€/mois
|
||||||
</a>
|
</a>
|
||||||
@@ -72,11 +65,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
<label style="display: block; margin-bottom: 1rem; color: var(--blanc-creme);">Montant mensuel personnalisé :</label>
|
<label class="donation-form-label">Montant mensuel personnalisé :</label>
|
||||||
<div class="custom-donation-form">
|
<div class="custom-donation-form">
|
||||||
<input type="number" id="customAmountMonthly" placeholder="Montant" min="1" class="custom-amount-input custom-amount-input-monthly">
|
<input type="number" id="customAmountMonthly" placeholder="Montant" min="1" class="custom-amount-input custom-amount-input-monthly">
|
||||||
<span class="currency-symbol">€/mois</span>
|
<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=''">
|
<button onclick="handleCustomDonation('monthly')" class="custom-donation-btn custom-donation-btn-secondary">
|
||||||
S'abonner
|
S'abonner
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -85,62 +78,35 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Alternative Donation Methods -->
|
<div class="alt-donation-section">
|
||||||
<div style="margin-top: 3rem;">
|
<h3 class="alt-donation-title">
|
||||||
<h3 style="text-align: center; color: var(--or-oki); margin-bottom: 2rem; font-size: 1.5rem;">
|
|
||||||
Autres moyens de nous soutenir
|
Autres moyens de nous soutenir
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 700px; margin: 0 auto;">
|
<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">
|
||||||
<!-- Liberapay -->
|
<div class="alt-donation-icon">💛</div>
|
||||||
<a href="https://liberapay.com/OKI/donate" target="_blank" rel="noopener noreferrer" style="
|
<h4>Liberapay</h4>
|
||||||
display: flex;
|
<p>
|
||||||
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
|
Soutenez-nous via Liberapay, une plateforme libre et éthique
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Ko-fi -->
|
<a href="https://ko-fi.com/J3J5TOZPI" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--kofi">
|
||||||
<a href="https://ko-fi.com/J3J5TOZPI" target="_blank" rel="noopener noreferrer" style="
|
<div class="alt-donation-icon">☕</div>
|
||||||
display: flex;
|
<h4>Ko-fi</h4>
|
||||||
flex-direction: column;
|
<p>
|
||||||
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
|
Offrez-nous un café sur Ko-fi pour nous encourager
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="text-align: center; margin-top: 3rem; padding: 1.5rem; background: rgba(0, 0, 0, 0.3); border-radius: 15px;">
|
<div class="security-note">
|
||||||
<p style="font-size: 0.95rem; margin-bottom: 0.5rem;">
|
<p>
|
||||||
🔒 Les dons directs (montants ci-dessus) sont sécurisés par <a href="https://stripe.com/" target="_blank" style="color: var(--or-oki); text-decoration: none;">Stripe</a>.
|
Les dons directs (montants ci-dessus) sont sécurisés par <a href="https://stripe.com/" target="_blank">Stripe</a>.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 0.9rem; opacity: 0.8;">
|
<p>
|
||||||
Liberapay et Ko-fi utilisent leurs propres systèmes de paiement sécurisés.
|
Liberapay et Ko-fi utilisent leurs propres systèmes de paiement sécurisés.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+745
-462
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user