commit 5b892eb70aad895a2354e302c91aac9790cc2879
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 22:05:46 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..81bb271
--- /dev/null
+++ b/body.html
@@ -0,0 +1,31 @@
+<header>
+ <h1>PosturePro</h1>
+ <p>Your AI-powered posture coach</p>
+</header>
+
+<main>
+ <section id="camera-section">
+ <div class="camera-container">
+ <video id="webcam" autoplay playsinline></video>
+ <canvas id="posture-canvas" class="overlay"></canvas>
+ </div>
+ <div class="status-container">
+ <div id="status" class="status-good">Good Posture</div>
+ <div id="warning" class="warning-hidden">⚠️ Adjust your posture!</div>
+ </div>
+ </section>
+
+ <section id="tips">
+ <h2>Posture Tips</h2>
+ <ul>
+ <li>Keep your back straight</li>
+ <li>Align your ears with your shoulders</li>
+ <li>Keep your feet flat on the floor</li>
+ <li>Position your screen at eye level</li>
+ </ul>
+ </section>
+</main>
+
+<footer>
+ <p>Take care of your posture, take care of your health</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..74ad933
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://posturepro.scroll.pub
+metaTags
+editButton /edit.html
+title PosturePro - Improve Your Sitting Posture with AI
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..ace0d5a
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "6ab9f1bd-ac33-4803-8dd7-0b31e87b62d5",
+ "object": "chat.completion",
+ "created": 1735423528,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nposturepro.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://posturepro.scroll.pub\nmetaTags\neditButton /edit.html\ntitle PosturePro - Improve Your Sitting Posture with AI\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>PosturePro</h1>\n <p>Your AI-powered posture coach</p>\n</header>\n\n<main>\n <section id=\"camera-section\">\n <div class=\"camera-container\">\n <video id=\"webcam\" autoplay playsinline></video>\n <canvas id=\"posture-canvas\" class=\"overlay\"></canvas>\n </div>\n <div class=\"status-container\">\n <div id=\"status\" class=\"status-good\">Good Posture</div>\n <div id=\"warning\" class=\"warning-hidden\">⚠️ Adjust your posture!</div>\n </div>\n </section>\n\n <section id=\"tips\">\n <h2>Posture Tips</h2>\n <ul>\n <li>Keep your back straight</li>\n <li>Align your ears with your shoulders</li>\n <li>Keep your feet flat on the floor</li>\n <li>Position your screen at eye level</li>\n </ul>\n </section>\n</main>\n\n<footer>\n <p>Take care of your posture, take care of your health</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #4a90e2;\n --warning-color: #ff4757;\n --success-color: #2ed573;\n --text-color: #2f3542;\n --bg-color: #f1f2f6;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n color: var(--text-color);\n background-color: var(--bg-color);\n margin: 0;\n padding: 0;\n line-height: 1.6;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n background-color: var(--primary-color);\n color: white;\n}\n\nh1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\nmain {\n max-width: 800px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.camera-container {\n position: relative;\n width: 100%;\n max-width: 640px;\n margin: 0 auto;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nvideo, canvas {\n width: 100%;\n display: block;\n}\n\n.overlay {\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.status-container {\n margin: 1rem 0;\n text-align: center;\n}\n\n#status {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--success-color);\n}\n\n#warning {\n color: var(--warning-color);\n font-weight: bold;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.warning-visible {\n opacity: 1;\n}\n\n#tips {\n margin-top: 2rem;\n background: white;\n padding: 1.5rem;\n border-radius: 12px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background-color: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2rem;\n }\n \n .camera-container {\n border-radius: 8px;\n }\n}\n---script.js---\n// Get video element\nconst video = document.getElementById('webcam');\nconst canvas = document.getElementById('posture-canvas');\nconst ctx = canvas.getContext('2d');\nconst statusText = document.getElementById('status');\nconst warningText = document.getElementById('warning');\n\n// Camera setup\nasync function setupCamera() {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ video: true });\n video.srcObject = stream;\n video.onloadedmetadata = () => {\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n processPosture();\n };\n } catch (error) {\n console.error('Error accessing webcam:', error);\n }\n}\n\n// Posture processing\nfunction processPosture() {\n // Draw video frame to canvas\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n \n // Basic posture detection (placeholder logic)\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const brightness = calculateAverageBrightness(imageData);\n \n // Simple posture check based on brightness (example logic)\n if (brightness < 100) {\n statusText.textContent = \"Poor Posture\";\n statusText.style.color = \"var(--warning-color)\";\n warningText.classList.add('warning-visible');\n } else {\n statusText.textContent = \"Good Posture\";\n statusText.style.color = \"var(--success-color)\";\n warningText.classList.remove('warning-visible');\n }\n \n // Repeat processing\n requestAnimationFrame(processPosture);\n}\n\n// Helper function to calculate brightness\nfunction calculateAverageBrightness(imageData) {\n let total = 0;\n const data = imageData.data;\n \n for (let i = 0; i < data.length; i += 4) {\n total += (data[i] + data[i+1] + data[i+2]) / 3;\n }\n \n return total / (data.length / 4);\n}\n\n// Initialize\nsetupCamera();\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 258,
+ "completion_tokens": 1312,
+ "total_tokens": 1570,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 258
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..18891d9
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# posturepro.scroll.pub
+Website generated by DeepSeek from prompt: Design a minimalistic and user-friendly web application that leverages computer vision to promote better sitting posters using webcam and give warning
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..890f92e
--- /dev/null
+++ b/script.js
@@ -0,0 +1,60 @@
+// Get video element
+const video = document.getElementById('webcam');
+const canvas = document.getElementById('posture-canvas');
+const ctx = canvas.getContext('2d');
+const statusText = document.getElementById('status');
+const warningText = document.getElementById('warning');
+
+// Camera setup
+async function setupCamera() {
+ try {
+ const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+ video.srcObject = stream;
+ video.onloadedmetadata = () => {
+ canvas.width = video.videoWidth;
+ canvas.height = video.videoHeight;
+ processPosture();
+ };
+ } catch (error) {
+ console.error('Error accessing webcam:', error);
+ }
+}
+
+// Posture processing
+function processPosture() {
+ // Draw video frame to canvas
+ ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+ // Basic posture detection (placeholder logic)
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ const brightness = calculateAverageBrightness(imageData);
+
+ // Simple posture check based on brightness (example logic)
+ if (brightness < 100) {
+ statusText.textContent = "Poor Posture";
+ statusText.style.color = "var(--warning-color)";
+ warningText.classList.add('warning-visible');
+ } else {
+ statusText.textContent = "Good Posture";
+ statusText.style.color = "var(--success-color)";
+ warningText.classList.remove('warning-visible');
+ }
+
+ // Repeat processing
+ requestAnimationFrame(processPosture);
+}
+
+// Helper function to calculate brightness
+function calculateAverageBrightness(imageData) {
+ let total = 0;
+ const data = imageData.data;
+
+ for (let i = 0; i < data.length; i += 4) {
+ total += (data[i] + data[i+1] + data[i+2]) / 3;
+ }
+
+ return total / (data.length / 4);
+}
+
+// Initialize
+setupCamera();
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b6f07b4
--- /dev/null
+++ b/style.css
@@ -0,0 +1,103 @@
+:root {
+ --primary-color: #4a90e2;
+ --warning-color: #ff4757;
+ --success-color: #2ed573;
+ --text-color: #2f3542;
+ --bg-color: #f1f2f6;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ color: var(--text-color);
+ background-color: var(--bg-color);
+ margin: 0;
+ padding: 0;
+ line-height: 1.6;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ background-color: var(--primary-color);
+ color: white;
+}
+
+h1 {
+ margin: 0;
+ font-size: 2.5rem;
+}
+
+main {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+}
+
+.camera-container {
+ position: relative;
+ width: 100%;
+ max-width: 640px;
+ margin: 0 auto;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+video, canvas {
+ width: 100%;
+ display: block;
+}
+
+.overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.status-container {
+ margin: 1rem 0;
+ text-align: center;
+}
+
+#status {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--success-color);
+}
+
+#warning {
+ color: var(--warning-color);
+ font-weight: bold;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.warning-visible {
+ opacity: 1;
+}
+
+#tips {
+ margin-top: 2rem;
+ background: white;
+ padding: 1.5rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ background-color: var(--primary-color);
+ color: white;
+ margin-top: 2rem;
+}
+
+@media (max-width: 600px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .camera-container {
+ border-radius: 8px;
+ }
+}
\ No newline at end of file