ajouter les fonctions add ,edit,remove article

assets/main.css

@@ -29,8 +29,22 @@
   clear: none;
   }
   video {
-    max-width: 80%; /* Occupe tout l'espace sur mobile */
+  max-width: 100%;  /* Responsive width */
+  margin: 0 auto;
+  max-height: 250px; /* Réduit davantage la hauteur sur les petits écrans */
+ 
+  
   }
+  p{
+    margin-block-end: 5rem;
+    
+  }
+  span{
+    line-height: 1.8;
+    margin: 0cm 0.2cm 0cm 0.2cm;
+   
+  }
+ 
 }
 
 h2 a {
@@ -44,7 +58,14 @@ h2 a {
   
 }
 
+h3 a {
+  color: #8B5E3C;
+  text-decoration: none; /* Retire le lien visuel */
+  pointer-events: none;  /* Désactive l'interaction du lien */
+  margin-block-end: 3rem;
+  font-size: 1em;
 
+}
 h4 a {
   color: #8B5E3C;
   text-decoration: none; /* Retire le lien visuel */

content/index.md

@@ -1,8 +1,8 @@
 
 
 <h1>DÉCLARATION DES DROITS DE L'ÂME ET DU VIVANT</h1>
-<h4><span>Nous, Humains, Libres et avant tout Vivant, meneurs de notre propre représentativité considérant que le gouvernement "contrôle mental" ou le mépris des droits de l'Âme et du Vivant sont les causes majeurs des malheurs et de la corruption terrestre, constituons et ratifions solennellement les droits naturels, inaliénables et sacrés de l'Âme et du Vivant (DAV), afin que cette déclaration portée à la connaissance de toutes et chacun, rappelle les droits et les devoirs ; afin que les choix législatif et les actes qui en découlent déployés et appliqués par des superviseurs temporaires, élus selon le code d'éthique et de déontologie des Libres soient respectés ; afin que les textes de lois écrits et ratifiés par les Vivants, fondées sur les droits naturels inaliénables et imprescriptibles garantissent le maintien de la constitution des Vivants et assurent le bien-être de toute forme de vie du micro et du macrocosme.</span></h4>
-<h4><span>En conséquence, les Libres, Vivants d'ici et d'ailleurs reconnaissent, en présence et sous les auspices des forces cosmiques, la légitimité et le respect nécessaire des droits de l'âme et du Vivant.</span></h4>
+<h3><span>Nous, Humains, Libres et avant tout Vivant, meneurs de notre propre représentativité considérant que le gouvernement "contrôle mental" ou le mépris des droits de l'Âme et du Vivant sont les causes majeurs des malheurs et de la corruption terrestre, constituons et ratifions solennellement les droits naturels, inaliénables et sacrés de l'Âme et du Vivant (DAV), afin que cette déclaration portée à la connaissance de toutes et chacun, rappelle les droits et les devoirs ; afin que les choix législatif et les actes qui en découlent déployés et appliqués par des superviseurs temporaires, élus selon le code d'éthique et de déontologie des Libres soient respectés ; afin que les textes de lois écrits et ratifiés par les Vivants, fondées sur les droits naturels inaliénables et imprescriptibles garantissent le maintien de la constitution des Vivants et assurent le bien-être de toute forme de vie du micro et du macrocosme.</span></h3>
+<h3><span>En conséquence, les Libres, Vivants d'ici et d'ailleurs reconnaissent, en présence et sous les auspices des forces cosmiques, la légitimité et le respect nécessaire des droits de l'âme et du Vivant.</span></h3>
 <div class ="left">
 <h2><span>Article 1. Reconnaissance universelle de l'Âme et des formes de vie</span></h2>
 <p>

nuxt.config.ts

@@ -1,8 +1,9 @@
 export default defineNuxtConfig({
   css: ['./assets/main.css'],
+
   modules: [
     '@nuxt/content'
   ],
- 
-})
 
+  compatibilityDate: '2024-12-12',
+})

pages/index.vue

@@ -1,17 +1,56 @@
-
 <template>
   <div class="background">
-    <main>
-     
+     <main>
       <video controls width="640">
