Merge pull request ANSHIKA-26#191 from zalabhavy/audio

Audio Style added and fix in center

src/css/Audio.css

@@ -0,0 +1,50 @@
+.container.centered {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 80vh;
+  }
+
+  .input-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .input-field {
+    width: 220px;
+    padding: 10px;
+    margin-right: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    transition: border-color 0.3s, box-shadow 0.3s;
+  }
+
+  .input-field:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+  }
+
+  .input-button {
+    padding: 15px 25px;
+    height: 42px;
+    width: 80px;
+    border-radius: 5px;
+    transition: background-color 0.3s, box-shadow 0.3s;
+  }
+
+  .input-button:hover {
+    background-color: #0056b3;
+    box-shadow: 0 0 10px rgba(0, 86, 179, 0.5);
+  }
+
+  .card {
+    transition: transform 0.3s, box-shadow 0.3s;
+  }
+
+  .card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  }
+

src/pages/resources/audio/ChanakyaAudio.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import * as func from "../../../functions/RequestEpisode.module";
 import ReactPlayer from "react-player";
+import "../../../css/Audio.css"
 
 const ChanakyaAudio = ({ setProgress }) => {
   const [title, setTitle] = useState("");
@@ -73,42 +74,46 @@ const ChanakyaAudio = ({ setProgress }) => {
   };
 
   return (
-    <div className="container">
-      <div className="container">
-        <input
-          type="number"
-          placeholder="Enter episode number"
-          value={value}
-          onChange={handleChange}
-          onKeyDown={handleKeyPress}
-        />
-        <button type="submit" className="btn btn-dark" onClick={handleClick}>
-          Enter
-        </button>
-      </div>
+    <div className="container centered">
+  <div className="input-container">
+    <input
+      type="number"
+      placeholder="Enter episode number"
+      value={value}
+      onChange={handleChange}
+      onKeyDown={handleKeyPress}
+      className="input-field"
+      min="1"
+      max="806"
+    />
+    <button type="submit" className="btn btn-dark input-button" onClick={handleClick}>
+      Enter
+    </button>
+  </div>
 
-      <div className="card" style={{ width: "20rem" }}>
-        <img
-          src="/src/assets/image.webp"
-          className="card-img-top"
-          alt="chanakya-image"
-        />
-        <div className="card-body">
-          <h5 className="card-title">{title}</h5>
-          <p className="card-text">{content}</p>
+  <div className="card" style={{ width: "20rem" }}>
+    <img
+      src="/src/assets/image.webp"
+      className="card-img-top"
+      alt="chanakya-image"
+    />
+    <div className="card-body">
+      <h5 className="card-title">{title}</h5>
+      <p className="card-text">{content}</p>
 
-          <ReactPlayer
-            url={URL}
-            volume={0.5}
-            playing
-            controls
-            playbackRate={playbackRate}
-            width="100%"
-            height="50px"
-          />
-        </div>
-      </div>
+      <ReactPlayer
+        url={URL}
+        volume={0.5}
+        playing
+        controls
+        playbackRate={playbackRate}
+        width="100%"
+        height="50px"
+      />
     </div>
+  </div>
+</div>
+
   );
 };