diff --git a/frontend/src/assets/avatar.jpg b/frontend/src/assets/avatar.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..673c4d298876447fc01c6cb7cc3f92709ca9b9d8
Binary files /dev/null and b/frontend/src/assets/avatar.jpg differ
diff --git a/frontend/src/assets/avion.png b/frontend/src/assets/avion.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5f02cf6f85527bc5f370a6f9ab963f5002c1d4a
Binary files /dev/null and b/frontend/src/assets/avion.png differ
diff --git a/frontend/src/assets/blog2.jpg b/frontend/src/assets/blog2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..012c41eca7322192b72cc1ef6ef4e3ca8eaca8dd
Binary files /dev/null and b/frontend/src/assets/blog2.jpg differ
diff --git a/frontend/src/components/acc.vue b/frontend/src/components/acc.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b29426f2c6af78efe27b76389178f56a75d41ecd
--- /dev/null
+++ b/frontend/src/components/acc.vue
@@ -0,0 +1,56 @@
+<template>
+ <nav>
+
+ <div class="menu-item"><a href="/signup">inscription</a></div>
+ <div class="menu-item"><a href="/login">connexion</a></div>
+
+ </nav>
+
+</template>
+
+<script>
+
+
+export default {
+ name : "navbar",
+ components: { },
+
+
+}
+</script>
+
+<style>
+
+
+
+nav {
+ width: 100%;
+ background-color: black;
+ padding: 25px;
+
+ display: flex;
+ align-items: end;
+ justify-content: end;
+}
+
+nav .menu-item {
+ color: white;
+ padding : 5px 50px;
+ position :relative;
+ display : flex;
+ transition: 0.4s;
+ text-align: center;
+ border-bottom: 3px solid transparent;
+}
+
+nav .menu-item a {
+ color: inherit;
+ text-decoration: none ;
+}
+
+nav .menu-item.active,
+nav .menu-item:hover {
+ background-color: #444;
+ border-bottom-color: #FF5858;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/footer.vue b/frontend/src/components/footer.vue
index d64692ff67cba313f70451c433b00069f9a63265..01cff9a65b2beadf1703385145a1f9636e376536 100644
--- a/frontend/src/components/footer.vue
+++ b/frontend/src/components/footer.vue
@@ -8,7 +8,7 @@
>
- {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
+ {{ new Date().getFullYear() }} — <strong>Your!blog</strong>
</v-col>
</v-card>
</v-footer>
diff --git a/frontend/src/components/navbar.vue b/frontend/src/components/navbar.vue
index e4ea46b274c34d9cd59ea367acb77cccff747df8..797f67d9c4009d1d3f72d2b95ba4af584ea6adb6 100644
--- a/frontend/src/components/navbar.vue
+++ b/frontend/src/components/navbar.vue
@@ -51,7 +51,7 @@ nav {
nav .menu-item {
color: white;
- padding : 10px 50px;
+ padding : 5px 50px;
position :relative;
display : flex;
transition: 0.4s;
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index b901fa4d875e6c6213e43ec3fdcf5dea574c672f..1a7a7e05f19e44400108d2a7e7a4135a1f036758 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -2,6 +2,11 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '../views/home.vue'
import article from '../views/article.vue'
+import acceuil from '../views/acceuil.vue'
+import login from '../views/login.vue'
+import signup from '../views/sign_up.vue'
+import info from '../views/info.vue'
+import add_article from '../views/ajout_article.vue'
Vue.use(VueRouter)
// eslint-disable-next-line
@@ -15,11 +20,39 @@ const routes = [
},
{
- path: '/article',
+ path: '/my_article',
name: 'article',
component: article
},
+
+ {
+ path: '/',
+ name: 'acceuil',
+ component: acceuil
+ },
+ {
+ path: '/login',
+ name: 'login',
+ component: login
+ },
+ {
+ path: '/signup',
+ name: 'signup',
+ component: signup
+ },
+
+ {
+ path: '/info',
+ name: 'info',
+ component: info
+ },
+
+ {
+ path: '/add_article',
+ name: 'add_article',
+ component: add_article
+ },
]
diff --git a/frontend/src/views/acceuil.vue b/frontend/src/views/acceuil.vue
new file mode 100644
index 0000000000000000000000000000000000000000..75fe6f8c6af2d34c2602be7ccdba83b0c937bd33
--- /dev/null
+++ b/frontend/src/views/acceuil.vue
@@ -0,0 +1,54 @@
+<template>
+<v-app>
+ <v-main>
+ <div class="top1">
+ <Navbar/>
+ </div>
+ <div class="top2">
+ <v-img
+ src="../assets/blog.jpg"
+ max-height="900"
+ max-width="100%"
+
+
+ >
+
+ </v-img>
+
+
+ </div>
+ </v-main>
+
+ <Footer/>
+
+</v-app>
+
+</template>
+
+<script>
+import Footer from '../components/footer.vue'
+import Navbar from '../components/acc.vue'
+export default {
+ components: { Footer,
+ Navbar },
+ data () {
+
+ }
+
+}
+</script>
+
+<style>
+.top1 {
+ position: relative;
+ z-index: 2;
+}
+.top2 {
+ position: relative;
+ z-index: 1;
+}
+
+
+
+
+</style>
diff --git a/frontend/src/views/ajout_article.vue b/frontend/src/views/ajout_article.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d950cc9752e2e308ec6152244bf846a7b523cf75
--- /dev/null
+++ b/frontend/src/views/ajout_article.vue
@@ -0,0 +1,90 @@
+<template>
+<v-app>
+ <v-main>
+ <div class="top1">
+ <Navbar/>
+ </div>
+ <div class="top2">
+ <v-img
+ src="../assets/blog2.jpg"
+ max-height="200"
+ max-width="100%"
+ >
+ </v-img>
+ </div>
+ </v-main>
+ <v-card
+ width="80%"
+ class="mx-auto my-15">
+ <v-img
+ height="150"
+ src="../assets/blog.jpg">
+
+ </v-img>
+ <v-card-title>Fascine nous avec ta créativité ! </v-card-title>
+ <v-card-text>
+ <v-form>
+ <v-text-field label="Titre pour ton blog" v-model="object.nom" required :rules="[v => !!v || 'veuillez saisir votre nom']"></v-text-field>
+
+ <v-container fluid>
+ <v-textarea
+ clearable
+ clear-icon="mdi-close-circle"
+ label="Allez, balance tes idées !"
+ value="You can do it"
+ ></v-textarea>
+ </v-container>
+
+
+
+
+ </v-form>
+ </v-card-text>
+ <v-card-actions>
+ <v-btn outlined color="orange" @click="ajouter_article()">
+ <v-icon >mdi-plus</v-icon>
+
+ <span>Ajouter article</span>
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ <Footer/>
+</v-app>
+</template>
+
+<script>
+
+import router from '../router/index'
+import Footer from '../components/footer.vue'
+import Navbar from '../components/navbar.vue'
+export default {
+ name: "signup",
+ components: {Navbar, Footer},
+ data(){
+ return {
+ object: {
+
+ nom : '',
+ prenom : '',
+ email: '',
+ password: '',
+ type_profil: ''
+ }
+ }
+ },
+
+
+
+}
+</script>
+
+<style>
+.top1 {
+ position: relative;
+ z-index: 2;
+}
+.top2 {
+ position: relative;
+ z-index: 1;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/article.vue b/frontend/src/views/article.vue
index 84563bf384bada52126d263e64e3371d3f652025..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/frontend/src/views/article.vue
+++ b/frontend/src/views/article.vue
@@ -1,19 +0,0 @@
-<template>
- <div id="app">
- <header>
- <navbar/>
- </header>
-
- </div>
-</template>
-
-<script>
-
-import navbar from '../components/navbar.vue'
-export default {
-components : {
- navbar
-},
-}
-</script>
-
diff --git a/frontend/src/views/home.vue b/frontend/src/views/home.vue
index afbb68543295630cbe8c9c3a7ff3a1b248a949f7..4b84d9694193bdde5a9162be774092290acadb80 100644
--- a/frontend/src/views/home.vue
+++ b/frontend/src/views/home.vue
@@ -1,16 +1,75 @@
<template>
<v-app>
<v-main>
+ <div class="top1">
<Navbar/>
- </v-main>
-<v-img v-if="yes"
- src="../assets/blog.jpg"
+ </div>
+ <div class="top2">
+ <v-img
+ src="../assets/blog2.jpg"
max-height="200"
max-width="100%"
-
-
>
</v-img>
+ </div>
+ </v-main>
+
+ <v-card
+ :loading="loading"
+ class="mx-auto my-12"
+ max-width = "375"
+ >
+ <template >
+ <v-progress-linear
+ color="black"
+ height="5"
+
+ >
+
+ </v-progress-linear>
+
+ </template>
+
+ <v-img
+ height="250"
+ src="../assets/avion.png">
+
+ </v-img>
+
+ <v-card-title>Article 1</v-card-title>
+ <v-divider class="mx-4"></v-divider>
+ <v-card-text>
+ <v-row
+ align="center"
+ class="mx-0"
+ >
+
+
+
+ </v-row>
+
+ <div class="my-4 text-subtitle-1">
+ $ • Machin Machin
+ </div>
+
+ <div>machin machin machin machin machin machin machin machin machin machin machin machin machin machin</div>
+ </v-card-text>
+ <v-divider class="mx-4"></v-divider>
+ <v-card-actions>
+ <v-btn
+ color="deep-purple lighten-2"
+ text
+ @click="reserve"
+ >
+ Lire article
+ </v-btn>
+ </v-card-actions>
+
+
+
+
+ </v-card>
+
<Footer/>
</v-app>
@@ -23,16 +82,18 @@ import Navbar from '../components/navbar.vue'
export default {
components: { Footer,
Navbar },
- data () {
- return {yes : true}
- }
+
}
</script>
<style>
-
-
-
-
+.top1 {
+ position: relative;
+ z-index: 2;
+}
+.top2 {
+ position: relative;
+ z-index: 1;
+}
</style>
diff --git a/frontend/src/views/info.vue b/frontend/src/views/info.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/frontend/src/views/login.vue b/frontend/src/views/login.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2a84bc97209b18a208909656f1136755f12887a
--- /dev/null
+++ b/frontend/src/views/login.vue
@@ -0,0 +1,95 @@
+<template>
+<v-app>
+ <v-img
+ src="../assets/blog2.jpg"
+ max-height="100"
+ max-width="100%"
+
+
+ >
+
+ </v-img>
+
+ <v-card
+ class="mx-auto my-15"
+ width = "30%"
+ >
+ <template >
+ <v-progress-linear
+ color="black"
+ height="5"
+ indeterminate
+ >
+
+ </v-progress-linear>
+
+ </template>
+ <v-img
+ height="150"
+ src="../assets/blog.jpg">
+
+ </v-img>
+ <v-card-title>Connexion</v-card-title>
+ <v-card-text>
+ <v-form>
+ <v-text-field
+ label="Email"
+ v-model="object.email"
+ required
+ :rules="[(v) => !!v || 'veuillez saisir votre adresse email']"
+ type="email"
+ ></v-text-field>
+ <v-text-field
+ label="mot_de_passe"
+ v-model="object.password"
+ type="password"
+ required
+ :rules="[(v) => !!v || 'veuillez saisir votre mot de passe']"
+ ></v-text-field>
+ <p>{{ email }}{{ password }}</p>
+ </v-form>
+ </v-card-text>
+ <v-card-actions>
+ <v-btn outlined color="orange" @click="login()">
+ <v-icon> mdi-login</v-icon>
+ <span>Se Connecter</span>
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ <Footer/>
+ </v-app>
+
+</template>
+
+<script>
+// @ is an alias to /src
+
+
+import router from '../router/index'
+import Footer from '../components/footer.vue'
+import Navbar from '../components/navbar.vue';
+//import Navbar from '../components/Navbar.vue'
+export default {
+ components: {
+
+ Footer,
+ Navbar
+ },
+
+ data() {
+
+ return {
+ object : {
+ email: "",
+ password: "",
+ type_profil:""
+ }
+
+ };
+
+
+ },
+
+};
+</script>
+<style></style>
diff --git a/frontend/src/views/sign_up.vue b/frontend/src/views/sign_up.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0e5e3367bc285a1b37b30ca20a5be73ee80caaa5
--- /dev/null
+++ b/frontend/src/views/sign_up.vue
@@ -0,0 +1,72 @@
+<template>
+<v-app>
+ <v-img
+ src="../assets/blog2.jpg"
+ max-height="100"
+ max-width="100%"
+
+
+ >
+
+ </v-img>
+ <v-card
+ width="80%"
+ class="mx-auto my-15">
+ <v-img
+ height="150"
+ src="../assets/blog.jpg">
+
+ </v-img>
+ <v-card-title>Inscription </v-card-title>
+ <v-card-text>
+ <v-form>
+ <v-text-field label="nom" v-model="object.nom" required :rules="[v => !!v || 'veuillez saisir votre nom']"></v-text-field>
+ <v-text-field label="prenom" v-model="object.prenom" required :rules="[v => !!v || 'veuillez saisir votre prenom']"></v-text-field>
+ <v-text-field label="Email" v-model="object.email" required :rules="[v => !!v || 'veuillez saisir votre adresse email']"></v-text-field>
+ <v-text-field label="mot_de_passe" v-model="object.password" type="password" required :rules="[v => !!v || 'veuillez saisir votre mot de passe']"></v-text-field>
+ <v-text-field label="confirmation mot de passe" v-model="object.password" type="password" required :rules="[v => !!v || 'veuillez saisir le meme mot de passe']"></v-text-field>
+
+
+ </v-form>
+ </v-card-text>
+ <v-card-actions>
+ <v-btn outlined color="orange" @click="inscrire()">
+ <v-icon >mdi-plus</v-icon>
+
+ <span>S'inscrire</span>
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ <Footer/>
+</v-app>
+</template>
+
+<script>
+
+import router from '../router/index'
+import Footer from '../components/footer.vue'
+import Navbar from '../components/navbar.vue'
+export default {
+ name: "signup",
+ components: {Navbar, Footer},
+ data(){
+ return {
+ object: {
+
+ nom : '',
+ prenom : '',
+ email: '',
+ password: '',
+ type_profil: ''
+ }
+ }
+ },
+
+
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file