Added vuetify + test button, Added linter and format on save
This commit is contained in:
Dominic Villemure
18
.eslintrc.json
Normal file
18
.eslintrc.json
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:vue/vue3-essential"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": "latest",
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
"vue"
|
||||||
|
],
|
||||||
|
"rules": {}
|
||||||
|
}
|
||||||
25
index.html
25
index.html
@@ -1,13 +1,16 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
<head>
|
||||||
<link rel="icon" href="/favicon.ico">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<title>Vite App</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
</head>
|
<title>Vite App</title>
|
||||||
<body>
|
</head>
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.js"></script>
|
<body>
|
||||||
</body>
|
<div id="app"></div>
|
||||||
</html>
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -1,8 +1,13 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"]
|
"@/*": [
|
||||||
|
"./src/*"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"exclude": ["node_modules", "dist"]
|
"exclude": [
|
||||||
}
|
"node_modules",
|
||||||
|
"dist"
|
||||||
|
]
|
||||||
|
}
|
||||||
1117
package-lock.json
generated
1117
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -12,13 +12,16 @@
|
|||||||
"axios": "^1.6.7",
|
"axios": "^1.6.7",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"vue": "^3.4.15",
|
"vue": "^3.4.15",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5",
|
||||||
|
"vuetify": "^3.5.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^5.0.3",
|
"@vitejs/plugin-vue": "^5.0.3",
|
||||||
"autoprefixer": "^10.4.17",
|
"autoprefixer": "^10.4.17",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-plugin-vue": "^9.22.0",
|
||||||
"postcss": "^8.4.35",
|
"postcss": "^8.4.35",
|
||||||
"tailwindcss": "^3.4.1",
|
"tailwindcss": "^3.4.1",
|
||||||
"vite": "^5.0.11"
|
"vite": "^5.0.11"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<RouterView>
|
<RouterView>
|
||||||
|
|
||||||
|
|
||||||
</RouterView>
|
|
||||||
|
</RouterView>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -1,32 +1,48 @@
|
|||||||
|
/* Arrière-plan de la page */
|
||||||
|
body {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
/* Couleur d'arrière-plan de la page */
|
||||||
|
margin: 0;
|
||||||
|
/* Supprimer les marges par défaut */
|
||||||
|
padding: 0;
|
||||||
|
/* Supprimer les espaces de remplissage par défaut */
|
||||||
|
}
|
||||||
|
|
||||||
/* Arrière-plan de la page */
|
.top-aligned-column {
|
||||||
body {
|
display: flex;
|
||||||
background-color: #f0f0f0; /* Couleur d'arrière-plan de la page */
|
flex-direction: row;
|
||||||
margin: 0; /* Supprimer les marges par défaut */
|
/* Afficher les colonnes en ligne */
|
||||||
padding: 0; /* Supprimer les espaces de remplissage par défaut */
|
justify-content: space-between;
|
||||||
}
|
/* Espacement égal entre les colonnes */
|
||||||
|
align-items: flex-start;
|
||||||
.top-aligned-column {
|
/* Aligner le contenu en haut */
|
||||||
display: flex;
|
min-height: 100vh;
|
||||||
flex-direction: row; /* Afficher les colonnes en ligne */
|
/* Ajustez selon vos besoins */
|
||||||
justify-content: space-between; /* Espacement égal entre les colonnes */
|
padding: 20px;
|
||||||
align-items: flex-start; /* Aligner le contenu en haut */
|
/* Ajouter un espace autour du contenu */
|
||||||
min-height: 100vh; /* Ajustez selon vos besoins */
|
box-sizing: border-box;
|
||||||
padding: 20px; /* Ajouter un espace autour du contenu */
|
/* Inclure le padding dans la hauteur */
|
||||||
box-sizing: border-box; /* Inclure le padding dans la hauteur */
|
overflow-y: auto;
|
||||||
overflow-y: auto; /* Activer le défilement vertical */
|
/* Activer le défilement vertical */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style de la colonne */
|
/* Style de la colonne */
|
||||||
.column {
|
.column {
|
||||||
flex: 1; /* Chaque colonne occupe autant d'espace que possible */
|
flex: 1;
|
||||||
padding: 20px; /* Espacement interne */
|
/* Chaque colonne occupe autant d'espace que possible */
|
||||||
}
|
padding: 20px;
|
||||||
|
/* Espacement interne */
|
||||||
.center-column {
|
}
|
||||||
flex: 1; /* Augmenter la taille de la colonne centrale */
|
|
||||||
background-color: #ffffff; /* Couleur de fond de la colonne */
|
.center-column {
|
||||||
border-radius: 20px; /* Arrondir les coins de la colonne */
|
flex: 1;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ajouter une ombre à la colonne */
|
/* Augmenter la taille de la colonne centrale */
|
||||||
text-align: center; /* Centrer le contenu */
|
background-color: #ffffff;
|
||||||
|
/* Couleur de fond de la colonne */
|
||||||
|
border-radius: 20px;
|
||||||
|
/* Arrondir les coins de la colonne */
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
/* Ajouter une ombre à la colonne */
|
||||||
|
text-align: center;
|
||||||
|
/* Centrer le contenu */
|
||||||
}
|
}
|
||||||
@@ -1,100 +1,115 @@
|
|||||||
<template>
|
<template>
|
||||||
<nav class="py-4 px-8 border-b border-gray-200 bg-custom">
|
<nav class="py-4 px-8 border-b border-gray-200 bg-custom">
|
||||||
<div class="max-w-7xl mx-auto">
|
<div class="max-w-7xl mx-auto">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<div class="menu-left flex items-center">
|
<div class="menu-left flex items-center">
|
||||||
<router-link :to="{ name: 'home' }">
|
<router-link :to="{ name: 'home' }">
|
||||||
<img src="/images/Chevron.png" class="img-small mr-2 logo" alt="Logo">
|
<img src="/images/Chevron.png" class="img-small mr-2 logo" alt="Logo">
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link :to="{ name: 'home' }">
|
<router-link :to="{ name: 'home' }">
|
||||||
<h1 class="textLogo">HUTOPIA</h1>
|
<h1 class="textLogo">HUTOPIA</h1>
|
||||||
|
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="menu-center flex space-x-12">
|
<div class="menu-center flex space-x-12">
|
||||||
<router-link :to="{ name: 'home' }" class="text-green-700">
|
<router-link :to="{ name: 'home' }" class="text-green-700">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-custom">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
stroke="currentColor" class="w-8 h-8 text-custom">
|
||||||
</svg>
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
</router-link>
|
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||||
<router-link :to="{ name: 'contact' }" class="text-green-700">
|
</svg>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-custom">
|
</router-link>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
|
<router-link :to="{ name: 'contact' }" class="text-green-700">
|
||||||
</svg>
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||||
</router-link>
|
stroke="currentColor" class="w-8 h-8 text-custom">
|
||||||
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-custom">
|
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
</svg>
|
||||||
</svg>
|
</router-link>
|
||||||
</router-link>
|
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
|
||||||
</div>
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||||
<div class="menu-right">
|
stroke="currentColor" class="w-8 h-8 text-custom">
|
||||||
<router-link :to="{ name: 'yourprofile' }">
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small" alt="Logo">
|
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||||
</router-link>
|
</svg>
|
||||||
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="menu-right">
|
||||||
|
<router-link :to="{ name: 'yourprofile' }">
|
||||||
|
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small" alt="Logo">
|
||||||
|
</router-link>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="px-8 py-6 bg-gray-100">
|
||||||
|
<router-view />
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
<main class="px-8 py-6 bg-gray-100">
|
<script>
|
||||||
<router-view />
|
export default {
|
||||||
</main>
|
name: 'App',
|
||||||
</template>
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<style>
|
||||||
export default {
|
/* CSS pour ajuster la taille de l'image */
|
||||||
name: 'App',
|
.img-small {
|
||||||
};
|
width: 70px;
|
||||||
</script>
|
height: 70px;
|
||||||
|
}
|
||||||
<style>
|
|
||||||
/* CSS pour ajuster la taille de l'image */
|
.text-custom {
|
||||||
.img-small {
|
color: #000000;
|
||||||
width: 70px;
|
/* Couleur de texte spécifique */
|
||||||
height: 70px;
|
}
|
||||||
}
|
|
||||||
|
/* CSS pour le texte du menu-left */
|
||||||
.text-custom {
|
.menu-left a {
|
||||||
color: #000000; /* Couleur de texte spécifique */
|
color: #000000;
|
||||||
}
|
/* Couleur du texte */
|
||||||
|
font-weight: bold;
|
||||||
/* CSS pour le texte du menu-left */
|
/* Gras */
|
||||||
.menu-left a {
|
text-decoration: none;
|
||||||
color: #000000; /* Couleur du texte */
|
/* Pas de soulignement */
|
||||||
font-weight: bold; /* Gras */
|
font-size: 24px;
|
||||||
text-decoration: none; /* Pas de soulignement */
|
/* Taille de la police en pixels */
|
||||||
font-size: 24px; /* Taille de la police en pixels */
|
}
|
||||||
}
|
|
||||||
|
/* CSS pour le texte des liens du menu-center */
|
||||||
/* CSS pour le texte des liens du menu-center */
|
.menu-center {
|
||||||
.menu-center {
|
display: flex;
|
||||||
display: flex;
|
justify-content: center;
|
||||||
justify-content: center; /* Centrer les éléments horizontalement */
|
/* Centrer les éléments horizontalement */
|
||||||
align-items: center; /* Centrer les éléments verticalement */
|
align-items: center;
|
||||||
flex: 1; /* Utiliser tout l'espace disponible */
|
/* Centrer les éléments verticalement */
|
||||||
}
|
flex: 1;
|
||||||
|
/* Utiliser tout l'espace disponible */
|
||||||
/* CSS pour le texte du menu-right */
|
}
|
||||||
.menu-right a {
|
|
||||||
color: #e4e4e4; /* Couleur du texte */
|
/* CSS pour le texte du menu-right */
|
||||||
}
|
.menu-right a {
|
||||||
|
color: #e4e4e4;
|
||||||
.bg-custom {
|
/* Couleur du texte */
|
||||||
background-color: #ffffff; /* Définissez la couleur de fond souhaitée */
|
}
|
||||||
}
|
|
||||||
|
.bg-custom {
|
||||||
.textLogo{
|
background-color: #ffffff;
|
||||||
font-size: 35px; /* Taille de la police en pixels */
|
/* Définissez la couleur de fond souhaitée */
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.textLogo {
|
||||||
margin-right: 5px; /* Réduire la marge entre le logo et le texte */
|
font-size: 35px;
|
||||||
|
/* Taille de la police en pixels */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
</style>
|
margin-right: 5px;
|
||||||
|
/* Réduire la marge entre le logo et le texte */
|
||||||
|
|
||||||
|
}</style>
|
||||||
|
|
||||||
21
src/main.js
21
src/main.js
@@ -1,17 +1,26 @@
|
|||||||
import './assets/main.css'
|
import './assets/main.css'
|
||||||
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
|
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
import '@mdi/font/css/materialdesignicons.css'
|
||||||
|
import 'vuetify/styles'
|
||||||
|
import { createVuetify } from 'vuetify'
|
||||||
|
import * as components from 'vuetify/components'
|
||||||
|
import * as directives from 'vuetify/directives'
|
||||||
|
|
||||||
axios.defaults.baseURL = 'http://127.0.0.1:8000'
|
const vuetify = createVuetify({
|
||||||
|
components,
|
||||||
|
directives
|
||||||
|
});
|
||||||
|
|
||||||
const app = createApp(App)
|
axios.defaults.baseURL = 'http://127.0.0.1:8000';
|
||||||
|
|
||||||
app.use(createPinia())
|
const app = createApp(App);
|
||||||
app.use(router, axios)
|
|
||||||
|
app.use(createPinia());
|
||||||
|
app.use(vuetify);
|
||||||
|
app.use(router, axios);
|
||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|||||||
@@ -14,17 +14,17 @@ const router = createRouter({
|
|||||||
component: HomeView
|
component: HomeView
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path:'/creatorfolio',
|
path: '/creatorfolio',
|
||||||
name: 'creatorfolio',
|
name: 'creatorfolio',
|
||||||
component: CreatorFolio
|
component: CreatorFolio
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path:'/yourprofile',
|
path: '/yourprofile',
|
||||||
name: 'yourprofile',
|
name: 'yourprofile',
|
||||||
component: YourProfile
|
component: YourProfile
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path:'/contact',
|
path: '/contact',
|
||||||
name: 'contact',
|
name: 'contact',
|
||||||
component: ContactView
|
component: ContactView
|
||||||
},
|
},
|
||||||
@@ -38,7 +38,7 @@ const router = createRouter({
|
|||||||
name: 'login',
|
name: 'login',
|
||||||
component: LoginView
|
component: LoginView
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,45 +1,46 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="max-w-7x1 max-auto grid grid-cols-2 gap-4">
|
<div class="max-w-7x1 max-auto grid grid-cols-2 gap-4">
|
||||||
<div class="main-left">
|
<div class="main-left">
|
||||||
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
||||||
<h1 class="mb-6 text-2xl font-bold">Log in</h1>
|
<h1 class="mb-6 text-2xl font-bold">Log in</h1>
|
||||||
|
|
||||||
<p class = "mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
|
<p class="mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||||
|
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
|
||||||
|
took a galley of type and scrambled it to make a type specimen book. It has survived not only five
|
||||||
|
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
|
||||||
|
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
|
||||||
|
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
|
||||||
|
|
||||||
<p class = "font-bold"> Don't have an account ? <RouterLink :to="{'name': 'signup'}" class="underline">Click here</RouterLink> to create one! </p>
|
<p class="font-bold"> Don't have an account ? <RouterLink :to="{ 'name': 'signup' }" class="underline">Click
|
||||||
|
here</RouterLink> to create one! </p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="main-right">
|
<div class="main-right">
|
||||||
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
||||||
<form class="space-y-6">
|
<form class="space-y-6">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label>E-mail</label> <br>
|
||||||
|
<input type="email" placeholder="Your e-mail adress"
|
||||||
|
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label>Password</label> <br>
|
||||||
|
<input type="password" placeholder="Your password"
|
||||||
|
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label>E-mail</label> <br>
|
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg"> Log in</button>
|
||||||
<input type="email" placeholder="Your e-mail adress" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
</div>
|
||||||
|
|
||||||
</div>
|
</form>
|
||||||
|
</div>
|
||||||
<div>
|
|
||||||
<label>Password</label> <br>
|
|
||||||
<input type="password" placeholder="Your password" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg"> Log in</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,46 +1,56 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="max-w-7x1 max-auto grid grid-cols-2 gap-4">
|
<div class="max-w-7x1 max-auto grid grid-cols-2 gap-4">
|
||||||
<div class="main-left">
|
<div class="main-left">
|
||||||
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
||||||
<h1 class="mb-6 text-2xl font-bold">Sign up</h1>
|
<h1 class="mb-6 text-2xl font-bold">Sign up</h1>
|
||||||
|
|
||||||
<p class = "mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
|
<p class="mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||||
|
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
|
||||||
|
took a galley of type and scrambled it to make a type specimen book. It has survived not only five
|
||||||
|
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
|
||||||
|
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
|
||||||
|
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
|
||||||
|
|
||||||
<p class = "font-bold"> Already have an account ? <RouterLink :to="{'name': 'login'}" class="underline">Click here</RouterLink> to log in! </p>
|
<p class="font-bold"> Already have an account ? <RouterLink :to="{ 'name': 'login' }" class="underline">Click
|
||||||
|
here</RouterLink> to log in! </p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="main-right">
|
<div class="main-right">
|
||||||
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
||||||
<form class="space-y-6">
|
<form class="space-y-6">
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label>Name</label> <br>
|
<label>Name</label> <br>
|
||||||
<input type="text" placeholder="Your full name" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
<input type="text" placeholder="Your full name"
|
||||||
|
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label>E-mail</label> <br>
|
<label>E-mail</label> <br>
|
||||||
<input type="email" placeholder="Your e-mail adress" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
<input type="email" placeholder="Your e-mail adress"
|
||||||
|
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label>Password</label> <br>
|
<label>Password</label> <br>
|
||||||
<input type="password" placeholder="Your password" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
<input type="password" placeholder="Your password"
|
||||||
|
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label>Repeat Password</label> <br>
|
<label>Repeat Password</label> <br>
|
||||||
<input type="password" placeholder="Repeat your password" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
<input type="password" placeholder="Repeat your password"
|
||||||
|
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg"> Sign up</button>
|
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg"> Sign up</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -49,8 +59,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
|
</div></template>
|
||||||
@@ -1,28 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<DefaultLayout></DefaultLayout>
|
<DefaultLayout></DefaultLayout>
|
||||||
<main class="top-aligned-column">
|
<main class="top-aligned-column">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="center-column column">
|
||||||
|
<p>Contact2</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
<div class="column">
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="center-column column">
|
|
||||||
<p>Contact2</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,23 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<DefaultLayout></DefaultLayout>
|
<DefaultLayout></DefaultLayout>
|
||||||
<main class="top-aligned-column">
|
<main class="top-aligned-column">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="center-column column">
|
||||||
|
<p>CreatorFolio YOOOOOOO</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
<div class="column">
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||||
|
</script>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="center-column column">
|
|
||||||
<p>CreatorFolio YOOOOOOO</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,25 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<DefaultLayout></DefaultLayout>
|
<DefaultLayout></DefaultLayout>
|
||||||
|
|
||||||
<main class="top-aligned-column">
|
<main class="top-aligned-column">
|
||||||
|
|
||||||
|
|
||||||
<div class="column">
|
<div class="column">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="center-column column">
|
<div class="center-column column">
|
||||||
<p>Home</p>
|
<p>Home</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column">
|
<div class="column">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<v-btn variant="outlined">
|
||||||
|
Button
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,24 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<DefaultLayout></DefaultLayout>
|
<DefaultLayout></DefaultLayout>
|
||||||
<main class="top-aligned-column">
|
<main class="top-aligned-column">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="center-column column">
|
||||||
|
<p>YourProfile</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
<div class="column">
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||||
|
</script>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="center-column column">
|
|
||||||
<p>YourProfile</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user