adding german option
This commit is contained in:
@ -10,47 +10,71 @@
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-size: 1vw;
|
||||
font-size: 1.5vh;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 3/2) {
|
||||
body {
|
||||
font-size: 1vh;
|
||||
font-size: 1.5vh;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.centerbox {
|
||||
background-color: black;
|
||||
border-style: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width: 15em;
|
||||
height: 10em;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: black;
|
||||
border-color: white;
|
||||
border-width: 0.2em;
|
||||
border-style: solid;
|
||||
max-width: 15em;
|
||||
max-height: 3em;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
position: relative;
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
</style>
|
||||
// Original viewport definition, note the "id" that I use to modify the viewport later on:
|
||||
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
|
||||
|
||||
<script>
|
||||
// Global boolean variable that holds the current orientation
|
||||
var pageInPortraintMode;
|
||||
|
||||
// Listen for window resizes to detect orientation changes
|
||||
window.addEventListener("resize", windowSizeChanged);
|
||||
|
||||
// Set the global orientation variable as soon as the page loads
|
||||
addEventListener("load", function() {
|
||||
pageInPortraintMode = window.innerHeight > window.innerWidth;
|
||||
document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
|
||||
})
|
||||
|
||||
// Adjust viewport values only if orientation has changed (not on every window resize)
|
||||
function windowSizeChanged() {
|
||||
if (((pageInPortraintMode === true) && (window.innerHeight < window.innerWidth)) || ((pageInPortraintMode === false) && (window.innerHeight > window.innerWidth))) {
|
||||
pageInPortraintMode = window.innerHeight > window.innerWidth;
|
||||
document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<info-box id="infobox"></info-box>
|
||||
<server-connection id="server-connection" grid_id="grid" url="wss://the-cake-is-a-lie.net:8765"></server-connection>
|
||||
<crossword-grid id="grid" infobox_id="infobox" width="10" height="10"></crossword-grid>
|
||||
<script type="module" src="./main.js"></script>
|
||||
|
||||
<div class="centerbox">
|
||||
<h3>Select the language:</h3>
|
||||
<a href="./german.html"> <div class="box"> German </div> </a>
|
||||
<a href="./english.html"> <div class="box"> English </div> </a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
Reference in New Issue
Block a user