New random music button

Including a rickroll

src/components/footer.vue

@@ -45,7 +45,10 @@
       </div>
 
     </div> <!-- Footer content -->
-    <p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin. Copyright...</p>
+    <div id="footer_bottom"><!-- Footer bottom -->
+      <p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin. Copyright...</p>
+      <music id="music_button"/>
+    </div>
   </footer>
 </template>
 
@@ -53,6 +56,7 @@
   import { RouterLink } from 'vue-router';
 
   import social from './home/libs/social.vue';
+  import music from './footer/music.vue';
 
   import mailSvg from '@/assets/img/mail.svg';
   import lineImg from '@/assets/img/line.png';
@@ -184,12 +188,6 @@
         margin: auto;
         color:black;
     }
-
-    #footer_little_text{
-        font-size: 0.8em;
-        margin: 0;
-        margin-left: 20px;
-    }
     #footer_right_div{
         width: fit-content;
         min-width: 100px;
@@ -219,4 +217,22 @@
       height: 50px;
       cursor: pointer;
     }
+
+    #footer_bottom{
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      width: 100%;
+      justify-content: space-between;
+      align-items: flex-end;
+    }
+    #footer_little_text{
+        font-size: 0.8em;
+        margin: 0;
+        margin-left: 20px;
+    }
+    #music_button{
+      margin-right: 15px;
+      margin-bottom: 5px;
+    }
 </style>

src/components/footer/music.vue

@@ -0,0 +1,34 @@
+<template>
+  <img :src="musicSvg" @click="open_music"/>
+</template>
+
+<script setup>
+    import musicSvg from "@/assets/svg/music.svg";
+
+    const musics = [ // This is just a list of nice musics I listened at least once while working
+        "https://gensokyoradio.net/", // Will updated from times to times to remove deleted songs or add some new ones
+        "https://musicforprogramming.net/",
+        "https://youtu.be/KPTALvwccME",
+        "https://www.youtube.com/watch?v=I-FqKYGK5_M",
+        "https://www.youtube.com/watch?v=YUUFtUjiblk",
+        "https://www.youtube.com/watch?v=wEwnEeq23SY",
+        "https://youtu.be/s28KGdOVaZ0",
+        "https://youtu.be/esofirhSD-o",
+        "https://youtu.be/5lrseDtxX_E",
+        "https://www.youtube.com/watch?v=dQw4w9WgXcQ", // Never gonna give you up :]
+        "https://youtu.be/5-sfG8BV8wU"
+    ];
+
+    const open_music = ()=>{
+        const link = musics[Math.floor(Math.random() * musics.length)];
+        window.open(link, '_blank').focus();
+    }
+</script>
+
+<style scoped>
+    img{
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+    }
+</style>