jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

we played with the colors and add wallet.vue

Browse Source
This commit is contained in:
PascalMarchesseault
2024-06-27 02:10:15 -04:00
parent 498cec3bb9
commit e6b2c71d54
9 changed files with 128 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">

9
src/App.vue
View File

@@ -5,7 +5,7 @@
<div class="flex flex-row relative">
<div
@mouseenter="openSidebar"
class="fixed left-0 top-0 h-full w-12 z-20"
class="fixed h-full w-12 z-20"
style="background: transparent;"
></div>
@@ -13,12 +13,12 @@
<div v-show="!hideSideBar"
@mouseleave="startCloseSidebarTimer"
@mouseenter="clearCloseSidebarTimer"
class=" fixed left-0 top-14 h-full border-r-2 bg-purple z-30 transition-transform duration-700">
class=" fixed h-full min-w-60 border-r-2 bg-white z-30 transition-transform duration-700">
<SideBar></SideBar>
</div>
</transition>
<div class="flex flex-col mt-16 w-full md:ml-1" style="background-color: #f4f4f4">
<div class="flex flex-col w-full md:ml-1 mt-16" style="background-color: #f4f4f4">
<RouterView></RouterView>
<Footer></Footer>
</div>
@@ -124,8 +124,7 @@ onUnmounted(() => {
transition: transform 0.7s ease, opacity 0.7s ease;
}
.slide-fade-enter, .slide-fade-leave-to
{
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(-100%);
opacity: 0;
}

14
src/router/index.js
View File

@@ -14,7 +14,8 @@ import SignupView from '../views/SignupView.vue'
import Join from '../views/main/Join.vue'
import Home from '../views/main/Home.vue'
import Browse from '../views/main/Browse.vue'
import YourProfile from '../views/main/YourProfile.vue'
import Wallet from '../views/main/Wallet.vue'
import Profile from '../views/main/Profile.vue'
import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
import Leffet from '../views/manualusers/LeffetProfile.vue'
import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
@@ -111,9 +112,9 @@ const routes = [
component: PaymentCompleted
},
{
path: '/yourprofile',
name: 'yourprofile',
component: YourProfile
path: '/profile',
name: 'profile',
component: Profile
},
{
path: '/signup',
@@ -125,6 +126,11 @@ const routes = [
name: 'login',
component: LoginView
},
{
path: '/wallet',
name: 'wallet',
component: Wallet
},
]

114
src/views/main/Footer.vue
View File

@@ -1,63 +1,63 @@
<template>
<footer class="text-center text-surface/75 dark:bg-gray-950 dark:text-white/75 lg:text-left">
<div class="mx-6 py-10 text-center md:text-left">
<div class="grid-1 grid gap-4 grid-cols-2">
<!-- Useful links section -->
<div>
<h6 class="mb-4 flex justify-center font-semibold uppercase md:justify-start">
Liens utils
</h6>
<p class="mb-4">
<a href="#">Pricing</a>
</p>
<p class="mb-4">
<a href="#">Aide & Contact</a>
</p>
<p class="mb-4">
<a href="#">Conditions générales d'utilisation</a>
</p>
<p class="mb-4">
<a href="#">Conditions générales de vente</a>
</p>
<p class="mb-4">
<a href="#">Cookies</a>
</p>
</div>
<!-- <footer class="text-center text-surface/75 dark:bg-gray-950 dark:text-white/75 lg:text-left">-->
<!-- <div class="mx-6 py-10 text-center md:text-left">-->
<!-- <div class="grid-1 grid gap-4 grid-cols-2">-->
<!-- &lt;!&ndash; Useful links section &ndash;&gt;-->
<!-- <div>-->
<!-- <h6 class="mb-4 flex justify-center font-semibold uppercase md:justify-start">-->
<!-- Liens utils-->
<!-- </h6>-->
<!-- <p class="mb-4">-->
<!-- <a href="#">Pricing</a>-->
<!-- </p>-->
<!-- <p class="mb-4">-->
<!-- <a href="#">Aide & Contact</a>-->
<!-- </p>-->
<!-- <p class="mb-4">-->
<!-- <a href="#">Conditions générales d'utilisation</a>-->
<!-- </p>-->
<!-- <p class="mb-4">-->
<!-- <a href="#">Conditions générales de vente</a>-->
<!-- </p>-->
<!-- <p class="mb-4">-->
<!-- <a href="#">Cookies</a>-->
<!-- </p>-->
<!-- </div>-->
<!-- Contacts-->
<div>
<h6 class="mb-4 flex justify-center font-semibold uppercase md:justify-start">Contact</h6>
<p class="mb-4 flex items-center justify-center md:justify-start">
<div class="flex justify-center">
<a href="#" class="me-6 [&>svg]:h-4 [&>svg]:w-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 320 512">
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
<path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/>
</svg>
</a>
<a href="#" class="me-6 [&>svg]:h-4 [&>svg]:w-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 448 512">
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />
</svg>
</a>
<a href="mailto:a@hutopy.com" class="me-6 [&>svg]:h-4 [&>svg]:w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
<path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
<path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
</svg>
</a>
</div>
</p>
</div>
</div>
</div>
<!-- &lt;!&ndash; Contacts&ndash;&gt;-->
<!-- <div>-->
<!-- <h6 class="mb-4 flex justify-center font-semibold uppercase md:justify-start">Contact</h6>-->
<!-- <p class="mb-4 flex items-center justify-center md:justify-start">-->
<!-- <div class="flex justify-center">-->
<!-- <a href="#" class="me-6 [&>svg]:h-4 [&>svg]:w-4">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 320 512">-->
<!-- &lt;!&ndash;!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. &ndash;&gt;-->
<!-- <path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a href="#" class="me-6 [&>svg]:h-4 [&>svg]:w-4">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 448 512">-->
<!-- &lt;!&ndash;!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. &ndash;&gt;-->
<!-- <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a href="mailto:a@hutopy.com" class="me-6 [&>svg]:h-4 [&>svg]:w-4">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">-->
<!-- &lt;!&ndash;!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. &ndash;&gt;-->
<!-- <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />-->
<!-- <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />-->
<!-- </svg>-->
<!-- </a>-->
<!-- </div>-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="bg-black/5 p-6 text-center">
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
</div>
</footer>
<!-- <div class="bg-black/5 p-6 text-center">-->
<!-- {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>-->
<!-- </div>-->
<!-- </footer>-->
</template>
<script setup lang="ts">

81
src/views/main/Header.vue
View File

@@ -51,12 +51,11 @@
<div class="text-center">
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn variant="plain" v-bind="props" class="d-flex align-center">
<!-- Nom d'utilisateur caché en mode mobile, visible sur les appareils ≥ md -->
<span class="max-w-xs text-lg hidden md:block">
<v-btn variant="plain" v-bind="props" class=" d-flex align-center text-capital-none">
<span class="normal-case max-w-xs hidden md:block">
{{ currentUserName }}
</span>
<!-- Image de profil toujours visible -->
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png" alt="Profile Image"
class="ml-2 rounded-full" style="width: 32px; height: 32px;">
</v-btn>
@@ -64,10 +63,19 @@
<v-list class="mt-2">
<v-list-item @click="navigateToProfile">
<v-list-item-title>Mon profil</v-list-item-title>
<v-list-item-title>
<router-link to="/profile">
Mon profil
</router-link>
</v-list-item-title>
</v-list-item>
<v-list-item @click="openWalletDialog">
<v-list-item-title>Mon wallet</v-list-item-title>
<v-list-item>
<v-list-item-title>
<router-link to="/wallet">
Mon wallet
</router-link>
</v-list-item-title>
</v-list-item>
<v-list-item @click="navigateToMessages">
<v-list-item-title>Messages</v-list-item-title>
@@ -80,57 +88,8 @@
</div>
</div>
<!-- Wallet Modal -->
<v-dialog v-model="walletDialog" transition="dialog-top-transition" width="auto" class="-z-50">
<v-card style="border-radius: 30px;">
<div class="text-center" style="margin-top: 2%; margin-bottom: 2%;">
<v-icon left size="48">mdi-wallet</v-icon>
<v-toolbar title="Portefeuille"
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
</div>
<v-card-text class="text-h1 pa-12">
<v-row>
<v-col>
<v-row>
<v-col class="text-center">
<h1 style="margin-bottom: -4px; font-size: 1.3rem;">Balance actuelle</h1>
<h1 style=" margin-bottom: -45px; font-size: 3.5rem;">{{ currentUser.totalBalance }}$</h1>
</v-col>
</v-row>
</v-col>
</v-row>
</v-card-text>
<v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions" height="250"
item-value="name">
</v-data-table-virtual>
<v-dialog activator="#activator-target" max-width="650">
<template v-slot:default="{ isActive }">
<v-card prepend-icon="mdi-file-document-edit" text="Découvrez Hutopy, l'endroit où la valorisation de votre travail atteint son apogée. Avec une commission réduite à seulement 9 %, notre engagement envers votre succès est palpable. Chaque pourcentage prélevé est réinvesti avec soin pour catalyser votre croissance : du développement de fonctionnalités innovantes à la maintenance d'une infrastructure technologique de pointe, en passant par un support utilisateur de premier ordre. Notre objectif ? Amplifier votre expansion et garantir une expérience utilisateur sans précédent.
Pour chaque transaction, un frais minime assure la sécurité et la fiabilité de vos paiements, grâce à un partenaire de confiance à la renommée mondiale. Ce dernier sécurise pour des milliards en transactionchaque année pour une diversité d'entreprises, allant des startups dynamiques aux conglomerats établis. Ce gage de sécurité est disponible pour une modique somme : 2,9 % plus 0,30 $ par transaction, une petite contribution pour la tranquillité d'esprit et la protection de vos revenus.
Notre modèle tarifaire a été pensé dans un esprit de simplicité et de transparence, avec l'ambition ultime d'optimiser vos gains. Chez Hutopy, la notion de partenariat prend tout son sens : votre épanouissement est au cœur de nos préoccupations. Bénéficiez d'une plateforme qui élargit votre horizon créatif et entrepreneurial, tout en vous assurant que vos intérêts sont précieusement gardés.
Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation de la passion en profit devient réalité, grâce au soutien indéfectible d'une équipe dévouée à enrichir votre parcours. Nous vous invitons à nous rejoindre pour explorer ensemble les avenues de succès que nous pouvons emprunter ensemble, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre allié dans la quête du succès.
" title="Comission">
<template v-slot:actions>
<v-btn class="ml-auto" text="Close" @click="isActive.value = false"></v-btn>
</template>
</v-card>
</template>
</v-dialog>
<v-card-actions class="justify-center">
<v-row justify="center">
<v-btn id="activator-target">
Comisssion
</v-btn>
<v-btn @click="walletDialog = false" text="Fermer"></v-btn>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</header>
</template>
@@ -144,7 +103,7 @@ const router = useRouter();
const currentUserName = "Pascal Marchesseault";
const searchQuery = ref("");
const showSearch = ref(false);
const walletDialog = ref(false);
const toggleSidebar = () => {
eventBus.value.toggleSidebar();
@@ -181,11 +140,6 @@ onMounted(() => {
onBeforeUnmount(() => {
document.removeEventListener('click', handleClickOutside);
});
const navigateToProfile = () => {
router.push('/yourprofile');
};
const navigateToWallet = () => {
router.push('/wallet');
};
@@ -199,9 +153,6 @@ function logout() {
window.location.reload();
};
function openWalletDialog() {
walletDialog.value = true;
}
</script>
<style scoped>

4
src/views/main/YourProfile.vue → src/views/main/Profile.vue
View File

@@ -43,9 +43,9 @@
</form>
<div class="text-right">
<router-link :to="{ name: 'creatorfolio' }">
<!-- <router-link :to="{ name: 'creatorfolio' }">-->
<button class="bg-gray-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-gray-700 transition-colors duration-300 ease-in-out mr-5">Retour</button>
</router-link>
<!-- </router-link>-->
<button @click="toggleEdit" class="bg-purple-800 text-white px-4 py-2 rounded-lg shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</button>
</div>
</div>

20
src/views/main/SideBar.vue
View File

@@ -1,10 +1,10 @@
<template>
<aside class="relative">
<aside class="relative h-full">
<nav class="flex items-center justify-between pt-3">
<div>
<h2 class="text-center">Subscriptions</h2>
<nav class="h-full grid grid-rows-[60px_1fr_auto]">
<div></div>
<div class="pt-4 px-4 ">
<h2>Subscriptions</h2>
<ul class="space-y">
<li>
@@ -50,13 +50,14 @@
</div>
</RouterLink>
<div class="h-10"></div>
</li>
</ul>
<SiteMenu></SiteMenu>
</div>
<div class="border-t w-full py-10 ">
<SiteMenu></SiteMenu>
</div>
</nav>
</aside>
@@ -64,12 +65,11 @@
<style scoped>
.nav-button {
@apply rounded p-1 m-1;
@apply rounded p-1 m-1 text-gray-800 font-sans;
}
.nav-button:hover {
@apply bg-purple-400;
@apply bg-[#903175] text-gray-200 ;
}
h2 {

21
src/views/main/SiteMenu.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col min-h-screen bg-white py-4 px-8">
<RouterLink class="nav-button font-weight-bold" to="/join">Aidez-nous</RouterLink>
<div class="flex flex-row justify-center pb-4 pt-2">
<div class="flex flex-col">
<div class="flex flex-row justify-center pb-4 pt-2 py-4">
<!-- Facebook -->
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img src="/images/hutopymedia/icons/pink/facebookpink.png" alt="Facebook Logo">
@@ -15,7 +15,12 @@
<img src="/images/hutopymedia/icons/pink/xpink.png" alt="X Logo">
</a>
</div>
<div class="absolute mt-40 text-center extra-small-text p-8">
<div class="py-4">
<RouterLink class="nav-button font-weight-bold" to="/join">Aidez-nous</RouterLink>
</div>
<div class="text-center ">
<RouterLink class="nav-button" to="/helpandcontact">Aide & Contact</RouterLink>
<RouterLink class="nav-button" to="/faq">FAQ</RouterLink>
<RouterLink class="nav-button" to="/guideforcreators">Guide pour les créateurs</RouterLink>
@@ -25,13 +30,11 @@
<RouterLink class="nav-button" to="/pricing">Frais</RouterLink>
</div>
</div>
</template>
<style scoped>
.nav-button {
@apply rounded flex justify-center font-sans text-gray-800 py-1;
@apply rounded flex justify-center font-sans py-1;
}
.nav-button:hover {
@@ -42,9 +45,7 @@ img {
@apply m-2 w-10 h-10;
}
.extra-small-text {
font-size: 0.6rem; /* Ajustez cette valeur selon vos besoins */
}
</style>
<script setup lang="ts">
</script>

10
src/views/main/Wallet.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<div class="mt-28"> test
</div>
</template>
<script setup lang="ts">
</script>