Merge pull request 'Updating main with website 1.0' (#14) from dev into main
Reviewed-on: #14
This commit is contained in:
commit
86d17cbbc0
70
README.md
70
README.md
@ -1,8 +1,66 @@
|
||||
# website-front
|
||||
On nix :
|
||||
nix-shell
|
||||
# Website Front pour Banquise
|
||||
|
||||
To run the dev env :
|
||||
Ce projet est une application web React développée avec Vite, TypeScript et TailwindCSS.
|
||||
|
||||
cd la-banquise
|
||||
npm run dev
|
||||
## Architecture du Projet
|
||||
|
||||
```
|
||||
website-front/
|
||||
├── banquise-website/ # Application React principale
|
||||
│ ├── public/ # Fichiers statiques
|
||||
│ ├── src/ # Code source
|
||||
│ │ ├── assets/ # Images et ressources
|
||||
│ │ ├── App.tsx # Composant principal
|
||||
│ │ └── main.tsx # Point d'entrée de l'application
|
||||
│ ├── index.html # Template HTML principal
|
||||
│ ├── package.json # Configuration des dépendances
|
||||
│ ├── tsconfig.json # Configuration TypeScript
|
||||
│ ├── vite.config.ts # Configuration Vite
|
||||
│ └── tailwind.config.js # Configuration TailwindCSS
|
||||
└── shell.nix # Configuration pour environnement Nix
|
||||
```
|
||||
|
||||
## Technologies Utilisées
|
||||
|
||||
- **React 18** - Bibliothèque d'interface utilisateur
|
||||
- **TypeScript** - Langage de programmation typé
|
||||
- **Vite** - Outil de build et serveur de développement
|
||||
- **TailwindCSS** - Framework CSS utilitaire
|
||||
- **React Router** - Navigation entre les pages
|
||||
- **Zustand** - Gestion d'état
|
||||
- **React Query** - Gestion des requêtes API
|
||||
- **Framer Motion** - Animations
|
||||
|
||||
## Pré-requis
|
||||
|
||||
- Node.js (v16.0.0 ou supérieur)
|
||||
- npm ou yarn
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
# Se déplacer dans le dossier du projet
|
||||
cd banquise-website
|
||||
|
||||
# Installer les dépendances
|
||||
npm install
|
||||
# ou avec yarn
|
||||
yarn
|
||||
```
|
||||
|
||||
## Scripts Disponibles
|
||||
|
||||
- `npm run dev` - Lance le serveur de développement
|
||||
- `npm run build` - Compile le projet pour la production
|
||||
- `npm run preview` - Prévisualise la version de production localement
|
||||
- `npm run lint` - Vérifie la qualité du code avec ESLint
|
||||
|
||||
## Déploiement
|
||||
|
||||
### Compilation pour la Production
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Cette commande générera un dossier `dist` dans le répertoire `banquise-website/` contenant tous les fichiers optimisés pour la production.
|
||||
24
banquise-website/.gitignore
vendored
Normal file
24
banquise-website/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
54
banquise-website/README.md
Normal file
54
banquise-website/README.md
Normal file
@ -0,0 +1,54 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default tseslint.config({
|
||||
extends: [
|
||||
// Remove ...tseslint.configs.recommended and replace with this
|
||||
...tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
...tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
...tseslint.configs.stylisticTypeChecked,
|
||||
],
|
||||
languageOptions: {
|
||||
// other options...
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default tseslint.config({
|
||||
plugins: {
|
||||
// Add the react-x and react-dom plugins
|
||||
'react-x': reactX,
|
||||
'react-dom': reactDom,
|
||||
},
|
||||
rules: {
|
||||
// other rules...
|
||||
// Enable its recommended typescript rules
|
||||
...reactX.configs['recommended-typescript'].rules,
|
||||
...reactDom.configs.recommended.rules,
|
||||
},
|
||||
})
|
||||
```
|
||||
2
banquise-website/build.sh
Executable file
2
banquise-website/build.sh
Executable file
@ -0,0 +1,2 @@
|
||||
npm install
|
||||
npm run build
|
||||
28
banquise-website/eslint.config.js
Normal file
28
banquise-website/eslint.config.js
Normal file
@ -0,0 +1,28 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
19
banquise-website/index.html
Normal file
19
banquise-website/index.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="fr"> <!-- Changement de "en" à "fr" pour refléter la langue du contenu -->
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- Remplacement du favicon par le logo de La Banquise -->
|
||||
<link rel="icon" type="image/png" href="/src/assets/banquise.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<meta name="description" content="Services d'hébergement La Banquise - Accédez à notre Wiki, Gitea et Panel de jeux" />
|
||||
<title>La Banquise - Services d'hébergement</title>
|
||||
<!-- Ajout des polices Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
44
banquise-website/package.json
Normal file
44
banquise-website/package.json
Normal file
@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "banquise-website",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.6.5",
|
||||
"clsx": "^2.1.0",
|
||||
"framer-motion": "^10.18.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-router-dom": "^6.22.0",
|
||||
"@tanstack/react-query": "^5.17.9",
|
||||
"tailwind-merge": "^2.2.0",
|
||||
"zustand": "^4.4.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.25.0",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"@types/react": "^18.2.58",
|
||||
"@types/react-dom": "^18.2.19",
|
||||
"@vitejs/plugin-react": "^4.4.1",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^9.25.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"eslint-plugin-tailwindcss": "^3.14.0",
|
||||
"globals": "^16.0.0",
|
||||
"postcss": "^8.4.33",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.30.1",
|
||||
"vite": "^6.3.5",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"tailwindcss": "^3.4.1"
|
||||
}
|
||||
}
|
||||
6
banquise-website/postcss.config.js
Normal file
6
banquise-website/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
1434
banquise-website/src/App.css
Normal file
1434
banquise-website/src/App.css
Normal file
File diff suppressed because it is too large
Load Diff
522
banquise-website/src/App.tsx
Normal file
522
banquise-website/src/App.tsx
Normal file
@ -0,0 +1,522 @@
|
||||
import { FiUser, FiDatabase, FiShield, FiChevronDown } from 'react-icons/fi'
|
||||
import { FaDiscord, FaArrowRight, FaEnvelope, FaGithub, FaNetworkWired, FaServer, FaLaptopCode, FaCloudUploadAlt, FaExternalLinkAlt } from 'react-icons/fa'
|
||||
import { FiX, FiExternalLink } from 'react-icons/fi'
|
||||
import './App.css'
|
||||
import icebergImage from './assets/iceberg.png'
|
||||
import logoImage from './assets/banquise_server.svg'
|
||||
import { useEffect, useState, useMemo, useCallback, useRef } from 'react'
|
||||
|
||||
import aboutImage from './assets/banquise.png'
|
||||
|
||||
function App() {
|
||||
const [selectedService, setSelectedService] = useState<number | null>(null);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const mobileMenuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const services = useMemo(() => [
|
||||
{
|
||||
name: "Wiki",
|
||||
url: "https://wiki.la-banquise.fr/",
|
||||
description: "Une instance de wikijs, ou nous essayons de documenter nos projets, nos services ou encore notre infra, et aussi des petits tutoriels pour bien comprendre les outils utilises a EPITA !"
|
||||
},
|
||||
{
|
||||
name: "Git",
|
||||
url: "https://git.la-banquise.fr/",
|
||||
description: "Gitea est notre plateforme de gestion de code source, similaire à GitHub, hébergée par nos soins. Nos divers projets necessitant Git, comme par exemple ce site, sont heberges et développes grace a cet outil."
|
||||
},
|
||||
{
|
||||
name: "Panel jeux",
|
||||
url: "https://panel.la-banquise.fr/auth/login",
|
||||
description: "Interface de connection à notre panel Pterodactyl, qui vous permet de gérer vos serveurs de jeux. Celui ci sera remplace dans l ete par pelican."
|
||||
},
|
||||
], []);
|
||||
|
||||
const [icebergs, setIcebergs] = useState<Array<{
|
||||
id: number,
|
||||
x: number,
|
||||
y: number,
|
||||
scale: number,
|
||||
rotation: number,
|
||||
service: typeof services[0],
|
||||
floatClass: string
|
||||
}>>([])
|
||||
|
||||
const [reducedMotion, setReducedMotion] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
setReducedMotion(prefersReducedMotion);
|
||||
|
||||
const startTime = performance.now();
|
||||
let count = 0;
|
||||
while (performance.now() - startTime < 5) {
|
||||
count++;
|
||||
}
|
||||
|
||||
if (count < 1000) {
|
||||
setReducedMotion(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const positionIcebergs = useCallback(() => {
|
||||
const newIcebergs = [];
|
||||
|
||||
const positions = [
|
||||
{ x: 25, y: 35, scale: 0.95, rotation: 0 },
|
||||
{ x: 50, y: 25, scale: 1.1, rotation: 0 },
|
||||
{ x: 75, y: 35, scale: 0.95, rotation: 0 },
|
||||
];
|
||||
|
||||
const floatClasses = ['float-1', 'float-2', 'float-3', 'float-4', 'float-5'];
|
||||
|
||||
for (let i = 0; i < services.length; i++) {
|
||||
const position = positions[i % positions.length];
|
||||
|
||||
newIcebergs.push({
|
||||
id: i,
|
||||
x: position.x,
|
||||
y: position.y,
|
||||
scale: position.scale,
|
||||
rotation: position.rotation,
|
||||
service: services[i],
|
||||
floatClass: reducedMotion ? '' : floatClasses[i % floatClasses.length]
|
||||
});
|
||||
}
|
||||
|
||||
return newIcebergs;
|
||||
}, [services, reducedMotion]);
|
||||
|
||||
useEffect(() => {
|
||||
setIcebergs(positionIcebergs());
|
||||
}, [positionIcebergs]);
|
||||
|
||||
const renderBubbles = useMemo(() => {
|
||||
if (reducedMotion) return null;
|
||||
|
||||
return (
|
||||
<div className="bubbles">
|
||||
<div className="bubble"></div>
|
||||
<div className="bubble"></div>
|
||||
<div className="bubble"></div>
|
||||
<div className="bubble"></div>
|
||||
<div className="bubble"></div>
|
||||
<div className="bubble"></div>
|
||||
<div className="bubble"></div>
|
||||
</div>
|
||||
);
|
||||
}, [reducedMotion]);
|
||||
|
||||
const handleIcebergClick = (event: React.MouseEvent, serviceId: number) => {
|
||||
event.preventDefault();
|
||||
setSelectedService(serviceId);
|
||||
};
|
||||
|
||||
const handleClosePopup = () => {
|
||||
setSelectedService(null);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleOutsideClick = (event: MouseEvent) => {
|
||||
if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) {
|
||||
setMobileMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (mobileMenuOpen) {
|
||||
document.addEventListener('mousedown', handleOutsideClick);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleOutsideClick);
|
||||
};
|
||||
}, [mobileMenuOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mobileMenuOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = 'auto';
|
||||
};
|
||||
}, [mobileMenuOpen]);
|
||||
|
||||
const [activeAccordion, setActiveAccordion] = useState<number | null>(null);
|
||||
|
||||
// FAQ items for the about section
|
||||
const faqItems = useMemo(() => [
|
||||
{
|
||||
question: "Qui sommes-nous ?",
|
||||
answer: (
|
||||
<>
|
||||
<p>La Banquise est une association étudiante de l'EPITA, dont l'objectif est de former les epiteens a diverses notions de reseau et d'hebergement de servcies.
|
||||
Fondée a la rentree 2022, notre asso permet à ceux qui le souhaitent de se former sur des technologies d'hébergement et de réseau, sur nos serveurs, a dispositon des etudiants.</p>
|
||||
<p>Notre équipe est composée d'étudiants passionnés par l'informatique, le réseau et le partage de connaissances. Nous mettons notre expertise au service des étudiants et des associations de l'EPITA.</p>
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
question: "Comment candidater pour rejoindre La Banquise ?",
|
||||
answer: (
|
||||
<>
|
||||
<p>Pour nous rejoindre, rien de plus simple :</p>
|
||||
<br/>
|
||||
<ul>
|
||||
<li>Rejoignez notre serveur Discord</li>
|
||||
<li>Donnez votre login EPITA dans un ticket, ou expliquer votre situation/besoins.</li>
|
||||
<li>Un moderateur vous mettra le role necessaire pour acceder au salons avec tout nos projets sur discord !</li>
|
||||
</ul>
|
||||
<br/>
|
||||
<p>Si vous etes motivé.e, peu importe votre niveau technique actuel, n'hesitez pas a venir nous poser des question ou venir demander des ressources pour un projet !</p>
|
||||
<a href="https://discord.com/invite/QQWwzX5ptY" className="accordion-cta" target="_blank" rel="noopener noreferrer">
|
||||
Rejoindre notre Discord <FaExternalLinkAlt className="accordion-cta-icon" />
|
||||
</a>
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
question: "Quels sont nos objectifs ?",
|
||||
answer: (
|
||||
<>
|
||||
<p>Nos principaux objectifs sont :</p>
|
||||
<ul>
|
||||
<li>Former les étudiants aux technologies d'hébergement et de réseau</li>
|
||||
<li>Fournir des services informatiques de qualité aux étudiants et associations de l'EPITA</li>
|
||||
<li>Promouvoir le partage de connaissances et l'entraide</li>
|
||||
<li>Créer un environnement d'apprentissage pratique par l'expérience</li>
|
||||
<li>Maintenir une infrastructure robuste et sécurisée</li>
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
question: "Comment utiliser nos services ?",
|
||||
answer: (
|
||||
<>
|
||||
<p>Pour accéder à nos services :</p>
|
||||
<ol>
|
||||
<li>Connectez-vous au service souhaité avec vos identifiants, pour le moment crees par un admin</li>
|
||||
<li>Consultez notre Wiki pour obtenir de l'aide sur l'utilisation de chaque service !</li>
|
||||
</ol>
|
||||
<p>Si vous rencontrez des difficultés, n'hésitez pas à demander de l'aide sur notre Discord.</p>
|
||||
<a href="https://auth.la-banquise.fr/" className="accordion-cta" target="_blank" rel="noopener noreferrer">
|
||||
Se Connecter <FaExternalLinkAlt className="accordion-cta-icon" />
|
||||
</a>
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
question: "Comment contribuer a un projet ?",
|
||||
answer: (
|
||||
<>
|
||||
<p>Il existe plusieurs façons de contribuer aux projets La Banquise :</p>
|
||||
<ul>
|
||||
<li>Deployer des services</li>
|
||||
<li>Experimenter et documenter le fonctionnement de technologies (k8s, openstack...)</li>
|
||||
<li>Aider a gerer les ressources de l'asso</li>
|
||||
<li>Contribuer au code source de nos projets via Gitea</li>
|
||||
<li>Rédiger ou améliorer la documentation sur notre Wiki</li>
|
||||
<li>Proposer de nouvelles idées de services ou d'améliorations</li>
|
||||
<li>Aider d'autres utilisateurs sur notre Discord</li>
|
||||
</ul>
|
||||
<p>Toutes les contributions sont les bienvenues, même les plus modestes !</p>
|
||||
</>
|
||||
)
|
||||
},
|
||||
], []);
|
||||
|
||||
const toggleAccordion = (index: number) => {
|
||||
setActiveAccordion(activeAccordion === index ? null : index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="app-container">
|
||||
<a href="#main-content" className="sr-only focus:not-sr-only">Passer au contenu principal</a>
|
||||
|
||||
<header>
|
||||
<nav className="navbar" aria-label="Navigation principale">
|
||||
<div className="navbar-left">
|
||||
<img src={logoImage} alt="Logo La Banquise" className="site-logo" />
|
||||
<h1 className="site-name">La Banquise</h1>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={`navbar-mobile-toggle ${mobileMenuOpen ? 'active' : ''}`}
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-expanded={mobileMenuOpen}
|
||||
aria-label="Menu de navigation"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
className={`navbar-right ${mobileMenuOpen ? 'mobile-active' : ''}`}
|
||||
ref={mobileMenuRef}
|
||||
>
|
||||
<a
|
||||
href="https://discord.com/invite/QQWwzX5ptY"
|
||||
className="discord-button"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Rejoindre notre Discord"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<FaDiscord className="discord-icon" aria-hidden="true" />
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://auth.la-banquise.fr/"
|
||||
className="login-button"
|
||||
aria-label="Se connecter à votre compte"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<FiUser className="login-icon" aria-hidden="true" />
|
||||
<span>Se connecter</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`mobile-menu-overlay ${mobileMenuOpen ? 'active' : ''}`}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
></div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content" className="content">
|
||||
<div className="ocean" role="region" aria-label="Services La Banquise">
|
||||
{renderBubbles}
|
||||
|
||||
<section className="page-section hero-section">
|
||||
<div className="hero-tech-elements">
|
||||
<div className="tech-element tech-element-1"><FaServer /></div>
|
||||
<div className="tech-element tech-element-2"><FaLaptopCode /></div>
|
||||
<div className="tech-element tech-element-3"><FaNetworkWired /></div>
|
||||
<div className="tech-element tech-element-4"><FaCloudUploadAlt /></div>
|
||||
</div>
|
||||
|
||||
<div className="hero-logo-container">
|
||||
<img src={logoImage} alt="Logo La Banquise" className="hero-logo" />
|
||||
</div>
|
||||
<h2 className="hero-title">Association La Banquise</h2>
|
||||
<p className="hero-subtitle">
|
||||
Association d'hébergement et lab réseau pour tous les étudiants et associations de l'EPITA !
|
||||
</p>
|
||||
<div>
|
||||
<a href="https://discord.com/invite/QQWwzX5ptY" className="cta-button" target="_blank" rel="noopener noreferrer">
|
||||
Notre Discord
|
||||
<FaArrowRight className="cta-icon" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="page-section tech-features-section">
|
||||
<div className="section-divider"></div>
|
||||
<h2 className="section-title">Notre infrastructure</h2>
|
||||
<p className="section-subtitle">
|
||||
25+ serveurs pour répondre à vos besoins
|
||||
</p>
|
||||
<p className="section-subtitle">
|
||||
Un local a EPITA Lyon, prochainement a Paris ?
|
||||
</p>
|
||||
<div className="tech-features-grid">
|
||||
<div className="tech-feature-card">
|
||||
<div className="tech-feature-icon">
|
||||
<FaServer />
|
||||
</div>
|
||||
<h3 className="tech-feature-title">Serveurs performants</h3>
|
||||
<p className="tech-feature-description">
|
||||
Infrastructure optimisée pour assurer des performances élevées et une disponibilité maximale de vos applications
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="tech-feature-card">
|
||||
<div className="tech-feature-icon">
|
||||
<FiDatabase />
|
||||
</div>
|
||||
<h3 className="tech-feature-title">Stockage sécurisé</h3>
|
||||
<p className="tech-feature-description">
|
||||
Solutions de stockage distribuées avec redondance pour garantir l'intégrité et la durabilité de vos données
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="tech-feature-card">
|
||||
<div className="tech-feature-icon">
|
||||
<FaNetworkWired />
|
||||
</div>
|
||||
<h3 className="tech-feature-title">Réseau optimisé</h3>
|
||||
<p className="tech-feature-description">
|
||||
Architecture réseau à haute disponibilité avec une faible latence pour vos applications critiques
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="tech-feature-card">
|
||||
<div className="tech-feature-icon">
|
||||
<FiShield />
|
||||
</div>
|
||||
<h3 className="tech-feature-title">Sécurité renforcée</h3>
|
||||
<p className="tech-feature-description">
|
||||
Protection contre les menaces avec systèmes de sécurité modernes et mises à jour régulières
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="page-section services-section" id="services">
|
||||
<div className="section-divider"></div>
|
||||
<h2 className="section-title">Nos services</h2>
|
||||
<p className="section-subtitle">
|
||||
Explorez notre écosystème de services conçus pour répondre à vos besoins.
|
||||
</p>
|
||||
|
||||
<div
|
||||
className="icebergs-container"
|
||||
role="list"
|
||||
aria-label="Liste des services disponibles"
|
||||
>
|
||||
{icebergs.map((iceberg) => (
|
||||
<a
|
||||
key={iceberg.id}
|
||||
href={iceberg.service.url}
|
||||
className={`iceberg ${iceberg.floatClass}`}
|
||||
style={{
|
||||
transform: `rotate(${iceberg.rotation}deg) scale(${iceberg.scale}) translateZ(0)`,
|
||||
}}
|
||||
role="listitem"
|
||||
aria-label={`En savoir plus sur ${iceberg.service.name}`}
|
||||
onClick={(e) => handleIcebergClick(e, iceberg.id)}
|
||||
>
|
||||
<img
|
||||
src={icebergImage}
|
||||
alt=""
|
||||
className="iceberg-image"
|
||||
loading="lazy"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="service-name">{iceberg.service.name}</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="page-section about-section" id="about">
|
||||
<div className="section-divider"></div>
|
||||
<h2 className="section-title">À propos de nous</h2>
|
||||
<p className="section-subtitle">
|
||||
Découvrez notre mission et posez-nous vos questions
|
||||
</p>
|
||||
|
||||
<div className="about-container">
|
||||
<div className="about-image-container">
|
||||
<img src={aboutImage} alt="Logo La Banquise" className="about-logo" />
|
||||
</div>
|
||||
|
||||
<p className="about-intro">
|
||||
La Banquise est une association étudiante dédiée à l'hébergement de services et à la formation sur les technologies réseau, au service de la communauté EPITA.
|
||||
</p>
|
||||
|
||||
<div className="accordion-group" role="region" aria-label="Foire aux questions">
|
||||
{faqItems.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`accordion-item ${activeAccordion === index ? 'active' : ''}`}
|
||||
>
|
||||
<div
|
||||
className="accordion-header"
|
||||
onClick={() => toggleAccordion(index)}
|
||||
role="button"
|
||||
aria-expanded={activeAccordion === index}
|
||||
aria-controls={`accordion-content-${index}`}
|
||||
tabIndex={0}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
toggleAccordion(index);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{item.question}
|
||||
<FiChevronDown className="accordion-toggle-icon" aria-hidden="true" />
|
||||
</div>
|
||||
<div
|
||||
className="accordion-content"
|
||||
id={`accordion-content-${index}`}
|
||||
role="region"
|
||||
>
|
||||
{item.answer}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{selectedService !== null && (
|
||||
<div className="popup-overlay" onClick={handleClosePopup} role="dialog" aria-modal="true" aria-labelledby="popup-title">
|
||||
<div className="popup-content" onClick={(e) => e.stopPropagation()}>
|
||||
<button className="popup-close" onClick={handleClosePopup} aria-label="Fermer">
|
||||
<FiX />
|
||||
</button>
|
||||
<h3 id="popup-title" className="popup-title">{services[selectedService].name}</h3>
|
||||
<p className="popup-description">{services[selectedService].description}</p>
|
||||
<a
|
||||
href={services[selectedService].url}
|
||||
className="popup-button"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<FiExternalLink className="popup-button-icon" />
|
||||
<span>Accéder au service</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="waves" aria-hidden="true">
|
||||
<div className="wave wave1"></div>
|
||||
<div className="wave wave2"></div>
|
||||
<div className="wave wave3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="footer">
|
||||
<div className="footer-content">
|
||||
<div className="footer-column">
|
||||
<h4>La Banquise</h4>
|
||||
<ul>
|
||||
<li><a href="#about">À propos</a></li>
|
||||
<li><a href="#services">Services</a></li>
|
||||
<li><a href="https://wiki.la-banquise.fr/en/home">Documentation</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="footer-column">
|
||||
<h4>Services</h4>
|
||||
<ul>
|
||||
{services.map((service, index) => (
|
||||
<li key={index}><a href={service.url}>{service.name}</a></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="footer-column">
|
||||
<h4>Communauté</h4>
|
||||
<ul>
|
||||
<li><a href="https://discord.com/invite/QQWwzX5ptY" target="_blank" rel="noopener noreferrer">Discord</a></li>
|
||||
<li><a href="https://git.la-banquise.fr/" target="_blank" rel="noopener noreferrer">Gitea</a></li>
|
||||
<li><a href="mailto:contact@la-banquise.fr"><FaEnvelope style={{marginRight: '0.5rem'}} /> contact@la-banquise.fr</a></li>
|
||||
<li><a href="https://github.com/la-banquise" target="_blank" rel="noopener noreferrer"><FaGithub style={{marginRight: '0.5rem'}} /> GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<p>© {new Date().getFullYear()} La Banquise. Tous droits réservés.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
BIN
banquise-website/src/assets/banquise.png
Normal file
BIN
banquise-website/src/assets/banquise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
53
banquise-website/src/assets/banquise_server.svg
Normal file
53
banquise-website/src/assets/banquise_server.svg
Normal file
@ -0,0 +1,53 @@
|
||||
<svg width="6000" height="6000" viewBox="1550 250 2805 4040" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="6000" height="6000" fill="none"/>
|
||||
<path d="M1555.65 1896.61V1820.67L4326.47 1818.24V1901.46H3909.18C3816.01 2210.62 3627.34 2832.01 3618 2844.29C3606.32 2859.64 3599.32 2864.49 3578.3 2867.72C3561.48 2870.3 3547.41 2853.18 3542.48 2844.29L3215.5 4262.17C3213.94 4273.48 3204.13 4296.26 3177.35 4296.91C3150.57 4297.56 3137.12 4269.17 3133.75 4254.9L3023.2 3937.39C2992.57 4016.3 2928.53 4181.06 2917.32 4208.85C2903.3 4243.59 2904.08 4256.51 2868.27 4262.17C2839.62 4266.69 2826.74 4228.51 2823.89 4208.85L2486 3026.07L2398.81 3163.41C2392.84 3181.46 2374.83 3216.41 2350.54 3211.89C2326.25 3207.36 2316.54 3177.69 2314.72 3163.41L2059.36 1896.61H1555.65Z" fill="#34A6FC"/>
|
||||
<path d="M2892.4 2234.25L2720.09 2368.34L2558.7 2764.97L2892.4 2234.25Z" fill="#76BEEE"/>
|
||||
<path d="M3437.39 2690.66L3230 2403.89L3141.89 2884.53L3242.47 3181.8L3437.39 2690.66Z" fill="#76BEEE"/>
|
||||
<path d="M3199.59 3291.66L3114.6 3038.01L2964.13 3888.62L3199.59 3291.66Z" fill="#76BEEE"/>
|
||||
<path d="M2525.75 1895.43H2164.98L2627.04 2257.4L2525.75 1895.43Z" fill="#A0ECF9"/>
|
||||
<path d="M2708.08 2285.68C2706.21 2292.15 2674.57 2166.64 2658.99 2103.08L3111.7 1965.73C2977.94 2069.68 2709.95 2279.22 2708.08 2285.68Z" fill="#A0ECF9"/>
|
||||
<path d="M3347.02 1903.51H3834.02L3577.66 2709.86L3347.02 1903.51Z" fill="#A0ECF9"/>
|
||||
<path d="M3172.48 2318.81L3038.46 2134.59L2536.66 2936.1L2563.93 3023.36L3078.98 2851.26L3172.48 2318.81Z" fill="#A0ECF9"/>
|
||||
<path d="M3381.31 3218.08L3480.26 2776.12L3250.4 3356.24L3381.31 3218.08Z" fill="#A0ECF9"/>
|
||||
<path d="M3347.02 3364.32L3182.61 3538.84L3200.53 3996.15L3347.02 3364.32Z" fill="#A0ECF9"/>
|
||||
<path d="M2643.12 2367.1L2152.51 1981.71L2366.67 3048.2L2643.12 2367.1Z" fill="#1F5078"/>
|
||||
<path d="M2638.45 2029.38L2604.18 1900.11H3077.66L2638.45 2029.38Z" fill="#1F5078"/>
|
||||
<path d="M3279.35 1930L3088.56 2078.67L3484.94 2628.88L3279.35 1930Z" fill="#1F5078"/>
|
||||
<path d="M3055.85 2938.32L2583.94 3095.87L2858.83 4046.02L3055.85 2938.32Z" fill="#1F5078"/>
|
||||
<path d="M3116.59 3698.6L3064.42 3827.07L3128.28 4006.43L3116.59 3698.6Z" fill="#1F5078"/>
|
||||
<path d="M2643.12 2367.1L2152.51 1981.71L2366.67 3048.2L2643.12 2367.1Z" fill="#1F5078"/>
|
||||
<path d="M2638.45 2029.38L2604.18 1900.11H3077.66L2638.45 2029.38Z" fill="#1F5078"/>
|
||||
<path d="M3279.35 1930L3088.56 2078.67L3484.94 2628.88L3279.35 1930Z" fill="#1F5078"/>
|
||||
<path d="M3055.85 2938.32L2583.94 3095.87L2858.83 4046.02L3055.85 2938.32Z" fill="#1F5078"/>
|
||||
<path d="M3116.59 3698.6L3064.42 3827.07L3128.28 4006.43L3116.59 3698.6Z" fill="#1F5078"/>
|
||||
<path d="M1554.09 1348.69V1426.25L4325.7 1425.44L4324.14 1347.88H3844.93L3541.04 821.124C3537.93 815.199 3529.67 802.219 3521.56 797.694C3513.46 793.17 3493.77 802.272 3484.94 807.389L3316.63 876.062C3225.73 677.315 3044.07 279.822 3044.69 279.822C3033.78 265.28 3033.78 260.432 3010.41 256.393C2991.71 253.161 2979.76 270.666 2976.12 279.822L2794.57 670.044C2794.57 670.044 2690.94 577.134 2688.6 574.71C2686.26 572.287 2659.77 544.01 2639.51 544.01C2623.3 544.01 2609.38 564.477 2604.45 574.71L2044.98 1348.69H1554.09Z" fill="#34A6FC"/>
|
||||
<path d="M2761.84 740.338L2656.65 642.482L2560.81 1148.74L2577.17 1142.27L2761.84 740.338Z" fill="#F2F2F2"/>
|
||||
<path d="M2723.66 1327.47L2553.8 1231.23L3016.64 1054.93L2723.66 1327.47Z" fill="#F2F2F2"/>
|
||||
<path d="M3534.81 1187.56L3544.16 970.014L3722.6 1285.41L3534.81 1187.56Z" fill="#F2F2F2"/>
|
||||
<path d="M3683.64 1346.88L3529.35 1266.81C3545.98 1293.5 3580.31 1346.88 3584.68 1346.88H3683.64Z" fill="#F2F2F2"/>
|
||||
<path d="M2557.93 767.141L2476.84 1177.5L2173.55 1298.67L2557.93 767.141Z" fill="#76BEEE"/>
|
||||
<path d="M2850.3 1033.71L2671.76 1101.57L2932.16 547.42L2850.3 1033.71Z" fill="#76BEEE"/>
|
||||
<path d="M3186.34 996.556L2805.86 1346.33L3169.18 1347.14L3354.74 1164.58L3186.34 996.556Z" fill="#76BEEE"/>
|
||||
<path d="M3471.69 893.966C3432.71 909.852 3353.81 942.111 3350.07 944.049L3434.27 1133.07L3467.02 1150.04L3471.69 893.966Z" fill="#76BEEE"/>
|
||||
<path d="M3145.16 922.431L2926.99 1004.88L3028.28 419.632L3288.52 996.8C3275.54 984.944 3244.42 955.735 3223.85 933.748C3198.14 906.264 3202.04 914.347 3192.69 908.689C3185.21 904.162 3157.88 915.964 3145.16 922.431Z" fill="#A0ECF9"/>
|
||||
<path d="M2464.18 1261.94L2243.68 1348.44H2609.1L2464.18 1261.94Z" fill="#A0ECF9"/>
|
||||
<path d="M3404.61 1219.91C3362.8 1260.59 3278.08 1343.26 3273.72 1348.44H3495C3497.49 1348.44 3435.78 1262.75 3404.61 1219.91Z" fill="#A0ECF9"/>
|
||||
<path d="M1555.65 1769.2V1485.57C1554.87 1473.37 1561.88 1448.95 1596.16 1448.95H4293.75C4319.31 1448.95 4329.33 1469.21 4331.15 1479.34V1773.88C4331.15 1795.07 4310.37 1798.81 4299.98 1798.03H1596.16C1562.66 1798.03 1555.65 1780.89 1555.65 1769.2Z" fill="#878787"/>
|
||||
<path d="M3246.51 1796.53V1447.45C3585.98 1446.67 4271 1445.74 4295.31 1448.23C4319.62 1450.73 4328.81 1469.53 4330.37 1478.62C4328.55 1562 4326.01 1736.07 4330.37 1765.37C4334.73 1794.66 4309.85 1798.35 4296.86 1796.53H3246.51Z" fill="#595959"/>
|
||||
<path d="M3568.31 1485.57C3541.82 1485.57 3523.9 1506.61 3523.9 1527.65C3523.9 1561.31 3553.51 1569.73 3568.31 1569.73C3603.85 1569.73 3612.73 1541.68 3612.73 1527.65C3612.73 1490.87 3583.9 1485.57 3568.31 1485.57Z" fill="#29C939"/>
|
||||
<path d="M3798.18 1527.65C3798.18 1493.99 3827.53 1485.57 3842.2 1485.57C3856.88 1485.57 3886.23 1493.99 3886.23 1527.65C3886.23 1541.68 3877.42 1569.73 3842.2 1569.73C3827.53 1569.73 3798.18 1561.31 3798.18 1527.65Z" fill="#29C939"/>
|
||||
<path d="M4059.99 1527.65C4059.99 1493.99 4088.3 1485.57 4102.45 1485.57C4136.43 1485.57 4144.92 1513.63 4144.92 1527.65C4144.92 1561.31 4116.61 1569.73 4102.45 1569.73C4068.48 1569.73 4059.99 1541.68 4059.99 1527.65Z" fill="#29C939"/>
|
||||
<path d="M3523.9 1706.09C3523.9 1672.43 3553.51 1664.01 3568.31 1664.01C3603.85 1664.01 3612.73 1692.06 3612.73 1706.09C3612.73 1739.75 3583.12 1748.16 3568.31 1748.16C3532.78 1748.16 3523.9 1720.11 3523.9 1706.09Z" fill="#29C939"/>
|
||||
<path d="M3842.2 1664.01C3806.98 1664.01 3798.18 1692.06 3798.18 1706.09C3798.18 1739.75 3827.53 1748.16 3842.2 1748.16C3877.42 1748.16 3886.23 1720.11 3886.23 1706.09C3886.23 1692.06 3877.42 1664.01 3842.2 1664.01Z" fill="#29C939"/>
|
||||
<path d="M4144.92 1706.09C4144.92 1672.43 4116.61 1664.01 4102.45 1664.01C4068.48 1664.01 4059.99 1692.06 4059.99 1706.09C4059.99 1739.75 4088.3 1748.16 4102.45 1748.16C4116.61 1748.16 4144.92 1739.75 4144.92 1706.09Z" fill="#29C939"/>
|
||||
<path d="M3568.31 1485.57C3541.82 1485.57 3523.9 1506.61 3523.9 1527.65C3523.9 1561.31 3553.51 1569.73 3568.31 1569.73C3603.85 1569.73 3612.73 1541.68 3612.73 1527.65C3612.73 1490.87 3583.9 1485.57 3568.31 1485.57Z" fill="#34A6FC"/>
|
||||
<path d="M3523.9 1706.09C3523.9 1672.43 3553.51 1664.01 3568.31 1664.01C3603.85 1664.01 3612.73 1692.06 3612.73 1706.09C3612.73 1739.75 3583.12 1748.16 3568.31 1748.16C3532.78 1748.16 3523.9 1720.11 3523.9 1706.09Z" fill="#34A6FC"/>
|
||||
<path d="M3842.2 1664.01C3806.98 1664.01 3798.18 1692.06 3798.18 1706.09C3798.18 1739.75 3827.53 1748.16 3842.2 1748.16C3877.42 1748.16 3886.23 1720.11 3886.23 1706.09C3886.23 1692.06 3877.42 1664.01 3842.2 1664.01Z" fill="#34A6FC"/>
|
||||
<path d="M4144.92 1706.09C4144.92 1672.43 4116.61 1664.01 4102.45 1664.01C4068.48 1664.01 4059.99 1692.06 4059.99 1706.09C4059.99 1739.75 4088.3 1748.16 4102.45 1748.16C4116.61 1748.16 4144.92 1739.75 4144.92 1706.09Z" fill="#34A6FC"/>
|
||||
<path d="M1731.75 1569.73V1485.57H1998.23V1569.73H1731.75Z" fill="#D9D9D9"/>
|
||||
<path d="M2373.03 1748.16V1664.01H2639.51V1748.16H2373.03Z" fill="#D9D9D9"/>
|
||||
<path d="M2056.67 1569.73V1485.57H2323.16V1569.73H2056.67Z" fill="#D9D9D9"/>
|
||||
<path d="M2373.03 1485.57V1569.73H2639.51V1485.57H2373.03Z" fill="#D9D9D9"/>
|
||||
<path d="M2323.16 1664.01H2056.67V1748.16H2323.16V1664.01Z" fill="#D9D9D9"/>
|
||||
<path d="M1998.23 1748.16V1664.01H1731.75V1748.16H1998.23Z" fill="#D9D9D9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.6 KiB |
BIN
banquise-website/src/assets/iceberg.png
Normal file
BIN
banquise-website/src/assets/iceberg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
103
banquise-website/src/index.css
Normal file
103
banquise-website/src/index.css
Normal file
@ -0,0 +1,103 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Système typographique moderne */
|
||||
:root {
|
||||
--font-heading: 'Space Grotesk', sans-serif;
|
||||
--font-body: 'Inter', system-ui, sans-serif;
|
||||
|
||||
font-family: var(--font-body);
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Hiérarchie typographique */
|
||||
h1, h2, h3, h4, h5, h6, .site-name, .welcome-title {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.4em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.8em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p, span, div, a, button, input {
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-body);
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
10
banquise-website/src/main.tsx
Normal file
10
banquise-website/src/main.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
1
banquise-website/src/vite-env.d.ts
vendored
Normal file
1
banquise-website/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
21
banquise-website/tailwind.config.js
Normal file
21
banquise-website/tailwind.config.js
Normal file
@ -0,0 +1,21 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// Vous pouvez personnaliser vos couleurs ici
|
||||
},
|
||||
fontFamily: {
|
||||
// Personnalisation des polices
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
}
|
||||
27
banquise-website/tsconfig.app.json
Normal file
27
banquise-website/tsconfig.app.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
7
banquise-website/tsconfig.json
Normal file
7
banquise-website/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
25
banquise-website/tsconfig.node.json
Normal file
25
banquise-website/tsconfig.node.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
27
banquise-website/vite.config.ts
Normal file
27
banquise-website/vite.config.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import viteCompression from 'vite-plugin-compression'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
viteCompression({
|
||||
verbose: false,
|
||||
algorithm: 'gzip',
|
||||
ext: '.gz',
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
minify: 'esbuild',
|
||||
cssMinify: true,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
react: ['react', 'react-dom'],
|
||||
router: ['react-router-dom'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
@ -1,24 +0,0 @@
|
||||
<svg width="1800" height="1000" viewBox="0 -300 1800 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Mât du drapeau -->
|
||||
<rect x="910" y="-220" width="50" height="220" fill="#1F5078"/>
|
||||
<!-- Petit drapeau -->
|
||||
<polygon points="960,-220 1250,-110 960,0" fill="#F2F2F2" stroke="#1F5078" stroke-width="1"/>
|
||||
<!-- Fond + contour -->
|
||||
<polygon fill="#34A6FC" points="0,676 0,725 1779,725 1778,675 1470,675
|
||||
1380,600 1275,350 1273,346 1268,338 1263,335 1257,332 1245,338
|
||||
1239,341 1131,384 1080,300 1073,260 1020,120 956,15 957,14.7431
|
||||
950,6 950,3 935,0 923,0 915,10 913,15 850,200 796.5,256
|
||||
730,200 728,200 710,178 697,178 350,676" />
|
||||
<!-- Autres conversions en polygon identiques aux points du SVG d'origine -->
|
||||
<polygon fill="#F2F2F2" points="775,300 707.5,239.5 646,552.5 656.5,548.5 775,300" />
|
||||
<polygon fill="#F2F2F2" points="750.5,663 641.5,603.5 938.5,494.5 750.5,663" />
|
||||
<polygon fill="#F2F2F2" points="1271,576.5 1277,442 1391.5,637 1271,576.5" />
|
||||
<polygon fill="#F2F2F2" points="1366.5,675 1267.5,625.5 1303,675 1366.5,675" />
|
||||
<polygon fill="#76BEEE" points="644.5,316.5 592.5,570.5 398,645.5 644.5,316.5" />
|
||||
<polygon fill="#76BEEE" points="832,481.5 717.5,523.5 884.5,180.5 832,481.5" />
|
||||
<polygon fill="#76BEEE" points="1047.5,458.5 803.5,675 1036.5,675.5 1155.5,562.5 1047.5,458.5" />
|
||||
<polygon fill="#76BEEE" points="1230.5,395 1205.5,404.833 1154.9,424.8 1152.5,426 1206.5,543 1227.5,553.5 1230.5,395" />
|
||||
<polygon fill="#A0ECF9" points="1021.5,412.5 881.5,463.5 946.5,101.5 1113.5,458.5" />
|
||||
<polygon fill="#A0ECF9" points="584.5,622.5 443,676 677.5,676 584.5,622.5" />
|
||||
<polygon fill="#A0ECF9" points="1188,596.5 1161.17,621.667 1106.8,672.8 1104,676 1246,676 1188,596.5" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@ -1,31 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>La Banquise</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="title">La Banquise</h1>
|
||||
<div class="grid-container">
|
||||
|
||||
<a class="grid-item" href="localhost">
|
||||
<object data="assets/iceberg.svg" type="image/svg+xml"></object>
|
||||
<p class="item-name">Placeholder</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="wave hidden">
|
||||
<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
|
||||
<path d="M0,0 C600,100 600,100 1200,0 V120 H0 V0 Z" class="shape-fill"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,22 +0,0 @@
|
||||
const tile = document.querySelectorAll(".grid-container > *")[0];
|
||||
const parent = tile.parentNode;
|
||||
tile.remove();
|
||||
|
||||
const tiles = [
|
||||
{ name: "Notre wiki", href: "https://wiki.la-banquise.fr" },
|
||||
{ name: "Notre git", href: "https://git.la-banquise.fr" },
|
||||
{ name: "Panel jeux", href: "https://panel.la-banquise.fr" },
|
||||
{ name: "Discord", href: "https://discord.gg/QQWwzX5ptY" },
|
||||
{ name: "Login", href: "https://auth.la-banquise.fr" },
|
||||
{ name: "Change password", href: "https://ssp.la-banquise.fr" },
|
||||
]
|
||||
|
||||
tiles.forEach((info) => {
|
||||
const newTile = tile.cloneNode(true);
|
||||
newTile.querySelectorAll(".item-name").forEach((el) => {
|
||||
el.innerText = info.name;
|
||||
});
|
||||
newTile.href = info.href;
|
||||
parent.appendChild(newTile);
|
||||
});
|
||||
|
||||
@ -1,136 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(45deg, #001e6c, #5dadc2, #001e6c);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 100s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
h1.title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Style de la vague en bas de page */
|
||||
.wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.wave svg {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: calc(100% + 1.3px);
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.wave .shape-fill {
|
||||
fill: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* En-tête du site */
|
||||
header {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Container en flexbox pour agencer les éléments dans une "grid" */
|
||||
.grid-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
gap: 20px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Chaque élément de la grid */
|
||||
.grid-item {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
padding: 2px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* Permet de s'étendre sur au moins 300px et de grandir si besoin */
|
||||
flex: 0 1 calc(10% - 40px);
|
||||
/* 3 items par ligne avec 20px de gap */
|
||||
max-width: calc(10% - 40px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.grid-item:hover {
|
||||
transform: scale(1.05);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.grid-item img,
|
||||
.grid-item object {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto 10px;
|
||||
/* Pour donner une vue isométrique */
|
||||
transform: rotateX(0deg) rotateZ(0deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.grid-item p {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 0rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.grid-item {
|
||||
flex: 0 1 calc(25% - 40px);
|
||||
max-width: calc(25% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid-item {
|
||||
flex: 0 1 calc(50% - 40px);
|
||||
max-width: calc(50% - 40px);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user