Changes to showreel.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Video Showcase
+   
+     
+     
+   
+ 
+ 
+ 
+   
+     
+       
+         
+           
+           Your browser doesn't support video playback.
+         
+       
+       Cinematic Nature
+       Explore the beauty of untouched landscapes
+     
+ 
+     
+       
+         
+           
+           Your browser doesn't support video playback.
+         
+       
+       Urban Life
+       City lights and modern architecture
+     
+ 
+     
+       
+         
+           
+           Your browser doesn't support video playback.
+         
+       
+       Ocean Depths
+       Discovering marine life
+     
+ 
+     
+       
+         
+           
+           Your browser doesn't support video playback.
+         
+       
+       Mountain Peak
+       Adventures at high altitude
+     
+ 
+     
+       
+         
+           
+           Your browser doesn't support video playback.
+         
+       
+       Desert Winds
+       Sahara's golden dunes
+     
+ 
+     
+       
+         
+           
+           Your browser doesn't support video playback.
+         
+       
+       Forest Stories
+       Through ancient woodlands
+     
+   
+ 
+ 
+ 
+   Created with passion by a video enthusiast
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://showreel.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Video Showcase
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01JZM9TuKeebX16PkS8aHRAd",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll help create a website to showcase 6 videos in an elegant way.\n\nSuggested domain: showreel.scroll.pub (short, memorable, represents video content)\n\n---domain---\nshowreel.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://showreel.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Video Showcase\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Video Showcase\n  \n    \n    \n  \n\n\n\n  \n    \n      \n        \n          \n          Your browser doesn't support video playback.\n        \n      
\n      Cinematic Nature\n      Explore the beauty of untouched landscapes
\n    \n\n    \n      \n        \n          \n          Your browser doesn't support video playback.\n        \n      
\n      Urban Life\n      City lights and modern architecture
\n    \n\n    \n      \n        \n          \n          Your browser doesn't support video playback.\n        \n      
\n      Ocean Depths\n      Discovering marine life
\n    \n\n    \n      \n        \n          \n          Your browser doesn't support video playback.\n        \n      
\n      Mountain Peak\n      Adventures at high altitude
\n    \n\n    \n      \n        \n          \n          Your browser doesn't support video playback.\n        \n      
\n      Desert Winds\n      Sahara's golden dunes
\n    \n\n    \n      \n        \n          \n          Your browser doesn't support video playback.\n        \n      
\n      Forest Stories\n      Through ancient woodlands
\n    \n  
\n\n\n\n  Created with passion by a video enthusiast
\n\n---style.css---\n:root {\n  --primary-color: #2a2a2a;\n  --accent-color: #4a90e2;\n  --text-color: #333;\n  --background-color: #f5f5f5;\n  --card-background: #ffffff;\n  --transition-speed: 0.3s;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Segoe UI', system-ui, sans-serif;\n  background: var(--background-color);\n  color: var(--text-color);\n  line-height: 1.6;\n}\n\nheader {\n  background: var(--primary-color);\n  color: white;\n  padding: 2rem;\n  text-align: center;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nh1 {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n  font-weight: 300;\n}\n\nnav {\n  margin: 1rem 0;\n}\n\n.nav-btn {\n  background: transparent;\n  border: 2px solid white;\n  color: white;\n  padding: 0.5rem 1.5rem;\n  margin: 0 0.5rem;\n  border-radius: 25px;\n  cursor: pointer;\n  transition: var(--transition-speed);\n}\n\n.nav-btn.active {\n  background: white;\n  color: var(--primary-color);\n}\n\n.video-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 2rem;\n  padding: 2rem;\n  max-width: 1400px;\n  margin: 0 auto;\n}\n\n.video-card {\n  background: var(--card-background);\n  border-radius: 15px;\n  overflow: hidden;\n  box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n  transition: transform var(--transition-speed);\n}\n\n.video-card:hover {\n  transform: translateY(-5px);\n}\n\n.video-wrapper {\n  position: relative;\n  padding-top: 56.25%;\n}\n\nvideo {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.video-card h2 {\n  padding: 1rem 1rem 0.5rem;\n  font-size: 1.25rem;\n  color: var(--primary-color);\n}\n\n.video-card p {\n  padding: 0 1rem 1rem;\n  color: #666;\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: var(--primary-color);\n  color: white;\n  margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n  .video-container {\n    grid-template-columns: 1fr;\n    padding: 1rem;\n  }\n  \n  header {\n    padding: 1rem;\n  }\n  \n  h1 {\n    font-size: 2rem;\n  }\n}\n\n.list-view .video-container {\n  grid-template-columns: 1fr;\n  max-width: 800px;\n}\n\n.list-view .video-card {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1rem;\n}\n\n.list-view .video-wrapper {\n  padding-top: 28.125%;\n}\n\n@media (max-width: 600px) {\n  .list-view .video-card {\n    grid-template-columns: 1fr;\n  }\n  \n  .list-view .video-wrapper {\n    padding-top: 56.25%;\n  }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const navButtons = document.querySelectorAll('.nav-btn');\n  const main = document.querySelector('main');\n  \n  // View switching functionality\n  navButtons.forEach(button => {\n    button.addEventListener('click', () => {\n      navButtons.forEach(btn => btn.classList.remove('active'));\n      button.classList.add('active');\n      \n      if (button.dataset.view === 'list') {\n        main.classList.add('list-view');\n      } else {\n        main.classList.remove('list-view');\n      }\n    });\n  });\n  \n  // Lazy loading for videos\n  const videos = document.querySelectorAll('video');\n  const videoObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        const video = entry.target;\n        video.poster = video.poster; // Trigger poster load\n        videoObserver.unobserve(video);\n      }\n    });\n  }, {\n    rootMargin: '50px'\n  });\n  \n  videos.forEach(video => videoObserver.observe(video));\n  \n  // Smooth scroll behavior\n  document.documentElement.style.scrollBehavior = 'smooth';\n});\n---end---\n\nThis implementation features:\n\n1. Responsive grid/list layout switching\n2. Beautiful card design with hover effects\n3. Lazy loading for video elements\n4. Smooth transitions and animations\n5. Accessible navigation and semantic HTML\n6. Mobile-first approach\n7. Clean, modern design with subtle shadows and animations\n8. Proper video aspect ratio maintenance\n9. Intersection Observer for performance\n10. Flexible grid system that adapts to screen sizes\n\nThe design is both beautiful and functional, with attention to performance through lazy loading and proper resource management. The UI is intuitive and responsive, working well on all device sizes."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 276,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2384
+   }
+ }

