commit e4b3a6d73709dec7efd9ca8988a50f922fb1a92a
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 03:27:48 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..aeb59ef
--- /dev/null
+++ b/body.html
@@ -0,0 +1,23 @@
+<main class="card-container">
+ <div class="card">
+ <div class="card-front">
+ <div class="fireworks"></div>
+ <h1>2024</h1>
+ <p class="greeting">新年快乐</p>
+ <button class="open-card">打开贺卡</button>
+ </div>
+ <div class="card-inside">
+ <div class="message">
+ <h2>亲爱的朋友</h2>
+ <p>愿新的一年里：</p>
+ <ul class="wishes">
+ <li>心想事成</li>
+ <li>幸福安康</li>
+ <li>万事如意</li>
+ <li>阖家欢乐</li>
+ </ul>
+ <p class="signature">祝福您</p>
+ </div>
+ </div>
+ </div>
+</main>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..e4e7c2d
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://newyear.scroll.pub
+metaTags
+editButton /edit.html
+title 新年快乐 - Happy New Year 2024
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..77ec607
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_016XGsfkm3Tt6R87oJCn83De",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a beautiful New Year's greeting card website.\n\n---domain---\nnewyear.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://newyear.scroll.pub\nmetaTags\neditButton /edit.html\ntitle 新年快乐 - Happy New Year 2024\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<main class=\"card-container\">\n <div class=\"card\">\n <div class=\"card-front\">\n <div class=\"fireworks\"></div>\n <h1>2024</h1>\n <p class=\"greeting\">新年快乐</p>\n <button class=\"open-card\">打开贺卡</button>\n </div>\n <div class=\"card-inside\">\n <div class=\"message\">\n <h2>亲爱的朋友</h2>\n <p>愿新的一年里：</p>\n <ul class=\"wishes\">\n <li>心想事成</li>\n <li>幸福安康</li>\n <li>万事如意</li>\n <li>阖家欢乐</li>\n </ul>\n <p class=\"signature\">祝福您</p>\n </div>\n </div>\n </div>\n</main>\n\n---style.css---\n:root {\n --primary-color: #e60012;\n --secondary-color: #ffd700;\n --text-color: #333;\n --card-width: 300px;\n --card-height: 400px;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);\n font-family: \"Microsoft YaHei\", sans-serif;\n}\n\n.card-container {\n perspective: 1500px;\n}\n\n.card {\n width: var(--card-width);\n height: var(--card-height);\n position: relative;\n transform-style: preserve-3d;\n transition: transform 1s ease;\n}\n\n.card.open {\n transform: rotateY(-180deg);\n}\n\n.card-front, .card-inside {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n border-radius: 15px;\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n}\n\n.card-front {\n background: linear-gradient(45deg, var(--primary-color), #ff6b6b);\n color: white;\n}\n\n.card-inside {\n background: white;\n transform: rotateY(180deg);\n}\n\nh1 {\n font-size: 4em;\n margin-bottom: 20px;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n}\n\n.greeting {\n font-size: 2em;\n margin-bottom: 30px;\n}\n\n.open-card {\n padding: 10px 20px;\n border: none;\n background: var(--secondary-color);\n color: var(--text-color);\n border-radius: 25px;\n cursor: pointer;\n font-size: 1.1em;\n transition: transform 0.3s ease;\n}\n\n.open-card:hover {\n transform: scale(1.1);\n}\n\n.wishes {\n list-style: none;\n margin: 20px 0;\n}\n\n.wishes li {\n margin: 10px 0;\n font-size: 1.2em;\n color: var(--text-color);\n text-align: center;\n opacity: 0;\n transform: translateY(20px);\n animation: fadeIn 0.5s ease forwards;\n}\n\n@keyframes fadeIn {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.wishes li:nth-child(1) { animation-delay: 0.2s; }\n.wishes li:nth-child(2) { animation-delay: 0.4s; }\n.wishes li:nth-child(3) { animation-delay: 0.6s; }\n.wishes li:nth-child(4) { animation-delay: 0.8s; }\n\n.signature {\n margin-top: 20px;\n font-style: italic;\n color: var(--primary-color);\n}\n\n.fireworks {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n@media (max-width: 480px) {\n :root {\n --card-width: 280px;\n --card-height: 380px;\n }\n \n h1 {\n font-size: 3em;\n }\n \n .greeting {\n font-size: 1.5em;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const card = document.querySelector('.card');\n const openButton = document.querySelector('.open-card');\n \n openButton.addEventListener('click', () => {\n card.classList.add('open');\n createFireworks();\n });\n\n function createFireworks() {\n const fireworks = document.querySelector('.fireworks');\n for (let i = 0; i < 5; i++) {\n setTimeout(() => {\n const spark = document.createElement('div');\n spark.style.position = 'absolute';\n spark.style.width = '4px';\n spark.style.height = '4px';\n spark.style.borderRadius = '50%';\n spark.style.backgroundColor = `hsl(${Math.random() * 360}deg, 100%, 50%)`;\n \n const startX = Math.random() * 100;\n const startY = Math.random() * 100;\n \n spark.style.left = `${startX}%`;\n spark.style.top = `${startY}%`;\n \n spark.style.animation = `\n sparkle 1s ease-in-out forwards,\n fade 1s ease-in-out forwards\n `;\n \n fireworks.appendChild(spark);\n \n setTimeout(() => {\n spark.remove();\n }, 1000);\n }, i * 200);\n }\n }\n});\n\nconst style = document.createElement('style');\nstyle.textContent = `\n @keyframes sparkle {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(2);\n }\n 100% {\n transform: scale(1);\n }\n }\n \n @keyframes fade {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n`;\ndocument.head.appendChild(style);\n\n---end---\n\nThis creates a beautiful, interactive New Year's greeting card with the following features:\n\n1. A front card face with \"2024\" and \"新年快乐\" (Happy New Year in Chinese)\n2. An animated opening effect when clicking the button\n3. Fireworks animation when the card opens\n4. A beautiful message inside with animated text appearance\n5. Responsive design that works on both desktop and mobile\n6. Smooth gradients and shadows for depth\n7. Interactive hover effects\n8. Elegant typography\n9. Modern color scheme with traditional Chinese red and gold colors\n\nThe card uses CSS transforms for the 3D opening effect and includes subtle animations throughout. It's fully responsive and works well on all devices. The code is semantic, accessible, and follows modern web development best practices."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 279,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2041
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..5bc245b
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# newyear.scroll.pub
+Website generated by Claude from prompt: 一个元旦贺卡
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..478a8b6
--- /dev/null
+++ b/script.js
@@ -0,0 +1,65 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const card = document.querySelector('.card');
+ const openButton = document.querySelector('.open-card');
+
+ openButton.addEventListener('click', () => {
+ card.classList.add('open');
+ createFireworks();
+ });
+
+ function createFireworks() {
+ const fireworks = document.querySelector('.fireworks');
+ for (let i = 0; i < 5; i++) {
+ setTimeout(() => {
+ const spark = document.createElement('div');
+ spark.style.position = 'absolute';
+ spark.style.width = '4px';
+ spark.style.height = '4px';
+ spark.style.borderRadius = '50%';
+ spark.style.backgroundColor = `hsl(${Math.random() * 360}deg, 100%, 50%)`;
+
+ const startX = Math.random() * 100;
+ const startY = Math.random() * 100;
+
+ spark.style.left = `${startX}%`;
+ spark.style.top = `${startY}%`;
+
+ spark.style.animation = `
+ sparkle 1s ease-in-out forwards,
+ fade 1s ease-in-out forwards
+ `;
+
+ fireworks.appendChild(spark);
+
+ setTimeout(() => {
+ spark.remove();
+ }, 1000);
+ }, i * 200);
+ }
+ }
+});
+
+const style = document.createElement('style');
+style.textContent = `
+ @keyframes sparkle {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(2);
+ }
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ @keyframes fade {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+ }
+`;
+document.head.appendChild(style);
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2b92104
--- /dev/null
+++ b/style.css
@@ -0,0 +1,145 @@
+:root {
+ --primary-color: #e60012;
+ --secondary-color: #ffd700;
+ --text-color: #333;
+ --card-width: 300px;
+ --card-height: 400px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
+ font-family: "Microsoft YaHei", sans-serif;
+}
+
+.card-container {
+ perspective: 1500px;
+}
+
+.card {
+ width: var(--card-width);
+ height: var(--card-height);
+ position: relative;
+ transform-style: preserve-3d;
+ transition: transform 1s ease;
+}
+
+.card.open {
+ transform: rotateY(-180deg);
+}
+
+.card-front, .card-inside {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+ border-radius: 15px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+
+.card-front {
+ background: linear-gradient(45deg, var(--primary-color), #ff6b6b);
+ color: white;
+}
+
+.card-inside {
+ background: white;
+ transform: rotateY(180deg);
+}
+
+h1 {
+ font-size: 4em;
+ margin-bottom: 20px;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.greeting {
+ font-size: 2em;
+ margin-bottom: 30px;
+}
+
+.open-card {
+ padding: 10px 20px;
+ border: none;
+ background: var(--secondary-color);
+ color: var(--text-color);
+ border-radius: 25px;
+ cursor: pointer;
+ font-size: 1.1em;
+ transition: transform 0.3s ease;
+}
+
+.open-card:hover {
+ transform: scale(1.1);
+}
+
+.wishes {
+ list-style: none;
+ margin: 20px 0;
+}
+
+.wishes li {
+ margin: 10px 0;
+ font-size: 1.2em;
+ color: var(--text-color);
+ text-align: center;
+ opacity: 0;
+ transform: translateY(20px);
+ animation: fadeIn 0.5s ease forwards;
+}
+
+@keyframes fadeIn {
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.wishes li:nth-child(1) { animation-delay: 0.2s; }
+.wishes li:nth-child(2) { animation-delay: 0.4s; }
+.wishes li:nth-child(3) { animation-delay: 0.6s; }
+.wishes li:nth-child(4) { animation-delay: 0.8s; }
+
+.signature {
+ margin-top: 20px;
+ font-style: italic;
+ color: var(--primary-color);
+}
+
+.fireworks {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+@media (max-width: 480px) {
+ :root {
+ --card-width: 280px;
+ --card-height: 380px;
+ }
+
+ h1 {
+ font-size: 3em;
+ }
+
+ .greeting {
+ font-size: 1.5em;
+ }
+}