DAV/pages/index.vue

<template>
  <div class="background">
    <main>
     
      <video controls width="640">
      <source src="/videos/video.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
      <ContentDoc />
      <section class="forum">
        <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>