Pauline/NDI-2020
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modif des formulaires connexion et inscriptions

Browse Source
This commit is contained in:
Alcaraz Yannick 2020-12-04 01:35:28 +01:00
parent cbc35000e7
commit 6d0e6b6570
6 changed files with 118 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
.idea/workspace.xml generated
View File

@ -1,7 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="5db01d37-ed98-4df0-8a3f-85093d5456ef" name="Default Changelist" comment="" /> <list default="true" id="5db01d37-ed98-4df0-8a3f-85093d5456ef" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/inscription.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/connexion.html" beforeDir="false" afterPath="$PROJECT_DIR$/connexion.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/css/connexion.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/connexion.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/css/creation.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/inscription.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/css/creation.html" beforeDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@ -41,6 +48,11 @@
<property name="node.js.selected.package.tslint" value="(autodetect)" /> <property name="node.js.selected.package.tslint" value="(autodetect)" />
<property name="vue.rearranger.settings.migration" value="true" /> <property name="vue.rearranger.settings.migration" value="true" />
</component> </component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="D:\Nuit-De-L-Info-2020" />
</key>
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" /> <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
<component name="TaskManager"> <component name="TaskManager">
<task active="true" id="Default" summary="Default task"> <task active="true" id="Default" summary="Default task">
@ -49,11 +61,22 @@
<option name="number" value="Default" /> <option name="number" value="Default" />
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1607026953826</updated> <updated>1607026953826</updated>
<workItem from="1607026956145" duration="5065000" /> <workItem from="1607026956145" duration="9483000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" /> <option name="version" value="3" />
</component> </component>
<component name="Vcs.Log.Tabs.Properties">
<option name="TAB_STATES">
<map>
<entry key="MAIN">
<value>
<State />
</value>
</entry>
</map>
</option>
</component>
</project> </project>

18
connexion.html
View File

@ -8,25 +8,25 @@
<link rel="stylesheet" href="css/connexion.css" /> <link rel="stylesheet" href="css/connexion.css" />
</head> </head>
<body> <body>
<! --form action="" name"" method="POST"--> <!--form action="" name"" method="POST"-->
<div class="wrapper fadeInDown"> <div class="wrapper fonduBas">
<div id="formContent"> <div id="contenu">
<!-- Tabs Titles --> <!-- Tabs Titles -->
<h2 class="active"> Se connecter</h2> <h2 class="active"> Se connecter</h2>
<h2 class="inactive underlineHover"><a href="creation.html">Créer un compte </a></h2> <h2 class="inactive souligne"><a href="inscription.html">Créer un compte </a></h2>
<!-- Login Form --> <!-- Login Form -->
<form> <form>
<input type="text" id="login" class="fadeIn second" name="login" placeholder="Nom d'utilisateur"> <input type="text" id="login" class="fondu second" name="login" placeholder="Nom d'utilisateur">
<input type="text" id="password" class="fadeIn third" name="login" placeholder="Mot de passe"> <input type="text" id="password" class="fondu third" name="login" placeholder="Mot de passe">
<input type="submit" class="fadeIn fourth" value="Se connecter"> <input type="submit" class="fondu fourth" value="Se connecter">
</form> </form>
<!-- Remind Passowrd --> <!-- Remind Passowrd -->
<div id="formFooter"> <div id="pied">
<a class="underlineHover" href="#">Mot de passe oublié ?</a> <a class="souligne" href="#">Mot de passe oublié ?</a>
</div> </div>
</div> </div>

44
css/connexion.css
View File

