mirror of
https://github.com/MarcZierle/photo-log-frontend.git
synced 2025-04-12 07:04:36 +00:00
111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<div class="banner-bg">
|
|
<div>
|
|
<n-gradient-text :size="40" type="success">
|
|
Zierle-Training
|
|
</n-gradient-text>
|
|
<br>
|
|
<n-gradient-text :size="30" type="info">
|
|
Online Tools
|
|
</n-gradient-text>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="home-menu">
|
|
<n-space justify="space-around" >
|
|
<n-space vertical>
|
|
<h2 class="font-bold text-xl mb-4">Documents</h2>
|
|
<a target="_blank" href='https://dev.marczierle.com/zierle-training/generate_document/modify_document.php?selection=0'>
|
|
<n-button type="primary">All Documents</n-button>
|
|
</a>
|
|
</n-space>
|
|
<n-space vertical>
|
|
<h2 class="font-bold text-xl mb-4">Photo Logs</h2>
|
|
<n-space>
|
|
<router-link :to="{name: 'LogsList'}">
|
|
<n-button type="primary">All Logs</n-button>
|
|
</router-link>
|
|
<router-link :to="{name: 'CreateLog'}">
|
|
<n-button type="info">+ New</n-button>
|
|
</router-link>
|
|
</n-space>
|
|
<n-space class="mt-4">
|
|
<router-link :to="{name: 'CameraCapture'}">
|
|
<n-button secondary circle type="info">
|
|
<n-icon><CameraAdd20Filled /></n-icon>
|
|
</n-button>
|
|
</router-link>
|
|
<router-link :to="{name: 'ManagePhotos'}">
|
|
<n-button>Manage Photos</n-button>
|
|
</router-link>
|
|
</n-space>
|
|
</n-space>
|
|
</n-space>
|
|
<!--
|
|
<n-button @click='set_lang("en")'>EN</n-button>
|
|
<n-button @click='set_lang("de")'>DE</n-button>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CameraAdd20Filled from '@vicons/fluent/CameraAdd20Filled'
|
|
import { loadAndSetLocale } from '@/i18n.js'
|
|
|
|
export default {
|
|
name: 'HomeView',
|
|
components: {
|
|
CameraAdd20Filled
|
|
},
|
|
methods: {
|
|
set_lang(locale) {
|
|
loadAndSetLocale(this.$root.$i18n, locale)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home-menu {
|
|
margin: auto;
|
|
position: relative;
|
|
min-width: 30vw;
|
|
max-width: 60vw;
|
|
min-height: 20vh;
|
|
background-color: white;
|
|
z-index: 1;
|
|
margin-top: 30vh;
|
|
box-shadow: 0 0 50px rgba(0,0,0,0.25);
|
|
border: none;
|
|
border-radius: 0 2em;
|
|
padding: 1em;
|
|
}
|
|
|
|
.banner-bg {
|
|
background-image: url('../assets/images/home_bg.webp');
|
|
background-size: cover;
|
|
background-position: center;
|
|
width: 100%;
|
|
height: 50%;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: -1;
|
|
border-bottom-left-radius: 100% 30%;
|
|
border-bottom-right-radius: 100% 30%;
|
|
box-shadow: 0 0 50px rgba(0,0,0,0.25);
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.banner-bg div {
|
|
margin: auto;
|
|
text-align: center;
|
|
margin-top: 3em;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
</style> |