epsilon_webui/src/pages/OverviewInfo.vue

95 lines
2.6 KiB
Vue

<template>
<div class="pages">
<div class="page">
<div class="panels">
<div
id="steam"
class="panel"
>
<div class="title">
<h2>Steam System</h2>
<hr>
<p>Access the RES Steam web interface for establishing connections to the game system and viewing some statistics.</p>
</div>
</div>
<div
id="minecraft"
class="panel"
>
<div class="title">
<h2>Minecraft Server</h2>
<hr>
<p> Access the RES Minecraft Server web interface for interacting with a variety of game utilities and information.</p>
</div>
</div>
</div>
</div>
<div
id="about"
class="page"
>
<div class="title">
<h1>What is this?</h1>
<p>This is the web interface for Reslate Entertainment Systems. This is <b>not</b> a public service and you may be on this page by mistake. Alternatively, you may be this page completely intentionally!</p>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@use "@/styles/themer";
@use "sass:color";
#steam {
@include themer.themed {
$gradient-color: themer.color-of("background");
background-image:
radial-gradient(
circle at center,
color.change($color: $gradient-color, $alpha: 0.0) 0%,
color.change($color: $gradient-color, $alpha: 0.1) 60%,
color.change($color: $gradient-color, $alpha: 0.2) 100%
),
url("@/assets/images/steam/controller.png");
.contained-title {
color: white;
}
}
}
#minecraft {
@include themer.themed {
$gradient-color: themer.color-of("background");
background-image:
radial-gradient(
circle at center,
color.change($color: $gradient-color, $alpha: 0.2) 0%,
color.change($color: $gradient-color, $alpha: 0.1) 60%,
color.change($color: $gradient-color, $alpha: 0.8, $lightness: 10%) 100%
),
url("@/assets/images/minecraft/landscapes/day.png");
.contained-title {
color: white;
}
}
}
#about {
@include themer.themed {
$gradient-color: themer.color-of("background");
background-image:
radial-gradient(
circle at center,
color.change($color: $gradient-color, $alpha: 0.55) 0%,
color.change($color: $gradient-color, $alpha: 0.5) 60%,
color.change($color: $gradient-color, $alpha: 1, $lightness: 10%) 100%
),
url("@/assets/images/generic_room.png");
.contained-title {
color: white;
}
}
}
</style>