un autre changements pour la mise en page
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
hatemhellal
295
pages/index.vue
295
pages/index.vue
@@ -1,13 +1,298 @@
|
||||
|
||||
<template>
|
||||
<div class="background">
|
||||
<h1>DÉCLARATION DES DROITS DE L'ÂME ET DU VIVANT</h1>
|
||||
<video controls width="640">
|
||||
<main>
|
||||
|
||||
<video controls width="640">
|
||||
<source src="/videos/video.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<main>
|
||||
<ContentDoc />
|
||||
</main>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user