feat(service-box): add service box
This commit is contained in:
parent
7e9a88755d
commit
8c72a4bff8
GPG key ID:
9E7F14C03EF1F271
7
public/assets/icons/bitwarden.svg
Executable file
7
public/assets/icons/bitwarden.svg
Executable file
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1">
|
||||
<rect style="opacity:0.2" width="58" height="58" x="-62" y="-61" rx="2.9" ry="2.9" transform="matrix(0,-1,-1,0,0,0)"/>
|
||||
<rect style="fill:#175ddc" width="58" height="58" x="-61" y="-61" rx="2.9" ry="2.9" transform="matrix(0,-1,-1,0,0,0)"/>
|
||||
<path style="opacity:0.1;fill:#ffffff" d="M 5.8984375 3 C 4.2918373 3 3 4.2918373 3 5.8984375 L 3 6.8984375 C 3 5.2918373 4.2918373 4 5.8984375 4 L 58.101562 4 C 59.708163 4 61 5.2918373 61 6.8984375 L 61 5.8984375 C 61 4.2918373 59.708163 3 58.101562 3 L 5.8984375 3 z"/>
|
||||
<path style="opacity:0.2" d="M 32,14 C 32,14 16.21,14.009 15.809,14.25 14.957,14.761 15,14.128 15,26.035 15,38.118 14.985,37.876 15.914,40.219 16.983,42.914 18.705,45.192 21.531,47.668 23.903,49.745 26.715,51.626 29.852,53.223 30.913,53.763 31.461,54.009 32,54 32.539,54.009 33.087,53.763 34.148,53.223 37.285,51.626 40.097,49.745 42.469,47.668 45.295,45.192 47.017,42.914 48.086,40.219 49.015,37.876 49,38.118 49,26.035 49,14.128 49.043,14.761 48.191,14.25 47.79,14.009 32,14 32,14 Z M 32,20 H 43 V 36 C 43,36 42.994,36.781 42.508,38.008 41.825,39.729 40.878,41.088 38.516,43.156 36.723,44.726 34.463,46.18 32,47.492 Z"/>
|
||||
<path style="fill:#efefef" d="M 32,13 C 32,13 16.21,13.009 15.809,13.25 14.957,13.761 15,13.128 15,25.035 15,37.118 14.985,36.876 15.914,39.219 16.983,41.914 18.705,44.192 21.531,46.668 23.903,48.745 26.715,50.626 29.852,52.223 30.913,52.763 31.461,53.009 32,53 32.539,53.009 33.087,52.763 34.148,52.223 37.285,50.626 40.097,48.745 42.469,46.668 45.295,44.192 47.017,41.914 48.086,39.219 49.015,36.876 49,37.118 49,25.035 49,13.128 49.043,13.761 48.191,13.25 47.79,13.009 32,13 32,13 Z M 32,19 H 43 V 35 C 43,35 42.994,35.781 42.508,37.008 41.825,38.729 40.878,40.088 38.516,42.156 36.723,43.726 34.463,45.18 32,46.492 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
24
public/assets/icons/jellyfin.svg
Executable file
24
public/assets/icons/jellyfin.svg
Executable file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- ***** BEGIN LICENSE BLOCK *****
|
||||
- Part of the Jellyfin project (https://jellyfin.media)
|
||||
-
|
||||
- All copyright belongs to the Jellyfin contributors; a full list can
|
||||
- be found in the file CONTRIBUTORS.md
|
||||
-
|
||||
- This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
|
||||
- To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.
|
||||
- ***** END LICENSE BLOCK ***** -->
|
||||
<svg version="1.1" id="icon-transparent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="110.25" y1="213.3" x2="496.14" y2="436.09">
|
||||
<stop offset="0" style="stop-color:#AA5CC3"/>
|
||||
<stop offset="1" style="stop-color:#00A4DC"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<title>icon-transparent</title>
|
||||
<g id="icon-transparent">
|
||||
<path id="inner-shape" d="M256,201.6c-20.4,0-86.2,119.3-76.2,139.4s142.5,19.9,152.4,0S276.5,201.6,256,201.6z" fill="url(#linear-gradient)"/>
|
||||
<path id="outer-shape" d="M256,23.3c-61.6,0-259.8,359.4-229.6,420.1s429.3,60,459.2,0S317.6,23.3,256,23.3z
|
||||
M406.5,390.8c-19.6,39.3-281.1,39.8-300.9,0s110.1-275.3,150.4-275.3S426.1,351.4,406.5,390.8z" fill="url(#linear-gradient)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
18
src/App.vue
18
src/App.vue
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import TitleHeader from './components/TitleHeader.vue'
|
||||
import ServiceBox from './components/ServiceBox.vue'
|
||||
import defaults from './assets/defaults.json'
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
@ -15,8 +16,23 @@ const config = ref({})
|
|||
|
||||
<template>
|
||||
<TitleHeader :title="config.title" :catchphrase="config.catchphrase" :subtitle="config.subtitle"></TitleHeader>
|
||||
<main>
|
||||
<template v-for="service in config.services">
|
||||
<ServiceBox :service="service"></ServiceBox>
|
||||
</template>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
main {
|
||||
margin-top: 2.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 20rem) ;
|
||||
gap: 2.5rem;
|
||||
justify-content: center;
|
||||
font-size: 1.15rem;
|
||||
max-width: 90vw;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,21 @@
|
|||
{
|
||||
"title": "cat-enby.club",
|
||||
"catchphrase": "~~~nyaa",
|
||||
"subtitle": "Services hosted by a cat for cats (=^･ω･^=) ... and any other beeings!"
|
||||
"subtitle": "Services hosted by a cat for cats (=^･ω･^=) ... and any other beeings!",
|
||||
"services": [
|
||||
{
|
||||
"name": "Jellyfin",
|
||||
"summary": "Jellyfin is the volunteer-built media solution that puts you in control of your media. Stream to any device from your own server, with no strings attached.",
|
||||
"linktext": "media.cat-enby.club",
|
||||
"hyperlink": "https://media.cat-enby.club",
|
||||
"icon": "/assets/icons/jellyfin.svg"
|
||||
},
|
||||
{
|
||||
"name": "Bitwarden",
|
||||
"summary": "Bitwarden is an integrated open source password management solution for individuals, teams, and business organizations.",
|
||||
"linktext": "vault.cat-enby.club",
|
||||
"hyperlink": "https://vault.cat-enby.club",
|
||||
"icon": "/assets/icons/bitwarden.svg"
|
||||
}
|
||||
]
|
||||
}
|
||||
49
src/components/ServiceBox.vue
Normal file
49
src/components/ServiceBox.vue
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<script setup>
|
||||
const props = defineProps({
|
||||
service: Object
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<fieldset>
|
||||
<legend>{{ service.name }}</legend>
|
||||
<section class="content">
|
||||
<section class="top">
|
||||
<img :src="service.icon" :alt="service.name + ' icon'">
|
||||
<a :href="service.hyperlink">{{ service.linktext }}</a>
|
||||
</section>
|
||||
<p>{{ service.summary }}</p>
|
||||
</section>
|
||||
</fieldset>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
fieldset {
|
||||
border: solid 3px;
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
img {
|
||||
width: 64px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
legend {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue