153 lines
3.7 KiB
Vue
153 lines
3.7 KiB
Vue
<template>
|
|
|
|
<body style="background-color: #f4f4f4;">
|
|
<v-container style="background-color: #f4f4f4;">
|
|
<div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
|
|
class="footer-align">
|
|
|
|
<!-- Hutopy footer logo -->
|
|
<v-container style="background-color: #f4f4f4">
|
|
<v-row justify="center" style="margin-top: 30px;">
|
|
<v-col cols="5" lg="5" md="5" sm="12" xs="7">
|
|
<router-link :to="{ name: 'home' }">
|
|
<v-img src="/images/hutopymedia/banners/hutopy.png" class="hutopy-footer-picture"></v-img>
|
|
</router-link>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
|
|
<!-- Hutopy Social network links -->
|
|
<v-container>
|
|
<!-- Facebook link -->
|
|
<v-row justify="center">
|
|
<v-col cols="auto">
|
|
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
|
<img class="icons" src="/images/hutopymedia/icons/pink/facebookpink.png" alt="Description image 2">
|
|
</a>
|
|
</v-col>
|
|
|
|
<!-- Instagram link -->
|
|
<v-col cols="auto">
|
|
<a href="https://www.instagram.com/hutopy.inc/">
|
|
<img src="/images/hutopymedia/icons/pink/instagrampink.png" alt="Description image 3" class="icons">
|
|
</a>
|
|
</v-col>
|
|
|
|
<!-- Need X Account -->
|
|
<v-col cols="auto">
|
|
<a href="https://twitter.com/Hutopyinc">
|
|
<img src="/images/hutopymedia/icons/pink/xpink.png" alt="Description image 1" class="icons">
|
|
</a>
|
|
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
|
|
<!-- Loop for social network links -->
|
|
<v-container class="text-center" style="flex-grow: 1;">
|
|
<router-link v-for="link in links" :key="link" :to="getLinkUrl(link)"
|
|
class="mx-2 text-decoration-none text-black">
|
|
<v-btn class="black--text" rounded="xl" variant="text">{{ link }}</v-btn>
|
|
</router-link>
|
|
</v-container>
|
|
|
|
<v-container class="text-black text-center ">
|
|
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
|
|
</v-container>
|
|
|
|
</div>
|
|
</v-container>
|
|
</body>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
const links = [
|
|
'Aide & Contact',
|
|
'FAQ',
|
|
'Guide pour les créateurs',
|
|
'Conditions générales',
|
|
'Politique de Contenu',
|
|
'À Propos'
|
|
];
|
|
|
|
const linkRoutes = {
|
|
'Aide & Contact': { name: 'helpandcontact' },
|
|
'FAQ': { name: 'FAQ' },
|
|
'Guide pour les créateurs': { name: 'guideforcreators' },
|
|
'Conditions générales': { name: 'termsandconditions' },
|
|
'Politique de Contenu': { name: 'contentpolicy' },
|
|
'À Propos': { name: 'about' }
|
|
};
|
|
|
|
// If broken link, redirect to home page.
|
|
const getLinkUrl = (link) => linkRoutes[link] || { name: 'home' };
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.icons {
|
|
width: 50px;
|
|
height: auto;
|
|
}
|
|
|
|
.hutopy-footer-picture {
|
|
height: 70px;
|
|
margin-bottom: 3%;
|
|
min-height: 70px;
|
|
min-width: auto;
|
|
}
|
|
|
|
.custom-footer {
|
|
padding: 10px;
|
|
}
|
|
|
|
.no-margin {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background-color: rgba(107, 0, 101, 1);
|
|
}
|
|
|
|
footer a:not(:last-child) {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.footertextcolor {
|
|
margin-top: 5px;
|
|
margin-bottom: 40px;
|
|
color: azure;
|
|
}
|
|
|
|
.socialiconspacer {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.custom-color-button {
|
|
background-color: rgb(255, 0, 0);
|
|
color: white;
|
|
|
|
font-size: 1.5rem;
|
|
margin-top: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.background {
|
|
background-color: rgba(107, 0, 101, 1);
|
|
}
|
|
|
|
@media (min-width: 150px) and (max-width: 598px) {
|
|
|
|
.hutopy-footer-picture {
|
|
min-width: 200px;
|
|
margin-left: -15px;
|
|
}
|
|
|
|
}
|
|
</style> |