commit 11568a791bf5318b2f5ff5a70e18ddba13ea60cd
Author: ffff:103.172.183.54 <ffff:103.172.183.54@hub.scroll.pub>
Date: 2024-12-30 12:27:09 +0000
Subject: updated script.js
diff --git a/script.js b/script.js
index 0ab555c..dae322e 100644
--- a/script.js
+++ b/script.js
@@ -1,44 +1,46 @@
-document.addEventListener('DOMContentLoaded', () => {
- const startDate = new Date('2023-01-01').getTime(); // Set your actual start date
-
+document.addEventListener("DOMContentLoaded", () => {
+ const startDate = new Date("2024-01-20").getTime(); // Set your actual start date
+
function updateLoveTimer() {
const now = new Date().getTime();
const difference = now - startDate;
-
+
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
- const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+ const hours = Math.floor(
+ (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
+ );
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
-
- document.getElementById('loveTimer').textContent =
+
+ document.getElementById("loveTimer").textContent =
`${days}天 ${hours}小时 ${minutes}分钟`;
}
setInterval(updateLoveTimer, 1000);
function createHeart() {
- const heart = document.createElement('div');
- heart.innerHTML = '💖';
- heart.style.position = 'absolute';
- heart.style.left = Math.random() * 100 + '%';
- heart.style.top = '100%';
- heart.style.fontSize = (Math.random() * 20 + 10) + 'px';
- heart.style.animation = 'floatUp 4s linear forwards';
- document.querySelector('.floating-hearts').appendChild(heart);
+ const heart = document.createElement("div");
+ heart.innerHTML = "💖";
+ heart.style.position = "absolute";
+ heart.style.left = Math.random() * 100 + "%";
+ heart.style.top = "100%";
+ heart.style.fontSize = Math.random() * 20 + 10 + "px";
+ heart.style.animation = "floatUp 4s linear forwards";
+ document.querySelector(".floating-hearts").appendChild(heart);
setTimeout(() => heart.remove(), 4000);
}
- document.getElementById('sendLove').addEventListener('click', () => {
- for(let i = 0; i < 5; i++) {
+ document.getElementById("sendLove").addEventListener("click", () => {
+ for (let i = 0; i < 5; i++) {
setTimeout(createHeart, i * 200);
}
});
- document.getElementById('sendNote').addEventListener('click', () => {
- const note = document.getElementById('loveNote').value;
- if(note.trim()) {
- alert('你的爱意已经传达到啦! 💕');
- document.getElementById('loveNote').value = '';
+ document.getElementById("sendNote").addEventListener("click", () => {
+ const note = document.getElementById("loveNote").value;
+ if (note.trim()) {
+ alert("你的爱意已经传达到啦! 💕");
+ document.getElementById("loveNote").value = "";
}
});
@@ -46,7 +48,7 @@ document.addEventListener('DOMContentLoaded', () => {
setInterval(createHeart, 3000);
});
-const style = document.createElement('style');
+const style = document.createElement("style");
style.textContent = `
@keyframes floatUp {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
commit 57012ca536f657e4da00afa674551c13e303b9a1
Author: root <root@hub.scroll.pub>
Date: 2024-12-30 12:23:39 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..c4a4b20
--- /dev/null
+++ b/body.html
@@ -0,0 +1,40 @@
+<header>
+ <h1>💝 致我最爱的赵子涵 💝</h1>
+</header>
+
+<main>
+ <section class="love-message">
+ <div class="floating-hearts"></div>
+ <h2>亲爱的子涵：</h2>
+ <p>你是我生命中最美丽的风景，每一天因为有你而变得更加美好。</p>
+ </section>
+
+ <section class="interaction">
+ <div class="love-counter">
+ <h3>我们相爱的时光</h3>
+ <div id="loveTimer"></div>
+ </div>
+
+ <div class="love-buttons">
+ <button id="sendLove" class="pulse">发送爱心 💖</button>
+ <button id="writeNote" class="glow">写给你的话 ✉️</button>
+ </div>
+
+ <div class="message-box">
+ <textarea id="loveNote" placeholder="写下你想对我说的话..."></textarea>
+ <button id="sendNote" class="sparkle">发送给我的心上人 💌</button>
+ </div>
+ </section>
+
+ <section class="love-gallery">
+ <div class="memory-wall">
+ <div class="memory">我爱你的笑容 😊</div>
+ <div class="memory">我爱你的温柔 🌸</div>
+ <div class="memory">我爱与你在一起的每一刻 ⭐</div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>永远爱你的人</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..b671ddd
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://love-zihan.scroll.pub
+metaTags
+ description "A heartfelt expression of love for Zhao Zihan | 致我最爱的赵子涵"
+ keywords "love, romance, Zhao Zihan, 赵子涵, 爱情"
+editButton /edit.html
+title 我爱赵子涵 | My Love for Zhao Zihan
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..4df5c67
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_012ZcWEJkcEQhQvNMSVFViEL",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a romantic website expressing love for Zhao Zihan. Here's a suitable domain and the website files:\n\n---domain---\nlove-zihan.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://love-zihan.scroll.pub\nmetaTags\n description \"A heartfelt expression of love for Zhao Zihan | 致我最爱的赵子涵\"\n keywords \"love, romance, Zhao Zihan, 赵子涵, 爱情\"\neditButton /edit.html\ntitle 我爱赵子涵 | My Love for Zhao Zihan\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>💝 致我最爱的赵子涵 💝</h1>\n</header>\n\n<main>\n <section class=\"love-message\">\n <div class=\"floating-hearts\"></div>\n <h2>亲爱的子涵：</h2>\n <p>你是我生命中最美丽的风景，每一天因为有你而变得更加美好。</p>\n </section>\n\n <section class=\"interaction\">\n <div class=\"love-counter\">\n <h3>我们相爱的时光</h3>\n <div id=\"loveTimer\"></div>\n </div>\n\n <div class=\"love-buttons\">\n <button id=\"sendLove\" class=\"pulse\">发送爱心 💖</button>\n <button id=\"writeNote\" class=\"glow\">写给你的话 ✉️</button>\n </div>\n\n <div class=\"message-box\">\n <textarea id=\"loveNote\" placeholder=\"写下你想对我说的话...\"></textarea>\n <button id=\"sendNote\" class=\"sparkle\">发送给我的心上人 💌</button>\n </div>\n </section>\n\n <section class=\"love-gallery\">\n <div class=\"memory-wall\">\n <div class=\"memory\">我爱你的笑容 😊</div>\n <div class=\"memory\">我爱你的温柔 🌸</div>\n <div class=\"memory\">我爱与你在一起的每一刻 ⭐</div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>永远爱你的人</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #ff69b4;\n --secondary-color: #ff1493;\n --background-color: #fff5f8;\n --text-color: #333;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n background: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, #ff69b4, #ff1493);\n color: white;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nh1 {\n font-size: 2.5rem;\n animation: float 3s ease-in-out infinite;\n}\n\n.love-message {\n max-width: 800px;\n margin: 2rem auto;\n padding: 2rem;\n background: white;\n border-radius: 15px;\n box-shadow: 0 5px 20px rgba(255,105,180,0.2);\n position: relative;\n overflow: hidden;\n}\n\n.floating-hearts {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.love-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n margin: 2rem 0;\n}\n\nbutton {\n padding: 1rem 2rem;\n border: none;\n border-radius: 25px;\n font-size: 1.1rem;\n cursor: pointer;\n transition: all 0.3s ease;\n background: var(--primary-color);\n color: white;\n}\n\nbutton:hover {\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(255,105,180,0.4);\n}\n\n.pulse {\n animation: pulse 2s infinite;\n}\n\n.glow {\n animation: glow 2s infinite;\n}\n\n.message-box {\n max-width: 600px;\n margin: 2rem auto;\n}\n\ntextarea {\n width: 100%;\n height: 150px;\n padding: 1rem;\n border: 2px solid var(--primary-color);\n border-radius: 10px;\n resize: none;\n margin-bottom: 1rem;\n}\n\n.memory-wall {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n padding: 2rem;\n}\n\n.memory {\n background: white;\n padding: 1.5rem;\n border-radius: 10px;\n text-align: center;\n box-shadow: 0 3px 10px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.memory:hover {\n transform: translateY(-5px);\n}\n\n@keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n}\n\n@keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n}\n\n@keyframes glow {\n 0%, 100% { box-shadow: 0 0 5px var(--primary-color); }\n 50% { box-shadow: 0 0 20px var(--primary-color); }\n}\n\n@media (max-width: 768px) {\n h1 { font-size: 2rem; }\n .love-buttons { flex-direction: column; }\n button { width: 100%; }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const startDate = new Date('2023-01-01').getTime(); // Set your actual start date\n \n function updateLoveTimer() {\n const now = new Date().getTime();\n const difference = now - startDate;\n \n const days = Math.floor(difference / (1000 * 60 * 60 * 24));\n const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));\n \n document.getElementById('loveTimer').textContent = \n `${days}天 ${hours}小时 ${minutes}分钟`;\n }\n\n setInterval(updateLoveTimer, 1000);\n\n function createHeart() {\n const heart = document.createElement('div');\n heart.innerHTML = '💖';\n heart.style.position = 'absolute';\n heart.style.left = Math.random() * 100 + '%';\n heart.style.top = '100%';\n heart.style.fontSize = (Math.random() * 20 + 10) + 'px';\n heart.style.animation = 'floatUp 4s linear forwards';\n document.querySelector('.floating-hearts').appendChild(heart);\n\n setTimeout(() => heart.remove(), 4000);\n }\n\n document.getElementById('sendLove').addEventListener('click', () => {\n for(let i = 0; i < 5; i++) {\n setTimeout(createHeart, i * 200);\n }\n });\n\n document.getElementById('sendNote').addEventListener('click', () => {\n const note = document.getElementById('loveNote').value;\n if(note.trim()) {\n alert('你的爱意已经传达到啦! 💕');\n document.getElementById('loveNote').value = '';\n }\n });\n\n // Add floating hearts animation\n setInterval(createHeart, 3000);\n});\n\nconst style = document.createElement('style');\nstyle.textContent = `\n @keyframes floatUp {\n 0% { transform: translateY(0) rotate(0deg); opacity: 1; }\n 100% { transform: translateY(-1000%) rotate(720deg); opacity: 0; }\n }\n`;\ndocument.head.appendChild(style);\n\n---end---\n\nThis website features:\n1. A romantic header with floating animation\n2. Love timer showing time since a specific date\n3. Interactive buttons with beautiful hover effects\n4. A message box for writing love notes\n5. Floating hearts animation\n6. Memory wall with hover effects\n7. Fully responsive design\n8. Beautiful color scheme and animations\n9. Semantic HTML structure\n10. Modern CSS features including grid, flexbox, and animations\n\nThe design is clean, modern, and romantic, with smooth animations and interactive elements that create an engaging user experience."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 332,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2384
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..c50d737
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# love-zihan.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..0ab555c
--- /dev/null
+++ b/script.js
@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const startDate = new Date('2023-01-01').getTime(); // Set your actual start date
+
+ function updateLoveTimer() {
+ const now = new Date().getTime();
+ const difference = now - startDate;
+
+ const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+ const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+ const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+
+ document.getElementById('loveTimer').textContent =
+ `${days}天 ${hours}小时 ${minutes}分钟`;
+ }
+
+ setInterval(updateLoveTimer, 1000);
+
+ function createHeart() {
+ const heart = document.createElement('div');
+ heart.innerHTML = '💖';
+ heart.style.position = 'absolute';
+ heart.style.left = Math.random() * 100 + '%';
+ heart.style.top = '100%';
+ heart.style.fontSize = (Math.random() * 20 + 10) + 'px';
+ heart.style.animation = 'floatUp 4s linear forwards';
+ document.querySelector('.floating-hearts').appendChild(heart);
+
+ setTimeout(() => heart.remove(), 4000);
+ }
+
+ document.getElementById('sendLove').addEventListener('click', () => {
+ for(let i = 0; i < 5; i++) {
+ setTimeout(createHeart, i * 200);
+ }
+ });
+
+ document.getElementById('sendNote').addEventListener('click', () => {
+ const note = document.getElementById('loveNote').value;
+ if(note.trim()) {
+ alert('你的爱意已经传达到啦! 💕');
+ document.getElementById('loveNote').value = '';
+ }
+ });
+
+ // Add floating hearts animation
+ setInterval(createHeart, 3000);
+});
+
+const style = document.createElement('style');
+style.textContent = `
+ @keyframes floatUp {
+ 0% { transform: translateY(0) rotate(0deg); opacity: 1; }
+ 100% { transform: translateY(-1000%) rotate(720deg); opacity: 0; }
+ }
+`;
+document.head.appendChild(style);
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..3c567db
--- /dev/null
+++ b/style.css
@@ -0,0 +1,138 @@
+:root {
+ --primary-color: #ff69b4;
+ --secondary-color: #ff1493;
+ --background-color: #fff5f8;
+ --text-color: #333;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(135deg, #ff69b4, #ff1493);
+ color: white;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+h1 {
+ font-size: 2.5rem;
+ animation: float 3s ease-in-out infinite;
+}
+
+.love-message {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 2rem;
+ background: white;
+ border-radius: 15px;
+ box-shadow: 0 5px 20px rgba(255,105,180,0.2);
+ position: relative;
+ overflow: hidden;
+}
+
+.floating-hearts {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+.love-buttons {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ margin: 2rem 0;
+}
+
+button {
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 25px;
+ font-size: 1.1rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ background: var(--primary-color);
+ color: white;
+}
+
+button:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 5px 15px rgba(255,105,180,0.4);
+}
+
+.pulse {
+ animation: pulse 2s infinite;
+}
+
+.glow {
+ animation: glow 2s infinite;
+}
+
+.message-box {
+ max-width: 600px;
+ margin: 2rem auto;
+}
+
+textarea {
+ width: 100%;
+ height: 150px;
+ padding: 1rem;
+ border: 2px solid var(--primary-color);
+ border-radius: 10px;
+ resize: none;
+ margin-bottom: 1rem;
+}
+
+.memory-wall {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1rem;
+ padding: 2rem;
+}
+
+.memory {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 10px;
+ text-align: center;
+ box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+}
+
+.memory:hover {
+ transform: translateY(-5px);
+}
+
+@keyframes float {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-10px); }
+}
+
+@keyframes pulse {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.05); }
+ 100% { transform: scale(1); }
+}
+
+@keyframes glow {
+ 0%, 100% { box-shadow: 0 0 5px var(--primary-color); }
+ 50% { box-shadow: 0 0 20px var(--primary-color); }
+}
+
+@media (max-width: 768px) {
+ h1 { font-size: 2rem; }
+ .love-buttons { flex-direction: column; }
+ button { width: 100%; }
+}