Changes to frameflow.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   FrameFlow
+   
+     
+     1 / 5
+     
+   
+ 
+ 
+ 
+   
+     
+   
+ 
+ 
+ 
+   Made with nostalgia by FrameFlow
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://frameflow.scroll.pub
+ metaTags
+ editButton /edit.html
+ title FrameFlow - Retro Web Explorer
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_018JKPLhmCMRLUteq9gXxz8t",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll create a website for your oldschool Tumblr-like site with a frame navigator. For the domain, I suggest:\n\n---domain---\nframeflow.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://frameflow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle FrameFlow - Retro Web Explorer\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  FrameFlow\n  \n    \n    1 / 5\n    \n  \n\n\n\n  \n    \n  
\n\n\n\n  Made with nostalgia by FrameFlow
\n\n\n---style.css---\n:root {\n  --primary-color: #36465d;\n  --secondary-color: #529ecc;\n  --text-color: #ffffff;\n  --background-color: #1d2735;\n  --button-hover: #5a7aa3;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\nheader {\n  background-color: var(--primary-color);\n  padding: 1rem;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n  text-align: center;\n}\n\nh1 {\n  font-size: 2rem;\n  margin-bottom: 1rem;\n  background: linear-gradient(45deg, var(--secondary-color), #ffffff);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}\n\nnav {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n}\n\nbutton {\n  background-color: var(--secondary-color);\n  color: var(--text-color);\n  border: none;\n  padding: 0.5rem 1rem;\n  font-size: 1.2rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n  background-color: var(--button-hover);\n}\n\n#siteCounter {\n  font-size: 1rem;\n  color: var(--text-color);\n  min-width: 4rem;\n}\n\nmain {\n  flex: 1;\n  padding: 1rem;\n}\n\n.frame-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  height: calc(100vh - 200px);\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);\n}\n\niframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  background-color: white;\n}\n\nfooter {\n  text-align: center;\n  padding: 1rem;\n  background-color: var(--primary-color);\n  margin-top: auto;\n}\n\n@media (max-width: 768px) {\n  header {\n    padding: 0.5rem;\n  }\n\n  h1 {\n    font-size: 1.5rem;\n  }\n\n  .frame-container {\n    height: calc(100vh - 160px);\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n  const sites = [\n    'sites/site1.html',\n    'sites/site2.html',\n    'sites/site3.html',\n    'sites/site4.html',\n    'sites/site5.html'\n  ];\n\n  let currentIndex = 0;\n  const iframe = document.getElementById('siteFrame');\n  const prevButton = document.getElementById('prevButton');\n  const nextButton = document.getElementById('nextButton');\n  const siteCounter = document.getElementById('siteCounter');\n\n  function updateSite() {\n    iframe.src = sites[currentIndex];\n    siteCounter.textContent = `${currentIndex + 1} / ${sites.length}`;\n    prevButton.disabled = currentIndex === 0;\n    nextButton.disabled = currentIndex === sites.length - 1;\n  }\n\n  prevButton.addEventListener('click', () => {\n    if (currentIndex > 0) {\n      currentIndex--;\n      updateSite();\n    }\n  });\n\n  nextButton.addEventListener('click', () => {\n    if (currentIndex < sites.length - 1) {\n      currentIndex++;\n      updateSite();\n    }\n  });\n\n  document.addEventListener('keydown', (e) => {\n    if (e.key === 'ArrowLeft' && currentIndex > 0) {\n      currentIndex--;\n      updateSite();\n    } else if (e.key === 'ArrowRight' && currentIndex < sites.length - 1) {\n      currentIndex++;\n      updateSite();\n    }\n  });\n\n  updateSite();\n});\n\n---end---\n\nThis implementation creates a sleek, modern take on the classic Tumblr-style frame navigator. Features include:\n\n1. Clean, minimalist design with a dark theme\n2. Smooth animations and transitions\n3. Responsive layout that works on all devices\n4. Keyboard navigation support (left/right arrows)\n5. Site counter to show progress\n6. Beautiful gradient effects and shadows\n7. Accessibility features including ARIA labels\n8. Sandboxed iframe for security\n\nNote: You'll need to create the actual site content files in a `/sites` directory (site1.html through site5.html) with your pre-populated content."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 316,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 1589
+   }
+ }

