257 lines
8.8 KiB
PHP
257 lines
8.8 KiB
PHP
<?php
|
||
require_once __DIR__ . '/../includes/bootstrap_global.php';
|
||
?>
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title><?php echo $translations['insc_client_title'] ?></title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link href="/css/bootstrap.min.css" rel="stylesheet">
|
||
|
||
<link rel="stylesheet" href="<?php echo asset('/includes/site_style.css') ?>">
|
||
<link rel="stylesheet" href="<?php echo asset('/includes/custom_style.css') ?>">
|
||
<link rel="stylesheet" href="<?php echo asset('/includes/mobil_style.css') ?>">
|
||
<style>
|
||
.toggle-password {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
}
|
||
.strength-bar {
|
||
height: 8px;
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
}
|
||
.strength-fill {
|
||
flex: 1;
|
||
background: #ccc;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
.message-erreur {
|
||
color: red;
|
||
font-size: 0.9em;
|
||
display: none;
|
||
margin-bottom: 10px;
|
||
}
|
||
/* Checkbox custom */
|
||
.chk-wrap{
|
||
display:flex; align-items:flex-start; gap:10px; cursor:pointer; user-select:none;
|
||
}
|
||
.chk-wrap input{
|
||
position:absolute; opacity:0; pointer-events:none;
|
||
}
|
||
.chk-box{
|
||
width:22px; height:22px; flex:0 0 22px;
|
||
border:2px solid #38378B; border-radius:6px; background:#fff;
|
||
box-shadow:0 2px 6px rgba(0,0,0,.06);
|
||
display:inline-block; position:relative; transition:.18s ease;
|
||
}
|
||
.chk-wrap input:checked + .chk-box{
|
||
background:#38378B; border-color:#38378B;
|
||
}
|
||
.chk-wrap input:checked + .chk-box::after{
|
||
content:""; position:absolute; left:6px; top:2px; width:6px; height:12px;
|
||
border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
|
||
}
|
||
.chk-label{
|
||
color:#111; line-height:1.4; font-size: 12px;
|
||
}
|
||
.chk-label a{ color:#38378B; text-decoration:none; }
|
||
.chk-label a:hover{ text-decoration:none; }
|
||
|
||
</style>
|
||
<?php include_once __DIR__ . '/includes/tracking.php'; ?>
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<div class="container">
|
||
<div class="header-left">
|
||
<div class="brand">
|
||
<a href="/index.php"><img src="/public/uploads/img/logo_u.png"
|
||
alt="uslugi.fr"
|
||
class="logo-mobile"></a>
|
||
|
||
<a href="/index.php"><img src="/public/uploads/img/logo.png"
|
||
alt="uslugi.fr"
|
||
class="logo-desktop"></a>
|
||
</div>
|
||
<div class="lang-switch">
|
||
<?php require __DIR__ . '/includes/menu_langue.php'; ?>
|
||
</div>
|
||
</div>
|
||
<nav class="header-actions">
|
||
<div class="dropdown">
|
||
<button class="btn btn-logo rounded-circle d-inline-flex align-items-center justify-content-center question-btn"
|
||
type="button" data-bs-toggle="dropdown" data-bs-auto-close="true"
|
||
aria-expanded="false" aria-label="Помощь">?</button>
|
||
<ul class="dropdown-menu dropdown-menu-end shadow help-menu menu-panel">
|
||
<li><a href="/how-it-work.php"><?php echo $translations['kak_rabotaet'] ?></a></a></li>
|
||
<li><a href="/about.php"><?php echo $translations['pro_nas'] ?></a></li>
|
||
<li><a href="/faq.php"><?php echo $translations['faq'] ?></a></li>
|
||
<li><a href="/contact.php"><?php echo $translations['nam_pisat'] ?></a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="main">
|
||
<div class="card shadow-sm p-4" style="min-width: 380px; max-width: 480px; width: 100%; margin:40px auto;">
|
||
<h3 class="mb-4 text-center"><?php echo $translations['insc_client_title'] ?></h3>
|
||
|
||
<form id="form-inscription" method="POST" action="traitement_inscription_client.php">
|
||
<div class="mb-3">
|
||
<input type="text" name="prenom" class="form-control" placeholder="<?php echo $translations['placeholder_prenom'] ?>" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<input type="text" name="nom" class="form-control" placeholder="<?php echo $translations['placeholder_nom'] ?>" required>
|
||
</div>
|
||
|
||
<div class="mb-1">
|
||
<input type="email" name="email" id="email" class="form-control" placeholder="<?php echo $translations['email_placeholder'] ?>" required>
|
||
</div>
|
||
<div class="message-erreur" id="email-erreur"><?php echo $translations['email_deja_utilise'] ?></div>
|
||
|
||
<div class="mb-3 position-relative">
|
||
<input type="password" name="mot_de_passe" id="mot_de_passe" class="form-control" placeholder="<?php echo $translations['motdepasse_placeholder'] ?>" required>
|
||
<span class="toggle-password" onclick="togglePassword('mot_de_passe')">👁️</span>
|
||
</div>
|
||
|
||
<div id="niveau-securite" class="mb-2 text-muted"><?php echo $translations['mdp_regle_min'] ?></div>
|
||
|
||
<div class="strength-bar mb-3">
|
||
<div class="strength-fill"></div>
|
||
<div class="strength-fill"></div>
|
||
<div class="strength-fill"></div>
|
||
</div>
|
||
|
||
<!-- Confirmation mot de passe -->
|
||
<div class="mb-3 position-relative">
|
||
<input type="password"
|
||
name="confirm_mot_de_passe"
|
||
id="confirm_mot_de_passe"
|
||
class="form-control"
|
||
placeholder="<?php echo $translations['confirm_mdp_placeholder'] ?? 'Confirmer le mot de passe' ?>"
|
||
required
|
||
autocomplete="new-password">
|
||
<span class="toggle-password" onclick="togglePassword('confirm_mot_de_passe')">👁️</span>
|
||
</div>
|
||
<div id="confirm-feedback" class="message-erreur" aria-live="polite" style="display:none;"></div>
|
||
<!-- CGU / Confidentialité (obligatoire) -->
|
||
<div class="mb-3">
|
||
<label class="chk-wrap">
|
||
<input type="checkbox" id="accept_cgu" name="accept_cgu" required>
|
||
<span class="chk-box" aria-hidden="true"></span>
|
||
<span class="chk-label"><?php echo $translations['cgu_label_html'] ?></span>
|
||
</label>
|
||
<div class="message-erreur" id="cgu-error" aria-live="polite" style="display:none;">
|
||
<?php echo htmlspecialchars($translations['cgu_obligatoire'], ENT_QUOTES, 'UTF-8') ?>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<button type="submit" class="btn btn-primary w-100"><?php echo $translations['btn_sinscrire'] ?></button>
|
||
</form>
|
||
</div>
|
||
<script>
|
||
(function(){
|
||
const form = document.getElementById('form-inscription');
|
||
const pwd = document.getElementById('mot_de_passe');
|
||
const cpwd = document.getElementById('confirm_mot_de_passe');
|
||
const feedback = document.getElementById('confirm-feedback');
|
||
|
||
const MSGS = {
|
||
mismatch: '<?php echo addslashes($translations["mdp_non_identiques"] ?? "Les mots de passe ne correspondent pas.") ?>',
|
||
ok: '<?php echo addslashes($translations["mdp_identiques_ok"] ?? "Les mots de passe correspondent.") ?>'
|
||
};
|
||
|
||
function showOk(){
|
||
feedback.textContent = MSGS.ok;
|
||
feedback.style.color = 'green';
|
||
feedback.style.display = 'block';
|
||
}
|
||
function showErr(){
|
||
feedback.textContent = MSGS.mismatch;
|
||
feedback.style.color = 'red';
|
||
feedback.style.display = 'block';
|
||
}
|
||
|
||
function checkMatch(){
|
||
// Si l’utilisateur n’a pas encore saisi la confirmation, on cache le message
|
||
if (!cpwd.value) { feedback.style.display = 'none'; form.dataset.confirmOk = '0'; return; }
|
||
if (pwd.value === cpwd.value) { showOk(); form.dataset.confirmOk = '1'; }
|
||
else { showErr(); form.dataset.confirmOk = '0'; }
|
||
}
|
||
|
||
pwd.addEventListener('input', checkMatch);
|
||
cpwd.addEventListener('input', checkMatch);
|
||
|
||
form.addEventListener('submit', function(e){
|
||
// Double sécurité côté front : empêche l’envoi si non identiques
|
||
if (form.dataset.confirmOk !== '1') {
|
||
checkMatch();
|
||
e.preventDefault();
|
||
cpwd.focus();
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
|
||
<script>
|
||
function togglePassword(id) {
|
||
const input = document.getElementById(id);
|
||
if (input) {
|
||
input.type = input.type === "password" ? "text" : "password";
|
||
}
|
||
}
|
||
|
||
// Traductions envoyées depuis PHP
|
||
const EMAIL_TAKEN = '<?php echo addslashes($translations['email_deja_utilise']) ?>';
|
||
const T = {
|
||
rule: '<?php echo addslashes($translations['mdp_regle_min']) ?>',
|
||
weak: '<?php echo addslashes($translations['securite_faible']) ?>',
|
||
medium: '<?php echo addslashes($translations['securite_moyen']) ?>',
|
||
strong: '<?php echo addslashes($translations['securite_fort']) ?>'
|
||
};
|
||
</script>
|
||
|
||
<script src="js/verif_email.js"></script>
|
||
<script>
|
||
(function(){
|
||
const form = document.getElementById('form-inscription');
|
||
const cgu = document.getElementById('accept_cgu');
|
||
const err = document.getElementById('cgu-error');
|
||
|
||
form.addEventListener('submit', function(e){
|
||
if (!cgu.checked) {
|
||
e.preventDefault();
|
||
err.style.display = 'block';
|
||
// focus accessible
|
||
cgu.focus();
|
||
} else {
|
||
err.style.display = 'none';
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
</div>
|
||
<footer class="site-footer">
|
||
<div class="container">
|
||
<p><?php echo $translations['copyr'] ?></p>
|
||
</div>
|
||
</footer>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
</body>
|
||
</html>
|
||
|