mirror of
https://grond.iut-fbleau.fr/stiti/SAE_2.02
synced 2024-12-27 01:12:18 +01:00
Ajout de youtube et deezer et spotify sur les musiques
This commit is contained in:
parent
2bcedf4f24
commit
61ab3bb729
@ -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; ?>
|
||||
|
@ -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>
|
||||
|
@ -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 */
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user