index.scroll
Changed around line 1
+ buildTxt
+ buildHtml
+ title The Purrfect Life - Inspirational Cat Wisdom
+ metaTags
+ style.css
+ script.js
+ slideshow
+ ***
+
+ The Art of Cat-titude
+ ***
+
+ Cats teach us valuable life lessons:
+ - Stretch often
+ - Nap without guilt
+ - Demand what you deserve
+ - Land on your feet
+ ***
+
+ "Time spent with cats is never wasted."
+ - Sigmund Freud
+ ***
+
+ Cat Math:
+ Sunbeam + Blanket = ∞ Happiness
+ ***
+
+ Pro Tip:
+ When in doubt,
+ take a cat nap
+ ***
+
+ The world would be better
+ if everyone purred more
+ ***
+
+ Be the person
+ your cat thinks you are
+ ****
prompt.json
Changed around line 1
+ {
+ "id": "da38f752-f955-43f9-9d52-15d153562053",
+ "object": "chat.completion",
+ "created": 1744296234,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "Here's a dazzling, inspirational slideshow about cats with modern design and responsive layout:\n\n---domain---\npurrfect.scroll.pub\n---index.scroll---\nbuildTxt\nbuildHtml\ntitle The Purrfect Life - Inspirational Cat Wisdom\nmetaTags\nstyle.css\nscript.js\nslideshow\n***\n\nThe Art of Cat-titude\n***\n\nCats teach us valuable life lessons:\n- Stretch often\n- Nap without guilt\n- Demand what you deserve\n- Land on your feet\n***\n\n\"Time spent with cats is never wasted.\" \n- Sigmund Freud\n***\n\nCat Math:\nSunbeam + Blanket = ∞ Happiness\n***\n\nPro Tip:\nWhen in doubt, \ntake a cat nap\n***\n\nThe world would be better\nif everyone purred more\n***\n\nBe the person\nyour cat thinks you are\n****\n---style.css---\n:root {\n --primary: #ff9a8b;\n --secondary: #ff6b88;\n --dark: #333;\n --light: #f8f9fa;\n}\n\n.slideshow {\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n font-family: 'Georgia', serif;\n color: var(--dark);\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n\n.slide {\n min-height: 60vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n background-size: cover;\n background-position: center;\n border-radius: 10px;\n transition: all 0.5s ease;\n}\n\n.slide h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n background: linear-gradient(to right, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n}\n\n.slide p {\n font-size: 1.5rem;\n line-height: 1.6;\n margin-bottom: 1.5rem;\n}\n\n.slide ul {\n text-align: left;\n font-size: 1.3rem;\n line-height: 2;\n list-style-type: '🐾 ';\n}\n\n.slideshowNav {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin: 2rem 0;\n}\n\n.slideshowNav a {\n font-size: 2rem;\n color: var(--primary);\n transition: transform 0.3s ease;\n}\n\n.slideshowNav a:hover {\n transform: scale(1.2);\n color: var(--secondary);\n}\n\n@media (max-width: 768px) {\n .slide {\n min-height: 50vh;\n padding: 1rem;\n }\n \n .slide h1 {\n font-size: 2rem;\n }\n \n .slide p {\n font-size: 1.2rem;\n }\n}\n---script.js---\n// Simple animation for slide transitions\ndocument.addEventListener('DOMContentLoaded', () => {\n const slides = document.querySelectorAll('.slide');\n \n slides.forEach(slide => {\n slide.addEventListener('click', () => {\n slide.style.transform = 'scale(0.98)';\n setTimeout(() => {\n slide.style.transform = 'scale(1)';\n }, 200);\n });\n });\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 550,
+ "completion_tokens": 810,
+ "total_tokens": 1360,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 550
+ },
+ "system_fingerprint": "fp_3d5141a69a_prod0225"
+ }
readme.scroll
Changed around line 1
+ # purrfect.scroll.pub
+
+ Prompt: slideshow
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ cats
+
+ ## System prompt
+ You are an expert design agency tasked with helping someone create a slideshow. Create a slideshow based on this request: "cats"
+
+ Requirements:
+ - Make the slideshow inspirational, concise, witty.
+ - The scroll slideshow keyword automatically injects javascript to handle the showing/hiding of slide content, navigation, urls, etc. You just need to add content and style.
+ - Use mostly Scroll, but you can also use CSS, HTML and JavaScript (NO frameworks, NO external dependencies)
+ - Make it mobile-responsive
+ - 5-10 slides
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved or confidential or any of that mumbo jumbo.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ Below is the Scroll Parser that implements the Slideshow. This should give you the class names for the styles.
+ slideshowParser
+ // Left and right arrows navigate.
+ description Slideshow widget. *** delimits slides.
+ extends abstractScrollWithRequirementsParser
+ string copyFromExternal .jquery-3.7.1.min.js .slideshow.js
+ example
+ slideshow
+ Why did the cow cross the road?
+ ***
+ Because it wanted to go to the MOOOO-vies.
+ ***
+ THE END
+ ****
+ javascript
+ buildHtml() {
+ return \`\`
+ }
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildTxt
+ buildHtml
+ title (slideshow title for meta tags)
+ metaTags
+ style.css
+ script.js
+ slideshow
+ ***
+
+ (first slide)
+
+ ***
+
+ (slides here, delimited by ***)
+
+ ***
+
+ (Final slide)
+
+ ****
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (Any JavaScript content here, if needed)
+ ---end---
script.js
Changed around line 1
+ // Simple animation for slide transitions
+ document.addEventListener('DOMContentLoaded', () => {
+ const slides = document.querySelectorAll('.slide');
+
+ slides.forEach(slide => {
+ slide.addEventListener('click', () => {
+ slide.style.transform = 'scale(0.98)';
+ setTimeout(() => {
+ slide.style.transform = 'scale(1)';
+ }, 200);
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #ff9a8b;
+ --secondary: #ff6b88;
+ --dark: #333;
+ --light: #f8f9fa;
+ }
+
+ .slideshow {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 2rem;
+ font-family: 'Georgia', serif;
+ color: var(--dark);
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+ border-radius: 15px;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+ }
+
+ .slide {
+ min-height: 60vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ background-size: cover;
+ background-position: center;
+ border-radius: 10px;
+ transition: all 0.5s ease;
+ }
+
+ .slide h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(to right, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+ }
+
+ .slide p {
+ font-size: 1.5rem;
+ line-height: 1.6;
+ margin-bottom: 1.5rem;
+ }
+
+ .slide ul {
+ text-align: left;
+ font-size: 1.3rem;
+ line-height: 2;
+ list-style-type: '🐾 ';
+ }
+
+ .slideshowNav {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin: 2rem 0;
+ }
+
+ .slideshowNav a {
+ font-size: 2rem;
+ color: var(--primary);
+ transition: transform 0.3s ease;
+ }
+
+ .slideshowNav a:hover {
+ transform: scale(1.2);
+ color: var(--secondary);
+ }
+
+ @media (max-width: 768px) {
+ .slide {
+ min-height: 50vh;
+ padding: 1rem;
+ }
+
+ .slide h1 {
+ font-size: 2rem;
+ }
+
+ .slide p {
+ font-size: 1.2rem;
+ }
+ }