Merge pull request #3588 from simran0809/main

Styling changes in some of the files
anuragverma108 · Oct 17, 2024 · e9664dc · e9664dc
2 parents 457ca7e + 358f14c
commit e9664dc
Show file tree

Hide file tree

Showing 9 changed files with 321 additions and 890 deletions.
diff --git a/assets/html/about.html b/assets/html/about.html
@@ -40,10 +40,10 @@
   <style>
     /* Circle styles */
     .circle {
-      height: 24px;
-      width: 24px;
+      height: 34px;
+      width: 34px;
       border-radius: 50%;
-      background-color: black;
+      background-color: red;
       position: fixed;
       top: 0;
       left: 0;
@@ -92,18 +92,20 @@
       overflow: hidden;
       cursor: pointer;
     }
-
+
+    /* profile section*/
+
     .action .profile img {
       position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+      top: 30000;
+      left: 130;
+      width: 85%;
+      height: 95%;
       object-fit: cover;
     }
 
     .about p {
-      color: var(--sonic-silver);
+      color: var(--purple);
       font-size: 16px;
       line-height: 1.6;
       margin-bottom: 20px;
@@ -113,7 +115,7 @@
       background-color: var(--seashell);
       border-radius: 10px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      border: 1px solid #ddd;
+      border: 1px solid red;
       padding: 20px;
       margin-bottom: 40px;
     }
@@ -171,7 +173,7 @@
       margin-bottom: 5rem;
       margin-top: 160px;
       /* Adjust this value to position it below the header */
-      color: red;
+      color: purple;
 
     }
 

diff --git a/assets/html/about1.html b/assets/html/about1.html
@@ -71,7 +71,7 @@
       .stats-box {
         background-color: var(--seashell);
         border-radius: 10px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 4px 6px rgba(51, 10, 185, 0.1);
         border: 1px solid #ddd;
         padding: 20px;
         margin-bottom: 40px;

diff --git a/assets/html/audio.html b/assets/html/audio.html
@@ -3,11 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SwapReads - Custom Audiobook Player</title>
+    <title>SwapReads - Audiobook Player</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
-            background-color: #f4f4f4;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #15b6ec;
             margin: 0;
             padding: 20px;
             display: flex;
@@ -17,33 +17,40 @@
         }
 
         .audiobook-container {
-            max-width: 600px;
+            max-width: 500px;
             width: 100%;
             background-color: #fff;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
             text-align: center;
+            transition: transform 0.3s;
+        }
+
+        .audiobook-container:hover {
+            transform: translateY(-10px);
         }
 
         .book-image {
-            width: 200px;
-            height: 300px;
+            width: 180px;
+            height: 280px;
             background-color: #ddd;
-            border-radius: 10px;
+            border-radius: 8px;
             background-size: cover;
             background-position: center;
-            margin: 0 auto 20px auto;
+            margin: 0 auto 20px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
 
         h2 {
-            font-size: 24px;
-            margin-bottom: 10px;
+            font-size: 22px;
+            margin-bottom: 8px;
+            color: #2c3e50;
         }
 
         p {
-            color: #555;
-            margin-bottom: 20px;
+            color: #7f8c8d;
+            margin-bottom: 25px;
         }
 
         .audio-player {
@@ -57,40 +64,77 @@
             align-items: center;
             justify-content: center;
             gap: 10px;
-            margin-bottom: 10px;
+            margin-bottom: 20px;
         }
 
         .play-btn {
-            background-color: #4CAF50;
+            background-color: #2ecc71;
             color: white;
             border: none;
             border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            font-size: 24px;
+            width: 55px;
+            height: 55px;
+            font-size: 26px;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
+            transition: background-color 0.3s ease;
+        }
+
+        .play-btn:hover {
+            background-color: #27ae60;
         }
 
         .progress-container {
             width: 100%;
-            background-color: #ddd;
-            border-radius: 5px;
+            background-color: #ecf0f1;
+            border-radius: 8px;
             cursor: pointer;
+            height: 10px;
+            margin-bottom: 10px;
+            position: relative;
+            overflow: hidden;
         }
 
         .progress {
-            height: 10px;
-            background-color: #4CAF50;
-            border-radius: 5px;
+            height: 100%;
+            background-color: #3498db;
             width: 0;
         }
 
         .time {
             font-size: 14px;
-            color: #555;
+            color: #34495e;
+        }
+
+        .time-container {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            padding: 0 8px;
+        }
+
+        /* Media Queries for Responsive Design */
+        @media (max-width: 768px) {
+            .audiobook-container {
+                padding: 20px;
+            }
+
+            .book-image {
+                width: 150px;
+                height: 220px;
+            }
+
+            h2 {
+                font-size: 20px;
+            }
+
+            .play-btn {
+                width: 50px;
+                height: 50px;
+                font-size: 22px;
+            }
         }
     </style>
 </head>
@@ -103,13 +147,14 @@ <h2>The Great Adventure</h2>
         <div class="audio-player">
             <div class="controls">
                 <button class="play-btn" id="playBtn">▶️</button>
-                <div class="time" id="currentTime">0:00</div>
-                <div class="time">/</div>
-                <div class="time" id="durationTime">0:00</div>
             </div>
             <div class="progress-container" id="progressContainer">
                 <div class="progress" id="progress"></div>
             </div>
+            <div class="time-container">
+                <div class="time" id="currentTime">0:00</div>
+                <div class="time" id="durationTime">0:00</div>
+            </div>
         </div>
 
         <audio id="audio">