🎉 Initial template frontend setup #1
7 changed files with 88 additions and 166 deletions
1
frontend/components.d.ts
vendored
1
frontend/components.d.ts
vendored
|
|
@ -8,6 +8,7 @@ export {}
|
||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
||||||
|
Home: typeof import('./src/components/Home.vue')['default']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Welcome to Vuetify 3</title>
|
<title>home-cert-manager</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -1,6 +0,0 @@
|
||||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
|
|
||||||
<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
|
|
||||||
<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
|
|
||||||
<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
|
|
||||||
</svg>
|
|
||||||
|
|
@ -1,157 +0,0 @@
|
||||||
<template>
|
|
||||||
<v-container class="fill-height">
|
|
||||||
<v-responsive
|
|
||||||
class="align-centerfill-height mx-auto"
|
|
||||||
max-width="900"
|
|
||||||
>
|
|
||||||
<v-img
|
|
||||||
class="mb-4"
|
|
||||||
height="150"
|
|
||||||
src="@/assets/logo.png"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center">
|
|
||||||
<div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
|
|
||||||
|
|
||||||
<h1 class="text-h2 font-weight-bold">Vuetify</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="py-4" />
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-card
|
|
||||||
class="py-4"
|
|
||||||
color="surface-variant"
|
|
||||||
image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
|
|
||||||
prepend-icon="mdi-rocket-launch-outline"
|
|
||||||
rounded="lg"
|
|
||||||
variant="outlined"
|
|
||||||
>
|
|
||||||
<template #image>
|
|
||||||
<v-img position="top right" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #title>
|
|
||||||
<h2 class="text-h5 font-weight-bold">Get started</h2>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #subtitle>
|
|
||||||
<div class="text-subtitle-1">
|
|
||||||
Replace this page by removing <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>pages/index.vue</v-kbd>.
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<v-overlay
|
|
||||||
opacity=".12"
|
|
||||||
scrim="primary"
|
|
||||||
contained
|
|
||||||
model-value
|
|
||||||
persistent
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-card
|
|
||||||
append-icon="mdi-open-in-new"
|
|
||||||
class="py-4"
|
|
||||||
color="surface-variant"
|
|
||||||
href="https://vuetifyjs.com/"
|
|
||||||
prepend-icon="mdi-text-box-outline"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
rounded="lg"
|
|
||||||
subtitle="Learn about all things Vuetify in our documentation."
|
|
||||||
target="_blank"
|
|
||||||
title="Documentation"
|
|
||||||
variant="text"
|
|
||||||
>
|
|
||||||
<v-overlay
|
|
||||||
opacity=".06"
|
|
||||||
scrim="primary"
|
|
||||||
contained
|
|
||||||
model-value
|
|
||||||
persistent
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-card
|
|
||||||
append-icon="mdi-open-in-new"
|
|
||||||
class="py-4"
|
|
||||||
color="surface-variant"
|
|
||||||
href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
|
|
||||||
prepend-icon="mdi-star-circle-outline"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
rounded="lg"
|
|
||||||
subtitle="Explore available framework Features."
|
|
||||||
target="_blank"
|
|
||||||
title="Features"
|
|
||||||
variant="text"
|
|
||||||
>
|
|
||||||
<v-overlay
|
|
||||||
opacity=".06"
|
|
||||||
scrim="primary"
|
|
||||||
contained
|
|
||||||
model-value
|
|
||||||
persistent
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-card
|
|
||||||
append-icon="mdi-open-in-new"
|
|
||||||
class="py-4"
|
|
||||||
color="surface-variant"
|
|
||||||
href="https://vuetifyjs.com/components/all"
|
|
||||||
prepend-icon="mdi-widgets-outline"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
rounded="lg"
|
|
||||||
subtitle="Discover components in the API Explorer."
|
|
||||||
target="_blank"
|
|
||||||
title="Components"
|
|
||||||
variant="text"
|
|
||||||
>
|
|
||||||
<v-overlay
|
|
||||||
opacity=".06"
|
|
||||||
scrim="primary"
|
|
||||||
contained
|
|
||||||
model-value
|
|
||||||
persistent
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-card
|
|
||||||
append-icon="mdi-open-in-new"
|
|
||||||
class="py-4"
|
|
||||||
color="surface-variant"
|
|
||||||
href="https://discord.vuetifyjs.com"
|
|
||||||
prepend-icon="mdi-account-group-outline"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
rounded="lg"
|
|
||||||
subtitle="Connect with Vuetify developers."
|
|
||||||
target="_blank"
|
|
||||||
title="Community"
|
|
||||||
variant="text"
|
|
||||||
>
|
|
||||||
<v-overlay
|
|
||||||
opacity=".06"
|
|
||||||
scrim="primary"
|
|
||||||
contained
|
|
||||||
model-value
|
|
||||||
persistent
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-responsive>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
//
|
|
||||||
</script>
|
|
||||||
84
frontend/src/components/Home.vue
Normal file
84
frontend/src/components/Home.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
<template>
|
||||||
|
<v-container class="fill-height">
|
||||||
|
<v-responsive
|
||||||
|
class="align-centerfill-height mx-auto"
|
||||||
|
max-width="900"
|
||||||
|
>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
|
||||||
|
<h1 class="text-h2 font-weight-bold">home-cert-manager</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="py-4" />
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-card
|
||||||
|
class="py-4"
|
||||||
|
color="surface-variant"
|
||||||
|
image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
|
||||||
|
prepend-icon="mdi-rocket-launch-outline"
|
||||||
|
rounded="lg"
|
||||||
|
variant="outlined"
|
||||||
|
>
|
||||||
|
<template #image>
|
||||||
|
<v-img position="top right" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #title>
|
||||||
|
<h2 class="text-h5 font-weight-bold">Get started</h2>
|
||||||
|
</template>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-card
|
||||||
|
class="py-4"
|
||||||
|
color="surface-variant"
|
||||||
|
prepend-icon="mdi-certificate"
|
||||||
|
rounded="lg"
|
||||||
|
title="Manage your certificates"
|
||||||
|
variant="text"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-card
|
||||||
|
class="py-4"
|
||||||
|
color="surface-variant"
|
||||||
|
prepend-icon="mdi-home-lock"
|
||||||
|
rounded="lg"
|
||||||
|
title="Secure your home lab"
|
||||||
|
variant="text"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-card
|
||||||
|
class="py-4"
|
||||||
|
color="surface-variant"
|
||||||
|
prepend-icon="mdi-domain"
|
||||||
|
rounded="lg"
|
||||||
|
title="Domain management"
|
||||||
|
variant="text"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-card
|
||||||
|
class="py-4"
|
||||||
|
color="surface-variant"
|
||||||
|
prepend-icon="mdi-web"
|
||||||
|
rounded="lg"
|
||||||
|
title="Internet certificate support"
|
||||||
|
variant="text"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-responsive>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
//
|
||||||
|
</script>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<HelloWorld />
|
<Home />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import HelloWorld from "@/components/HelloWorld.vue";
|
import Home from "@/components/Home.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue