mirror of
https://grond.iut-fbleau.fr/stiti/SAE_2.02
synced 2024-12-28 09:32:19 +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>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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>
|
<title>Liste des Artistes - Onzeur</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -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; ?>
|
||||||
|
@ -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>
|
||||||
|
@ -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 */
|
||||||
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user