index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://livewallpapers.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Live Wallpapers for Idle Screens
+ style.css
+ header
+ class hero
+ nav
+ div Live Wallpapers
+ class logo
+ div
+ class nav-links
+ a About
+ href #about
+ a Gallery
+ href #gallery
+ a Settings
+ href #settings
+ div
+ class hero-content
+ h1 Dynamic Live Wallpapers
+ p Transform your idle screens into mesmerizing displays of light and motion
+ a Start Now
+ class primary-button
+ href #gallery
+ main
+ section
+ id about
+ class about
+ h2 About Live Wallpapers
+ p Elevate your multi-screen setup with stunning live wallpapers that run seamlessly in your browser. No downloads, no installations—just pure visual delight.
+ section
+ id gallery
+ class gallery
+ h2 Wallpaper Gallery
+ div
+ class wallpaper-grid
+ div
+ class wallpaper-card
+ div
+ class wallpaper-preview
+ id wallpaper1
+ h3 Aurora Lights
+ p A soothing display of flowing auroras
+ div
+ class wallpaper-card
+ div
+ class wallpaper-preview
+ id wallpaper2
+ h3 Particle Storm
+ p A dynamic swarm of glowing particles
+ div
+ class wallpaper-card
+ div
+ class wallpaper-preview
+ id wallpaper3
+ h3 Neon Waves
+ p A rhythmic dance of neon colors
+ section
+ id settings
+ class settings
+ h2 Customize Your Experience
+ div
+ class settings-grid
+ div
+ class setting-card
+ h3 Brightness
+ input
+ type range
+ id brightness
+ min 0
+ max 100
+ value 50
+ div
+ class setting-card
+ h3 Speed
+ input
+ type range
+ id speed
+ min 0.5
+ max 2
+ value 1
+ step 0.1
+ div
+ class setting-card
+ h3 Color Theme
+ select
+ id colorTheme
+ option Light
+ option Dark
+ option Custom
+ footer
+ div
+ class footer-content
+ p Created with ❤️ for multi-screen enthusiasts
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "eb9543bd-a926-46ff-a15b-799460a6d0da",
+ "object": "chat.completion",
+ "created": 1742758893,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nlivewallpapers.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://livewallpapers.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Live Wallpapers for Idle Screens\nstyle.css\nheader\n class hero\n nav\n div Live Wallpapers\n class logo\n div\n class nav-links\n a About\n href #about\n a Gallery\n href #gallery\n a Settings\n href #settings\n div\n class hero-content\n h1 Dynamic Live Wallpapers\n p Transform your idle screens into mesmerizing displays of light and motion\n a Start Now\n class primary-button\n href #gallery\nmain\n section\n id about\n class about\n h2 About Live Wallpapers\n p Elevate your multi-screen setup with stunning live wallpapers that run seamlessly in your browser. No downloads, no installations—just pure visual delight.\n section\n id gallery\n class gallery\n h2 Wallpaper Gallery\n div\n class wallpaper-grid\n div\n class wallpaper-card\n div\n class wallpaper-preview\n id wallpaper1\n h3 Aurora Lights\n p A soothing display of flowing auroras\n div\n class wallpaper-card\n div\n class wallpaper-preview\n id wallpaper2\n h3 Particle Storm\n p A dynamic swarm of glowing particles\n div\n class wallpaper-card\n div\n class wallpaper-preview\n id wallpaper3\n h3 Neon Waves\n p A rhythmic dance of neon colors\n section\n id settings\n class settings\n h2 Customize Your Experience\n div\n class settings-grid\n div\n class setting-card\n h3 Brightness\n input\n type range\n id brightness\n min 0\n max 100\n value 50\n div\n class setting-card\n h3 Speed\n input\n type range\n id speed\n min 0.5\n max 2\n value 1\n step 0.1\n div\n class setting-card\n h3 Color Theme\n select\n id colorTheme\n option Light\n option Dark\n option Custom\nfooter\n div\n class footer-content\n p Created with ❤️ for multi-screen enthusiasts\nscript.js\n---style.css---\n:root {\n --primary-color: #6d5dfc;\n --secondary-color: #8abdff;\n --background-light: #f5f9ff;\n --background-dark: #1e1e2e;\n --text-light: #333;\n --text-dark: #f5f5f5;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n margin: 0;\n padding: 0;\n background: var(--background-light);\n color: var(--text-light);\n transition: all 0.3s ease;\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n padding: 4rem 2rem;\n text-align: center;\n}\n\n.hero-content h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n animation: fadeIn 1s ease;\n}\n\n.primary-button {\n background: white;\n color: var(--primary-color);\n padding: 0.8rem 2rem;\n border-radius: 25px;\n text-decoration: none;\n font-weight: bold;\n transition: all 0.3s ease;\n}\n\n.primary-button:hover {\n transform: scale(1.05);\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n}\n\n.wallpaper-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.wallpaper-card {\n background: white;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.wallpaper-card:hover {\n transform: translateY(-5px);\n}\n\n.wallpaper-preview {\n height: 200px;\n background: var(--background-dark);\n position: relative;\n overflow: hidden;\n}\n\n#wallpaper1 {\n background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n background-size: 400% 400%;\n animation: gradientBG 15s ease infinite;\n}\n\n#wallpaper2 {\n background: var(--background-dark);\n}\n\n#wallpaper3 {\n background: linear-gradient(135deg, #ff9a9e, #fad0c4);\n}\n\n@keyframes gradientBG {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 768px) {\n .hero-content h1 {\n font-size: 2rem;\n }\n \n .wallpaper-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\n// Initialize wallpaper animations\nfunction initWallpapers() {\n const wallpaper1 = document.getElementById('wallpaper1');\n const wallpaper2 = document.getElementById('wallpaper2');\n const wallpaper3 = document.getElementById('wallpaper3');\n\n // Wallpaper 2: Particle System\n const canvas = document.createElement('canvas');\n canvas.width = wallpaper2.clientWidth;\n canvas.height = wallpaper2.clientHeight;\n wallpaper2.appendChild(canvas);\n const ctx = canvas.getContext('2d');\n\n class Particle {\n constructor() {\n this.x = Math.random() * canvas.width;\n this.y = Math.random() * canvas.height;\n this.size = Math.random() * 3 + 1;\n this.speedX = Math.random() * 2 - 1;\n this.speedY = Math.random() * 2 - 1;\n }\n\n update() {\n this.x += this.speedX;\n this.y += this.speedY;\n if (this.size > 0.2) this.size -= 0.01;\n }\n\n draw() {\n ctx.fillStyle = `rgba(255, 255, 255, ${this.size / 3})`;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fill();\n }\n }\n\n let particles = [];\n function initParticles() {\n particles = [];\n for (let i = 0; i < 100; i++) {\n particles.push(new Particle());\n }\n }\n\n function animateParticles() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n particles.forEach(particle => {\n particle.update();\n particle.draw();\n if (particle.size <= 0.2) {\n const index = particles.indexOf(particle);\n particles.splice(index, 1);\n particles.push(new Particle());\n }\n });\n requestAnimationFrame(animateParticles);\n }\n\n initParticles();\n animateParticles();\n\n // Wallpaper 3: Neon Waves\n const waveCanvas = document.createElement('canvas');\n waveCanvas.width = wallpaper3.clientWidth;\n waveCanvas.height = wallpaper3.clientHeight;\n wallpaper3.appendChild(waveCanvas);\n const waveCtx = waveCanvas.getContext('2d');\n\n let time = 0;\n function drawWave() {\n waveCtx.clearRect(0, 0, waveCanvas.width, waveCanvas.height);\n waveCtx.beginPath();\n waveCtx.moveTo(0, waveCanvas.height / 2);\n \n for (let i = 0; i < waveCanvas.width; i++) {\n const y = waveCanvas.height / 2 + Math.sin(i * 0.02 + time) * 30;\n waveCtx.lineTo(i, y);\n }\n \n waveCtx.strokeStyle = `hsl(${time * 10}, 100%, 50%)`;\n waveCtx.lineWidth = 2;\n waveCtx.stroke();\n \n time += 0.05;\n requestAnimationFrame(drawWave);\n }\n\n drawWave();\n}\n\n// Initialize settings controls\nfunction initSettings() {\n const brightness = document.getElementById('brightness');\n const speed = document.getElementById('speed');\n const colorTheme = document.getElementById('colorTheme');\n\n brightness.addEventListener('input', (e) => {\n document.documentElement.style.setProperty('--brightness', `${e.target.value}%`);\n });\n\n speed.addEventListener('input', (e) => {\n document.documentElement.style.setProperty('--animation-speed', `${e.target.value}s`);\n });\n\n colorTheme.addEventListener('change', (e) => {\n document.body.classList.remove('light', 'dark', 'custom');\n document.body.classList.add(e.target.value.toLowerCase());\n });\n}\n\n// Initialize everything\ndocument.addEventListener('DOMContentLoaded', () => {\n initWallpapers();\n initSettings();\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 767,
+ "completion_tokens": 2074,
+ "total_tokens": 2841,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 767
+ },
+ "system_fingerprint": "fp_3a5770e1b4_prod0225"
+ }
readme.scroll
Changed around line 1
+ # livewallpapers.scroll.pub
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ I want to make a website that will allow me to play live wallpapers without downloading them on my computer the purpose is for my idle screens I want them to have some type of lighting while I use my other screens as i have multiple pcs running
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "I want to make a website that will allow me to play live wallpapers without downloading them on my computer the purpose is for my idle screens I want them to have some type of lighting while I use my other screens as i have multiple pcs running"
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - 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 in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ 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---
+ buildHtml
+ baseUrl https://(domainscroll.pub here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ // Initialize wallpaper animations
+ function initWallpapers() {
+ const wallpaper1 = document.getElementById('wallpaper1');
+ const wallpaper2 = document.getElementById('wallpaper2');
+ const wallpaper3 = document.getElementById('wallpaper3');
+
+ // Wallpaper 2: Particle System
+ const canvas = document.createElement('canvas');
+ canvas.width = wallpaper2.clientWidth;
+ canvas.height = wallpaper2.clientHeight;
+ wallpaper2.appendChild(canvas);
+ const ctx = canvas.getContext('2d');
+
+ class Particle {
+ constructor() {
+ this.x = Math.random() * canvas.width;
+ this.y = Math.random() * canvas.height;
+ this.size = Math.random() * 3 + 1;
+ this.speedX = Math.random() * 2 - 1;
+ this.speedY = Math.random() * 2 - 1;
+ }
+
+ update() {
+ this.x += this.speedX;
+ this.y += this.speedY;
+ if (this.size > 0.2) this.size -= 0.01;
+ }
+
+ draw() {
+ ctx.fillStyle = `rgba(255, 255, 255, ${this.size / 3})`;
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ }
+
+ let particles = [];
+ function initParticles() {
+ particles = [];
+ for (let i = 0; i < 100; i++) {
+ particles.push(new Particle());
+ }
+ }
+
+ function animateParticles() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ particles.forEach(particle => {
+ particle.update();
+ particle.draw();
+ if (particle.size <= 0.2) {
+ const index = particles.indexOf(particle);
+ particles.splice(index, 1);
+ particles.push(new Particle());
+ }
+ });
+ requestAnimationFrame(animateParticles);
+ }
+
+ initParticles();
+ animateParticles();
+
+ // Wallpaper 3: Neon Waves
+ const waveCanvas = document.createElement('canvas');
+ waveCanvas.width = wallpaper3.clientWidth;
+ waveCanvas.height = wallpaper3.clientHeight;
+ wallpaper3.appendChild(waveCanvas);
+ const waveCtx = waveCanvas.getContext('2d');
+
+ let time = 0;
+ function drawWave() {
+ waveCtx.clearRect(0, 0, waveCanvas.width, waveCanvas.height);
+ waveCtx.beginPath();
+ waveCtx.moveTo(0, waveCanvas.height / 2);
+
+ for (let i = 0; i < waveCanvas.width; i++) {
+ const y = waveCanvas.height / 2 + Math.sin(i * 0.02 + time) * 30;
+ waveCtx.lineTo(i, y);
+ }
+
+ waveCtx.strokeStyle = `hsl(${time * 10}, 100%, 50%)`;
+ waveCtx.lineWidth = 2;
+ waveCtx.stroke();
+
+ time += 0.05;
+ requestAnimationFrame(drawWave);
+ }
+
+ drawWave();
+ }
+
+ // Initialize settings controls
+ function initSettings() {
+ const brightness = document.getElementById('brightness');
+ const speed = document.getElementById('speed');
+ const colorTheme = document.getElementById('colorTheme');
+
+ brightness.addEventListener('input', (e) => {
+ document.documentElement.style.setProperty('--brightness', `${e.target.value}%`);
+ });
+
+ speed.addEventListener('input', (e) => {
+ document.documentElement.style.setProperty('--animation-speed', `${e.target.value}s`);
+ });
+
+ colorTheme.addEventListener('change', (e) => {
+ document.body.classList.remove('light', 'dark', 'custom');
+ document.body.classList.add(e.target.value.toLowerCase());
+ });
+ }
+
+ // Initialize everything
+ document.addEventListener('DOMContentLoaded', () => {
+ initWallpapers();
+ initSettings();
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #6d5dfc;
+ --secondary-color: #8abdff;
+ --background-light: #f5f9ff;
+ --background-dark: #1e1e2e;
+ --text-light: #333;
+ --text-dark: #f5f5f5;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ margin: 0;
+ padding: 0;
+ background: var(--background-light);
+ color: var(--text-light);
+ transition: all 0.3s ease;
+ }
+
+ .hero {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ padding: 4rem 2rem;
+ text-align: center;
+ }
+
+ .hero-content h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ animation: fadeIn 1s ease;
+ }
+
+ .primary-button {
+ background: white;
+ color: var(--primary-color);
+ padding: 0.8rem 2rem;
+ border-radius: 25px;
+ text-decoration: none;
+ font-weight: bold;
+ transition: all 0.3s ease;
+ }
+
+ .primary-button:hover {
+ transform: scale(1.05);
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+ }
+
+ .wallpaper-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+ }
+
+ .wallpaper-card {
+ background: white;
+ border-radius: 15px;
+ overflow: hidden;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+ }
+
+ .wallpaper-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .wallpaper-preview {
+ height: 200px;
+ background: var(--background-dark);
+ position: relative;
+ overflow: hidden;
+ }
+
+ #wallpaper1 {
+ background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+ background-size: 400% 400%;
+ animation: gradientBG 15s ease infinite;
+ }
+
+ #wallpaper2 {
+ background: var(--background-dark);
+ }
+
+ #wallpaper3 {
+ background: linear-gradient(135deg, #ff9a9e, #fad0c4);
+ }
+
+ @keyframes gradientBG {
+ 0% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+ 100% { background-position: 0% 50%; }
+ }
+
+ @keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+
+ @media (max-width: 768px) {
+ .hero-content h1 {
+ font-size: 2rem;
+ }
+
+ .wallpaper-grid {
+ grid-template-columns: 1fr;
+ }
+ }