basic chart menu finished
This commit is contained in:
parent
38e306a903
commit
d82eb440e8
@ -11,6 +11,7 @@
|
|||||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"chart.js": "^4.2.0",
|
||||||
"pinia": "^2.0.28",
|
"pinia": "^2.0.28",
|
||||||
"primeflex": "^3.3.0",
|
"primeflex": "^3.3.0",
|
||||||
"primeicons": "^6.0.1",
|
"primeicons": "^6.0.1",
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import WelcomeItem from './WelcomeItem.vue';
|
import WelcomeItem from './WelcomeItem.vue';
|
||||||
import DocumentationIcon from './icons/IconDocumentation.vue';
|
import DocumentationIcon from './icons/IconDocumentation.vue';
|
||||||
import ToolingIcon from './icons/IconTooling.vue';
|
import ToolingIcon from './icons/IconTooling.vue';
|
||||||
import EcosystemIcon from './icons/IconEcosystem.vue';
|
import EcosystemIcon from './icons/IconEcosystem.vue';
|
||||||
import CommunityIcon from './icons/IconCommunity.vue';
|
import CommunityIcon from './icons/IconCommunity.vue';
|
||||||
import SupportIcon from './icons/IconSupport.vue';
|
import SupportIcon from './icons/IconSupport.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div data-testid="greetings"><h1>You did it!</h1></div>
|
<!-- <div data-testid="greetings"><h1>You did it!</h1></div>
|
||||||
|
|
||||||
<WelcomeItem>
|
<WelcomeItem>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
@ -174,5 +174,6 @@
|
|||||||
rel="noopener"
|
rel="noopener"
|
||||||
>becoming a sponsor</a
|
>becoming a sponsor</a
|
||||||
>.
|
>.
|
||||||
</WelcomeItem>
|
</WelcomeItem> -->
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,295 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import RadioButton from 'primevue/radiobutton';
|
|
||||||
import Button from 'primevue/button';
|
|
||||||
import InputSwitch from 'primevue/inputswitch';
|
|
||||||
import Sidebar from 'primevue/sidebar';
|
|
||||||
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useLayout } from '@/layout/composables/layout';
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
simple: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const scales = ref([12, 13, 14, 15, 16]);
|
|
||||||
const visible = ref(false);
|
|
||||||
|
|
||||||
const { changeThemeSettings, setScale, layoutConfig } = useLayout();
|
|
||||||
|
|
||||||
const onConfigButtonClick = () => {
|
|
||||||
visible.value = !visible.value;
|
|
||||||
};
|
|
||||||
const onChangeTheme = (theme, mode) => {
|
|
||||||
const elementId = 'theme-css';
|
|
||||||
const linkElement = document.getElementById(elementId);
|
|
||||||
const cloneLinkElement = linkElement.cloneNode(true);
|
|
||||||
const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, theme);
|
|
||||||
cloneLinkElement.setAttribute('id', elementId + '-clone');
|
|
||||||
cloneLinkElement.setAttribute('href', newThemeUrl);
|
|
||||||
cloneLinkElement.addEventListener('load', () => {
|
|
||||||
linkElement.remove();
|
|
||||||
cloneLinkElement.setAttribute('id', elementId);
|
|
||||||
changeThemeSettings(theme, mode === 'dark');
|
|
||||||
});
|
|
||||||
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
|
|
||||||
};
|
|
||||||
const decrementScale = () => {
|
|
||||||
setScale(layoutConfig.scale.value - 1);
|
|
||||||
applyScale();
|
|
||||||
};
|
|
||||||
const incrementScale = () => {
|
|
||||||
setScale(layoutConfig.scale.value + 1);
|
|
||||||
applyScale();
|
|
||||||
};
|
|
||||||
const applyScale = () => {
|
|
||||||
document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<button
|
|
||||||
class="layout-config-button p-link"
|
|
||||||
type="button"
|
|
||||||
@click="onConfigButtonClick()"
|
|
||||||
>
|
|
||||||
<i class="pi pi-cog"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<Sidebar
|
|
||||||
v-model:visible="visible"
|
|
||||||
position="right"
|
|
||||||
:transitionOptions="'.3s cubic-bezier(0, 0, 0.2, 1)'"
|
|
||||||
class="layout-config-sidebar w-20rem"
|
|
||||||
>
|
|
||||||
<h5>Scale</h5>
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<Button
|
|
||||||
icon="pi pi-minus"
|
|
||||||
type="button"
|
|
||||||
@click="decrementScale()"
|
|
||||||
class="p-button-text p-button-rounded w-2rem h-2rem mr-2"
|
|
||||||
:disabled="layoutConfig.scale.value === scales[0]"
|
|
||||||
></Button>
|
|
||||||
<div class="flex gap-2 align-items-center">
|
|
||||||
<i
|
|
||||||
class="pi pi-circle-fill text-300"
|
|
||||||
v-for="s in scales"
|
|
||||||
:key="s"
|
|
||||||
:class="{ 'text-primary-500': s === layoutConfig.scale.value }"
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
icon="pi pi-plus"
|
|
||||||
type="button"
|
|
||||||
pButton
|
|
||||||
@click="incrementScale()"
|
|
||||||
class="p-button-text p-button-rounded w-2rem h-2rem ml-2"
|
|
||||||
:disabled="layoutConfig.scale.value === scales[scales.length - 1]"
|
|
||||||
></Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template v-if="!simple">
|
|
||||||
<h5>Menu Type</h5>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="field-radiobutton flex-1">
|
|
||||||
<RadioButton
|
|
||||||
name="menuMode"
|
|
||||||
value="static"
|
|
||||||
v-model="layoutConfig.menuMode.value"
|
|
||||||
inputId="mode1"
|
|
||||||
></RadioButton>
|
|
||||||
<label for="mode1">Static</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-radiobutton flex-1">
|
|
||||||
<RadioButton
|
|
||||||
name="menuMode"
|
|
||||||
value="overlay"
|
|
||||||
v-model="layoutConfig.menuMode.value"
|
|
||||||
inputId="mode2"
|
|
||||||
></RadioButton>
|
|
||||||
<label for="mode2">Overlay</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="!simple">
|
|
||||||
<h5>Input Style</h5>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="field-radiobutton flex-1">
|
|
||||||
<RadioButton
|
|
||||||
name="inputStyle"
|
|
||||||
value="outlined"
|
|
||||||
v-model="layoutConfig.inputStyle.value"
|
|
||||||
inputId="outlined_input"
|
|
||||||
></RadioButton>
|
|
||||||
<label for="outlined_input">Outlined</label>
|
|
||||||
</div>
|
|
||||||
<div class="field-radiobutton flex-1">
|
|
||||||
<RadioButton
|
|
||||||
name="inputStyle"
|
|
||||||
value="filled"
|
|
||||||
v-model="layoutConfig.inputStyle.value"
|
|
||||||
inputId="filled_input"
|
|
||||||
></RadioButton>
|
|
||||||
<label for="filled_input">Filled</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Ripple Effect</h5>
|
|
||||||
<InputSwitch v-model="layoutConfig.ripple.value"></InputSwitch>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<h5>PrimeOne Design - 2021</h5>
|
|
||||||
<div class="grid">
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('saga-blue', 'light')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/saga-blue.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Saga Blue"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('saga-green', 'light')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/saga-green.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Saga Green"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('saga-orange', 'light')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/saga-orange.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Saga Orange"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('saga-purple', 'light')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/saga-purple.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Saga Purple"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('vela-blue', 'dark')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/vela-blue.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Vela Blue"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('vela-green', 'dark')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/vela-green.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Vela Green"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('vela-orange', 'dark')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/vela-orange.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Vela Orange"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('vela-purple', 'dark')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/vela-purple.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Vela Purple"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('arya-blue', 'dark')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/arya-blue.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Arya Blue"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('arya-green', 'dark')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/arya-green.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Arya Green"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('arya-orange', 'dark')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/arya-orange.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Arya Orange"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<button
|
|
||||||
class="p-link w-2rem h-2rem"
|
|
||||||
@click="onChangeTheme('arya-purple', 'dark')"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/layout/images/themes/arya-purple.png"
|
|
||||||
class="w-2rem h-2rem"
|
|
||||||
alt="Arya Purple"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Sidebar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@ -1,24 +1,23 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { computed, watch, ref } from 'vue';
|
import { computed, watch, ref } from 'vue';
|
||||||
import AppTopbar from './AppTopbar.vue';
|
import AppTopbar from './AppTopbar.vue';
|
||||||
import AppFooter from './AppFooter.vue';
|
import AppFooter from './AppFooter.vue';
|
||||||
import AppSidebar from './AppSidebar.vue';
|
import AppSidebar from './AppSidebar.vue';
|
||||||
import AppConfig from './AppConfig.vue';
|
import { useLayout } from '@/layout/composables/layout';
|
||||||
import { useLayout } from '@/layout/composables/layout';
|
|
||||||
|
|
||||||
const { layoutConfig, layoutState, isSidebarActive } = useLayout();
|
const { layoutConfig, layoutState, isSidebarActive } = useLayout();
|
||||||
|
|
||||||
const outsideClickListener = ref(null);
|
const outsideClickListener = ref(null);
|
||||||
|
|
||||||
watch(isSidebarActive, (newVal) => {
|
watch(isSidebarActive, (newVal) => {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
bindOutsideClickListener();
|
bindOutsideClickListener();
|
||||||
} else {
|
} else {
|
||||||
unbindOutsideClickListener();
|
unbindOutsideClickListener();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const containerClass = computed(() => {
|
const containerClass = computed(() => {
|
||||||
return {
|
return {
|
||||||
'layout-theme-light': layoutConfig.darkTheme.value === 'light',
|
'layout-theme-light': layoutConfig.darkTheme.value === 'light',
|
||||||
'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
|
'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
|
||||||
@ -30,8 +29,8 @@
|
|||||||
'p-input-filled': layoutConfig.inputStyle.value === 'filled',
|
'p-input-filled': layoutConfig.inputStyle.value === 'filled',
|
||||||
'p-ripple-disabled': !layoutConfig.ripple.value
|
'p-ripple-disabled': !layoutConfig.ripple.value
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
const bindOutsideClickListener = () => {
|
const bindOutsideClickListener = () => {
|
||||||
if (!outsideClickListener.value) {
|
if (!outsideClickListener.value) {
|
||||||
outsideClickListener.value = (event) => {
|
outsideClickListener.value = (event) => {
|
||||||
if (isOutsideClicked(event)) {
|
if (isOutsideClicked(event)) {
|
||||||
@ -42,26 +41,23 @@
|
|||||||
};
|
};
|
||||||
document.addEventListener('click', outsideClickListener.value);
|
document.addEventListener('click', outsideClickListener.value);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const unbindOutsideClickListener = () => {
|
const unbindOutsideClickListener = () => {
|
||||||
if (outsideClickListener.value) {
|
if (outsideClickListener.value) {
|
||||||
document.removeEventListener('click', outsideClickListener);
|
document.removeEventListener('click', outsideClickListener);
|
||||||
outsideClickListener.value = null;
|
outsideClickListener.value = null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const isOutsideClicked = (event) => {
|
const isOutsideClicked = (event) => {
|
||||||
const sidebarEl = document.querySelector('.layout-sidebar');
|
const sidebarEl = document.querySelector('.layout-sidebar');
|
||||||
const topbarEl = document.querySelector('.layout-menu-button');
|
const topbarEl = document.querySelector('.layout-menu-button');
|
||||||
|
|
||||||
return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
|
return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="layout-wrapper" :class="containerClass">
|
||||||
class="layout-wrapper"
|
|
||||||
:class="containerClass"
|
|
||||||
>
|
|
||||||
<app-topbar></app-topbar>
|
<app-topbar></app-topbar>
|
||||||
<div class="layout-sidebar">
|
<div class="layout-sidebar">
|
||||||
<app-sidebar></app-sidebar>
|
<app-sidebar></app-sidebar>
|
||||||
@ -77,4 +73,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,33 +1,28 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
import AppMenuItem from './AppMenuItem.vue';
|
import AppMenuItem from './AppMenuItem.vue';
|
||||||
|
|
||||||
const model = ref([
|
const model = ref([
|
||||||
{
|
{
|
||||||
label: 'Home',
|
label: 'Home',
|
||||||
items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }]
|
items: [
|
||||||
|
{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/home' },
|
||||||
|
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/charts' }]
|
||||||
|
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul class="layout-menu">
|
<ul class="layout-menu">
|
||||||
<template
|
<template v-for="(item, i) in model" :key="item">
|
||||||
v-for="(item, i) in model"
|
<app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
|
||||||
:key="item"
|
<li v-if="item.separator" class="menu-separator"></li>
|
||||||
>
|
|
||||||
<app-menu-item
|
|
||||||
v-if="!item.separator"
|
|
||||||
:item="item"
|
|
||||||
:index="i"
|
|
||||||
></app-menu-item>
|
|
||||||
<li
|
|
||||||
v-if="item.separator"
|
|
||||||
class="menu-separator"
|
|
||||||
></li>
|
|
||||||
</template>
|
</template>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
@ -4,8 +4,10 @@ import { createPinia } from 'pinia';
|
|||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import router from './router';
|
import router from './router';
|
||||||
|
|
||||||
import PrimeVue from 'primevue/config';
|
|
||||||
|
|
||||||
|
import PrimeVue from 'primevue/config';
|
||||||
|
import Chart from 'primevue/chart';
|
||||||
|
import Dropdown from 'primevue/dropdown';
|
||||||
import '@/assets/styles.scss';
|
import '@/assets/styles.scss';
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
@ -15,4 +17,9 @@ app.use(router);
|
|||||||
|
|
||||||
app.use(PrimeVue, { ripple: true });
|
app.use(PrimeVue, { ripple: true });
|
||||||
|
|
||||||
|
app.component('Chart', Chart);
|
||||||
|
app.component('Dropdown', Dropdown);
|
||||||
|
|
||||||
app.mount('#app');
|
app.mount('#app');
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,25 +1,36 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router';
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
import AppLayout from '@/layout/AppLayout.vue';
|
import AppLayout from '@/layout/AppLayout.vue';
|
||||||
import HomeView from '../views/HomeView.vue';
|
import HomeView from '../views/HomeView.vue';
|
||||||
|
import Landing from '../views/Landing.vue';
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
|
component: Landing
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/home',
|
||||||
component: AppLayout,
|
component: AppLayout,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/home',
|
||||||
name: 'home',
|
name: 'Home',
|
||||||
component: HomeView
|
component: HomeView
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/charts',
|
||||||
|
name: 'charts',
|
||||||
|
component: () => import('@/views/menu/Chart.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/about',
|
||||||
name: 'about',
|
name: 'about',
|
||||||
// route level code-splitting
|
// route level code-splitting
|
||||||
// this generates a separate chunk (About.[hash].js) for this route
|
// this generates a separate chunk (About.[hash].js) for this route
|
||||||
// which is lazy-loaded when the route is visited.
|
// which is lazy-loaded when the route is visited.
|
||||||
|
|
||||||
component: () => import('../views/AboutView.vue')
|
component: () => import('../views/AboutView.vue')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
484
frontend/src/views/Landing.vue
Normal file
484
frontend/src/views/Landing.vue
Normal file
@ -0,0 +1,484 @@
|
|||||||
|
<script setup>
|
||||||
|
import { useLayout } from '@/layout/composables/layout';
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const { layoutConfig, contextPath } = useLayout();
|
||||||
|
|
||||||
|
const smoothScroll = (id) => {
|
||||||
|
document.querySelector(id).scrollIntoView({
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const logoUrl = computed(() => {
|
||||||
|
return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="surface-0 flex justify-content-center">
|
||||||
|
<div id="home" class="landing-wrapper overflow-hidden">
|
||||||
|
<div
|
||||||
|
class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static mb-3">
|
||||||
|
<a class="flex align-items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50"
|
||||||
|
class="mr-0 lg:mr-2" /><span
|
||||||
|
class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span> </a>
|
||||||
|
<a class="cursor-pointer block lg:hidden text-700 p-ripple" v-ripple
|
||||||
|
v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
|
||||||
|
<i class="pi pi-bars text-4xl"></i>
|
||||||
|
</a>
|
||||||
|
<div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2"
|
||||||
|
style="top: 120px">
|
||||||
|
<ul
|
||||||
|
class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
|
||||||
|
<li>
|
||||||
|
<a @click="smoothScroll('#hero')"
|
||||||
|
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
||||||
|
<span>Home</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a @click="smoothScroll('#features')"
|
||||||
|
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
||||||
|
<span>Features</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a @click="smoothScroll('#highlights')"
|
||||||
|
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
||||||
|
<span>Highlights</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a @click="smoothScroll('#pricing')"
|
||||||
|
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
||||||
|
<span>Pricing</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
|
||||||
|
<Button label="Login"
|
||||||
|
class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></Button>
|
||||||
|
<Button label="Register"
|
||||||
|
class="p-button-rounded border-none ml-5 font-light text-white line-height-2 bg-blue-500"></Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="hero" class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden"
|
||||||
|
style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)">
|
||||||
|
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
|
||||||
|
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem
|
||||||
|
integer</span>eget magna fermentum</h1>
|
||||||
|
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed
|
||||||
|
cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
|
||||||
|
<Button label="Get Started"
|
||||||
|
class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal text-white line-height-3 px-3"></Button>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-content-center md:justify-content-end">
|
||||||
|
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
|
||||||
|
<div class="grid justify-content-center">
|
||||||
|
<div class="col-12 text-center mt-8 mb-4">
|
||||||
|
<h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
|
||||||
|
<span class="text-600 text-2xl">Placerat in egestas erat...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))">
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-yellow-200 mb-3"
|
||||||
|
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Easy to Use</h5>
|
||||||
|
<span class="text-600">Posuere morbi leo urna molestie.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))">
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-cyan-200 mb-3"
|
||||||
|
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Fresh Design</h5>
|
||||||
|
<span class="text-600">Semper risus in hendrerit.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))">
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-indigo-200"
|
||||||
|
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Well Documented</h5>
|
||||||
|
<span class="text-600">Non arcu risus quis varius quam quisque.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))">
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3"
|
||||||
|
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Responsive Layout</h5>
|
||||||
|
<span class="text-600">Nulla malesuada pellentesque elit.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))">
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-orange-200 mb-3"
|
||||||
|
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Clean Code</h5>
|
||||||
|
<span class="text-600">Condimentum lacinia quis vel eros.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))">
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-pink-200 mb-3"
|
||||||
|
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Dark Mode</h5>
|
||||||
|
<span class="text-600">Convallis tellus id interdum velit laoreet.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))">
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-teal-200 mb-3"
|
||||||
|
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Ready to Use</h5>
|
||||||
|
<span class="text-600">Mauris sit amet massa vitae.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))">
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-blue-200 mb-3"
|
||||||
|
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Modern Practices</h5>
|
||||||
|
<span class="text-600">Elementum nibh tellus molestie nunc non.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))">
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-purple-200 mb-3"
|
||||||
|
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Privacy</h5>
|
||||||
|
<span class="text-600">Neque egestas congue quisque.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 mt-8 mb-8 p-2 md:p-8"
|
||||||
|
style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)">
|
||||||
|
<div
|
||||||
|
class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
|
||||||
|
<h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
|
||||||
|
<span class="text-gray-600 text-2xl">Peak Interactive</span>
|
||||||
|
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4"
|
||||||
|
style="max-width: 800px">
|
||||||
|
“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||||
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.”
|
||||||
|
</p>
|
||||||
|
<img src="/demo/images/landing/peak-logo.svg" class="mt-4" alt="Company logo" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="highlights" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
|
||||||
|
<div class="text-center">
|
||||||
|
<h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
|
||||||
|
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid mt-8 pb-2 md:pb-8">
|
||||||
|
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0"
|
||||||
|
style="border-radius: 8px">
|
||||||
|
<img src="/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end text-center lg:text-right">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-purple-200 align-self-center lg:align-self-end"
|
||||||
|
style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
|
||||||
|
</div>
|
||||||
|
<h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2>
|
||||||
|
<span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width: 650px">Lectus arcu
|
||||||
|
bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna
|
||||||
|
sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid my-8 pt-2 md:pt-8">
|
||||||
|
<div class="col-12 lg:col-6 my-auto flex flex-column text-center lg:text-left lg:align-items-start">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start"
|
||||||
|
style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
|
||||||
|
</div>
|
||||||
|
<h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
|
||||||
|
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px">Adipiscing
|
||||||
|
commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero.
|
||||||
|
Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod
|
||||||
|
elementum nisi.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0"
|
||||||
|
style="border-radius: 8px">
|
||||||
|
<img src="/demo/images/landing/mockup-desktop.svg" class="w-11" alt="mockup" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
|
||||||
|
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid justify-content-between mt-8 md:mt-0">
|
||||||
|
<div class="col-12 lg:col-4 p-0 md:p-3">
|
||||||
|
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
|
||||||
|
style="border-radius: 10px">
|
||||||
|
<h3 class="text-900 text-center my-5">Free</h3>
|
||||||
|
<img src="/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free" />
|
||||||
|
<div class="my-5 text-center">
|
||||||
|
<span class="text-5xl font-bold mr-2 text-900">$0</span>
|
||||||
|
<span class="text-600">per month</span>
|
||||||
|
<Button label="Get Started"
|
||||||
|
class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
|
||||||
|
</div>
|
||||||
|
<Divider class="w-full bg-surface-200"></Divider>
|
||||||
|
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Free Shipping</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||||
|
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
|
||||||
|
style="border-radius: 10px">
|
||||||
|
<h3 class="text-900 text-center my-5">Startup</h3>
|
||||||
|
<img src="/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup" />
|
||||||
|
<div class="my-5 text-center">
|
||||||
|
<span class="text-5xl font-bold mr-2 text-900">$1</span>
|
||||||
|
<span class="text-600">per month</span>
|
||||||
|
<Button label="Try Free"
|
||||||
|
class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
|
||||||
|
</div>
|
||||||
|
<Divider class="w-full bg-surface-200"></Divider>
|
||||||
|
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Free Shipping</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||||
|
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
|
||||||
|
style="border-radius: 10px">
|
||||||
|
<h3 class="text-900 text-center my-5">Enterprise</h3>
|
||||||
|
<img src="/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise" />
|
||||||
|
<div class="my-5 text-center">
|
||||||
|
<span class="text-5xl font-bold mr-2 text-900">$999</span>
|
||||||
|
<span class="text-600">per month</span>
|
||||||
|
<Button label="Get a Quote"
|
||||||
|
class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
|
||||||
|
</div>
|
||||||
|
<Divider class="w-full bg-surface-200"></Divider>
|
||||||
|
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Free Shipping</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
|
||||||
|
<div class="grid justify-content-between">
|
||||||
|
<div class="col-12 md:col-2" style="margin-top: -1.5rem">
|
||||||
|
<a @click="smoothScroll('#home')"
|
||||||
|
class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3 cursor-pointer">
|
||||||
|
<img :src="logoUrl" alt="footer sections" width="50" height="50" class="mr-2" />
|
||||||
|
<h4 class="font-medium text-3xl text-900">SAKAI</h4>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-10 lg:col-7">
|
||||||
|
<div class="grid text-center md:text-left">
|
||||||
|
<div class="col-12 md:col-3">
|
||||||
|
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor
|
||||||
|
Relations</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||||
|
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||||
|
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img
|
||||||
|
src="/demo/images/landing/new-badge.svg" class="ml-2" /></a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||||
|
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- <style scoped>
|
||||||
|
#hero {
|
||||||
|
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #eeefaf 0%, #c3e3fa 100%);
|
||||||
|
height: 700px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#hero {
|
||||||
|
-webkit-clip-path: ellipse(150% 87% at 93% 13%);
|
||||||
|
clip-path: ellipse(150% 87% at 93% 13%);
|
||||||
|
height: 530px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1300px) {
|
||||||
|
#hero > img {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero > div > p {
|
||||||
|
max-width: 450px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1300px) {
|
||||||
|
#hero {
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero > img {
|
||||||
|
position: static;
|
||||||
|
transform: scale(1);
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero > div {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero > div > p {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style> -->
|
||||||
106
frontend/src/views/menu/Chart.vue
Normal file
106
frontend/src/views/menu/Chart.vue
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
|
import { useLayout } from '@/layout/composables/layout';
|
||||||
|
|
||||||
|
const { layoutConfig } = useLayout();
|
||||||
|
let documentStyle = getComputedStyle(document.documentElement);
|
||||||
|
let textColor = documentStyle.getPropertyValue('--text-color');
|
||||||
|
let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
||||||
|
let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
||||||
|
|
||||||
|
const lineData = ref(null);
|
||||||
|
const lineOptions = ref(null);
|
||||||
|
|
||||||
|
|
||||||
|
const setColorOptions = () => {
|
||||||
|
documentStyle = getComputedStyle(document.documentElement);
|
||||||
|
textColor = documentStyle.getPropertyValue('--text-color');
|
||||||
|
textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
||||||
|
surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
||||||
|
};
|
||||||
|
const setChart = () => {
|
||||||
|
lineData.value = {
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'First Dataset',
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||||||
|
fill: false,
|
||||||
|
backgroundColor: documentStyle.getPropertyValue('--primary-500'),
|
||||||
|
borderColor: documentStyle.getPropertyValue('--primary-500'),
|
||||||
|
tension: 0.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Second Dataset',
|
||||||
|
data: [28, 48, 40, 19, 86, 27, 90],
|
||||||
|
fill: false,
|
||||||
|
backgroundColor: documentStyle.getPropertyValue('--primary-200'),
|
||||||
|
borderColor: documentStyle.getPropertyValue('--primary-200'),
|
||||||
|
tension: 0.4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
lineOptions.value = {
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
labels: {
|
||||||
|
fontColor: textColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
ticks: {
|
||||||
|
color: textColorSecondary
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
color: surfaceBorder,
|
||||||
|
drawBorder: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
ticks: {
|
||||||
|
color: textColorSecondary
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
color: surfaceBorder,
|
||||||
|
drawBorder: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
layoutConfig.theme,
|
||||||
|
() => {
|
||||||
|
setColorOptions();
|
||||||
|
setChart();
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="grid p-fluid">
|
||||||
|
<div class="col-12 xl:col-2">
|
||||||
|
<span class="p-float-label">
|
||||||
|
<Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
|
||||||
|
<label for="dropdown">Dropdown</label>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="grid p-fluid">
|
||||||
|
<div class="col-12 xl:col-6">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Linear Chart</h5>
|
||||||
|
<Chart type="line" :data="lineData" :options="lineOptions"></Chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -151,6 +151,11 @@
|
|||||||
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
|
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
|
||||||
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
|
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
|
||||||
|
|
||||||
|
"@kurkle/color@^0.3.0":
|
||||||
|
version "0.3.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
|
||||||
|
integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
|
||||||
|
|
||||||
"@nodelib/fs.scandir@2.1.5":
|
"@nodelib/fs.scandir@2.1.5":
|
||||||
version "2.1.5"
|
version "2.1.5"
|
||||||
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
|
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
|
||||||
@ -456,6 +461,13 @@ chalk@^4.0.0:
|
|||||||
ansi-styles "^4.1.0"
|
ansi-styles "^4.1.0"
|
||||||
supports-color "^7.1.0"
|
supports-color "^7.1.0"
|
||||||
|
|
||||||
|
chart.js@^4.2.0:
|
||||||
|
version "4.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.2.0.tgz#dd281b2ce890bff32f3e249cf2972a1e74bc032c"
|
||||||
|
integrity sha512-wbtcV+QKeH0F7gQZaCJEIpsNriFheacouJQTVIjITi3eQA8bTlIBoknz0+dgV79aeKLNMAX+nDslIVE/nJ3rzA==
|
||||||
|
dependencies:
|
||||||
|
"@kurkle/color" "^0.3.0"
|
||||||
|
|
||||||
check-error@^1.0.2:
|
check-error@^1.0.2:
|
||||||
version "1.0.2"
|
version "1.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
|
resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user