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> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>SpotiFly</title> <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') ?>"> <link rel="stylesheet" href="<?= base_url('assets/CSS/connexion.css') ?>">
</head> </head>
<body> <body>

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

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

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

@ -1,8 +1,8 @@
<div id="Page">
<div class="content"> <div class="content">
<section id="about" class="box"> <section id="about" class="box">
<div class="box-content"> <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"> <div class="text-content">
<h2>Créer une nouvelle Playlist</h2> <h2>Créer une nouvelle Playlist</h2>
<form action="<?= base_url('index.php/playlist/createPlaylistController') ?>" method="post" class="playlist-form"> <form action="<?= base_url('index.php/playlist/createPlaylistController') ?>" method="post" class="playlist-form">
@ -14,7 +14,7 @@
</section> </section>
<section id="product" class="box"> <section id="product" class="box">
<div class="box-img"> <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"> <div class="text-content">
<h2>Créer une playlist aléatoire</h2> <h2>Créer une playlist aléatoire</h2>
<form action="<?= base_url('index.php/playlist/createPlaylistController') ?>" method="post" class="playlist-form"> <form action="<?= base_url('index.php/playlist/createPlaylistController') ?>" method="post" class="playlist-form">
@ -25,6 +25,8 @@
</div> </div>
</section> </section>
</div> </div>
</div>
<div id="header"> </div> <div id="header"> </div>
</form> </form>

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

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

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

@ -23,22 +23,21 @@ button.upload-image-button {
} }
button.upload-image-button:hover { button.upload-image-button:hover {
background-color: green; background-color: rgb(0, 255, 0);
color: white; color: white;
} }
/* Style pour le conteneur de la playlist */ /* Style pour le conteneur de la playlist */
div.playlist-container { div.playlist-container {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
justify-content: space-around; gap: 20px;
padding-top: 20px; /* Ajouter un padding pour éviter que le contenu ne soit caché par la barre de navigation */ 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 */ /* Style pour chaque élément de la playlist */
div.playlist-item { div.playlist-item {
width: 200px;
margin: 10px;
padding: 12px; padding: 12px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 8px; border-radius: 8px;
@ -47,20 +46,10 @@ div.playlist-item {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
} }
div.playlist-item img { div.playlist-item img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: 5px; 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 { .content {
max-width: 1200px; max-width: 1200px;
margin: 80px auto 0; margin: 80px auto 0;
padding: 20px; padding: 0px
} }
.navbar a { .navbar a {
@ -81,13 +81,9 @@ body {
#Page { #Page {
text-align: center; text-align: center;
padding: 50px 0; padding: 50px 0;
background: url(img/fond.jpeg); background: url(../img/fond.jpeg);
} }
#Page img {
width: 1000px;
height: 500PX;
}
.text-page { .text-page {
border-top: 2px solid #1ed860; border-top: 2px solid #1ed860;
@ -124,6 +120,8 @@ body {
flex-direction: row-reverse; flex-direction: row-reverse;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: auto;
max-width: 100%;
} }
.box .box-img img{ .box .box-img img{
width: 250px; 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