Hykilpikonna
64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<template>
|
|
<div id="maintenance">
|
|
<div id="maintenance-content">
|
|
<h1>We’ll be back soon!</h1>
|
|
<div>
|
|
<p>Sorry for the inconvenience but we’re performing some maintenance at the moment.
|
|
We’ll be back online shortly!</p>
|
|
|
|
<p>What went wrong: {{json.reason}}</p>
|
|
|
|
<p>Estimated fix: {{json.eta}}</p>
|
|
|
|
<p>— An Average SJP Junior</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component, Prop, Vue} from 'vue-property-decorator';
|
|
|
|
@Component
|
|
export default class Maintenance extends Vue
|
|
{
|
|
@Prop({required: true}) message: any;
|
|
|
|
get json()
|
|
{
|
|
return JSON.parse(this.message);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#maintenance
|
|
{
|
|
z-index: 1000;
|
|
background: white;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
#maintenance-content
|
|
{
|
|
font: 20px Helvetica, sans-serif;
|
|
color: #333;
|
|
|
|
display: block;
|
|
text-align: left;
|
|
margin: 150px;
|
|
|
|
h1
|
|
{
|
|
font-size: 50px;
|
|
}
|
|
|
|
a {color: #dc8100; text-decoration: none;}
|
|
a:hover {color: #333; text-decoration: none;}
|
|
}
|
|
}
|
|
</style>
|