jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modifications ajouter d'éléments dans Signup + login view modification basic

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-20 00:55:47 -04:00
parent 40505f0dcf
commit e80bfff3a0
3 changed files with 76 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/views/SignupView.vue
View File

@@ -1,65 +1,73 @@
<template>
<div class="max-w-7x1 max-auto grid grid-cols-2 gap-4">
<div class="main-left">
<div class="p-12 bg-white border border-gray-200 rounded-lg">
<h1 class="mb-6 text-2xl font-bold">Sign up</h1>
<v-app style="background-color: #f4f4f4;">
<DefaultLayout></DefaultLayout>
<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>
</div>
</div>
<div class="main-right">
<div class="p-12 bg-white border border-gray-200 rounded-lg">
<form class="space-y-6">
<div>
<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">
</div>
<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>
<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">
</div>
<div>
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg"> Sign up</button>
</div>
<v-row>
<v-col cols=6 align="center">
<v-img class="login-picture" max-width="500" src=" ../../images/hutopyblack.png"
style="margin-top: 100px; margin-bottom: 50px"></v-img>
<div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
<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="font-bold">
Already have an account?
<RouterLink :to="{ 'name': 'login' }" class="underline">Click here</RouterLink> to log in!
</p>
</div>
</v-col>
<v-col cols="6" sm="6" md="6" lg="6">
<div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
<form class="space-y-6">
<div>
<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">
</div>
<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>
<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">
</div>
<div>
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg">Sign up</button>
</div>
</form>
</div>
</v-col>
</v-row>
<FooterLayout></FooterLayout>
</v-app>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import { RouterLink } from "vue-router";
import FooterLayout from '@/layouts/FooterLayout.vue';
</script>
</form>
</div>
</div>
</div></template>
<style></style>