diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..1bc8c18 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,61 @@ +:root { + --primary-color: #6A5ACD; /* SlateBlue */ + --secondary-color: #48D1CC; /* MediumTurquoise */ + --background-color: #F5F5F5; /* WhiteSmoke */ + --surface-color: #FFFFFF; + --text-color: #333333; + --border-radius: 8px; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + background-color: var(--background-color); + color: var(--text-color); +} + +h1 { + color: var(--primary-color); + font-weight: 700; +} + +.card { + border-radius: var(--border-radius); + border: none; + background-color: var(--surface-color); +} + +#visualizer { + width: 100%; + height: auto; + background-color: #f8f9fa; + border-radius: var(--border-radius); +} + +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); + border-radius: var(--border-radius); + padding: 0.75rem 1.5rem; + font-weight: 700; + transition: background-color 0.3s ease, transform 0.2s ease; +} + +.btn-primary:hover { + background-color: #5948c1; /* Darker SlateBlue */ + border-color: #5948c1; + transform: translateY(-2px); +} + +.btn-primary:focus, .btn-primary.focus { + box-shadow: 0 0 0 0.2rem rgba(106, 90, 205, 0.5); +} + +.btn-primary:disabled { + background-color: #b5a9e8; + border-color: #b5a9e8; +} + +#status { + color: #6c757d; + min-height: 24px; +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..88d9d2c --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,97 @@ +document.addEventListener('DOMContentLoaded', () => { + const startButton = document.getElementById('startButton'); + const canvas = document.getElementById('visualizer'); + const statusEl = document.getElementById('status'); + const canvasCtx = canvas.getContext('2d'); + + let audioContext; + let analyser; + let dataArray; + let bufferLength; + let animationFrameId; + let isVisualizing = false; + + const draw = () => { + animationFrameId = requestAnimationFrame(draw); + + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = '#f8f9fa'; // Light gray background + canvasCtx.fillRect(0, 0, canvas.width, canvas.height); + + const gradient = canvasCtx.createLinearGradient(0, 0, canvas.width, 0); + gradient.addColorStop(0, '#6A5ACD'); // SlateBlue + gradient.addColorStop(1, '#48D1CC'); // MediumTurquoise + canvasCtx.strokeStyle = gradient; + + canvasCtx.lineWidth = 3; + canvasCtx.beginPath(); + + const sliceWidth = canvas.width * 1.0 / bufferLength; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + const v = dataArray[i] / 128.0; + const y = v * canvas.height / 2; + + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height / 2); + canvasCtx.stroke(); + }; + + const startVisualization = async () => { + if (isVisualizing) return; + + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); + + audioContext = new (window.AudioContext || window.webkitAudioContext)(); + analyser = audioContext.createAnalyser(); + + const source = audioContext.createMediaStreamSource(stream); + source.connect(analyser); + + analyser.fftSize = 2048; + bufferLength = analyser.frequencyBinCount; + dataArray = new Uint8Array(bufferLength); + + canvasCtx.clearRect(0, 0, canvas.width, canvas.height); + + isVisualizing = true; + startButton.disabled = true; + startButton.innerHTML = ` + + + + Visualizing...`; + statusEl.textContent = 'Your voice is being visualized in real-time.'; + + draw(); + + } catch (err) { + console.error('Error accessing microphone:', err); + statusEl.textContent = 'Could not access microphone. Please check permissions and try again.'; + statusEl.style.color = 'red'; + } + }; + + startButton.addEventListener('click', startVisualization); + + // Clean up on page unload + window.addEventListener('beforeunload', () => { + if (audioContext) { + audioContext.close(); + } + if (animationFrameId) { + cancelAnimationFrame(animationFrameId); + } + }); +}); \ No newline at end of file diff --git a/index.php b/index.php index 6f7ffab..df8b28f 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,43 @@ - - + - - - New Style - - - - + + + Real-time Voice Visualizer + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + +
+

Voice Visualizer

+
+ +
+
+
+ +

Click the button to start visualizing your voice.

+ +
+
+
+ + + + - + \ No newline at end of file