Added Roles, User Management, fixed bugs, added FlexTable component (should be renamed to GridTable), other table components and test code should be removed down the line, added admin function to fix broken data structures.
This commit is contained in:
158
imports/ui/NotAuthorized.svelte
Normal file
158
imports/ui/NotAuthorized.svelte
Normal file
@@ -0,0 +1,158 @@
|
||||
|
||||
<style>
|
||||
.maincontainer {
|
||||
position: relative;
|
||||
top: -50px;
|
||||
transform: scale(0.8);
|
||||
background: url("/public/images/forbidden/HauntedHouseBackground.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 700px 600px;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
margin: 0px auto;
|
||||
display: grid;
|
||||
}
|
||||
.foregroundimg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
top: -230px;
|
||||
z-index: 5;
|
||||
}
|
||||
.errorcode {
|
||||
position: relative;
|
||||
top: -200px;
|
||||
font-family: 'Creepster', cursive;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 6em;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.errortext {
|
||||
position: relative;
|
||||
top: -260px;
|
||||
color: #FBD130;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
.bat {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
transform-origin: center;
|
||||
z-index: 3;
|
||||
}
|
||||
.bat:nth-child(1) {
|
||||
top: 380px;
|
||||
left: 120px;
|
||||
transform: scale(0.5);
|
||||
animation: 13s 1s flyBat1 infinite linear;
|
||||
}
|
||||
.bat:nth-child(2) {
|
||||
top: 280px;
|
||||
left: 80px;
|
||||
transform: scale(0.3);
|
||||
animation: 8s 4s flyBat2 infinite linear;
|
||||
}
|
||||
.bat:nth-child(3) {
|
||||
top: 200px;
|
||||
left: 150px;
|
||||
transform: scale(0.4);
|
||||
animation: 12s 2s flyBat3 infinite linear;
|
||||
}
|
||||
.body {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
top: 12px;
|
||||
}
|
||||
.wing {
|
||||
width: 150px;
|
||||
position: relative;
|
||||
transform-origin: right center;
|
||||
}
|
||||
.leftwing {
|
||||
left: 30px;
|
||||
animation: 0.8s flapLeft infinite ease-in-out;
|
||||
}
|
||||
.rightwing {
|
||||
left: -180px;
|
||||
transform: scaleX(-1);
|
||||
animation: 0.8s flapRight infinite ease-in-out;
|
||||
}
|
||||
@keyframes flapLeft {
|
||||
0% { transform: rotateZ(0); }
|
||||
50% { transform: rotateZ(10deg) rotateY(40deg); }
|
||||
100% { transform: rotateZ(0); }
|
||||
}
|
||||
@keyframes flapRight {
|
||||
0% { transform: scaleX(-1) rotateZ(0); }
|
||||
50% { transform: scaleX(-1) rotateZ(10deg) rotateY(40deg); }
|
||||
100% { transform: scaleX(-1) rotateZ(0); }
|
||||
}
|
||||
@keyframes flyBat1 {
|
||||
0% { opacity: 1; transform: scale(0.5)}
|
||||
25% { opacity: 1; transform: scale(0.5) translate(-400px, -330px) }
|
||||
50% { opacity: 1; transform: scale(0.5) translate(400px, -800px) }
|
||||
75% { opacity: 1; transform: scale(0.5) translate(600px, 100px) }
|
||||
100% { opacity: 1; transform: scale(0.5) translate(100px, 300px) }
|
||||
}
|
||||
@keyframes flyBat2 {
|
||||
0% { opacity: 1; transform: scale(0.3)}
|
||||
25% { opacity: 1; transform: scale(0.3) translate(200px, -330px) }
|
||||
50% { opacity: 1; transform: scale(0.3) translate(-300px, -800px) }
|
||||
75% { opacity: 1; transform: scale(0.3) translate(-400px, 100px) }
|
||||
100% { opacity: 1; transform: scale(0.3) translate(100px, 300px) }
|
||||
}
|
||||
@keyframes flyBat3 {
|
||||
0% { opacity: 1; transform: scale(0.4)}
|
||||
25% { opacity: 1; transform: scale(0.4) translate(-350px, -330px) }
|
||||
50% { opacity: 1; transform: scale(0.4) translate(400px, -800px) }
|
||||
75% { opacity: 1; transform: scale(0.4) translate(-600px, 100px) }
|
||||
100% { opacity: 1; transform: scale(0.4) translate(100px, 300px) }
|
||||
}
|
||||
/*@media only screen and (max-width: 850px) {
|
||||
.maincontainer {
|
||||
transform: scale(0.6);
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
background-size: 600px 400px;
|
||||
}
|
||||
|
||||
.errortext {
|
||||
font-size: 1em;
|
||||
}
|
||||
}*/
|
||||
</style>
|
||||
|
||||
<div className="container" style="background-color: #4d4242">
|
||||
<div class="maincontainer row">
|
||||
<div class="bat">
|
||||
<img class="wing leftwing"
|
||||
src="/images/forbidden/bat-wing.png">
|
||||
<img class="body"
|
||||
src="/images/forbidden/bat-body.png" alt="bat">
|
||||
<img class="wing rightwing"
|
||||
src="/images/forbidden/bat-wing.png">
|
||||
</div>
|
||||
<div class="bat">
|
||||
<img class="wing leftwing"
|
||||
src="/images/forbidden/bat-wing.png">
|
||||
<img class="body"
|
||||
src="/images/forbidden/bat-body.png" alt="bat">
|
||||
<img class="wing rightwing"
|
||||
src="/images/forbidden/bat-wing.png">
|
||||
</div>
|
||||
<div class="bat">
|
||||
<img class="wing leftwing"
|
||||
src="/images/forbidden/bat-wing.png">
|
||||
<img class="body"
|
||||
src="/images/forbidden/bat-body.png" alt="bat">
|
||||
<img class="wing rightwing"
|
||||
src="/images/forbidden/bat-wing.png">
|
||||
</div>
|
||||
<img class="foregroundimg" src="/images/forbidden/HauntedHouseForeground.png" alt="haunted house">
|
||||
|
||||
</div>
|
||||
<h1 class="errorcode">ERROR 403</h1>
|
||||
<div class="errortext">This area is forbidden. Turn back now!</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user