commit b904425ec6e8b0a8a53e0d1800bbd2929eb18319
Author: ffff:76.126.35.15 <ffff:76.126.35.15@hub.scroll.pub>
Date: 2024-12-25 21:14:32 +0000
Subject: updated index.html
diff --git a/index.html b/index.html
index c5152ae..602375f 100644
--- a/index.html
+++ b/index.html
@@ -25,8 +25,9 @@
<div class="message">
<p class="thank-you">
- Thank you all for trying it, breaking it, fixing it, simplifying it,
- making it do more, and most importantly, using it to think better.
+ Thank you all for trying Scroll, breaking Scroll, fixing Scroll,
+ simplifying Scroll, making Scroll do more, and most importantly,
+ using Scroll to think better.
</p>
<p class="future">
Here's to an exciting <span class="year">2025</span>
commit f8e3e2a485b7dc4b13feb157338b7895bf9c4ebe
Author: ffff:76.126.35.15 <ffff:76.126.35.15@hub.scroll.pub>
Date: 2024-12-25 21:13:54 +0000
Subject: updated index.html
diff --git a/index.html b/index.html
index 250d7af..c5152ae 100644
--- a/index.html
+++ b/index.html
@@ -1,40 +1,51 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Season's greetings to the Scroll community - celebrating our achievements and looking forward to 2025">
- <meta name="keywords" content="Scroll, blockchain, Christmas, 2025, community">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta
+ name="description"
+ content="Season's greetings to the Scroll community - celebrating our achievements and looking forward to 2025"
+ />
+ <meta
+ name="keywords"
+ content="Scroll, blockchain, Christmas, 2025, community"
+ />
<title>Merry Christmas Scroll Community</title>
- <link rel="stylesheet" href="style.css">
-</head>
-<body>
+ <link rel="stylesheet" href="style.css" />
+ </head>
+ <body>
<div class="snowfall"></div>
<main class="container">
- <section class="hero">
- <h1 class="title">
- <span class="magical">Merry Christmas</span>
- <span class="community">Scroll Community</span>
- </h1>
-
- <div class="message">
- <p class="thank-you">Thank you all for trying it,<br>making it better.</p>
- <p class="future">Here's to an exciting <span class="year">2025</span></p>
- </div>
+ <section class="hero">
+ <h1 class="title">
+ <span class="magical">Merry Christmas</span>
+ <span class="community">Scroll Community</span>
+ </h1>
- <div class="decoration">
- <div class="tree">
- <div class="star"></div>
- <div class="tree-body"></div>
- <div class="trunk"></div>
- </div>
- </div>
- </section>
+ <div class="message">
+ <p class="thank-you">
+ Thank you all for trying it, breaking it, fixing it, simplifying it,
+ making it do more, and most importantly, using it to think better.
+ </p>
+ <p class="future">
+ Here's to an exciting <span class="year">2025</span>
+ </p>
+ </div>
+
+ <div class="decoration">
+ <div class="tree">
+ <div class="star"></div>
+ <div class="tree-body"></div>
+ <div class="trunk"></div>
+ </div>
+ </div>
+ </section>
</main>
<footer>
- <p>Made with ❄️ for the Scroll Community</p>
+ <p>Made with ❄️ for the Scroll Community</p>
</footer>
<script src="script.js"></script>
-</body>
+ </body>
</html>
commit bc11bd8258b213720066f62f6274e34d53a4d3a6
Author: root <root@hub.scroll.pub>
Date: 2024-12-25 21:12:07 +0000
Subject: Initial commit
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6f368fa
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+# merryscroll.scroll.pub
+Website generated from prompt: Merry Christmas to the Scroll Community. Thank you all for trying it, making it better. Here's to an exciting 2025
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..250d7af
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="Season's greetings to the Scroll community - celebrating our achievements and looking forward to 2025">
+ <meta name="keywords" content="Scroll, blockchain, Christmas, 2025, community">
+ <title>Merry Christmas Scroll Community</title>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <div class="snowfall"></div>
+ <main class="container">
+ <section class="hero">
+ <h1 class="title">
+ <span class="magical">Merry Christmas</span>
+ <span class="community">Scroll Community</span>
+ </h1>
+
+ <div class="message">
+ <p class="thank-you">Thank you all for trying it,<br>making it better.</p>
+ <p class="future">Here's to an exciting <span class="year">2025</span></p>
+ </div>
+
+ <div class="decoration">
+ <div class="tree">
+ <div class="star"></div>
+ <div class="tree-body"></div>
+ <div class="trunk"></div>
+ </div>
+ </div>
+ </section>
+ </main>
+
+ <footer>
+ <p>Made with ❄️ for the Scroll Community</p>
+ </footer>
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..cc5ae43
--- /dev/null
+++ b/script.js
@@ -0,0 +1,50 @@
+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;
+ const startPosition = Math.random() * window.innerWidth;
+ const animationDuration = Math.random() * 3 + 2;
+ const opacity = Math.random() * 0.6 + 0.4;
+
+ flake.style.cssText = `
+ position: absolute;
+ top: -10px;
+ left: ${startPosition}px;
+ width: ${size}px;
+ height: ${size}px;
+ background: white;
+ border-radius: 50%;
+ opacity: ${opacity};
+ pointer-events: none;
+ animation: fall ${animationDuration}s linear infinite;
+ `;
+
+ container.appendChild(flake);
+
+ flake.addEventListener('animationend', () => {
+ flake.remove();
+ createSnowflake(container);
+ });
+}
+
+const style = document.createElement('style');
+style.textContent = `
+ @keyframes fall {
+ to {
+ transform: translateY(100vh) rotate(360deg);
+ }
+ }
+`;
+document.head.appendChild(style);
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1889721
--- /dev/null
+++ b/style.css
@@ -0,0 +1,156 @@
+:root {
+ --primary: #0a4d35;
+ --accent: #e4392d;
+ --gold: #ffd700;
+ --snow: #ffffff;
+ --bg: #041420;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background: var(--bg);
+ color: var(--snow);
+ font-family: system-ui, sans-serif;
+ min-height: 100vh;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.container {
+ min-height: 90vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+}
+
+.hero {
+ text-align: center;
+ position: relative;
+ z-index: 2;
+}
+
+.title {
+ font-size: clamp(2rem, 8vw, 4.5rem);
+ line-height: 1.2;
+ margin-bottom: 2rem;
+}
+
+.magical {
+ display: block;
+ background: linear-gradient(45deg, var(--accent), var(--gold));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ animation: sparkle 2s infinite;
+}
+
+.community {
+ display: block;
+ color: var(--snow);
+ font-size: 0.8em;
+}
+
+.message {
+ font-size: clamp(1.2rem, 4vw, 2rem);
+ line-height: 1.5;
+ margin-bottom: 3rem;
+}
+
+.year {
+ color: var(--gold);
+ font-weight: bold;
+}
+
+.tree {
+ position: relative;
+ margin: 4rem auto;
+ width: 200px;
+ height: 300px;
+}
+
+.tree-body {
+ position: absolute;
+ bottom: 30px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 0;
+ height: 0;
+ border-left: 100px solid transparent;
+ border-right: 100px solid transparent;
+ border-bottom: 200px solid var(--primary);
+ animation: glow 3s infinite;
+}
+
+.star {
+ position: absolute;
+ top: -20px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 40px;
+ height: 40px;
+ background: var(--gold);
+ clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
+ animation: twinkle 1s infinite;
+}
+
+.trunk {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 40px;
+ height: 30px;
+ background: #5d3a1a;
+}
+
+.snowfall {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1;
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ font-size: 0.9rem;
+ position: relative;
+ z-index: 2;
+}
+
+@keyframes sparkle {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.7; }
+}
+
+@keyframes glow {
+ 0%, 100% { filter: brightness(1); }
+ 50% { filter: brightness(1.2); }
+}
+
+@keyframes twinkle {
+ 0%, 100% { transform: translateX(-50%) scale(1); }
+ 50% { transform: translateX(-50%) scale(1.2); }
+}
+
+@media (max-width: 768px) {
+ .tree {
+ width: 150px;
+ height: 225px;
+ }
+
+ .tree-body {
+ border-left-width: 75px;
+ border-right-width: 75px;
+ border-bottom-width: 150px;
+ }
+}