Ajout de youtube et deezer et spotify sur les musiques

This commit is contained in:
stiti 2024-05-26 18:05:12 +02:00
parent 2bcedf4f24
commit 61ab3bb729
4 changed files with 77 additions and 12 deletions

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?=link_tag('assets/css/artists_list.css')?>
<?= link_tag('assets/css/artists_list.css') ?>
<title>Liste des Artistes - Onzeur</title>
</head>
<body>
@ -18,7 +18,12 @@
<li>
<div class="artist-details">
<h2><?php echo $artist->name; ?></h2>
<p><a href="<?php echo site_url('artiste/'.$artist->id); ?>">Voir les détails</a></p>
<p>
<a href="<?php echo site_url('artiste/'.$artist->id); ?>">Voir les détails</a> <br><br>
<a href="https://open.spotify.com/search/<?php echo urlencode($artist->name); ?>/artists" class="spotify" target="_blank">Spotify</a> |
<a href="https://www.deezer.com/search/<?php echo urlencode($artist->name); ?>/artist" class="deezer" target="_blank">Deezer</a> |
<a href="https://www.youtube.com/results?search_query=<?php echo urlencode($artist->name); ?>&sp=EgIQAg%253D%253D" class="youtube" target="_blank">YouTube</a>
</p>
</div>
</li>
<?php endforeach; ?>

View File

@ -40,9 +40,11 @@
</a>
<div class="music-links">
<!-- Lien Spotify -->
<a href="https://open.spotify.com/search/<?php echo urlencode($musique->name . ' ' . $musique->artistName); ?>" class="spotify" target="_blank">Écouter sur Spotify</a>
<a href="https://open.spotify.com/search/<?php echo urlencode($musique->name . ' ' . $musique->artistName); ?>" class="spotify" target="_blank">Spotify</a> |
<!-- Lien Deezer -->
<a href="https://www.deezer.com/search/<?php echo urlencode($musique->name . ' ' . $musique->artistName); ?>" class="deezer" target="_blank">Deezer</a> |
<!-- Lien YouTube -->
<a href="https://www.youtube.com/results?search_query=<?php echo urlencode($musique->name . ' ' . $musique->artistName); ?>" class="youtube" target="_blank">Regarder sur YouTube</a>
<a href="https://www.youtube.com/results?search_query=<?php echo urlencode($musique->name . ' ' . $musique->artistName); ?>" class="youtube" target="_blank">YouTube</a>
</div>
</footer>
</article>

View File

@ -89,3 +89,46 @@ body {
width: 100%;
}
}
.artist-details p {
margin-top: 10px;
}
.artist-details p a {
display: inline-block;
margin: 0 5px;
}
.artist-details p a img {
width: 30px;
height: auto;
}
.artist-details a.spotify,
.artist-details a.deezer,
.artist-details a.youtube {
color: white;
padding: 8px 12px;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.artist-details a.spotify {
background-color: #1DB954; /* Vert Spotify */
}
.artist-details a.deezer {
background-color: #8826df; /* Violet Deezer */
}
.artist-details a.youtube {
background-color: #FF0000; /* Rouge YouTube */
}
.artist-details a.spotify:hover,
.artist-details a.deezer:hover,
.artist-details a.youtube:hover {
color: black;
background-color: rgba(255, 255, 255, 0.8); /* Fond légèrement plus clair au survol */
}

View File

@ -148,22 +148,37 @@ header.short-text a {
text-decoration: none;
transition: background-color 0.3s ease;
}
.spotify {
background-color: #5bab15;
.music-links a.spotify,
.music-links a.deezer,
.music-links a.youtube {
color: white;
padding: 8px 12px;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.youtube {
background-color: #c51414;
.music-links a.spotify {
background-color: #1DB954; /* Vert Spotify */
}
.spotify:hover{
background-color: #3c6915;
.music-links a.deezer {
background-color: #6E44FF; /* Violet Deezer */
}
.youtube:hover {
background-color: #7a1818;
.music-links a.youtube {
background-color: #FF0000; /* Rouge YouTube */
}
.music-links a.spotify:hover,
.music-links a.deezer:hover,
.music-links a.youtube:hover {
color: black;
background-color: rgba(255, 255, 255, 0.8); /* Fond légèrement plus clair au survol */
}
.artist-name,
.album-name {
display: inline-block;