Added wave and color bg and formatted file

src/App.css

@@ -4,6 +4,7 @@ input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
 /* info button css */
 .info-button-container {
   position: fixed;
@@ -42,14 +43,14 @@ input[type=number]::-webkit-outer-spin-button {
   margin-top: 10px;
   font-size: 14px;
   position: relative;
-  bottom: 60px; 
+  bottom: 60px;
   left: 50%;
   transform: translateX(-50%);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  width: 250px; 
+  width: 250px;
   z-index: 10;
 }
 
 .info-button-container:hover .info-box {
   display: block;
-}
+}

src/App.jsx

@@ -24,7 +24,7 @@ function App() {
   const handleKeyPress = (event) => {
     if (event.key === 'Enter') {
 
-      if(value<1){
+      if (value < 1) {
         showAlert("Enter valid episode");
         return;
       }
@@ -52,16 +52,16 @@ function App() {
   }
 
   return (
-    
+
     <div className='container'>
       <LoadingBar height={4} color='#f11946' progress={progress} />
       {alert && <Alert alert={alert} />}
 
-      
-      <Navbar handleOnChange={handleOnChange} handleKeyPress={handleKeyPress} value={value} handleKey={handleKey}/>
+
+      <Navbar handleOnChange={handleOnChange} handleKeyPress={handleKeyPress} value={value} handleKey={handleKey} />
       {/* <QuoteSection/> */}
 
-      
+
 
       <div className="info-button-container">
         <button className="info-button">
@@ -71,9 +71,9 @@ function App() {
           <p>Explore the life and teachings of Chanakya, an ancient Indian philosopher, economist, and political strategist. Learn about his contributions to Indian philosophy and political science.</p>
         </div>
       </div>
-      
-      {startPlayback && <RequestEpisode episodeNumber={episodeNumber} setEpisodeNumber={setEpisodeNumber} setProgress={setProgress} showAlert={showAlert}/>}
-      
+
+      {startPlayback && <RequestEpisode episodeNumber={episodeNumber} setEpisodeNumber={setEpisodeNumber} setProgress={setProgress} showAlert={showAlert} />}
+
     </div>
   );
 }

src/components/Alert/Alert.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const Alert = (props) => {
   return (
-    <div style={{ height: '50px'}} className='position-absolute z-2 text-center align-center '>
+    <div style={{ height: '50px' }} className='position-absolute z-2 text-center align-center '>
       {props.alert && <div className={`alert alert-warning alert-dismissible fade show`} role="alert">
         {props.alert.msg}
       </div>}

src/components/Cards/Card.css

@@ -1,52 +1,53 @@
 body {
-    padding: 1rem;
-  }
-  .audio-player{
-    width: 80vw;
-    padding: 1.2rem 1rem; 
-    border-radius: 5px
-  }
-
-  .rhap_container {
-    background: #f7f7f9;
-  }
-
-  .rhap_controls-section {
-    margin-bottom: 15px;
-  }
-
-  .rhap_progress-section {
-    height: 20px;
-    padding-bottom: 20px;
-  }
-
-  /* .rhap_main-controls-button {
+  padding: 1rem;
+}
+
+.audio-player {
+  width: 80vw;
+  padding: 1.2rem 1rem;
+  border-radius: 5px;
+}
+
+.rhap_container {
+  /* background: #f7f7f9; */
+  background-color: transparent;
+}
+
+.rhap_controls-section {
+  margin-bottom: 15px;
+}
+
+.rhap_progress-section {
+  height: 20px;
+  padding-bottom: 20px;
+}
+
+/* .rhap_main-controls-button {
     width: 80px !important;
     height: 80px !important;
   } */
-  
-  /* .rhap_main-controls-button {
+
+/* .rhap_main-controls-button {
     width: 4vw;
     height: 4vw;
   } */
-
-  .rhap_main-controls-button svg {
-    color: #ff5555;
-    width: 100%;
-    height: 100%;
-  }
-  .rhap_progress-filled,
-  .rhap_progress-indicator {
-    background-color: #ff5555 !important;
-  }
-
-  .rhap_button-clear.rhap_volume-button {
-    color: #ff5555 !important;
-  }
-
-  .rhap_volume-bar, .rhap_volume-indicator {
-    background-color: red;
-  }
-
-
-
+
+.rhap_main-controls-button svg {
+  color: #ff5555;
+  width: 100%;
+  height: 100%;
+}
+
+.rhap_progress-filled,
+.rhap_progress-indicator {
+  background-color: #ff5555 !important;
+}
+
+.rhap_button-clear.rhap_volume-button {
+  color: #ff5555 !important;
+}
+
+.rhap_volume-bar,
+.rhap_volume-indicator {
+  background-color: red;
+}

src/components/Cards/Card.jsx

@@ -55,7 +55,7 @@ const Card = (props) => {
 
         </div>
       </div>
-      
+
 
     </>
   );

src/components/Navbar.jsx

@@ -3,15 +3,15 @@ import Searchepisode from './Searchepisode'
 
 function Navbar(props) {
   const { handleOnChange, handleKeyPress, value, handleKey } = props;
-  const ww=window.innerWidth;
+  const ww = window.innerWidth;
   return (
     <>
-      <nav className={`d-flex ${ww<750 && 'flex-column'} flex-wrap justify-content-${ww>550?'between':'center'} align-items-center my-3`}>
+      <nav className={`text-dark d-flex ${ww < 750 && 'flex-column'} flex-wrap justify-content-${ww > 550 ? 'between' : 'center'} align-items-center my-3`}>
         <div className='fs-4 my-2 ' >
           <img src="https://raw.githubusercontent.com/Avdhesh-Varshney/Chanakya/main/src/assets/Chanakya-Logo.webp" alt="Chanakya-Image" width={"auto"} style={{ width: '5rem' }} />
           चाणक्य नीति
         </div>
-        <div className='' style={{margin:""}}>
+        <div className='' style={{ margin: "" }}>
           <Searchepisode className="" handleOnChange={handleOnChange} handleKeyPress={handleKeyPress} value={value} handleKey={handleKey} />
 
         </div>

src/components/Quotes/QuoteSection.css

@@ -1,17 +1,12 @@
-
 @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
 
 
 
 .quote-text {
   font-family: 'Great Vibes', cursive;
-  font-size: 1.9rem; 
+  font-size: 1.9rem;
   font-style: italic;
-  color: #ffc107; 
+  color: #ffc107;
   margin: 10px;
-  text-align: center; 
-}
-
-
-
-
+  text-align: center;
+}

src/components/Searchepisode.jsx

@@ -2,12 +2,12 @@ import React from 'react'
 
 function Searchepisode(props) {
     const { handleOnChange, handleKeyPress, value, handleKey } = props;
-    const ww=window.innerWidth;
+    const ww = window.innerWidth;
     return (
         <>
             <div className="d-flex text-center align-items-center justify-content-center ">
                 <div className="col-auto">
-                    {ww>740 && <label htmlFor="inputNumber" className="col-form-label">Search</label>}
+                    {ww > 740 && <label htmlFor="inputNumber" className="col-form-label">Search</label>}
                 </div>
                 <div className="col-auto mx-2">
                     <input type="number" id="inputNumber" className="form-control" value={value} onKeyDown={handleKeyPress} onChange={handleOnChange} placeholder='Episode number' />

src/index.css

@@ -12,11 +12,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-
-
 /* BACKGROUND with wave animation */
 
-/* 
+
 body {
   margin: auto;
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
@@ -30,13 +28,15 @@ body {
 
 @keyframes gradient {
   0% {
-      background-position: 0% 0%;
+    background-position: 0% 0%;
   }
+
   50% {
-      background-position: 100% 100%;
+    background-position: 100% 100%;
   }
+
   100% {
-      background-position: 0% 0%;
+    background-position: 0% 0%;
   }
 }
 
@@ -68,26 +68,26 @@ body {
 
 @keyframes wave {
   2% {
-      transform: translateX(1);
+    transform: translateX(1);
   }
 
   25% {
-      transform: translateX(-25%);
+    transform: translateX(-25%);
   }
 
   50% {
-      transform: translateX(-50%);
+    transform: translateX(-50%);
   }
 
   75% {
-      transform: translateX(-25%);
+    transform: translateX(-25%);
   }
 
   100% {
-      transform: translateX(1);
+    transform: translateX(1);
   }
 }
-*/
+
 /* Adjusting text color highlight for better visibility */
 /*.episode-container {
   display: flex;
@@ -121,5 +121,4 @@ body {
   display: inline-block;
   padding: 0 4px;
   border-radius: 4px;
-} */
-
+} */