Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Modification de la page de login.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modification de la page de login.

Message par I-n-s-o-m-n-i-a le Jeu 8 Nov 2018 - 16:55

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour !
Alors voilà, je vous expose mon problème. J'ai énormément fait de recherche pour réussir à modifier la page /login de mon forum (pas la connexion qui se trouve sur l'index, mais bien la page de connexion quand on clique sur "connexion"). Il n'existe aucun template, je me suis donc dit qu'il fallait passer par du JS. On m'a filé un coup de main pour tenter quelque chose qui marche très bien en externe mais une fois installé, surprise, ça ne marche pas !

Je viens donc demander un peu d'aide. J'ai déjà fouillé les pages que l'on pourrait me donner quant à ce problème mais n'aies pas trouvé de solution.

Voici le code :
Code:
if (document.URL == 'dark-and-cold.com/login') {
         http://Document.getElementsByTagName('form').innerHTML = '';
         console.log(document.getElementsByTagName('form'));
         var form = document.getElementsByTagName('form');
         form[0].innerHTML = '<meta charset="UTF-8"/><div class="login-wrapper"> <div class="login-left"> <img src="https://imgur.com/j04xP5S.png"/> <div class="h1"> Entrer sur Insomnia </div></div><div class="login-right"> <div class="h2"> Bienvenue sur nos terres : </div><div class="form-group"> <input placeholder="Full Name" id="full-name" type="text"/> <label for="full-name">Nom d\'utilisateur</label> </div><div class="form-group"> <input placeholder="Password" id="Password" type="password"/> <label for="Password">Mot de passe</label> </div><div class="checkbox-container"> <input type="checkbox"/> <div class="text-checkbox"> J\'accepte les conditions du service. </div></div><div class="button-area"> <button class="btn btn-secondary"> Connexion </button> <button class="btn btn-primary"> S\'inscrire </button> </div></div></div><style>@import url(\'https://fonts.googleapis.com/css?family=Lato:300,400,700\');*{box-sizing: border-box;}html, body{margin: 0; padding: 0; height: 100%;}body{font-family: \'Lato\', sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: linear-gradient(243.87deg, #262624 30.6%, #f7a729 130.6%); overflow: hidden;}input{font-family: inherit; -webkit-appearance: none; -moz-appearance: none; border: 0; border-bottom: 1px solid #AAAAAA; font-size: 16px; color: #000; border-radius: 0;}input[type="text"],input[type="password"]{width: 100%; height: 40px;}button,input:focus{outline: 0;}::-webkit-input-placeholder{font-size: 16px; font-weight: 300; letter-spacing: -0.00933333em;}.form-group{position: relative; padding-top: 15px; margin-top: 10px;}label{position: absolute; top: 0; opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); color: #aaa; font-weight: 300; font-size: 13px; letter-spacing: -0.00933333em; transition: all 0.2s ease-out;}input:placeholder-shown + label{opacity: 0; -webkit-transform: translateY(15px); transform: translateY(15px);}.h1{color: #fff; opacity: 0.8; font-size: 20px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.2405em; transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99); text-align: center; cursor: pointer; position: absolute;}.open .h1{-webkit-transform: translateX(200px) translateZ(0); transform: translateX(200px) translateZ(0);}.h2{color: #000; font-size: 20px; letter-spacing: -0.00933333em; font-weight: 600; padding-bottom: 15px;}.login-wrapper{width: 800px; height: 440px; background-color: #fff; box-shadow: 0px 2px 50px rgba(0, 0, 0, 0.2); overflow: hidden; position: relative;}.login-left{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99); overflow: hidden;}.login-left img{object-fit: cover; width: 100%; height: 100%; display: block; transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99); object-position: left;}.open .login-left img{-webkit-transform: translateX(280px) translateZ(0); transform: translateX(280px) translateZ(0);}.open .login-left{-webkit-transform: translateX(-400px) translateZ(0); transform: translateX(-400px) translateZ(0);}.login-right{padding: 40px; position: absolute; top: 0; right: 0; width: 400px; -webkit-transform: translateX(400px) translateZ(0); transform: translateX(400px) translateZ(0); transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);}.open .login-right{-webkit-transform: translateX(0px) translateZ(0); transform: translateX(0px) translateZ(0);}.checkbox-container{display: flex; margin-top: 35px;}.text-checkbox{color: #aaa; font-size: 16px; letter-spacing: -0.00933333em; font-weight: 300; margin-left: 15px;}input[type="checkbox"]{cursor: pointer; margin: 0; height: 22px; position: relative; width: 22px; -webkit-appearance: none; transition: all 180ms linear;}input[type="checkbox"]:before{border: 1px solid #aaa; background-color: #fff; content: \'\'; width: 20px; height: 20px; display: block; border-radius: 2px; transition: all 180ms linear;}input[type="checkbox"]:checked:before{background: linear-gradient(198.08deg, #f1a62f 45.34%, #e2e69d 224.21%); border: 1px solid #000000;}input[type="checkbox"]:after{content: \'\'; border: 2px solid #fff; border-right: 0; border-top: 0; display: block; height: 4px; left: 4px; opacity: 0; position: absolute; top: 6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 12px; transition: all 180ms linear;}input[type="checkbox"]:checked:after{opacity: 1;}.button-area{display: flex; justify-content: space-between; margin-top: 30px;}.btn{font-family: inherit; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; border: none; border-radius: 2px; height: 40px; display: flex; padding: 0 35px; cursor: pointer; font-size: 16px; text-transform: uppercase; letter-spacing: -0.00933333em;}.btn-primary{color: #bba986; background: linear-gradient(198.08deg, #000000 45.34%, #ffb025 224.21%); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);}.btn-secondary{color: #bba986;}</style>  ';
         var openLoginRight=document.querySelector('.h1');
         var loginWrapper=document.querySelector('.login-wrapper');
         openLoginRight.addEventListener('click', function(){loginWrapper.classList.toggle('open');});
      }