-      <source src="/videos/video.mp4" type="video/mp4" />
-      Your browser does not support the video tag.
-    </video>
+        <source src="/videos/video.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
       <ContentDoc />
+      <div id="app">
+        <h2>Ajouter un nouvel article</h2>
+        <form @submit.prevent="addArticle">
+          <div>
+            <label for="title">Titre :</label>
+            <input type="text" id="title" v-model="newArticle.title" required />
+          </div>
+          <div>
+            <label for="content">Contenu :</label>
+            <textarea id="content" v-model="newArticle.content" required></textarea>
+          </div>
+          <button type="submit">Ajouter l'article</button>
+        </form>
+
+        <h2> Nouveaux Articles </h2>
+        <!-- Liste des articles -->
+        <div v-for="(article, index) in articles" :key="index" class="article">
+          <h3>{{ article.title }}</h3>
+          <p>{{ article.content }}</p>
+          <button @click="editArticle(index)">Modifier</button>
+          <button @click="deleteArticle(index)">Supprimer</button>
+        </div>
+
+        <!-- Formulaire de modification -->
+        <div v-if="isEditing" class="edit-form">
+          <h2>Modifier l'article</h2>
+          <form @submit.prevent="updateArticle">
+            <div>
+              <label for="edit-title">Titre :</label>
+              <input type="text" id="edit-title" v-model="currentArticle.title" required />
+            </div>
+            <div>
+              <label for="edit-content">Contenu :</label>
+              <textarea id="edit-content" v-model="currentArticle.content" required></textarea>
+            </div>
+            <button type="submit">Mettre à jour</button>
+          </form>
+        </div>
+      </div>
+
       <section class="forum">
         <h2>Forum Public</h2>
+        <!-- Forum content -->
         <div v-for="(post, index) in posts" :key="index" class="post">
-          <p><strong>Article {{ post.articleNumber }}:</strong> </p>
+          <p><strong>Article {{ post.articleNumber }}:</strong></p>
           <div class="actions">
             <button @click="upvote(index)">👍 {{ post.votes }}</button>
             <button @click="downvote(index)">👎</button>
@@ -20,16 +59,15 @@
           <button @click="addReply(index)">Commenter</button>
           <div v-if="post.replies.length > 0" class="replies">
             <h4>Commentaires :</h4>
-            <ul>
-              <li v-for="(reply, rIndex) in post.replies" :key="rIndex">{{ reply }}</li>
+            <ul class="no-spacing">
+              <li v-for="(reply, rIndex) in post.replies" :key="rIndex">
+                {{ reply.content }} - <em>{{ reply.date }}</em>
+              </li>
             </ul>
           </div>
         </div>
-        <textarea v-model="newPost" placeholder="Ajouter un nouveau message"></textarea>
-        <button @click="addPost">Publier</button>
       </section>
-      
-<section class="signature">
+      <section class="signature">
   <h2>Signer la Charte</h2>
   <form @submit.prevent="submitSignature">
     <input v-model="name" placeholder="Nom complet" required />
@@ -42,58 +80,81 @@
     <h3>Signatures enregistrées :</h3>
     <ul>
       <li v-for="signature in signatures" :key="signature.email">
-        <strong>{{ signature.name }}</strong> - {{ signature.comment }}
+        <strong>{{ signature.name }}</strong> - {{ signature.comment }} - <em>{{ signature.date }}</em>
       </li>
     </ul>
   </div>
 </section>
-
     </main>
   </div>
 </template>
 
