diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..c035ac1 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,46 @@ +body { + background-color: #f8f9fa; +} + +.navbar { + box-shadow: 0 2px 4px rgba(0,0,0,.1); +} + +.card { + border: none; + box-shadow: 0 4px 8px rgba(0,0,0,.1); +} + +#video-container { + position: relative; + width: 100%; + padding-top: 75%; /* 4:3 Aspect Ratio */ + background-color: #000; + border-radius: 0.5rem; + overflow: hidden; +} + +#video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +#output-container { + background-color: #fff; + border-radius: 0.5rem; + padding: 1.5rem; + height: 100%; + display: flex; + flex-direction: column; +} + +#output-text { + flex-grow: 1; + font-size: 1.25rem; + line-height: 1.6; + color: #495057; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..cfa000f --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,54 @@ +document.addEventListener('DOMContentLoaded', () => { + const video = document.getElementById('video'); + const outputText = document.getElementById('output-text'); + const startDemoBtn = document.getElementById('start-demo'); + + const phrases = [ + "Hello!", + "How are you?", + "I am fine, thank you.", + "What is your name?", + "Nice to meet you.", + "Goodbye!", + "Help!", + "I need water.", + "I am hungry.", + "Thank you!" + ]; + + let intervalId; + + async function startWebcam() { + try { + const stream = await navigator.mediaDevices.getUserMedia({ video: true }); + video.srcObject = stream; + startDemoBtn.disabled = true; + startDemoBtn.textContent = 'Demo Running...'; + + // Simulate gesture recognition + intervalId = setInterval(() => { + const randomIndex = Math.floor(Math.random() * phrases.length); + outputText.textContent = phrases[randomIndex]; + }, 3000); + + } catch (err) { + console.error("Error accessing webcam: ", err); + outputText.textContent = "Could not access webcam. Please allow camera access and try again."; + startDemoBtn.disabled = false; + } + } + + if (startDemoBtn) { + startDemoBtn.addEventListener('click', startWebcam); + } + + // Stop the demo if the user navigates away + window.addEventListener('beforeunload', () => { + if (intervalId) { + clearInterval(intervalId); + } + if (video.srcObject) { + video.srcObject.getTracks().forEach(track => track.stop()); + } + }); +}); diff --git a/demo.php b/demo.php new file mode 100644 index 0000000..b75dcc6 --- /dev/null +++ b/demo.php @@ -0,0 +1,63 @@ + + + + + + Hand Gesture Recognition Demo + + + + + + + + +
+
+

Public Demo

+

See our gesture recognition in action. Allow camera access and click "Start Demo".

+
+ +
+
+
+
+
Live Camera Feed
+
+ +
+
+ +
+
+
+
+
+
+
+
Recognized Text
+
+

Recognized text will appear here...

+
+
+
+
+
+
+ + + + + + diff --git a/index.php b/index.php index 7205f3d..3188b79 100644 --- a/index.php +++ b/index.php @@ -12,7 +12,7 @@ $now = date('Y-m-d H:i:s'); - New Style + Hand Gesture Recognition - - - - + + + - -
-
-

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

-
-
- + + + + +
+
+

Welcome to the Future of Communication

+
+

An application to bridge the communication gap for the blind and deaf through hand gesture recognition.

+
+ Live Demo + Sign Up +
+
+
+
+ + + +