index.scroll
Changed around line 1
- editButton
- title Merry Christmas 2024
+ editButton /edit.html?folderName=merrydev.scroll.pub&fileName=index.scroll
+ title Merry Scroll Christmas 2024
style.css
Changed around line 6
- -text: #2c3e50;
+ .abstractIconButtonParser {
+ z-index: 2;
+ }
+
body.html
Changed around line 1
-
Merry Scroll Christmas
+
Merry Christmas
index.scroll
Changed around line 2: buildHtml
- title Merry Scroll Christmas 2024
+ title Merry Christmas 2024
script.js
Changed around line 5: document.addEventListener("DOMContentLoaded", () => {
+ setTimeout(createSnowfall, 2500);
+ setTimeout(createSnowfall, 3000);
+ setTimeout(createSnowfall, 3500);
script.js
Changed around line 1
- setTimeout(createSnowfall, 300);
- setTimeout(createSnowfall, 700);
- setTimeout(createSnowfall, 1100);
+ setTimeout(createSnowfall, 1000);
+ setTimeout(createSnowfall, 1500);
+ setTimeout(createSnowfall, 2000);
script.js
Changed around line 2: document.addEventListener("DOMContentLoaded", () => {
+ setTimeout(createSnowfall, 500);
+ setTimeout(createSnowfall, 1100);
script.js
Changed around line 1
+ setTimeout(createSnowfall, 100);
+ setTimeout(createSnowfall, 300);
+ setTimeout(createSnowfall, 700);
script.js
Changed around line 4: document.addEventListener("DOMContentLoaded", () => {
- const flakeCount = 1000;
+ const flakeCount = 50;
script.js
Changed around line 4: document.addEventListener("DOMContentLoaded", () => {
- const flakeCount = 100;
+ const flakeCount = 1000;
script.js
Changed around line 1
- document.addEventListener('DOMContentLoaded', () => {
+ document.addEventListener("DOMContentLoaded", () => {
- const snowfall = document.querySelector('.snowfall');
- const flakeCount = 50;
+ const snowfall = document.querySelector(".snowfall");
+ const flakeCount = 100;
Changed around line 12: function createSnowfall() {
- const flake = document.createElement('div');
+ const flake = document.createElement("div");
-
+
Changed around line 29: function createSnowflake(container) {
- flake.addEventListener('animationend', () => {
+ flake.addEventListener("animationend", () => {
- styleSheet.insertRule(`
+ styleSheet.insertRule(
+ `
Changed around line 46: styleSheet.insertRule(`
- `, styleSheet.cssRules.length);
+ `,
+ styleSheet.cssRules.length,
+ );
style.css
Changed around line 2
- -primary: #1a472a;
- -secondary: #c41e3a;
- -accent: #ffd700;
- --background: #00080f;
+ --background: #10181f;
- -text: #2c3e50;
style.css
Changed around line 2
- -primary: #1a472a;
- -secondary: #c41e3a;
- -accent: #ffd700;
- --background: #a0a8af;
+ --background: #00080f;
- -text: #2c3e50;
style.css
Changed around line 2
- -primary: #1a472a;
- -secondary: #c41e3a;
- -accent: #ffd700;
- --background: #f0f8ff;
+ --background: #a0a8af;
- -text: #2c3e50;
Changed around line 13
- font-family: system-ui, -apple-system, sans-serif;
+ font-family:
+ system-ui,
+ -apple-system,
+ sans-serif;
Changed around line 86: body {
- .gratitude-list li:nth-child(1) { animation-delay: 0.8s; }
- .gratitude-list li:nth-child(2) { animation-delay: 1.0s; }
- .gratitude-list li:nth-child(3) { animation-delay: 1.2s; }
- .gratitude-list li:nth-child(4) { animation-delay: 1.4s; }
- .gratitude-list li:nth-child(5) { animation-delay: 1.6s; }
- .gratitude-list li:nth-child(6) { animation-delay: 1.8s; }
+ .gratitude-list li:nth-child(1) {
+ animation-delay: 0.8s;
+ }
+ .gratitude-list li:nth-child(2) {
+ animation-delay: 1s;
+ }
+ .gratitude-list li:nth-child(3) {
+ animation-delay: 1.2s;
+ }
+ .gratitude-list li:nth-child(4) {
+ animation-delay: 1.4s;
+ }
+ .gratitude-list li:nth-child(5) {
+ animation-delay: 1.6s;
+ }
+ .gratitude-list li:nth-child(6) {
+ animation-delay: 1.8s;
+ }
Changed around line 122: footer {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
Changed around line 145: footer {
-
+
body.html
Changed around line 1
+
+
+
+
Merry Scroll Christmas
+
2024
+
+
Thank you all for:
+
+ trying Scroll
+ breaking Scroll
+ fixing Scroll
+ simplifying Scroll
+ making Scroll do more
+ and most importantly...
+
+
using Scroll to think better
+
+
+
+
+
Made with joy for the Scroll community
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://merrydev.scroll.pub
+ metaTags
+ editButton
+ title Merry Scroll Christmas 2024
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # merrydev.scroll.pub
+ Website generated from prompt: Merry Christmas 2024. Thank you all for trying Scroll, breaking Scroll, fixing Scroll, simplifying Scroll, making Scroll do more, and most importantly, using Scroll to think better.
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ createSnowfall();
+ });
+
+ function createSnowfall() {
+ const snowfall = document.querySelector('.snowfall');
+ const flakeCount = 50;
+
+ for (let i = 0; i < flakeCount; i++) {
+ createSnowflake(snowfall);
+ }
+ }
+
+ function createSnowflake(container) {
+ const flake = document.createElement('div');
+ const size = Math.random() * 5 + 2;
+
+ flake.style.cssText = `
+ position: absolute;
+ width: ${size}px;
+ height: ${size}px;
+ background: white;
+ border-radius: 50%;
+ pointer-events: none;
+ animation: fall ${Math.random() * 5 + 5}s linear infinite;
+ left: ${Math.random() * 100}vw;
+ opacity: ${Math.random() * 0.7 + 0.3};
+ `;
+
+ container.appendChild(flake);
+
+ flake.addEventListener('animationend', () => {
+ flake.remove();
+ createSnowflake(container);
+ });
+ }
+
+ const styleSheet = document.styleSheets[0];
+ styleSheet.insertRule(`
+ @keyframes fall {
+ 0% {
+ transform: translateY(-5vh) rotate(0deg);
+ }
+ 100% {
+ transform: translateY(105vh) rotate(360deg);
+ }
+ }
+ `, styleSheet.cssRules.length);
style.css
Changed around line 1
+ :root {
+ --primary: #1a472a;
+ --secondary: #c41e3a;
+ --accent: #ffd700;
+ --background: #f0f8ff;
+ --text: #2c3e50;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--background);
+ color: var(--text);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ overflow-x: hidden;
+ }
+
+ .container {
+ flex: 1;
+ padding: 2rem;
+ position: relative;
+ }
+
+ .snowfall {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1;
+ }
+
+ .hero {
+ max-width: 800px;
+ margin: 0 auto;
+ text-align: center;
+ position: relative;
+ z-index: 2;
+ padding: 2rem;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 1rem;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(10px);
+ }
+
+ .title {
+ font-size: clamp(2rem, 8vw, 4rem);
+ color: var(--primary);
+ margin-bottom: 1rem;
+ animation: fadeIn 1s ease-out;
+ }
+
+ .year {
+ font-size: clamp(1.5rem, 6vw, 3rem);
+ color: var(--secondary);
+ font-weight: bold;
+ margin-bottom: 2rem;
+ animation: fadeIn 1s ease-out 0.3s backwards;
+ }
+
+ .message {
+ font-size: clamp(1rem, 4vw, 1.25rem);
+ line-height: 1.6;
+ animation: fadeIn 1s ease-out 0.6s backwards;
+ }
+
+ .gratitude-list {
+ list-style: none;
+ margin: 1.5rem 0;
+ }
+
+ .gratitude-list li {
+ margin: 0.5rem 0;
+ opacity: 0;
+ animation: slideIn 0.5s ease-out forwards;
+ }
+
+ .gratitude-list li:nth-child(1) { animation-delay: 0.8s; }
+ .gratitude-list li:nth-child(2) { animation-delay: 1.0s; }
+ .gratitude-list li:nth-child(3) { animation-delay: 1.2s; }
+ .gratitude-list li:nth-child(4) { animation-delay: 1.4s; }
+ .gratitude-list li:nth-child(5) { animation-delay: 1.6s; }
+ .gratitude-list li:nth-child(6) { animation-delay: 1.8s; }
+
+ .highlight {
+ color: var(--secondary);
+ font-size: 1.2em;
+ font-weight: bold;
+ margin-top: 1.5rem;
+ opacity: 0;
+ animation: fadeIn 1s ease-out 2s forwards;
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary);
+ color: white;
+ }
+
+ @keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+ }
+
+ @keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateX(-30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+ }
+
+ @media (max-width: 600px) {
+ .container {
+ padding: 1rem;
+ }
+
+ .hero {
+ padding: 1.5rem;
+ }
+ }