Sprache ändern de,en,sp

Kleines Beispiel wie man die Sprache in Deutsch, englisch oder spanisch. ändert

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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!