You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Station/www/pages/noconnection.html

82 lines
1.9 KiB
HTML

<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<style>
.noconnection {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 60vw;
max-height: 50vh;
z-index: 0;
}
#text {
z-index: 100;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgba(240,240,240,.7);
padding: 10px;
text-align: center;
}
#text p {
font-size: 110%;
}
#noconnection-horiz {
display: none;
}
#noconnection-vert {
display: block;
}
@media (orientation: landscape) {
#noconnection-horiz {
display: block;
}
#noconnection-vert {
display: none;
}
#text {
max-width: 20vw;
}
}
@media (min-width: 1200px) and (orientation: landscape) {
#noconnection-horiz {
max-width: 40vw;
}
#text {
max-width: 15vw;
}
}
@media (min-width: 2100px) and (orientation: landscape) {
#noconnection-horiz {
max-width: 35vw;
}
#text {
max-width: 20vw;
}
}
@media (min-height: 800px) and (orientation: portrait) {
#text {
max-height: 25vw;
}
}
</style>
<img src="assets/img/no-connection-horizontal.svg" id="noconnection-horiz" class="noconnection" />
<img src="assets/img/no-connection-vertical.svg" id="noconnection-vert" class="noconnection" />
<div id="text">
<h2>No connection</h2>
<p>Could not communicate with the server.</p>
<a href="index.html" class="btn btn-lg btn-primary">Try again</a>
</div>