<commit_before><template>
  <div class="error-page window-height window-width bg-light column items-center no-wrap">
    <div class="error-code bg-primary flex items-center justify-center"/>
    <div>
      <div class="error-card shadow-4 bg-white column items-center justify-center no-wrap">
        <q-icon
          name="error_outline"
          color="grey-5"
        />
        <slot>
          <p class="caption text-center">
            {{ $t('NOT_FOUND.EXPLANATION') }}
          </p>
        </slot>
        <p class="text-center group">
          <q-btn
            v-if="canGoBack"
            color="primary"
            push
            @click="goBack"
            icon="keyboard_arrow_left"
          >
            {{ $t('BUTTON.BACK') }}
          </q-btn>
          <q-btn
            color="primary"
            push
            @click="$router.replace('/')"
            icon-right="home"
          >
            {{ $t('NOT_FOUND.HOME') }}
          </q-btn>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { QBtn, QIcon } from 'quasar'

export default {
  components: {
    QBtn,
    QIcon,
  },
  data () {
    return {
      canGoBack: window.history.length > 1,
    }
  },
  methods: {
    goBack () {
      window.history.go(-1)
    },
  },
}
</script>

<style scoped lang="stylus">
.error-page
  .error-code
    height 50vh
    width 100%
    padding-top 15vh
    font-size 30vmax
    color rgba(255, 255, 255, .2)
    overflow hidden
  .error-card
    border-radius 2px
    margin-top -50px
    width 80vw
    max-width 600px
    padding 25px
    > i
      font-size 5rem
</style><commit_msg>more pretty 404-page (#813)<commit_after><template>
  <div class="error-page window-height window-width bg-primary column items-center no-wrap">
    <div class="error-code bg-light flex items-center justify-center">
      <img :src="rollingImg">
    </div>
    <div class="error-card shadow-4 bg-white column items-center justify-center no-wrap">
      <h1 class="accent-font">Oooooops!</h1>
      <slot>
        <p class="caption text-center">
          {{ $t('NOT_FOUND.EXPLANATION') }}
        </p>
      </slot>
      <p class="text-center group">
        <q-btn
          v-if="canGoBack"
          color="secondary"
          push
          @click="goBack"
          icon="keyboard_arrow_left"
        >
          {{ $t('BUTTON.BACK') }}
        </q-btn>
        <q-btn
          color="secondary"
          push
          @click="$router.replace('/')"
          icon-right="fa-home"
        >
          {{ $t('NOT_FOUND.HOME') }}
        </q-btn>
      </p>
    </div>
  </div>
</template>

<script>
import { QBtn, QIcon } from 'quasar'
import rollingImg from 'assets/rolling.png'

export default {
  components: {
    QBtn,
    QIcon,
  },
  data () {
    return {
      canGoBack: window.history.length > 1,
      rollingImg,
    }
  },
  methods: {
    goBack () {
      window.history.go(-1)
    },
  },
}
</script>

<style scoped lang="stylus">
.error-page
  .error-code
    height 45vh
    margin-top -10vh
    width 200%
    padding-top 15vh
    font-size 30vmax
    color rgba(255, 255, 255, .2)
    overflow hidden
    transform rotate(-5deg)
    z-index 0
    position relative
    img
      width 30%
      min-width: 400px
      max-width 700px
      transform scaleX(-1) rotate(-17deg)
      position absolute
      bottom -20%
      left 40%
  .error-card
    border-radius 2px
    margin-top -30px
    width 80vw
    max-width 600px
    padding 25px
    z-index 10
    > h1
      font-size 3.2em
      margin-bottom 0
    > i
      font-size 5rem
</style>
{'fraction_non_alphanumeric': 0.1391880695940348, 'fraction_numerical': 0.027616680475006903, 'mean_word_length': 1.7377173091458806, 'pattern_counts': {'":': 0, '<': 52, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1529225', 'n_tokens_mistral': 1298, 'n_tokens_neox': 1206, 'n_words': 262}