.

ci/application/config/config.php

@@ -23,7 +23,7 @@ defined('BASEPATH') OR exit('No direct script access allowed');
 | a PHP script and you can easily do that on your own.
 |
 */
-$config['base_url'] = '/~brigitte/SAEWEB2.2/ci/';
+$config['base_url'] = '/~boutaric/SAEWEB2.2/ci/';
 
 /*
 |--------------------------------------------------------------------------

ci/application/views/albums_artist_list.php

@@ -1,4 +1,4 @@
-<section class="container">
+<section class="albums">
 <?php
 
     foreach ($AlbumsOfArtists as $AlbumsOfArtist) {

ci/application/views/song_playlist.php

@@ -1,4 +1,4 @@
-
+<title>SpotiFly</title>
 <section class="list">
 <?php
 $i = 0;

ci/assets/CSS/playlist.css

@@ -1,5 +1,4 @@
 /* Style pour les boutons */
-button[type='submit'].create-button,
 button[type='submit'].delete-button {
     background-color: #1ed860;
     color: white;
@@ -11,32 +10,17 @@ button[type='submit'].delete-button {
     transition: background-color 0.3s, color 0.3s;
 }
 
-button.upload-image-button {
+label.playlist-label{
-    background-color: transparent;
-    color: green;
-    border: 1px solid green;
-    padding: 8px 12px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 10px;
-    transition: background-color 0.3s, color 0.3s;
-}
-
-button.upload-image-button:hover {
-    background-color: rgb(0, 255, 0);
     color: white;
 }
-
-/* Style pour le conteneur de la playlist */
 div.playlist-container {
     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;
-    justify-content: center; /* Centrer les éléments */
+    padding-top: 20px;
 }
 
-/* Style pour chaque élément de la playlist */
 div.playlist-item {
     padding: 12px;
     border: 1px solid #ccc;
@@ -46,7 +30,6 @@ div.playlist-item {
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 }
 
-
 div.playlist-item img {
     max-width: 100%;
     height: auto;

ci/assets/CSS/song.css

@@ -16,18 +16,19 @@
     background-color: #f9f9f9;
 }
 
-.song-header {
+.short-text {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.song-name {
+.short-text form {
-    font-size: 18px;
+    display: flex;
-    font-weight: bold;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.add-to-playlist {
+.delete-button, .add-to-playlist {
     font-size: 16px;
     cursor: pointer;
     background-color: #4CAF50;
@@ -37,6 +38,10 @@
     border-radius: 5px;
 }
 
-.add-to-playlist:hover {
+.delete-button:hover, .add-to-playlist:hover {
     background-color: #45a049;
 }
+
+.short-text select {
+    margin-right: 10px;
+}

ci/assets/CSS/style.css

@@ -1,24 +1,29 @@
-body {
+
+* {
+    margin: 0;
+    padding: 0;
     box-sizing: border-box;
+}
+
+.content {
+    max-width: 100%;
+    margin: 0;
+    padding: 100px;
+}
+
+body {
     background-color: white;
     font-size: 16px;
     height: 80%;
     padding-top: 100px;
-    margin-right: 5px;
-}
-    
-.content {
-    max-width: 1200px;
-    margin: 80px auto 0;
-    padding: 0px
 }
 
 .navbar a {
     color: white;
     text-decoration: none;
     margin: 0 5px;
-
 }
+
 .navbar {
     background-color: black;
     padding: 20px;
@@ -32,10 +37,11 @@ body {
     box-sizing: border-box; 
 }
 
-.bouton a{
+.bouton a {
     color: #FFF;
     text-decoration: none;
 }
+
 .bouton {
     display: flex;
     text-decoration: none;
@@ -46,6 +52,7 @@ body {
     border: 2px;
     margin: 0 40px;
 }
+
 .user {
     margin-right: 50px;
     padding-left: center;
@@ -55,10 +62,12 @@ body {
     font-weight: bold;
     justify-content: space-between;
 }
+
 .menu {
     display: flex;
     flex-direction: column; 
 }
+
 .menu ul {
     list-style: none;
     display: flex;
@@ -78,36 +87,41 @@ body {
     font-family: Open Sans, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     font-size: 1.2rem; 
 }
+
 #Page {
     text-align: center;
     padding: 50px 0;
     background: url(../img/fond.jpeg);
 }
 
-
 .text-page {
     border-top: 2px solid #1ed860; 
     margin-top: 100px; 
     color: white;
 }
+.text-page h2{
+    margin-top: 50px; 
+    color: white;
+}
 
 #header {
     background-color: #1ed860; 
     padding: 2px 0;
 }
 
-
+.mention_legale h2 {
-.mention_legale h2{
     color: #1ed860;
     font-size: 2em;
     margin-left: 400px;
 }
-.mention_legale{
+
+.mention_legale {
     background-color: white;
     border-radius: 20px;
     margin: 60px auto 0;
     padding: 40px;
 }
+
 .box {
     display: flex;
     flex-direction: column;
@@ -115,6 +129,7 @@ body {
     padding: 20px;
     margin: 20px 0;
 }
+
 .box-img {
     display: flex;
     flex-direction: row-reverse;
@@ -123,28 +138,33 @@ body {
     height: auto;
     max-width: 100%;
 }
-.box .box-img img{
+
-     width: 250px; 
+.box .box-img img {
-     height: 150px; 
+    width: 250px; 
-     border-radius: 8px;
+    height: 150px; 
-     padding-right: 50px;
+    border-radius: 8px;
-     margin-left: 100px;
+    padding-right: 50px;
-     object-fit: initial;
+    margin-left: 100px;
+    object-fit: initial;
 }
-.box-content{
+
+.box-content {
     display: flex;
     flex-direction: row; 
     align-items: center;
 }
-.text-content{
+
+.text-content {
     flex: 1;
 }
-.box p{
+
+.box p {
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     font-size: 1.2em;
     margin-bottom: 10px;
     text-align: center;
 }
+
 .box h2 {
     color: #1ed860;
     font-weight: bold;
@@ -152,15 +172,18 @@ body {
     font-size: 3.5em; 
     margin-bottom: 10px; 
 }
-.box h3{
+
+.box h3 {
     color: #1ed860;
     font-weight: bold;
     font-size: 2em;
     margin-bottom: 10px;
 }
-.box p{
+
+.box p {
     text-align: justify;
 }
+
 .box img {
     width: 200px;
     height: 200px;
@@ -169,6 +192,7 @@ body {
     margin-right: 50px;
     margin-left: 40px;
 }
+
 .content-section h2 {
     color: #1ed860;
 }
@@ -179,12 +203,12 @@ body {
     height: 80px;
     margin-right: auto;
 }
+
 img {
     max-width: 100%;
     height: auto;
 }
 
-
 .footer {
     background-color: black;
     color: white;
@@ -194,11 +218,13 @@ img {
     width: 100%; 
     box-sizing: border-box; 
 }
+
 .footer-content {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap; 
 }
+
 .footer-section {
     text-align: center;
     margin: 10px;
@@ -234,6 +260,7 @@ img {
     height: 30px;
     margin-right: 5px;
 }
+
 #scrollTopBtn {
     display: none;
     position: fixed;
@@ -246,6 +273,3 @@ img {
     padding: 10px;
     cursor: pointer;
 }
-
-
-