index.scroll
Changed around line 1
+ title Catch the Perfect Wave
+ metaTags A stunning visual journey through the art of surfing
+ style.css
+ script.js
+ slideshow
+
+ ***
+
+ š RIDE THE WAVE
+ The ultimate freedom
+
+ ***
+
+ Dawn patrol warriors
+ First light, best light
+
+
+ ***
+
+ Dance with the ocean
+ Every wave tells a story
+
+
+ ***
+
+ No bad days
+ Just different waves
+
+
+ ***
+
+ Life is better
+ when you surf
+
+
+ ****
prompt.json
Changed around line 1
+ {
+ "id": "msg_01MimL2ckRf4dKsvfcRekaKe",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a surfing-themed slideshow with an engaging design.\n\n---domain---\nridesurfscroll.pub\n---index.scroll---\ntitle Catch the Perfect Wave\nmetaTags A stunning visual journey through the art of surfing\nstyle.css\nscript.js\nslideshow\n\n***\n\nš RIDE THE WAVE\nThe ultimate freedom\n\n***\n\nDawn patrol warriors\nFirst light, best light\n\n\n***\n\nDance with the ocean\nEvery wave tells a story\n\n\n***\n\nNo bad days\nJust different waves\n\n\n***\n\nLife is better\nwhen you surf\n\n\n****\n---style.css---\n:root {\n --ocean-blue: #0077be;\n --foam-white: #f5f5f5;\n --sunset-orange: #ff7e5f;\n}\n\nbody {\n background: linear-gradient(135deg, var(--ocean-blue), #004466);\n color: var(--foam-white);\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n}\n\n.slideshowSlide {\n min-height: 80vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n font-size: 2rem;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n transition: all 0.5s ease;\n}\n\n.slideshowSlide:not(:first-child) {\n font-size: 1.5rem;\n}\n\n.surfer-silhouette {\n width: 200px;\n height: 200px;\n background: var(--foam-white);\n mask: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,20 C60,20 70,40 70,60 C70,80 60,90 50,90 C40,90 30,80 30,60 C30,40 40,20 50,20'/%3E%3C/svg%3E\");\n margin: 2rem auto;\n}\n\n.wave-animation {\n width: 100%;\n height: 100px;\n background: linear-gradient(90deg, var(--ocean-blue) 0%, var(--foam-white) 100%);\n border-radius: 50%;\n animation: wave 3s infinite ease-in-out;\n}\n\n.board-icon {\n width: 120px;\n height: 300px;\n background: var(--foam-white);\n border-radius: 30px;\n transform: rotate(-15deg);\n margin: 2rem auto;\n}\n\n.sunset-gradient {\n width: 200px;\n height: 200px;\n background: linear-gradient(to bottom, var(--sunset-orange), var(--ocean-blue));\n border-radius: 50%;\n margin: 2rem auto;\n}\n\n@keyframes wave {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n}\n\n@media (max-width: 768px) {\n .slideshowSlide {\n font-size: 1.5rem;\n min-height: 60vh;\n }\n \n .slideshowSlide:not(:first-child) {\n font-size: 1.2rem;\n }\n \n .surfer-silhouette,\n .board-icon,\n .sunset-gradient {\n transform: scale(0.8);\n }\n}\n\n.slideshowNav a {\n color: var(--foam-white);\n font-size: 2rem;\n margin: 0 1rem;\n opacity: 0.8;\n transition: opacity 0.3s ease;\n}\n\n.slideshowNav a:hover {\n opacity: 1;\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Add wave effect to background\n const slides = document.querySelectorAll('.slideshowSlide');\n slides.forEach(slide => {\n slide.addEventListener('mousemove', (e) => {\n const { clientX, clientY } = e;\n const x = (clientX / window.innerWidth) * 100;\n const y = (clientY / window.innerHeight) * 100;\n slide.style.background = `radial-gradient(circle at ${x}% ${y}%, #0077be 0%, #004466 100%)`;\n });\n });\n});\n---end---\n\nThis creates a beautiful, ocean-themed slideshow with:\n- Smooth transitions\n- Interactive background effects\n- Responsive design\n- Custom animations\n- Elegant typography\n- Minimalist surf-inspired graphics\n- Wave animations\n- Dynamic hover effects\n- Mobile-friendly layout\n\nThe design uses a modern, clean aesthetic with ocean-inspired colors and smooth animations. The interactive elements respond to user movement, creating an engaging experience while maintaining simplicity and professionalism."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 638,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1334
+ }
+ }
readme.scroll
Changed around line 1
+ # ridesurfscroll.pub.scroll.pub
+
+ Prompt: slideshow
+ Agent: claude
+ Model: claude-3-5-sonnet-20241022
+
+ ## User prompt
+ A slideshow of people surfing
+
+ ## System prompt
+ You are an expert design agency tasked with helping someone create a slideshow. Create a slideshow based on this request: "A slideshow of people surfing"
+
+ 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
+ document.addEventListener('DOMContentLoaded', function() {
+ // Add wave effect to background
+ const slides = document.querySelectorAll('.slideshowSlide');
+ slides.forEach(slide => {
+ slide.addEventListener('mousemove', (e) => {
+ const { clientX, clientY } = e;
+ const x = (clientX / window.innerWidth) * 100;
+ const y = (clientY / window.innerHeight) * 100;
+ slide.style.background = `radial-gradient(circle at ${x}% ${y}%, #0077be 0%, #004466 100%)`;
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --ocean-blue: #0077be;
+ --foam-white: #f5f5f5;
+ --sunset-orange: #ff7e5f;
+ }
+
+ body {
+ background: linear-gradient(135deg, var(--ocean-blue), #004466);
+ color: var(--foam-white);
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ }
+
+ .slideshowSlide {
+ min-height: 80vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ font-size: 2rem;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+ transition: all 0.5s ease;
+ }
+
+ .slideshowSlide:not(:first-child) {
+ font-size: 1.5rem;
+ }
+
+ .surfer-silhouette {
+ width: 200px;
+ height: 200px;
+ background: var(--foam-white);
+ mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,20 C60,20 70,40 70,60 C70,80 60,90 50,90 C40,90 30,80 30,60 C30,40 40,20 50,20'/%3E%3C/svg%3E");
+ margin: 2rem auto;
+ }
+
+ .wave-animation {
+ width: 100%;
+ height: 100px;
+ background: linear-gradient(90deg, var(--ocean-blue) 0%, var(--foam-white) 100%);
+ border-radius: 50%;
+ animation: wave 3s infinite ease-in-out;
+ }
+
+ .board-icon {
+ width: 120px;
+ height: 300px;
+ background: var(--foam-white);
+ border-radius: 30px;
+ transform: rotate(-15deg);
+ margin: 2rem auto;
+ }
+
+ .sunset-gradient {
+ width: 200px;
+ height: 200px;
+ background: linear-gradient(to bottom, var(--sunset-orange), var(--ocean-blue));
+ border-radius: 50%;
+ margin: 2rem auto;
+ }
+
+ @keyframes wave {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-20px); }
+ }
+
+ @media (max-width: 768px) {
+ .slideshowSlide {
+ font-size: 1.5rem;
+ min-height: 60vh;
+ }
+
+ .slideshowSlide:not(:first-child) {
+ font-size: 1.2rem;
+ }
+
+ .surfer-silhouette,
+ .board-icon,
+ .sunset-gradient {
+ transform: scale(0.8);
+ }
+ }
+
+ .slideshowNav a {
+ color: var(--foam-white);
+ font-size: 2rem;
+ margin: 0 1rem;
+ opacity: 0.8;
+ transition: opacity 0.3s ease;
+ }
+
+ .slideshowNav a:hover {
+ opacity: 1;
+ }