Tarik frontend

frontend/app.vue

@@ -1,12 +1,4 @@
 <template>
-  <div>
-    <Header></Header>
-  </div>
-</template>
-
-<script setup lang="ts">
-</script>
-
-<style>
-@import url("~/assets/css/base.css");
-</style>
+  <Header></Header>
+  <NuxtPage />
+</template>

frontend/assets/css/base.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap');
 
 :root {
-    --primary-50: 236 253 245;
+    --primary-50: 218 67 255;
     --primary-100: 209 250 229;
     --primary-200: 167 243 208;
     --primary-300: 110 231 183;
@@ -31,4 +31,20 @@ body {
     background: url('~/assets/img/bg.jpg') no-repeat center center fixed;
     background-size: cover;
     color: #fff;
-  }
+    font-family: 'azert mono', monospace;
+}
+
+/* only buttons with data-p-severity="help" */
+button[data-p-severity="help"] {
+    color: #fff !important;
+    background: #DA43FF !important;
+    border: none !important;
+}
+
+.bg-card {
+    background: rgba(0, 0, 0, 0.2)
+}
+
+.bg-llama {
+    background : rgba(255, 255, 255, 0.4)
+}

frontend/components/CardIntro.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="flex items-center justify-center md:justify-start w-full p-10 bg-black bg-opacity-75 rounded-lg">
+    <div class="flex flex-col md:flex-row items-center gap-10">
+      <div class="relative">
+        <div class="absolute z-10 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-black rounded-full"></div>
+        <img src="~/assets/img/radiollama.jpg" alt="RadioLlama" class="rounded-full" :class="{rotating : playing}" width="200" height="200"/>
+      </div>
+      <div class="flex flex-col gap-2">
+        <h1 class="text-2xl font-bold">RadioLlama</h1>
+        <p class="text-sm">by Artist Name</p>
+        <div class="flex items-center gap-4">
+          <Button 
+            :icon="playing ? 'pi pi-pause' : 'pi pi-play'" 
+            :label="playing ? 'PAUSE' : 'TRY IT OUT'" rounded  
+            @click="launchAudioTest"/>
+        </div>
+      </div>
+    </div>  
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Button from 'primevue/button';
+
+const playing = ref(false);
+let audio: HTMLAudioElement | null = null;
+
+// Get the path to the audio file
+const audioPath = new URL('~/assets/audio/test-2.wav', import.meta.url).href;
+
+const launchAudioTest = () => {
+  if (playing.value) {
+    // Stop the audio
+    audio?.pause();
+    audio = null;
+    playing.value = false;
+  } else {
+    // Play the audio
+    audio = new Audio(audioPath);
+    audio.play();
+    playing.value = true;
+
+    // Reset playing state when audio ends
+    audio.onended = () => {
+      playing.value = false;
+      audio = null;
+    };
+  }
+};
+</script>
+
+<style>
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.rotating {
+  animation: rotate 10s linear infinite;
+}
+</style>

frontend/components/Header.vue

@@ -6,10 +6,15 @@
             <i class="pi pi-twitter"></i>
             <i class="pi pi-linkedin"></i>
         </div>
-        <Button label="LOG IN" rounded severity="help"/>
+        <div>
+            <Button v-if="visible" label="LOG IN" rounded severity="help" @click="$router.push('/login')"/>
+        </div>
     </header>
 </template>
 
-<script>
+<script setup lang="ts">
 import Button from 'primevue/button';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const visible = router.currentRoute.value.name !== 'login';
 </script>

frontend/nuxt.config.ts