@ -40,7 +40,7 @@ h2 {
padding: 20px; padding: 20px;
} }
#formContent { #contenu {
background: #fff; background: #fff;
padding: 30px; padding: 30px;
@ -53,7 +53,7 @@ h2 {
text-align: center; text-align: center;
} }
#formFooter { #pied {
background-color: #f6f6f6; background-color: #f6f6f6;
border-top: 1px solid #dce8f1; border-top: 1px solid #dce8f1;
padding: 25px; padding: 25px;
@ -133,7 +133,7 @@ input[type=text]:focus {
border-bottom: 2px solid #5fbae9; border-bottom: 2px solid #5fbae9;
} }
input[type=text]:placeholder { input[type=text]::placeholder {
color: #cccccc; color: #cccccc;
} }
@ -142,16 +142,16 @@ input[type=text]:placeholder {
/* ANIMATIONS */ /* ANIMATIONS */
/* Simple CSS3 Fade-in-down Animation */ /* Simple CSS3 Fade-in-down Animation */
.fadeInDown { .fonduBas {
-webkit-animation-name: fadeInDown; -webkit-animation-name: fonduBas;
animation-name: fadeInDown; animation-name: fonduBas;
-webkit-animation-duration: 1s; -webkit-animation-duration: 1s;
animation-duration: 1s; animation-duration: 1s;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
animation-fill-mode: both; animation-fill-mode: both;
} }
@-webkit-keyframes fadeInDown { @-webkit-keyframes fonduBas {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0);
@ -164,7 +164,7 @@ input[type=text]:placeholder {
} }
} }
@keyframes fadeInDown { @keyframes fonduBas {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0);
@ -178,15 +178,15 @@ input[type=text]:placeholder {
} }
/* Simple CSS3 Fade-in Animation */ /* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fondu { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fondu { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fondu { from { opacity:0; } to { opacity:1; } }
.fadeIn { .fondu {
opacity:0; opacity:0;
-webkit-animation:fadeIn ease-in 1; -webkit-animation:fondu ease-in 1;
-moz-animation:fadeIn ease-in 1; -moz-animation:fondu ease-in 1;
animation:fadeIn ease-in 1; animation:fondu ease-in 1;
-webkit-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards;
@ -197,32 +197,32 @@ input[type=text]:placeholder {
animation-duration:1s; animation-duration:1s;
} }
.fadeIn.first { .fondu.premier {
-webkit-animation-delay: 0.4s; -webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s; -moz-animation-delay: 0.4s;
animation-delay: 0.4s; animation-delay: 0.4s;
} }
.fadeIn.second { .fondu.deuxieme {
-webkit-animation-delay: 0.6s; -webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s; -moz-animation-delay: 0.6s;
animation-delay: 0.6s; animation-delay: 0.6s;
} }
.fadeIn.third { .fondu.troisieme {
-webkit-animation-delay: 0.8s; -webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s; -moz-animation-delay: 0.8s;
animation-delay: 0.8s; animation-delay: 0.8s;
} }
.fadeIn.fourth { .fondu.quatrieme {
-webkit-animation-delay: 1s; -webkit-animation-delay: 1s;
-moz-animation-delay: 1s; -moz-animation-delay: 1s;
animation-delay: 1s; animation-delay: 1s;
} }
/* Simple CSS3 Fade-in Animation */ /* Simple CSS3 Fade-in Animation */
.underlineHover:after { .souligne:after {
display: block; display: block;
left: 0; left: 0;
bottom: -10px; bottom: -10px;
@ -233,11 +233,11 @@ input[type=text]:placeholder {
transition: width 0.2s; transition: width 0.2s;
} }
.underlineHover:hover { .souligne:hover {
color: #0d0d0d; color: #0d0d0d;
} }
.underlineHover:hover:after{ .souligne:hover:after{
width: 100%; width: 100%;
} }

39
css/creation.html
View File

@ -1,39 +0,0 @@
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<!--link rel="icon" href="IconeLogo.ico"/-->
<title>Accueil</title>
<link rel="stylesheet" href="css/creation.css" />
</head>
<body>
<! --form action="" name"" method="POST"-->
<div class="wrapper fadeInDown">
<div id="formContent">
<!-- Tabs Titles -->
<h2 class="inactive underlineHover">Se connecter</h2>
<h2 class="active">Créer un compte </a></h2>
<!-- Login Form -->
<form>
<input type="text" id="login" class="fadeIn second" name="login" placeholder="Nom d'utilisateur">
<input type="text" id="password" class="fadeIn third" name="login" placeholder="Mot de passe">
<input type="submit" class="fadeIn fourth" value="Se connecter">
</form>
<!-- Remind Passowrd -->
<div id="formFooter">
<a class="underlineHover" href="#">Mot de passe oublié ?</a>
</div>
</div>
</div>
<! --/form-->
</body>
</html>

45
css/creation.css → css/inscription.css
View File

@ -40,8 +40,7 @@ h2 {
padding: 20px; padding: 20px;
} }
#formContent { #contenu {
background: #fff; background: #fff;
padding: 30px; padding: 30px;
width: 90%; width: 90%;
@ -53,7 +52,7 @@ h2 {
text-align: center; text-align: center;
} }
#formFooter { #pied {
background-color: #f6f6f6; background-color: #f6f6f6;
border-top: 1px solid #dce8f1; border-top: 1px solid #dce8f1;
padding: 25px; padding: 25px;
@ -133,7 +132,7 @@ input[type=text]:focus {
border-bottom: 2px solid #5fbae9; border-bottom: 2px solid #5fbae9;
} }
input[type=text]:placeholder { input[type=text]::placeholder {
color: #cccccc; color: #cccccc;
} }
@ -142,16 +141,16 @@ input[type=text]:placeholder {
/* ANIMATIONS */ /* ANIMATIONS */
/* Simple CSS3 Fade-in-down Animation */ /* Simple CSS3 Fade-in-down Animation */
.fadeInDown { .fonduBas {
-webkit-animation-name: fadeInDown; -webkit-animation-name: fonduBas;
animation-name: fadeInDown; animation-name: fonduBas;
-webkit-animation-duration: 1s; -webkit-animation-duration: 1s;
animation-duration: 1s; animation-duration: 1s;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
animation-fill-mode: both; animation-fill-mode: both;
} }
@-webkit-keyframes fadeInDown { @-webkit-keyframes fonduBas {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0);
@ -164,7 +163,7 @@ input[type=text]:placeholder {
} }
} }
@keyframes fadeInDown { @keyframes fonduBas {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0);
@ -178,15 +177,15 @@ input[type=text]:placeholder {
} }
/* Simple CSS3 Fade-in Animation */ /* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fondu { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fondu { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fondu { from { opacity:0; } to { opacity:1; } }
.fadeIn { .fondu {
opacity:0; opacity:0;
-webkit-animation:fadeIn ease-in 1; -webkit-animation:fondu ease-in 1;
-moz-animation:fadeIn ease-in 1; -moz-animation:fondu ease-in 1;
animation:fadeIn ease-in 1; animation:fondu ease-in 1;
-webkit-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards;
@ -197,32 +196,32 @@ input[type=text]:placeholder {
animation-duration:1s; animation-duration:1s;
} }
.fadeIn.first { .fondu.premier {
-webkit-animation-delay: 0.4s; -webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s; -moz-animation-delay: 0.4s;
animation-delay: 0.4s; animation-delay: 0.4s;
} }
.fadeIn.second { .fondu.deuxieme {
-webkit-animation-delay: 0.6s; -webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s; -moz-animation-delay: 0.6s;
animation-delay: 0.6s; animation-delay: 0.6s;
} }
.fadeIn.third { .fondu.troisieme {
-webkit-animation-delay: 0.8s; -webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s; -moz-animation-delay: 0.8s;
animation-delay: 0.8s; animation-delay: 0.8s;
} }
.fadeIn.fourth { .fondu.quatrieme {
-webkit-animation-delay: 1s; -webkit-animation-delay: 1s;
-moz-animation-delay: 1s; -moz-animation-delay: 1s;
animation-delay: 1s; animation-delay: 1s;
} }
/* Simple CSS3 Fade-in Animation */ /* Simple CSS3 Fade-in Animation */
.underlineHover:after { .souligne:after {
display: block; display: block;
left: 0; left: 0;
bottom: -10px; bottom: -10px;
@ -233,11 +232,11 @@ input[type=text]:placeholder {
transition: width 0.2s; transition: width 0.2s;
} }
.underlineHover:hover { .souligne:hover {
color: #0d0d0d; color: #0d0d0d;
} }
.underlineHover:hover:after{ .souligne:hover:after{
width: 100%; width: 100%;
} }

40
inscription.html Normal file
View File

@ -0,0 +1,40 @@
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8" />
<!--link rel="icon" href="IconeLogo.ico"/-->
<title>Accueil</title>
<link rel="stylesheet" href="css/inscription.css" />
</head>
<body>
<div class="wrapper fonduBas">
<div id="contenu">
<!-- Tabs Titles -->
<h2 class="inactive souligne"><a href="connexion.html"> Se connecter</a></h2>
<h2 class="active">Créer un compte</h2>
<!-- Login Form -->
<form>
<input type="text" id="login" class="fondu second" name="login" placeholder="Nom d'utilisateur">
<input type="text" id="password" class="fondu third" name="login" placeholder="Mot de passe">
<input type="submit" class="fondu fourth" value="S'inscrire">
</form>
<!-- Remind Passowrd -->
<div id="pied">
<a class="souligne" href="connexion.html">Déjà inscrit ?</a>
</div>
</div>
</div>
</body>
</html>