I want do create a multilanguage site (English and German). The toggle works but I don't know how to get the language in order to select the language and to show the words in the right language.
How can I get the value of the toggle (if posible using PHP and not Javascript)? Thanks in advance for any help.
--------------------------------
<!DOCTYPE HTML>
<html lang="de" html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="switch">
<input id="language-toggle" class="check-toggle check-toggle-round-flat" type="checkbox">
<label for="language-toggle"></label>
<span id="de" class="on">DE</span>
<span id="en" class="off">EN</span>
</div>
<?php
$lang = "en";
require_once("Language/lang.".$lang.".php");
?>
<p style="font-size:30px;"><?php echo $language["text1"]; ?></p>
</body>
</html>
---------------lang.de.php-------------------
<?php
$language['text1'] = 'Willkommen';
?>
---------------lang.en.php-------------------
<?php
$language['text1'] = 'Welcome';
?>
---------------------style.css-----------------------
.switch {
position: relative;
display: inline-block;
margin: -4px 0px;
line-height:45px;
}
.switch > span {
position: absolute;
top: 0px;
pointer-events: none;
font-family: 'Helvetica', Arial, sans-serif;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
width: 50%;
line-height:45px;
text-align: center;
}
input.check-toggle-round-flat:checked ~ .off {
color: #333;
}
input.check-toggle-round-flat:checked ~ .on {
color: #fff;
}
.switch > span.on {
left: 0;
padding-left: 2px;
color: #333;
}
.switch > span.off {
right: 0;
padding-right: 4px;
color: #fff;
}
.check-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.check-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.check-toggle-round-flat + label {
padding: 2px;
width: 97px;
height: 35px;
background-color: #333;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
input.check-toggle-round-flat + label:before, input.check-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "";
}
input.check-toggle-round-flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #333;
-webkit-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
input.check-toggle-round-flat + label:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 48px;
background-color: #fff;
-webkit-border-radius: 52px;
-moz-border-radius: 52px;
-ms-border-radius: 52px;
-o-border-radius: 52px;
border-radius: 52px;
-webkit-transition: margin 0.2s;
-moz-transition: margin 0.2s;
-o-transition: margin 0.2s;
transition: margin 0.2s;
}
input.check-toggle-round-flat:checked + label {
}
input.check-toggle-round-flat:checked + label:after {
margin-left: 44px;
}
