gallego/SAEWEB2.2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css playlist bientot fini

Browse Source
This commit is contained in:
James BOUTARIC 2024-06-12 14:57:59 +02:00
parent ecc49c8c7e
commit 43921099be
8 changed files with 22 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ci/application/views/Welcome.php
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<title>SpotiFly</title>
<link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
<link rel="stylesheet" href="<?= base_url('assets/CSS/style.css') ?>">
<link rel="stylesheet" href="<?= base_url('assets/CSS/connexion.css') ?>">
</head>
<body>

2
ci/application/views/layout/header.php
View File

@ -35,7 +35,7 @@
</div>
</header>
</main>
<script src="../assets/JS/bouton.js"></script>
<script src=<?= base_url('/assets/JS/bouton.js') ?>></script>
<button id="scrollTopBtn" onclick="scrollToTop()">
<span>&#8593;</span>
</button>

10
ci/application/views/playlist_list.php
View File

@ -1,8 +1,8 @@
<div class="content">
<div id="Page">
<div class="content">
<section id="about" class="box">
<div class="box-content">
<img src=<?= base_url('assets/img/musique.png') ?> alt="Description de l'image 2">
<img src=<?= base_url('assets/img/alo.png') ?> alt="Description de l'image 2">
<div class="text-content">
<h2>Créer une nouvelle Playlist</h2>
<form action="<?= base_url('index.php/playlist/createPlaylistController') ?>" method="post" class="playlist-form">
@ -14,7 +14,7 @@
</section>
<section id="product" class="box">
<div class="box-img">
<img src=<?= base_url('assets/img/musique1.png') ?> alt="Description de l'image 2">
<img src=<?= base_url('assets/img/musique2.png') ?> alt="Description de l'image 2">
<div class="text-content">
<h2>Créer une playlist aléatoire</h2>
<form action="<?= base_url('index.php/playlist/createPlaylistController') ?>" method="post" class="playlist-form">
@ -25,6 +25,8 @@
</div>
</section>
</div>
</div>
<div id="header"> </div>
</form>

6
ci/application/views/song_playlist.php
View File

@ -2,13 +2,13 @@
<section class="list">
<?php
$i = 0;
foreach($songs as $song){
/*foreach($songs as $song){
echo "<div><article>";
echo "<header class='short-text'>";
$i = $i+1;
$minutes = floor($song->duration/60);
$secondes = $song->duration %60;
echo "{$i} - {$song->name} : {$minutes} min {$secondes} sec";
echo "{$i} - {$song->name} : {$minutes} min {$secondes} sec"; */
foreach($songPlaylists as $songPlaylist){
echo "<div><article>";
echo "<header class='short-text'>";
@ -20,7 +20,7 @@ foreach($songPlaylists as $songPlaylist){
echo "</header>";
echo "</article></div>";
}
}
?>
</section>

23
ci/assets/CSS/playlist.css
View File

@ -23,22 +23,21 @@ button.upload-image-button {
}
button.upload-image-button:hover {
background-color: green;
background-color: rgb(0, 255, 0);
color: white;
}
/* Style pour le conteneur de la playlist */
div.playlist-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding-top: 20px; /* Ajouter un padding pour éviter que le contenu ne soit caché par la barre de navigation */
justify-content: center; /* Centrer les éléments */
}
/* Style pour chaque élément de la playlist */
div.playlist-item {
width: 200px;
margin: 10px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
@ -47,20 +46,10 @@ div.playlist-item {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
div.playlist-item img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
/* Style pour le nom de la playlist */
div.playlist-item h3 {
margin-top: 10px;
font-size: 20px;
color: #333; /* changer la couleur du texte */
}
div.playlist-item:hover {
transform: scale(1.05);
}

10
ci/assets/style.css → ci/assets/CSS/style.css
View File

@ -10,7 +10,7 @@ body {
.content {
max-width: 1200px;
margin: 80px auto 0;
padding: 20px;
padding: 0px
}
.navbar a {
@ -81,13 +81,9 @@ body {
#Page {
text-align: center;
padding: 50px 0;
background: url(img/fond.jpeg);
background: url(../img/fond.jpeg);
}
#Page img {
width: 1000px;
height: 500PX;
}
.text-page {
border-top: 2px solid #1ed860;
@ -124,6 +120,8 @@ body {
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
height: auto;
max-width: 100%;
}
.box .box-img img{
width: 250px;

BIN
ci/assets/img/alo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
ci/assets/img/musique2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB