first commit
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
node_modules/
|
||||
_site/
|
||||
.DS_Store
|
||||
*.log
|
||||
.env
|
||||
.vscode/
|
||||
.idea/
|
||||
@@ -0,0 +1,89 @@
|
||||
# Changelog
|
||||
|
||||
## Version 2.0.0 - Migration vers 11ty (2025-11-05)
|
||||
|
||||
### Nouvelle architecture
|
||||
- ✅ Migration complète de PHP vers 11ty (Eleventy)
|
||||
- ✅ Structure modulaire avec templates Nunjucks
|
||||
- ✅ Données centralisées en fichiers JSON
|
||||
- ✅ Build statique optimisé
|
||||
|
||||
### Nouvelle charte graphique
|
||||
- ✅ Charte basée sur les couleurs officielles du logo OKI
|
||||
- ✅ Palette de couleurs :
|
||||
- Or OKI (#E8A625) - couleur principale
|
||||
- Vert OKI (#00A854) - services Fédiverse
|
||||
- Rouge OKI (#ED1C4C) - accents
|
||||
- Noir OKI (#000000) - arrière-plans
|
||||
- ✅ Logo intégré dans la navigation
|
||||
- ✅ Favicon ajouté
|
||||
|
||||
### Design & UX
|
||||
- ✅ Fond noir élégant au lieu du bleu
|
||||
- ✅ Accents or pour les titres et boutons
|
||||
- ✅ Bordures et effets or pour cohérence visuelle
|
||||
- ✅ Cartes de services avec bordures vertes
|
||||
- ✅ Projets web avec accents rouges
|
||||
- ✅ Footer avec bordure dorée
|
||||
|
||||
### Fonctionnalités conservées
|
||||
- ✅ Toutes les sections de la V1
|
||||
- ✅ Animations et effets interactifs
|
||||
- ✅ Navigation responsive
|
||||
- ✅ Easter egg Konami Code
|
||||
- ✅ Support des dons (Stripe)
|
||||
- ✅ Services d'hébergement
|
||||
|
||||
### Améliorations techniques
|
||||
- ✅ Temps de build ultra-rapide (~60ms)
|
||||
- ✅ Hot reload pour le développement
|
||||
- ✅ SEO optimisé
|
||||
- ✅ Performance améliorée
|
||||
- ✅ Code maintenable et modulaire
|
||||
- ✅ Licence libre AGPL-V3
|
||||
|
||||
### Fichiers principaux
|
||||
- `eleventy.config.js` - Configuration 11ty
|
||||
- `src/_data/` - Données du site (services, projets, valeurs, etc.)
|
||||
- `src/_includes/layouts/` - Templates de mise en page
|
||||
- `src/_includes/partials/` - Composants réutilisables
|
||||
- `src/assets/` - CSS, JS, images
|
||||
|
||||
### Migration depuis V1
|
||||
La V1 utilisait PHP et Bootstrap. La V2 utilise 11ty avec :
|
||||
- CSS personnalisé (pas de framework)
|
||||
- JavaScript Vanilla
|
||||
- Structure de fichiers organisée
|
||||
- Build statique déployable partout
|
||||
|
||||
### Services Fédiverse
|
||||
- ✅ GADE (PeerTube) - Alternative libre à YouTube
|
||||
- ✅ BOKANTAJ (Pleroma + Soapbox) - Alternative libre à X/Twitter
|
||||
- ✅ MIZIK (Funkwhale) - Alternative libre à SoundCloud
|
||||
- ✅ KUTE (Castopod) - Plateforme libre de podcasting
|
||||
|
||||
### Projets Web
|
||||
- ✅ FEDIVERSE OKI - Portail d'accès à tous nos services Fédiverse
|
||||
- ✅ OKI.RE - Transcriptions et traductions de productions musicales
|
||||
- ✅ NUVEL.NU - Actualités multilingues de nos régions
|
||||
- ✅ JWE.OVH - Jeu cartographique éducatif et ludique
|
||||
- ✅ GONG.GP - Documents historiques du GONG
|
||||
- ✅ Tous les projets sont cliquables avec liens directs
|
||||
|
||||
### Partenaires
|
||||
- ✅ Joukawouvè - Créateur de contenu sur GADE
|
||||
- ✅ Aktivist Vybz #AKV - Émission engagée sur GADE
|
||||
- ✅ Section dédiée avec logos et descriptions
|
||||
- ✅ Lien dans la navigation
|
||||
- ✅ Appel à devenir partenaire
|
||||
|
||||
### Contenu juridique
|
||||
- ✅ Page de mentions légales complète
|
||||
- ✅ Conformité RGPD
|
||||
- ✅ Licence AGPL-V3 intégrée
|
||||
- ✅ Liens Stripe configurés (dons ponctuels et mensuels)
|
||||
- ✅ Liens Liberapay et Ko-fi ajoutés
|
||||
|
||||
### TODO
|
||||
- [ ] Ajouter plus d'images si nécessaire
|
||||
- [ ] Configurer le déploiement automatique
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
# Guide de contribution
|
||||
|
||||
Merci de votre intérêt pour contribuer au site de l'Organisation Ka Internationale !
|
||||
|
||||
## Ajouter du contenu
|
||||
|
||||
### Ajouter un service Fédiverse
|
||||
|
||||
Éditez `src/_data/services.json` :
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "NOM_DU_SERVICE",
|
||||
"icon": "🎯",
|
||||
"platform": "Nom de la plateforme",
|
||||
"description": "Description du service",
|
||||
"url": "https://service.o-k-i.net/",
|
||||
"linkText": "Accéder à SERVICE"
|
||||
}
|
||||
```
|
||||
|
||||
### Ajouter un projet web
|
||||
|
||||
Éditez `src/_data/projects.json` :
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "NOM.PROJET",
|
||||
"icon": "📱",
|
||||
"domain": "nom.projet",
|
||||
"description": "Description du projet"
|
||||
}
|
||||
```
|
||||
|
||||
### Ajouter une valeur
|
||||
|
||||
Éditez `src/_data/values.json` :
|
||||
|
||||
```json
|
||||
{
|
||||
"icon": "🌟",
|
||||
"title": "Titre",
|
||||
"description": "Description de la valeur"
|
||||
}
|
||||
```
|
||||
|
||||
### Modifier la navigation
|
||||
|
||||
Éditez `src/_data/navigation.json` :
|
||||
|
||||
```json
|
||||
{
|
||||
"text": "Texte du lien",
|
||||
"url": "#section",
|
||||
"external": false
|
||||
}
|
||||
```
|
||||
|
||||
Pour un lien externe, mettez `"external": true`.
|
||||
|
||||
### Ajouter une section de contact
|
||||
|
||||
Éditez `src/_data/contact.json` :
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "🔗 Titre de la section",
|
||||
"links": [
|
||||
{
|
||||
"text": "Nom du lien",
|
||||
"url": "https://example.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Modifier les styles
|
||||
|
||||
Les styles sont dans `src/assets/css/styles.css`.
|
||||
|
||||
### Variables CSS disponibles
|
||||
|
||||
```css
|
||||
--bleu-ocean: #003566;
|
||||
--jaune-soleil: #FFB700;
|
||||
--rouge-resistance: #D62828;
|
||||
--vert-terre: #2A9134;
|
||||
--orange-communaute: #FB8500;
|
||||
--noir-profond: #0A0908;
|
||||
--blanc-lumiere: #F7F7F2;
|
||||
--violet-fedi: #6364FF;
|
||||
```
|
||||
|
||||
## Créer une nouvelle page
|
||||
|
||||
1. Créez un fichier `.njk` dans `src/` :
|
||||
|
||||
```njk
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
title: Titre de la page
|
||||
description: Description pour le SEO
|
||||
---
|
||||
|
||||
<section>
|
||||
<h1>{{ title }}</h1>
|
||||
<p>Contenu de votre page</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
2. Ajoutez le lien dans `src/_data/navigation.json` si nécessaire
|
||||
|
||||
3. Reconstruisez le site : `npm run build`
|
||||
|
||||
## Modifier un partial
|
||||
|
||||
Les partials sont dans `src/_includes/partials/` :
|
||||
|
||||
- `nav.njk` - Navigation
|
||||
- `hero.njk` - Section hero (accueil)
|
||||
- `fediverse.njk` - Services Fédiverse
|
||||
- `projects.njk` - Projets web
|
||||
- `mission.njk` - Mission et valeurs
|
||||
- `hosting.njk` - Services d'hébergement
|
||||
- `support.njk` - Section dons
|
||||
- `contact.njk` - Informations de contact
|
||||
- `footer.njk` - Pied de page
|
||||
|
||||
## Workflow de développement
|
||||
|
||||
1. Créez une branche pour votre fonctionnalité :
|
||||
```bash
|
||||
git checkout -b feature/ma-fonctionnalite
|
||||
```
|
||||
|
||||
2. Faites vos modifications
|
||||
|
||||
3. Testez localement :
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
4. Buildez pour vérifier :
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
5. Commitez vos changements :
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Description de vos changements"
|
||||
```
|
||||
|
||||
6. Poussez et créez une pull request :
|
||||
```bash
|
||||
git push origin feature/ma-fonctionnalite
|
||||
```
|
||||
|
||||
## Standards de code
|
||||
|
||||
### HTML/Nunjucks
|
||||
- Indentation : 4 espaces
|
||||
- Toujours fermer les balises
|
||||
- Attributs entre guillemets doubles
|
||||
|
||||
### CSS
|
||||
- Indentation : 4 espaces
|
||||
- Utiliser les variables CSS quand possible
|
||||
- Mobile-first pour le responsive
|
||||
|
||||
### JavaScript
|
||||
- Indentation : 4 espaces
|
||||
- Vanilla JS (pas de framework)
|
||||
- Commentaires en français
|
||||
- Gestion des erreurs
|
||||
|
||||
## Questions ?
|
||||
|
||||
Contactez-nous à kontak@o-k-i.net ou ouvrez une issue sur Codeberg.
|
||||
@@ -0,0 +1,661 @@
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU Affero General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero General Public License from time to time. Such new versions
|
||||
will be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU Affero General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU Affero General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU Affero General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU AGPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
@@ -0,0 +1,151 @@
|
||||
# o-k-i.net V2
|
||||
|
||||
Site web officiel de ** ORGANISATION KA INTERNATIONALE (OKI)** - Version 2 construite avec 11ty (Eleventy).
|
||||
|
||||
## À propos
|
||||
|
||||
ORGANISATION KA INTERNATIONALE est une association à but non lucratif dédiée à la promotion de nos langues et au traitement de l'actualité, proposant des alternatives libres aux GAFAM.
|
||||
|
||||
## Technologies
|
||||
|
||||
- **11ty (Eleventy)** - Générateur de site statique
|
||||
- **Nunjucks** - Moteur de templates
|
||||
- **CSS personnalisé** - Sans framework
|
||||
- **JavaScript Vanilla** - Interactions et animations
|
||||
|
||||
## Structure du projet
|
||||
|
||||
```
|
||||
o-k-i.net-V2/
|
||||
├── src/
|
||||
│ ├── _data/ # Données JSON (services, projets, valeurs, etc.)
|
||||
│ ├── _includes/
|
||||
│ │ ├── layouts/ # Layouts de base
|
||||
│ │ └── partials/ # Composants réutilisables
|
||||
│ ├── assets/
|
||||
│ │ ├── css/ # Feuilles de style
|
||||
│ │ ├── js/ # Scripts JavaScript
|
||||
│ │ └── images/ # Images
|
||||
│ └── index.njk # Page d'accueil
|
||||
├── _site/ # Site généré (git ignoré)
|
||||
├── eleventy.config.js # Configuration 11ty
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
# Cloner le dépôt
|
||||
git clone https://codeberg.org/OKI/o-k-i.net-V2.git
|
||||
cd o-k-i.net-V2
|
||||
|
||||
# Installer les dépendances
|
||||
npm install
|
||||
```
|
||||
|
||||
## Développement
|
||||
|
||||
```bash
|
||||
# Lancer le serveur de développement avec hot reload
|
||||
npm start
|
||||
|
||||
# Le site sera disponible sur http://localhost:8080
|
||||
```
|
||||
|
||||
## Build de production
|
||||
|
||||
```bash
|
||||
# Générer le site statique
|
||||
npm run build
|
||||
|
||||
# Les fichiers seront dans le dossier _site/
|
||||
```
|
||||
|
||||
## Personnalisation
|
||||
|
||||
### Modifier les données
|
||||
|
||||
Les données du site sont organisées dans `src/_data/` :
|
||||
|
||||
- `site.json` - Informations générales du site
|
||||
- `services.json` - Services Fédiverse (KUTE, GADE, BOKANTAJ, MIZIK)
|
||||
- `projects.json` - Projets web (FEDIVERSE OKI, OKI.RE, NUVEL.NU, JWE.OVH, GONG.GP)
|
||||
- `partners.json` - Partenaires (Joukawouvè, Aktivist Vybz #AKV)
|
||||
- `values.json` - Valeurs de l'organisation
|
||||
- `contact.json` - Informations de contact
|
||||
- `navigation.json` - Liens de navigation
|
||||
|
||||
### Modifier les styles
|
||||
|
||||
Les styles sont dans `src/assets/css/styles.css`. La charte graphique est basée sur les couleurs du logo officiel d'OKI :
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Couleurs du logo OKI */
|
||||
--or-oki: #E8A625; /* Orange/Or du logo */
|
||||
--noir-oki: #000000; /* Noir du logo */
|
||||
--vert-oki: #00A854; /* Vert émeraude du logo */
|
||||
--rouge-oki: #ED1C4C; /* Rouge/Rose du logo */
|
||||
--blanc-creme: #F7F7F2; /* Blanc crème */
|
||||
|
||||
/* Couleurs dérivées pour le design */
|
||||
--noir-profond: #1A1A1A;
|
||||
--gris-sombre: #2A2A2A;
|
||||
--or-clair: #F5BD4F;
|
||||
--vert-clair: #00C569;
|
||||
--rouge-clair: #FF2D5F;
|
||||
}
|
||||
```
|
||||
|
||||
## Fonctionnalités
|
||||
|
||||
- ✅ Design responsive et moderne
|
||||
- ✅ Animations fluides
|
||||
- ✅ Navigation mobile
|
||||
- ✅ Scroll smooth
|
||||
- ✅ Effets hover interactifs
|
||||
- ✅ Easter egg Konami Code
|
||||
- ✅ Performance optimisée
|
||||
- ✅ SEO friendly
|
||||
- ✅ Logo et favicon intégrés
|
||||
- ✅ Charte graphique basée sur le logo officiel
|
||||
|
||||
## Sections du site
|
||||
|
||||
1. **Hero** - Présentation de l'organisation
|
||||
2. **Fédiverse** - Services alternatifs (PeerTube, Pleroma, Funkwhale, Castopod)
|
||||
3. **Projets Web** - Projets de l'organisation
|
||||
4. **Mission** - Valeurs et objectifs
|
||||
5. **Hébergement** - Services d'hébergement proposés
|
||||
6. **Support** - Options de dons
|
||||
7. **Partenaires** - Nos partenaires médias et créateurs
|
||||
8. **Contact** - Liens vers réseaux sociaux et plateformes
|
||||
|
||||
## Contribution
|
||||
|
||||
Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une pull request sur [Codeberg](https://codeberg.org/OKI/o-k-i.net-V2).
|
||||
|
||||
## Licence
|
||||
|
||||
Ce projet est sous licence **GNU Affero General Public License v3.0 (AGPL-V3)**.
|
||||
|
||||
La licence AGPL-V3 est une licence de logiciel libre qui garantit :
|
||||
- La liberté d'utiliser le logiciel à toute fin
|
||||
- La liberté d'étudier et de modifier le code source
|
||||
- La liberté de redistribuer des copies
|
||||
- L'obligation de partager les modifications sous la même licence
|
||||
- L'obligation de fournir le code source aux utilisateurs du service en ligne
|
||||
|
||||
Voir le fichier [LICENSE](LICENSE) pour plus de détails ou consultez : https://www.gnu.org/licenses/agpl-3.0.html
|
||||
|
||||
© 2024 ORGANISATION KA INTERNATIONALE
|
||||
|
||||
## Liens
|
||||
|
||||
- 🌐 [Site web](https://o-k-i.net)
|
||||
- 📺 [GADE (PeerTube)](https://gade.o-k-i.net/)
|
||||
- 🐦 [BOKANTAJ (Pleroma)](https://bokantaj.o-k-i.net/)
|
||||
- 🎵 [MIZIK (Funkwhale)](https://mizik.o-k-i.net/library)
|
||||
- 🎙️ [KUTE (Castopod)](https://kute.o-k-i.net/)
|
||||
- 💻 [Codeberg](https://codeberg.org/OKI)
|
||||
- 📧 kontak@o-k-i.net
|
||||
@@ -0,0 +1,27 @@
|
||||
module.exports = function(eleventyConfig) {
|
||||
// Copy assets folders to output
|
||||
eleventyConfig.addPassthroughCopy("src/assets");
|
||||
|
||||
// Watch CSS files for changes
|
||||
eleventyConfig.addWatchTarget("src/assets/css/");
|
||||
|
||||
// Watch JS files for changes
|
||||
eleventyConfig.addWatchTarget("src/assets/js/");
|
||||
|
||||
// Configure browser sync to reload on CSS changes
|
||||
eleventyConfig.setBrowserSyncConfig({
|
||||
files: ['_site/assets/css/**/*.css', '_site/assets/js/**/*.js']
|
||||
});
|
||||
|
||||
return {
|
||||
dir: {
|
||||
input: "src",
|
||||
output: "_site",
|
||||
includes: "_includes",
|
||||
data: "_data"
|
||||
},
|
||||
templateFormats: ["html", "md", "njk", "liquid"],
|
||||
htmlTemplateEngine: "njk",
|
||||
markdownTemplateEngine: "njk"
|
||||
};
|
||||
};
|
||||
Generated
+1700
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "o-k-i.net-v2",
|
||||
"version": "1.0.0",
|
||||
"description": "Site web de l'Organisation Ka Internationale (OKI) - V2",
|
||||
"scripts": {
|
||||
"start": "eleventy --serve",
|
||||
"build": "eleventy",
|
||||
"clean": "rm -rf _site"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Organisation Ka Internationale",
|
||||
"license": "AGPL-3.0",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.2"
|
||||
}
|
||||
}
|
||||
@@ -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