Sprache_ändern_de,en,sp
Kleines Beispiel wie man die Sprache in Deutsch, englisch oder spanisch. ändert
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete 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>
<link href="https://static.funnelcockpit.com/assets/css/funnel-page.css?v=93dc7c9edcf54b1e" rel="stylesheet" />
<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;}body{}}</style></head>
<body>
<div id="element-hbDPnKy4" class="image" style="text-align:center;"><img src="https://static.funnelcockpit.com/upload/856ebf8b-0093-4d75-bf98-43d767fe5481.png" alt="FunnelCockpit Logo" style="width:160px;"/></div>
<div id="row-CiG9Jys2" class="" style="padding-top:30px;padding-bottom:0;background-image:;background-color:;margin-top:0;">
<div class="container"><div class="row"><div class="col-md-12"><div id="element-Kdm3MSo5" class="" style="background-color:#fff;border-radius:6px;padding-left:35px;padding-right:35px;padding-top:27px;padding-bottom:25px;border-color:;border-width:0;border-style:none;"><div id="element-AH3JTCzc" class="spacing" style="height:8px;"></div>
<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>
<div id="element-8tA7qPci" class="membersAreaLogin" style="text-align:center;"><div><fieldset><form action="#" class="login-form" style="display:block;" 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><p class="text-right"><small><a href="#" class="btn-show-password-forgot-form">Passwort vergessen</a></small></p></form><form action="#" class="password-forgot-form" style="display:none;" data-members-area-id="CzzDPCmqmB2JPMNGG"><div class="form-group"><input type="email" name="email" class="form-control" placeholder="E-Mail Adresse" required=""/></div><div class="form-group"><button type="submit" class="btn btn-block btn-success">Passwort zurücksetzen oder ändern</button></div><p class="text-right"><small><a href="#" class="btn-show-login-form">Einloggen</a></small></p></form><form action="#" class="password-reset-form" style="display:none;" data-members-area-id="CzzDPCmqmB2JPMNGG"><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="Neues Passwort" required=""/></div><div class="form-group"><input type="password" name="password_confirmation" class="form-control" placeholder="Neues Passwort wiederholen" required=""/></div><div class="form-group"><button type="submit" class="btn btn-block btn-success">Passwort zurücksetzen oder ändern</button></div></form><form action="#" class="password-change-form" style="display:none;" data-members-area-id="CzzDPCmqmB2JPMNGG"><div class="form-group"><input type="password" name="password_old" class="form-control" placeholder="Altes Passwort" required=""/></div><div class="form-group"><input type="password" name="password" class="form-control" placeholder="Neues Passwort" required=""/></div><div class="form-group"><input type="password" name="password_confirmation" class="form-control" placeholder="Neues Passwort wiederholen" required=""/></div><div class="form-group"><button type="submit" class="btn btn-block btn-success">Passwort ändern</button></div></form></fieldset></div></div></div><div id="element-wD6Waa4y" class="editor" style="font-size:12px;padding-top:25px;color:rgb(25, 43, 71);margin-top:0;"><div><p style="text-align: center;">© Academy</p>
<p style="text-align: center; opacity: 0.6;"><a style="margin-left: 5px; margin-right: 5px;" href="/impressum" target="_blank" rel="noopener">Impressum</a>- <a href="/datenschutz" target="_blank" rel="noopener">Datenschutz</a></p></div></div></div></div></div></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<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>