V2

api/upload_audio.php

@@ -0,0 +1,41 @@
+<?php
+declare(strict_types=1);
+
+header('Content-Type: application/json');
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    echo json_encode(['success' => false, 'error' => 'Invalid request method.']);
+    exit;
+}
+
+if (!isset($_FILES['sahur_file'])) {
+    echo json_encode(['success' => false, 'error' => 'No file uploaded.']);
+    exit;
+}
+
+$file = $_FILES['sahur_file'];
+
+// Basic validation
+if ($file['error'] !== UPLOAD_ERR_OK) {
+    echo json_encode(['success' => false, 'error' => 'Upload error: ' . $file['error']]);
+    exit;
+}
+
+$ext = pathinfo($file['name'], PATHINFO_EXTENSION);
+if (strtolower($ext) !== 'mp3') {
+    echo json_encode(['success' => false, 'error' => 'Only MP3 files are allowed.']);
+    exit;
+}
+
+$targetDir = __DIR__ . '/../assets/audio/';
+if (!is_dir($targetDir)) {
+    mkdir($targetDir, 0775, true);
+}
+
+$targetPath = $targetDir . 'sahur.mp3';
+
+if (move_uploaded_file($file['tmp_name'], $targetPath)) {
+    echo json_encode(['success' => true]);
+} else {
+    echo json_encode(['success' => false, 'error' => 'Failed to save file.']);
+}

assets/js/main.js

@@ -51,4 +51,58 @@ document.addEventListener('DOMContentLoaded', () => {
       testAudioBtn.textContent = 'Test Play Locally';
     });
   }
+
+  // Sahur MP3 Upload Logic
+  const sahurUpload = document.getElementById('sahur-upload');
+  const uploadBtn = document.getElementById('upload-btn');
+  const uploadStatus = document.getElementById('upload-status');
+
+  if (sahurUpload && uploadBtn) {
+    sahurUpload.addEventListener('change', () => {
+      if (sahurUpload.files.length > 0) {
+        uploadBtn.style.display = 'block';
+        uploadStatus.textContent = `Selected: ${sahurUpload.files[0].name}`;
+      } else {
+        uploadBtn.style.display = 'none';
+        uploadStatus.textContent = '';
+      }
+    });
+
+    uploadBtn.addEventListener('click', async () => {
+      if (sahurUpload.files.length === 0) return;
+
+      const formData = new FormData();
+      formData.append('sahur_file', sahurUpload.files[0]);
+
+      uploadBtn.disabled = true;
+      uploadBtn.textContent = 'Uploading...';
+      uploadStatus.textContent = 'Processing your file...';
+
+      try {
+        const response = await fetch('api/upload_audio.php', {
+          method: 'POST',
+          body: formData
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+          uploadStatus.innerHTML = '<span style="color:var(--primary);">✓ Berhasil di-upload!</span>';
+          // Reload audio player to reflect the new file
+          const currentSrc = audioPlayer.querySelector('source').src;
+          audioPlayer.querySelector('source').src = currentSrc.split('?')[0] + '?v=' + Date.now();
+          audioPlayer.load();
+        } else {
+          uploadStatus.innerHTML = `<span style="color:red;">Gagal: ${result.error}</span>`;
+        }
+      } catch (error) {
+        uploadStatus.innerHTML = '<span style="color:red;">Network error.</span>';
+      } finally {
+        uploadBtn.disabled = false;
+        uploadBtn.textContent = 'Upload Now';
+        uploadBtn.style.display = 'none';
+        sahurUpload.value = '';
+      }
+    });
+  }
 });

index.php

@@ -71,8 +71,15 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
         <source src="assets/audio/sahur.mp3" type="audio/mpeg">
         Your browser does not support the audio element.
       </audio>
-      <div style="margin-top: 16px;">
+      <div style="margin-top: 16px; display: flex; flex-direction: column; gap: 12px;">
         <button id="test-audio-btn" class="btn" style="border: 1px solid var(--border);">Test Play Locally</button>
+        
+        <div style="padding: 16px; background: #f8fafc; border: 1px dashed var(--border); border-radius: var(--radius);">
+          <label class="form-label" style="margin-bottom: 8px; display: block;">Upload Sahur MP3</label>
+          <input type="file" id="sahur-upload" accept="audio/mpeg" style="font-size: 0.75rem; width: 100%;">
+          <button id="upload-btn" class="btn btn-primary" style="margin-top: 10px; width: 100%; display: none;">Upload Now</button>
+          <div id="upload-status" style="margin-top: 8px; font-size: 0.75rem;"></div>
+        </div>
       </div>
     </div>