un autre changements pour la mise en page

assets/main.css

@@ -28,6 +28,9 @@
   float: none;
   clear: none;
   }
+  video {
+    max-width: 80%; /* Occupe tout l'espace sur mobile */
+  }
 }
 
 h2 a {
@@ -51,18 +54,23 @@ h4 a {
  
  
 }
+h4 {
+  margin-block-end: 10rem;
+}
 
 h1 {
   text-align: center;
   color: #6A994E;
   font-size: 2.5em;
-  margin: 20px 0;
+  margin: 50px 0px 0px 50px;
   text-transform: uppercase;}
 p{
   font-weight: normal;
   text-align: justify;
   font-size: 1.1em;
   color:#8B5E3C;
+  margin-block-end: 3rem;
+  
 }
 span{
   display: block;
@@ -76,7 +84,6 @@ video {
   border: 2px solid #474405;
   border-radius: 8px;
   max-width: 100%;  /* Responsive width */
-  max-width: 1200px;
   display: block;   /* Center the video */
   margin: 10px auto;
   width: 100vw; /* Largeur égale à la largeur de la fenêtre */

content/index.md

@@ -1,6 +1,6 @@
 
 
-
+<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>
 <div class ="left">

pages/index.vue

@@ -1,13 +1,298 @@
+
 <template>
   <div class="background">
-    <h1>DÉCLARATION DES DROITS DE L'ÂME ET DU VIVANT</h1>
+    <main>
-    <video controls width="640">
+     
+      <video controls width="640">
       <source src="/videos/video.mp4" type="video/mp4" />
       Your browser does not support the video tag.
     </video>
-  <main>
+      <ContentDoc />
-    <ContentDoc />
+      <section class="forum">
-  </main>
+        <h2>Forum Public</h2>
+        <div v-for="(post, index) in posts" :key="index" class="post">
+          <p><strong>Article {{ post.articleNumber }}:</strong> </p>
+          <div class="actions">
+            <button @click="upvote(index)">👍 {{ post.votes }}</button>
+            <button @click="downvote(index)">👎</button>
+          </div>
+          <textarea v-model="replies[index]" placeholder="Commentaires..."></textarea>
+          <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>
+          </div>
+        </div>
+        <textarea v-model="newPost" placeholder="Ajouter un nouveau message"></textarea>
+        <button @click="addPost">Publier</button>
+      </section>
+      
+<section class="signature">
+  <h2>Signer la Charte</h2>
+  <form @submit.prevent="submitSignature">
+    <input v-model="name" placeholder="Nom complet" required />
+    <input v-model="email" type="email" placeholder="Email" required />
+    <textarea v-model="comment" placeholder="Ajouter un commentaire"></textarea>
+    <button type="submit">Signer</button>
+  </form>
+  <p v-if="signatureSuccess">Merci pour votre signature, {{ name }} !</p>
+  <div v-if="signatures.length">
+    <h3>Signatures enregistrées :</h3>
+    <ul>
+      <li v-for="signature in signatures" :key="signature.email">
+        <strong>{{ signature.name }}</strong> - {{ signature.comment }}
+      </li>
+    </ul>
+  </div>
+</section>
 
+    </main>
   </div>
 </template>
+
+
+<script>
+export default {
+  data() {
+    return {
+  
+      // Forum data
+      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 = "";
+      }
+    },
+    upvote(index) {
+      this.posts[index].votes += 1;
+    },
+    downvote(index) {
+      this.posts[index].votes -= 1;
+    },
+    addReply(index) {
+      if (this.replies[index]?.trim()) {
+        this.posts[index].replies.push(this.replies[index]);
+        this.replies[index] = "";
+      }
+    },
+    submitSignature() {
+      if (this.name && this.email) {
+        this.signatures.push({
+          name: this.name,
+          email: this.email,
+          comment: this.comment,
+        });
+        this.signatureSuccess = true;
+
+        // Clear the input fields after successful submission
+        this.name = "";
+        this.email = "";
+        this.comment = "";
+      } else {
+        alert("Veuillez remplir tous les champs obligatoires !");
+      }
+    },
+  },
+};
+</script>
+
+
+<style scoped>
+.background {
+  padding: 20px;
+}
+.forum {
+  margin: 20px 0;
+}
+.post {
+  border: 1px solid #F5F5F5;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+.replies {
+  margin-top: 10px;
+}
+.signature {
+  margin: 20px 0;
+}
+
+/* Styles généraux */
+.background {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+  background-color: #F5F5F5;
+}
+
+/* Section Forum */
+.forum {
+  margin: 20px 0;
+  padding: 15px;
+  border: 1px solid #474405;
+  border-radius: 8px;
+  background-color: #F5F5F5;
+}
+
+.forum h2 {
+  font-size: 24px;
+  color: #6A994E;
+  margin-bottom: 15px;
+}
+
+.post {
+  border: 1px solid#474405;
+  padding: 10px;
+  border-radius: 6px;
+  margin-bottom: 15px;
+  background-color: #F5F5F5;
+}
+
+.post p {
+  font-size: 16px;
+  color: #474405;
+  margin: 0 0 10px;
+}
+
+.post .actions {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.post .actions button {
+  background-color: #8B5E3C;
+  color: #F5F5F5;
+  border: none;
+  border-radius: 4px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+.post .actions button:hover {
+  background-color: #e6ee0d;
+}
+
+textarea {
+  width: 100%;
+  padding: 8px;
+  margin-top: 5px;
+  font-size: 14px;
+  border: 1px solid #474405;
+  border-radius: 4px;
+  resize: vertical;
+}
+
+button {
+  background-color: #6A994E;
+  color: #F5F5F5;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #218838;
+}
+
+/* Réponses */
+.replies {
+  margin-top: 15px;
+  padding-left: 10px;
+  border-left: 2px solid #8B5E3C;
+}
+
+.replies h4 {
+  font-size: 18px;
+  color: #474405;
+}
+
+.replies ul {
+  padding-left: 15px;
+}
+
+.replies li {
+  font-size: 14px;
+  color: #8B5E3C;
+  margin-bottom: 5px;
+}
+
+/* Section Signatures */
+.signature {
+  margin: 20px 0;
+  padding: 15px;
+  border: 1px solid #474405;
+  border-radius: 8px;
+  background-color:  #F5F5F5;
+}
+
+.signature h2 {
+  font-size: 24px;
+  color: #6A994E;
+  margin-bottom: 15px;
+}
+
+.signature form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.signature input,
+.signature textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #474405;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.signature button {
+  align-self: flex-start;
+}
+
+.signature ul {
+  margin-top: 15px;
+  list-style: none;
+  padding: 0;
+  
+}
+h3{
+  color: #6A994E;
+}
+
+.signature ul li {
+  font-size: 16px;
+  color:#474405;
+  padding: 5px 0;
+  border-bottom: 1px solid #474405;
+}
+
+.signature ul li:last-child {
+  border-bottom: none;
+  
+}
+</style>
+
+