@@ -1,10 +1,12 @@
 import * as path from 'path';
 
 export default defineNuxtConfig({
-    // import this script <link href="/node_modules/primeicons/primeicons.css" rel="stylesheet">
 
     // Import PrimeVue CSS
-    css: ["primevue/resources/themes/saga-blue/theme.css", "primevue/resources/primevue.min.css", "primeicons/primeicons.css"],
+    css: [
+        "primevue/resources/themes/md-light-indigo/theme.css", 
+        "primevue/resources/primevue.min.css", 
+        "primeicons/primeicons.css"],
     modules: ['@nuxtjs/tailwindcss', "nuxt-primevue"],
     primevue: {
         options: { unstyled: true },

frontend/package.json

@@ -22,6 +22,6 @@
     "nuxt-primevue": "^3.0.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.9.5"
+    "@rollup/rollup-linux-x64-gnu": "4.6.1"
   }
 }

frontend/pages/create.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="grid grid-cols-12 gap-4 p-5 p-10">
+        <div class="flex flex-col col-span-10 col-start-2 gap-10">
+            <div class="flex flex-col items-start gap-8 justify-between w-full p-5 bg-card rounded-lg">
+                <div class="flex flex-col w-full gap-8">
+                    <h2 class="flex items-center gap-4">
+                        <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-llama">
+                            <span class="text-2xl">🦙</span>
+                        </div>
+                        CHOOSE YOUR RADIO STYLE 1/2
+                    </h2>
+                    <div class="flex flex-wrap gap-4">
+                        <div v-for="style in radioStyles" :key="style" class="flex items-center gap-4">
+                            <Button 
+                                :class="{'selected-button': selectedStyles.includes(style)}"
+                                :label="style"
+                                rounded 
+                                @click="toggleStyle(style)"/>
+                        </div>
+                    </div>
+                </div>
+            </div>  
+        </div>
+
+        <transition name="fade" mode="out-in">
+            <div v-if="showPersonalityCard" ref="personalityCard" class="flex flex-col col-start-2 col-span-10 gap-10">
+                <div class="flex flex-col items-start gap-8 justify-between w-full p-10 bg-card rounded-lg">
+                    <div class="flex flex-col w-full gap-8">
+                        <h2 class="flex items-center gap-4">
+                            <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-llama">
+                                <span class="text-2xl">🦙</span>
+                            </div>
+                            CHOOSE THE BROADCASTER PERSONALITY 2/2
+                        </h2>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="personality in radioPersonalities" :key="personality" class="flex items-center gap-4">
+                                <Button 
+                                    :class="{'selected-button': selectedPersonality === personality}"
+                                    :label="personality"
+                                    rounded 
+                                    @click="togglePersonality(personality)"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>  
+            </div>
+        </transition>
+
+        <transition name="fade" mode="out-in">
+            <div v-if="showSubmitButton && showPersonalityCard" ref="submitButton" class="flex flex-col col-start-2 col-span-10 gap-10">
+                <div class="flex justify-end">
+                    <Button label="GENERATE YOUR RADIO" rounded severity="help" @click="$router.push('/create')"/>
+                </div>
+            </div>
+        </transition>   
+    </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button';
+import { ref, watch, nextTick } from 'vue';
+
+// Tableau des styles de radio disponibles
+const radioStyles = [
+    "Synthwave", "Reggaeton", "Grunge", "Bluegrass", "Afrobeat", "Dubstep", 
+    "Salsa", "Bossa Nova", "Ambient", "K-Pop", "Ska", "Flamenco", "Trance", 
+    "Gospel", "New Age", "Swing", "Latin Jazz", "Techno", "Classical Symphony"
+];
+
+// Tableau des personnalités de radio disponibles
+const radioPersonalities = [
+    "Calm", "Hardrocker", "Jazzy", "Smooth", "Energetic", "Cool", 
+    "Lively", "Relaxed", "Dynamic", "Chill"
+];
+
+// Tableaux des styles et personnalités sélectionnés
+const selectedStyles = ref<string[]>([]);
+    const selectedPersonality = ref<string | null>(null);
+
+// Variable pour montrer ou cacher la carte de personnalité
+const showPersonalityCard = ref(false);
+
+// Variable pour montrer ou cacher le bouton de soumission
+const showSubmitButton = ref(false);
+
+// Fonction pour sélectionner/désélectionner un style
+function toggleStyle(style: string) {
+    const index = selectedStyles.value.indexOf(style);
+    if (index > -1) {
+        selectedStyles.value.splice(index, 1); // Deselect if already selected
+    } else {
+        selectedStyles.value.push(style); // Select if not already selected
+    }
+}
+
+// Fonction pour sélectionner/désélectionner une personnalité
+function togglePersonality(personality: string) {
+    if (selectedPersonality.value === personality) {
+        selectedPersonality.value = null; // Deselect if already selected
+    } else {
+        selectedPersonality.value = personality; // Select if not already selected
+    }
+}
+
+// Observer les changements de selectedStyles
+watch(selectedStyles, async (newVal, oldVal) => {
+    if (newVal.length > 0) {
+        showPersonalityCard.value = true;
+        await nextTick(); // Attendre que le DOM soit mis à jour
+        scrollToPersonalityCard();
+    } else {
+        showPersonalityCard.value = false;
+    }
+}, { deep: true });
+
+// Observer les changements de selectedPersonality
+watch(selectedPersonality, (newVal, oldVal) => {
+    if (newVal) {
+        showSubmitButton.value = true;
+        scrollToSubmitButton();
+    } else {
+        showSubmitButton.value = false;
+    }
+});
+
+// Fonction pour faire défiler vers la carte de personnalité
+function scrollToPersonalityCard() {
+    const personalityCardElement = document.querySelector('.fade-enter-active, .fade-enter-to');
+    if (personalityCardElement) {
+        personalityCardElement.scrollIntoView({ behavior: 'smooth' });
+    }
+}
+
+// Fonction pour faire défiler vers le bouton de soumission
+function scrollToSubmitButton() {
+    const submitButtonElement = document.querySelector('.fade-enter-active, .fade-enter-to');
+    if (submitButtonElement) {
+        submitButtonElement.scrollIntoView({ behavior: 'smooth' });
+    }
+}
+</script>
+
+<style scoped>
+.selected-button {
+    background-color: rgba(255, 255, 255, 0.4); /* couleur de sélection */
+    color: white;
+    border-color: white;
+}
+.bg-card {
+    background-color: rgba(0, 0, 0, 0.75);
+}
+.bg-llama {
+    background-color: rgba(255, 255, 255, 0.4);
+}
+.fade-enter-active, .fade-leave-active {
+    transition: opacity 0.5s;
+}
+.fade-enter-from, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+    opacity: 0;
+}
+</style>

