diff --git a/assets/css/custom.css b/assets/css/custom.css index eaa8a8d..4321d35 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,22 +1,79 @@ - +/* General Body Styles */ body { - background-color: #F0F8FF; - font-family: 'Poppins', sans-serif; + background-color: #f8f9fa; /* Light gray background */ + font-family: 'Inter', sans-serif; + color: #343a40; } -.hero { - background-image: url('https://picsum.photos/seed/wave/1200/400'); - background-size: cover; - background-position: center; - color: white; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +/* Header */ +header h1 { + font-weight: 600; } +/* Card Styles */ +.card { + border: none; + border-radius: 0.75rem; /* Softer rounded corners */ +} + +.card-title { + font-weight: 500; + color: #495057; +} + +/* Waveform Canvas */ #waveform { - display: block; width: 100%; - height: 200px; - background-color: #FFFFFF; - border-radius: 0.5rem; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + height: 150px; /* Adjusted height */ } + +.bg-light { + background-color: #e9ecef !important; +} + +/* Buttons */ +.btn { + font-weight: 500; + transition: all 0.2s ease-in-out; +} + +.btn:hover { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.btn-primary { + background-color: #0d6efd; + border-color: #0d6efd; +} + +/* Recordings List */ +#recordingsList .list-group-item { + background-color: #fff; + border: 1px solid #dee2e6; + border-radius: 0.5rem; + margin-bottom: 0.75rem; + transition: background-color 0.2s ease; +} + +#recordingsList .list-group-item:hover { + background-color: #f1f3f5; +} + +#recordingsList .btn-play { + background-color: #198754; /* Green play button */ + color: white; +} + +#recordingsList .btn-play:hover { + background-color: #157347; +} + +#recordingsList .recording-name { + font-weight: 500; +} + +/* Footer */ +footer { + font-size: 0.9rem; +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 578430f..d66a89a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -24,28 +24,32 @@ document.addEventListener('DOMContentLoaded', () => { console.log('Recordings found:', recordings); recordingsList.innerHTML = ''; if (recordings.length > 0) { - const list = document.createElement('ul'); + const list = document.createElement('div'); list.className = 'list-group'; recordings.forEach(recording => { - const listItem = document.createElement('li'); - listItem.className = 'list-group-item d-flex justify-content-between align-items-center'; - - // Extract just the filename const fileName = recording.split('/').pop(); - listItem.innerText = fileName; + const card = document.createElement('div'); + card.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center'; + + const nameSpan = document.createElement('span'); + nameSpan.className = 'recording-name'; + nameSpan.textContent = fileName; - const audio = new Audio(recording); const playBtn = document.createElement('button'); - playBtn.className = 'btn btn-primary btn-sm'; - playBtn.innerText = 'Play'; - playBtn.onclick = () => audio.play(); + playBtn.className = 'btn btn-play btn-sm rounded-pill'; + playBtn.innerHTML = ''; + playBtn.onclick = () => { + const audio = new Audio(recording); + audio.play(); + }; - listItem.appendChild(playBtn); - list.appendChild(listItem); + card.appendChild(nameSpan); + card.appendChild(playBtn); + list.appendChild(card); }); recordingsList.appendChild(list); } else { - recordingsList.innerHTML = '

No recordings yet.

'; + recordingsList.innerHTML = '

No recordings yet.

Your saved recordings will appear here.
'; } } catch (error) { console.error('Failed to load recordings:', error); @@ -76,10 +80,10 @@ document.addEventListener('DOMContentLoaded', () => { const draw = () => { animationFrameId = requestAnimationFrame(draw); analyser.getByteTimeDomainData(dataArray); - canvasCtx.fillStyle = '#F0F8FF'; + canvasCtx.fillStyle = '#e9ecef'; // Match the light background canvasCtx.fillRect(0, 0, waveformCanvas.width, waveformCanvas.height); canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = '#1E90FF'; + canvasCtx.strokeStyle = '#0d6efd'; // Primary button color canvasCtx.beginPath(); const sliceWidth = waveformCanvas.width * 1.0 / bufferLength; let x = 0; @@ -109,7 +113,6 @@ document.addEventListener('DOMContentLoaded', () => { mediaRecorder.onstop = () => { console.log('MediaRecorder stopped and onstop event fired.'); - // Stop all tracks on the stream to release the microphone if (streamReference) { streamReference.getTracks().forEach(track => track.stop()); console.log('Microphone stream tracks stopped.'); @@ -176,7 +179,6 @@ document.addEventListener('DOMContentLoaded', () => { saveRecordBtn.style.display = 'none'; loadRecordings(); } else { - // Use the error from the JSON if available, otherwise a generic message const errorMessage = data.error || 'An unknown error occurred.'; alert('Error saving recording: ' + errorMessage); console.error('Server-side save error:', errorMessage); @@ -189,4 +191,4 @@ document.addEventListener('DOMContentLoaded', () => { }); loadRecordings(); -}); \ No newline at end of file +}); diff --git a/assets/pasted-20250923-214203-80d8873e.png b/assets/pasted-20250923-214203-80d8873e.png new file mode 100644 index 0000000..e7d2d15 Binary files /dev/null and b/assets/pasted-20250923-214203-80d8873e.png differ diff --git a/index.php b/index.php index 8cf6960..2558ac6 100644 --- a/index.php +++ b/index.php @@ -7,67 +7,61 @@ - - + + + -
-

Audio Recorder & Visualizer

+
+

Audio Recorder

+

Record, visualize, and save your audio with ease.

-
-
-
-
-
-

Record and Visualize Your Audio

-

Click the button below to start recording your microphone and see the audio visualized in real-time.

- - - +
+
+ +
+
+
+
Recorder
+
+ +
+
+ + + +
-
-
-
-
+ +
+
-
Live Audio Waveform
- +
Library
+
+ +
- -
-
-
-
-
Saved Recordings
-
-
-
-
-
- -
-
- A modern microphone in a recording studio. -
-
- A collection of audio waveforms. -
-
-