Changes to showcase1.scroll.pub

root

14 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     
+       
+       Your browser does not support the video tag.
+     
+   
+ 
+ 
+ 
+   
+     
+   
+ 
+   
+     
+       Project One
+       Project Two
+       Project Three
+     
+   
+ 
+   
+     
+       
+         
+       
+       
+         
+       
+     
+   
+ 
+   
+     
+       ×
+       
+         
+         Your browser does not support the video tag.
+       
+       View Original
+     
+   
+ 

index.scroll

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

prompt.json

Changed around line 1
+ {
+   "id": "711ad0df-a608-4b58-9f62-8c33ecc61bdf",
+   "object": "chat.completion",
+   "created": 1736284880,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nshowcase.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://showcase.scroll.pub\nmetaTags\neditButton /edit.html\ntitle My Work Showcase\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  \n    \n      \n      Your browser does not support the video tag.\n    \n  
\n\n\n\n  \n    \n  
\n\n  \n    \n      Project One\n      Project Two\n      Project Three\n    
\n  \n\n  \n    \n      \n        \n      
\n      \n        \n      
\n    
\n  \n\n  \n    \n      ×\n      \n        \n        Your browser does not support the video tag.\n      \n      View Original\n    
\n  
\n\n---style.css---\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml, body {\n  height: 100%;\n  overflow: hidden;\n}\n\nheader {\n  height: 100vh;\n  position: relative;\n}\n\n.video-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n#landingVideo {\n  min-width: 100%;\n  min-height: 100%;\n  object-fit: cover;\n}\n\n.home-indicator {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  z-index: 1000;\n  cursor: pointer;\n}\n\n.home-indicator img {\n  width: 40px;\n  height: 40px;\n}\n\n.hidden {\n  display: none;\n}\n\n.project-titles {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n}\n\n.project-title {\n  font-size: 3rem;\n  color: white;\n  margin: 20px 0;\n  cursor: pointer;\n  transition: transform 0.3s ease;\n}\n\n.project-title:hover {\n  transform: scale(1.1);\n}\n\n.grid-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 20px;\n  padding: 20px;\n}\n\n.grid-item {\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n}\n\n.grid-item img {\n  width: 100%;\n  height: auto;\n  transition: transform 0.3s ease;\n}\n\n.grid-item:hover img {\n  transform: scale(1.05);\n}\n\n.modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.9);\n  z-index: 1001;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.modal-content {\n  position: relative;\n  max-width: 90%;\n  max-height: 90%;\n}\n\n.close {\n  position: absolute;\n  top: 10px;\n  right: 20px;\n  color: white;\n  font-size: 2rem;\n  cursor: pointer;\n}\n\n#modalVideo {\n  max-width: 100%;\n  max-height: 80vh;\n}\n\n#videoLink {\n  display: block;\n  color: white;\n  text-align: center;\n  margin-top: 10px;\n}\n\n@media (max-width: 768px) {\n  .project-title {\n    font-size: 2rem;\n  }\n  \n  .grid-container {\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n  const landingVideo = document.getElementById('landingVideo');\n  const homeButton = document.getElementById('homeButton');\n  const projectsSection = document.getElementById('projects');\n  const projectContents = document.querySelectorAll('.project-content');\n  const projectTitles = document.querySelectorAll('.project-title');\n  const gridItems = document.querySelectorAll('.grid-item');\n  const videoModal = document.getElementById('videoModal');\n  const modalVideo = document.getElementById('modalVideo');\n  const videoLink = document.getElementById('videoLink');\n  const closeModal = document.querySelector('.close');\n\n  // Landing page click handler\n  landingVideo.addEventListener('click', function() {\n    landingVideo.classList.add('hidden');\n    projectsSection.classList.remove('hidden');\n  });\n\n  // Home button click handler\n  homeButton.addEventListener('click', function() {\n    projectsSection.classList.add('hidden');\n    projectContents.forEach(content => content.classList.add('hidden'));\n    landingVideo.classList.remove('hidden');\n  });\n\n  // Project title click handlers\n  projectTitles.forEach(title => {\n    title.addEventListener('click', function() {\n      const target = this.dataset.target;\n      projectsSection.classList.add('hidden');\n      document.getElementById(target).classList.remove('hidden');\n    });\n  });\n\n  // Grid item click handlers\n  gridItems.forEach(item => {\n    item.addEventListener('click', function() {\n      const videoSrc = this.dataset.video;\n      modalVideo.src = videoSrc;\n      videoLink.href = videoSrc;\n      videoModal.classList.remove('hidden');\n      modalVideo.play();\n    });\n  });\n\n  // Close modal handler\n  closeModal.addEventListener('click', function() {\n    videoModal.classList.add('hidden');\n    modalVideo.pause();\n    modalVideo.currentTime = 0;\n  });\n\n  // Close modal when clicking outside\n  window.addEventListener('click', function(event) {\n    if (event.target === videoModal) {\n      videoModal.classList.add('hidden');\n      modalVideo.pause();\n      modalVideo.currentTime = 0;\n    }\n  });\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 393,
+     "completion_tokens": 1513,
+     "total_tokens": 1906,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 393
+   },
+   "system_fingerprint": "fp_3a5770e1b4"
+ }

