diff --git a/Css/style.css b/Css/style.css index 3e9961e..9c92c6c 100644 --- a/Css/style.css +++ b/Css/style.css @@ -505,9 +505,10 @@ li > .menu__container > .grid__controling .control_center--grid { .musicPlayer--image img { width: 50px; margin: 0 0 0 10px; + border-radius: 10px; } .musicPlayer--content { - width: 30%; + width: 40%; height: 100%; display: flex; align-items: center; diff --git a/README.md b/README.md index e453f5f..0a3f225 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,7 @@ An example of new icons those are added: > - [ ] Change dekstop background > - [x] Spotlight search > - [x] Add change brightness range input +> - [ ] Music Player App ## list of Shorcuts :
diff --git a/index.html b/index.html index 9295972..5f6c591 100644 --- a/index.html +++ b/index.html @@ -1,711 +1,616 @@ - - - - - - - - Mac os in web! + + - - - + + + + - + Mac os in web! - + + + - + - - - - - - - - + - - - + - - - -
-
- + + + - +
-
- -
+
+ +
- + -
- - - - - - - - - - - - - - - -
- +
+ + + + + + + + + + + + + + + +
+ - -
-
-
- - - - -
+ +
+
+
+ + + + +
-
-
- - App store -
-
- - Calculator -
-
- - Calendar -
-
- - Contacts -
-
- - Dictionary -
-
- - home -
-
- - Mail -
-
- - Messages -
-
- - Netnewswire -
-
- - Numbers -
-
- - Pages -
-
- - Siri -
-
- - Podcasts -
-
- - Safari -
-
- - Monitor
- activity +
+
+
+ + App store +
+
+ + Calculator +
+
+ + Calendar +
+
+ + Contacts +
+
+ + Dictionary +
+
+ + home +
+
+ + Mail +
+
+ + Messages +
+
+ + Netnewswire +
+
+ + Numbers +
+
+ + Pages +
+
+ + Siri +
+
+ + Podcasts +
+
+ + Safari +
+
+ + Monitor
+ activity +
+
+ + Zoom +
+
+
+ + +
+ +
+
+
+ + +
-
- - Zoom +
+

Terminal

-
- +
+

Last Login : Yesterday on console

-
- -
-
-
- - - -
-
-

Terminal

-
+ +
+

+ ➜   + ~  + +

-
-

Last Login : Yesterday on console

- -
-

- ➜   - ~  - -

-
+ + + + + + +
+
- - - - - - + +
+
+
+ + +
-
- -
-
-
- - - -
+
-
- - -
- add_circle -
-
- delete -
- -
- - - - -
+ -
-
-
-
+
+ add_circle +
+
+ delete
-
- + +
+ + + + +
- - - -
-
-
- - - -
+
+
+
-
- +
+
- -
-
-
- - - -
-
-

Maps

-
-
-
- +
+ + + +
+
+
+ + +
- -
-
-
- - - -
- +
+ +
+
+ +
+
+
+ + +
-
- - - - - - - - - - - - - - - - - - - +
+

Maps

+
+ +
- - -
-
-
-

19

-

Tuesday

+ +
+
+
+ + +
-
    -
  • - Listen podcast - 2:30 - 3:00 PM -
    • -
  • - English class - 4:00 - 4:45 PM -
    • -
  • - Stand-up meeting - 6:15 - 5:30 PM -
    • -
+ +
+
+ + + + + + + + + + + + + + + + + + +
-
- +
-
- - - - + + +
+
+
+

19

+

Tuesday

+
+
    +
  • + Listen podcast + 2:30 - 3:00 PM +
    • +
  • + English class + 4:00 - 4:45 PM +
    • +
  • + Stand-up meeting + 6:15 - 5:30 PM +
    • +
+
+ +
+
+ + + + +
+ + + + + - - - - - + \ No newline at end of file diff --git a/javascript/script.js b/javascript/script.js index b8219fc..409da7f 100644 --- a/javascript/script.js +++ b/javascript/script.js @@ -73,11 +73,11 @@ var brightness_range = document.getElementById("brightness"); var sound_range = document.getElementById("sound"); function change_brightness() { - let brightnessValLocal = localStorage.getItem('brightnessVal'); - brightness_range.setAttribute("value" , brightnessValLocal); + let brightnessValLocal = localStorage.getItem("brightnessVal"); + brightness_range.setAttribute("value", brightnessValLocal); var brightnessVal = brightness_range.value; - localStorage.setItem('brightnessVal' , brightnessVal); - if(brightnessValLocal != null) { + localStorage.setItem("brightnessVal", brightnessVal); + if (brightnessValLocal != null) { body.style.filter = `brightness(${brightnessValLocal + "%"})`; body.style.backdropFilter = `brightness(${brightnessValLocal + "%"})`; } else { @@ -451,9 +451,9 @@ const calculateBattery = () => { }); }) .finally(() => { - batteryText.textContent = `${number}%`; + batteryText.textContent = `${Math.floor(number)}%`; batteryProgress.style.width = `${number}%`; - batteryPopupText.textContent = `${number}%`; + batteryPopupText.textContent = `${Math.floor(number)}%`; if (number <= 20) { batteryProgress.classList.add("battery__low"); @@ -470,3 +470,79 @@ batteryButton.addEventListener("click", () => { batteryButton.classList.toggle("selected"); }); /********** End Battery **********/ + +/* +Code: Navbar Music Player +Author: Armin Amiri Nasab +Date: 2023/01/29 + */ + +let musicsDirectory = "./music/"; +let navbarMusics = [ + { + title: "Cannon", + singer: "Johann Pachelbel", + img: "canon.jpg", + source: "canon.mp3", + }, + { + title: "Rondo", + singer: "Mozart", + img: "mozart.jpg", + source: "mozart.mp3", + }, + { + title: "Faded", + singer: "Alan Walker", + img: "faded.webp", + source: "faded.mp3", + }, +]; + +let musicPlayerTag = document.getElementById("musicPlayerTag"); +let musicSinger = document.getElementById("musicSinger"); +let musicTitle = document.getElementById("musicTitle"); +let musicImage = document.getElementById("musicImage"); +let musicPlayIcon = document.getElementById("musicPlayIcon"); + +let isPlay = false; +let musicItem = 0; + +function playMusic() { + if (isPlay) { + isPlay = false; + musicPlayIcon.textContent = "play_arrow"; + musicPlayerTag.pause(); + } else { + isPlay = true; + musicPlayIcon.textContent = "pause"; + musicPlayerTag.play(); + } +} + +function changeMusic() { + musicPlayerTag.src = musicsDirectory + navbarMusics[musicItem].source; + musicImage.src = musicsDirectory + navbarMusics[musicItem].img; + musicTitle.textContent = navbarMusics[musicItem].title; + musicSinger.textContent = navbarMusics[musicItem].singer; +} + +changeMusic(); + +function nextMusic() { + isPlay = false; + if (musicItem < navbarMusics.length - 1) { + musicItem++; + changeMusic(); + playMusic(); + } +} + +function previousMusic() { + isPlay = false; + if (musicItem > 0) { + musicItem--; + changeMusic(); + playMusic(); + } +} diff --git a/music/canon.jpg b/music/canon.jpg new file mode 100644 index 0000000..aa5f537 Binary files /dev/null and b/music/canon.jpg differ diff --git a/music/canon.mp3 b/music/canon.mp3 new file mode 100644 index 0000000..4b28d84 Binary files /dev/null and b/music/canon.mp3 differ diff --git a/music/faded.mp3 b/music/faded.mp3 new file mode 100644 index 0000000..b460ff0 Binary files /dev/null and b/music/faded.mp3 differ diff --git a/music/faded.webp b/music/faded.webp new file mode 100644 index 0000000..9fe42a1 Binary files /dev/null and b/music/faded.webp differ diff --git a/music/mozart.jpg b/music/mozart.jpg new file mode 100644 index 0000000..87b5d79 Binary files /dev/null and b/music/mozart.jpg differ diff --git a/music/mozart.mp3 b/music/mozart.mp3 new file mode 100644 index 0000000..3b470c5 Binary files /dev/null and b/music/mozart.mp3 differ