creation aléatoire de playlist
This commit is contained in:
@@ -74,4 +74,39 @@ class Playlist extends CI_Controller {
|
|||||||
$this->model_music->DeletePlaylist($id);
|
$this->model_music->DeletePlaylist($id);
|
||||||
redirect('playlist');
|
redirect('playlist');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function create_random_playlist() {
|
||||||
|
$this->form_validation->set_rules('num_tracks', 'num_tracks', 'required');
|
||||||
|
$this->form_validation->set_rules('name', 'name', 'required');
|
||||||
|
|
||||||
|
$data['genres'] = $this->model_music->get_all_genres();
|
||||||
|
$data['artists'] = $this->model_music->get_all_artists();
|
||||||
|
$data['years'] = $this->model_music->get_all_years();
|
||||||
|
|
||||||
|
if ($this->form_validation->run() == FALSE){
|
||||||
|
$this->load->view('layout/header');
|
||||||
|
$this->load->view('random_Playlist',$data);
|
||||||
|
$this->load->view('layout/footer');
|
||||||
|
}else{
|
||||||
|
$genres = $this->input->post('genre');
|
||||||
|
$artists = $this->input->post('artist');
|
||||||
|
$years = $this->input->post('year');
|
||||||
|
$nom = $this->input->post('name');
|
||||||
|
$description = $this->input->post('Description');
|
||||||
|
$userId = $this->session->userdata('userId');
|
||||||
|
$num_tracks = (int) $this->input->post('num_tracks');
|
||||||
|
$playlist = array(
|
||||||
|
'name'=>$nom,
|
||||||
|
'description'=>$description,
|
||||||
|
'userId'=>$userId,
|
||||||
|
);
|
||||||
|
$this->model_music->addPlayliste($playlist);
|
||||||
|
$idplaylist = $this->model_music->IdPLaylistByName($nom);
|
||||||
|
$tracks = $this->model_music->get_random_tracks($genres, $artists, $years, $num_tracks);
|
||||||
|
foreach ($tracks as $musique){
|
||||||
|
$this->model_music->AddSongtoPlaylist($idplaylist, $musique->trackId);
|
||||||
|
}
|
||||||
|
redirect('playlist');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -469,14 +469,17 @@ class Model_music extends CI_Model {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public function DuplicatePlaylist($idplaylist,$nomplaylist){
|
public function IdPLaylistByName($nomPLaylist){
|
||||||
$this->db->select('Playlist.playlistId');
|
$this->db->select('Playlist.playlistId');
|
||||||
$this->db->from('Playlist');
|
$this->db->from('Playlist');
|
||||||
$this->db->where('name', $nomplaylist);
|
$this->db->where('name', $nomPLaylist);
|
||||||
$query = $this->db->get();
|
$query = $this->db->get();
|
||||||
$result = $query->row();
|
$result = $query->row();
|
||||||
$id = $result->playlistId;
|
return $result->playlistId;
|
||||||
print_r($id);
|
}
|
||||||
|
|
||||||
|
public function DuplicatePlaylist($idplaylist,$nomplaylist){
|
||||||
|
$id = $this->model_music->IdPLaylistByName($nomplaylist);
|
||||||
|
|
||||||
$this->db->select('PlaylistSong.trackId');
|
$this->db->select('PlaylistSong.trackId');
|
||||||
$this->db->from('PlaylistSong');
|
$this->db->from('PlaylistSong');
|
||||||
@@ -495,4 +498,29 @@ class Model_music extends CI_Model {
|
|||||||
$this->db->where('playlistId',$idplaylist);
|
$this->db->where('playlistId',$idplaylist);
|
||||||
$this->db->delete("Playlist");
|
$this->db->delete("Playlist");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function get_random_tracks($genres = [], $artists = [], $years = [], $num_tracks = 10) {
|
||||||
|
$this->db->select('track.id as trackId');
|
||||||
|
$this->db->from('track');
|
||||||
|
$this->db->join('album', 'album.id = track.albumId');
|
||||||
|
$this->db->join('artist', 'album.artistId = artist.Id');
|
||||||
|
$this->db->join('genre', 'genre.id = album.genreid');
|
||||||
|
|
||||||
|
if (!empty($genres)) {
|
||||||
|
$this->db->where_in('genre.name', $genres);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!empty($artists)) {
|
||||||
|
$this->db->where_in('artist.name', $artists);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!empty($years)) {
|
||||||
|
$this->db->where_in('year', $years);
|
||||||
|
}
|
||||||
|
|
||||||
|
$this->db->order_by('RAND()');
|
||||||
|
$this->db->limit($num_tracks);
|
||||||
|
$query = $this->db->get();
|
||||||
|
return $query->result();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,77 +1,5 @@
|
|||||||
<style>
|
|
||||||
.filter-options {
|
|
||||||
display: none;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.filter-buttons {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.filter-buttons.show {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.filter-checkboxes {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.filter-checkboxes.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.sort-buttons {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.show-buttons .sort-buttons {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
var filterOptionsVisible = false;
|
|
||||||
|
|
||||||
function toggleFilterOptions() {
|
|
||||||
var filterOptions = document.getElementById('filter-options');
|
|
||||||
var filterButtons = document.getElementById('filter-buttons');
|
|
||||||
|
|
||||||
if (!filterOptionsVisible) {
|
|
||||||
filterOptions.style.display = 'block';
|
|
||||||
filterButtons.classList.add('show');
|
|
||||||
filterOptionsVisible = true;
|
|
||||||
} else {
|
|
||||||
filterOptions.style.display = 'none';
|
|
||||||
filterButtons.classList.remove('show');
|
|
||||||
hideCheckboxes();
|
|
||||||
filterOptionsVisible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleCheckboxes(filterType) {
|
|
||||||
var checkboxes = document.getElementById(filterType + '-checkboxes');
|
|
||||||
if (checkboxes.style.display === 'none' || checkboxes.style.display === '') {
|
|
||||||
checkboxes.style.display = 'block';
|
|
||||||
} else {
|
|
||||||
checkboxes.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideCheckboxes() {
|
|
||||||
var checkboxes = document.querySelectorAll('.filter-checkboxes');
|
|
||||||
checkboxes.forEach(function(checkbox) {
|
|
||||||
checkbox.classList.remove('show');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleSortButtons() {
|
|
||||||
var sortButtons = document.getElementById('sort-buttons');
|
|
||||||
if (sortButtons.style.display === 'none' || sortButtons.style.display === '') {
|
|
||||||
sortButtons.style.display = 'block';
|
|
||||||
} else {
|
|
||||||
sortButtons.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function sortAlbums(column, order) {
|
|
||||||
var url = "<?= site_url('albums/index'); ?>";
|
|
||||||
url += "?sort=" + column + "&order=" + order;
|
|
||||||
window.location.href = url;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<?php $page = preg_split('/[\/]/',$_SERVER['REQUEST_URI']);
|
<?php $page = preg_split('/[\/]/',$_SERVER['REQUEST_URI']);
|
||||||
if($page[count($page)-2] != 'viewAlbum'){ ?>
|
if($page[count($page)-2] != 'viewAlbum'){ ?>
|
||||||
<h5>Filter Albums</h5>
|
<h5>Filter Albums</h5>
|
||||||
@@ -135,10 +63,14 @@ if($page[count($page)-2] != 'viewAlbum'){ ?>
|
|||||||
<?php
|
<?php
|
||||||
$page = preg_split('/[\/]/', $_SERVER['REQUEST_URI']);
|
$page = preg_split('/[\/]/', $_SERVER['REQUEST_URI']);
|
||||||
$long_page = count($page) - 1;
|
$long_page = count($page) - 1;
|
||||||
$url = $page[$long_page];
|
$valid_segments = ['albums', 'chansons'];
|
||||||
while ($page[$long_page] != 'albums'){
|
$url = '';
|
||||||
$long_page = $long_page - 1;
|
|
||||||
$url = $page[$long_page] . '/' . $url;
|
for ($i = $long_page; $i >= 0; $i--) {
|
||||||
|
if (in_array($page[$i], $valid_segments)) {
|
||||||
|
$url = implode('/', array_slice($page, $i));
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
foreach($albums as $album){
|
foreach($albums as $album){
|
||||||
|
|||||||
@@ -1,11 +1,3 @@
|
|||||||
<section class="albums-details">
|
|
||||||
<div class="albums-content">
|
|
||||||
<div class="albums-image">
|
|
||||||
<?php
|
|
||||||
echo '<img src="data:image/jpeg;base64,' . base64_encode($albums->coverImage) . '" style="width: 300px; height: 300px;" />';
|
|
||||||
?>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<?php
|
<?php
|
||||||
$page = preg_split('/[\/]/',$_SERVER['REQUEST_URI']);
|
$page = preg_split('/[\/]/',$_SERVER['REQUEST_URI']);
|
||||||
$long_page = count($page)-1;
|
$long_page = count($page)-1;
|
||||||
@@ -15,66 +7,45 @@
|
|||||||
$url = $page[$long_page];
|
$url = $page[$long_page];
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
<section class="album-details">
|
||||||
|
<div class="album-content">
|
||||||
|
<div class="album-image">
|
||||||
|
<?php
|
||||||
|
echo '<img src="data:image/jpeg;base64,' . base64_encode($albums->coverImage) . '" style="width: 300px; height: 300px;" />';
|
||||||
|
?>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
<h4><?php echo $albums->name; ?></h4>
|
<h4><?php echo $albums->name; ?></h4>
|
||||||
|
|
||||||
<h8><?php echo " - Artiste : " . $albums->artist->name; ?></h8>
|
<h8><?php echo " - Artiste : " . $albums->artist->name; ?></h8>
|
||||||
<p><?php echo " - Année : " . $albums->year; ?></p>
|
<p><?php echo " - Année : " . $albums->year; ?></p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="albums-songs">
|
<div class="album-songs">
|
||||||
<?php
|
<?php
|
||||||
// Afficher les noms des chansons sous forme de tableau
|
|
||||||
echo "<table>";
|
echo "<table>";
|
||||||
echo "<tr>";
|
echo "<tr>";
|
||||||
echo "<th><h6>Titre</h6></th>";
|
echo "<th>Titre</th>";
|
||||||
echo "<th></th>";
|
echo "<th>Durée</th>";
|
||||||
echo "<th></th>";
|
echo "<th>Action</th>";
|
||||||
echo "<th></th>";
|
|
||||||
echo "<th></th>";
|
|
||||||
echo "<th></th>";
|
|
||||||
echo "<th></th>";
|
|
||||||
echo "<th></th>";
|
|
||||||
echo "<th></th>";
|
|
||||||
echo "<th></th>";
|
|
||||||
|
|
||||||
echo "<th><h6>Durée</h6></th>";
|
|
||||||
|
|
||||||
echo "</tr>";
|
echo "</tr>";
|
||||||
foreach ($albums->songs as $index => $songName) {
|
foreach ($albums->songs as $index => $song) {
|
||||||
$artistName = $albums->artist->name;
|
$artistName = $albums->artist->name;
|
||||||
$duration = isset($albums->tracks[$index]->duration) ? convertirSecondesEnMinutes($albums->tracks[$index]->duration) : '';
|
$duration = isset($albums->tracks[$index]->duration) ? convertirSecondesEnMinutes($albums->tracks[$index]->duration) : '';
|
||||||
echo "<td>{$songName}</td>";
|
echo "<tr>";
|
||||||
|
echo "<td>{$song}</td>";
|
||||||
echo "<th></th>";
|
echo "<td>{$duration}</td>";
|
||||||
echo "<th></th>";
|
echo "<td>";
|
||||||
echo "<th></th>";
|
|
||||||
echo "<th></th>";
|
|
||||||
echo "<th></th>";
|
|
||||||
if ($this->session->userdata('logged_in')){
|
if ($this->session->userdata('logged_in')){
|
||||||
if($this->model_music->SongInPlaylist($albums->tracks[$index]->trackId)){
|
if($this->model_music->SongInPlaylist($albums->tracks[$index]->trackId)){
|
||||||
echo "<td>";
|
echo anchor("chansons/deleteSongtoPlaylist/{$albums->tracks[$index]->trackId}","<i class='fa fa-trash'></i>");
|
||||||
echo anchor("chansons/deleteSongtoPlaylist/{$albums->tracks[$index]->trackId}?page={$url}","<i class='fa fa-trash'></i>");
|
|
||||||
echo "</td>";
|
|
||||||
}
|
}
|
||||||
echo "<td>";
|
|
||||||
echo anchor("chansons/addSongtoPlaylist/{$albums->tracks[$index]->trackId}?page={$url}","<i class='fa fa-plus'></i>");
|
|
||||||
echo "</td>";
|
|
||||||
}
|
}
|
||||||
echo "<th></th>";
|
echo anchor("chansons/addSongtoPlaylist/{$albums->tracks[$index]->trackId}","<i class='fa fa-plus'></i>");
|
||||||
echo "<th></th>";
|
//echo "<a href='" . site_url('albums/select_playlist?track_id=' . $albums->tracks[$index]->trackId) . "' class='btn-plus'>+</a>";
|
||||||
echo "<th></th>";
|
echo "</td>";
|
||||||
echo "<th></th>";
|
|
||||||
|
|
||||||
echo "<td>{$duration}</td>";
|
|
||||||
echo "</tr>";
|
echo "</tr>";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
echo "</table>";
|
echo "</table>";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function convertirSecondesEnMinutes($secondes) {
|
function convertirSecondesEnMinutes($secondes) {
|
||||||
$minutes = floor($secondes / 60);
|
$minutes = floor($secondes / 60);
|
||||||
$secondesRestantes = $secondes % 60;
|
$secondesRestantes = $secondes % 60;
|
||||||
|
|||||||
@@ -1,27 +1,4 @@
|
|||||||
<style>
|
|
||||||
.filter-options {
|
|
||||||
display: none;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.filter-buttons {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.filter-buttons.show {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.filter-checkboxes {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.filter-checkboxes.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.sort-buttons {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.show-buttons .sort-buttons {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script>
|
<script>
|
||||||
var filterOptionsVisible = false;
|
var filterOptionsVisible = false;
|
||||||
|
|
||||||
|
|||||||
@@ -71,14 +71,18 @@
|
|||||||
<h5>Chansons list</h5>
|
<h5>Chansons list</h5>
|
||||||
<section class="list">
|
<section class="list">
|
||||||
<?php
|
<?php
|
||||||
ini_set('memory_limit', '512M');
|
|
||||||
|
|
||||||
$page = preg_split('/[\/]/', $_SERVER['REQUEST_URI']);
|
$page = preg_split('/[\/]/', $_SERVER['REQUEST_URI']);
|
||||||
$long_page = count($page) - 1;
|
$long_page = count($page) - 1;
|
||||||
$url = $page[$long_page];
|
$valid_segments = ['albums', 'chansons'];
|
||||||
while ($page[$long_page] != 'albums' && $page[$long_page] != 'chansons'){
|
$url = '';
|
||||||
$long_page = $long_page - 1;
|
|
||||||
$url = $page[$long_page];
|
for ($i = $long_page; $i >= 0; $i--) {
|
||||||
|
if (in_array($page[$i], $valid_segments)) {
|
||||||
|
$url = implode('/', array_slice($page, $i));
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
foreach($chansons as $chanson){
|
foreach($chansons as $chanson){
|
||||||
@@ -98,8 +102,5 @@ foreach($chansons as $chanson){
|
|||||||
</article></div>";
|
</article></div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
echo "<div class='pagination-links'>";
|
|
||||||
echo "<?= $pagination; ?>";
|
|
||||||
echo "</div>";
|
|
||||||
?>
|
?>
|
||||||
</section>
|
</section>
|
||||||
@@ -9,7 +9,8 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
<?=link_tag('assets/style.css')?>
|
<?=link_tag('assets/style.css');?>
|
||||||
|
<script type="text/javascript" src="<?= base_url('assets/script.js'); ?>"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main class='container'>
|
<main class='container'>
|
||||||
|
|||||||
@@ -2,7 +2,10 @@
|
|||||||
<section class="list">
|
<section class="list">
|
||||||
<?php
|
<?php
|
||||||
echo"<div>";
|
echo"<div>";
|
||||||
|
if($this->session->userdata('logged_in')){
|
||||||
echo anchor("playlist/addplaylist","<i class='fa fa-plus'></i>");
|
echo anchor("playlist/addplaylist","<i class='fa fa-plus'></i>");
|
||||||
|
echo anchor("playlist/create_random_playlist","<i class='fa fa-random'></i>");
|
||||||
|
}
|
||||||
echo"</div>";
|
echo"</div>";
|
||||||
foreach($playlists as $playlist){
|
foreach($playlists as $playlist){
|
||||||
echo "<div><article>";
|
echo "<div><article>";
|
||||||
|
|||||||
76
CodeIgniter-3.1.13/application/views/random_Playlist.php
Normal file
76
CodeIgniter-3.1.13/application/views/random_Playlist.php
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
|
||||||
|
<style>
|
||||||
|
.filter-buttons {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.filter-buttons.show {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.filter-checkboxes {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.filter-checkboxes.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.show-buttons .sort-buttons {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
function toggleCheckboxes(filterType) {
|
||||||
|
var checkboxes = document.getElementById(filterType + '-checkboxes');
|
||||||
|
if (checkboxes.style.display === 'none' || checkboxes.style.display === '') {
|
||||||
|
checkboxes.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
checkboxes.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<h5>Différents critères</h5>
|
||||||
|
|
||||||
|
<form method="post">
|
||||||
|
<div id="filter-buttons" class="filter-buttons">
|
||||||
|
<button type="button" onclick="toggleCheckboxes('genre')">Genres</button>
|
||||||
|
<button type="button" onclick="toggleCheckboxes('artist')">Artists</button>
|
||||||
|
<button type="button" onclick="toggleCheckboxes('year')">Years</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="genre-checkboxes" style="display:none;">
|
||||||
|
<?php foreach ($genres as $genre): ?>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" name="genre[]" value="<?= $genre->genreName; ?>">
|
||||||
|
<?= $genre->genreName; ?>
|
||||||
|
</label><br>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="artist-checkboxes" style="display:none;">
|
||||||
|
<?php foreach ($artists as $artist): ?>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" name="artist[]" value="<?= $artist->artistName; ?>">
|
||||||
|
<?= $artist->artistName; ?>
|
||||||
|
</label><br>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="year-checkboxes" style="display:none;">
|
||||||
|
<?php foreach ($years as $year): ?>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" name="year[]" value="<?= $year->year; ?>">
|
||||||
|
<?= $year->year; ?>
|
||||||
|
</label><br>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
<label for="num_tracks">Nombre de musiques</label>
|
||||||
|
<input type="number" id="num_tracks" name="num_tracks" min="1" placeholder="Nombre de musiques" required><br>
|
||||||
|
<label for="name">Nom de la playlist</label>
|
||||||
|
<input type="text" id="name" name="name" placeholder="name" required>
|
||||||
|
<div class="grid">
|
||||||
|
<label for="text">Déscription
|
||||||
|
<input type="text" id="Description" name="Description" placeholder="Description" >
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<!-- Button -->
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
@@ -57,3 +57,90 @@ section.list img {
|
|||||||
.show-buttons .sort-buttons {
|
.show-buttons .sort-buttons {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #13171f;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-details {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #13171f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-image {
|
||||||
|
margin-right: 50px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #13171f;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-cover {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-name {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-artist,
|
||||||
|
.album-year {
|
||||||
|
font-size: 1em;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-songs {
|
||||||
|
flex-grow: 2;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #13171;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: 12px;
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
background-color: #444;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background-color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
background-color: #444;
|
||||||
|
color: #13171f;
|
||||||
|
border: none;
|
||||||
|
padding: 2px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user