Merci d'avance !


Dernière édition par I-n-s-o-m-n-i-a le Sam 17 Nov 2018 - 0:52, édité 1 fois
avatar

I-n-s-o-m-n-i-a
**

Messages : 50
Inscrit(e) le : 26/12/2017

http://www.dark-and-cold.com/
I-n-s-o-m-n-i-a a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de la page de login.

Message par Adam_sfp le Ven 9 Nov 2018 - 17:00

Bonjour

Comme vous avez fait un "tout en un" le script  intègre le HTML et le CSS vous êtes obligé de placer pas mal de  \ caractère d'échappement .. et on peut vite se retrouver avec des erreurs..

A votre place j’essaierai de faire votre page de login sur une page HTML ( en mettant donc votre html css et autres sur cette page )

Cette page aura un lien de type adressedevotreforum/h1-exemple

Ensuite vous pouvez essayer ce script dans gestion des pages javascript sur toutes les pages
Ce script va diriger vers votre page html servant de login page ( modifier /h1- par votre numéro de page html )
Code:
$(function() {
  /\/login/g.test(window.location.href) ? window.location = "/h1-" : " ";
});

*Attention soyez sur que votre code fonctionne sur la page html sinon vous risquez de tournez en boucle drunken
et ne plus accéder à votre forum (il faudra désactiver le javascript du navigateur pour y accéder )...

Cdt.
avatar

Adam_sfp
Membre actif

Masculin
Messages : 4319
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de la page de login.

Message par I-n-s-o-m-n-i-a le Ven 9 Nov 2018 - 17:28

Merci beaucoup de votre réponse très rapide @"Adam_sfp" !
Alors normalement j'ai tout compris, sauf une petite chose. Le "modifier par le numéro de votre page HTML", je ne suis pas sûre de ce que c'est... xD !
Là, en créeant ton ma page HTML, le lien ressemble à adresseduforum//h2-h1-exemple; je dois donc y mettre le "h2" ?

EDIT : AH, J'AI TROUVÉ ! Seul souci, dans ma page HTML, le bouton de connexion ne marche pas ! Sachant qu'on ne peut pas y mettre de valeurs templates dedans, je suis un peu coincée :/
avatar

I-n-s-o-m-n-i-a
**

Messages : 50
Inscrit(e) le : 26/12/2017

http://www.dark-and-cold.com/
I-n-s-o-m-n-i-a a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de la page de login.

Message par Adam_sfp le Ven 9 Nov 2018 - 22:52

Bonsoir

Il vous manque pas mal d'éléments dans votre page HTML

