rutbhics 1.0.0 → 1.0.1

package/README.md

@@ -51,6 +51,22 @@ Nginx, atau hosting statis apa pun) — tidak butuh backend.
   tersimpan di `localStorage`.
 - **Pengaturan** — ganti wallpaper (4 pilihan) dan tema terang/gelap,
   tersimpan di `localStorage` dan diterapkan saat desktop dibuka lagi.
+- **Musik** — player audio & video mini: putar/jeda, trek sebelum/
+  sesudah, geser posisi, volume, daftar putar. Trek demo dari URL publik
+  (butuh internet); trek tambahan (URL audio/video apa pun) bisa
+  ditambahkan dan tersimpan di `localStorage`.
+
+## Notifikasi & pusat kontrol (taskbar)
+
+- Tombol lonceng 🔔 di taskbar dengan badge jumlah notifikasi belum dibaca.
+- Panel notifikasi: daftar notifikasi (waktu WIB), hapus semua, dan
+  otomatis tandai sudah dibaca saat panel dibuka. Notifikasi tersimpan di
+  `localStorage`, maksimal 30 terbaru.
+- Pusat kontrol di panel yang sama: ganti tema terang/gelap (tersambung ke
+  Pengaturan lewat `localStorage`), mode Jangan Ganggu (mematikan toast
+  pop-up), tombol buka Pengaturan, dan tombol kirim notifikasi tes.
+- Toast pop-up muncul tiap notifikasi baru (kecuali mode Jangan Ganggu
+  aktif), hilang sendiri setelah 4 detik atau saat diklik.
 
 ## Peta jalan (roadmap)
 
@@ -58,8 +74,8 @@ Urutan pembangunan berikutnya (satu item per jadwal build):
 
 1. Aplikasi Files (penjelajah berkas virtual + localStorage) — selesai 26 Okt 2026
 2. Aplikasi Pengaturan (ganti wallpaper, tema terang/gelap) — selesai 26 Okt 2026
-3. Notifikasi & pusat kontrol di taskbar
-4. Musik/video player mini
+3. Notifikasi & pusat kontrol di taskbar — selesai 26 Okt 2026
+4. Musik/video player mini — selesai 26 Okt 2026
 5. Terminal web (perintah semu: help, about, echo, date)
 6. Mode jendela maximize + snap kiri/kanan
 7. Aplikasi Gambar (kanvas coret-coret + simpan)
@@ -72,11 +88,11 @@ Urutan pembangunan berikutnya (satu item per jadwal build):
 ## Struktur
 
 ```
-index.html        — shell: wallpaper, ikon desktop, taskbar, menu Start
+index.html        — shell: wallpaper, ikon desktop, taskbar, menu Start, panel notifikasi & pusat kontrol
 login.html        — halaman login (akun lokal perangkat) + kunci desktop
 css/style.css     — seluruh tampilan desktop & aplikasi
-js/desktop.js     — window manager (drag, minimize, focus, taskbar, jam WIB, terapkan pengaturan tersimpan)
-js/apps.js        — aplikasi bawaan (obrolan, peramban, catatan, kalkulator, files, pengaturan)
+js/desktop.js     — window manager (drag, minimize, focus, taskbar, jam WIB, terapkan pengaturan tersimpan, notifikasi & pusat kontrol)
+js/apps.js        — aplikasi bawaan (obrolan, peramban, catatan, kalkulator, files, pengaturan, musik)
 package.json      — metadata package npm + perintah `rutbhics`
 bin/rutbhics.js   — server statis lokal (tanpa dependensi) untuk perintah `rutbhics`
 ```

package/css/style.css

@@ -250,3 +250,69 @@ body.light-theme .calc-grid button { background: rgba(15, 23, 42, .06); }
 body.light-theme .calc-grid button:hover { background: rgba(15, 23, 42, .12); }
 body.light-theme .chat-contact.active { background: rgba(99, 102, 241, .15); }
 body.light-theme #wallpaper::after { opacity: .06; }
