Audio Player added

README.md

@@ -1,4 +1,4 @@
-[![Laravel Forge Site Deployment Status](https://img.shields.io/endpoint?url=https%3A%2F%2Fforge.laravel.com%2Fsite-badges%2F03a51b88-6eab-491b-8b80-5183a78d0024%3Fdate%3D1%26commit%3D1&style=for-the-badge)](https://forge.laravel.com)
+[![Laravel Forge Site Deployment Status](https://img.shields.io/endpoint?url=https%3A%2F%2Fforge.laravel.com%2Fsite-badges%2F03a51b88-6eab-491b-8b80-5183a78d0024%3Fdate%3D1%26commit%3D1&style=plastic)](https://forge.laravel.com)
 
 ## Development
 

resources/views/layouts/app.blade.php

@@ -14,6 +14,29 @@
     <!-- Styles -->
     @livewireStyles
     <style>
+        #seekObjContainer {
+            position: relative;
+            width: 400px;
+            margin: 0 5px;
+            height: 5px;
+        }
+
+        #seekObj {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            background-color: #e3e3e3;
+            border: 1px solid black;
+        }
+
+        #percentage {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            background-color: coral;
+        }
+
         [x-cloak] {
             display: none !important;
         }
@@ -39,6 +62,31 @@
         {{ $slot }}
     </main>
 </div>
+<div
+    x-data="{
+
+    }"
+    class="hidden fixed bottom-0 w-full flex items-center gap-6 bg-white py-4 px-4 md:px-6">
+    <audio x-ref="audio">
+        <source src="https://thenewcode.com/assets/audio/24-ghosts-III.mp3" type="audio/mp3">
+    </audio>
+    <div class="hidden md:block">
+        <x-button primary @click="togglePlay"><i class="fa fa-thin fa-play"></i></x-button>
+    </div>
+    <div
+        class="mb-[env(safe-area-inset-bottom)] flex flex-1 flex-col gap-3 overflow-hidden p-1 justify-center items-center">
+        <div
+            class="truncate text-center text-sm font-bold leading-6 md:text-left"
+        >
+            PLAYER
+        </div>
+        <div class="flex justify-between gap-6">
+            <div class="md:hidden">
+                <x-button primary @click="togglePlay"><i class="fa fa-thin fa-play"></i></x-button>
+            </div>
+        </div>
+    </div>
+</div>
 @stack('modals')
 @livewireScripts
 </body>

tailwind.config.js

@@ -61,7 +61,18 @@ module.exports = {
                     '800': '#673B04',
                     '900': '#361F02'
                 },
-                primary: colors.amber,
+                primary: {
+                    '50':  '#FEF3E6',
+                    '100': '#FDEAD3',
+                    '200': '#FCD3A1',
+                    '300': '#FABE75',
+                    '400': '#F9A949',
+                    '500': '#F7931A',
+                    '600': '#F7931A',
+                    '700': '#F7931A',
+                    '800': '#673B04',
+                    '900': '#361F02'
+                },
                 secondary: {
                     '50':  '#f7f7f7',
                     '100': '#e3e3e3',