ebene/radiantrh
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modification du style du login de connexion pour améliorer l’élégance, l’ergonomie, la responsivité.

Browse Source
This commit is contained in:
KONE SOREL 2025-12-10 12:53:32 +00:00
parent 45e4bdce66
commit ac197b7693
2 changed files with 113 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
Vue/Ajaxconnexioncookie/french.php
View File

@ -1,44 +1,42 @@
<?php
echo "sorel"
?>
<span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:10px;">
RADIANT : Portail Souscripteur
</span>
<div class="wrap-input100">
<label for="langue">Langue</label>
<select class="form-select" id="langue" name="langue" required autocomplete="off" onchange="javascript:changer_langue_connexion();">
<?php liste_options($langues, $_SESSION['lang'], true); ?>
</select>
</div>
<div class="sr-only">
<div class="wrap-input100 validate-input" data-validate="Enter Entity">
<label for="codeSociete">Entité</label>
<input class="input100" type="text" name="codeSociete" id="codeSociete" value="<?= $codeSociete ?>" >
<div class="login-card">
<div class="login-header">
<h2>RADIANT : Portail Souscripteur</h2>
</div>
</div>
<div id="div_login_portail" class="wrap-input100">
<div class="wrap-input100 validate-input" data-validate="Enter username">
<label for="login">Identifiant</label>
<input class="input100" type="text" name="login" id="login" value="<?= $codeUtilisateur ?>" placeholder="Identifiant" style="text-align:center;" required AUTOCOMPLETE="off">
<div class="form-group">
<label for="langue" class="required">Langue</label>
<select class="form-select custom-input" id="langue" name="langue" required autocomplete="off" onchange="changer_langue_connexion();">
<?php liste_options($langues, $_SESSION['lang'], true); ?>
</select>
</div>
</div>
<div class="wrap-input100 validate-input" data-validate="Enter password">
<label for="mdp">Mot de passe</label>
<input class="input100" type="password" name="mdp" id="mdp" placeholder="Mot de passe" style="text-align:center;" required AUTOCOMPLETE="off">
</div>
<input class="sr-only" type="text" name="codeSociete" id="codeSociete" value="<?= $codeSociete ?>">
<div class="container-login100-form-btn">
<button name="btn_connexion" id="btn_connexion" class="btn login-btn">
<div class="form-group">
<label for="login" class="required">Identifiant</label>
<div class="input-icon">
<i class="zmdi zmdi-account"></i>
<input type="text" class="custom-input" name="login" id="login"
placeholder="Identifiant" required autocomplete="off">
</div>
</div>
<div class="form-group">
<label for="mdp" class="required">Mot de passe</label>
<div class="input-icon">
<i class="zmdi zmdi-lock"></i>
<input type="password" class="custom-input" name="mdp" id="mdp"
placeholder="Mot de passe" required autocomplete="off">
</div>
</div>
<button name="btn_connexion" id="btn_connexion" class="btn login-btn w-100 mt-3">
Connexion
</button>
</div>
<div class="footer">
Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
<div class="login-footer">
Tous droits réservés
<a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
</div>
</div>

81
Vue/portail.php
View File

@ -394,7 +394,86 @@
}
}
.login-card {
max-width: 380px;
margin: auto;
padding: 35px 30px;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 12px 35px rgba(0,0,0,0.10);
text-align: center;
}
.login-header h2 {
font-size: 24px;
color: #7D4FFE;
font-weight: 700;
margin-bottom: 25px;
}
.form-group {
text-align: left;
margin-bottom: 18px;
}
.custom-input {
width: 100%;
border: 2px solid #7D4FFE;
border-radius: 8px;
padding: 12px 36px 12px 12px;
font-size: 14px;
color: #7D4FFE;
background: transparent;
}
.custom-input:focus {
border-color: #5e36e0;
box-shadow: none;
}
.input-icon {
position: relative;
}
.input-icon i {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: #7D4FFE;
}
.login-btn {
background: #7D4FFE;
color: #fff;
font-size: 18px;
font-weight: 700;
padding: 10px;
border-radius: 8px;
transition: .25s;
}
.login-btn:hover {
background: #fff;
color: #7D4FFE;
border: 2px solid #7D4FFE;
}
.login-footer {
margin-top: 18px;
font-size: 12px;
color: #7D4FFE;
}
@media (max-width: 768px) {
.login-card {
width: 90%;
padding: 25px 20px;
}
}
</style>
</head>