feat: add team titles, update powered-by-bitcoin, add tech overview page
This commit is contained in:
4NK Dev
parent
627947d44b
commit
8f0eb756c7
BIN
4NKheader-full.png
Normal file
BIN
4NKheader-full.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
BIN
4NKheader-tr.png
Normal file
BIN
4NKheader-tr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
4NKheader.png
Normal file
BIN
4NKheader.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
Nicolas.jpg
Normal file
BIN
Nicolas.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
137
README.md
137
README.md
@ -1,131 +1,14 @@
|
|||||||
# Site 4NK - The self-custodial cloud infrastructure
|
# One-page site (no build tools)
|
||||||
|
|
||||||
## Description
|
Open `index.html` in your browser. That's it.
|
||||||
|
|
||||||
Site web moderne pour 4NK, une infrastructure révolutionnaire qui redéfinit la sécurité et la décentralisation. Le site met en valeur l'identité visuelle de la marque avec un design sombre et des effets de glow orange/jaune.
|
## Customize
|
||||||
|
- Edit text in `index.html` sections: `#hero`, `#features`, `#about`, `#contact`.
|
||||||
|
- Tweak colors and spacing via CSS variables in `styles.css`.
|
||||||
|
- Change the mailto address in the contact form action.
|
||||||
|
|
||||||
## Caractéristiques
|
## Optional local server
|
||||||
|
You can also serve it locally to test relative paths:
|
||||||
|
|
||||||
### Design
|
- macOS (Python): `python3 -m http.server 8000`
|
||||||
- **Thème sombre** avec fond noir et effets de glow
|
- then open http://localhost:8000/
|
||||||
- **Logos SVG** animés avec effets de lumière
|
|
||||||
- **Typographie moderne** utilisant la police Inter
|
|
||||||
- **Design responsive** pour mobile et desktop
|
|
||||||
- **Animations fluides** et effets de parallaxe
|
|
||||||
|
|
||||||
### Sections
|
|
||||||
1. **Header** - Navigation fixe avec logo animé
|
|
||||||
2. **Hero** - Section principale avec logo grand format et titre
|
|
||||||
3. **Services** - Présentation des services avec icônes animées
|
|
||||||
4. **À propos** - Description de l'entreprise avec logo showcase
|
|
||||||
5. **Contact** - Formulaire de contact interactif
|
|
||||||
6. **Footer** - Liens et informations de bas de page
|
|
||||||
|
|
||||||
### Effets visuels
|
|
||||||
- **Glow effects** sur les logos et éléments interactifs
|
|
||||||
- **Particules flottantes** en arrière-plan
|
|
||||||
- **Animations CSS** et JavaScript
|
|
||||||
- **Curseur personnalisé** avec effet de glow
|
|
||||||
- **Transitions fluides** entre les sections
|
|
||||||
|
|
||||||
## Structure des fichiers
|
|
||||||
|
|
||||||
```
|
|
||||||
website/
|
|
||||||
├── index.html # Structure HTML principale
|
|
||||||
├── styles.css # Styles CSS avec animations
|
|
||||||
├── script.js # JavaScript pour interactions
|
|
||||||
└── README.md # Documentation
|
|
||||||
```
|
|
||||||
|
|
||||||
## Installation et utilisation
|
|
||||||
|
|
||||||
### Prérequis
|
|
||||||
- Serveur web local (Python, Node.js, ou autre)
|
|
||||||
- Navigateur moderne supportant CSS3 et JavaScript
|
|
||||||
|
|
||||||
### Lancement local
|
|
||||||
|
|
||||||
1. **Avec Python** (recommandé) :
|
|
||||||
```bash
|
|
||||||
cd /home/debian/website
|
|
||||||
python3 -m http.server 8080
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **Accès** :
|
|
||||||
Ouvrir http://localhost:8080 dans votre navigateur
|
|
||||||
|
|
||||||
### Alternative avec Node.js
|
|
||||||
```bash
|
|
||||||
npx serve /home/debian/website -p 8080
|
|
||||||
```
|
|
||||||
|
|
||||||
## Personnalisation
|
|
||||||
|
|
||||||
### Couleurs
|
|
||||||
Les couleurs principales sont définies dans les variables CSS :
|
|
||||||
- `--primary-orange: #FF6B35`
|
|
||||||
- `--secondary-orange: #FF8E53`
|
|
||||||
- `--accent-orange: #FFA500`
|
|
||||||
- `--gold: #FFD700`
|
|
||||||
|
|
||||||
### Logos
|
|
||||||
Les logos sont créés en SVG avec des gradients et filtres pour les effets de glow. Ils peuvent être facilement modifiés dans le code HTML.
|
|
||||||
|
|
||||||
### Animations
|
|
||||||
Les animations sont contrôlées par CSS et JavaScript. Les durées et effets peuvent être ajustés dans les fichiers respectifs.
|
|
||||||
|
|
||||||
## Compatibilité
|
|
||||||
|
|
||||||
- **Navigateurs** : Chrome, Firefox, Safari, Edge (versions récentes)
|
|
||||||
- **Responsive** : Mobile, tablette, desktop
|
|
||||||
- **Technologies** : HTML5, CSS3, JavaScript ES6+
|
|
||||||
|
|
||||||
## Performance
|
|
||||||
|
|
||||||
- **Optimisé** pour le chargement rapide
|
|
||||||
- **Images SVG** pour une qualité vectorielle
|
|
||||||
- **CSS minifiable** pour la production
|
|
||||||
- **JavaScript modulaire** et optimisé
|
|
||||||
|
|
||||||
## Développement
|
|
||||||
|
|
||||||
### Structure du code
|
|
||||||
- **HTML sémantique** avec sections bien définies
|
|
||||||
- **CSS organisé** avec variables et animations
|
|
||||||
- **JavaScript modulaire** avec gestion d'événements
|
|
||||||
|
|
||||||
### Améliorations possibles
|
|
||||||
- Ajout d'un système de build (Webpack, Vite)
|
|
||||||
- Optimisation des performances
|
|
||||||
- Tests automatisés
|
|
||||||
- Intégration CI/CD
|
|
||||||
|
|
||||||
## Licence
|
|
||||||
|
|
||||||
Projet développé pour 4NK - Tous droits réservés.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Note** : Ce site a été créé pour mettre en valeur l'identité visuelle de 4NK avec un design moderne et des effets visuels impressionnants.
|
|
||||||
|
|
||||||
## Configuration et scripts (backend mailer)
|
|
||||||
|
|
||||||
- **Backend**: Node/Express + Nodemailer dans `server/`
|
|
||||||
- **Endpoint**: POST `/contact` (proxy via nginx)
|
|
||||||
- **Config nginx**: `conf/4nk.network.conf`
|
|
||||||
- **Docs nginx**: `conf/README.md`
|
|
||||||
- **Scripts**: `scripts/reload-nginx.sh`, `scripts/test-contact.sh`, `scripts/install-mailer.sh`
|
|
||||||
- **Systemd example**: `conf/4nk-mailer.service.example`
|
|
||||||
|
|
||||||
### Variables d'environnement (charger via systemd)
|
|
||||||
|
|
||||||
- `SERVER_PORT` (defaut: 3001)
|
|
||||||
- `SMTP_HOST` (defaut: 127.0.0.1)
|
|
||||||
- `SMTP_PORT` (defaut: 25)
|
|
||||||
- `SMTP_SECURE` (defaut: false)
|
|
||||||
- `SMTP_TLS_REJECT_UNAUTHORIZED` (defaut: false)
|
|
||||||
- `SMTP_FROM` (defaut: no-reply@4nk.network)
|
|
||||||
- `SMTP_TO` (defaut: nicolas.cantu@4nk.network)
|
|
||||||
|
|
||||||
Placez ces variables dans `/etc/default/4nk-mailer` et pointez `EnvironmentFile` depuis `conf/4nk-mailer.service.example`.
|
|
||||||
|
|||||||
BIN
Stephane.jpg
Normal file
BIN
Stephane.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -23,3 +23,4 @@ WantedBy=multi-user.target
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
57
cypher-tank.html
Normal file
57
cypher-tank.html
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Cypher Tank | 4NK.network</title>
|
||||||
|
<meta name="robots" content="noindex, nofollow" />
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<style>
|
||||||
|
/* Make the iframe roomy below header */
|
||||||
|
.full-embed{ height: calc(100vh - 120px); width:100%; border:0; border-top:1px solid var(--border); }
|
||||||
|
@media (max-width:768px){ .full-embed{ height: calc(100vh - 140px); } }
|
||||||
|
</style>
|
||||||
|
<meta name="color-scheme" content="dark light" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='65' font-size='60' text-anchor='middle'%3E%E2%9A%A1%EF%B8%8F%3C/text%3E%3C/svg%3E" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container row between center">
|
||||||
|
<a class="logo" href="index.html#top">4NK</a>
|
||||||
|
<nav class="nav" aria-label="Primary navigation">
|
||||||
|
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-links">☰</button>
|
||||||
|
<ul id="nav-links">
|
||||||
|
<li><a href="index.html#intro">Home</a></li>
|
||||||
|
<li><a href="index.html#principles">Services</a></li>
|
||||||
|
<li><a href="index.html#team">About</a></li>
|
||||||
|
<li><a href="index.html#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="section" style="padding:1rem 0 2rem; border-bottom:0; width:100%;">
|
||||||
|
<div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
|
||||||
|
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
|
||||||
|
border-radius: 8px; will-change: transform;">
|
||||||
|
<iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
|
||||||
|
src="https://www.canva.com/design/DAG0YYRiTgk/hg6-u8emxIrLASB3mdFtug/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
<p style="text-align:center; margin-top:.5rem;">
|
||||||
|
<a href="https://www.canva.com/design/DAG0YYRiTgk/hg6-u8emxIrLASB3mdFtug/view?utm_content=DAG0YYRiTgk&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">4NK PITCH V0.2</a> by Elie Sader
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<small>© <span id="year"></span> 4NK. All rights reserved.</small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -165,3 +165,4 @@ Migrating to a distributed, neutral, and verifiable infrastructure is not a seco
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
209
fr/index.html
Normal file
209
fr/index.html
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Accueil | 4NK.network</title>
|
||||||
|
<meta name="description" content="Cloud auto-souverain. Reconstruire le Web, droit dans ses bottes." />
|
||||||
|
<meta property="og:title" content="4NK.network" />
|
||||||
|
<meta property="og:description" content="Cloud auto-souverain. Reconstruire le Web, droit dans ses bottes." />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='65' font-size='60' text-anchor='middle'%3E%E2%9A%A1%EF%B8%8F%3C/text%3E%3C/svg%3E" />
|
||||||
|
<link rel="stylesheet" href="../styles.css" />
|
||||||
|
<meta name="color-scheme" content="dark light" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<link rel="preload" as="image" href="../4NKheader.png" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="left-group">
|
||||||
|
<img class="brand-mark" src="../logo.png" alt="Logo 4NK" />
|
||||||
|
<a class="logo" href="#top">4NK</a>
|
||||||
|
</div>
|
||||||
|
<nav class="nav" aria-label="Navigation principale">
|
||||||
|
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-links">☰</button>
|
||||||
|
<ul id="nav-links">
|
||||||
|
<li><a href="#intro">Accueil</a></li>
|
||||||
|
<li><a href="#services">Services</a></li>
|
||||||
|
<li><a href="#team">À propos</a></li>
|
||||||
|
<li><a href="#contact">Contact</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="/" class="language-toggle" title="English">
|
||||||
|
<img src="https://api.iconify.design/twemoji:flag-united-kingdom.svg" alt="English" style="width: 24px; height: 24px; vertical-align: middle;">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="top">
|
||||||
|
<!-- Intro: Cloud Auto-Souverain -->
|
||||||
|
<section id="intro" class="section intro">
|
||||||
|
<div class="container intro-grid">
|
||||||
|
<div class="intro-media">
|
||||||
|
<img src="../4NKheader-tr.png" alt="En-tête 4NK" />
|
||||||
|
</div>
|
||||||
|
<div class="intro-copy">
|
||||||
|
<h1>Cloud Auto-Hébergé</h1>
|
||||||
|
<p class="subhead accent">Plus Sûr, Plus Simple, Souverain</p>
|
||||||
|
<p>Les utilisateurs paient toujours plus cher pour collaborer, gérer leurs identités et accéder à leurs propres données, tout en restant vulnérables aux piratages, rançongiciels et espionnage... <br> <br> Et s'il existait une solution, juste à portée de main ?
|
||||||
|
<br> <br> 4NK construit un cloud où vous restez propriétaire de vos données, alliant souveraineté et simplicité. Nous faisons de la souveraineté numérique une réalité technique, pas une simple promesse.</p>
|
||||||
|
<div class="actions">
|
||||||
|
<a class="button primary" href="#services">Découvrir nos Services</a>
|
||||||
|
<a class="button" href="#contact">Nous contacter</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Mission: Reconstruire le Web, Droit dans ses Bottes -->
|
||||||
|
<section id="mission" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-row alt-left">
|
||||||
|
<div class="col-title">
|
||||||
|
<h2>Reconstruire le Web, À l'endroit</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-content">
|
||||||
|
<p>L'OS Cloud Auto-Souverain 4NK fonctionne comme une application sur votre équipement souvent sous-utilisé. <br> <br> Nous restaurons l'autonomie des utilisateurs sur Internet en utilisant les clés privées comme fondement pour ancrer la propriété et les flux de travail de confiance. Notre approche est pragmatique, axée sur la confidentialité et alignée sur Bitcoin.
|
||||||
|
<br> <br> Pas de blockchain, pas de jeton : simplement une infrastructure côté client qui étend les propriétés de Bitcoin pour une utilisation quotidienne et des flux de travail collaboratifs.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid principles-grid span-2">
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Clé" src="https://api.iconify.design/solar:key-minimalistic-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Identité</h3>
|
||||||
|
<p>Les utilisateurs possèdent et gèrent leurs propres clés en toutes circonstances. <br> L'infrastructure est construite autour de vous. <br> Contrôlez ce que vous partagez, avec qui et comment.</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Données" src="https://api.iconify.design/solar:database-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Sans Infrastructure</h3>
|
||||||
|
<p>Utilisez du matériel existant ou sous-utilisé (ordinateur portable, serveurs...) pour exécuter l'application. Les nouveaux investissements CAPEX sont optionnels. Invitez d'autres à utiliser votre infrastructure (juste d'un navigateur).</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Sécurité" src="https://api.iconify.design/solar:shield-user-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Sécurité</h3>
|
||||||
|
<p>Vos données, vos règles. Chiffrement par défaut, partage selon vos conditions. Stockage entièrement chiffré. Local ou distribué. Toutes les communications sont chiffrées et ne fuient pas de métadonnées grâce à la fonctionnalité de silentpayment de Bitcoin.</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Réseau" src="https://api.iconify.design/iconoir:network-solid.svg?color=%23f7931a" />
|
||||||
|
<h3>Réseau</h3>
|
||||||
|
<p>Collaborez et réseautez comme bon vous semble. La couche réseau est composée de nœuds qui peuvent être locaux ou distribués. De nombreux réseaux peuvent être construits à partir de nœuds ouverts ou en îlots fermés.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services -->
|
||||||
|
<section id="services" class="section tinted">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-row alt-right">
|
||||||
|
<div class="col-media"><img src="../usercloud.png" alt="Illustration de cloud utilisateur" /></div>
|
||||||
|
<div class="col-title">
|
||||||
|
<h2>Vos Clés,<br>Vos Flux de Travail</h2>
|
||||||
|
<p class="lead">La proposition de valeur du Cloud Auto-Souverain est de vous permettre de créer n'importe quel flux de travail collaboratif dans le cloud.
|
||||||
|
<br> Voici quelques exemples des services que vous pouvez déployer.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid principles-grid span-2">
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Coffre-fort" src="https://api.iconify.design/solar:key-minimalistic-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Coffre-fort Numérique Personnel</h3>
|
||||||
|
<p>Stockage sécurisé pour vos documents. Partage sécurisé. Choisissez de stocker localement ou dans le cloud. Toujours entièrement chiffré par votre clé privée.</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Souveraineté" src="https://api.iconify.design/solar:shield-user-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Souveraineté Personnelle</h3>
|
||||||
|
<p>Exécutez un LLM uniquement sur le contenu que vous possédez et souhaitez garder privé. 100% local. <br> Sans aucune fuite de données</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Documents" src="https://api.iconify.design/solar:database-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Documents Collaboratifs</h3>
|
||||||
|
<p>Créez des flux de travail documentaires sécurisés. Avec stockage et partage de données chiffrés. Gestion d'identités ultra-simple : créez, partagez, invitez des utilisateurs (ils n'ont pas besoin d'exécuter de nœud, juste d'un navigateur).</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Orchestration" src="https://api.iconify.design/iconoir:network-solid.svg?color=%23f7931a" />
|
||||||
|
<h3>Orchestration des Flux de Travail</h3>
|
||||||
|
<p>Vos Règles : gérez entièrement les règles, rôles, politiques d'accès et accès aux données pour n'importe quel flux de travail. Toujours avec des identités vérifiables. Piste d'audit avec preuves horodatées à chaque interaction.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Mises à Jour -->
|
||||||
|
<section id="updates" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-row alt-right">
|
||||||
|
<div class="col-media letterbox"><img src="../updates.png" alt="Illustration des mises à jour" /></div>
|
||||||
|
<div class="col-title">
|
||||||
|
<h2>Actualités</h2>
|
||||||
|
<p>Dernières actualités et projets du réseau 4NK.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="updates span-2">
|
||||||
|
<li><strong>Sep 2025 :</strong> Version alpha d'un service freemium B2C de cloud auto-souverain.</li>
|
||||||
|
<li><strong>Août 2025 :</strong> Version alpha d'un LLM local auto-hébergé fonctionnant uniquement sur le contenu de l'utilisateur.</li>
|
||||||
|
<li><strong>Juil 2025 :</strong> Phase de pré-production pour le flux de travail documentaire sécurisé pour les services notariaux.</li>
|
||||||
|
<li><strong>Mars 2025 :</strong> Premier POC pour un flux de travail documentaire entièrement sécurisé pour les services notariaux.</li>
|
||||||
|
<li><strong>2024 - 2025 :</strong> "Tour de France" des Meetups Bitcoin présentant les propriétés de SilentPayment.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Équipe -->
|
||||||
|
<section id="team" class="section tinted">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Équipe</h2>
|
||||||
|
<p class="lead">Notre équipe et comité consultatif sont composés de professionnels expérimentés et de passionnés de Bitcoin, dont un développeur principal. Notre mission est d'étendre les propriétés de Bitcoin, comme l'auto-custode, la confidentialité et l'autonomisation, à la vie numérique quotidienne.</p>
|
||||||
|
<div class="grid team-grid">
|
||||||
|
<img src="/Nicolas.jpg" alt="CEO and CO-Founder" />
|
||||||
|
<img src="/Stephane.jpg" alt="President" />
|
||||||
|
<img src="/sosthene.png" alt="Core Dev" />
|
||||||
|
<img src="" alt="Sales Director" />
|
||||||
|
<img src="" alt="UUX" />
|
||||||
|
<img src="/elie.jpeg" alt="Strategist and Solutions Marketing" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact -->
|
||||||
|
<section id="contact" class="section">
|
||||||
|
<div class="container" style="text-align: center;">
|
||||||
|
<div style="max-width: 400px; margin: 0 auto 2rem;">
|
||||||
|
<p class="lead" style="white-space: nowrap;">Intéressé par des solutions cloud auto-souveraines ?</p>
|
||||||
|
<a href="mailto:nicolas.cantu@pm.me" class="button primary" style="font-size: 1.2rem; padding: 12px 24px; display: inline-block;">
|
||||||
|
Contactez-nous
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="#intro">Accueil</a>
|
||||||
|
<a href="#services">Services</a>
|
||||||
|
<a href="#team">À propos</a>
|
||||||
|
<a href="#contact">Contact</a>
|
||||||
|
<a href="../powered-by-bitcoin.html">Propulsé par Bitcoin</a>
|
||||||
|
<a href="../manifest.html">Manifeste</a>
|
||||||
|
<a href="https://git.4nkweb.com/" target="_blank" rel="noopener">Git</a>
|
||||||
|
<a href="https://twitter.com/@NicolasCantuBk" target="_blank" rel="noopener">Twitter</a>
|
||||||
|
</nav>
|
||||||
|
<small>© <span id="year"></span> 4NK. Tous droits réservés.</small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Mettre à jour l'année du copyright
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.getElementById('year').textContent = new Date().getFullYear();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script src="../script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
img/4NKheader-full.png
Normal file
BIN
img/4NKheader-full.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
BIN
img/4NKheader-tr.png
Normal file
BIN
img/4NKheader-tr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
img/4NKheader.png
Normal file
BIN
img/4NKheader.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
img/Nicolas.jpg
Normal file
BIN
img/Nicolas.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
img/Stephane.jpg
Normal file
BIN
img/Stephane.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
img/elie.jpeg
Normal file
BIN
img/elie.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
img/sosthene.png
Normal file
BIN
img/sosthene.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 566 KiB |
BIN
img/updates.png
Normal file
BIN
img/updates.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 547 KiB |
BIN
img/usercloud.png
Normal file
BIN
img/usercloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 626 KiB |
385
index.html
385
index.html
@ -1,182 +1,221 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>4NK - The self-custodial cloud infrastructure</title>
|
<title>Home | 4NK.network</title>
|
||||||
<link rel="icon" type="image/png" href="favicon.png">
|
<meta name="description" content="Self-custodial cloud. Rebuild the Web, upright." />
|
||||||
<link rel="stylesheet" href="styles.css">
|
<meta property="og:title" content="4NK.network" />
|
||||||
<link rel="canonical" href="https://4nk.network/">
|
<meta property="og:description" content="Self-custodial cloud. Rebuild the Web, upright." />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<meta property="og:type" content="website" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='65' font-size='60' text-anchor='middle'%3E%E2%9A%A1%EF%B8%8F%3C/text%3E%3C/svg%3E" />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<meta name="color-scheme" content="dark light" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<link rel="preload" as="image" href="4NKheader.png" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="background-pattern"></div>
|
<header class="site-header">
|
||||||
|
<div class="container row between center">
|
||||||
|
<div class="left-group">
|
||||||
|
<img class="brand-mark" src="logo.png" alt="4NK logo" />
|
||||||
|
<a class="logo" href="#top">4NK</a>
|
||||||
|
</div>
|
||||||
|
<nav class="nav" aria-label="Primary navigation">
|
||||||
|
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-links">☰</button>
|
||||||
|
<ul id="nav-links">
|
||||||
|
<li><a href="#intro">Home</a></li>
|
||||||
|
<li><a href="#services">Services</a></li>
|
||||||
|
<li><a href="#team">About</a></li>
|
||||||
|
<li><a href="#contact">Contact</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="/fr/" class="language-toggle" title="Français">
|
||||||
|
<img src="https://api.iconify.design/twemoji:flag-france.svg" alt="Français" style="width: 24px; height: 24px; vertical-align: middle;">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<header class="header">
|
<main id="top">
|
||||||
<nav class="nav">
|
<!-- Intro: Self-Custodial Cloud -->
|
||||||
<div class="nav-logo">
|
<section id="intro" class="section intro">
|
||||||
<div class="logo-container">
|
<div class="container intro-grid">
|
||||||
<img src="img/logo.png" alt="4NK Logo" class="logo-img">
|
<div class="intro-media">
|
||||||
</div>
|
<img src="4NKheader-tr.png" alt="4NK header" />
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-menu">
|
|
||||||
<a href="#home" class="nav-link">Home</a>
|
|
||||||
<a href="#services" class="nav-link">Services</a>
|
|
||||||
<a href="#about" class="nav-link">About</a>
|
|
||||||
<a href="#contact" class="nav-link">Contact</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section id="home" class="hero">
|
|
||||||
<div class="hero-content">
|
|
||||||
<div class="hero-logo">
|
|
||||||
<img src="/img/infra.png" alt="4NK Hero Logo" class="hero-logo-img">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-text">
|
|
||||||
<h1 class="hero-title">
|
|
||||||
<span class="brand-name">4NK</span>
|
|
||||||
<span class="brand-subtitle">Infrastructure</span>
|
|
||||||
<span class="brand-tagline">custodian-killer</span>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="hero-description">
|
|
||||||
A revolutionary infrastructure redefining security and decentralization.
|
|
||||||
Our cutting-edge technology removes intermediaries and puts control in your hands.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="hero-buttons">
|
|
||||||
<button class="btn btn-primary">Discover</button>
|
|
||||||
<a class="btn btn-secondary" href="/about_more.html">Learn more</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="services" class="services">
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="section-title">Our Services</h2>
|
|
||||||
<div class="services-grid">
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">
|
|
||||||
<svg viewBox="0 0 100 100" class="service-svg">
|
|
||||||
<circle cx="50" cy="50" r="40" fill="none" stroke="url(#heroGradient)" stroke-width="3" filter="url(#heroGlow)"/>
|
|
||||||
<path d="M30 50 L45 65 L70 35" fill="none" stroke="url(#heroGradient)" stroke-width="3" filter="url(#heroGlow)"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Decentralized Security</h3>
|
|
||||||
<p>Secure infrastructure with no single point of failure</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">
|
|
||||||
<svg viewBox="0 0 100 100" class="service-svg">
|
|
||||||
<rect x="20" y="30" width="60" height="40" fill="none" stroke="url(#heroGradient)" stroke-width="3" filter="url(#heroGlow)"/>
|
|
||||||
<path d="M40 50 L50 60 L60 50" fill="none" stroke="url(#heroGradient)" stroke-width="3" filter="url(#heroGlow)"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Resilient Storage</h3>
|
|
||||||
<p>Distributed and cryptographically secured storage solutions</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-icon">
|
|
||||||
<svg viewBox="0 0 100 100" class="service-svg">
|
|
||||||
<path d="M50 20 L70 40 L70 70 L30 70 L30 40 Z" fill="none" stroke="url(#heroGradient)" stroke-width="3" filter="url(#heroGlow)"/>
|
|
||||||
<circle cx="50" cy="45" r="5" fill="url(#heroGradient)" filter="url(#heroGlow)"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Self-custodial cloud infrastructure</h3>
|
|
||||||
<p>Eliminating intermediaries for full control</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="about" class="about">
|
|
||||||
<div class="container">
|
|
||||||
<div class="about-content">
|
|
||||||
<div class="about-text">
|
|
||||||
<h2>About 4NK</h2>
|
|
||||||
<p>
|
|
||||||
4NK represents a new era of technology infrastructure.
|
|
||||||
Our self-custodial cloud infrastructure approach revolutionizes how we think about
|
|
||||||
security, decentralization, and data control.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
With our cutting-edge technology, we eliminate traditional points of failure
|
|
||||||
and create a resilient, transparent ecosystem entirely under your control.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="about-visual">
|
|
||||||
<div class="logo-showcase">
|
|
||||||
<img src="/img/infra.png" alt="4NK Showcase Logo" class="showcase-logo-img">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="contact" class="contact">
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="section-title">Contact</h2>
|
|
||||||
<div class="contact-content">
|
|
||||||
<div class="contact-info">
|
|
||||||
<h3>Get in touch</h3>
|
|
||||||
<p>Ready to revolutionize your infrastructure? Contact us to discover how 4NK can transform your approach to security and decentralization.</p>
|
|
||||||
</div>
|
|
||||||
<div class="contact-form">
|
|
||||||
<form>
|
|
||||||
<div class="form-group">
|
|
||||||
<input type="text" placeholder="Name" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<input type="email" placeholder="Email" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<textarea placeholder="Message" rows="5" required></textarea>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Send</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="footer">
|
|
||||||
<div class="container">
|
|
||||||
<div class="footer-content">
|
|
||||||
<div class="footer-logo">
|
|
||||||
<div class="footer-logo-container">
|
|
||||||
<img src="img/logo.png" alt="4NK Footer Logo" class="footer-logo-img">
|
|
||||||
</div>
|
|
||||||
<div class="footer-text">
|
|
||||||
<span class="brand-name">4NK</span>
|
|
||||||
<span class="brand-subtitle">The self-custodial cloud infrastructure</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="footer-links">
|
|
||||||
<a href="#home">Home</a>
|
|
||||||
<a href="#services">Services</a>
|
|
||||||
<a href="#about">About</a>
|
|
||||||
<a href="#contact">Contact</a>
|
|
||||||
<a href="/powered_by_bitcoin.html">Powered by Bitcoin</a>
|
|
||||||
<a href="/manifest_en.html">Manifest</a>
|
|
||||||
<a href="https://git.4nkweb.com" target="_blank" rel="noopener">git.4nkweb.com</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="footer-bottom">
|
|
||||||
<p>© 2024 4NK. All rights reserved.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
<div class="intro-copy">
|
||||||
|
<h1>Self-Custodial Cloud</h1>
|
||||||
|
<p class="subhead accent">Safer, Simpler, Sovereign</p>
|
||||||
|
<p>Users pay increasingly high rent to someone to collaborate, to manage their identities and to access their own data, while keeping getting hacked, ransomed or spied upon... <br> <br> What if there was a solution, right in our own hands ?
|
||||||
|
<br> <br> 4NK builds a user‑owned cloud where sovereignty and simplicity coexist. We want for digital sovereignty to be a technical reality and not a third party promise</p>
|
||||||
|
<div class="actions">
|
||||||
|
<a class="button primary" href="#services">Explore Services</a>
|
||||||
|
<a class="button" href="#contact">Talk to us</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<!-- Mission: Rebuild the Web, Upright -->
|
||||||
|
<section id="mission" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-row alt-left">
|
||||||
|
<div class="col-title">
|
||||||
|
<h2>Rebuild the Web, Upright</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-content">
|
||||||
|
<p>The 4NK Self-Custodial Cloud OS runs as app on your often-idle equipement. <br> <br> We are restoring user agency on the internet by leveraging private keys as the core building block to anchor ownership and trusted workflows. Our approach is pragmatic, privacy‑first, and Bitcoin‑aligned.
|
||||||
|
<br> <br> No blockchain, and no token : simply a client-side infrastructure that extends Bitcoin’s properties for everyday use and collaborative workflows.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid principles-grid span-2">
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Key" src="https://api.iconify.design/solar:key-minimalistic-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Identity</h3>
|
||||||
|
<p>Users own and manage their keys. The infrastructure is built around you. Control what you share, with whom and how.</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Data" src="https://api.iconify.design/solar:database-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Infrastructure-less</h3>
|
||||||
|
<p>Leverage existing or underused gear (laptop, servers..) to run the Self-Custodial OS app. New CAPEX is optional. Invite others to use your infrastructure on your own terms, they don't need a node but only a browser.</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="ID" src="https://api.iconify.design/solar:shield-user-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Security</h3>
|
||||||
|
<p>Your data, your rules. Encrypted by default, shared on your terms. Fully encrypted storage. Local or distributed. All communications are encryped and do no leak meta-data by leveraging Bitcoin's silent-payment functionality.</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Network" src="https://api.iconify.design/iconoir:network-solid.svg?color=%23f7931a" />
|
||||||
|
<h3>Network</h3>
|
||||||
|
<p>Collaborate and Network as you wish. Network layer is made up of nodes which can be local or distributed. Many networks can be built from nodes in the open or as dedicated islands.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services -->
|
||||||
|
<section id="services" class="section tinted">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-row alt-right">
|
||||||
|
<div class="col-media"><img src="usercloud.png" alt="User-owned cloud illustration" /></div>
|
||||||
|
<div class="col-title">
|
||||||
|
<h2>Your Keys, <br> Your workflows</h2>
|
||||||
|
<p class="lead">The Self-Custodial Cloud value proposition is for you to build any cloud collaborative workflow you want.
|
||||||
|
<br> Here are some examples of the services you can deploy.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid principles-grid span-2">
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Key" src="https://api.iconify.design/solar:key-minimalistic-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Personal Digital Safe</h3>
|
||||||
|
<p>Secure storage for yours documents. Secure sharing. Choose whether it is store locally or on the cloud. It's always fully encrypted by your private key.</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="ID" src="https://api.iconify.design/solar:shield-user-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Personal Sovereignty</h3>
|
||||||
|
<p>Run an LLM only on content you own and want to keep private. 100% local . <br> Without any data leak</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Data" src="https://api.iconify.design/solar:database-bold.svg?color=%23f7931a" />
|
||||||
|
<h3>Collaborative documents</h3>
|
||||||
|
<p>Build secure document workflows. With encrypted data storage and sharing. Super simple identities management : create, share, invite any users (they do not need to run a node, just a browser). </p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<img class="icon" alt="Lightning" src="https://api.iconify.design/iconoir:network-solid.svg?color=%23f7931a" />
|
||||||
|
<h3>Workflows orchestration</h3>
|
||||||
|
<p>Your Rules: fully manage rules, roles, access policies, and data access for any workflow. Always with verifiable identities. Audit trail with timestamped proofs at every and every interaction..</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Updates -->
|
||||||
|
<section id="updates" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="alt-row alt-right">
|
||||||
|
<div class="col-media letterbox"> <img src="updates.png" alt="Updates illustration" /> </div>
|
||||||
|
<div class="col-title">
|
||||||
|
<h2>Updates</h2>
|
||||||
|
<p>Recent highlights and projects from the 4NK network.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="updates span-2">
|
||||||
|
<li><strong>Sep 2025:</strong> Alpha release for a B2C Self-custodial cloud freemium service. </li>
|
||||||
|
<li><strong>Aug 2025:</strong> Alpha release for a self hosted local LLM running only on the user's content.</li>
|
||||||
|
<li><strong>Jul 2025:</strong> Pre-production stage for the secure document workflow for notarial services.</li>
|
||||||
|
<li><strong>March 2025:</strong> First POC for a fully secure document workflow for notarial services. </li>
|
||||||
|
<li><strong>2024 - 2025:</strong> Bitcoin meetups "Tour de France" showcasing the properties of Silent Payments </li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Team -->
|
||||||
|
<section id="team" class="section tinted">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Team</h2>
|
||||||
|
<p class="lead">Our team and advisory board consists of experienced professionnal and talented Bitcoiners, including core developer. Our mission is to expand Bitcoin's properties, such as self-custody, privacy and empowerement, to the everyday digital life.</p>
|
||||||
|
<div class="grid team-grid">
|
||||||
|
<figure class="team-member">
|
||||||
|
<a href="https://www.linkedin.com/in/nicolascantuinnovationresilience/" target="_blank" rel="noopener"><img src="Nicolas.jpg" alt="CTO and CO-Founder"/></a>
|
||||||
|
<figcaption>CTO and CO-Founder<br><br><br></figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="team-member">
|
||||||
|
<a href="https://www.linkedin.com/in/stephane-caminati-a1928514/" target="_blank" rel="noopener"><img src="Stephane.jpg" alt="President" /></a>
|
||||||
|
<figcaption>President<br><br><br><br></figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="team-member">
|
||||||
|
<a href="https://github.com/Sosthene00" target="_blank" rel="noopener"><img src="sosthene.png" alt="Core Dev" /></a>
|
||||||
|
<figcaption>Core Dev<br><br><br><br></figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="team-member">
|
||||||
|
<a href="https://www.linkedin.com/in/michel-dubreuil-739648/" target="_blank" rel="noopener"><img src="michel.png" alt="Sales Director" /></a>
|
||||||
|
<figcaption>Sales Director<br><br><br><br></figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="team-member">
|
||||||
|
<a href="https://www.linkedin.com/in/nicolas-savin-cdo-cxo-cmo/" target="_blank" rel="noopener"><img src="nicolasS.jpeg" alt="UX" /></a>
|
||||||
|
<figcaption>UX<br><br><br><br></figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="team-member">
|
||||||
|
<a href="https://networkeffect.fr/" target="_blank" rel="noopener"><img src="elie.jpeg" alt="Strategist and Solutions Marketing" /></a>
|
||||||
|
<figcaption>Strategist and Solutions Marketing<br><br></figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Button -->
|
||||||
|
<section id="contact" class="section">
|
||||||
|
<div class="container" style="text-align: center;">
|
||||||
|
<div style="max-width: 400px; margin: 0 auto 2rem;">
|
||||||
|
<p class="lead" style="white-space: nowrap;">Interested in self-custodial cloud solutions?</p>
|
||||||
|
<a href="mailto:nicolas.cantu@4nk.network" class="button primary" style="font-size: 1.2rem; padding: 12px 24px; display: inline-block;">
|
||||||
|
Contact Us
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="#intro">Home</a>
|
||||||
|
<a href="#principles">Services</a>
|
||||||
|
<a href="#team">About</a>
|
||||||
|
<a href="#contact">Contact</a>
|
||||||
|
<a href="powered-by-bitcoin.html">Powered by Bitcoin</a>
|
||||||
|
<a href="manifest.html">Manifest</a>
|
||||||
|
<a href="tech-overview.html">Tech Overview</a>
|
||||||
|
<a href="https://git.4nkweb.com/" target="_blank" rel="noopener">Git</a>
|
||||||
|
<a href="https://twitter.com/@NicolasCantuBk" target="_blank" rel="noopener">Twitter</a>
|
||||||
|
</nav>
|
||||||
|
<small>© <span id="year"></span> 4NK. All rights reserved.</small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
207
manifest.html
Normal file
207
manifest.html
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Manifest | 4NK.network</title>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<style>
|
||||||
|
/* Remove gradient halo for this page */
|
||||||
|
body.manifest {
|
||||||
|
background: var(--c-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
margin: 3rem 0;
|
||||||
|
max-width: 800px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section h2 {
|
||||||
|
color: #f7931a;
|
||||||
|
margin: 3rem 0 1.5rem;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section p {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #f7931a;
|
||||||
|
margin: 2.5rem 0;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-left: 3px solid #f7931a;
|
||||||
|
background: rgba(247, 147, 26, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-box {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 2.5rem 0;
|
||||||
|
border-left: 3px solid #f7931a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
font-style: italic;
|
||||||
|
margin: 2rem 0;
|
||||||
|
padding: 0 2rem;
|
||||||
|
color: #ccc;
|
||||||
|
border-left: 2px solid #f7931a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
text-align: right;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 1rem;
|
||||||
|
color: #f7931a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
text-align: center;
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline-block;
|
||||||
|
background: #f7931a;
|
||||||
|
color: #000;
|
||||||
|
padding: 0.8rem 1.8rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background: #ffaa33;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="manifest">
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container row between center">
|
||||||
|
<a class="logo" href="index.html#top">4NK</a>
|
||||||
|
<nav class="nav" aria-label="Primary navigation">
|
||||||
|
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-links">☰</button>
|
||||||
|
<ul id="nav-links">
|
||||||
|
<li><a href="index.html#intro">Home</a></li>
|
||||||
|
<li><a href="index.html#principles">Services</a></li>
|
||||||
|
<li><a href="index.html#team">About</a></li>
|
||||||
|
<li><a href="index.html#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="content-section">
|
||||||
|
<h1>The Power Is Already in Our Hands</h1>
|
||||||
|
|
||||||
|
<h2>Underused Resources, Everywhere</h2>
|
||||||
|
<p>With the rise of online tools, we all—at work and at home—sit on underused resources. Think for a moment about your computer, your smartphone. Each day, these machines spend most of their time idle, waiting for your next action. Yet they hold immense computing, storage, and security capabilities. It's as if we left our cars idling in the garage, never really using the engine.</p>
|
||||||
|
|
||||||
|
<h2>The Current Paradox</h2>
|
||||||
|
<p>Meanwhile, what do we do? We rent, at a high price, server power owned by a handful of American players. We hand over our documents, our conversations, our digital identities, our payments. Every time we log in, every time we click "accept," we reinforce our dependence:</p>
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li>Economic dependence</li>
|
||||||
|
<li>Security dependence</li>
|
||||||
|
<li>Political dependence</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="highlight">
|
||||||
|
We refuse a captive digital sphere, where each login, each payment, each message reinforces dependence on centralized infrastructures—fragile by design—and subject to security, commercial, legal, and geopolitical pressures.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>The Limits of Centralization</h2>
|
||||||
|
<p>Centralized infrastructures are showing their cracks:</p>
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li>Repeated data breaches</li>
|
||||||
|
<li>Exploding cyberattacks</li>
|
||||||
|
<li>Rising costs</li>
|
||||||
|
<li>Rules imposed from the outside, sometimes extraterritorial</li>
|
||||||
|
<li>Risk of Internet balkanization</li>
|
||||||
|
<li>Losses tied to login and payment complexity</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>We refuse a future where Internet balkanization and creeping dystopia become a reality, where trust erodes and simplicity is purchased at the price of sovereignty. Dystopias are no longer fiction—they're taking shape in our daily habits.</p>
|
||||||
|
|
||||||
|
<h2>The Simple Question</h2>
|
||||||
|
<p>What if the solution isn't "elsewhere," but already in our hands? What if digital sovereignty, security, and simplicity came not from ever more data centers, but from what we already possess—underused—on our own devices?</p>
|
||||||
|
|
||||||
|
<h2>The Alternative: the Self-Custodial Cloud</h2>
|
||||||
|
<p>This is a client-side serverless cloud—a model where:</p>
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li>Identity, proof, and payment—along with login, sharing, and messaging—no longer run through central servers,</li>
|
||||||
|
<li>But are operated directly on users' devices.</li>
|
||||||
|
<li>No CAPEX, no data centers.</li>
|
||||||
|
<li>No dependence on Big Tech or infrastructures under external control.</li>
|
||||||
|
<li>Public-key identity is not peripheral but the keystone that aligns security, governance, and economics.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>Every exchange becomes a verifiable contract, every use a proof, every device a building block of the infrastructure.</p>
|
||||||
|
|
||||||
|
<h2>Not a Distant Utopia</h2>
|
||||||
|
<p>With 4NK, this vision is already taking shape through:</p>
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li>An evidence-grade DMS (Document Management System) for regulated professions,</li>
|
||||||
|
<li>Sovereign, end-to-end encrypted messaging,</li>
|
||||||
|
<li>A portable digital identity.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>We choose to build this shift progressively and credibly. Over the next two to three years, we will lay the first stones with these services—serving regulated professions, SMEs, and critical sectors first—to prove that simplicity of use, strong security, and stakeholder sovereignty (for organizations and individuals) can coexist.</p>
|
||||||
|
|
||||||
|
<p>In 2–3 years, 4NK will be the virtualized low-level implementation—a revolution of operating systems into active, sovereign nodes of the Internet. These are the first stones of an Internet where sovereignty is a technical property, not a political promise.</p>
|
||||||
|
|
||||||
|
<h2>The Imperative</h2>
|
||||||
|
<p>We believe we must retake control of its digital infrastructure—not by imitating centralized models, but by inventing a new model: a trustworthy Internet, distributed by design, where sovereignty is engineered, not merely declared.</p>
|
||||||
|
|
||||||
|
<h2>The Real Stakes</h2>
|
||||||
|
<p>Do we want to keep relying on fragile, costly, centralized infrastructures? Or do we want to build a digital sphere where freedom, trust, and simplicity are non-negotiable?</p>
|
||||||
|
|
||||||
|
<div class="highlight-box">
|
||||||
|
<h3>Call to Action</h3>
|
||||||
|
<p>We call on those who reject dependence, insecurity, and fragmentation to join this movement. The future of European digital life will not be forged by surviving a balkanized network, but by creating a shared, sovereign, simple, and verifiable space.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>The Choice</h2>
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li>Endure the digital future that's coming, or</li>
|
||||||
|
<li>Invent the one we want.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="quote">
|
||||||
|
<p>4NK & Bitcoin: the custodian-killer infrastructure</p>
|
||||||
|
<div class="author">Nicolas Cantu</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cta">
|
||||||
|
<a href="index.html#contact" class="button">Join the Movement</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-center"><a href="index.html" class="button">← Back to Home</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<small>© <span id="year"></span> 4NK. All rights reserved.</small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
michel.png
Normal file
BIN
michel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
nicolasS.jpeg
Normal file
BIN
nicolasS.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
109
powered-by-bitcoin.html
Normal file
109
powered-by-bitcoin.html
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>4NK — Powered by Bitcoin</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png">
|
||||||
|
<link rel="stylesheet" href="/styles.css">
|
||||||
|
<style>
|
||||||
|
.page { max-width: 960px; margin: 4rem auto; padding: 0 1rem; }
|
||||||
|
h1, h2, h3 { margin: 1.5rem 0 .5rem; }
|
||||||
|
.section { margin: 1.25rem 0; }
|
||||||
|
ul { padding-left: 1.2rem; }
|
||||||
|
.header-actions { margin: 1.5rem 0 2rem; display: flex; gap: .75rem; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<h1>Powered by Bitcoin</h1>
|
||||||
|
<div class="header-actions">
|
||||||
|
<a class="btn btn-secondary" href="/">Back to homepage</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>4NK: the self-custodial cloud infrastructure</h2>
|
||||||
|
<p>For fifteen years, Bitcoin has proven that a decentralized network can secure value without any trusted intermediary. Every block, every signature, every verification is performed by the users themselves. No need for a centralized custodian: everyone can verify, everyone can hold.</p>
|
||||||
|
<p>But outside of payments, the digital world still relies everywhere on trusted third parties:</p>
|
||||||
|
<ul>
|
||||||
|
<li>centralized clouds and servers,</li>
|
||||||
|
<li>messaging platforms,</li>
|
||||||
|
<li>digital identity services,</li>
|
||||||
|
<li>storage solutions.</li>
|
||||||
|
</ul>
|
||||||
|
<p>These custodians capture data, impose costs, and create points of failure. They are the equivalent of banks before Bitcoin: convenient, but vulnerable and intrusive.</p>
|
||||||
|
|
||||||
|
<h2>4NK: Bitcoin beyond payments</h2>
|
||||||
|
<p>4NK is a client-side infrastructure layer that extends Bitcoin's native properties to everyday digital uses:</p>
|
||||||
|
<ul>
|
||||||
|
<li>The resilience of a distributed proof network → every flow becomes verifiable, without relying on a server.</li>
|
||||||
|
<li>Money as a universal mechanism → reliable remuneration for security.</li>
|
||||||
|
<li>Cryptography as identity → public keys extended into digital identities.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>How does it work?</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Encrypted messaging: based on non-interactive secret sharing derived from silent payments. Each message generates a unique, encrypted, and untraceable secret, with no third party involved.</li>
|
||||||
|
<li>Off-chain contracts: signed by Bitcoin wallets, validated by peers, and linked to a layer-2 oracle (Signet) regularly anchored on the Bitcoin mainnet.</li>
|
||||||
|
<li>Distributed storage: files kept locally between stakeholders or in a mesh network, never in cleartext, never in a public cloud.</li>
|
||||||
|
<li>Payments in one scan: native Lightning integration, no Stripe, no PayPal.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Everything is operated client-side (Client-Side Validation). No custodian.</p>
|
||||||
|
|
||||||
|
<h2>Custodian-killer</h2>
|
||||||
|
<p>Just as Bitcoin killed the need for a central bank to hold and transfer value, 4NK kills the need for digital custodians to identify, exchange, store, and contract.</p>
|
||||||
|
<p>This is not a new blockchain. This is not a token. It is the natural extension of Bitcoin:</p>
|
||||||
|
<ul>
|
||||||
|
<li>distributed proofs as a foundation,</li>
|
||||||
|
<li>money as a universal rail,</li>
|
||||||
|
<li>public keys as digital identities,</li>
|
||||||
|
<li>secret sharing as sovereign messaging.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>4NK is not a theory</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Notaries: legal acts anchored on a proof layer over Bitcoin.</li>
|
||||||
|
<li>SMEs: sovereign document management, serverless messaging.</li>
|
||||||
|
<li>Public bodies: integrations underway with operators.</li>
|
||||||
|
<li>Healthcare: POC in deployment.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Every time, the model is the same: replace a custodian with Bitcoin + client-side.</p>
|
||||||
|
|
||||||
|
<h2>The result</h2>
|
||||||
|
<p>Making Bitcoin not only the currency of trust, but also the universal infrastructure layer of the digital world:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Simpler login: four words + multisignature across devices.</li>
|
||||||
|
<li>Simpler payments: compatible with all Bitcoin rails + integrated Silent Payment wallet (web & mobile).</li>
|
||||||
|
<li>Cheaper, no CAPEX: more users = more resources.</li>
|
||||||
|
<li>Cheaper, no infrastructure: less tooling, less supervision, less complexity.</li>
|
||||||
|
<li>More secure: encryption directly by user identities, redundancy included.</li>
|
||||||
|
<li>More resilient: no central point, no centralized rights management.</li>
|
||||||
|
<li>Fully verifiable cryptographically via the anchoring layer.</li>
|
||||||
|
<li>Everything is a contract: compliance with agreements, norms, and standards is cryptographically enforced between final parties, where the proof system is also the payment system.</li>
|
||||||
|
<li>As fast as needed: there is always a route to deliver information.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Our focus</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Local AI experiences integrated into a "Chat First" UX, replacing legacy workflows.</li>
|
||||||
|
<li>Effective support, separate from core development.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Our ambition</h2>
|
||||||
|
<p>To make Bitcoin not only the currency of trust, but also the universal infrastructure layer of the internet:</p>
|
||||||
|
<ul>
|
||||||
|
<li>identity,</li>
|
||||||
|
<li>messaging,</li>
|
||||||
|
<li>contracts,</li>
|
||||||
|
<li>storage.</li>
|
||||||
|
</ul>
|
||||||
|
<p>An internet where the user is sovereign, verification is local, and custodians belong permanently to the past.</p>
|
||||||
|
<p><b>4NK: the self-custodial cloud infrastructure.</b></p>
|
||||||
|
|
||||||
|
<hr style="margin: 2rem 0; opacity:.2;">
|
||||||
|
<p>
|
||||||
|
Looking for more context? Read the full <a href="/manifest_en.html">Manifest</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<script src="/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -59,15 +59,6 @@
|
|||||||
<li>secret sharing as sovereign messaging.</li>
|
<li>secret sharing as sovereign messaging.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>4NK is not a theory</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Notaries: legal acts anchored on a proof layer over Bitcoin.</li>
|
|
||||||
<li>SMEs: sovereign document management, serverless messaging.</li>
|
|
||||||
<li>Public bodies: integrations underway with operators.</li>
|
|
||||||
<li>Healthcare: POC in deployment.</li>
|
|
||||||
</ul>
|
|
||||||
<p>Every time, the model is the same: replace a custodian with Bitcoin + client-side.</p>
|
|
||||||
|
|
||||||
<h2>The result</h2>
|
<h2>The result</h2>
|
||||||
<p>Making Bitcoin not only the currency of trust, but also the universal infrastructure layer of the digital world:</p>
|
<p>Making Bitcoin not only the currency of trust, but also the universal infrastructure layer of the digital world:</p>
|
||||||
<ul>
|
<ul>
|
||||||
|
|||||||
351
script.js
351
script.js
@ -1,329 +1,26 @@
|
|||||||
// Script principal pour le site 4NK
|
// Mobile nav toggle
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
const toggle = document.querySelector('.nav-toggle');
|
||||||
|
const links = document.querySelector('#nav-links');
|
||||||
|
if (toggle && links){
|
||||||
|
toggle.addEventListener('click', () => {
|
||||||
|
const isOpen = links.classList.toggle('open');
|
||||||
|
toggle.setAttribute('aria-expanded', String(isOpen));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Animation d'apparition des éléments au scroll
|
// Smooth scroll for internal anchors
|
||||||
const observerOptions = {
|
for (const a of document.querySelectorAll('a[href^="#"]')){
|
||||||
threshold: 0.1,
|
a.addEventListener('click', (e) => {
|
||||||
rootMargin: '0px 0px -50px 0px'
|
const id = a.getAttribute('href');
|
||||||
};
|
const el = document.querySelector(id);
|
||||||
|
if (el){
|
||||||
|
e.preventDefault();
|
||||||
|
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
if (links && links.classList.contains('open')) links.classList.remove('open');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const observer = new IntersectionObserver(function(entries) {
|
// Set current year
|
||||||
entries.forEach(entry => {
|
const y = document.getElementById('year');
|
||||||
if (entry.isIntersecting) {
|
if (y) y.textContent = new Date().getFullYear();
|
||||||
entry.target.classList.add('fade-in-up');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, observerOptions);
|
|
||||||
|
|
||||||
// Observer tous les éléments à animer
|
|
||||||
const animatedElements = document.querySelectorAll('.service-card, .about-text, .about-visual, .contact-info, .contact-form');
|
|
||||||
animatedElements.forEach(el => {
|
|
||||||
observer.observe(el);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Navigation smooth scroll
|
|
||||||
const navLinks = document.querySelectorAll('.nav-link');
|
|
||||||
navLinks.forEach(link => {
|
|
||||||
link.addEventListener('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const targetId = this.getAttribute('href');
|
|
||||||
const targetSection = document.querySelector(targetId);
|
|
||||||
|
|
||||||
if (targetSection) {
|
|
||||||
const headerHeight = document.querySelector('.header').offsetHeight;
|
|
||||||
const targetPosition = targetSection.offsetTop - headerHeight;
|
|
||||||
|
|
||||||
window.scrollTo({
|
|
||||||
top: targetPosition,
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Effet de parallaxe sur le logo principal
|
|
||||||
const heroLogo = document.querySelector('.hero-logo-img');
|
|
||||||
window.addEventListener('scroll', function() {
|
|
||||||
const scrolled = window.pageYOffset;
|
|
||||||
const rate = scrolled * -0.5;
|
|
||||||
|
|
||||||
if (heroLogo) {
|
|
||||||
heroLogo.style.transform = `translateY(${rate}px) rotate(${scrolled * 0.1}deg)`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Animation du header au scroll
|
|
||||||
const header = document.querySelector('.header');
|
|
||||||
window.addEventListener('scroll', function() {
|
|
||||||
if (window.scrollY > 100) {
|
|
||||||
header.style.background = 'rgba(10, 10, 10, 0.98)';
|
|
||||||
header.style.boxShadow = '0 2px 20px rgba(255, 107, 53, 0.1)';
|
|
||||||
} else {
|
|
||||||
header.style.background = 'rgba(10, 10, 10, 0.95)';
|
|
||||||
header.style.boxShadow = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Effet de typing pour le titre principal
|
|
||||||
function typeWriter(element, text, speed = 100) {
|
|
||||||
let i = 0;
|
|
||||||
element.innerHTML = '';
|
|
||||||
|
|
||||||
function type() {
|
|
||||||
if (i < text.length) {
|
|
||||||
element.innerHTML += text.charAt(i);
|
|
||||||
i++;
|
|
||||||
setTimeout(type, speed);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
type();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Animation des icônes de services
|
|
||||||
const serviceIcons = document.querySelectorAll('.service-svg');
|
|
||||||
serviceIcons.forEach(icon => {
|
|
||||||
icon.addEventListener('mouseenter', function() {
|
|
||||||
this.style.animation = 'serviceIconPulse 1s ease-in-out infinite';
|
|
||||||
});
|
|
||||||
|
|
||||||
icon.addEventListener('mouseleave', function() {
|
|
||||||
this.style.animation = 'serviceIconPulse 3s ease-in-out infinite';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Effet de particules flottantes
|
|
||||||
function createParticles() {
|
|
||||||
const particlesContainer = document.createElement('div');
|
|
||||||
particlesContainer.className = 'particles';
|
|
||||||
document.body.appendChild(particlesContainer);
|
|
||||||
|
|
||||||
for (let i = 0; i < 20; i++) {
|
|
||||||
const particle = document.createElement('div');
|
|
||||||
particle.className = 'particle';
|
|
||||||
particle.style.left = Math.random() * 100 + '%';
|
|
||||||
particle.style.animationDelay = Math.random() * 10 + 's';
|
|
||||||
particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
|
|
||||||
particlesContainer.appendChild(particle);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Créer les particules
|
|
||||||
createParticles();
|
|
||||||
|
|
||||||
// Effet de glow sur les boutons
|
|
||||||
const buttons = document.querySelectorAll('.btn');
|
|
||||||
buttons.forEach(button => {
|
|
||||||
button.addEventListener('mouseenter', function() {
|
|
||||||
this.style.boxShadow = '0 8px 25px rgba(255, 107, 53, 0.5), 0 0 20px rgba(255, 107, 53, 0.3)';
|
|
||||||
});
|
|
||||||
|
|
||||||
button.addEventListener('mouseleave', function() {
|
|
||||||
if (this.classList.contains('btn-primary')) {
|
|
||||||
this.style.boxShadow = '0 4px 15px rgba(255, 107, 53, 0.3)';
|
|
||||||
} else {
|
|
||||||
this.style.boxShadow = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Gestion du formulaire de contact
|
|
||||||
const contactForm = document.querySelector('.contact-form form');
|
|
||||||
if (contactForm) {
|
|
||||||
contactForm.addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const submitBtn = this.querySelector('.btn-primary');
|
|
||||||
const originalText = submitBtn.textContent;
|
|
||||||
|
|
||||||
submitBtn.textContent = 'Sending...';
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
|
|
||||||
const name = this.querySelector('input[placeholder="Name"]').value.trim();
|
|
||||||
const email = this.querySelector('input[placeholder="Email"]').value.trim();
|
|
||||||
const message = this.querySelector('textarea[placeholder="Message"]').value.trim();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const resp = await fetch('/contact', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ name, email, message })
|
|
||||||
});
|
|
||||||
if (!resp.ok) throw new Error('Failed');
|
|
||||||
submitBtn.textContent = 'Message sent!';
|
|
||||||
submitBtn.style.background = '#4CAF50';
|
|
||||||
setTimeout(() => {
|
|
||||||
submitBtn.textContent = originalText;
|
|
||||||
submitBtn.disabled = false;
|
|
||||||
submitBtn.style.background = '';
|
|
||||||
this.reset();
|
|
||||||
}, 2000);
|
|
||||||
} catch (err) {
|
|
||||||
submitBtn.textContent = 'Send failed';
|
|
||||||
submitBtn.style.background = '#E53935';
|
|
||||||
setTimeout(() => {
|
|
||||||
submitBtn.textContent = originalText;
|
|
||||||
submitBtn.disabled = false;
|
|
||||||
submitBtn.style.background = '';
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Effet de cursor personnalisé
|
|
||||||
const cursor = document.createElement('div');
|
|
||||||
cursor.className = 'custom-cursor';
|
|
||||||
cursor.style.cssText = `
|
|
||||||
position: fixed;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background: radial-gradient(circle, rgba(255, 107, 53, 0.8) 0%, transparent 70%);
|
|
||||||
border-radius: 50%;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 9999;
|
|
||||||
transition: transform 0.1s ease;
|
|
||||||
display: none;
|
|
||||||
`;
|
|
||||||
document.body.appendChild(cursor);
|
|
||||||
|
|
||||||
// Suivi du curseur
|
|
||||||
document.addEventListener('mousemove', function(e) {
|
|
||||||
cursor.style.left = e.clientX - 10 + 'px';
|
|
||||||
cursor.style.top = e.clientY - 10 + 'px';
|
|
||||||
cursor.style.display = 'block';
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cacher le curseur personnalisé quand on quitte la page
|
|
||||||
document.addEventListener('mouseleave', function() {
|
|
||||||
cursor.style.display = 'none';
|
|
||||||
});
|
|
||||||
|
|
||||||
// Effet de hover sur les liens
|
|
||||||
const links = document.querySelectorAll('a, .btn');
|
|
||||||
links.forEach(link => {
|
|
||||||
link.addEventListener('mouseenter', function() {
|
|
||||||
cursor.style.transform = 'scale(1.5)';
|
|
||||||
cursor.style.background = 'radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, transparent 70%)';
|
|
||||||
});
|
|
||||||
|
|
||||||
link.addEventListener('mouseleave', function() {
|
|
||||||
cursor.style.transform = 'scale(1)';
|
|
||||||
cursor.style.background = 'radial-gradient(circle, rgba(255, 107, 53, 0.8) 0%, transparent 70%)';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Animation des logos images
|
|
||||||
const logos = document.querySelectorAll('.logo-img, .hero-logo-img, .showcase-logo-img, .footer-logo-img');
|
|
||||||
logos.forEach(logo => {
|
|
||||||
logo.addEventListener('mouseenter', function() {
|
|
||||||
this.style.filter = 'drop-shadow(0 0 20px var(--primary-orange)) drop-shadow(0 0 40px var(--accent-orange))';
|
|
||||||
});
|
|
||||||
|
|
||||||
logo.addEventListener('mouseleave', function() {
|
|
||||||
// Restaurer le filtre original selon le type de logo
|
|
||||||
if (this.classList.contains('hero-logo-img')) {
|
|
||||||
this.style.filter = 'drop-shadow(0 0 20px var(--primary-orange))';
|
|
||||||
} else if (this.classList.contains('showcase-logo-img')) {
|
|
||||||
this.style.filter = 'drop-shadow(0 0 15px var(--primary-orange))';
|
|
||||||
} else if (this.classList.contains('footer-logo-img')) {
|
|
||||||
this.style.filter = 'drop-shadow(0 0 8px var(--primary-orange))';
|
|
||||||
} else {
|
|
||||||
this.style.filter = 'drop-shadow(0 0 10px var(--primary-orange))';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Effet de parallaxe sur les sections
|
|
||||||
const parallaxElements = document.querySelectorAll('.hero, .services, .about, .contact');
|
|
||||||
window.addEventListener('scroll', function() {
|
|
||||||
const scrolled = window.pageYOffset;
|
|
||||||
|
|
||||||
parallaxElements.forEach((element, index) => {
|
|
||||||
const rate = scrolled * -0.5;
|
|
||||||
const sectionOffset = element.offsetTop;
|
|
||||||
const sectionHeight = element.offsetHeight;
|
|
||||||
|
|
||||||
if (scrolled + window.innerHeight > sectionOffset && scrolled < sectionOffset + sectionHeight) {
|
|
||||||
element.style.transform = `translateY(${rate * 0.1}px)`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Animation des cartes de services au scroll
|
|
||||||
const serviceCards = document.querySelectorAll('.service-card');
|
|
||||||
const serviceObserver = new IntersectionObserver(function(entries) {
|
|
||||||
entries.forEach((entry, index) => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
setTimeout(() => {
|
|
||||||
entry.target.style.opacity = '1';
|
|
||||||
entry.target.style.transform = 'translateY(0)';
|
|
||||||
}, index * 200);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, { threshold: 0.1 });
|
|
||||||
|
|
||||||
serviceCards.forEach(card => {
|
|
||||||
card.style.opacity = '0';
|
|
||||||
card.style.transform = 'translateY(50px)';
|
|
||||||
card.style.transition = 'all 0.6s ease';
|
|
||||||
serviceObserver.observe(card);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Effet de glow sur le texte principal
|
|
||||||
const brandName = document.querySelector('.brand-name');
|
|
||||||
if (brandName) {
|
|
||||||
setInterval(() => {
|
|
||||||
const intensity = Math.random() * 0.5 + 0.5;
|
|
||||||
brandName.style.textShadow = `0 0 ${30 * intensity}px rgba(255, 107, 53, ${intensity}), 0 0 ${50 * intensity}px rgba(255, 165, 0, ${intensity * 0.5})`;
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Animation de chargement initial
|
|
||||||
window.addEventListener('load', function() {
|
|
||||||
document.body.style.opacity = '0';
|
|
||||||
document.body.style.transition = 'opacity 1s ease';
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
document.body.style.opacity = '1';
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Gestion du menu mobile (si nécessaire)
|
|
||||||
const navToggle = document.createElement('button');
|
|
||||||
navToggle.className = 'nav-toggle';
|
|
||||||
navToggle.innerHTML = '☰';
|
|
||||||
navToggle.style.cssText = `
|
|
||||||
display: none;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--text-light);
|
|
||||||
font-size: 1.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem;
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Ajouter le toggle au nav si on est sur mobile
|
|
||||||
if (window.innerWidth <= 768) {
|
|
||||||
const nav = document.querySelector('.nav');
|
|
||||||
nav.appendChild(navToggle);
|
|
||||||
|
|
||||||
navToggle.addEventListener('click', function() {
|
|
||||||
const navMenu = document.querySelector('.nav-menu');
|
|
||||||
navMenu.style.display = navMenu.style.display === 'flex' ? 'none' : 'flex';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mise à jour du menu mobile au redimensionnement
|
|
||||||
window.addEventListener('resize', function() {
|
|
||||||
const navMenu = document.querySelector('.nav-menu');
|
|
||||||
if (window.innerWidth > 768) {
|
|
||||||
navMenu.style.display = 'flex';
|
|
||||||
navToggle.style.display = 'none';
|
|
||||||
} else {
|
|
||||||
navToggle.style.display = 'block';
|
|
||||||
navMenu.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('Site 4NK chargé avec succès !');
|
|
||||||
});
|
|
||||||
|
|||||||
@ -20,3 +20,4 @@ printf "Mailer ready in /home/debian/website/server\n"
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -11,3 +11,4 @@ printf "Done.\n"
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -11,3 +11,4 @@ curl -i -sS -X POST "$URL" \
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
BIN
sosthene.png
Normal file
BIN
sosthene.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
834
styles.css
834
styles.css
@ -1,703 +1,175 @@
|
|||||||
/* Reset et base */
|
/* Reset */
|
||||||
* {
|
*{ margin:0; padding:0; box-sizing:border-box; }
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
/* Theme tokens from request */
|
||||||
box-sizing: border-box;
|
:root{
|
||||||
|
--bg: #000; /* Black background */
|
||||||
|
--text: #fff; /* White text */
|
||||||
|
--muted: #d1d1d1; /* Light gray */
|
||||||
|
--accent: #f7931a; /* Bitcoin orange */
|
||||||
|
--border: #222; /* Subtle borders on dark */
|
||||||
|
--tint: #0a0a0a; /* Section tint */
|
||||||
|
--container: 1200px;
|
||||||
|
--c-bg: #000; /* base for layered bg */
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html,body{ height:100%; }
|
||||||
scroll-behavior: smooth;
|
body{
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
font-size: 1.1rem; /* +10% */
|
||||||
|
line-height: 1.6;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
color: var(--text);
|
||||||
|
/* Two vivid hues (HSL): orange-yellow + blue-purple */
|
||||||
|
background:
|
||||||
|
radial-gradient(1200px 600px at 85% 0%, hsla(19, 100%, 51%, 0.741), transparent 48%),
|
||||||
|
radial-gradient(800px 680px at -5% 52%, hsla(73, 54%, 95%, 0.528), transparent 45%),
|
||||||
|
var(--c-bg);
|
||||||
|
background-attachment: fixed, fixed, fixed; /* gentle parallax */
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
/* Links */
|
||||||
font-family: 'Inter', sans-serif;
|
a{ color: var(--accent); text-decoration: underline; }
|
||||||
background-color: #0a0a0a;
|
a:hover{ opacity:.9; }
|
||||||
color: #ffffff;
|
|
||||||
line-height: 1.6;
|
/* Layout helpers */
|
||||||
overflow-x: hidden;
|
.container{ max-width: var(--container); margin: 0 auto; padding: 0 2rem; display:flex; flex-direction:column; align-items:stretch; }
|
||||||
|
.row{ display:flex; flex-direction: row; }
|
||||||
|
.between{ justify-content:space-between; }
|
||||||
|
.center{ align-items:center; }
|
||||||
|
|
||||||
|
.section{ padding: 4rem 0; border-bottom: none; }
|
||||||
|
.tinted{ background: var(--tint); }
|
||||||
|
|
||||||
|
/* Header / Navigation */
|
||||||
|
.site-header{ position: sticky; top:0; z-index:10; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); border-bottom:none; }
|
||||||
|
.site-header .container{ padding: calc(0.75rem * 1.40) 2rem; display:flex; flex-direction:row; justify-content:space-between; align-items:center; }
|
||||||
|
.logo{ color:#fff; text-decoration:none; font-weight:800; letter-spacing:0.5px; font-size: 2.1em; }
|
||||||
|
.left-group{ display:flex; align-items:center; gap:6px; }
|
||||||
|
.nav ul{ list-style:none; display:flex; gap:1.3rem; }
|
||||||
|
.nav a{ color:#fff; text-decoration:none; font-weight:600; border-bottom:2px solid transparent; padding:0; line-height:1; }
|
||||||
|
.nav a:hover{ border-color: var(--accent); }
|
||||||
|
.nav-toggle{ display:none; background:none; border:1px solid var(--border); color:#fff; padding:6px 10px; border-radius:8px; }
|
||||||
|
.brand-mark{ height: 68px; width:auto; display:block; border-radius:6px; }
|
||||||
|
|
||||||
|
@media (max-width: 768px){
|
||||||
|
.nav-toggle{ display:block; }
|
||||||
|
.nav ul{ display:none; position:absolute; right:16px; top:56px; background:#0d0d0d; border:1px solid var(--border); border-radius:12px; padding:12px; flex-direction:column; min-width:200px; }
|
||||||
|
.nav ul.open{ display:flex; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Variables CSS */
|
/* Intro layout */
|
||||||
:root {
|
.intro-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap:2rem; align-items:start; }
|
||||||
--primary-orange: #FF6B35;
|
.intro-media img{ width:100%; height:auto; border-radius:16px; border:none; }
|
||||||
--secondary-orange: #FF8E53;
|
.intro-copy h1{ font-size: 4.5rem; font-weight:700; line-height:1.1; letter-spacing:-0.01em; margin:0 0 0.6rem; }
|
||||||
--accent-orange: #FFA500;
|
.intro-copy p{ margin-bottom:1.5rem; color: var(--muted); }
|
||||||
--gold: #FFD700;
|
/* Accent subhead should override paragraph color */
|
||||||
--dark-bg: #0a0a0a;
|
.intro-copy .subhead{ font-size: 2rem; font-weight:800; letter-spacing: 0.01em; margin: 0 0 .6rem; color: var(--accent); }
|
||||||
--darker-bg: #050505;
|
.accent{ color: var(--accent); }
|
||||||
--text-light: #ffffff;
|
.actions{ display:flex; gap:12px; flex-wrap:wrap; }
|
||||||
--text-gray: #b0b0b0;
|
|
||||||
--border-color: #333333;
|
/* Buttons */
|
||||||
--glow-intensity: 3px;
|
.button{ display:inline-block; padding:10px 16px; border-radius:10px; border:1px solid var(--border); background:#0f0f0f; color:#fff; text-decoration:none; font-weight:700; }
|
||||||
|
.button.primary{ background: var(--accent); color:#000; border-color: transparent; }
|
||||||
|
.button:hover{ transform: translateY(-1px); transition: transform .15s ease; }
|
||||||
|
|
||||||
|
/* Headings and general type */
|
||||||
|
h1{ font-size: 5rem; font-weight:700; line-height:1.1; letter-spacing:-0.01em; margin: 0 0 0.6rem; } /* doubled + tightened */
|
||||||
|
h2{ font-size: 4rem; font-weight:700; line-height:1.1; letter-spacing:-0.01em; margin: 1.6rem 0 0.6rem; } /* doubled + tightened */
|
||||||
|
p{ margin-bottom: 1.5rem; font-size: 1.15em; } /* +15% */
|
||||||
|
.lead{ color: var(--muted); }
|
||||||
|
|
||||||
|
/* Grids */
|
||||||
|
.grid{ display:grid; gap:16px; }
|
||||||
|
.alt-row{ display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:center; width:100%; }
|
||||||
|
.alt-left .col-title{ order:1; }
|
||||||
|
.alt-left .col-content{ order:2; }
|
||||||
|
.alt-right .col-media{ order:1; }
|
||||||
|
.alt-right .col-title{ order:2; }
|
||||||
|
.placeholder{ width:100%; aspect-ratio: 4/3; background:#0d0d0d; border:1px dashed var(--border); border-radius:12px; }
|
||||||
|
/* Fixed 4:3 media slot like placeholder */
|
||||||
|
.col-media{ width:100%; aspect-ratio: 4/3; }
|
||||||
|
.col-media img{ width:100%; height:100%; border-radius:12px; border:none; display:block; object-fit:cover;background-color: transparent; }
|
||||||
|
.span-2{ grid-column: 1 / -1; width:100%; }
|
||||||
|
.principles-grid{ grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.team-grid{ grid-template-columns: repeat(4, 1fr); gap:16px; }
|
||||||
|
|
||||||
|
@media (max-width: 900px){
|
||||||
|
.principles-grid{ grid-template-columns: 1fr; }
|
||||||
|
.team-grid{ grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.intro-grid{ grid-template-columns: 1fr; }
|
||||||
|
.alt-row{ grid-template-columns: 1fr; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pattern de fond */
|
/* Cards */
|
||||||
.background-pattern {
|
.card{ background:#0e0e0e; border:1px solid var(--border); border-radius:14px; padding:18px; }
|
||||||
position: fixed;
|
.card h3{ margin:0 0 6px; font-size:2rem; line-height:1.15; letter-spacing:-0.01em; } /* doubled + tightened */
|
||||||
top: 0;
|
.card p{ margin:0; color:var(--muted); }
|
||||||
left: 0;
|
.icon{ width:28px; height:28px; display:block; margin-bottom:8px; }
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
/* === Icon + h3 side-by-side in cards === */
|
||||||
background-image:
|
.principles-grid .card{
|
||||||
radial-gradient(circle at 20% 20%, rgba(255, 107, 53, 0.03) 0%, transparent 50%),
|
display: grid;
|
||||||
radial-gradient(circle at 80% 80%, rgba(255, 165, 0, 0.03) 0%, transparent 50%),
|
grid-template-columns: auto 1fr; /* icon | title */
|
||||||
radial-gradient(circle at 40% 60%, rgba(255, 215, 0, 0.02) 0%, transparent 50%);
|
align-items: center;
|
||||||
z-index: -1;
|
gap: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header et Navigation */
|
/* kill the block stacking + extra bottom margin on the icon */
|
||||||
.header {
|
.principles-grid .card .icon{
|
||||||
position: fixed;
|
width: 38px;
|
||||||
top: 0;
|
height: 38px;
|
||||||
left: 0;
|
display: block; /* ok */
|
||||||
width: 100%;
|
margin: 0; /* <— important: no margin-bottom */
|
||||||
background: rgba(10, 10, 10, 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
z-index: 1000;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
/* keep the title tight so it aligns with the icon */
|
||||||
display: flex;
|
.principles-grid .card h3{
|
||||||
justify-content: space-between;
|
margin: 0; /* remove the 6px bottom gap */
|
||||||
align-items: center;
|
line-height: 1.1;
|
||||||
padding: 1rem 2rem;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-logo {
|
/* let the paragraph flow on the next row, full width */
|
||||||
display: flex;
|
.principles-grid .card p{
|
||||||
align-items: center;
|
grid-column: 1 / -1;
|
||||||
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-container {
|
/* Updates list */
|
||||||
width: 50px;
|
.updates{ list-style: none; display:grid; gap:.75rem; }
|
||||||
height: 50px;
|
.updates li{ color: var(--muted); }
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
/* Only this variant shows the whole image inside the same 4:3 box */
|
||||||
justify-content: center;
|
.col-media.letterbox img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain; /* no crop, keeps 4:3 footprint */
|
||||||
|
background-color: transparent; /* IMPORTANT: let alpha show the page gradient */
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-img {
|
/* Team images smaller */
|
||||||
width: 100%;
|
.team-grid{ grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap:12px; }
|
||||||
height: 100%;
|
.team-grid img{ width:100%; max-width:120px; height:auto; border-radius:12px; border:none; display:block; justify-self:center; }
|
||||||
object-fit: contain;
|
.team-member{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; }
|
||||||
animation: logoGlow 3s ease-in-out infinite alternate;
|
.team-member figcaption{ font-size:0.85rem; color:var(--muted); text-align:center; max-width:120px; }
|
||||||
filter: drop-shadow(0 0 10px var(--primary-orange));
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes logoGlow {
|
/* Contact */
|
||||||
0% { filter: drop-shadow(0 0 5px var(--primary-orange)); }
|
.contact{ display:grid; gap:12px; max-width:680px; width:100%; }
|
||||||
100% { filter: drop-shadow(0 0 15px var(--primary-orange)) drop-shadow(0 0 25px var(--accent-orange)); }
|
.contact label{ display:grid; gap:6px; width:100%; }
|
||||||
}
|
input,textarea{ background:#0b0b0b; color:#fff; border:1px solid var(--border); padding:10px 12px; border-radius:10px; width:100%; }
|
||||||
|
|
||||||
.nav-menu {
|
|
||||||
display: flex;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
color: var(--text-light);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link:hover {
|
|
||||||
color: var(--primary-orange);
|
|
||||||
text-shadow: 0 0 10px var(--primary-orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -5px;
|
|
||||||
left: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 2px;
|
|
||||||
background: var(--primary-orange);
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link:hover::after {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hero Section */
|
|
||||||
.hero {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 2rem;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 4rem;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 1200px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-logo {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-logo-img {
|
|
||||||
width: 400px;
|
|
||||||
height: 400px;
|
|
||||||
object-fit: contain;
|
|
||||||
animation: heroLogoFloat 6s ease-in-out infinite;
|
|
||||||
filter: drop-shadow(0 0 20px var(--primary-orange));
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes heroLogoFloat {
|
|
||||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
||||||
50% { transform: translateY(-20px) rotate(2deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-text {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-name {
|
|
||||||
font-size: 4rem;
|
|
||||||
font-weight: 700;
|
|
||||||
background: linear-gradient(135deg, var(--primary-orange), var(--accent-orange), var(--gold));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
text-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
|
|
||||||
animation: brandGlow 2s ease-in-out infinite alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes brandGlow {
|
|
||||||
0% { text-shadow: 0 0 30px rgba(255, 107, 53, 0.5); }
|
|
||||||
100% { text-shadow: 0 0 50px rgba(255, 107, 53, 0.8), 0 0 70px rgba(255, 165, 0, 0.3); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-subtitle {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: var(--text-light);
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-tagline {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 300;
|
|
||||||
color: var(--text-gray);
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-description {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--text-gray);
|
|
||||||
line-height: 1.8;
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: linear-gradient(135deg, var(--primary-orange), var(--secondary-orange));
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5);
|
|
||||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: transparent;
|
|
||||||
color: var(--text-light);
|
|
||||||
border: 2px solid var(--primary-orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: var(--primary-orange);
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Container */
|
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sections */
|
|
||||||
.section-title {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
background: linear-gradient(135deg, var(--primary-orange), var(--accent-orange));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Services Section */
|
|
||||||
.services {
|
|
||||||
padding: 6rem 0;
|
|
||||||
background: linear-gradient(180deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.services-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-card {
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-card:hover {
|
|
||||||
transform: translateY(-10px);
|
|
||||||
border-color: var(--primary-orange);
|
|
||||||
box-shadow: 0 20px 40px rgba(255, 107, 53, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-icon {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
margin: 0 auto 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-svg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
animation: serviceIconPulse 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes serviceIconPulse {
|
|
||||||
0%, 100% { transform: scale(1); }
|
|
||||||
50% { transform: scale(1.1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-card h3 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-card p {
|
|
||||||
color: var(--text-gray);
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* About Section */
|
|
||||||
.about {
|
|
||||||
padding: 6rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-content {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 4rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-text h2 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
background: linear-gradient(135deg, var(--primary-orange), var(--accent-orange));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-text p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--text-gray);
|
|
||||||
line-height: 1.8;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-visual {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-showcase {
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.showcase-logo-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
animation: showcaseRotate 20s linear infinite;
|
|
||||||
filter: drop-shadow(0 0 15px var(--primary-orange));
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes showcaseRotate {
|
|
||||||
0% { transform: rotate(0deg); }
|
|
||||||
100% { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Contact Section */
|
|
||||||
.contact {
|
|
||||||
padding: 6rem 0;
|
|
||||||
background: linear-gradient(180deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-content {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 4rem;
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info h3 {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--text-gray);
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-form {
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input,
|
|
||||||
.form-group textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
color: var(--text-light);
|
|
||||||
font-size: 1rem;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input:focus,
|
|
||||||
.form-group textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--primary-orange);
|
|
||||||
box-shadow: 0 0 20px rgba(255, 107, 53, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input::placeholder,
|
|
||||||
.form-group textarea::placeholder {
|
|
||||||
color: var(--text-gray);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
.footer {
|
.site-footer{ border-top:none; }
|
||||||
background: var(--darker-bg);
|
.site-footer .container{ padding:20px 0; align-items:center; gap:10px; }
|
||||||
border-top: 1px solid var(--border-color);
|
.footer-nav{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
|
||||||
padding: 3rem 0 1rem;
|
.footer-nav a{ color:#fff; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; }
|
||||||
}
|
.footer-nav a:hover{ border-color: var(--accent); }
|
||||||
|
|
||||||
.footer-content {
|
/* Responsive type tweaks */
|
||||||
display: flex;
|
@media (max-width: 768px){
|
||||||
justify-content: space-between;
|
h1{ font-size: 3rem; } /* larger on mobile too */
|
||||||
align-items: center;
|
h2{ font-size: 2.6rem; }
|
||||||
margin-bottom: 2rem;
|
.card h3{ font-size: 1.6rem; }
|
||||||
}
|
.intro-copy h1{ font-size: 3rem; }
|
||||||
|
.intro-copy .subhead{ font-size: 1.6rem; }
|
||||||
.footer-logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-logo-container {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-logo-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
animation: footerLogoGlow 4s ease-in-out infinite alternate;
|
|
||||||
filter: drop-shadow(0 0 8px var(--primary-orange));
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes footerLogoGlow {
|
|
||||||
0% { filter: drop-shadow(0 0 3px var(--primary-orange)); }
|
|
||||||
100% { filter: drop-shadow(0 0 8px var(--primary-orange)) drop-shadow(0 0 15px var(--accent-orange)); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-text {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-text .brand-name {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--primary-orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-text .brand-subtitle {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--text-gray);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links {
|
|
||||||
display: flex;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a {
|
|
||||||
color: var(--text-gray);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a:hover {
|
|
||||||
color: var(--primary-orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 2rem;
|
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
color: var(--text-gray);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Design */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.nav {
|
|
||||||
padding: 1rem;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-menu {
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-logo-img {
|
|
||||||
width: 250px;
|
|
||||||
height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-name {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-subtitle {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-tagline {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-buttons {
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-content {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-content {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-content {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.services-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.container {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-logo-img {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-name {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 0.8rem 1.5rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-card,
|
|
||||||
.contact-form {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations d'apparition */
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(30px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in-up {
|
|
||||||
animation: fadeInUp 0.8s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollbar personnalisée */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: var(--darker-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--primary-orange);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: var(--secondary-orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Effets de particules (optionnel) */
|
|
||||||
.particles {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.particle {
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
background: var(--primary-orange);
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0.3;
|
|
||||||
animation: particleFloat 10s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes particleFloat {
|
|
||||||
0% {
|
|
||||||
transform: translateY(100vh) rotate(0deg);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
10% {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
90% {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateY(-100px) rotate(360deg);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
467
tech-overview.html
Normal file
467
tech-overview.html
Normal file
@ -0,0 +1,467 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>4NK — Tech Overview</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png">
|
||||||
|
<link rel="stylesheet" href="/styles.css">
|
||||||
|
<style>
|
||||||
|
.page { max-width: 960px; margin: 4rem auto; padding: 0 1rem; }
|
||||||
|
h1, h2, h3 { margin: 1.5rem 0 .5rem; }
|
||||||
|
.section { margin: 1.25rem 0; }
|
||||||
|
ul { padding-left: 1.2rem; }
|
||||||
|
ol { padding-left: 1.2rem; }
|
||||||
|
.header-actions { margin: 1.5rem 0 2rem; display: flex; gap: .75rem; }
|
||||||
|
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
|
||||||
|
th, td { border: 1px solid var(--border); padding: 0.5rem; text-align: left; }
|
||||||
|
th { background: var(--tint); font-weight: bold; }
|
||||||
|
code { background: var(--tint); padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9em; }
|
||||||
|
pre { background: var(--tint); padding: 1rem; border-radius: 8px; overflow-x: auto; }
|
||||||
|
pre code { background: none; padding: 0; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<h1>4NK Identity and Process System Specification</h1>
|
||||||
|
<div class="header-actions">
|
||||||
|
<a class="btn btn-secondary" href="/">Back to homepage</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p><strong>Version:</strong> 1.0<br>
|
||||||
|
<strong>Date:</strong> October 1, 2025<br>
|
||||||
|
<strong>Source:</strong> Complete analysis of sdk_client, sdk_common, sdk_relay, sdk_storage, ihm_client, rust-silentPayments components</p>
|
||||||
|
|
||||||
|
<h2>Table of Contents</h2>
|
||||||
|
<ol>
|
||||||
|
<li><a href="#overview">Overview</a></li>
|
||||||
|
<li><a href="#identity">Identity Architecture</a></li>
|
||||||
|
<li><a href="#process">Process System</a></li>
|
||||||
|
<li><a href="#validation">Validation and Consensus</a></li>
|
||||||
|
<li><a href="#network">Network Communication</a></li>
|
||||||
|
<li><a href="#storage">Storage and Persistence</a></li>
|
||||||
|
<li><a href="#dataflow">Data Flow</a></li>
|
||||||
|
<li><a href="#security">Security</a></li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h2 id="overview">1. Overview</h2>
|
||||||
|
|
||||||
|
<h3>1.1 System Philosophy</h3>
|
||||||
|
<p>4NK is a decentralized system for collaborative process management based on the Bitcoin blockchain, using <strong>Silent Payments (BIP352)</strong> for identity and encryption. The system enables multiple parties to collaborate on processes with verifiable states, defined roles, and cryptographic validation rules.</p>
|
||||||
|
|
||||||
|
<h3>1.2 Core Principles</h3>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Decentralized Identity</strong>: Based on Bitcoin Silent Payment addresses</li>
|
||||||
|
<li><strong>Device-centric</strong>: Each device has its own cryptographic key</li>
|
||||||
|
<li><strong>Multi-device</strong>: A user can manage multiple devices via pairing</li>
|
||||||
|
<li><strong>Stateful Processes</strong>: Evolution controlled by Bitcoin commitments</li>
|
||||||
|
<li><strong>Distributed Validation</strong>: Multiple cryptographic signatures required</li>
|
||||||
|
<li><strong>P2P Communication</strong>: WebSocket relay for real-time synchronization</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>1.3 Main Components</h3>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Component</th>
|
||||||
|
<th>Role</th>
|
||||||
|
<th>Technology</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>sdk_common</td>
|
||||||
|
<td>Shared types and structures</td>
|
||||||
|
<td>Rust (WASM-ready)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>sdk_client</td>
|
||||||
|
<td>WASM client library</td>
|
||||||
|
<td>Rust → WebAssembly</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>sdk_relay</td>
|
||||||
|
<td>Message relay and synchronization</td>
|
||||||
|
<td>Rust + WebSocket</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>sdk_storage</td>
|
||||||
|
<td>Distributed key-value storage</td>
|
||||||
|
<td>Rust + HTTP</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>ihm_client</td>
|
||||||
|
<td>Web user interface</td>
|
||||||
|
<td>TypeScript + Web Components</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>rust-silentPayments</td>
|
||||||
|
<td>Silent Payments implementation</td>
|
||||||
|
<td>Rust (dependency)</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h2 id="identity">2. Identity Architecture</h2>
|
||||||
|
|
||||||
|
<h3>2.1 Identity Hierarchy</h3>
|
||||||
|
<pre><code>Device
|
||||||
|
├─ SpClient (Silent Payment Client)
|
||||||
|
│ ├─ Scan Key (private)
|
||||||
|
│ ├─ Spend Key (private)
|
||||||
|
│ └─ Silent Payment Address (public)
|
||||||
|
├─ SpWallet (UTXO outputs)
|
||||||
|
├─ Pairing Process (OutPoint)
|
||||||
|
└─ Member (list of paired addresses)</code></pre>
|
||||||
|
|
||||||
|
<h3>2.2 Device Structure</h3>
|
||||||
|
<p>A <code>Device</code> represents a single physical device with its own cryptographic keys:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>sp_wallet</strong>: Silent Payments wallet</li>
|
||||||
|
<li><strong>pairing_process_commitment</strong>: Optional link to pairing process</li>
|
||||||
|
<li><strong>paired_member</strong>: Group of paired addresses</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><strong>Main operations:</strong></p>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Creation</strong>: Generates a local Silent Payment address and initializes a Member with this address alone</li>
|
||||||
|
<li><strong>Pairing</strong>: Associates the device with a pairing process, linking multiple Silent Payment addresses together</li>
|
||||||
|
<li><strong>Unpairing</strong>: Resets to single local state</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h3>2.3 Member Structure</h3>
|
||||||
|
<p>A <code>Member</code> represents a set of devices belonging to the same entity:</p>
|
||||||
|
<ul>
|
||||||
|
<li>List of Silent Payment addresses</li>
|
||||||
|
<li>Used for multi-signature validations</li>
|
||||||
|
<li>Order-independent comparison (internal HashSet)</li>
|
||||||
|
<li>Deterministic serialization (automatic sorting)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>2.4 Pairing Process</h3>
|
||||||
|
<p><strong>Pairing</strong> is the mechanism for associating multiple devices to a single logical identity (member).</p>
|
||||||
|
|
||||||
|
<p><strong>Pairing steps:</strong></p>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Creation of pairing process</strong>: A device creates a new Process with a special "pairing" role. The ProcessState contains a public field "pairedAddresses" with the list of addresses.</li>
|
||||||
|
<li><strong>Pairing validation</strong>: Members must be empty (no pre-existing members). A single validation rule for the "pairedAddresses" field. Required signatures vary:
|
||||||
|
<ul>
|
||||||
|
<li><strong>Creation</strong>: Signature from new address only</li>
|
||||||
|
<li><strong>Addition</strong>: Signature from already paired addresses</li>
|
||||||
|
<li><strong>Removal</strong>: Signatures from all devices (consensus)</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><strong>Post-pairing state</strong>: Device links to process and updates paired member list</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h2 id="process">3. Process System</h2>
|
||||||
|
|
||||||
|
<h3>3.1 Process Definition</h3>
|
||||||
|
<p>A <strong>Process</strong> is a state machine with defined roles, validation rules, and Bitcoin commitments. Each state transition creates a new Bitcoin UTXO.</p>
|
||||||
|
|
||||||
|
<p><strong>Key characteristics:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Commitment ID</strong>: Bitcoin OutPoint (txid:vout)</li>
|
||||||
|
<li><strong>State ID</strong>: Merkle root of all process data</li>
|
||||||
|
<li><strong>Immutability</strong>: Each state is immutable once committed on-chain</li>
|
||||||
|
<li><strong>Verifiability</strong>: Anyone can verify state transitions via Bitcoin blockchain</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>3.2 Process Structure</h3>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Field</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Type</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>commitment</td>
|
||||||
|
<td>Current Bitcoin commitment (OutPoint)</td>
|
||||||
|
<td>OutPoint</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>state</td>
|
||||||
|
<td>Current state (data + metadata)</td>
|
||||||
|
<td>ProcessState</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>roles</td>
|
||||||
|
<td>Role definitions and permissions</td>
|
||||||
|
<td>Roles</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>previous</td>
|
||||||
|
<td>Previous state (for history)</td>
|
||||||
|
<td>Option<ProcessState></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h3>3.3 Roles System</h3>
|
||||||
|
<p>Each process defines <strong>roles</strong> with specific permissions. A role contains:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>members</strong>: List of Member identifiers (pairing process IDs)</li>
|
||||||
|
<li><strong>validation_rules</strong>: Rules for field modifications</li>
|
||||||
|
<li><strong>storages</strong>: Authorized storage servers for this role</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><strong>Special role "apophis":</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>Can obliterate (destroy) the entire process</li>
|
||||||
|
<li>Must be explicitly defined in roles</li>
|
||||||
|
<li>Typically restricted to process owner</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>3.4 Validation Rules</h3>
|
||||||
|
<p>A <code>ValidationRule</code> defines who can modify which fields:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>quorum</strong>: Minimum percentage of members required (0.0 to 1.0)</li>
|
||||||
|
<li><strong>fields</strong>: List of field names covered by this rule</li>
|
||||||
|
<li><strong>min_sig_member</strong>: Minimum percentage of devices per member (0.0 to 1.0)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><strong>Example:</strong> A rule with quorum=0.67 and min_sig_member=0.5 requires:</p>
|
||||||
|
<ul>
|
||||||
|
<li>At least 2/3 of members to approve</li>
|
||||||
|
<li>Each approving member needs at least 50% of their devices to sign</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 id="validation">4. Validation and Consensus</h2>
|
||||||
|
|
||||||
|
<h3>4.1 State Transition Workflow</h3>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Proposal</strong>: A member proposes a new state via <code>CommitMessage</code></li>
|
||||||
|
<li><strong>Distribution</strong>: The relay broadcasts the proposal to all participants</li>
|
||||||
|
<li><strong>Validation</strong>: Each member validates the proposal locally</li>
|
||||||
|
<li><strong>Signature</strong>: If valid, members sign and send <code>ValidationToken</code></li>
|
||||||
|
<li><strong>Aggregation</strong>: Proposer collects signatures until quorum is reached</li>
|
||||||
|
<li><strong>Commitment</strong>: Proposer creates Bitcoin transaction with state_id in OP_RETURN</li>
|
||||||
|
<li><strong>Broadcast</strong>: New state is distributed with on-chain proof</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h3>4.2 Validation Token</h3>
|
||||||
|
<p>A <code>ValidationToken</code> is a cryptographic signature proving a member's approval:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>public_key</strong>: Signer's public key (extracted from Silent Payment address)</li>
|
||||||
|
<li><strong>signature</strong>: Schnorr signature of state_id</li>
|
||||||
|
<li><strong>message</strong>: state_id (32 bytes)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>4.3 Multi-signature Validation</h3>
|
||||||
|
<p>The system supports complex multi-signature schemes:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Inter-member quorum</strong>: Percentage of members required</li>
|
||||||
|
<li><strong>Intra-member quorum</strong>: Percentage of devices per member</li>
|
||||||
|
<li><strong>Field-specific rules</strong>: Different quorums for different fields</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><strong>Example scenario:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>Role "validator" has 3 members: Alice, Bob, Carol</li>
|
||||||
|
<li>Alice has 2 devices, Bob has 3 devices, Carol has 1 device</li>
|
||||||
|
<li>Rule: quorum=0.67, min_sig_member=0.5, fields=["certifiedDoc"]</li>
|
||||||
|
<li>To modify "certifiedDoc": Need 2/3 members (2 of 3) + at least 50% devices per member</li>
|
||||||
|
<li>Valid combination: Alice (1/2 devices) + Bob (2/3 devices) = quorum reached</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 id="network">5. Network Communication</h2>
|
||||||
|
|
||||||
|
<h3>5.1 WebSocket Protocol</h3>
|
||||||
|
<p>The <code>sdk_relay</code> component provides real-time communication via WebSocket. All messages are JSON-encoded.</p>
|
||||||
|
|
||||||
|
<p><strong>Message types:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>CommitMessage</strong>: Propose a new process state</li>
|
||||||
|
<li><strong>ValidationToken</strong>: Sign a proposed state</li>
|
||||||
|
<li><strong>CipherMessage</strong>: Send encrypted data to specific recipient</li>
|
||||||
|
<li><strong>QueryMessage</strong>: Request process state or history</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>5.2 Message Flow Example</h3>
|
||||||
|
<pre><code>Client A → Relay: CommitMessage (new state proposal)
|
||||||
|
Relay → All participants: Broadcast CommitMessage
|
||||||
|
Client B → Relay: ValidationToken (signature)
|
||||||
|
Client C → Relay: ValidationToken (signature)
|
||||||
|
Relay → Client A: Forward ValidationTokens
|
||||||
|
Client A: Aggregates signatures, creates Bitcoin tx
|
||||||
|
Client A → Relay: CommitMessage (with on-chain proof)
|
||||||
|
Relay → All: Broadcast committed state</code></pre>
|
||||||
|
|
||||||
|
<h3>5.3 Connection Management</h3>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Authentication</strong>: Silent Payment address-based</li>
|
||||||
|
<li><strong>Reconnection</strong>: Automatic with exponential backoff</li>
|
||||||
|
<li><strong>State synchronization</strong>: Query missing states on reconnect</li>
|
||||||
|
<li><strong>Heartbeat</strong>: Periodic ping/pong to detect disconnections</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 id="storage">6. Storage and Persistence</h2>
|
||||||
|
|
||||||
|
<h3>6.1 Storage Architecture</h3>
|
||||||
|
<p>The system uses a distributed key-value storage (<code>sdk_storage</code>) for:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Process states (historical and current)</li>
|
||||||
|
<li>Encrypted field keys</li>
|
||||||
|
<li>Large binary data (documents, files)</li>
|
||||||
|
<li>Member metadata</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>6.2 Data Privacy Levels</h3>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Level</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Example</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Private (PCD)</td>
|
||||||
|
<td>Encrypted data, only commitment on-chain</td>
|
||||||
|
<td>Sensitive documents</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Public</td>
|
||||||
|
<td>Readable by all network participants</td>
|
||||||
|
<td>Paired addresses list</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>On-chain</td>
|
||||||
|
<td>Only state_id (32 bytes) in OP_RETURN</td>
|
||||||
|
<td>State commitments</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h3>6.3 Encryption Scheme</h3>
|
||||||
|
<p>Private fields use AES-256-GCM encryption:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Key generation</strong>: Random 32 bytes per field</li>
|
||||||
|
<li><strong>Key distribution</strong>: Via CipherMessage or storage (asymmetrically encrypted)</li>
|
||||||
|
<li><strong>Key storage</strong>: In ProcessState.keys (field_name → key mapping)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 id="dataflow">7. Data Flow</h2>
|
||||||
|
|
||||||
|
<h3>7.1 Creating a New Process</h3>
|
||||||
|
<ol>
|
||||||
|
<li>Client calls <code>create_process(roles, initial_state)</code></li>
|
||||||
|
<li>SDK generates process structure with empty commitment</li>
|
||||||
|
<li>Client proposes first state via <code>CommitMessage</code></li>
|
||||||
|
<li>Required members validate and sign</li>
|
||||||
|
<li>Client creates Bitcoin transaction with state_id in OP_RETURN</li>
|
||||||
|
<li>Process is now live with on-chain commitment</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h3>7.2 Updating a Process</h3>
|
||||||
|
<ol>
|
||||||
|
<li>Client modifies process state fields</li>
|
||||||
|
<li>SDK validates modifications against roles and rules</li>
|
||||||
|
<li>Client sends <code>CommitMessage</code> with new state</li>
|
||||||
|
<li>Other members receive proposal via relay</li>
|
||||||
|
<li>Each member validates locally and signs if valid</li>
|
||||||
|
<li>Proposer collects signatures until quorum reached</li>
|
||||||
|
<li>Proposer spends previous UTXO, creates new one with new state_id</li>
|
||||||
|
<li>New state becomes current, previous state moves to history</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h3>7.3 Obliterating a Process</h3>
|
||||||
|
<ol>
|
||||||
|
<li>Member with "apophis" role calls <code>obliterate(process_id)</code></li>
|
||||||
|
<li>SDK validates caller has apophis permission</li>
|
||||||
|
<li>Final Bitcoin transaction spends UTXO without creating new output</li>
|
||||||
|
<li>Process is marked as obliterated (end of lifecycle)</li>
|
||||||
|
<li>Historical states remain accessible but process cannot be updated</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h2 id="security">8. Security</h2>
|
||||||
|
|
||||||
|
<h3>8.1 Cryptographic Foundations</h3>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Identity</strong>: Bitcoin Silent Payments (BIP352), Schnorr signatures</li>
|
||||||
|
<li><strong>Encryption</strong>: AES-256-GCM for data, ECDH for key exchange</li>
|
||||||
|
<li><strong>Integrity</strong>: Merkle trees for state verification</li>
|
||||||
|
<li><strong>Timestamping</strong>: Bitcoin blockchain as immutable clock</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>8.2 Threat Model</h3>
|
||||||
|
<p><strong>Protected against:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>✅ Transaction replay (unique state_id per commitment)</li>
|
||||||
|
<li>✅ Double-spending (Bitcoin consensus)</li>
|
||||||
|
<li>✅ State manipulation (multi-signature validation + Merkle proofs)</li>
|
||||||
|
<li>✅ Sybil attacks (Bitcoin transaction costs for pairing)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><strong>Residual risks:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>⚠️ Relay censorship (mitigation: multi-relay connections)</li>
|
||||||
|
<li>⚠️ Privacy leakage via network analysis (mitigation: Tor support)</li>
|
||||||
|
<li>⚠️ Silent Payment scanning complexity (mitigation: Blindbit optimization)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>8.3 Best Practices</h3>
|
||||||
|
<p><strong>For developers:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>High quorum for critical actions (≥ 0.67 or 2/3)</li>
|
||||||
|
<li>Always define "apophis" role for obliteration capability</li>
|
||||||
|
<li>Encrypt sensitive data in PCD (private fields)</li>
|
||||||
|
<li>Validate client-side before sending CommitMessage</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><strong>For users:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>Pair at least 2 devices for backup</li>
|
||||||
|
<li>Regular wallet backups (export keys)</li>
|
||||||
|
<li>Verify roles before signing states</li>
|
||||||
|
<li>Check fields to validate using <code>get_fields_to_validate_for_member()</code></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Conclusion</h2>
|
||||||
|
<p>The 4NK identity and process system is built on an innovative decentralized architecture combining:</p>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Cryptographic Identity</strong>: Bitcoin Silent Payments (BIP352)</li>
|
||||||
|
<li><strong>Multi-device</strong>: Flexible pairing without security compromise</li>
|
||||||
|
<li><strong>Distributed Consensus</strong>: Multi-signature validation with configurable quorums</li>
|
||||||
|
<li><strong>Immutability</strong>: Bitcoin commitments for traceability</li>
|
||||||
|
<li><strong>Privacy</strong>: End-to-end encryption of sensitive data</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<p>This architecture enables various use cases:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Collaborative contract management</li>
|
||||||
|
<li>Multi-party electronic signatures</li>
|
||||||
|
<li>Decentralized approval workflows</li>
|
||||||
|
<li>Sovereign digital identity</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><strong>Strengths:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>No trusted central server</li>
|
||||||
|
<li>Censorship resistance</li>
|
||||||
|
<li>Complete auditability</li>
|
||||||
|
<li>Native Bitcoin interoperability</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><strong>Areas for improvement:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>Silent Payments scanning performance (Blindbit optimization)</li>
|
||||||
|
<li>Network resilience (multi-relays, gossip protocol)</li>
|
||||||
|
<li>Key management (social recovery, hardware wallets)</li>
|
||||||
|
<li>Pairing UX (NFC, dynamic QR codes)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<hr style="margin: 2rem 0; opacity:.2;">
|
||||||
|
<p>
|
||||||
|
<strong>Document generated on October 1, 2025</strong><br>
|
||||||
|
Based on 4NK source code analysis (sdk_client, sdk_common, sdk_relay, sdk_storage, ihm_client)<br>
|
||||||
|
<a href="https://git.4nkweb.com/4nk/4NK_env/src/branch/ext/docs/4NK_IDENTITY_AND_PROCESS_SPEC.md" target="_blank" rel="noopener">View original specification (French)</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<script src="/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
updates.png
Normal file
BIN
updates.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 547 KiB |
BIN
usercloud.png
Normal file
BIN
usercloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 626 KiB |
Loading…
x
Reference in New Issue
Block a user