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