make responsive and modified component

Satyam1923 · May 23, 2024 · eb8837c · eb8837c
1 parent 8711a3c
commit eb8837c
Show file tree

Hide file tree

Showing 9 changed files with 542 additions and 345 deletions.
diff --git a/backend/index.js b/backend/index.js
@@ -61,5 +61,5 @@ app.get("/search", async (req, res) => {
 });
 
 app.listen(PORT, () => {
-    console.log(`Server is running on port ${port}`);
+    console.log(`Server is running on port ${PORT}`);
 });
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -124,33 +124,34 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
+  /* min-height: 100vh; */
   /* background-color: #d9dbe6; */
 
   font-family: "Poppins", sans-serif;
   font-size: 1.6;
   color: var(--color-gray-700);
 
-  /* overflow: hidden; */
+  overflow-x: hidden;
   margin: 0;
-  height: 100vh;
-  background: linear-gradient(to left, #2c003e , #ff00cc , #000a12 );
-  
-  background-repeat: no-repeat;
+  /* height: 100vh; */
+  background: linear-gradient(to left, #2c003e, #ff00cc, #000a12);
+
+  background-repeat: repeat;
   background-attachment: fixed;
+
 }
 
 /*================================================ Side bar ================================================= */
 
-aside {
+/* aside {
   color: #fff;
   width: 30%;
   padding-left: 20px;
   height: 100vh;
   padding-top: 3rem;
 
   border-right: 0.2px solid rgba(255, 255, 255, 0.279);
-}
+} */
 
 .searchbar {
   display: flex;
@@ -186,24 +187,23 @@ input[type="search"] {
 }
 
 aside a {
-
   font-size: 15px;
   color: #fff;
   display: flex;
   padding: 7px;
- 
+
   height: 3rem;
   text-align: center;
   align-items: center;
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
 }
-aside p{
+#aside-p {
   margin-left: 10px;
   margin-top: 12px;
 }
 
-aside a:hover {
+#aside-a:hover {
   background: rgba(255, 255, 255, 0.25);
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
   backdrop-filter: blur(18.5px);
@@ -224,35 +224,32 @@ aside a:hover {
   border-bottom-left-radius: 25px;
 }
 
-.delete{
+.delete {
   margin-left: 50px;
   font-size: 20px;
 }
 
-
-@media screen and (max-width: 1100px){
-  aside{
-    width:10%;
+@media screen and (max-width: 1100px) {
+  aside {
+    width: 10%;
   }
-  aside p{
-     display: none;
+  aside p {
+    display: none;
   }
   aside input[type="search"] {
     display: none;
   }
-  aside RiDeleteBin6Line{
+  aside RiDeleteBin6Line {
     display: none;
   }
-  .delete{
+  .delete {
     display: none;
   }
-  aside b{
+  aside b {
     font-weight: 400;
   }
 }
 
-
-
 aside p {
   margin-bottom: 11px;
 }
@@ -261,66 +258,60 @@ aside p {
 .section2 {
   width: 55%;
   display: flex;
-
   align-items: center;
   flex-direction: column;
   justify-content: center;
-
 }
 /* .swiper {
   margin-left: 0px;
   margin-right: 0px;
 } */
-.searchbar2{
+.searchbar2 {
   width: 100%;
-  height:100%;
+  height: 100%;
   display: flex;
   justify-content: center;
-    height: 4rem;
-   
+  height: 4rem;
+
   align-items: center;
-
 }
 
 .section2 input[type="search"] {
   height: 2.5rem;
   width: 60%;
-
 }
 .section2 h2 {
   color: white;
 }
 
-.song_content{
-  width:100%;
-  height:80vh;
+.song_content {
+  width: 100%;
+  height: 80vh;
   display: flex;
- 
+
   align-items: center;
-  flex-direction:column;
+  flex-direction: column;
 }
 
 /*============================================= Section3 ==================================================*/
 
 .section3 {
   width: 40%;
   display: flex;
-  
+
   align-items: center;
   flex-direction: column;
   height: 100vh;
-  
+
   border-left: 0.2px solid rgba(255, 255, 255, 0.279);
 }
-.links
-{
+.links {
   display: flex;
   justify-content: center;
   align-items: center;
-margin-bottom:15px;
-
+  margin-bottom: 15px;
 }
-.link{
+.link {
   background: rgba(255, 255, 255, 0.25);
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
   backdrop-filter: blur(18.5px);
@@ -343,7 +334,7 @@ margin-bottom:15px;
   width: 80%;
 }
 
-.search-details p{
+.search-details p {
   font-size: 12px;
 }
 .Card2 {
@@ -359,9 +350,9 @@ margin-bottom:15px;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   height: auto;
-  max-height:18rem;
+  max-height: 18rem;
   width: 80%;
- margin-top: 1rem;
+  margin-top: 1rem;
 }
 .details2 {
   height: 5rem;
@@ -377,7 +368,6 @@ margin-bottom:15px;
 }
 
 .player {
-
   width: 70vh;
   height: 90vh;
   padding: 20px 14px 8px 14px;
@@ -388,7 +378,6 @@ margin-bottom:15px;
   flex-direction: column;
   background-color: #f1f4f5;
   justify-content: space-evenly;
-
 }
 
 .search-box {
@@ -435,8 +424,6 @@ margin-bottom:15px;
   box-shadow: -5px -5px 15px 0px #ffffff9e, 5px 5px 15px 0px #a3b1c6a8;
 }
 
-
-
 li {
   list-style-type: none;
 }
@@ -582,7 +569,7 @@ input[type="range"] {
   padding: 10px;
   border-radius: 5px;
   margin-bottom: 10px;
-  border-bottom: .4px solid rgba(255, 255, 255, 0.171);
+  border-bottom: 0.4px solid rgba(255, 255, 255, 0.171);
 }
 
 .songresult img {
@@ -593,8 +580,6 @@ input[type="range"] {
   align-items: center;
 }
 
-
-
 .result-item {
   border-radius: 10px;
   width: 98%;
@@ -799,23 +784,22 @@ input[type="range"]:disabled::-moz-range-thumb {
   width: 300px;
 }
 
-
 .mySwiper {
   width: 90%;
   overflow-x: scroll;
-  
+
   height: 14rem;
   margin: 0;
   padding: 20px;
-  
+
   background: rgba(255, 255, 255, 0.25);
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
   backdrop-filter: blur(18.5px);
   -webkit-backdrop-filter: blur(18.5px);
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.18);
 }
-.song p{
+.song p {
   font-size: 12px;
 }
 
@@ -830,12 +814,13 @@ input[type="range"]:disabled::-moz-range-thumb {
 .song img {
   border-radius: 10px;
 }
- .swiper-button-prev,.swiper-button-next {
+.swiper-button-prev,
+.swiper-button-next {
   color: white !important;
   /* height:15px !important;
   width: 15px !important; */
   --swiper-navigation-size: 18px;
-  
+
   background: rgba(255, 255, 255, 0.25);
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
   backdrop-filter: blur(18.5px);