tethys.backend/resources/js/Components/FirstrunWizard/components/Page0.vue
Arno Kaimbacher 87e9314b00 - added NcModal.vue, NcActions.vue, NcButton.vue, FirstrunWizard.vue, Card.vue, Page0.vue, Page1.vue, Page2.vue, Page3.vue and some icons
- added lime color inside tailwind.config.js
- added some utilities scripts needed for components
- npm updates
- changed postcss.config.js for nesting css styles
- added about function to NavBar.vue
2023-12-21 09:30:21 +01:00

86 lines
2.4 KiB
Vue

<template>
<!--<div class="video-wrapper">
<video ref="video" playsinline autoplay muted @ended="handleEnded">
<source :src="videoWebm" type="video/webm" />
<source :src="videoMp4" type="video/mp4" />
{{ videoFallbackText }}
</video>
</div>-->
<div id="page__wrapper" class="flex flex-col justify-between min-h-520">
<div class="page__scroller">
<h2 id="page__heading" class="text-xl font-bold leading-tight dark:text-slate-400 text-center">
{{ 'Seamless integration with your devices.' }}
</h2>
<!-- <p id="page__subtitle" class="max-w-md m-auto text-center">
{{ subtitleText }}
</p> -->
<div class="page__content">
Discover the power of Tethys, the cutting-edge web backend solution that revolutionizes the way you handle
research
data. At the heart of Tethys lies our meticulously developed research data repository, which leverages
state-of-the-art
CI/CD techniques to deliver a seamless and efficient experience.
</div>
</div>
</div>
</template>
<script lang="ts">
// import { generateFilePath } from '@nextcloud/router';
import CardBox from '@/Components/CardBox.vue';
export default {
name: 'Page0',
components: {
CardBox
},
data() {
return {
// videoMp4: generateFilePath('firstrunwizard', 'img', 'Nextcloud.mp4'),
// videoWebm: generateFilePath('firstrunwizard', 'img', 'Nextcloud.webm'),
};
},
computed: {
// videoFallbackText() {
// return 'Welcome to {cloudName}!', { cloudName: "test" };
// },
},
methods: {
handleEnded() {
this.$emit('next');
},
},
};
</script>
<style scoped lang="css">
/* video {
width: 100%;
height: 100%;
object-fit: cover;
} */
.video-wrapper {
background-color: var(--color-primary-element);
}
.page {
&__scroller {
/* overflow-y: scroll; */
margin-top: calc(var(--default-grid-baseline) * 8);
}
&__content {
display: flex;
flex-wrap: wrap;
gap: calc(var(--default-grid-baseline) * 6);
justify-content: center;
margin: calc(var(--default-grid-baseline) * 10) 0;
}
}
</style>