commit 7d65107f4a6591b31e65bef2c6b4e9ca025cbf37
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 01:51:32 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..b3cfeb4
--- /dev/null
+++ b/body.html
@@ -0,0 +1,18 @@
+<header>
+ <h1>FrameFlow</h1>
+ <nav>
+ <button id="prevButton" aria-label="Previous site">←</button>
+ <span id="siteCounter">1 / 5</span>
+ <button id="nextButton" aria-label="Next site">→</button>
+ </nav>
+</header>
+
+<main>
+ <div class="frame-container">
+ <iframe id="siteFrame" title="Website viewer" sandbox="allow-same-origin allow-scripts"></iframe>
+ </div>
+</main>
+
+<footer>
+ <p>Made with nostalgia by FrameFlow</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..96669da
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://frameflow.scroll.pub
+metaTags
+editButton /edit.html
+title FrameFlow - Retro Web Explorer
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..fa83f06
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "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<header>\n <h1>FrameFlow</h1>\n <nav>\n <button id=\"prevButton\" aria-label=\"Previous site\">←</button>\n <span id=\"siteCounter\">1 / 5</span>\n <button id=\"nextButton\" aria-label=\"Next site\">→</button>\n </nav>\n</header>\n\n<main>\n <div class=\"frame-container\">\n <iframe id=\"siteFrame\" title=\"Website viewer\" sandbox=\"allow-same-origin allow-scripts\"></iframe>\n </div>\n</main>\n\n<footer>\n <p>Made with nostalgia by FrameFlow</p>\n</footer>\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
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..676123e
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..9556128
--- /dev/null
+++ b/script.js
@@ -0,0 +1,48 @@
+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();
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0617498
--- /dev/null
+++ b/style.css
@@ -0,0 +1,108 @@
+: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);
+ }
+}