<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>
          <router-link
            :to="{ name: 'Minecraft Server'}"
            class="btn btn-outline-primary btn-lg"
          >
            Take a look!
          </router-link>
        </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 on 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>