Changes to snapframe.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     SnapFrame
+     
+   
+ 
+ 
+ 
+   
+     
+     
+     
+ 
+     
+       
+       
+       
+     
+   
+ 
+   
+     Your Photos
+     
+   
+ 
+ 
+ 
+   Made with ❤️ by SnapFrame
+   
+     Privacy
+     About
+     Help
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://snapframe.scroll.pub
+ metaTags
+ editButton /edit.html
+ title SnapFrame - Web Camera with Beautiful Frames
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  \n    SnapFrame\n    \n  \n\n\n\n  \n    \n    \n    
\n    \n    \n      \n      \n      \n    
\n  
\n\n  \n    Your Photos\n    
\n  
\n\n\n\n  Made with ❤️ by SnapFrame
\n  \n    Privacy\n    About\n    Help\n  \n\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
+   }
+ }

readme.scroll

Changed around line 1

+ # 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

script.js

Changed around line 1
+ 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);
+ });

style.css

Changed around line 1
+ :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;
+   }
+ }