frontend/pages/index.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>    
+      <div class="grid grid-cols-12 gap-4 p-10">
+        <div class="flex flex-col col-start-2 col-span-10 gap-10">
+          <CardIntro></CardIntro>
+
+          <div class="flex justify-end">
+            <Button label="BUILD MY OWN" rounded severity="help" @click="$router.push('/login')"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <script setup lang="ts">
+    import CardIntro from '~/components/CardIntro.vue';
+    import Button from 'primevue/button';
+  </script>
+
+  <style>
+  @import url("~/assets/css/base.css");
+  </style>

frontend/pages/login.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="grid grid-cols-12 gap-4 p-10">
+        <div class="flex flex-col col-start-2 col-span-10 gap-10">
+            <div class="flex flex-col items-start gap-8 justify-between w-full p-10 bg-black bg-opacity-75 rounded-lg">
+                <div class="flex flex-col gap-4">
+                    <h1 class="text-2xl font-bold">Sign up</h1>
+                    <small>Start your radio free</small>
+                </div>
+
+                <form class="flex flex-col gap-4">
+                    <div class="flex flex-col gap-2">
+                        <label for="email">Email</label>
+                        <InputText id="email" type="email" v-model="value" rounded />
+                    </div>
+
+                    <div class="flex justify-end">
+                        <Button label="GOOO !" rounded severity="help" @click="$router.push('/create')"/>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext';
+</script>

frontend/pages/welcome.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <div class="grid grid-cols-12 gap-4 p-10">
+            <div class="col-start-2 col-span-10">
+                <h1 class="text-4xl font-black">WELCOME TO</h1>
+                <h1 class="text-4xl font-black">RADIOLLAMA</h1>
+            </div>
+        </div>   
+    </div>
+    <div>
+        <div class="grid grid-cols-12 gap-4 p-10">
+            <div class="col-start-2 col-span-10">
+                <h1>We help you to grow your radio and more</h1>
+            </div>
+        </div>   
+    </div>
+</template>