readme.scroll

Changed around line 1

+ # showcase1.scroll.pub

+ Website generated by DeepSeek from prompt: i want to make a website to showcase my work, i want the site to start with a landing page that displays a full window size video / gif looping that once clicked on would navigate to the next page showing titles that animate when hovered over. once those titles are clicked on it navigates to another page. the whole time there is small home indicator on the bottom right corner of screen that goes back to initial page whenever clicked, it would be a png overlay. the pages that the titles would lead to would have a grid layout of images that would lead to a video player popout within the same page with a small link on the bottom to original video and an "x" indicator on the top right hand side to exit the playback. (only when a video is clicked)

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+   const landingVideo = document.getElementById('landingVideo');
+   const homeButton = document.getElementById('homeButton');
+   const projectsSection = document.getElementById('projects');
+   const projectContents = document.querySelectorAll('.project-content');
+   const projectTitles = document.querySelectorAll('.project-title');
+   const gridItems = document.querySelectorAll('.grid-item');
+   const videoModal = document.getElementById('videoModal');
+   const modalVideo = document.getElementById('modalVideo');
+   const videoLink = document.getElementById('videoLink');
+   const closeModal = document.querySelector('.close');
+ 
+   // Landing page click handler
+   landingVideo.addEventListener('click', function() {
+     landingVideo.classList.add('hidden');
+     projectsSection.classList.remove('hidden');
+   });
+ 
+   // Home button click handler
+   homeButton.addEventListener('click', function() {
+     projectsSection.classList.add('hidden');
+     projectContents.forEach(content => content.classList.add('hidden'));
+     landingVideo.classList.remove('hidden');
+   });
+ 
+   // Project title click handlers
+   projectTitles.forEach(title => {
+     title.addEventListener('click', function() {
+       const target = this.dataset.target;
+       projectsSection.classList.add('hidden');
+       document.getElementById(target).classList.remove('hidden');
+     });
+   });
+ 
+   // Grid item click handlers
+   gridItems.forEach(item => {
+     item.addEventListener('click', function() {
+       const videoSrc = this.dataset.video;
+       modalVideo.src = videoSrc;
+       videoLink.href = videoSrc;
+       videoModal.classList.remove('hidden');
+       modalVideo.play();
+     });
+   });
+ 
+   // Close modal handler
+   closeModal.addEventListener('click', function() {
+     videoModal.classList.add('hidden');
+     modalVideo.pause();
+     modalVideo.currentTime = 0;
+   });
+ 
+   // Close modal when clicking outside
+   window.addEventListener('click', function(event) {
+     if (event.target === videoModal) {
+       videoModal.classList.add('hidden');
+       modalVideo.pause();
+       modalVideo.currentTime = 0;
+     }
+   });
+ });

style.css

Changed around line 1
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ html, body {
+   height: 100%;
+   overflow: hidden;
+ }
+ 
+ header {
+   height: 100vh;
+   position: relative;
+ }
+ 
+ .video-container {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   overflow: hidden;
+ }
+ 
+ #landingVideo {
+   min-width: 100%;
+   min-height: 100%;
+   object-fit: cover;
+ }
+ 
+ .home-indicator {
+   position: fixed;
+   bottom: 20px;
+   right: 20px;
+   z-index: 1000;
+   cursor: pointer;
+ }
+ 
+ .home-indicator img {
+   width: 40px;
+   height: 40px;
+ }
+ 
+ .hidden {
+   display: none;
+ }
+ 
+ .project-titles {
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   transform: translate(-50%, -50%);
+   text-align: center;
+ }
+ 
+ .project-title {
+   font-size: 3rem;
+   color: white;
+   margin: 20px 0;
+   cursor: pointer;
+   transition: transform 0.3s ease;
+ }
+ 
+ .project-title:hover {
+   transform: scale(1.1);
+ }
+ 
+ .grid-container {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 20px;
+   padding: 20px;
+ }
+ 
+ .grid-item {
+   position: relative;
+   cursor: pointer;
+   overflow: hidden;
+ }
+ 
+ .grid-item img {
+   width: 100%;
+   height: auto;
+   transition: transform 0.3s ease;
+ }
+ 
+ .grid-item:hover img {
+   transform: scale(1.05);
+ }
+ 
+ .modal {
+   position: fixed;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background-color: rgba(0, 0, 0, 0.9);
+   z-index: 1001;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+ }
+ 
+ .modal-content {
+   position: relative;
+   max-width: 90%;
+   max-height: 90%;
+ }
+ 
+ .close {
+   position: absolute;
+   top: 10px;
+   right: 20px;
+   color: white;
+   font-size: 2rem;
+   cursor: pointer;
+ }
+ 
+ #modalVideo {
+   max-width: 100%;
+   max-height: 80vh;
+ }
+ 
+ #videoLink {
+   display: block;
+   color: white;
+   text-align: center;
+   margin-top: 10px;
+ }
+ 
+ @media (max-width: 768px) {
+   .project-title {
+     font-size: 2rem;
+   }
+ 
+   .grid-container {
+     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+   }
+ }