Voici un exemple de base qui devrait vous permettre d'avancer
Code:
<form action="/login" method="post" name="form_login">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" />
    <label for="password">Password:</label>
    <input type="text" id="password" name="password" />
    <input value="Enter" id="login" name="login" type="submit" />

</form>

Pour vos boutons cela donnera quelque chose dans ce style
Code:
<button class="btn btn-secondary" value="Enter" id="login" name="login" type="submit" >
     Connexion    
 </button>

Code:
<button class="btn btn-primary" onclick="location.href='/register'">
                                                                    
                          
                          
     S'inscrire    
 </button>

Cdt.


*vous pouvez aussi ajouter mot de passe oublié avec ce lien
Code:
/profile?mode=sendpassword
avatar

Adam_sfp
Membre actif

Masculin
Messages : 4319
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de la page de login.

Message par I-n-s-o-m-n-i-a le Ven 9 Nov 2018 - 23:05

Mmh, alors, après quelques essaies, il y a quelques petits problèmes (je n'y connais vraiment rien, désolée).
Les mots "nom" et "mot de passe" sr chevauchent, et le bouton connexion ne marchent pas, juste le "entrer"

Je vous laisse le code à la suite :

Code:
<meta charset="UTF-8" />
<!--              ---------- Thanks Daniel Almeida for the reference  ---------              -->
<!--              https://dribbble.com/shots/4027518-Login-screen-interaction              -->
<div class="login-wrapper">
                              
   <div class="login-left">
                      <img src="https://imgur.com/j04xP5S.png" />               
      <div class="h1">
                     Entrer sur Insomnia           
      </div>
                                 
   </div>
                              
   <div class="login-right">
                                   
      <div class="h2">
                     Bienvenue sur nos terres :           
      </div>
                                   
      <div class="form-group">
         
         <form name="form_login" method="post" action="/login">
                <label for="username">Username:</label>    <input id="username" name="username" type="text" />    <label for="password">Password:</label>    <input name="password" id="password" type="text" />    <input type="submit" name="login" id="login" value="Enter" /> 
         </form>
                                      
         <div class="button-area">
                                           
            <button type="submit" name="login" id="login" value="Enter" class="btn btn-secondary">
               Connexion
            </button>
                                                 
            <button onclick="location.href='/register'" class="btn btn-primary">
               S'inscrire
            </button>
                                         
         </div>
                                    
      </div>
   </div>
       <style>
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');

* {
  box-sizing: border-box;
}
a {
text-decoration:none;
}
a:hover { text-decoration:none !important;}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Lato', sans-serif;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: linear-gradient(243.87deg, #262624 30.6%, #f7a729 130.6%);
  overflow: hidden;
}

input {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  border-bottom: 1px solid #AAAAAA;
  font-size: 16px;
  color: #000;
  border-radius: 0;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  height: 40px;
}

button,
input:focus {
  outline: 0;
}

::-webkit-input-placeholder {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.00933333em;
}

.form-group {
  position: relative;
  padding-top: 15px;
  margin-top: 10px;
}

label {
  position: absolute;
  top: 0;
  opacity: 1;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
  color: #aaa;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: -0.00933333em;
  transition: all 0.2s ease-out;
}

input:placeholder-shown  + label {
  opacity: 0;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}

.h1 {
  color: #fff;
  opacity: 0.8;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2405em;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  text-align: center;
  cursor: pointer;
  position: absolute;
}

.open .h1 {
  -webkit-transform: translateX(200px) translateZ(0);
          transform: translateX(200px) translateZ(0);
}

.h2 {
  color: #000;
  font-size: 20px;
  letter-spacing: -0.00933333em;
  font-weight: 600;
  padding-bottom: 15px;
}

.login-wrapper {
  width: 800px;
  height: 440px;
  background-color: #fff;
  box-shadow: 0px 2px 50px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

.login-left {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  overflow: hidden;
}

.login-left img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  object-position: left;
}

.open .login-left img {
  -webkit-transform: translateX(280px) translateZ(0); 
          transform: translateX(280px) translateZ(0); 
}

.open .login-left {
  -webkit-transform: translateX(-400px) translateZ(0);
          transform: translateX(-400px) translateZ(0);
}

.login-right {
  padding: 40px;
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  -webkit-transform: translateX(400px) translateZ(0);
          transform: translateX(400px) translateZ(0);
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
}

