conjugaison espagnole

This commit is contained in:
2026-08-21 15:29:08 +00:00
commit ce8ca6334f
4 changed files with 999 additions and 0 deletions
+19
View File
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>Error</title>
<style>
html { color-scheme: light dark; }
body { width: 35em; margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif; }
</style>
</head>
<body>
<h1>An error occurred.</h1>
<p>Sorry, the page you are looking for is currently unavailable.<br/>
Please try again later.</p>
<p>If you are the system administrator of this resource then you should check
the error log for details.</p>
<p><em>Faithfully yours, nginx.</em></p>
</body>
</html>
+45
View File
@@ -0,0 +1,45 @@
# 🇪🇸 Application de Conjugaison Espagnole
Bienvenue sur le dépôt de l'application web de conjugaison espagnole, accessible en production à l'adresse suivante : [w3.giraud-finance.com](https://w3.giraud-finance.com/).
---
## 📋 Table des matières
1. [À propos du projet](#-à-propos-du-projet)
2. [Fonctionnalités principales](#-fonctionnalités-principales)
3. [Architecture technique](#-architecture-technique)
4. [Déploiement sous Docker](#-déploiement-sous-docker)
5. [Auteur](#-auteur)
---
## 🎯 À propos du projet
Cette application web interactive a été conçue pour faciliter l'apprentissage, la révision et la maîtrise des verbes espagnols. Elle s'adresse aux étudiants, aux passionnés de la langue ainsi qu'à toute personne souhaitant progresser rapidement dans la conjugaison hispanique à travers un outil simple, rapide et accessible en ligne.
---
## ✨ Fonctionnalités principales
* **Recherche rapide de verbes :** Interrogez instantanément la base de données pour afficher tous les temps et modes d'un verbe.
* **Interface épurée et responsive :** Pensée pour une utilisation fluide aussi bien sur ordinateur que sur tablette ou mobile.
* **Navigation optimisée :** Accès direct aux verbes réguliers, irréguliers et aux cas particuliers.
---
## 🛠️ Architecture technique
L'application repose sur un environnement web léger et performant :
* **Frontend / Serveur web :** HTML5, CSS3, JavaScript propulsé par un serveur Nginx.
* **Conteneurisation :** Déployé sous forme d'image Docker isolée (`app-conjugaisons`) pour garantir une stabilité et une portabilité maximales.
---
## 🐳 Déploiement sous Docker
L'application tourne de manière autonome dans un conteneur Docker sur le réseau local.
### 1. Récupération des sources depuis le conteneur
Si vous avez besoin d'extraire les fichiers de l'application directement depuis le conteneur en cours d'exécution :
```bash
docker cp app-conjugaisons:/usr/share/nginx/html ./conjugaisons_backup
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

+935
View File
@@ -0,0 +1,935 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Conjugaisons Espagnoles</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body
class="bg-slate-900 text-slate-100 min-h-screen font-sans antialiased p-6"
>
<div class="max-w-6xl mx-auto">
<header class="text-center mb-10">
<h1 class="text-3xl font-bold tracking-tight text-amber-400 mb-2">
Conjugaisons en Espagnol
</h1>
<p class="text-slate-400">
Les groupes réguliers et les principaux verbes irréguliers
</p>
</header>
<!-- Conteneur principal généré en JS -->
<main id="conjugation-container" class="space-y-12">
<!-- Injecté dynamiquement par JavaScript -->
</main>
</div>
<script>
const pronouns = ["yo", "tú", "él", "nosotros", "vosotros", "ellos"];
// Données structurées par lignes de 3 cartes
const data = [
// 1. Cas général (3 groupes avec chacun leur couleur)
{
verbs: [
{
group: "1er Groupe (-AR)",
example: "Hablar (Parler)",
color: "border-amber-500 text-amber-400",
tenses: [
{
name: "Présent",
terms: ["-o", "-as", "-a", "-amos", "-áis", "-an"],
},
{
name: "Imparfait",
terms: [
"-aba",
"-abas",
"-aba",
"-ábamos",
"-abais",
"-aban",
],
},
{
name: "Passé simple",
terms: ["-é", "-aste", "-ó", "-amos", "-asteis", "-aron"],
},
{ name: "Participe passé", terms: ["-ado"] },
{
name: "Futur",
terms: ["-é", "-ás", "-á", "-emos", "-éis", "-án"],
},
{
name: "Impératif",
terms: ["NOP", "-a", "-e", "-emos", "-ad", "-en"],
},
{
name: "Subjonctif Présent",
terms: ["-e", "-es", "-e", "-emos", "-éis", "-en"],
},
],
},
{
group: "2e Groupe (-ER)",
example: "Comer (Manger)",
color: "border-sky-500 text-sky-400",
tenses: [
{
name: "Présent",
terms: ["-o", "-es", "-e", "-emos", "-éis", "-en"],
},
{
name: "Imparfait",
terms: ["-ía", "-ías", "-ía", "-íamos", "-íais", "-ían"],
},
{
name: "Passé simple",
terms: ["-í", "-iste", "-ió", "-imos", "-isteis", "-ieron"],
},
{ name: "Participe passé", terms: ["-ido"] },
{
name: "Futur",
terms: ["-é", "-ás", "-á", "-emos", "-éis", "-án"],
},
{
name: "Impératif",
terms: ["NOP", "-e", "-a", "-amos", "-ed", "-an"],
},
{
name: "Subjonctif Présent",
terms: ["-a", "-as", "-a", "-amos", "-áis", "-an"],
},
],
},
{
group: "3e Groupe (-IR)",
example: "Vivir (Vivre)",
color: "border-emerald-500 text-emerald-400",
tenses: [
{
name: "Présent",
terms: ["-o", "-es", "-e", "-imos", "-ís", "-en"],
},
{
name: "Imparfait",
terms: ["-ía", "-ías", "-ía", "-íamos", "-íais", "-ían"],
},
{
name: "Passé simple",
terms: ["-í", "-iste", "-ió", "-imos", "-isteis", "-ieron"],
},
{ name: "Participe passé", terms: ["-ido"] },
{
name: "Futur",
terms: ["-é", "-ás", "-á", "-emos", "-éis", "-án"],
},
{
name: "Impératif",
terms: ["NOP", "-e", "-a", "-amos", "-id", "-en"],
},
{
name: "Subjonctif Présent",
terms: ["-a", "-as", "-a", "-amos", "-áis", "-an"],
},
],
},
],
},
// 2. ser, estar, tener
{
rowColor: "border-sky-500 text-sky-400",
verbs: [
{
group: "Ser",
example: "Être (caractéristique)",
tenses: [
{
name: "Présent",
terms: ["soy", "eres", "es", "somos", "sois", "son"],
},
{
name: "Imparfait",
terms: ["era", "eras", "era", "éramos", "erais", "eran"],
},
{
name: "Passé simple",
terms: [
"fui",
"fuiste",
"fue",
"fuimos",
"fuisteis",
"fueron",
],
},
{ name: "Participe passé", terms: ["sido"] },
{
name: "Futur",
terms: [
"seré",
"serás",
"será",
"seremos",
"seréis",
"serán",
],
},
{
name: "Impératif",
terms: ["NOP", "sé", "sea", "seamos", "sed", "sean"],
},
{
name: "Subjonctif Présent",
terms: ["sea", "seas", "sea", "seamos", "seáis", "sean"],
},
],
},
{
group: "Estar",
example: "Être (état / lieu)",
tenses: [
{
name: "Présent",
terms: [
"estoy",
"estás",
"está",
"estamos",
"estáis",
"están",
],
},
{
name: "Imparfait",
terms: [
"estaba",
"estabas",
"estaba",
"estábamos",
"estabais",
"estaban",
],
},
{
name: "Passé simple",
terms: [
"estuve",
"estuviste",
"estuvo",
"estuvimos",
"estuvisteis",
"estuvieron",
],
},
{ name: "Participe passé", terms: ["estado"] },
{
name: "Futur",
terms: [
"estaré",
"estarás",
"estará",
"estaremos",
"estaréis",
"estarán",
],
},
{
name: "Impératif",
terms: ["NOP", "está", "esté", "estemos", "estad", "estén"],
},
{
name: "Subjonctif Présent",
terms: [
"esté",
"estés",
"esté",
"estemos",
"estéis",
"estén",
],
},
],
},
{
group: "Tener",
example: "Avoir",
tenses: [
{
name: "Présent",
terms: [
"tengo",
"tienes",
"tiene",
"tenemos",
"tenéis",
"tienen",
],
},
{
name: "Imparfait",
terms: [
"tenía",
"tenías",
"tenía",
"teníamos",
"teníais",
"tenían",
],
},
{
name: "Passé simple",
terms: [
"tuve",
"tuviste",
"tuvo",
"tuvimos",
"tuvisteis",
"tuvieron",
],
},
{ name: "Participe passé", terms: ["tenido"] },
{
name: "Futur",
terms: [
"tendré",
"tendrás",
"tendrá",
"tendremos",
"tendréis",
"tendrán",
],
},
{
name: "Impératif",
terms: ["NOP", "ten", "tenga", "tengamos", "tened", "tengan"],
},
{
name: "Subjonctif Présent",
terms: [
"tenga",
"tengas",
"tenga",
"tengamos",
"tengáis",
"tengan",
],
},
],
},
],
},
// 3. haber, hacer, ir
{
rowColor: "border-emerald-500 text-emerald-400",
verbs: [
{
group: "Haber",
example: "Avoir (auxiliaire)",
tenses: [
{
name: "Présent",
terms: ["he", "has", "ha / hay", "hemos", "habéis", "han"],
},
{
name: "Imparfait",
terms: [
"había",
"habías",
"había",
"habíamos",
"habíais",
"habían",
],
},
{
name: "Passé simple",
terms: [
"hube",
"hubiste",
"hubo",
"hubimos",
"hubisteis",
"hubieron",
],
},
{ name: "Participe passé", terms: ["habido"] },
{
name: "Futur",
terms: [
"habré",
"habrás",
"habrá",
"habremos",
"habréis",
"habrán",
],
},
{
name: "Impératif",
terms: [
"NOP",
"he (de)",
"haga",
"hagamos",
"haced",
"hagan",
],
},
{
name: "Subjonctif Présent",
terms: [
"haya",
"hayas",
"haya",
"hayamos",
"hayáis",
"hayan",
],
},
],
},
{
group: "Hacer",
example: "Faire",
tenses: [
{
name: "Présent",
terms: [
"hago",
"haces",
"hace",
"hacemos",
"hacéis",
"hacen",
],
},
{
name: "Imparfait",
terms: [
"hacía",
"hacías",
"hacía",
"hacíamos",
"hacíais",
"hacían",
],
},
{
name: "Passé simple",
terms: [
"hice",
"hiciste",
"hizo",
"hicimos",
"hicisteis",
"hicieron",
],
},
{ name: "Participe passé", terms: ["hecho"] },
{
name: "Futur",
terms: [
"haré",
"harás",
"hará",
"haremos",
"haréis",
"harán",
],
},
{
name: "Impératif",
terms: ["NOP", "haz", "haga", "hagamos", "haced", "hagan"],
},
{
name: "Subjonctif Présent",
terms: [
"haga",
"hagas",
"haga",
"hagamos",
"hagáis",
"hagan",
],
},
],
},
{
group: "Ir",
example: "Aller",
tenses: [
{
name: "Présent",
terms: ["voy", "vas", "va", "vamos", "vais", "van"],
},
{
name: "Imparfait",
terms: ["iba", "ibas", "iba", "íbamos", "ibais", "iban"],
},
{
name: "Passé simple",
terms: [
"fui",
"fuiste",
"fue",
"fuimos",
"fuisteis",
"fueron",
],
},
{ name: "Participe passé", terms: ["ido"] },
{
name: "Futur",
terms: ["iré", "irás", "irá", "iremos", "iréis", "irán"],
},
{
name: "Impératif",
terms: ["NOP", "ve", "vaya", "vayamos", "id", "vayan"],
},
{
name: "Subjonctif Présent",
terms: [
"vaya",
"vayas",
"vaya",
"vayamos",
"vayáis",
"vayan",
],
},
],
},
],
},
// 4. dar, ver, poder
{
rowColor: "border-purple-500 text-purple-400",
verbs: [
{
group: "Dar",
example: "Donner",
tenses: [
{
name: "Présent",
terms: ["doy", "das", "da", "damos", "dais", "dan"],
},
{
name: "Imparfait",
terms: [
"daba",
"dabas",
"daba",
"dábamos",
"dabais",
"daban",
],
},
{
name: "Passé simple",
terms: ["di", "diste", "dio", "dimos", "disteis", "dieron"],
},
{ name: "Participe passé", terms: ["dado"] },
{
name: "Futur",
terms: [
"daré",
"darás",
"dará",
"daremos",
"daréis",
"darán",
],
},
{
name: "Impératif",
terms: ["NOP", "da", "dé", "demos", "dad", "den"],
},
{
name: "Subjonctif Présent",
terms: ["dé", "des", "dé", "demos", "deis", "den"],
},
],
},
{
group: "Ver",
example: "Voir",
tenses: [
{
name: "Présent",
terms: ["veo", "ves", "ve", "vemos", "veis", "ven"],
},
{
name: "Imparfait",
terms: [
"veía",
"veías",
"veía",
"veíamos",
"veíais",
"veían",
],
},
{
name: "Passé simple",
terms: ["vi", "viste", "vio", "vimos", "visteis", "vieron"],
},
{ name: "Participe passé", terms: ["visto"] },
{
name: "Futur",
terms: [
"veré",
"verás",
"verá",
"veremos",
"veréis",
"verán",
],
},
{
name: "Impératif",
terms: ["NOP", "ve", "vea", "veamos", "ved", "vean"],
},
{
name: "Subjonctif Présent",
terms: ["vea", "veas", "vea", "veamos", "veáis", "vean"],
},
],
},
{
group: "Poder",
example: "Pouvoir",
tenses: [
{
name: "Présent",
terms: [
"puedo",
"puedes",
"puede",
"podemos",
"podéis",
"pueden",
],
},
{
name: "Imparfait",
terms: [
"podía",
"podías",
"podía",
"podíamos",
"podíais",
"podían",
],
},
{
name: "Passé simple",
terms: [
"pude",
"pudiste",
"pudo",
"pudimos",
"pudisteis",
"pudieron",
],
},
{ name: "Participe passé", terms: ["podido"] },
{
name: "Futur",
terms: [
"podré",
"podrás",
"podrá",
"podremos",
"podréis",
"podrán",
],
},
{ name: "Impératif", terms: ["NOP", "—", "—", "—", "—", "—"] },
{
name: "Subjonctif Présent",
terms: [
"pueda",
"puedas",
"pueda",
"podamos",
"podáis",
"puedan",
],
},
],
},
],
},
// 5. decir, saber, querer
{
rowColor: "border-indigo-500 text-indigo-400",
verbs: [
{
group: "Decir",
example: "Dire",
tenses: [
{
name: "Présent",
terms: ["digo", "dices", "dice", "decimos", "decís", "dicen"],
},
{
name: "Imparfait",
terms: [
"decía",
"decías",
"decía",
"decíamos",
"decíais",
"decían",
],
},
{
name: "Passé simple",
terms: [
"dije",
"dijiste",
"dijo",
"dijimos",
"dijisteis",
"dijeron",
],
},
{ name: "Participe passé", terms: ["dicho"] },
{
name: "Futur",
terms: [
"diré",
"dirás",
"dirá",
"diremos",
"diréis",
"dirán",
],
},
{
name: "Impératif",
terms: ["NOP", "di", "diga", "digamos", "decid", "digan"],
},
{
name: "Subjonctif Présent",
terms: [
"diga",
"digas",
"diga",
"digamos",
"digáis",
"digan",
],
},
],
},
{
group: "Saber",
example: "Savoir",
tenses: [
{
name: "Présent",
terms: ["sé", "sabes", "sabe", "sabemos", "sabéis", "saben"],
},
{
name: "Imparfait",
terms: [
"sabía",
"sabías",
"sabía",
"sabíamos",
"sabíais",
"sabían",
],
},
{
name: "Passé simple",
terms: [
"supe",
"supiste",
"supo",
"supimos",
"supisteis",
"supieron",
],
},
{ name: "Participe passé", terms: ["sabido"] },
{
name: "Futur",
terms: [
"sabré",
"sabrás",
"sabrá",
"sabremos",
"sabréis",
"sabrán",
],
},
{
name: "Impératif",
terms: ["NOP", "sabe", "sepa", "sepamos", "sabed", "sepan"],
},
{
name: "Subjonctif Présent",
terms: [
"sepa",
"sepas",
"sepa",
"sepamos",
"sepáis",
"sepan",
],
},
],
},
{
group: "Querer",
example: "Vouloir / Aimer",
tenses: [
{
name: "Présent",
terms: [
"quiero",
"quieres",
"quiere",
"queremos",
"queréis",
"quieren",
],
},
{
name: "Imparfait",
terms: [
"quería",
"querías",
"quería",
"queríamos",
"queríais",
"querían",
],
},
{
name: "Passé simple",
terms: [
"quise",
"quisiste",
"quiso",
"quisimos",
"quisisteis",
"quisieron",
],
},
{ name: "Participe passé", terms: ["querido"] },
{
name: "Futur",
terms: [
"querré",
"querrás",
"querrá",
"querremos",
"querréis",
"querrán",
],
},
{
name: "Impératif",
terms: [
"NOP",
"quiere",
"quiera",
"queramos",
"quered",
"quieran",
],
},
{
name: "Subjonctif Présent",
terms: [
"quiera",
"quieras",
"quiera",
"queramos",
"queráis",
"quieran",
],
},
],
},
],
},
];
const container = document.getElementById("conjugation-container");
data.forEach((row) => {
let rowHtml = `<div class="grid grid-cols-1 md:grid-cols-3 gap-6">`;
row.verbs.forEach((verbData) => {
const cardColor = verbData.color ? verbData.color : row.rowColor;
rowHtml += `
<div class="bg-slate-800 border-t-4 ${cardColor} rounded-xl p-6 shadow-xl flex flex-col justify-between">
<div>
<h2 class="text-2xl font-bold mb-1">${verbData.group}</h2>
<p class="text-sm text-slate-400 mb-6 italic">Ex: ${verbData.example}</p>
<div class="space-y-6">
`;
verbData.tenses.forEach((tense) => {
rowHtml += `
<div class="bg-slate-900/50 rounded-lg p-3">
<h3 class="text-sm font-semibold text-slate-300 uppercase tracking-wider mb-2 border-b border-slate-700 pb-1">${tense.name}</h3>
`;
if (tense.terms.length === 1) {
rowHtml += `<div class="text-sm text-amber-300 font-mono font-bold">${tense.terms[0]}</div>`;
} else {
let col1Indices = [0, 1, 2];
let col2Indices = [3, 4, 5];
rowHtml += `<div class="grid grid-cols-2 gap-x-3 gap-y-1 text-sm">`;
// Colonne de gauche
rowHtml += `<div class="space-y-1">`;
col1Indices.forEach((i) => {
rowHtml += `
<div class="flex justify-between px-2 py-0.5 rounded bg-slate-800/65">
<span class="text-slate-500 text-xs">${pronouns[i]}</span>
<span class="font-mono font-medium text-slate-200">${tense.terms[i]}</span>
</div>
`;
});
rowHtml += `</div>`;
// Colonne de droite
rowHtml += `<div class="space-y-1">`;
col2Indices.forEach((i) => {
rowHtml += `
<div class="flex justify-between px-2 py-0.5 rounded bg-slate-800/65">
<span class="text-slate-500 text-xs">${pronouns[i]}</span>
<span class="font-mono font-medium text-slate-200">${tense.terms[i]}</span>
</div>
`;
});
rowHtml += `</div>`;
rowHtml += `</div>`;
}
rowHtml += `</div>`;
});
rowHtml += `</div></div></div>`;
});
rowHtml += `</div>`;
container.innerHTML += rowHtml;
});
</script>
</body>
</html>