-
 <script>
 export default {
   data() {
     return {
-  
-      // Forum data
+      newArticle: { title: "", content: "" },
+      articles: [],
+      isEditing: false,
+      currentArticle: null,
+      currentArticleIndex: null,
       posts: Array.from({ length: 20 }, (_, i) => ({
         articleNumber: i + 1,
         votes: 0,
         replies: [],
       })),
-      newPost: "",
       replies: [],
-      name: "",
-      email: "",
-      comment: "",
       signatures: [], // Initialize signatures as an empty array
       signatureSuccess: false,
     };
   },
   methods: {
-    addPost() {
-      if (this.newPost.trim()) {
-        this.posts.push({
-          articleNumber: this.posts.length + 1,
-          content: this.newPost,
-          votes: 0,
-          replies: [],
-        });
-        this.newPost = "";
+    addArticle() {
+      if (this.newArticle.title && this.newArticle.content) {
+        this.articles.push({ ...this.newArticle });
+        this.newArticle.title = "";
+        this.newArticle.content = "";
+      } else {
+        alert("Veuillez remplir tous les champs.");
       }
     },
+    deleteArticle(index) {
+      this.articles.splice(index, 1);
+    },
+    editArticle(index) {
+      this.isEditing = true;
+      this.currentArticleIndex = index;
+      this.currentArticle = { ...this.articles[index] };
+    },
+    updateArticle() {
+      if (this.currentArticle && this.currentArticle.title && this.currentArticle.content) {
+        // Met à jour l'article dans la liste
+        this.articles[this.currentArticleIndex] = { ...this.currentArticle };
+        // Réinitialise les variables
+        this.isEditing = false;
+        this.currentArticle = null;
+        this.currentArticleIndex = null;
+      } else {
+        alert("Veuillez remplir tous les champs avant de mettre à jour.");
+      }
+    },
+    cancelEdit() {
+      this.isEditing = false;
+      this.currentArticle = null;
+      this.currentArticleIndex = null;
+    },
     upvote(index) {
-      this.posts[index].votes += 1;
+      this.posts[index].votes++;
     },
     downvote(index) {
-      this.posts[index].votes -= 1;
+      this.posts[index].votes--;
     },
     addReply(index) {
       if (this.replies[index]?.trim()) {
-        this.posts[index].replies.push(this.replies[index]);
+        this.posts[index].replies.push({
+          content: this.replies[index],
+          date: new Date().toLocaleString(),
+        });
         this.replies[index] = "";
       }
     },
@@ -103,6 +164,7 @@ export default {
           name: this.name,
           email: this.email,
           comment: this.comment,
+          date: new Date().toLocaleString(),
         });
         this.signatureSuccess = true;
 
@@ -118,14 +180,19 @@ export default {
 };
 </script>
 
-
 <style scoped>
-.background {
-  padding: 20px;
+.article {
+  margin-bottom: 20px;
+  margin: 20px ;
 }
-.forum {
-  margin: 20px 0;
+.edit-form {
+  margin-top: 20px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #f9f9f9;
 }
+
 .post {
   border: 1px solid #F5F5F5;
   padding: 10px;
@@ -152,6 +219,7 @@ export default {
   border: 1px solid #474405;
   border-radius: 8px;
   background-color: #F5F5F5;
+  margin-bottom: 5cm;
 }
 
 .forum h2 {
@@ -224,6 +292,7 @@ button:hover {
 }
 
 .replies h4 {
+margin-bottom: 5px;
   font-size: 18px;
   color: #474405;
 }
@@ -244,7 +313,8 @@ button:hover {
   padding: 15px;
   border: 1px solid #474405;
   border-radius: 8px;
-  background-color:  #F5F5F5;
+  background-color: #F5F5F5;
+  margin-bottom: 1cm;
 }
 
 .signature h2 {
@@ -293,6 +363,65 @@ h3{
   border-bottom: none;
   
 }
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #6A994E;
+  margin-top: 4cm;
+  border: 1px solid #474405;
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 5cm;
+ 
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  color: #474405;
+  
+}
+input,
+textarea {
+  padding: 8px;
+  margin-bottom: 10px;
+  width: 100%;
+  margin-top: 5px;
+  font-size: 10px;
+  resize: vertical;
+ 
+  
+}
+button {
+  padding: 10px 20px;
+  background-color: #6A994E;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #218838;
+}
+form {
+  margin: 20px 0;
+  padding: 15px;
+  border: 1px solid #474405;
+  border-radius: 8px;
+  background-color: #F5F5F5;
+  margin-bottom: 1cm;
+  
+ }
+ h3{
+  color: #474405;
+ }
+ button {
+  margin-right: 10px; /* Espace à droite du bouton */
+}
+
+/* Exemple spécifique pour le deuxième bouton */
+button:last-child {
+  margin-right: 0; /* Pas d'espace après le dernier bouton */
+}
 </style>