commit cf1821ced3e7fc8b0a0ad838ef39e9abb5686c4c
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 09:38:27 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..8f0f54e
--- /dev/null
+++ b/body.html
@@ -0,0 +1,34 @@
+<header>
+ <nav>
+ <h1>SnapFrame</h1>
+ <button class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
+ </nav>
+</header>
+
+<main>
+ <div class="camera-container">
+ <video id="camera" autoplay playsinline></video>
+ <canvas id="canvas" class="hidden"></canvas>
+ <div id="frame-overlay"></div>
+
+ <div class="controls">
+ <button id="switchCamera" aria-label="Switch camera">🔄</button>
+ <button id="captureBtn" aria-label="Take photo">📸</button>
+ <button id="frameBtn" aria-label="Change frame">🖼️</button>
+ </div>
+ </div>
+
+ <div class="gallery" id="gallery">
+ <h2>Your Photos</h2>
+ <div class="photos-grid" id="photosGrid"></div>
+ </div>
+</main>
+
+<footer>
+ <p>Made with ❤️ by SnapFrame</p>
+ <nav>
+ <a href="#privacy">Privacy</a>
+ <a href="#about">About</a>
+ <a href="#help">Help</a>
+ </nav>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..7137eb1
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://snapframe.scroll.pub
+metaTags
+editButton /edit.html
+title SnapFrame - Web Camera with Beautiful Frames
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..5abebff
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01N4iumBg6Fq2Lu73rr1RmW2",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a camera web app with the requested specifications.\n\n---domain---\nsnapframe.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://snapframe.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SnapFrame - Web Camera with Beautiful Frames\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <h1>SnapFrame</h1>\n <button class=\"theme-toggle\" aria-label=\"Toggle dark mode\">🌙</button>\n </nav>\n</header>\n\n<main>\n <div class=\"camera-container\">\n <video id=\"camera\" autoplay playsinline></video>\n <canvas id=\"canvas\" class=\"hidden\"></canvas>\n <div id=\"frame-overlay\"></div>\n \n <div class=\"controls\">\n <button id=\"switchCamera\" aria-label=\"Switch camera\">🔄</button>\n <button id=\"captureBtn\" aria-label=\"Take photo\">📸</button>\n <button id=\"frameBtn\" aria-label=\"Change frame\">🖼️</button>\n </div>\n </div>\n\n <div class=\"gallery\" id=\"gallery\">\n <h2>Your Photos</h2>\n <div class=\"photos-grid\" id=\"photosGrid\"></div>\n </div>\n</main>\n\n<footer>\n <p>Made with ❤️ by SnapFrame</p>\n <nav>\n <a href=\"#privacy\">Privacy</a>\n <a href=\"#about\">About</a>\n <a href=\"#help\">Help</a>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a6bf2;\n --secondary: #1a1b4b;\n --background: #ffffff;\n --text: #333333;\n --shadow: rgba(0,0,0,0.1);\n}\n\n.dark-mode {\n --primary: #4d82f4;\n --secondary: #2a2b5b;\n --background: #121212;\n --text: #ffffff;\n --shadow: rgba(255,255,255,0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--background);\n color: var(--text);\n transition: all 0.3s ease;\n}\n\nheader {\n padding: 1rem;\n background: var(--secondary);\n box-shadow: 0 2px 8px var(--shadow);\n}\n\nheader nav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\nh1 {\n color: #fff;\n font-size: 1.5rem;\n}\n\n.camera-container {\n position: relative;\n max-width: 600px;\n margin: 2rem auto;\n aspect-ratio: 3/4;\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 4px 20px var(--shadow);\n}\n\n#camera, #canvas {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.hidden {\n display: none;\n}\n\n#frame-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 2;\n}\n\n.controls {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 1rem;\n z-index: 3;\n}\n\nbutton {\n padding: 1rem;\n border: none;\n border-radius: 50%;\n background: var(--primary);\n color: white;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\nbutton:hover {\n transform: scale(1.1);\n}\n\n#captureBtn {\n font-size: 1.5rem;\n}\n\n.gallery {\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.photos-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.photo-item {\n border-radius: 10px;\n overflow: hidden;\n aspect-ratio: 3/4;\n cursor: pointer;\n transition: transform 0.3s;\n}\n\n.photo-item:hover {\n transform: scale(1.05);\n}\n\n.photo-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\nfooter {\n background: var(--secondary);\n color: white;\n padding: 2rem;\n margin-top: 2rem;\n text-align: center;\n}\n\nfooter nav {\n margin-top: 1rem;\n}\n\nfooter a {\n color: white;\n text-decoration: none;\n margin: 0 1rem;\n}\n\n@media (max-width: 768px) {\n .camera-container {\n margin: 1rem;\n }\n \n .gallery {\n padding: 1rem;\n }\n}\n\n---script.js---\nlet stream;\nlet currentCamera = 'user';\nconst frames = [\n 'url(\"data:image/svg+xml,%3Csvg width=\\'100%25\\' height=\\'100%25\\' xmlns=\\'http://www.w3.org/2000/svg\\'%3E%3Crect width=\\'100%25\\' height=\\'100%25\\' fill=\\'none\\' stroke=\\'white\\' stroke-width=\\'4\\' stroke-dasharray=\\'20,20\\' /%3E%3C/svg%3E\")',\n 'url(\"data:image/svg+xml,%3Csvg width=\\'100%25\\' height=\\'100%25\\' xmlns=\\'http://www.w3.org/2000/svg\\'%3E%3Crect width=\\'100%25\\' height=\\'100%25\\' fill=\\'none\\' stroke=\\'gold\\' stroke-width=\\'8\\' rx=\\'20\\' /%3E%3C/svg%3E\")',\n 'none'\n];\nlet currentFrame = 0;\n\nasync function initCamera() {\n try {\n stream = await navigator.mediaDevices.getUserMedia({\n video: { facingMode: currentCamera }\n });\n document.getElementById('camera').srcObject = stream;\n } catch (err) {\n console.error('Camera error:', err);\n alert('Unable to access camera. Please check permissions.');\n }\n}\n\nfunction switchCamera() {\n if (stream) {\n stream.getTracks().forEach(track => track.stop());\n currentCamera = currentCamera === 'user' ? 'environment' : 'user';\n initCamera();\n }\n}\n\nfunction capturePhoto() {\n const video = document.getElementById('camera');\n const canvas = document.getElementById('canvas');\n const context = canvas.getContext('2d');\n \n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n \n context.drawImage(video, 0, 0);\n \n const frame = document.getElementById('frame-overlay');\n if (frame.style.backgroundImage) {\n context.drawImage(frame, 0, 0);\n }\n \n const photo = canvas.toDataURL('image/jpeg');\n addToGallery(photo);\n}\n\nfunction addToGallery(photoUrl) {\n const grid = document.getElementById('photosGrid');\n const photoDiv = document.createElement('div');\n photoDiv.className = 'photo-item';\n \n const img = document.createElement('img');\n img.src = photoUrl;\n img.alt = 'Captured photo';\n \n photoDiv.appendChild(img);\n grid.insertBefore(photoDiv, grid.firstChild);\n}\n\nfunction changeFrame() {\n currentFrame = (currentFrame + 1) % frames.length;\n document.getElementById('frame-overlay').style.backgroundImage = frames[currentFrame];\n}\n\nfunction toggleTheme() {\n document.body.classList.toggle('dark-mode');\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n initCamera();\n \n document.getElementById('switchCamera').addEventListener('click', switchCamera);\n document.getElementById('captureBtn').addEventListener('click', capturePhoto);\n document.getElementById('frameBtn').addEventListener('click', changeFrame);\n document.querySelector('.theme-toggle').addEventListener('click', toggleTheme);\n});\n\n---end---\n\nThis creates a modern, responsive camera web app with the following features:\n- Camera capture with front/back camera switching\n- Decorative frames that can be cycled through\n- Photo gallery of captured images\n- Dark/light mode toggle\n- Responsive design that works on mobile and desktop\n- Accessible controls with ARIA labels\n- Clean, semantic HTML structure\n- Modern CSS with variables and transitions\n- No external dependencies\n- Built-in frames using SVG data URLs\n- Professional styling with animations and hover effects\n\nThe domain name \"snapframe\" is memorable and describes the core functionality - taking photos with frames."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 289,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2409
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..092e624
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# snapframe.scroll.pub
+Website generated by Claude from prompt: Create a website that can be used for taking photos like a camera app with frames and stuffs
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..6b141b1
--- /dev/null
+++ b/script.js
@@ -0,0 +1,78 @@
+let stream;
+let currentCamera = 'user';
+const frames = [
+ 'url("data:image/svg+xml,%3Csvg width=\'100%25\' height=\'100%25\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'100%25\' height=\'100%25\' fill=\'none\' stroke=\'white\' stroke-width=\'4\' stroke-dasharray=\'20,20\' /%3E%3C/svg%3E")',
+ 'url("data:image/svg+xml,%3Csvg width=\'100%25\' height=\'100%25\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'100%25\' height=\'100%25\' fill=\'none\' stroke=\'gold\' stroke-width=\'8\' rx=\'20\' /%3E%3C/svg%3E")',
+ 'none'
+];
+let currentFrame = 0;
+
+async function initCamera() {
+ try {
+ stream = await navigator.mediaDevices.getUserMedia({
+ video: { facingMode: currentCamera }
+ });
+ document.getElementById('camera').srcObject = stream;
+ } catch (err) {
+ console.error('Camera error:', err);
+ alert('Unable to access camera. Please check permissions.');
+ }
+}
+
+function switchCamera() {
+ if (stream) {
+ stream.getTracks().forEach(track => track.stop());
+ currentCamera = currentCamera === 'user' ? 'environment' : 'user';
+ initCamera();
+ }
+}
+
+function capturePhoto() {
+ const video = document.getElementById('camera');
+ const canvas = document.getElementById('canvas');
+ const context = canvas.getContext('2d');
+
+ canvas.width = video.videoWidth;
+ canvas.height = video.videoHeight;
+
+ context.drawImage(video, 0, 0);
+
+ const frame = document.getElementById('frame-overlay');
+ if (frame.style.backgroundImage) {
+ context.drawImage(frame, 0, 0);
+ }
+
+ const photo = canvas.toDataURL('image/jpeg');
+ addToGallery(photo);
+}
+
+function addToGallery(photoUrl) {
+ const grid = document.getElementById('photosGrid');
+ const photoDiv = document.createElement('div');
+ photoDiv.className = 'photo-item';
+
+ const img = document.createElement('img');
+ img.src = photoUrl;
+ img.alt = 'Captured photo';
+
+ photoDiv.appendChild(img);
+ grid.insertBefore(photoDiv, grid.firstChild);
+}
+
+function changeFrame() {
+ currentFrame = (currentFrame + 1) % frames.length;
+ document.getElementById('frame-overlay').style.backgroundImage = frames[currentFrame];
+}
+
+function toggleTheme() {
+ document.body.classList.toggle('dark-mode');
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ initCamera();
+
+ document.getElementById('switchCamera').addEventListener('click', switchCamera);
+ document.getElementById('captureBtn').addEventListener('click', capturePhoto);
+ document.getElementById('frameBtn').addEventListener('click', changeFrame);
+ document.querySelector('.theme-toggle').addEventListener('click', toggleTheme);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..47bc228
--- /dev/null
+++ b/style.css
@@ -0,0 +1,164 @@
+:root {
+ --primary: #2a6bf2;
+ --secondary: #1a1b4b;
+ --background: #ffffff;
+ --text: #333333;
+ --shadow: rgba(0,0,0,0.1);
+}
+
+.dark-mode {
+ --primary: #4d82f4;
+ --secondary: #2a2b5b;
+ --background: #121212;
+ --text: #ffffff;
+ --shadow: rgba(255,255,255,0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--background);
+ color: var(--text);
+ transition: all 0.3s ease;
+}
+
+header {
+ padding: 1rem;
+ background: var(--secondary);
+ box-shadow: 0 2px 8px var(--shadow);
+}
+
+header nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+h1 {
+ color: #fff;
+ font-size: 1.5rem;
+}
+
+.camera-container {
+ position: relative;
+ max-width: 600px;
+ margin: 2rem auto;
+ aspect-ratio: 3/4;
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: 0 4px 20px var(--shadow);
+}
+
+#camera, #canvas {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.hidden {
+ display: none;
+}
+
+#frame-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 2;
+}
+
+.controls {
+ position: absolute;
+ bottom: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 1rem;
+ z-index: 3;
+}
+
+button {
+ padding: 1rem;
+ border: none;
+ border-radius: 50%;
+ background: var(--primary);
+ color: white;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+button:hover {
+ transform: scale(1.1);
+}
+
+#captureBtn {
+ font-size: 1.5rem;
+}
+
+.gallery {
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.photos-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.photo-item {
+ border-radius: 10px;
+ overflow: hidden;
+ aspect-ratio: 3/4;
+ cursor: pointer;
+ transition: transform 0.3s;
+}
+
+.photo-item:hover {
+ transform: scale(1.05);
+}
+
+.photo-item img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+footer {
+ background: var(--secondary);
+ color: white;
+ padding: 2rem;
+ margin-top: 2rem;
+ text-align: center;
+}
+
+footer nav {
+ margin-top: 1rem;
+}
+
+footer a {
+ color: white;
+ text-decoration: none;
+ margin: 0 1rem;
+}
+
+@media (max-width: 768px) {
+ .camera-container {
+ margin: 1rem;
+ }
+
+ .gallery {
+ padding: 1rem;
+ }
+}