readme.scroll

Changed around line 1

+ # frameflow.scroll.pub

+ Website generated by Claude from prompt: oldschool tumblr like site that lets the user click a button at the top and then the ui inside of an i frame changes them to the next site. the sites the user sees are going to be pre-populated

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+   const sites = [
+     'sites/site1.html',
+     'sites/site2.html',
+     'sites/site3.html',
+     'sites/site4.html',
+     'sites/site5.html'
+   ];
+ 
+   let currentIndex = 0;
+   const iframe = document.getElementById('siteFrame');
+   const prevButton = document.getElementById('prevButton');
+   const nextButton = document.getElementById('nextButton');
+   const siteCounter = document.getElementById('siteCounter');
+ 
+   function updateSite() {
+     iframe.src = sites[currentIndex];
+     siteCounter.textContent = `${currentIndex + 1} / ${sites.length}`;
+     prevButton.disabled = currentIndex === 0;
+     nextButton.disabled = currentIndex === sites.length - 1;
+   }
+ 
+   prevButton.addEventListener('click', () => {
+     if (currentIndex > 0) {
+       currentIndex--;
+       updateSite();
+     }
+   });
+ 
+   nextButton.addEventListener('click', () => {
+     if (currentIndex < sites.length - 1) {
+       currentIndex++;
+       updateSite();
+     }
+   });
+ 
+   document.addEventListener('keydown', (e) => {
+     if (e.key === 'ArrowLeft' && currentIndex > 0) {
+       currentIndex--;
+       updateSite();
+     } else if (e.key === 'ArrowRight' && currentIndex < sites.length - 1) {
+       currentIndex++;
+       updateSite();
+     }
+   });
+ 
+   updateSite();
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #36465d;
+   --secondary-color: #529ecc;
+   --text-color: #ffffff;
+   --background-color: #1d2735;
+   --button-hover: #5a7aa3;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+   background-color: var(--background-color);
+   color: var(--text-color);
+   min-height: 100vh;
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ header {
+   background-color: var(--primary-color);
+   padding: 1rem;
+   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+   text-align: center;
+ }
+ 
+ h1 {
+   font-size: 2rem;
+   margin-bottom: 1rem;
+   background: linear-gradient(45deg, var(--secondary-color), #ffffff);
+   -webkit-background-clip: text;
+   background-clip: text;
+   color: transparent;
+ }
+ 
+ nav {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   gap: 1rem;
+ }
+ 
+ button {
+   background-color: var(--secondary-color);
+   color: var(--text-color);
+   border: none;
+   padding: 0.5rem 1rem;
+   font-size: 1.2rem;
+   border-radius: 4px;
+   cursor: pointer;
+   transition: background-color 0.3s ease;
+ }
+ 
+ button:hover {
+   background-color: var(--button-hover);
+ }
+ 
+ #siteCounter {
+   font-size: 1rem;
+   color: var(--text-color);
+   min-width: 4rem;
+ }
+ 
+ main {
+   flex: 1;
+   padding: 1rem;
+ }
+ 
+ .frame-container {
+   max-width: 1200px;
+   margin: 0 auto;
+   height: calc(100vh - 200px);
+   border-radius: 8px;
+   overflow: hidden;
+   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+ }
+ 
+ iframe {
+   width: 100%;
+   height: 100%;
+   border: none;
+   background-color: white;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 1rem;
+   background-color: var(--primary-color);
+   margin-top: auto;
+ }
+ 
+ @media (max-width: 768px) {
+   header {
+     padding: 0.5rem;
+   }
+ 
+   h1 {
+     font-size: 1.5rem;
+   }
+ 
+   .frame-container {
+     height: calc(100vh - 160px);
+   }
+ }