readme.scroll

Changed around line 1

+ # showreel.scroll.pub

+ Website generated by Claude from prompt: present my 6 videos

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const navButtons = document.querySelectorAll('.nav-btn');
+   const main = document.querySelector('main');
+ 
+   // View switching functionality
+   navButtons.forEach(button => {
+     button.addEventListener('click', () => {
+       navButtons.forEach(btn => btn.classList.remove('active'));
+       button.classList.add('active');
+ 
+       if (button.dataset.view === 'list') {
+         main.classList.add('list-view');
+       } else {
+         main.classList.remove('list-view');
+       }
+     });
+   });
+ 
+   // Lazy loading for videos
+   const videos = document.querySelectorAll('video');
+   const videoObserver = new IntersectionObserver((entries) => {
+     entries.forEach(entry => {
+       if (entry.isIntersecting) {
+         const video = entry.target;
+         video.poster = video.poster; // Trigger poster load
+         videoObserver.unobserve(video);
+       }
+     });
+   }, {
+     rootMargin: '50px'
+   });
+ 
+   videos.forEach(video => videoObserver.observe(video));
+ 
+   // Smooth scroll behavior
+   document.documentElement.style.scrollBehavior = 'smooth';
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2a2a2a;
+   --accent-color: #4a90e2;
+   --text-color: #333;
+   --background-color: #f5f5f5;
+   --card-background: #ffffff;
+   --transition-speed: 0.3s;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', system-ui, sans-serif;
+   background: var(--background-color);
+   color: var(--text-color);
+   line-height: 1.6;
+ }
+ 
+ header {
+   background: var(--primary-color);
+   color: white;
+   padding: 2rem;
+   text-align: center;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   margin-bottom: 1rem;
+   font-weight: 300;
+ }
+ 
+ nav {
+   margin: 1rem 0;
+ }
+ 
+ .nav-btn {
+   background: transparent;
+   border: 2px solid white;
+   color: white;
+   padding: 0.5rem 1.5rem;
+   margin: 0 0.5rem;
+   border-radius: 25px;
+   cursor: pointer;
+   transition: var(--transition-speed);
+ }
+ 
+ .nav-btn.active {
+   background: white;
+   color: var(--primary-color);
+ }
+ 
+ .video-container {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 2rem;
+   padding: 2rem;
+   max-width: 1400px;
+   margin: 0 auto;
+ }
+ 
+ .video-card {
+   background: var(--card-background);
+   border-radius: 15px;
+   overflow: hidden;
+   box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+   transition: transform var(--transition-speed);
+ }
+ 
+ .video-card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .video-wrapper {
+   position: relative;
+   padding-top: 56.25%;
+ }
+ 
+ video {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   object-fit: cover;
+ }
+ 
+ .video-card h2 {
+   padding: 1rem 1rem 0.5rem;
+   font-size: 1.25rem;
+   color: var(--primary-color);
+ }
+ 
+ .video-card p {
+   padding: 0 1rem 1rem;
+   color: #666;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: var(--primary-color);
+   color: white;
+   margin-top: 2rem;
+ }
+ 
+ @media (max-width: 768px) {
+   .video-container {
+     grid-template-columns: 1fr;
+     padding: 1rem;
+   }
+ 
+   header {
+     padding: 1rem;
+   }
+ 
+   h1 {
+     font-size: 2rem;
+   }
+ }
+ 
+ .list-view .video-container {
+   grid-template-columns: 1fr;
+   max-width: 800px;
+ }
+ 
+ .list-view .video-card {
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 1rem;
+ }
+ 
+ .list-view .video-wrapper {
+   padding-top: 28.125%;
+ }
+ 
+ @media (max-width: 600px) {
+   .list-view .video-card {
+     grid-template-columns: 1fr;
+   }
+ 
+   .list-view .video-wrapper {
+     padding-top: 56.25%;
+   }
+ }