+
+/* Taskbar: tombol notifikasi */
+#notif-btn {
+  position: relative; border: 0; border-radius: 10px; padding: 8px 12px;
+  background: transparent; color: var(--ink); font-size: 16px;
+}
+#notif-btn:hover { background: rgba(255, 255, 255, .1); }
+#notif-badge {
+  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px;
+  padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff;
+  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
+}
+#notif-badge.hidden { display: none; }
+
+/* Panel notifikasi & pusat kontrol */
+#notif-panel {
+  position: fixed; z-index: 99; right: 10px; bottom: 60px; width: 340px;
+  max-height: 60vh; overflow-y: auto;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
+}
+#notif-panel.hidden { display: none; }
+.notif-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
+.notif-panel-head strong { font-size: 14px; }
+.notif-item { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); margin-bottom: 6px; }
+.notif-item.unread { background: rgba(99, 102, 241, .2); }
+.notif-text { display: block; font-size: 13px; line-height: 1.4; }
+.notif-time { font-size: 11px; color: var(--muted); }
+.control-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
+
+/* Toast notifikasi */
+#toast-wrap {
+  position: fixed; z-index: 101; right: 10px; bottom: 60px;
+  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
+}
+.toast {
+  max-width: 320px; padding: 10px 14px; border-radius: 12px; font-size: 13px;
+  background: var(--surface-solid); border: 1px solid var(--border);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, .5); cursor: pointer;
+}
+body.light-theme #notif-btn:hover { background: rgba(15, 23, 42, .08); }
+body.light-theme .notif-item { background: rgba(15, 23, 42, .05); }
+body.light-theme .notif-item.unread { background: rgba(99, 102, 241, .15); }
+
+/* Aplikasi: Musik */
+.music-stage { margin-bottom: 12px; }
+.music-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
+.music-media { width: 100%; border-radius: 10px; background: #000; }
+.music-media.hidden { display: none; }
+.music-error { color: #f87171; font-size: 13px; margin-top: 8px; }
+.music-error.hidden { display: none; }
+.music-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
+.music-time { font-size: 13px; color: var(--muted); }
+.music-seek { width: 100%; margin-bottom: 10px; accent-color: var(--accent); }
+.music-volrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+.music-vol { flex: 1; accent-color: var(--accent); }
+.music-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
+.music-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
+.music-row:hover { background: rgba(255, 255, 255, .07); }
+.music-row.active { background: rgba(99, 102, 241, .25); }
+.music-name { flex: 1; border: 0; background: transparent; color: var(--ink); text-align: left; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.music-add { display: flex; gap: 8px; margin-bottom: 10px; }
+.music-add input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, .06); outline: none; }
+body.light-theme .music-row:hover { background: rgba(15, 23, 42, .08); }
+body.light-theme .music-row.active { background: rgba(99, 102, 241, .15); }
+body.light-theme .music-add input { background: rgba(15, 23, 42, .05); }

package/index.html

@@ -35,13 +35,35 @@
 <footer id="taskbar">
   <button id="start-btn" title="Mulai">⊞ <span>Mulai</span></button>
   <div id="task-buttons"></div>
+  <button id="notif-btn" title="Notifikasi & pusat kontrol">🔔<span id="notif-badge" class="hidden">0</span></button>
   <div id="tray">
     <span id="clock-time">--:--</span>
     <span id="clock-date">--</span>
   </div>
 </footer>
 
-<script src="js/desktop.js"></script>
+<!-- Panel notifikasi & pusat kontrol -->
+<div id="notif-panel" class="hidden">
+  <div class="notif-panel-head">
+    <strong>Notifikasi</strong>
+    <button id="notif-clear" class="chip">Hapus semua</button>
+  </div>
+  <div id="notif-list"></div>
+  <div class="notif-panel-head" style="margin-top:14px">
+    <strong>Pusat kontrol</strong>
+  </div>
+  <div class="control-row">
+    <button id="cc-theme" class="chip">☀️ Ganti ke terang</button>
+    <button id="cc-dnd" class="chip">🔔 Jangan ganggu: nonaktif</button>
+  </div>
+  <div class="control-row">
+    <button id="cc-settings" class="btn-primary">Buka Pengaturan</button>
+    <button id="cc-test" class="chip">Kirim notifikasi tes</button>
+  </div>
+</div>
+<div id="toast-wrap"></div>
+
 <script src="js/apps.js"></script>
+<script src="js/desktop.js"></script>
 </body>
 </html>

package/js/apps.js

@@ -1,5 +1,5 @@
-// Web Desktop — aplikasi bawaan: Obrolan, Peramban, Catatan, Kalkulator, Files, Pengaturan.
-// Data Obrolan, Catatan & Files tersimpan di localStorage perangkat yang membuka web ini.
+// Web Desktop — aplikasi bawaan: Obrolan, Peramban, Catatan, Kalkulator, Files, Pengaturan, Musik.
+// Data Obrolan, Catatan, Files & Musik tersimpan di localStorage perangkat yang membuka web ini.
 (function () {
   "use strict";
 
@@ -353,12 +353,181 @@
     body.appendChild(el('<p class="hint">Pengaturan tersimpan di perangkat ini dan langsung diterapkan saat desktop dibuka lagi.</p>'));
   }
 
+  // ---------- Musik (player audio & video mini) ----------
+  // Trek demo diputar dari URL publik (butuh internet). Trek tambahan
+  // (URL audio/video apa pun) tersimpan di localStorage perangkat.
+  var DEMO_TRACKS = [
+    { title: "SoundHelix Song 1 (demo)", url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", type: "audio" },
+    { title: "SoundHelix Song 2 (demo)", url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3", type: "audio" },
+    { title: "Flower — demo video (MDN)", url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4", type: "video" }
+  ];
+  function guessType(url) {
+    var u = url.split("?")[0].toLowerCase();
+    if (/\.(mp4|webm|mov|mkv)$/.test(u)) return "video";
+    return "audio";
+  }
+  function fmtTime(s) {
+    if (!isFinite(s)) return "0:00";
+    var m = Math.floor(s / 60), sec = Math.floor(s % 60);
+    return m + ":" + (sec < 10 ? "0" : "") + sec;
+  }
+  function renderMusic(body) {
+    var custom = store("wd-music", []);
+    if (!Array.isArray(custom)) custom = [];
+    var tracks = DEMO_TRACKS.concat(custom);
+    var current = 0;
+    var media = null; // elemen <audio> atau <video> yang sedang aktif
+
+    var stage = el('<div class="music-stage"></div>');
+    var titleEl = el('<p class="music-title"></p>');
+    var audioEl = el('<audio class="music-media" preload="metadata"></audio>');
+    var videoEl = el('<video class="music-media hidden" preload="metadata"></video>');
+    stage.appendChild(titleEl);
+    stage.appendChild(audioEl);
+    stage.appendChild(videoEl);
+    var errEl = el('<p class="music-error hidden"></p>');
+    stage.appendChild(errEl);
+
+    var controls = el('<div class="music-controls"></div>');
+    var prevBtn = el('<button class="chip">⏮</button>');
+    var playBtn = el('<button class="btn-primary">▶ Putar</button>');
+    var nextBtn = el('<button class="chip">⏭</button>');
+    var timeEl = el('<span class="music-time">0:00 / 0:00</span>');
+    controls.appendChild(prevBtn); controls.appendChild(playBtn);
+    controls.appendChild(nextBtn); controls.appendChild(timeEl);
+
+    var seek = el('<input class="music-seek" type="range" min="0" max="100" value="0">');
+    var volRow = el('<div class="music-volrow"></div>');
+    var volLabel = el('<span class="hint" style="margin:0">Volume</span>');
+    var vol = el('<input class="music-vol" type="range" min="0" max="100" value="80">');
+    volRow.appendChild(volLabel); volRow.appendChild(vol);
+
+    var listEl = el('<div class="music-list"></div>');
+
+    var addRow = el('<div class="music-add"></div>');
+    var urlInput = el('<input type="text" placeholder="Tempel URL audio/video, mis. https://.../lagu.mp3">');
+    var addBtn = el('<button class="btn-primary">Tambah</button>');
+    addRow.appendChild(urlInput); addRow.appendChild(addBtn);
+
+    body.appendChild(stage); body.appendChild(controls);
+    body.appendChild(seek); body.appendChild(volRow);
+    body.appendChild(listEl); body.appendChild(addRow);
+    body.appendChild(el('<p class="hint">Trek demo butuh internet. Trek tambahan tersimpan di perangkat ini.</p>'));
+
+    function currentTrack() { return tracks[current]; }
+    function tryPlay() {
+      if (!media) return;
+      try {
+        var p = media.play();
+        if (p && p.then) {
+          p.then(function () { playBtn.textContent = "⏸ Jeda"; }).catch(function () {});
+        } else {
+          playBtn.textContent = "⏸ Jeda";
+        }
+      } catch (e) { /* abaikan: pengguna bisa menekan Putar */ }
+    }
+    function setMedia() {
+      audioEl.pause();
+      videoEl.pause();
+      var t = currentTrack();
+      var isVideo = t.type === "video";
+      audioEl.classList.toggle("hidden", isVideo);
+      videoEl.classList.toggle("hidden", !isVideo);
+      media = isVideo ? videoEl : audioEl;
+      media.src = t.url;
+      media.volume = vol.value / 100;
+      titleEl.textContent = (isVideo ? "🎬 " : "🎵 ") + t.title;
+      errEl.classList.add("hidden");
+      playBtn.textContent = "▶ Putar";
+      seek.value = 0;
+      timeEl.textContent = "0:00 / 0:00";
+      drawList();
+    }
+    function playTrack(i) {
+      current = (i + tracks.length) % tracks.length;
+      setMedia();
+      tryPlay();
+    }
+    function drawList() {
+      listEl.innerHTML = "";
+      tracks.forEach(function (t, i) {
+        var row = el('<div class="music-row' + (i === current ? " active" : "") + '"></div>');
+        var name = el('<button class="music-name"></button>');
+        name.textContent = (t.type === "video" ? "🎬 " : "🎵 ") + t.title;
+        name.addEventListener("click", function () { playTrack(i); });
+        row.appendChild(name);
+        if (i >= DEMO_TRACKS.length) {
+          var del = el('<button class="chip">Hapus</button>');
+          del.addEventListener("click", function () {
+            custom = custom.filter(function (c) { return c.url !== t.url; });
+            save("wd-music", custom);
+            tracks = DEMO_TRACKS.concat(custom);
+            if (current >= tracks.length) current = tracks.length - 1;
+            setMedia();
+          });
+          row.appendChild(del);
+        }
+        listEl.appendChild(row);
+      });
+    }
+    function bindMediaEvents(m) {
+      m.addEventListener("timeupdate", function () {
+        if (m.duration) seek.value = Math.floor(m.currentTime / m.duration * 100);
+        timeEl.textContent = fmtTime(m.currentTime) + " / " + fmtTime(m.duration);
+      });
+      m.addEventListener("loadedmetadata", function () {
+        timeEl.textContent = fmtTime(m.currentTime) + " / " + fmtTime(m.duration);
+      });
+      m.addEventListener("ended", function () { playTrack(current + 1); });
+      m.addEventListener("error", function () {
+        errEl.textContent = "Gagal memuat media ini. Periksa URL atau koneksi internet, lalu coba trek lain.";
+        errEl.classList.remove("hidden");
+        playBtn.textContent = "▶ Putar";
+      });
+    }
+    bindMediaEvents(audioEl);
+    bindMediaEvents(videoEl);
+
+    playBtn.addEventListener("click", function () {
+      if (!media) return;
+      if (media.paused) {
+        tryPlay();
+      } else {
+        media.pause();
+        playBtn.textContent = "▶ Putar";
+      }
+    });
+    prevBtn.addEventListener("click", function () { playTrack(current - 1); });
+    nextBtn.addEventListener("click", function () { playTrack(current + 1); });
+    seek.addEventListener("input", function () {
+      if (media && media.duration) media.currentTime = seek.value / 100 * media.duration;
+    });
+    vol.addEventListener("input", function () {
+      if (media) media.volume = vol.value / 100;
+    });
+    addBtn.addEventListener("click", function () {
+      var url = urlInput.value.trim();
+      if (!url) return;
+      var title = url.split("/").pop().split("?")[0] || url;
+      try { title = decodeURIComponent(title); } catch (e) {}
+      custom.push({ title: title, url: url, type: guessType(url) });
+      save("wd-music", custom);
+      tracks = DEMO_TRACKS.concat(custom);
+      urlInput.value = "";
+      drawList();
+    });
+    urlInput.addEventListener("keydown", function (e) { if (e.key === "Enter") addBtn.click(); });
+
+    setMedia();
+  }
+
   window.APPS = {
     chat: { emoji: "💬", title: "Obrolan", render: renderChat },
     browser: { emoji: "🌐", title: "Peramban", render: renderBrowser },
     notes: { emoji: "📝", title: "Catatan", render: renderNotes },
     calc: { emoji: "🧮", title: "Kalkulator", render: renderCalc },
     files: { emoji: "📁", title: "Files", render: renderFiles },
-    settings: { emoji: "⚙️", title: "Pengaturan", render: renderSettings }
+    settings: { emoji: "⚙️", title: "Pengaturan", render: renderSettings },
+    music: { emoji: "🎵", title: "Musik", render: renderMusic }
   };
 })();

package/js/desktop.js

@@ -181,5 +181,134 @@
     }
   } catch (e) {}
 
+  // ---------- Notifikasi & pusat kontrol (taskbar) ----------
+  // Notifikasi tersimpan di localStorage (wd-notifs); mode jangan-ganggu di wd-dnd.
+  function notifStore(fallback) {
+    try {
+      var raw = localStorage.getItem("wd-notifs");
+      return raw ? JSON.parse(raw) : fallback;
+    } catch (e) { return fallback; }
+  }
+  function notifSave(list) {
+    try { localStorage.setItem("wd-notifs", JSON.stringify(list)); } catch (e) { /* abaikan */ }
+  }
+  var notifs = notifStore([]);
+  function isDnd() {
+    try { return localStorage.getItem("wd-dnd") === "1"; } catch (e) { return false; }
+  }
+  function timeWIB() {
+    return new Intl.DateTimeFormat("id-ID", {
+      timeZone: "Asia/Jakarta", hour: "2-digit", minute: "2-digit", hour12: false
+    }).format(new Date());
+  }
+  var notifBtn = document.getElementById("notif-btn");
+  var notifBadge = document.getElementById("notif-badge");
+  var notifPanel = document.getElementById("notif-panel");
+  var notifListEl = document.getElementById("notif-list");
+  var toastWrap = document.getElementById("toast-wrap");
+
+  function unreadCount() {
+    return notifs.filter(function (n) { return !n.read; }).length;
+  }
+  function drawNotifs() {
+    var unread = unreadCount();
+    if (unread > 0) {
+      notifBadge.textContent = unread > 9 ? "9+" : String(unread);
+      notifBadge.classList.remove("hidden");
+    } else {
+      notifBadge.classList.add("hidden");
+    }
+    notifListEl.innerHTML = "";
+    if (!notifs.length) {
+      var empty = document.createElement("p");
+      empty.className = "hint";
+      empty.textContent = "Belum ada notifikasi.";
+      notifListEl.appendChild(empty);
+      return;
+    }
+    notifs.slice().reverse().forEach(function (n) {
+      var row = document.createElement("div");
+      row.className = "notif-item" + (n.read ? "" : " unread");
+      var t = document.createElement("span");
+      t.className = "notif-text";
+      t.textContent = n.text;
+      var time = document.createElement("span");
+      time.className = "notif-time";
+      time.textContent = n.time;
+      row.appendChild(t);
+      row.appendChild(time);
+      notifListEl.appendChild(row);
+    });
+  }
+  function showToast(text) {
+    var toast = document.createElement("div");
+    toast.className = "toast";
+    toast.textContent = text;
+    toast.addEventListener("click", function () { toast.remove(); });
+    toastWrap.appendChild(toast);
+    setTimeout(function () { toast.remove(); }, 4000);
+  }
+  function pushNotif(text, opts) {
+    opts = opts || {};
+    notifs.push({ text: text, time: timeWIB(), read: false });
+    if (notifs.length > 30) notifs = notifs.slice(-30);
+    notifSave(notifs);
+    drawNotifs();
+    if (!opts.silent && !isDnd()) showToast(text);
+  }
+  function markAllRead() {
+    notifs.forEach(function (n) { n.read = true; });
+    notifSave(notifs);
+    drawNotifs();
+  }
+  notifBtn.addEventListener("click", function () {
+    var willOpen = notifPanel.classList.contains("hidden");
+    notifPanel.classList.toggle("hidden");
+    startMenu.classList.add("hidden");
+    if (willOpen) markAllRead();
+  });
+  document.addEventListener("click", function (e) {
+    if (!notifPanel.classList.contains("hidden") &&
+        !e.target.closest("#notif-panel") && !e.target.closest("#notif-btn")) {
+      notifPanel.classList.add("hidden");
+    }
+  });
+  document.getElementById("notif-clear").addEventListener("click", function () {
+    notifs = [];
+    notifSave(notifs);
+    drawNotifs();
+  });
+  var ccTheme = document.getElementById("cc-theme");
+  function refreshThemeBtn() {
+    ccTheme.textContent = document.body.classList.contains("light-theme")
+      ? "🌙 Ganti ke gelap" : "☀️ Ganti ke terang";
+  }
+  ccTheme.addEventListener("click", function () {
+    var light = document.body.classList.toggle("light-theme");
+    try { localStorage.setItem("wd-theme", light ? "light" : "dark"); } catch (e) {}
+    refreshThemeBtn();
+  });
+  var ccDnd = document.getElementById("cc-dnd");
+  function refreshDndBtn() {
+    ccDnd.textContent = isDnd() ? "🔕 Jangan ganggu: aktif" : "🔔 Jangan ganggu: nonaktif";
+  }
+  ccDnd.addEventListener("click", function () {
+    try { localStorage.setItem("wd-dnd", isDnd() ? "0" : "1"); } catch (e) {}
+    refreshDndBtn();
+  });
+  document.getElementById("cc-settings").addEventListener("click", function () {
+    notifPanel.classList.add("hidden");
+    openApp("settings");
+  });
+  document.getElementById("cc-test").addEventListener("click", function () {
+    pushNotif("Ini notifikasi tes dari pusat kontrol.");
+  });
+  refreshThemeBtn();
+  refreshDndBtn();
+  drawNotifs();
+  if (!notifs.length) {
+    pushNotif("Selamat datang di Rutbhics! Ketuk lonceng di taskbar untuk notifikasi & pusat kontrol.");
+  }
+
   renderLaunchers("");
 })();

package/package.json

@@ -22,5 +22,5 @@
   "scripts": {
     "start": "node bin/rutbhics.js"
   },
-  "version": "1.0.0"
-}
+  "version": "1.0.1"
+}