You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.2 KiB
84 lines
2.2 KiB
2 years ago
|
<template>
|
||
|
<!-- QUICK NAV -->
|
||
|
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
|
||
|
<ul class="flex text-2xl p-2 gap-2">
|
||
|
<!-- Home Feed -->
|
||
|
<li class="basis-1/5 rounded-md text-slate-500">
|
||
|
<router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
|
||
|
<fa icon="house-chimney" class="fa-fw"></fa>
|
||
|
</router-link>
|
||
|
</li>
|
||
|
<!-- Search -->
|
||
|
<li class="basis-1/5 rounded-md text-slate-500">
|
||
|
<router-link
|
||
|
:to="{ name: 'discover' }"
|
||
|
class="block text-center py-3 px-1"
|
||
|
>
|
||
|
<fa icon="magnifying-glass" class="fa-fw"></fa>
|
||
|
</router-link>
|
||
|
</li>
|
||
|
<!-- Projects -->
|
||
|
<li class="basis-1/5 rounded-md text-slate-500">
|
||
|
<router-link
|
||
|
:to="{ name: 'projects' }"
|
||
|
class="block text-center py-3 px-1"
|
||
|
>
|
||
|
<fa icon="folder-open" class="fa-fw"></fa>
|
||
|
</router-link>
|
||
|
</li>
|
||
|
<!-- Contacts -->
|
||
|
<li class="basis-1/5 rounded-md text-slate-500">
|
||
|
<router-link
|
||
|
:to="{ name: 'contacts' }"
|
||
|
class="block text-center py-3 px-1"
|
||
|
>
|
||
|
<fa icon="users" class="fa-fw"></fa>
|
||
|
</router-link>
|
||
|
</li>
|
||
|
<!-- Profile -->
|
||
|
<li class="basis-1/5 rounded-md bg-slate-400 text-white">
|
||
|
<router-link
|
||
|
:to="{ name: 'account' }"
|
||
|
class="block text-center py-3 px-1"
|
||
|
>
|
||
|
<fa icon="circle-user" class="fa-fw"></fa>
|
||
|
</router-link>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</nav>
|
||
|
|
||
|
<!-- CONTENT -->
|
||
|
<section id="Content" class="p-6 pb-24">
|
||
|
<!-- Heading -->
|
||
|
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
|
||
|
Your Statistics
|
||
|
</h1>
|
||
|
<div id="scene-container"></div>
|
||
|
<canvas ref="worldCanvas"></canvas>
|
||
|
</section>
|
||
|
</template>
|
||
|
|
||
|
<script lang="ts">
|
||
|
import { Component, Vue } from "vue-facing-decorator";
|
||
|
import { World } from "@/components/World/World.js";
|
||
|
|
||
|
@Component
|
||
|
export default class StatisticsView extends Vue {
|
||
|
mounted() {
|
||
|
const container = document.querySelector("#scene-container");
|
||
|
const world = new World(container);
|
||
|
world.start();
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
#scene-container {
|
||
|
position: fixed;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
left: 0;
|
||
|
top: 0;
|
||
|
}
|
||
|
</style>
|