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

@ -18,7 +18,12 @@
<li> <li>
<div class="artist-details"> <div class="artist-details">
<h2><?php echo $artist->name; ?></h2> <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> </div>
</li> </li>
<?php endforeach; ?> <?php endforeach; ?>

View File

@ -40,9 +40,11 @@
</a> </a>
<div class="music-links"> <div class="music-links">
<!-- Lien Spotify --> <!-- 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 --> <!-- 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> </div>
</footer> </footer>
</article> </article>

View File

@ -89,3 +89,46 @@ body {
width: 100%; 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; text-decoration: none;
transition: background-color 0.3s ease; 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 { .music-links a.spotify {
background-color: #c51414; background-color: #1DB954; /* Vert Spotify */
} }
.spotify:hover{ .music-links a.deezer {
background-color: #3c6915; background-color: #6E44FF; /* Violet Deezer */
} }
.youtube:hover { .music-links a.youtube {
background-color: #7a1818; 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, .artist-name,
.album-name { .album-name {
display: inline-block; display: inline-block;