Merge pull request #1 from Sobhan-SRZA/v1.0.0

v1.0.0

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Sobhan
+Copyright (c) 2024 Sobhan-SRZA (mr.sinre)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,2 +1,104 @@
-# Music-Player-In-Website
- Simple player for website using html, css and javascript.
+<div align="center">
+    <h1>Music Player In Website</h1>
+    <img src="https://badges.aleen42.com/src/javascript.svg">
+    <img src="https://badges.aleen42.com/src/html5.svg">
+    <img src="https://badges.aleen42.com/src/css3.svg">
+    <div>
+        <img src="https://img.shields.io/github/license/Sobhan-SRZA/Music-Player-In-Website?label=License">
+        <img src="https://img.shields.io/github/last-commit/Sobhan-SRZA/Music-Player-In-Website?label=Last Commit">
+        <img src="https://img.shields.io/github/release-date/Sobhan-SRZA/Music-Player-In-Website?label=Last Release">
+        <img src="https://img.shields.io/github/downloads/Sobhan-SRZA/Music-Player-In-Website/total?label=Downloads">
+    </div>
+    <img src="https://img.shields.io/github/languages/code-size/Sobhan-SRZA/Music-Player-In-Website?label=Code Size">
+    <img src="https://img.shields.io/github/directory-file-count/Sobhan-SRZA/Music-Player-In-Website?label=Files">
+    <img src="https://img.shields.io/github/v/release/Sobhan-SRZA/Music-Player-In-Website?label=Version">
+    <div>
+        <img src="https://img.shields.io/github/forks/Sobhan-SRZA/Music-Player-In-Website?label=Forks">
+        <img src="https://img.shields.io/github/stars/Sobhan-SRZA/Music-Player-In-Website?label=Stars">
+        <img src="https://img.shields.io/github/watchers/Sobhan-SRZA/Music-Player-In-Website?label=Watchers">
+    </div>
+    <div>
+        <img style="display:block;margin-left:auto;margin-right:auto;width:400px;" src="https://github-readme-stats.vercel.app/api/pin/?username=Sobhan-SRZA&repo=Music-Player-In-Website&theme=react">
+    </div>
+</div>
+
+---
+
+## Overview
+Simple player for website using html, css and javascript.
+This project is inspired by [WebDevSimplified](https://github.com/bradtraversy)'s [Music Player](https://github.com/bradtraversy/vanillawebprojects/tree/master/music-player).
+
+---
+
+## Usage
+
+To use this project, follow these steps:
+
+1. Clone the repository:
+   ```
+   git clone https://github.com/Sobhan-SRZA/Music-Player-In-Website.git
+   ```
+
+2. Open the `index.html` file in your web browser or use vscode live server.
+
+---
+
+## Support and Feedback
+
+If you have any questions, suggestions, or feedback, feel free to [open an issue](https://github.com/Sobhan-SRZA/Music-Player-In-Website/issues).
+
+Or you can create a ticket in our [discord server](https://discord.gg/7nV2MMjyK8).
+
+---
+
+## License
+
+This project is licensed under the [MIT License](https://github.com/Sobhan-SRZA/Music-Player-In-Website/blob/main/LICENSE).
+
+---
+
+## Screen Shots
+
+![Music Player In Website](https://github.com/Sobhan-SRZA/Music-Player-In-Website/assets/90289153/6650e942-8b19-4a0b-a104-f73703266f89)
+
+---
+
+## Contact
+
+<div align="center">
+  <a href="http://sobhan.epizy.com/" target="_blank">
+    <img align="left" src ="https://github.com/Sobhan-SRZA/Sobhan-SRZA/raw/main/source/social-media.png" width = 50% >
+  </a>
+  <a href="https://t.me/pc_clubs" target="_blank">
+    <img alt="Telegram" src="https://img.shields.io/static/v1?message=Telegram&logo=telegram&label=&color=229ED9&logoColor=white&labelColor=&style=flat" height="30" />
+  </a>
+  <a href="https://www.instagram.com/pc__clubs/" target="_blank">
+    <img alt="Instagram" src="https://img.shields.io/static/v1?message=Instagram&logo=instagram&label=&color=C13584&logoColor=white&labelColor=&style=flat" height="30" />
+  </a>
+  </a>
+  <a href="https://www.twitch.tv/sobhan_srza" target="_blank">
+    <img alt="Twitch" src="https://img.shields.io/static/v1?message=Twitch&logo=twitch&label=&color=6441A4&logoColor=white&labelColor=&style=flat" height="30" />
+  </a>
+  <a href="https://www.youtube.com/@mr_sinre?app=desktop&sub_confirmation=1" target="_blank">
+    <img alt="YouTube" src="https://img.shields.io/static/v1?message=YouTube&logo=youtube&label=&color=FF0000&logoColor=white&labelColor=&style=flat" height="30" />
+  </a>
+  <a href="https://github.com/Sobhan-SRZA" target="_blank">
+    <img alt="Github" src="https://img.shields.io/static/v1?message=Github&logo=github&label=&color=000000&logoColor=white&labelColor=&style=flat" height="30" />
+  </a>
+</p>
+<p align="left">
+  <a href="https://discord.gg/P4XxUmebDa" target="_blank"> 
+    <img src="https://discord.com/api/guilds/1054814674979409940/widget.png?style=banner2" alt="pc-development.png">
+  </a>
+</p>
+<p align="right">
+  <a href="https://discord.gg/54zDNTAymF" target="_blank"> 
+    <img src="https://discord.com/api/guilds/1181764925874507836/widget.png?style=banner2" alt="pc-club.png">
+  </a>
+</p>
+<p align="center">
+  <a href="https://discord.com/users/865630940361785345" target="_blank">
+    <img alt="My Discord Account" src="https://discord.c99.nl/widget/theme-1/865630940361785345.png"  />
+  </a>
+</p>
+</div>

index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="og:site_name" content="DJ Boy" />
+    <link rel="shortcut icon" href="/images/icon.png" type="image/x-icon">
+    <title>DJ Boy Player</title>
+    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
+</head>
+
+<body>
+    <div class="container">
+        <div class="title">
+            <p>DJ Boy Music Player</p>
+        </div>
+        <div class="player">
+            <div id="search-bar">
+                <input type="text" placeholder="play what?" id="search-table">
+                <i class="fas fa-search" id="search-button"></i>
+                <span id="warn"></span>
+                <div id="findes" class="searched"></div>
+            </div>
+            <div id="player" hidden>
+                <div class="music-container">
+                    <div class="music-info">
+                        <h4 id="title"></h4>
+                        <h4 id="artist"></h4>
+                        <div class="progress-container" id="progress-container">
+                            <div class="progress" id="progress"></div>
+                        </div>
+                    </div>
+
+                    <audio src="" id="audio"></audio>
+
+                    <div class="img-container">
+                        <img src="images/song.jpg" alt="music-cover" id="cover" />
+                    </div>
+                    <div class="navigation">
+                        <button id="prev" class="action-btn">
+                            <i class="fas fa-backward"></i>
+                        </button>
+                        <button id="play" class="action-btn action-btn-big">
+                            <i class="fas fa-play"></i>
+                        </button>
+                        <button id="next" class="action-btn">
+                            <i class="fas fa-forward"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <footer>
+        <a href="https://github.com/Sobhan-SRZA" target="_blank">© Build by Sobhan-SRZA</a>
+    </footer>
+    <script src="/script.js"></script>
+</body>
+
+</html>
+<!-- 
+ * @copyright
+ * Coded by Sobhan-SRZA (mr.sinre) | https://github.com/Sobhan-SRZA
+ * @copyright
+ * Work for Persian Caesar | https://dsc.gg/persian-caesar
+ * @copyright
+ * Please Mention Us "Persian Caesar", When Have Problem With Using This Code!
+ * @copyright 
+-->