.open .login-right {
  -webkit-transform: translateX(0px) translateZ(0);
          transform: translateX(0px) translateZ(0);
}

.checkbox-container {
  display: flex;
  margin-top: 35px;
}

.text-checkbox {
  color: #aaa;
  font-size: 16px;
  letter-spacing: -0.00933333em;
  font-weight: 300;
  margin-left: 15px;
}

input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
  height: 22px;
  position: relative;
  width: 22px;
  -webkit-appearance: none;
  transition: all 180ms linear;
}

input[type="checkbox"]:before {
    border: 1px solid #aaa;
    background-color: #fff;
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 2px;
    transition: all 180ms linear;
}

input[type="checkbox"]:checked:before {
    background: linear-gradient(198.08deg, #f1a62f 45.34%, #e2e69d 224.21%);
    border: 1px solid #000000;
}

input[type="checkbox"]:after {
  content: '';
  border: 2px solid #fff;
  border-right: 0;
  border-top: 0;
  display: block;
  height: 4px;
  left: 4px;
  opacity: 0;
  position: absolute;
  top: 6px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 12px;
  transition: all 180ms linear;
}

input[type="checkbox"]:checked:after {
    opacity: 1;
}

.button-area {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.btn {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none; 
  background-color: transparent;
  border: none;
  border-radius: 2px;
  height: 40px;
  display: flex;
  padding: 0 35px;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: -0.00933333em;
}

.btn-primary {
 
    background: linear-gradient(198.08deg, #000000 45.34%, #ffb025 224.21%);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary a {
 color: #bba986;
}
.btn-secondary {
  color: #bba986; 
}
</style>    <script>
  var openLoginRight = document.querySelector('.h1');
var loginWrapper = document.querySelector('.login-wrapper');

openLoginRight.addEventListener('click', function(){
  loginWrapper.classList.toggle('open');
});
  </script>
</div>
avatar

I-n-s-o-m-n-i-a
**

Messages : 50
Inscrit(e) le : 26/12/2017

http://www.dark-and-cold.com/
I-n-s-o-m-n-i-a a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de la page de login.

Message par I-n-s-o-m-n-i-a le Lun 12 Nov 2018 - 6:18

Up Smile
avatar

I-n-s-o-m-n-i-a
**

Messages : 50
Inscrit(e) le : 26/12/2017

http://www.dark-and-cold.com/
I-n-s-o-m-n-i-a a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de la page de login.

Message par I-n-s-o-m-n-i-a le Mar 13 Nov 2018 - 20:15

Up ^^
avatar

I-n-s-o-m-n-i-a
**

Messages : 50
Inscrit(e) le : 26/12/2017

http://www.dark-and-cold.com/
I-n-s-o-m-n-i-a a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de la page de login.

Message par Adam_sfp le Mer 14 Nov 2018 - 19:53

Bonsoir

Peut être comme ceci:
Code:
<meta charset="UTF-8" />
<!--      ---------- Thanks Daniel Almeida for the reference  ---------      -->
<!--      https://dribbble.com/shots/4027518-Login-screen-interaction      --><div class="login-wrapper">
              
   <div class="login-left">
              <img src="https://imgur.com/j04xP5S.png" />       
      <div class="h1">
             Entrer sur Insomnia   
      </div>
                 
   </div>
              
   <div class="login-right">
                   
      <div class="h2">
             Bienvenue sur nos terres :   
      </div>
            <form style="" action="/login" method="post" name="form_login">       
      <div class="form-group">
                   <input type="text" name="username" id="username" placeholder="Full Name" />      <label for="username">Nom d'utilisateur</label>           
      </div>
         
     
         
         
                   
      <div class="form-group">
                   <input type="text" id="password" name="password" placeholder="Password"/>      <label for="password">Mot de passe</label>           
      </div>
         
         
     
         
         
                   
      <div class="checkbox-container">
                   <input type="checkbox" />         
         <div class="text-checkbox">
                J'accepte les conditions du service.   
         </div>
                      
      </div>
           
                 
                       
                       
                       
      <div class="button-area">
                        
         <button class="btn btn-secondary" value="" id="login" name="login" type="submit" >
                Connexion   
         </button>
                  
         <button class="btn btn-primary" onclick="location.href='http://google.com'">
                                                                   
                         
                         
                S'inscrire   
         </button>
                  
      </div>
                 
   

    <style>
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Lato', sans-serif;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: linear-gradient(243.87deg, #262624 30.6%, #f7a729 130.6%);
  overflow: hidden;
}

input {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  border-bottom: 1px solid #AAAAAA;
  font-size: 16px;
  color: #000;
  border-radius: 0;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  height: 40px;
}

button,
input:focus {
  outline: 0;
}

::-webkit-input-placeholder {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.00933333em;
}

.form-group {
  position: relative;
  padding-top: 15px;
  margin-top: 10px;
}

label {
  position: absolute;
  top: 0;
  opacity: 1;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
  color: #aaa;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: -0.00933333em;
  transition: all 0.2s ease-out;
}

input:placeholder-shown  + label {
  opacity: 0;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}

.h1 {
  color: #fff;
  opacity: 0.8;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2405em;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  text-align: center;
  cursor: pointer;
  position: absolute;
}

.open .h1 {
  -webkit-transform: translateX(200px) translateZ(0);
          transform: translateX(200px) translateZ(0);
}

.h2 {
  color: #000;
  font-size: 20px;
  letter-spacing: -0.00933333em;
  font-weight: 600;
  padding-bottom: 15px;
}

.login-wrapper {
  width: 800px;
  height: 440px;
  background-color: #fff;
  box-shadow: 0px 2px 50px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

.login-left {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  overflow: hidden;
}

.login-left img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  object-position: left;
}

.open .login-left img {
  -webkit-transform: translateX(280px) translateZ(0); 
          transform: translateX(280px) translateZ(0); 
}

.open .login-left {
  -webkit-transform: translateX(-400px) translateZ(0);
          transform: translateX(-400px) translateZ(0);
}

.login-right {
  padding: 40px;
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  -webkit-transform: translateX(400px) translateZ(0);
          transform: translateX(400px) translateZ(0);
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
}

.open .login-right {
  -webkit-transform: translateX(0px) translateZ(0);
          transform: translateX(0px) translateZ(0);
}

.checkbox-container {
  display: flex;
  margin-top: 35px;
}

.text-checkbox {
  color: #aaa;
  font-size: 16px;
  letter-spacing: -0.00933333em;
  font-weight: 300;
  margin-left: 15px;
}

input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
  height: 22px;
  position: relative;
  width: 22px;
  -webkit-appearance: none;
  transition: all 180ms linear;
}

input[type="checkbox"]:before {
    border: 1px solid #aaa;
    background-color: #fff;
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 2px;
    transition: all 180ms linear;
}

input[type="checkbox"]:checked:before {
    background: linear-gradient(198.08deg, #f1a62f 45.34%, #e2e69d 224.21%);
    border: 1px solid #000000;
}

input[type="checkbox"]:after {
  content: '';
  border: 2px solid #fff;
  border-right: 0;
  border-top: 0;
  display: block;
  height: 4px;
  left: 4px;
  opacity: 0;
  position: absolute;
  top: 6px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 12px;
  transition: all 180ms linear;
}

input[type="checkbox"]:checked:after {
    opacity: 1;
}

.button-area {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.btn {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none; 
  background-color: transparent;
  border: none;
  border-radius: 2px;
  height: 40px;
  display: flex;
  padding: 0 35px;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: -0.00933333em;
}

.btn-primary {
    color: #bba986;
    background: linear-gradient(198.08deg, #000000 45.34%, #ffb025 224.21%);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
  color: #bba986; 
}
</style>      </form>  <script>
  var openLoginRight = document.querySelector('.h1');
var loginWrapper = document.querySelector('.login-wrapper');

openLoginRight.addEventListener('click', function(){
  loginWrapper.classList.toggle('open');
});
  </script>

Cdt.
avatar

Adam_sfp
Membre actif

Masculin
Messages : 4319
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de la page de login.

Message par I-n-s-o-m-n-i-a le Sam 17 Nov 2018 - 0:09

OH MON DIEU CA MARCHE !
Merci merci merci merci un million de fois ♥️ !!!
avatar

I-n-s-o-m-n-i-a
**

Messages : 50
Inscrit(e) le : 26/12/2017

http://www.dark-and-cold.com/
I-n-s-o-m-n-i-a a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum