update

gaura2003 · Apr 14, 2024 · 3ef6fcf · 3ef6fcf
1 parent f57cfbd
commit 3ef6fcf
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 106 deletions.
diff --git a/css/music list.css b/css/music list.css
@@ -2,6 +2,7 @@ body {
   background: linear-gradient(black, rgb(75, 31, 75));
   padding: 0;
   margin: 0;
+  height: 100vh;
 }
 
 .laptop {

diff --git a/css/utiles.css b/css/utiles.css
diff --git a/pages/artist list.php b/pages/artist list.php
@@ -2,11 +2,98 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">    
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Home Page</title>
-    <link rel="stylesheet" href="../css/utiles.css">
+
+    <style>
+    body {
+        background: linear-gradient(black, rgb(75, 31, 75));
+        height: 100vh;
+
+    }
+
+    .container {
+        display: grid;
+        grid-template-columns: auto auto auto auto;
+        grid-gap: 15px 15px;
+        justify-content: center;
+
+
+    }
+
+    .card {
+        background-color: rgb(172, 188, 201);
+        border-radius: 5px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 150px;
+        height: 180px;
+        align-items: center;
+        padding: 10px 0;
+        text-align:center;
+    }
+
+    h3,
+    h2 {
+        margin: 0;
+        width: 100px;
+        white-space: wrap;
+        font-size: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    img {
+        width: 100px;
+        height: 100px;
+        border-radius: 5px;
+    }
+
+    .artist-link {
+
+        display: flex;
+        text-decoration: none;
+        color: black;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    @media screen and (max-width:400px) {
+        .container {
+            grid-template-columns: auto auto;
+
+        }
+
+        .card {
+            width: 120px;
+            height: 120px;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+        img {
+            width: 60px;
+            height: 60px;
+            border-radius: 5px;
+        }
+
+        h3,
+        h2 {
+            margin: 0;
+            font-size: 15px;
+            text-overflow: hidden;
+        }
+
+    }
+    </style>
 
 </head>
 

diff --git a/pages/artist_details.php b/pages/artist_details.php
@@ -5,6 +5,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Artist Details</title>
   <style>
+    body{
+      background:linear-gradient(black , rgb(75, 31, 75));
+      height:100vh;
+
+    }
     .container {
       max-width: 600px;
       margin: 0 auto;
@@ -30,6 +35,7 @@
     }
     .artist-details h2, .artist-details p {
       margin: 0;
+      color:white;
     }
     img{
       width:300px;

diff --git a/pages/home.php b/pages/home.php
@@ -44,7 +44,7 @@
                         <a class="nav-title" href="profile.php" style="color:black;">Profile</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-title" href="" style="color:black;">Artists</a>
+                        <a class="nav-title" href="artist list.php" style="color:black;">Artists</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-title" href="#" style="color:black;">Category</a>

diff --git a/pages/music list.php b/pages/music list.php
@@ -9,7 +9,7 @@
 
 </head>
 
-<body>
+<body style="height:100vh;" >
 
     <header>
         <nav>

diff --git a/pages/search.php b/pages/search.php
@@ -9,7 +9,7 @@
 
 </head>
 
-<body>
+<body style="height:100vh;">
 
     <header>
         <nav>
@@ -19,7 +19,7 @@
                 <li>artist</li>
                 <li>playlists</li>
                 <li>
-                    <form method="GET" action="music list.php" style="display:inline;">
+                    <form method="GET" action="search.php" style="display:inline;">
                         <input type="search" name="search" placeholder="Search for Music " name="find" id="">
                     </form>
                 </li>
@@ -33,15 +33,15 @@
             <div class="container">
                 <?php
     include "../Includes/connection.php";
-
+   echo '<div style="display:none;" >';
     // Retrieve search query
     $search = $_GET['search'];
 
     // Prepare SQL query to search for music
     $sql_select = "SELECT * FROM music WHERE title LIKE '%$search%' OR 
                artist LIKE '%$search%' OR album LIKE '%$search%' OR 
                genre LIKE '%$search%'";
-
+echo '</div>';
     $result = $conn->query($sql_select);
 
     if ($result->num_rows > 0) {

diff --git a/pages/upload music.php b/pages/upload music.php
@@ -1,83 +1,92 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Upload Music</title>
-<style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload Music</title>
+    <style>
     body {
         font-family: Arial, sans-serif;
-        background-color: #f4f4f4;
-        margin: 0;
+        background: linear-gradient(black, rgb(75, 31, 75));
         padding: 0;
+        margin: 0;
+        height: 110vh;
     }
+
     .container {
-        max-width: 600px;
-        margin: 20px auto;
+        max-width: 500px;
+        margin: 10px auto;
         padding: 20px;
-        background-color: #fff;
+        background-color: #ccc;
         border-radius: 5px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     }
+
     h2 {
         text-align: center;
     }
+
     label {
         display: block;
-        margin-bottom: 5px;
+        /* margin-bottom: 2px; */
     }
+
     input[type="text"],
     input[type="number"],
     input[type="file"] {
         width: 100%;
         padding: 10px;
-        margin-bottom: 15px;
+        margin-bottom: 1px;
         border: 1px solid #ccc;
         border-radius: 4px;
         box-sizing: border-box;
     }
+
     input[type="submit"] {
         background-color: #4CAF50;
         color: white;
-        padding: 15px 20px;
+        padding: 1px 20px;
         border: none;
         border-radius: 4px;
+        font-size: 20px;
         cursor: pointer;
         width: 100%;
+        height: 30px;
+        margin-bottom: 60px;
     }
+
     input[type="submit"]:hover {
         background-color: #45a049;
     }
-    . container{
-        margin:20px;
-    }
-</style>
+    </style>
 
 </head>
+
 <body>
     <div class="container">
-<h2>Upload Music</h2>
-<form method="post" action="upload music.php" enctype="multipart/form-data">
-    <label for="title">Title:</label><br>
-    <input type="text" id="title" name="title" required><br><br>
-    <label for="artist">Artist:</label><br>
-    <input type="text" id="artist" name="artist" required><br><br>
-    <label for="album">Album:</label><br>
-    <input type="text" id="album" name="album"><br><br>
-    <label for="genre">Genre:</label><br>
-    <input type="text" id="genre" name="genre"><br><br>
-    <label for="release_year">Release Year:</label><br>
-    <input type="number" id="release_year" name="release_year"><br><br>
-    <label for="duration_seconds">Duration (seconds):</label><br>
-    <input type="number" id="duration_seconds" name="duration_seconds"><br><br>
-    <label for="music_file">Select music file (MP3/WAV/OGG):</label><br>
-    <input type="file" id="music_file" name="music_file" accept=".mp3,.wav,.ogg" required><br><br>
-    <label for="music_image">Select music image (JPEG/PNG):</label><br>
-    <input type="file" id="music_image" name="music_image" accept="image/jpeg,image/png" required><br><br>
-    <input type="submit" value="Upload">
-</form>
-</div>
-<?php
+        <h2>Upload Music</h2>
+        <form method="post" action="upload music.php" enctype="multipart/form-data">
+            <label for="music_image">Select music image (JPEG/PNG):</label>
+            <input type="file" id="music_image" name="music_image" accept="image/jpeg,image/png" required><br><br>
+            <label for="music_file">Select music file (MP3/WAV/OGG):</label>
+            <input type="file" id="music_file" name="music_file" accept=".mp3,.wav,.ogg" required><br><br>
+            <label for="title">Title:</label>
+            <input type="text" id="title" name="title" required><br><br>
+            <label for="artist">Artist:</label>
+            <input type="text" id="artist" name="artist" required><br><br>
+            <label for="album">Album:</label>
+            <input type="text" id="album" name="album"><br><br>
+            <label for="genre">Genre:</label>
+            <input type="text" id="genre" name="genre"><br><br>
+            <label for="release_year">Release Year:</label>
+            <input type="number" id="release_year" name="release_year"><br><br>
+            <label for="duration_seconds">Duration (seconds):</label>
+            <input type="number" id="duration_seconds" name="duration_seconds"><br><br>
+            <input type="submit" value="Upload">
+        </form>
+    </div>
+    <?php
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
 
     include "../Includes/connection.php";
@@ -129,6 +138,7 @@
     $conn->close();
 }
 ?>
-<?php include  '../pages/includes/sticky footer.php'; ?>
+    <?php include  '../pages/includes/sticky footer.php'; ?>
 </body>
-</html>
+
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     </head>
-    <body>
+    <body style="height:100vh;" >
         <header>
             <nav>
@@ Expand Down @@