From 008b4bea0d19ada2e8eb9a1947da6cb6c3b469a5 Mon Sep 17 00:00:00 2001
From: Mohamed El bouanani <154015011+MEDELBOU3@users.noreply.github.com>
Date: Sun, 18 Aug 2024 23:40:47 +0100
Subject: [PATCH] Add files via upload

---
 index.html | 2072 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 2072 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..29d2c13
--- /dev/null
+++ b/index.html
@@ -0,0 +1,2072 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Music App</title>
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/emoji-mart/css/emoji-mart.css">
+    <script src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@latest/dist/index.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
+
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Anton&family=Big+Shoulders+Inline+Text&family=Carter+One&family=Foldit:wght@100..900&family=Nosifer&family=Plaster&family=Titan+One&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Anton&family=Big+Shoulders+Inline+Text&family=Carter+One&family=Foldit:wght@100..900&family=Nosifer&family=Plaster&family=Titan+One&display=swap');
+        
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #121212;
+            color: #fff;
+        }
+        
+        
+        .navbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: rgb(50, 63, 48, 0.6);
+            color: #fff;
+            width: 80%;
+            margin: 0 auto;
+            margin-bottom: 15px;
+            border-radius: 10px;
+            padding: 10px;
+            height: auto;
+            position: relative; 
+            z-index: 1;
+        }
+        
+        .navbar .logo h1 {
+            color: #fff;
+            font-size: 1.5rem;
+        }
+         .logo i {
+            color: #19dd5e;
+            font-size: 1.6rem;
+        }
+        .nav-links {
+            list-style-type: none;
+            display: flex;
+            text-align: center;
+            padding: 10px;
+        }
+        
+        .nav-links li {
+            margin-right: 20px;
+            text-align: center;
+            list-style-type: none;
+        }
+        
+        .nav-links li a {
+            color: #f0f0f0;
+            text-decoration: none;
+            font-size: 1rem;
+            transition: color 0.3s ease;
+        }
+        
+        .nav-links li a:hover {
+            color: #f0f0f0;
+        }
+        
+        .burger {
+            display: none;
+            flex-direction: column;
+            cursor: pointer;
+        }
+        
+        .line {
+            width: 25px;
+            height: 3px;
+            background-color: #fff;
+            margin: 3px;
+            transition: transform 0.3s ease;
+        }
+        
+        /* Media query for responsive design */
+        @media screen and (max-width: 768px) {
+            .nav-links {
+                display: none;
+                flex-direction: column;
+                width: 100%;
+                position: absolute;
+                top: 60px;
+                left: 0;
+                background-color: #333;
+                padding: 10px 0;
+                z-index: 1;
+            }
+        
+            .nav-links.active {
+                display: flex;
+            }
+        
+            .burger {
+                display: flex;
+            }
+        }
+        
+        
+        .container {
+            display: flex;
+            height: 100vh;
+        }
+        
+        .sidebar {
+            width: 25%;
+            background-color: #181818;
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .sidebar h1{
+            color: #19dd5e;
+            font-size: 35px;
+            font-family: "Anton", sans-serif;
+            font-weight: 400;
+            font-style: normal;
+        }
+        
+        ::-webkit-scrollbar{
+            width: 8px;
+            background-color: transparent;
+        }
+        ::-webkit-scrollbar-thumb{
+            border-radius: 10px;
+            background-color: rgb(93, 93, 93)
+        }
+        .sidebar h1 i{
+            color: #f0f0f0;
+            font-size: 40px;
+            filter: drop-shadow(0 8px 16px rgb(93, 93, 93));
+        }
+        .main {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+        }
+        
+        .header {
+            text-align: center;
+            margin-bottom: 20px;
+            position: relative;
+            padding: 20px;
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+        }
+        .header button{
+            background-color: transparent;
+            border: none;
+            color: #fff;
+            cursor: pointer;
+        }
+        .header button:focus{
+            outline: none;
+        }
+        .header::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            pointer-events: none;
+        }
+        
+        #current-track-title,
+        #current-track-artist {
+            position: relative;
+            z-index: 1;
+        }
+        
+        #audio-player {
+           position: relative;
+           padding: 5px;
+           margin: 0 auto;
+           z-index: 1;
+           
+        
+        }
+        
+        .search-bar {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 20px;
+            
+        }
+        
+        .search-bar input {
+            width: 50%;
+            padding: 10px;
+            border: none;
+            outline: none;
+            border-radius: 20px 0 0 20px;
+        }
+        
+        .search-bar button {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 0 20px 20px 0;
+            background-color: #1db954;
+            color: #fff;
+            cursor: pointer;
+        }
+        
+        .controls {
+            display: flex;
+            justify-content: center;
+            margin-top: 10px;
+            position: relative; 
+            z-index: 1;
+        }
+        
+        .controls button {
+            background: none;
+            border: none;
+            color: #65ff8b;
+            cursor: pointer;
+            margin: 0 10px;
+            font-size: 20px;
+        }
+        
+        .content {
+            margin-top: 20px;
+        }
+        .content h2{
+           padding-bottom: 10px;
+        
+        }
+        
+        
+        .song-list, .artist-list, .genre-list {
+           display: flex;
+           flex-wrap: wrap;
+           gap: 20px;
+          
+        }
+        
+        .song-item, .artist-item, .genre-item {
+            background-color: rgba(48, 48, 48, 0.5);
+            padding: 10px;
+            border-radius: 10px;
+            width: 200px;
+            text-align: center;
+            cursor: pointer;
+        }
+        
+        .song-item img, .artist-item img, .genre-item img {
+            width: 100%;
+            border-radius: 10px;
+        }
+        
+        .artist-item img{
+            width: 100%;
+            border-radius: 50%;
+        }
+        .song-item p, .artist-item p, .genre-item p {
+            margin: 10px 0 0 0;
+            font-size: 14px;
+        }
+        
+        #playlist {
+            list-style-type: none;
+            padding: 0;
+        }
+        
+        #playlist li {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            border-bottom: 1px solid #383838;
+            cursor: pointer;
+        }
+        
+        #playlist li img {
+            width: 40px;
+            height: 40px;
+            margin-right: 10px;
+            border-radius: 5px;
+        }
+        
+        #playlist li:hover {
+            background-color: #282828;
+        }
+        
+        #load-more-playlist {
+            display: block;
+            width: 40%;
+            padding: 10px;
+            margin: 0 auto;
+            background-color: #19dd5e;
+            color: #fff;
+            border: none;
+            cursor: pointer;
+            text-align: center;
+            border-radius: 5px;
+        }
+        
+        
+        .lyrics {
+            margin-top: 20px;
+            background-color: #282828;
+            padding: 20px;
+            border-radius: 10px;
+        }
+        
+        .lyrics h2 {
+            margin-top: 0;
+            font-size: 18px;
+            color: #1db954;
+        }
+        
+        .lyrics p {
+            white-space: pre-wrap;
+            color: #fff;
+            font-size: 14px;
+        }
+        
+        
+        
+        .playing {
+            background-color: rgba(255, 255, 255, 0.1);
+            border-left: 4px solid #1DB954;
+        }
+        
+        
+        .album-item {
+            display: flex;
+            flex-wrap: wrap;
+            padding: 10px;
+            width: 40%;
+        }
+        .album-item:hover {
+            background-color: #383838;
+            border-radius: 5px;
+        }
+        .song-item {
+            display: grid;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .album-item img{
+            width: 50px;
+            height: 50px;
+          
+        
+        }
+        
+        
+        .song-item p, .album-item p {
+            flex-grow: 1;
+        }
+        
+        #comments-section{
+            background-color: rgba(48, 48, 48, 0.5);
+            padding: 15px;
+            margin: 15px auto;
+            border-radius: 5px;
+            display: grid;
+            
+        }
+        
+        #comments-ms {
+            margin: 0 auto;
+            display: flex;
+            align-items: flex-start;
+            margin: 10px auto;
+        }
+        
+        #comment-input{
+            width: 50%;
+            background-color: rgba(82, 126, 82, 0.432);
+            flex: 1; /* Take up remaining space */
+            padding: 10px;
+            font-size: 16px;
+            border: none;
+            padding: 5px;
+            font-size: 16px;
+            outline: none;
+            justify-content: center;
+            border-radius: 10px;
+            resize: vertical; /* Allow vertical resizing */
+        }
+        
+        #submit-comment{
+            border-radius: 10px;
+            background-color: #19dd5e;
+            padding-left: 15px;
+            padding-right: 15px;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            display: grid;
+            cursor: pointer;
+            margin-left: 0 auto;
+        }
+        #comments-list{
+            border-radius: 5px;
+            padding: 10px;
+            margin-bottom: 10px;
+            
+        }
+        
+        /* CSS for Share Card */
+        .share {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            z-index: 1;
+        }
+        .share-btn {
+            padding: 4px;
+            font-size: 25px;
+            background-color: #000;
+            color: #fff;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+        
+        .share-card {
+            display: none;
+            position: absolute;
+            bottom: 50px;
+            right: 10px;
+            width: 250px;
+            height: auto;
+            padding: 10px;
+            background: linear-gradient(to bottom right,  rgb(3, 59, 3),  #1db954);
+         
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            z-index: 2;
+        }
+        .share-card.active {
+            display: block;
+        }
+        .share-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .social-icons {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            margin: 10px 0;
+        }
+        .social-icons a {
+            text-decoration: none;
+            font-size: 20px;
+            color: #000;
+        }
+        .social-icons a:hover {
+            color: slategray;
+        }
+        .close-btn {
+            align-self: flex-end;
+            cursor: pointer;
+            font-size: 20px;
+        }
+        #copy-link-btn{
+            margin-top: 5px;
+            margin-bottom: 5px;
+            padding: 4px;
+            background-color: #036333;
+            border-radius: 5px;
+        }
+        
+        #song-link{
+            outline: none;
+            padding: 2px;
+            width: 90%;
+            border-radius: 5px;
+            border: none;
+            color: rgb(0, 153, 255);
+            font-family: 'Roboto', sans-serif;
+        }
+        
+        
+        
+        .arrow {
+            position: fixed;
+            right: 20px; /* تعيين المسافة من اليسار */
+            bottom: 20px; /* تعيين المسافة من الأسفل */
+            background-color: #18d85b;
+            color: #fff;
+            width: 40px;
+            height: 40px;
+            text-align: center;
+            line-height: 40px;
+            cursor: pointer;
+            border-radius: 50%;
+            font-size: 24px;
+            z-index: 1000; /* يضمن الظهور فوق المحتوى الآخر */
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* ظلال */
+          }
+          .arrow:hover {
+            background-color: #1DB954;
+          }
+        
+        
+        
+        
+          .background-selection {
+            text-align: center;
+        }
+        
+        .background-options {
+            display: flex;
+            justify-content: center;
+            
+        }
+        
+        .background-option {
+            width: 50px;
+            height: 50px;
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+            margin: 0 10px;
+            cursor: pointer;
+            border: 2px solid transparent;
+        }
+        
+        .background-option:hover {
+            border: 2px solid #000;
+        }
+        
+        .chat-section {
+            margin: 0 auto;
+            padding: 15px;
+            width: 95%;
+            height: auto;
+            overflow-y: auto;
+            margin: 15px auto;
+            border-radius: 5px;
+            background-color: rgba(51, 51, 51, 0.342);
+        }
+        
+        main {
+            background-color: rgba(48, 48, 48, 0.5);
+            padding: 15px;
+            border-radius: 5px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        
+        .room-creation,
+        .rooms-list,
+        .chat-section,
+        .video-section {
+            margin-bottom: 20px;
+        }
+        
+        .room-creation input,
+        #message-input {
+            width: calc(100% - 120px);
+            padding: 10px;
+            margin-right: 10px;
+            margin: 10px auto;
+            border-radius: 4px;
+            outline: none;
+            border: none;
+        }
+        
+        .room-creation button{
+            padding: 10px 5px;
+            background-color: #19dd5e;
+            border-radius: 5px;
+            color: #fff;
+        }
+        
+        #send-message,
+        #start-call,
+        #share-screen,
+        #start-voice-chat,
+        #end-call,
+        #send-media {
+            
+            justify-content: center;
+            align-items: center;
+            margin: 10px auto;
+            border: none;
+            background-color: #19dd5e;
+            color: #fff;
+            cursor: pointer;
+        }
+        #media-input {
+            justify-content: center;
+            align-items: center;
+            margin: 10px auto;
+            border-radius: 5px;
+            border: none;
+            background-color: #19dd5e;
+            color: #fff;
+            cursor: pointer;
+        }
+        .room-creation button:hover,
+        #send-message:hover,
+        #start-call:hover,
+        #share-screen:hover,
+        #start-voice-chat:hover,
+        #end-call:hover
+        #send-media:hover {
+            background-color: #12b34a;
+        }
+        
+        .rooms-list h2 {
+            margin-bottom: 10px;
+        }
+        
+        .rooms-list ul {
+            list-style: none;
+            padding: 0;
+        }
+        
+        .rooms-list li {
+            padding: 10px;
+            width: auto;
+            margin: 0 auto;
+            border-radius: 4px;
+            margin-bottom: 10px;
+            cursor: pointer;
+            background-color: #333;
+        }
+        
+        .rooms-list li:hover {
+            background-color: #383838;
+        }
+        
+        .hidden{
+            display: none;
+            height: auto;
+            overflow-y: auto;
+        }
+        .outils{
+           background-color: rgba(51, 51, 51, 0.719); 
+           border-radius: 5px;
+           display: flex; 
+           width: 100%; 
+           height: 10%;
+           padding: 15px;
+           margin: 10px auto;                
+        }
+        
+        #chat-room.hidden,
+        #video-section.hidden {
+            display: none;
+        }
+        
+        #chat-room-name {
+            font-size: 1.5em;
+            margin-bottom: 10px;
+        }
+        
+        .messages {
+            flex-grow: 1;
+            background-color: #2a412d69; /* لون خلفية الرسالة */
+            color: white; /* لون النص */
+            padding: 10px; /* مساحة داخلية */
+            border-radius: 5px; /* جعل الحواف مستديرة */
+            width: 100%; /* عرض أقصى */
+            height: 350px;
+            overflow-y: auto;
+        }
+        
+        .messages p {
+            max-width: 65%;
+            background-color: #036333;
+            padding: 10px;
+            margin: 10px;
+            border-bottom-left-radius: 20px;
+            border-top-right-radius: 20px;
+            border-bottom-right-radius: 20px;
+            color: white;
+            font-family: 'Roboto', sans-serif;
+            display: flex;
+            align-items: flex-start;
+        }
+        
+        
+        
+        /*message*/
+        
+        .message {
+            display: flex;
+            margin-bottom: 10px;
+            padding: 15px;
+        }
+        .avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 10px;
+            background-color: #18d85b;
+        }
+        .message-content {
+            background-color: transparent;
+            border-radius: 10px;
+            padding: 10px;
+            width: 60%;
+        }
+        
+        .message-content img.message-image {
+            width: 60%;
+            height: auto;
+            cursor: pointer;
+            border-radius: 10px;
+        }
+        .message-content video.message-video {
+            width: 60%;
+            height: auto;
+            border-radius: 10px;
+        }
+        
+        .message .message-content p {
+            margin: 0;
+        }
+        
+        .message .message-content small {
+            display: block;
+            margin-top: 5px;
+            color: #fff;
+            max-width: 20%;
+        }
+        
+        /*Modal*/
+        .image-modal {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 1000;
+        }
+        
+        .image-modal-content {
+            position: relative;
+        }
+        
+        .image-modal .close-button {
+            position: absolute;
+            top: 10px;
+            right: 20px;
+            font-size: 30px;
+            color: white;
+            cursor: pointer;
+        }
+        
+        .image-modal .modal-image {
+            max-width: 90%;
+            max-height: 90%;
+        }
+        
+        
+        
+        
+        
+        .avatar {
+            width: 40px;
+            height: 40px;
+            margin-right: 10px;
+            margin-top: 15px;
+        }
+        .message small {
+            color: #fff;
+            background-color: #011f1073;
+            border-radius: 3px;
+            padding: 5px;
+            left: 10px;
+            
+        }
+        
+        #video-section video {
+            width: 100%;
+            border: 1px solid #ccc;
+            border-radius: 2px;
+        }
+        
+        /* Avatar Selection Section */
+        .avatar-selection {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        
+        .avatar-selection label {
+            margin-right: 10px;
+        }
+        
+        .avatar-selection select {
+            margin-right: 10px;
+        }
+        
+        
+        .avatar-image {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 10px;
+            vertical-align: middle;
+        }
+        
+        .sender {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        
+        .messages img {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            margin-right: 10px;
+        }
+        
+        
+        
+        
+        #voice-duration {
+            width: 100px;
+            border: none;
+            background: none;
+            color: white;
+        }
+    </style>
+
+</head>
+<body>
+
+
+
+    <div class="container">
+      
+        <div class="sidebar" id="sidebar">
+            <h1>SM_<i class="fas fa-music"></i>_music</h1>
+            <h2 style="margin: 10px auto;">Playlist</h2>
+            <ul id="playlist">
+                <!-- عناصر قائمة التشغيل ستضاف هنا -->
+            </ul>
+            <button id="load-more-playlist">Load More</button>
+        </div>
+        
+        <div class="main">
+            <div id="header" class="header">
+
+                <nav class="navbar">
+                    <div class="logo">
+                        <h1>SM_<i class="fas fa-music"></i>_music</h1>
+                    </div>
+                    <ul class="nav-links">
+                        <li><a href="#genres">GENRES</a></li>
+                        <li><a href="#">ALBUMS</a></li>
+                        <li><a href="#popular-songs">SONGS</a></li>
+                        <li><a href="#popular-artists">ARTISTS</a></li>
+                        <li><a href="#virtual-rooms">VIRTUAL-RMS</a></li>
+                        <li><a href="http://localhost:5000"><i class='bx bx-log-in'></i></a></li>
+                    </ul>
+                    <div class="burger">
+                        <div class="line"></div>
+                        <div class="line"></div>
+                        <div class="line"></div>
+                    </div>
+                </nav>
+                <h1 id="current-track-title">Track Title</h1>
+                <p id="current-track-artist">Artist</p>
+                <audio id="audio-player" controls>
+                    <source id="audio-source" src="" type="audio/mpeg" >
+                    Your browser does not support the audio element.
+                </audio>
+                
+                
+                <div class="controls">
+                    <button id="prev-btn"><i class="fas fa-backward"></i></button>
+                    <button id="play-btn"><i class="fas fa-play"></i></button>
+                    <button id="pause-btn"><i class="fas fa-pause"></i></button>
+                    <button id="next-btn"><i class="fas fa-forward"></i></button>
+                </div>
+                <div id="ratings-section">
+                    <h3 style="position: relative; z-index: 1;">Rate this Song</h3>
+                    <div id="ratings" style=" font-size: 25px;  filter: drop-shadow(0 0 10px #000); cursor: pointer;  color:rgb(0, 255, 170); position: relative; z-index: 1;">
+                        <span class="star" data-value="1" >&#9733;</span>
+                        <span class="star" data-value="2">&#9733;</span>
+                        <span class="star" data-value="3">&#9733;</span>
+                        <span class="star" data-value="4">&#9733;</span>
+                        <span class="star" data-value="5">&#9733;</span>
+                    </div>
+                    <p id="average-rating" style="color: #ccc; font-size: 16px; font-family:'Anton', sans-serif; filter: drop-shadow(0 0 10px #000); position: relative; z-index: 1;">Average Rating: 0</p>
+                </div>
+
+                    
+
+               <!-- Share Card -->
+
+        <div class="share">
+                <button class="share-btn" style="position: relative; z-index: 1; padding: 4px; font-size: 20px;"><i class="fas fa-share-alt"></i></button>
+           </div>
+                <div class="share-card">
+           <div class="share-content">
+              <span class="close-btn">&times;</span>
+               <h3>Share This Song</h3>
+                 <div class="social-icons">
+                   <a id="twitter" href="#" target="_blank" title="Share on Twitter"><i class="fab fa-twitter"></i></a>
+                   <a id="facebook" href="#" target="_blank" title="Share on Facebook"><i class="fab fa-facebook"></i></a>
+                   <a id="whatsapp" href="#" target="_blank" title="Share on WhatsApp"><i class="fab fa-whatsapp"></i></a>
+                   <a id="instagram" href="#" target="_blank" title="Share on Instagram"><i class="fab fa-instagram"></i></a>
+                 </div>
+               <input type="text" id="song-link" readonly>
+               <button id="copy-link-btn">Copy Link</button>
+           </div>
+         </div>
+                
+
+        </div>
+            <div class="search-bar">
+                <input type="text" id="search-input" placeholder="Search for songs or artists">
+                <button id="search-btn"><i class="fas fa-search"></i></button>
+            </div>
+            <div id="lyrics" class="lyrics">
+                <h2>Lyrics</h2>
+                <p id="lyrics-content" style="margin: 0 auto;  line-height: 1.6; align-items: center; text-align:center;">Select a track to see the lyrics</p>
+            </div>
+            <div class="content">
+                
+
+               
+                <h2>Genres</h2>
+                <div id="genres" class="genre-list">
+                    <!-- أنواع الأغاني ستضاف هنا -->
+                </div>
+
+                <h2>Albums</h2>
+                <div id="albums">
+
+                </div>
+
+           
+                <!--Songs-->
+                <ul id="playlist" class="sortable" ></ul>
+                <button id="load-more-playlist">Load More</button>
+            
+                <h2>Popular Songs</h2>
+                <div id="popular-songs" class="song-list">
+                    <!-- الأغاني الشائعة ستضاف هنا -->
+                </div>
+                <h2>Popular Artists</h2>
+                <div id="popular-artists" class="artist-list">
+                    <!-- الفنانين الشائعين سيضافون هنا -->
+                </div>
+               
+                
+                <div id="recommendation-list">
+                    <h2 style=" margin: 10px auto;">virtual Rooms</h2>
+                    <!-- قائمة التوصيات ستظهر هنا -->
+                </div>
+
+                <main id="virtual-rooms">
+                    
+                    <section class="room-creation">
+                        <input type="text" id="room-name" placeholder="Enter Room Name">
+                        <button id="create-room">Create Room</button>
+                    </section>
+                    <section class="rooms-list">
+                        <h2>Available Rooms</h2>
+                        <ul id="rooms">
+                            <!-- Chat rooms will be dynamically added here -->
+                        </ul>
+                    </section>
+
+                    <section class="avatar-selection">
+                        <label for="avatar-select">Choose your avatar:</label>
+                        <select id="avatar-select" style="background-color: #1db954; color:#fff;">
+                            <option value="avatar1.png">Avatar 1</option>
+                            <option value="avatar2.png">Avatar 2</option>
+                            <option value="avatar3.png">Avatar 3</option>
+                            <option value="avatar4.png">Avatar 4</option>
+                            <option value="avatar5.png">Avatar 5</option>
+                            <option value="avatar6.png">Avatar 6</option>
+                            <option value="avatar7.png">Avatar 7</option>
+                            <option value="avatar8.png">Avatar 8</option>
+                        </select>
+                        <img id="selected-avatar" src="avatar1.png" alt="Avatar" class="avatar-image">
+                    </section>
+
+                    <section class="background-selection">
+                        <h2>Select background</h2>
+                        <div class="background-options">
+                            <div class="background-option" data-background="img1.jpg" style="background-image: url('img1.jpg'); background-size:cover; background-repeat: no-repeat; background-position: center;"></div>
+                            <div class="background-option" data-background="img2.jpg" style="background-image: url('img2.jpg');  background-repeat: no-repeat; background-size: cover; background-position: center;"></div>
+                            <div class="background-option" data-background="https://images.pexels.com/photos/8191526/pexels-photo-8191526.jpeg?auto=compress&cs=tinysrgb&w=600.jpg" style="background-image: url('https://images.pexels.com/photos/8191526/pexels-photo-8191526.jpeg?auto=compress&cs=tinysrgb&w=600.jpg');  background-repeat: no-repeat; background-size: cover; background-position: center;"></div>
+                            <div class="background-option" data-background="https://images.pexels.com/photos/3574678/pexels-photo-3574678.jpeg?auto=compress&cs=tinysrgb&w=600.jpg"  style=" background-image: url('https://images.pexels.com/photos/3574678/pexels-photo-3574678.jpeg?auto=compress&cs=tinysrgb&w=600.jpg');  background-size:cover; background-repeat: no-repeat; background-position: center;"></div>
+                            <div class="background-option" data-background="https://images.pexels.com/photos/2832772/pexels-photo-2832772.jpeg?auto=compress&cs=tinysrgb&w=600.jpg" ; style=" background-image: url('https://images.pexels.com/photos/2832772/pexels-photo-2832772.jpeg?auto=compress&cs=tinysrgb&w=600.jpg');  background-size:cover; background-repeat: no-repeat; background-position: center;"></div>
+                            <div class="background-option" data-background="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&w=600.jpg"  style=" background-image: url('https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&w=600.jpg');  background-size:cover; background-repeat: no-repeat; background-position: center;"></div>
+                            <div class="background-option" data-background="https://images.pexels.com/photos/7934552/pexels-photo-7934552.jpeg?auto=compress&cs=tinysrgb&w=600.jpg"  style=" background-image: url('https://images.pexels.com/photos/7934552/pexels-photo-7934552.jpeg?auto=compress&cs=tinysrgb&w=600.jpg');  background-size:cover; background-repeat: no-repeat; background-position: center;"></div>
+                            <div class="background-option" data-background="https://images.pexels.com/photos/1213447/pexels-photo-1213447.jpeg?auto=compress&cs=tinysrgb&w=600.jpg"  style=" background-image: url('https://images.pexels.com/photos/1213447/pexels-photo-1213447.jpeg?auto=compress&cs=tinysrgb&w=600.jpg');  background-size:cover; background-repeat: no-repeat; background-position: center;"></div>
+                            <div class="background-option" data-background="https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?auto=compress&cs=tinysrgb&w=600.jpg"  style=" background-image: url('https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?auto=compress&cs=tinysrgb&w=600.jpg');  background-size:cover; background-repeat: no-repeat; background-position: center;"></div>
+                            <div class="background-option" data-background="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=600.jpg"  style=" background-image: url('https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=600.jpg');  background-size:cover; background-repeat: no-repeat; background-position: center;"></div>
+                            <div class="background-option" data-background="https://images.pexels.com/photos/919606/pexels-photo-919606.jpeg?auto=compress&cs=tinysrgb&w=600.jpg"  style=" background-image: url('https://images.pexels.com/photos/919606/pexels-photo-919606.jpeg?auto=compress&cs=tinysrgb&w=600.jpg');  background-size:cover; background-repeat: no-repeat; background-position: center;"></div>
+                            <div class="background-option" data-background="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&w=600.jpg"  style=" background-image: url('https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&w=600.jpg');  background-size:cover; background-repeat: no-repeat; background-position: center;"></div>
+                        </div>
+                    </section>
+                    <section class="chat-section">
+                        <div id="chat-room" class="hidden">
+                            <h2 id="chat-room-name"></h2>
+                            <div id="messages" class="messages">
+                                <!-- Chat messages will be dynamically added here -->
+                             
+                            </div>
+                            <div class="outils" >
+                               <input type="text" id="message-input" style="width: 36%; height: 40px;"  placeholder="Type a message...">
+                               
+                               <button id="start-voice-chat" style="border-radius: 50%; padding: 10px;"><i class='bx bxs-microphone' style="font-size: 18px;"></i></button> <!-- New button for voice chat -->
+                               <button id="send-message" style=" border-radius: 50%; padding: 10px; justify-content: center;  align-items: center;"><i class='bx bxs-send' style=" font-size: 18px;"></i></button>
+                               <input type="text" id="voice-duration" readonly style="border: none; background: none; color: white;">
+                               
+                                
+                                  <input type="file" class="media-input" id="media-input" accept="image/*,video/*,audio/*">
+                               
+                               <button id="send-media" style="background-color: #18d85b; justify-content: center;
+                                align-items: center; margin: 10px auto;
+                                 border: none; padding: 10px;
+                                  color:#fff; border-radius: 50%;"><i class='bx bxs-send' style="font-size: 18px;"></i></button>
+                               <button id="start-call" style=" border-radius: 50%; padding: 10px;"><i class='bx bxs-phone-call' style='color:#ffffff; font-size: 18px;' ></i></button>
+                            </div>
+                        </div>
+                        
+                    </section>
+                    <section class="video-section hidden" id="video-section">
+                        <video id="local-video" autoplay muted></video>
+                        <video id="remote-video" autoplay></video>
+                        <button id="share-screen">Share Screen</button>
+                        <button id="end-call" style=" padding: 10px; border-radius: 50%;"><i class='bx bxs-phone-off' style="font-size: 18px;"></i></button>
+                    </section>
+                </main>
+                
+                
+          <div class="movies" style=" height: auto; width: 90%;">
+            <h2>MOVIES</h2>
+            <button  onclick="window.location.href='index.html' "  style=" padding: 4px 8px;  color: #fff; background-color:#18d85b; margin: 0 auto; ">Watch NOW<a href="index.html"></a></button>
+          </div>
+
+
+                <!--Comments&Rating-->
+                <div id="comments-section">
+                    <h3>Comments</h3>
+                    <div id="comments-list"></div>
+                     <div class="comments-ms">
+                       <textarea id="comment-input" placeholder="Add a comment...">
+                       </textarea>
+                       <button id="submit-comment">Submit</button>
+                    </div>
+                </div>
+                
+                
+            
+                <div class="arrow">
+                     <a href="#header" style="color: #fff;"><i class='bx bxs-chevrons-up'></i></a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function scrollToTop() {
+          window.scrollTo({
+            top: 0,
+            behavior: 'smooth' // لتنعيم التمرير
+          });
+        }
+      </script>
+
+    <script>
+
+            function getQueryParams() {
+                const params = {};
+                let e, r = /([^&;=]+)=?([^&;]*)/g,
+                    q = window.location.search.substring(1);
+                while (e = r.exec(q)) {
+                    params[e[1]] = decodeURIComponent(e[2]);
+                }
+                return params;
+            }
+    
+            const params = getQueryParams();
+    
+            if (params.access_token) {
+                fetch('https://api.spotify.com/v1/me', {
+                    headers: {
+                        'Authorization': `Bearer ${params.access_token}`
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('user-info').innerText = `Logged in as ${data.display_name}`;
+                    // يمكنك الآن استخدام التوكن للوصول إلى Spotify API
+                });
+            } else {
+                document.getElementById('user-info').innerText = 'Error: No access token found';
+            }
+    
+
+        const burger = document.querySelector('.burger');
+        const navLinks = document.querySelector('.nav-links');
+
+        burger.addEventListener('click', () => {
+        navLinks.classList.toggle('active');
+        burger.classList.toggle('toggle');
+        });
+
+        //building tools
+        const clientId = '55e0f9f2d9844ebca5e70e16885306b4';
+        const clientSecret = '7496abd0cd17410abfe156fb56bc4e95';
+        let accessToken = '';
+        let currentTrackIndex = 0;
+        let playlistData = [];
+        let popularSongsData = [];
+        let genresData = [];
+        let currentGenre = '';
+        let searchResultsData = [];
+        let playlistOffset = 0;
+        let currentAudio; // Initialize the Howler object
+        const playlistLimit = 10;
+        
+        async function getAccessToken() {
+            const result = await fetch('https://accounts.spotify.com/api/token', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret)
+                },
+                body: 'grant_type=client_credentials'
+            });
+            const data = await result.json();
+            accessToken = data.access_token;
+        }
+        
+        async function fetchData(endpoint) {
+            const result = await fetch(`https://api.spotify.com/v1/${endpoint}`, {
+                method: 'GET',
+                headers: { 'Authorization': 'Bearer ' + accessToken }
+            });
+            return result.json();
+        }
+        
+        async function loadPlaylist() {
+            const data = await fetchData(`playlists/37i9dQZF1DXcBWIGoYBM5M/tracks?offset=${playlistOffset}&limit=${playlistLimit}`);
+            playlistData = playlistData.concat(data.items);
+            const playlist = document.getElementById('playlist');
+            playlist.innerHTML += data.items.map((item, index) => `
+                <li onclick="playTrack(${playlistOffset + index}, 'playlist')">
+                    <img src="${item.track.album.images[0].url}" alt="${item.track.name}" style=" outline: 2px solid rgba(0, 0, 0, 0.1);">
+                    ${item.track.name} - ${item.track.artists[0].name}
+                    <button style=" background-color: transparent; paddig-left:10px; outline: ; border: none; "><i style="font-size: 25px; color: #fff;"class="fas fa-play"></i></button>
+                </li>
+            `).join('');
+            playlistOffset += playlistLimit;
+            //7ydha
+            if (data.items.length < playlistLimit) {
+                document.getElementById('load-more-playlist').style.display = 'none';
+            }
+        }
+        
+        async function fetchLyrics(track) {
+            const searchUrl = `https://api.lyrics.ovh/v1/${track.artists[0].name}/${track.name}`;
+            
+            const response = await fetch(searchUrl);
+            const data = await response.json();
+            
+            if (data.lyrics) {
+                const lyrics = data.lyrics.split('\n');
+                displayLyrics(lyrics);
+            } else {
+                document.getElementById('lyrics-content').innerText = 'Lyrics not found.';
+            }
+        }
+        
+        function displayLyrics(lyrics) {
+            const lyricsContainer = document.getElementById('lyrics-content');
+            lyricsContainer.innerHTML = '';
+            lyrics.forEach(line => {
+                const p = document.createElement('p');
+                p.innerText = line;
+                lyricsContainer.appendChild(p);
+            });
+        }
+        
+        
+        
+        
+        //*mbdla*
+        function playTrack(index, type) {
+            let track;
+            if (type === 'playlist') {
+                track = playlistData[index].track;
+            } else if (type === 'popular') {
+                track = popularSongsData[index].track;
+            } else if (type === 'genre') {
+                track = genresData[index].track;
+            } else if (type === 'search') {
+                track = searchResultsData[index];
+            } else if (type === 'album') {
+                track = albumsData[index].track;
+            } else if (type === 'recommended') {
+                track = recommendedTracks[index].track;
+            } 
+        
+            currentTrackId = track.id;
+            document.getElementById('current-track-title').innerText = track.name;
+            document.getElementById('current-track-artist').innerText = track.artists[0].name;
+        
+            const audioPlayer = document.getElementById('audio-player');
+            const audioSource = document.getElementById('audio-source');
+            const header = document.getElementById('header');
+            
+            audioSource.src = track.preview_url || '';
+            header.style.backgroundImage = `url(${track.album.images[0].url})`;
+        
+            if (audioSource.src) {
+                audioPlayer.load();
+                audioPlayer.play();
+            }
+        
+            // تحديد الأغنية الحالية في القائمة
+            const playlistItems = document.querySelectorAll('#playlist li');
+            playlistItems.forEach(item => item.classList.remove('playing'));
+            playlistItems[index].classList.add('playing');
+        
+            initializeTrackData(track.id);
+            fetchLyrics(track);
+        
+            
+        }
+        
+        
+        
+        // مشاركة الأغاني
+        function shareTrack(url) {
+            const shareText = `Check out this song: ${url}`;
+            if (navigator.share) {
+                navigator.share({
+                    title: 'Spotify Song',
+                    text: shareText,
+                    url: url,
+                });
+            } else {
+                prompt('Copy this link to share:', url);
+            }
+        }
+        
+        function shareTrack() {
+            const trackUrl = `https://open.spotify.com/track/${currentTrackId}`;
+            const songLinkInput = document.getElementById('song-link');
+            songLinkInput.value = trackUrl;
+        
+            const twitterLink = document.getElementById('twitter');
+            twitterLink.href = `https://twitter.com/intent/tweet?url=${encodeURIComponent(trackUrl)}&text=Check out this song!`;
+        
+            const facebookLink = document.getElementById('facebook');
+            facebookLink.href = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(trackUrl)}`;
+        
+            const whatsappLink = document.getElementById('whatsapp');
+            whatsappLink.href = `https://api.whatsapp.com/send?text=Check out this song! ${encodeURIComponent(trackUrl)}`;
+        
+            const instagramLink = document.getElementById('instagram');
+            instagramLink.href = `https://www.instagram.com/?url=${encodeURIComponent(trackUrl)}`;
+        }
+        
+        document.addEventListener('DOMContentLoaded', () => {
+            const shareBtn = document.querySelector('.share-btn');
+            const shareCard = document.querySelector('.share-card');
+            const closeBtn = document.querySelector('.close-btn');
+            const copyLinkBtn = document.getElementById('copy-link-btn');
+        
+            shareBtn.addEventListener('click', () => {
+                shareTrack();
+                shareCard.classList.toggle('active');
+            });
+        
+            closeBtn.addEventListener('click', () => {
+                shareCard.classList.remove('active');
+            });
+        
+            copyLinkBtn.addEventListener('click', () => {
+                const songLinkInput = document.getElementById('song-link');
+                songLinkInput.select();
+                document.execCommand('copy');
+                alert('Link copied to clipboard!');
+            });
+        });
+        
+        
+        
+        //Recommended Tracks
+        let recommendedTracks = [];
+        
+        async function loadRecommendedMusic() {
+            const seedTracks = [...likedTracks].slice(0, 5).join(','); // استخدام الأغاني المحبوبة كعينة
+            const data = await fetchData(`recommendations?seed_tracks=${seedTracks}`);
+            recommendedTracks = data.tracks;
+        
+            const recommendedContainer = document.getElementById('recommended-music');
+            recommendedContainer.innerHTML = recommendedTracks.map((track, index) => `
+                <div class="song-item">
+                    <img src="${track.album.images[0].url}" alt="${track.name}">
+                    <p>${track.name}</p>
+                    <button onclick="playTrack(${index}, 'recommended');" style="background-color: transparent; outline: none; border: none;">
+                        <i style="font-size: 25px; color: #fff;" class="fas fa-play"></i>
+                    </button>
+                    <button class="like-btn-recommended-${index}" onclick="likeTrack(${index}, 'recommended'); event.stopPropagation();" style="background-color: transparent; outline: none; border: none;">
+                        <i style="font-size: 25px; color: ${likedTracks.has(track.id) ? 'green' : 'white'};" class="fas fa-heart"></i>
+                    </button>
+                </div>
+            `).join('');
+        }
+        
+        
+        
+        
+        
+        // Event listeners for next and previous buttons
+        document.getElementById('next-btn').addEventListener('click', playNextTrack);
+        document.getElementById('prev-btn').addEventListener('click', playPrevTrack);
+        document.getElementById('load-more-playlist').addEventListener('click', loadPlaylist);
+        
+        document.getElementById('search-btn').addEventListener('click', () => {
+            const query = document.getElementById('search-input').value;
+            searchTracks(query);
+        });
+        
+        document.getElementById('play-btn').addEventListener('click', () => {
+            if (currentAudio) {
+                currentAudio.play();
+            }
+        });
+        
+        document.getElementById('pause-btn').addEventListener('click', () => {
+            if (currentAudio) {
+                currentAudio.pause();
+            }
+        });
+        
+        
+        
+        
+        
+        function playNextTrack() {
+            do {
+                currentTrackIndex = (currentTrackIndex + 1) % playlistData.length;
+            } while (!playlistData[currentTrackIndex].track.preview_url);
+            playTrack(currentTrackIndex, 'playlist');
+        }
+        
+        function playPrevTrack() {
+            do {
+                currentTrackIndex = (currentTrackIndex - 1 + playlistData.length) % playlistData.length;
+            } while (!playlistData[currentTrackIndex].track.preview_url);
+            playTrack(currentTrackIndex, 'playlist');
+        }
+        
+        
+        
+        async function loadPopularSongs() {
+            const data = await fetchData('playlists/37i9dQZF1DXcBWIGoYBM5M/tracks');
+            popularSongsData = data.items;
+            const popularSongs = document.getElementById('popular-songs');
+            popularSongs.innerHTML = popularSongsData.map((item, index) => `
+                <div class="song-item">
+                    <img src="${item.track.album.images[0].url}" alt="${item.track.name}">
+                    <p>${item.track.name}</p>
+                    <button onclick="playTrack(${index}, 'popular');" style="background-color: transparent; outline: none; border: none; display: flex;">
+                        <i style="font-size: 25px; color: #fff;" class="fas fa-play"></i>
+                    </button>
+                    <button onclick="likeTrack(${index}, 'popular'); event.stopPropagation();" style="background-color: transparent; outline: none; border: none; align-items: flex-end;  justify-items: end;">
+                        <i style="font-size: 25px; color: #fff;" class="fas fa-heart"></i>
+                    </button>
+                </div>
+            `).join('');
+        }
+        
+        
+        
+        
+        
+        
+        
+        
+        async function loadPopularArtists() {
+            const data = await fetchData('artists?ids=1vCWHaC5f2uS3yhpwWbIA6,7H55rcKCfwqkyDFH9wpKM6,3TVXtAsR1Inumwj472S9r4,66CXWjxzNUsdJxJ2JdwvnR');
+            const popularArtists = document.getElementById('popular-artists');
+            popularArtists.innerHTML = data.artists.map(artist => `
+                <div class="artist-item">
+                    <img src="${artist.images[0].url}" alt="${artist.name}">
+                    <p>${artist.name}</p>
+                </div>
+            `).join('');
+        }
+        
+        async function loadGenres() {
+            const data = await fetchData('browse/categories');
+            genresData = data.categories.items;
+            const genres = document.getElementById('genres');
+            genres.innerHTML = genresData.map((item, index) => `
+                <div class="genre-item" onclick="loadGenreSongs('${item.id}')">
+                    <img src="${item.icons[0].url}" alt="${item.name}" style=" display= flex;">
+                    <p>${item.name}</p>
+                </div>
+            `).join('');
+        }
+        
+        
+        
+        async function loadGenreSongs(genreId) {
+            currentGenre = genreId;
+            const data = await fetchData(`browse/categories/${genreId}/playlists`);
+            const playlists = data.playlists.items;
+            if (playlists.length > 0) {
+                const genrePlaylistId = playlists[0].id;
+                const genrePlaylistData = await fetchData(`playlists/${genrePlaylistId}/tracks`);
+                genresData = genrePlaylistData.items;
+                const popularSongs = document.getElementById('popular-songs');
+                popularSongs.innerHTML = genresData.map((item, index) => `
+                    <div class="song-item">
+                        <img src="${item.track.album.images[0].url}" alt="${item.track.name}">
+                        <p>${item.track.name}</p>
+                        <button onclick="playTrack(${index}, 'genre');" style="background-color: transparent; outline: none; border: none;">
+                            <i style="font-size: 25px; color: #fff;" class="fas fa-play"></i>
+                        </button>
+                        <button class="like-btn-genre-${index}" onclick="likeTrack(${index}, 'genre'); event.stopPropagation();" style="background-color: transparent; outline: none; border: none;">
+                            <i style="font-size: 25px; color: ${likedTracks.has(item.track.id) ? 'green' : 'white'};" class="fas fa-heart"></i>
+                        </button>
+                    </div>
+                `).join('');
+            }
+        }
+        
+        
+        
+        
+        function updateLikeButton(index, type, trackId) {
+            const likeButton = document.querySelector(`.like-btn-${type}-${index}`);
+            if (likeButton) {
+                if (likedTracks.has(trackId)) {
+                    likeButton.querySelector('i').style.color = 'green';
+                } else {
+                    likeButton.querySelector('i').style.color = 'white';
+                }
+            }
+        }
+        
+        
+        
+        
+        
+        async function searchTracks(query) {
+            const data = await fetchData(`search?q=${query}&type=track`);
+            searchResultsData = data.tracks.items;
+            const searchResultsContainer = document.getElementById('popular-songs');
+            searchResultsContainer.innerHTML = searchResultsData.map((item, index) => `
+                <div class="song-item">
+                    <img src="${item.album.images[0].url}" alt="${item.name}">
+                    <p>${item.name}</p>
+                    <button onclick="playTrack(${index}, 'search');" style="background-color: transparent; outline: none; border: none;">
+                        <i style="font-size: 25px; color: #fff;" class="fas fa-play"></i>
+                    </button>
+                    <button class="like-btn-search-${index}" onclick="likeTrack(${index}, 'search'); event.stopPropagation();" style="background-color: transparent; outline: none; border: none;">
+                        <i style="font-size: 25px; color: ${likedTracks.has(item.id) ? 'green' : 'white'};" class="fas fa-heart"></i>
+                    </button>
+                </div>
+            `).join('');
+        
+              
+        }
+        
+        
+        
+        
+        document.getElementById('next-btn').addEventListener('click', playNextTrack);
+        document.getElementById('prev-btn').addEventListener('click', playPrevTrack);
+        document.getElementById('load-more-playlist').addEventListener('click', loadPlaylist);
+        
+        document.getElementById('search-btn').addEventListener('click', () => {
+            const query = document.getElementById('search-input').value;
+            searchTracks(query);
+        });
+        
+        document.getElementById('play-btn').addEventListener('click', () => {
+            const audioPlayer = document.getElementById('audio-player');
+            audioPlayer.play();
+        });
+        
+        document.getElementById('pause-btn').addEventListener('click', () => {
+            const audioPlayer = document.getElementById('audio-player');
+            audioPlayer.pause();
+        });
+        
+        
+        
+        
+        //laode albums
+        async function loadAlbums() {
+            const data = await fetchData('browse/new-releases');
+            const albumsData = data.albums.items;
+            const albums = document.getElementById('albums');
+            albums.innerHTML = albumsData.map((item, index) => `
+                <div class="album-item" onclick="loadAlbumTracks('${item.id}')">
+                    <img src="${item.images[0].url}" alt="${item.name}">
+                    <p>${item.name} - ${item.artists[0].name}</p>
+                    <button onclick="likeTrack(${index}, 'album'); event.stopPropagation();" style="background-color: transparent; outline: none; border: none;">
+                        <i style="font-size: 25px; color: #fff;" class="fas fa-heart"></i>
+                    </button>
+                </div>
+            `).join('');
+        }
+        
+        
+        
+        
+        async function loadAlbumTracks(albumId) {
+            const data = await fetchData(`albums/${albumId}/tracks`);
+            const albumTracksData = data.items;
+            const popularSongs = document.getElementById('popular-songs');
+            popularSongs.innerHTML = albumTracksData.map((item, index) => `
+                <div class="song-item" onclick="playTrack(${index}, 'album', '${albumId}')">
+                    <img src="${item.album.images[0].url}" alt="${item.name}">
+                    <p>${item.name}</p>
+                </div>
+            `).join('');
+        }
+        
+        
+        
+        
+        
+        
+        
+        window.onload = async () => {
+            await getAccessToken();
+            await loadPlaylist();
+            await loadPopularSongs();
+            await loadPopularArtists();
+            await loadGenres();
+            await loadAlbums();
+        }
+        
+        //reaction
+        
+        async function loadPlaylist() {
+            const data = await fetchData(`playlists/37i9dQZF1DXcBWIGoYBM5M/tracks?offset=${playlistOffset}&limit=${playlistLimit}`);
+            playlistData = playlistData.concat(data.items);
+            const playlist = document.getElementById('playlist');
+            playlist.innerHTML += data.items.map((item, index) => `
+                <li onclick="playTrack(${playlistOffset + index}, 'playlist')">
+                    <img src="${item.track.album.images[0].url}" alt="${item.track.name}" style="outline: 2px solid rgba(0, 0, 0, 0.1);">
+                    ${item.track.name} - ${item.track.artists[0].name}
+                    <button style="background-color: transparent; padding-left:10px; outline: none; border: none;">
+                        <i style="font-size: 25px; color: #fff; righ: 5px;" class="fas fa-play"></i>
+                    </button>
+                    <button class="like-btn-playlist-${playlistOffset + index}" onclick="likeTrack(${playlistOffset + index}, 'playlist'); event.stopPropagation();" style="background-color: transparent; padding-left:10px; outline: none; border: none;">
+                        <i style=" right: 5px;  font-size: 25px; color: ${likedTracks.has(item.track.id) ? 'green' : 'white'};" class="fas fa-heart"></i>
+                    </button>
+                </li>
+            `).join('');
+            playlistOffset += playlistLimit;
+            if (data.items.length < playlistLimit) {
+                document.getElementById('load-more-playlist').style.display = 'none';
+            }
+        }
+        
+        
+        
+        
+        let currentTrackId = '';
+        let likedTracks = new Set(JSON.parse(localStorage.getItem('likedTracks')) || {});
+        let ratings = JSON.parse(localStorage.getItem('ratings')) || {};
+        let comments = JSON.parse(localStorage.getItem('comments')) || {};
+        
+        // Load and display comments for the current track
+        function loadComments() {
+            const commentsList = document.getElementById('comments-list');
+            const trackComments = comments[currentTrackId] || [];
+            commentsList.innerHTML = trackComments.map(comment => `
+                <div class="comment" style="background-color: #3838389a; padding: 15px; border-radius: 5px; margin-bottom: 10px;">
+                    <p style=" margin-bottom: 10px; ">${comment.text}</p>
+                    <small style=" font-size: 14px;" >${comment.date}</small>
+                </div>
+            `).join('');
+        }
+        
+        // Event listener for submitting a comment
+        document.getElementById('submit-comment').addEventListener('click', () => {
+            const commentInput = document.getElementById('comment-input');
+            const commentText = commentInput.value.trim();
+            if (commentText) {
+                const comment = {
+                    text: commentText,
+                    date: new Date().toLocaleString()
+                };
+                commentInput.value = '';
+                saveComment(comment);
+            }
+        });
+        
+        // Save a new comment for the current track
+        function saveComment(comment) {
+            if (!comments[currentTrackId]) {
+                comments[currentTrackId] = [];
+            }
+            comments[currentTrackId].push(comment);
+            localStorage.setItem('comments', JSON.stringify(comments));
+            loadComments();
+        }
+        
+        // Initialize comments and ratings sections for the current track
+        function initializeTrackData(trackId) {
+            currentTrackId = trackId;
+            loadComments();
+            loadRating();
+        }
+        
+        // Load and display average rating for the current track
+        function loadRating() {
+            const trackRatings = ratings[currentTrackId] || [];
+            const total = trackRatings.reduce((acc, rating) => acc + rating, 0);
+            const average = trackRatings.length ? (total / trackRatings.length).toFixed(1) : 0;
+            document.getElementById('average-rating').innerText = `Average Rating: ${average}`;
+        }
+        
+        // Save a new rating for the current track
+        function saveRating(rating) {
+            if (!ratings[currentTrackId]) {
+                ratings[currentTrackId] = [];
+            }
+            ratings[currentTrackId].push(rating);
+            localStorage.setItem('ratings', JSON.stringify(ratings));
+            loadRating();
+        }
+        
+        // Event listeners for rating stars
+        document.querySelectorAll('.star').forEach(star => {
+            star.addEventListener('click', (event) => {
+                const rating = parseInt(event.target.getAttribute('data-value'));
+                saveRating(rating);
+            });
+        });
+        
+        // Update the like button color based on track id
+        function updateLikeButton(index, type, trackId) {
+            const likeButton = document.querySelector(`.like-btn-${type}-${index}`);
+            if (likeButton) {
+                if (likedTracks.has(trackId)) {
+                    likeButton.querySelector('i').style.color = 'green';
+                } else {
+                    likeButton.querySelector('i').style.color = 'white';
+                }
+            }
+        }
+        
+        // Handle like button color change and save
+        function likeTrack(index, type) {
+            let track;
+            if (type === 'playlist') {
+                track = playlistData[index].track;
+            } else if (type === 'popular') {
+                track = popularSongsData[index].track;
+            } else if (type === 'genre') {
+                track = genresData[index].track;
+            } else if (type === 'search') {
+                track = searchResultsData[index];
+            } else if (type === 'recommended') {
+                track = recommendedTracks[index];
+            }
+        
+            if (likedTracks.has(track.id)) {
+                likedTracks.delete(track.id);
+                alert(`Unliked: ${track.name} by ${track.artists[0].name}`);
+            } else {
+                likedTracks.add(track.id);
+                alert(`Liked: ${track.name} by ${track.artists[0].name}`);
+            }
+        
+            localStorage.setItem('likedTracks', JSON.stringify([...likedTracks]));
+            updateLikeButton(index, type, track.id);
+        }
+        
+        //-------New-Extensions---------
+        
+        //1)-storable
+        let sortable = new Sortable(document.getElementById('playlist'), {
+            animation: 150,
+            onEnd: function (evt) {
+              const oldIndex = evt.oldIndex;
+              const newIndex = evt.newIndex;
+          
+              // إعادة ترتيب playlistData بناءً على الترتيب الجديد
+              const movedItem = playlistData.splice(oldIndex, 1)[0];
+              playlistData.splice(newIndex, 0, movedItem);
+            }
+          });
+        
+        
+        //2)-Virtual Rooms
+        
+        document.getElementById('create-room').addEventListener('click', createRoom);
+        document.getElementById('send-message').addEventListener('click', sendMessage);
+        document.getElementById('start-call').addEventListener('click', startCall);
+        document.getElementById('share-screen').addEventListener('click', shareScreen);
+        document.getElementById('end-call').addEventListener('click', endCall);
+        document.getElementById('start-voice-chat').addEventListener('click', startVoiceChat);
+        document.getElementById('avatar-select').addEventListener('change', function() {
+            const selectedAvatar = this.value;
+            localStorage.setItem('userAvatar', selectedAvatar);
+        });
+        
+        
+        
+        // Updating background on click
+        const backgroundOptions = document.querySelectorAll('.background-option');
+        backgroundOptions.forEach(option => {
+            option.addEventListener('click', function() {
+                const selectedBackground = this.getAttribute('data-background');
+                const chatSection = document.querySelector('.chat-section');
+                chatSection.style.backgroundImage = `url(${selectedBackground})`;
+                chatSection.style.backgroundSize = 'cover';
+                chatSection.style.backgroundRepeat = 'no-repeat';
+                chatSection.style.backgroundPosition = 'center';
+                localStorage.setItem('chatBackground', selectedBackground);
+            });
+        });
+        
+        let rooms = {};
+        let currentRoom = '';
+        let localStream;
+        let peerConnection;
+        
+        const configuration = {
+            iceServers: [
+                {
+                    urls: 'stun:stun.l.google.com:19302'
+                }
+            ]
+        };
+        
+        function createRoom() {
+            const roomName = document.getElementById('room-name').value;
+            if (roomName && !rooms[roomName]) {
+                rooms[roomName] = [];
+                document.getElementById('rooms').innerHTML += `<li onclick="joinRoom('${roomName}')">${roomName}</li>`;
+                document.getElementById('room-name').value = '';
+            }
+        }
+        
+        function joinRoom(roomName) {
+            currentRoom = roomName;
+            document.getElementById('chat-room-name').innerText = roomName;
+            document.getElementById('chat-room').classList.remove('hidden');
+            loadMessages();
+        }
+        
+        
+        
+        
+        
+        
+        
+        document.addEventListener('DOMContentLoaded', function() {
+            const selectedAvatar = localStorage.getItem('userAvatar');
+            if (selectedAvatar) {
+                document.getElementById('avatar-select').value = selectedAvatar;
+            }
+        });
+        
+        
+        //send Media
+        document.getElementById('send-media').addEventListener('click', sendMedia);
+        
+        function sendMedia() {
+            const mediaInput = document.getElementById('media-input');
+            const file = mediaInput.files[0];
+            const avatarUrl = localStorage.getItem('userAvatar') || "avatar.png";
+            const time = new Date().toLocaleTimeString();
+        
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    let messageType = 'image';
+                    if (file.type.startsWith('video/')) {
+                        messageType = 'video';
+                    }
+        
+                    rooms[currentRoom].push({
+                        type: messageType,
+                        content: e.target.result,
+                        avatar: avatarUrl,
+                        time: time
+                    });
+                    mediaInput.value = '';
+                    loadMessages();
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+        
+        
+        //Send Messages
+        document.getElementById('send-message').addEventListener('click', sendMessage);
+        
+        function sendMessage() {
+            const messageInput = document.getElementById('message-input');
+            const avatarUrl = localStorage.getItem('userAvatar') || "avatar.png";
+            const time = new Date().toLocaleTimeString();
+        
+            const message = messageInput.value.trim();
+            if (message) {
+                rooms[currentRoom].push({
+                    type: 'text',
+                    content: message,
+                    avatar: avatarUrl,
+                    time: time
+                });
+                messageInput.value = '';
+                loadMessages();
+            }
+        }
+        
+        
+        
+        //LoadMessages
+        function loadMessages() {
+            const messages = rooms[currentRoom];
+            const messagesContainer = document.getElementById('messages');
+            messagesContainer.innerHTML = '';
+            messages.forEach(message => {
+                let messageContent = '';
+                if (message.type === 'image') {
+                    messageContent = `<img src="${message.content}" alt="image" class="message-image" onclick="openImage('${message.content}')">`;
+                } else if (message.type === 'video') {
+                    messageContent = `<video src="${message.content}" controls class="message-video"></video>`;
+                } else {
+                    messageContent = `<p>${message.content}</p>`;
+                }
+                messagesContainer.innerHTML += `
+                    <div class="message">
+                        <img src="${message.avatar}" alt="avatar" class="avatar">
+                        <div class="message-content">
+                            ${messageContent}
+                            <small>${message.time}</small>
+                        </div>
+                    </div>
+                `;
+            });
+        }
+        
+        function openImage(src) {
+            const imageWindow = window.open("", "_blank");
+            imageWindow.document.write(`<img src="${src}" style="width: 100%">`);
+        }
+        
+        
+        
+        
+        function startCall() {
+            document.getElementById('video-section').classList.remove('hidden');
+            navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+                .then(stream => {
+                    localStream = stream;
+                    document.getElementById('local-video').srcObject = stream;
+                    setupPeerConnection();
+                })
+                .catch(error => console.error('Error accessing media devices.', error));
+        }
+        
+        function setupPeerConnection(audioOnly = false) {
+            peerConnection = new RTCPeerConnection(configuration);
+            peerConnection.onicecandidate = handleIceCandidate;
+            peerConnection.ontrack = handleRemoteStream;
+        
+            if (audioOnly) {
+                localStream.getAudioTracks().forEach(track => peerConnection.addTrack(track, localStream));
+            } else {
+                localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
+            }
+        
+            createOffer();
+        }
+        
+        function handleIceCandidate(event) {
+            if (event.candidate) {
+                sendMessageToServer({
+                    type: 'candidate',
+                    candidate: event.candidate
+                });
+            }
+        }
+        
+        function createOffer() {
+            peerConnection.createOffer()
+                .then(offer => peerConnection.setLocalDescription(offer))
+                .then(() => sendMessageToServer({
+                    type: 'offer',
+                    offer: peerConnection.localDescription
+                }))
+                .catch(error => console.error('Error creating offer.', error));
+        }
+        
+        function createAnswer() {
+            peerConnection.createAnswer()
+                .then(answer => peerConnection.setLocalDescription(answer))
+                .then(() => sendMessageToServer({
+                    type: 'answer',
+                    answer: peerConnection.localDescription
+                }))
+                .catch(error => console.error('Error creating answer.', error));
+        }
+        
+        function handleOffer(offer) {
+            peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
+                .then(() => createAnswer())
+                .catch(error => console.error('Error handling offer.', error));
+        }
+        
+        function handleAnswer(answer) {
+            peerConnection.setRemoteDescription(new RTCSessionDescription(answer))
+                .catch(error => console.error('Error handling answer.', error));
+        }
+        
+        function handleCandidate(candidate) {
+            peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
+                .catch(error => console.error('Error handling candidate.', error));
+        }
+        
+        function shareScreen() {
+            navigator.mediaDevices.getDisplayMedia({ video: true })
+                .then(screenStream => {
+                    const screenTrack = screenStream.getVideoTracks()[0];
+                    localStream.getVideoTracks()[0].stop();
+                    localStream.removeTrack(localStream.getVideoTracks()[0]);
+                    localStream.addTrack(screenTrack);
+                    peerConnection.addTrack(screenTrack, localStream);
+        
+                    screenTrack.onended = () => {
+                        localStream.getTracks().forEach(track => track.stop());
+                        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+                            .then(newStream => {
+                                localStream = newStream;
+                                document.getElementById('local-video').srcObject = newStream;
+                                newStream.getTracks().forEach(track => peerConnection.addTrack(track, newStream));
+                            })
+                            .catch(error => console.error('Error re-accessing media devices.', error));
+                    };
+                })
+                .catch(error => console.error('Error sharing screen.', error));
+        }
+        
+        function endCall() {
+            if (peerConnection) {
+                peerConnection.close();
+                peerConnection = null;
+            }
+            if (localStream) {
+                localStream.getTracks().forEach(track => track.stop());
+                localStream = null;
+            }
+            document.getElementById('video-section').classList.add('hidden');
+        }
+        
+        function sendMessageToServer(message) {
+            // Placeholder function to be implemented
+        }
+        
+        // Load the saved background when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            const savedBackground = localStorage.getItem('chatBackground');
+            if (savedBackground) {
+                document.querySelector('.chat-section').style.backgroundImage = `url(${savedBackground})`;
+            }
+        });
+        
+        // Updating avatar on selection
+        document.getElementById('avatar-select').addEventListener('change', function() {
+            const selectedAvatar = this.value;
+            document.getElementById('selected-avatar').src = selectedAvatar;
+        });
+        
+        // Sending message with avatar
+        document.getElementById('send-message').addEventListener('click', function() {
+            const messageInput = document.getElementById('message-input');
+            const messageText = messageInput.value.trim();
+            if (messageText !== '') {
+                const selectedAvatar = document.getElementById('avatar-select').value;
+                const messagesContainer = document.getElementById('messages');
+                const messageElement = document.createElement('p');
+                const avatarImage = document.createElement('img');
+                avatarImage.src = selectedAvatar;
+                messageElement.appendChild(avatarImage);
+                messageElement.appendChild(document.createTextNode(messageText));
+                messagesContainer.appendChild(messageElement);
+                messageInput.value = '';
+            }
+        });
+        
+        function startVoiceChat() {
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(stream => {
+                    localStream = stream;
+                    setupPeerConnection(true);
+                })
+                .catch(error => console.error('Error accessing media devices.', error));
+        }
+        
+        function handleRemoteStream(event) {
+            const remoteStream = new MediaStream();
+            event.streams[0].getTracks().forEach(track => remoteStream.addTrack(track));
+            if (remoteStream.getVideoTracks().length) {
+                document.getElementById('remote-video').srcObject = remoteStream;
+            } else {
+                const audioElement = document.createElement('audio');
+                audioElement.srcObject = remoteStream;
+                audioElement.autoplay = true;
+                document.getElementById('chat-room').appendChild(audioElement);
+            }
+        }
+        
+        
+        
+        
+        
+        
+        // Event listener to initialize track data on page load
+        document.addEventListener('DOMContentLoaded', async () => {
+            await getAccessToken();
+            loadPlaylist();
+            loadPopularSongs();
+            loadPopularArtists();
+            loadRecommendedMusic(); // Load recommended music
+        });
+
+    </script>
+
+
+    
+</body>
+</html>
\ No newline at end of file
