index.scroll
Changed around line 1
+ buildTxt
+ buildHtml
+ title The Purrfect Slideshow: Feline Inspiration
+ metaTags
+ style.css
+ script.js
+ slideshow
+ ***
+
+ The Purrfect Slideshow
+ Feline Inspiration for Your Day
+
+ ***
+
+ Cats: Nature's Perfect Design
+ - 230 bones (humans have 206)
+ - Can rotate ears 180°
+ - Whiskers are mood indicators
+ - Built-in self-cleaning system
+
+ ***
+
+ Feline Superpowers
+ - Can jump 6x their height
+ - Always land on their feet (most of the time)
+ - See in light 6x dimmer than humans
+ - Purring promotes healing
+
+ ***
+
+ Life Lessons from Cats
+ 1. Stretch often
+ 2. Nap without guilt
+ 3. Demand what you deserve
+ 4. Ignore what doesn't serve you
+ 5. Always land on your feet
+
+ ***
+
+ Famous Cats Who Made History
+ - Félicette (first cat in space)
+ - Stubbs (mayor of Talkeetna, AK)
+ - Larry (Chief Mouser at 10 Downing St)
+ - Grumpy Cat (internet legend)
+
+ ***
+
+ Why We Love Cats
+ They teach us:
+ - Independence
+ - Curiosity
+ - Playfulness
+ - The art of the perfect nap
+
+ ****
prompt.json
Changed around line 1
+ {
+ "id": "b0ac5e26-e8ab-42c0-a4a0-25d9140349d9",
+ "object": "chat.completion",
+ "created": 1745149216,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "Here's a dazzling, inspirational slideshow about cats with modern design and accessibility:\n\n---domain---\npurrfectscroll.pub\n---index.scroll---\nbuildTxt\nbuildHtml\ntitle The Purrfect Slideshow: Feline Inspiration\nmetaTags\nstyle.css\nscript.js\nslideshow\n***\n\nThe Purrfect Slideshow\nFeline Inspiration for Your Day\n\n***\n\nCats: Nature's Perfect Design\n- 230 bones (humans have 206)\n- Can rotate ears 180°\n- Whiskers are mood indicators\n- Built-in self-cleaning system\n\n***\n\nFeline Superpowers\n- Can jump 6x their height\n- Always land on their feet (most of the time)\n- See in light 6x dimmer than humans\n- Purring promotes healing\n\n***\n\nLife Lessons from Cats\n1. Stretch often\n2. Nap without guilt\n3. Demand what you deserve\n4. Ignore what doesn't serve you\n5. Always land on your feet\n\n***\n\nFamous Cats Who Made History\n- Félicette (first cat in space)\n- Stubbs (mayor of Talkeetna, AK)\n- Larry (Chief Mouser at 10 Downing St)\n- Grumpy Cat (internet legend)\n\n***\n\nWhy We Love Cats\nThey teach us:\n- Independence\n- Curiosity\n- Playfulness\n- The art of the perfect nap\n\n****\n---style.css---\n:root {\n --primary: #ff9a8b;\n --secondary: #ff6b95;\n --dark: #333;\n --light: #f8f9fa;\n}\n\nhtml {\n font-size: var(--scrollBaseFontSize, 20px);\n scroll-behavior: smooth;\n}\n\nbody {\n margin: 0 auto;\n max-width: 800px;\n padding: 2rem;\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--dark);\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n}\n\n.slideshowNav {\n text-align: center;\n margin: 2rem 0;\n font-size: 1.5rem;\n}\n\n.slideshowNav a {\n text-decoration: none;\n color: var(--primary);\n padding: 0.5rem;\n transition: all 0.3s ease;\n}\n\n.slideshowNav a:hover {\n color: var(--secondary);\n transform: scale(1.1);\n}\n\n.slideshowContent {\n background: white;\n border-radius: 1rem;\n padding: 2rem;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n min-height: 400px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.slideshowContent h1, .slideshowContent h2 {\n color: var(--secondary);\n text-align: center;\n margin-bottom: 1.5rem;\n background: linear-gradient(to right, #ff9a8b, #ff6b95);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.slideshowContent ul {\n list-style-type: none;\n padding: 0;\n}\n\n.slideshowContent li {\n padding: 0.5rem 0;\n position: relative;\n padding-left: 1.5rem;\n}\n\n.slideshowContent li:before {\n content: \"🐾\";\n position: absolute;\n left: 0;\n}\n\n@media (max-width: 600px) {\n html {\n font-size: 18px;\n }\n \n body {\n padding: 1rem;\n }\n \n .slideshowContent {\n padding: 1.5rem;\n min-height: 300px;\n }\n}\n---script.js---\n// No additional JS needed - slideshow.js handles all functionality\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 553,
+ "completion_tokens": 873,
+ "total_tokens": 1426,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 553
+ },
+ "system_fingerprint": "fp_3d5141a69a_prod0225"
+ }
readme.scroll
Changed around line 1
+ # purrfectscroll.pub.scroll.pub
+
+ Prompt: slideshow
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ slideshow of cats
+
+ ## System prompt
+ You are an expert design agency tasked with helping someone create a slideshow. Create a slideshow based on this request: "slideshow of 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
+ // No additional JS needed - slideshow.js handles all functionality
style.css
Changed around line 1
+ :root {
+ --primary: #ff9a8b;
+ --secondary: #ff6b95;
+ --dark: #333;
+ --light: #f8f9fa;
+ }
+
+ html {
+ font-size: var(--scrollBaseFontSize, 20px);
+ scroll-behavior: smooth;
+ }
+
+ body {
+ margin: 0 auto;
+ max-width: 800px;
+ padding: 2rem;
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--dark);
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+ }
+
+ .slideshowNav {
+ text-align: center;
+ margin: 2rem 0;
+ font-size: 1.5rem;
+ }
+
+ .slideshowNav a {
+ text-decoration: none;
+ color: var(--primary);
+ padding: 0.5rem;
+ transition: all 0.3s ease;
+ }
+
+ .slideshowNav a:hover {
+ color: var(--secondary);
+ transform: scale(1.1);
+ }
+
+ .slideshowContent {
+ background: white;
+ border-radius: 1rem;
+ padding: 2rem;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+ min-height: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .slideshowContent h1, .slideshowContent h2 {
+ color: var(--secondary);
+ text-align: center;
+ margin-bottom: 1.5rem;
+ background: linear-gradient(to right, #ff9a8b, #ff6b95);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ }
+
+ .slideshowContent ul {
+ list-style-type: none;
+ padding: 0;
+ }
+
+ .slideshowContent li {
+ padding: 0.5rem 0;
+ position: relative;
+ padding-left: 1.5rem;
+ }
+
+ .slideshowContent li:before {
+ content: "🐾";
+ position: absolute;
+ left: 0;
+ }
+
+ @media (max-width: 600px) {
+ html {
+ font-size: 18px;
+ }
+
+ body {
+ padding: 1rem;
+ }
+
+ .slideshowContent {
+ padding: 1.5rem;
+ min-height: 300px;
+ }
+ }