Kleines Beispiel wie man die Sprache in Deutsch, englisch oder spanisch. ändert
Code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Login</title>
<style>
#language{
width:300px;
display:flex;
transition:500ms background-position;
background-position:-100px 0;
background-size:500px;
background-image:linear-gradient(90deg, green 0%,green 40%,red 40%,red 60%, green 60% ,green 100%);
margin:0 auto;
}
#language p{
flex:1;
background:none;
padding:2px 5px;
margin:0 4px;
color:white;
}
</style>
<style>@media(min-width:992px){.container{width:600px;}}.text-muted{display:none!important;}
img{
margin-top:50px
}
.btn-show-register-form{display:none!important;}
.btn-success {color: #fff;background-color: rgb(72, 133, 251);border-color: rgb(72, 133, 251);padding: 12px;font-size: 17px;font-weight:600}
input {padding: 20px!important;}
.btn-success:hover,.btn-success:active,.btn-success:visited,.btn-success:focus {color: #fff;background-color: rgb(72, 133, 251)!important;border-color: rgb(72, 133, 251)
!important;padding: 12px;font-size: 17px;}p{font-weight:500;}a{color:rgb(25, 43, 71);}a:hover,a:focus{color:rgb(72, 133, 251);}@media(max-width:991px){#element-HqGwZgKq{font-size:16px!important;}#element-wD6Waa4y{font-size:12px!important;}
.form .form-control:not(.input-sm), .form-control:not(.input-sm) {
font-size: 17px;
height: 48px;
padding: 10px 16px;
}
.form .form-control, .form-control {
appearance: none;
border: 1px solid #dadada;
border-radius: 5px;
box-shadow: none;
}
.form-control {
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
height: 34px;
padding: 6px 12px;
-webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
width: 100%;
}
.form-control, output {
color: #555;
display: block;
font-size: 14px;
line-height: 1.42857;
}
input ,form button{
padding: 20px !important;
width: 90% !important;
}
</style>
</head>
<body>
<div class="container">
<button data-lan="0" id="language">
<p id="laspa" class="noakt">Spanisch</p>
<p id="ladeu" class="akt">Deusch</p>
<p id="laeng" class="noakt">Englisch</p></button>
<div id="element-HqGwZgKq" class="editor" style="color:rgb(25, 43, 71);font-size:20px;margin-bottom:25px;"><div><p style="text-align: center;"><strong>Logge dich in deinen Account ein...</strong></p></div></div>
<fieldset>
<form action="#" class="login-form" data-members-area-id="CzzDPCmqmB2JPMNGG" data-redirect-url="/layout/"><div class="form-group"><input type="email" name="email" class="form-control" placeholder="E-Mail Adresse" required=""/></div><div class="form-group"><input type="password" name="password" class="form-control" placeholder="Passwort" required=""/></div><div class="form-group"><button type="submit" class="btn btn-block btn-success">Einloggen</button></div></form>
</fieldset></div>
<script >
var texte = [['Logge dich in deinen Account ein...', 'Ingrese a su cuenta', 'Log into your account'], [
'Einloggen', 'iniciar sesión', 'log in'],
['Passwort vergessen', 'Contraseña olvidada', 'Forgot Password'],
['Passwort', 'Contraseña', 'password'],
['Passwort zurücksetzen oder ändern', 'Restablecer o cambiar contraseña', 'Reset or change password'],
['Passwort ändern', 'Cambia la contraseña', 'Change Password'],
['Impressum', 'imprimir', 'imprint'],
['Datenschutz', 'intimidad', 'privacy'],
['Neues Passwort wiederholen', 'repita la nueva contraseña', 'Repeat new password'],
['Altes Passwort', 'Contraseña anterior', 'Old Password'],
['Neues Passwort', 'Nueva contraseña', 'New Password'],
['E-Mail Adresse', 'dirección de correo electrónico', 'E-mail address']];
function change_lang(sV, ar, sI, rI) {
var rV = null;
for (var i = 0; i < ar.length; i++) {
//if (window.CP.shouldStopExecution(0)) break;
if (ar[i][sI] == sV) {
rV = ar[i][rI];
break;
}
}//window.CP.exitedLoop(0);
return rV;
}
var bac, fun;
var but = document.getElementById('language');
var check_p = but.querySelectorAll('p').forEach(function (a) {
a.addEventListener('click', function () {
let such_text = a.parentElement.getAttribute('data-lan');
if (a.id == 'laspa') {
bac = '-200px 0px';
fun = 1;
} else if (a.id == 'ladeu') {
bac = '-100px 0px';
fun = 0;
}if (a.id == 'laeng') {
fun = 2;
bac = '0px 0px';
}
but.style.backgroundPosition = bac;
a.parentElement.setAttribute('data-lan', fun);
var ele2 = document.querySelectorAll('*');
ele2.forEach(function (el) {
let att = el.attributes;
if (el.textContent) {
d = change_lang(el.innerHTML, texte, such_text, fun);
if (d != null) {
el.innerText = d; // übersetung einfügen
}
}
for (x = 0; x <= att.length - 1; x++) {
//if (window.CP.shouldStopExecution(1)) break;
if (att[x].name == 'placeholder') {
d = change_lang(att[x].value, texte, such_text, fun);
if (d != null) {
el.placeholder = d;
}
}
if (att[x].name == 'value') {
d = change_lang(att[x].value, texte, such_text, fun);
if (d != null) {
el.value = d;
}
}
// }window.CP.exitedLoop(1);
}
});
});
})
</script>
</body>
</html>