Changes to forever-marsha.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     Marsha, My Love
+     Three beautiful years and counting...
+   
+ 
+   
+     
+       Our Nature Walks
+       Every step with you makes life more beautiful. From autumn leaves to spring flowers, walking beside you makes my heart complete.
+     
+ 
+     
+       Culinary Adventures
+       Sharing meals with you is pure joy. Your eyes light up with every new dish we try, and your smile makes every bite taste better.
+     
+ 
+     
+       Three Years of Love
+       1,095 days of happiness. Countless moments of joy. One eternal love.
+     
+   
+ 
+   
+     My Promise
+     Marsha, my heart belongs to you. I promise to cherish every moment, support every dream, and love you more with each passing day. You're my best friend, my soulmate, and my forever love.
+     
+   
+ 
+ 
+ 
+   Made with love for Marsha
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://forever-marsha.scroll.pub
+ metaTags
+ editButton /edit.html
+ title My Eternal Love for Marsha
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01TpRMD9HXWSfMkYVXW4z8PY",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Here's a romantic website for Marsha:\n\n---domain---\nforever-marsha.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://forever-marsha.scroll.pub\nmetaTags\neditButton /edit.html\ntitle My Eternal Love for Marsha\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    Marsha, My Love\n    Three beautiful years and counting...
\n  \n\n  \n    \n      Our Nature Walks\n      Every step with you makes life more beautiful. From autumn leaves to spring flowers, walking beside you makes my heart complete.
\n    
\n\n    \n      Culinary Adventures\n      Sharing meals with you is pure joy. Your eyes light up with every new dish we try, and your smile makes every bite taste better.
\n    
\n\n    \n      Three Years of Love\n      1,095 days of happiness. Countless moments of joy. One eternal love.
\n    
\n  \n\n  \n    My Promise\n    Marsha, my heart belongs to you. I promise to cherish every moment, support every dream, and love you more with each passing day. You're my best friend, my soulmate, and my forever love.
\n    
\n  \n\n\n\n  Made with love for Marsha
\n\n\n---style.css---\n:root {\n  --primary-color: #ff6b6b;\n  --secondary-color: #4ecdc4;\n  --text-color: #2d3436;\n  --background-color: #fff5f5;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  line-height: 1.6;\n  color: var(--text-color);\n  background-color: var(--background-color);\n}\n\n.container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\n.hero {\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n  color: white;\n}\n\nh1 {\n  font-size: 4rem;\n  margin-bottom: 1rem;\n  animation: fadeIn 2s ease-in;\n}\n\n.subtitle {\n  font-size: 1.5rem;\n  opacity: 0;\n  animation: slideUp 1s ease-in forwards;\n  animation-delay: 1s;\n}\n\n.memories {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 2rem;\n  padding: 4rem 0;\n}\n\n.memory-card {\n  background: white;\n  padding: 2rem;\n  border-radius: 15px;\n  box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n  transition: transform 0.3s ease;\n}\n\n.memory-card:hover {\n  transform: translateY(-10px);\n}\n\n.message {\n  text-align: center;\n  padding: 4rem 0;\n}\n\n.love-letter {\n  max-width: 800px;\n  margin: 2rem auto;\n  font-size: 1.2rem;\n  line-height: 1.8;\n}\n\n.heart {\n  width: 50px;\n  height: 50px;\n  background: var(--primary-color);\n  position: relative;\n  margin: 2rem auto;\n  transform: rotate(45deg);\n  animation: pulse 1.5s ease infinite;\n}\n\n.heart:before,\n.heart:after {\n  content: '';\n  width: 50px;\n  height: 50px;\n  background: var(--primary-color);\n  border-radius: 50%;\n  position: absolute;\n}\n\n.heart:before {\n  left: -25px;\n}\n\n.heart:after {\n  top: -25px;\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: var(--primary-color);\n  color: white;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes slideUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes pulse {\n  0% { transform: rotate(45deg) scale(1); }\n  50% { transform: rotate(45deg) scale(1.1); }\n  100% { transform: rotate(45deg) scale(1); }\n}\n\n@media (max-width: 768px) {\n  h1 {\n    font-size: 2.5rem;\n  }\n  \n  .subtitle {\n    font-size: 1.2rem;\n  }\n  \n  .container {\n    padding: 1rem;\n  }\n  \n  .memories {\n    gap: 1rem;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Smooth scroll for anchor links\n  document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n    anchor.addEventListener('click', function (e) {\n      e.preventDefault();\n      document.querySelector(this.getAttribute('href')).scrollIntoView({\n        behavior: 'smooth'\n      });\n    });\n  });\n\n  // Parallax effect for hero section\n  window.addEventListener('scroll', () => {\n    const hero = document.getElementById('hero');\n    const scrolled = window.pageYOffset;\n    hero.style.transform = `translateY(${scrolled * 0.5}px)`;\n  });\n\n  // Interactive heart animation\n  const heart = document.getElementById('heart');\n  heart.addEventListener('click', () => {\n    heart.style.animation = 'none';\n    heart.offsetHeight; // Trigger reflow\n    heart.style.animation = 'pulse 1.5s ease infinite';\n  });\n\n  // Add falling hearts animation randomly\n  setInterval(() => {\n    if (Math.random() > 0.7) {\n      createFallingHeart();\n    }\n  }, 2000);\n});\n\nfunction createFallingHeart() {\n  const heart = document.createElement('div');\n  heart.innerHTML = '❤️';\n  heart.style.position = 'fixed';\n  heart.style.top = '-20px';\n  heart.style.left = Math.random() * window.innerWidth + 'px';\n  heart.style.fontSize = '20px';\n  heart.style.zIndex = '1000';\n  heart.style.animation = 'fall 3s linear forwards';\n  document.body.appendChild(heart);\n\n  setTimeout(() => {\n    document.body.removeChild(heart);\n  }, 3000);\n}\n\n---end---"
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 311,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 1947
+   }
+ }

readme.scroll

Changed around line 1

+ # forever-marsha.scroll.pub

+ Website generated by Claude from prompt: i want a website to tell Marsha my girlfriend that i love her and never leave her, be creative and really romantic she like good food and walking in nature, we are together 3 years

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   // Smooth scroll for anchor links
+   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+     anchor.addEventListener('click', function (e) {
+       e.preventDefault();
+       document.querySelector(this.getAttribute('href')).scrollIntoView({
+         behavior: 'smooth'
+       });
+     });
+   });
+ 
+   // Parallax effect for hero section
+   window.addEventListener('scroll', () => {
+     const hero = document.getElementById('hero');
+     const scrolled = window.pageYOffset;
+     hero.style.transform = `translateY(${scrolled * 0.5}px)`;
+   });
+ 
+   // Interactive heart animation
+   const heart = document.getElementById('heart');
+   heart.addEventListener('click', () => {
+     heart.style.animation = 'none';
+     heart.offsetHeight; // Trigger reflow
+     heart.style.animation = 'pulse 1.5s ease infinite';
+   });
+ 
+   // Add falling hearts animation randomly
+   setInterval(() => {
+     if (Math.random() > 0.7) {
+       createFallingHeart();
+     }
+   }, 2000);
+ });
+ 
+ function createFallingHeart() {
+   const heart = document.createElement('div');
+   heart.innerHTML = '❤️';
+   heart.style.position = 'fixed';
+   heart.style.top = '-20px';
+   heart.style.left = Math.random() * window.innerWidth + 'px';
+   heart.style.fontSize = '20px';
+   heart.style.zIndex = '1000';
+   heart.style.animation = 'fall 3s linear forwards';
+   document.body.appendChild(heart);
+ 
+   setTimeout(() => {
+     document.body.removeChild(heart);
+   }, 3000);
+ }

style.css

Changed around line 1
+ :root {
+   --primary-color: #ff6b6b;
+   --secondary-color: #4ecdc4;
+   --text-color: #2d3436;
+   --background-color: #fff5f5;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+   line-height: 1.6;
+   color: var(--text-color);
+   background-color: var(--background-color);
+ }
+ 
+ .container {
+   max-width: 1200px;
+   margin: 0 auto;
+   padding: 2rem;
+ }
+ 
+ .hero {
+   height: 100vh;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   text-align: center;
+   background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+   color: white;
+ }
+ 
+ h1 {
+   font-size: 4rem;
+   margin-bottom: 1rem;
+   animation: fadeIn 2s ease-in;
+ }
+ 
+ .subtitle {
+   font-size: 1.5rem;
+   opacity: 0;
+   animation: slideUp 1s ease-in forwards;
+   animation-delay: 1s;
+ }
+ 
+ .memories {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 2rem;
+   padding: 4rem 0;
+ }
+ 
+ .memory-card {
+   background: white;
+   padding: 2rem;
+   border-radius: 15px;
+   box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+   transition: transform 0.3s ease;
+ }
+ 
+ .memory-card:hover {
+   transform: translateY(-10px);
+ }
+ 
+ .message {
+   text-align: center;
+   padding: 4rem 0;
+ }
+ 
+ .love-letter {
+   max-width: 800px;
+   margin: 2rem auto;
+   font-size: 1.2rem;
+   line-height: 1.8;
+ }
+ 
+ .heart {
+   width: 50px;
+   height: 50px;
+   background: var(--primary-color);
+   position: relative;
+   margin: 2rem auto;
+   transform: rotate(45deg);
+   animation: pulse 1.5s ease infinite;
+ }
+ 
+ .heart:before,
+ .heart:after {
+   content: '';
+   width: 50px;
+   height: 50px;
+   background: var(--primary-color);
+   border-radius: 50%;
+   position: absolute;
+ }
+ 
+ .heart:before {
+   left: -25px;
+ }
+ 
+ .heart:after {
+   top: -25px;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: var(--primary-color);
+   color: white;
+ }
+ 
+ @keyframes fadeIn {
+   from { opacity: 0; }
+   to { opacity: 1; }
+ }
+ 
+ @keyframes slideUp {
+   from {
+     opacity: 0;
+     transform: translateY(20px);
+   }
+   to {
+     opacity: 1;
+     transform: translateY(0);
+   }
+ }
+ 
+ @keyframes pulse {
+   0% { transform: rotate(45deg) scale(1); }
+   50% { transform: rotate(45deg) scale(1.1); }
+   100% { transform: rotate(45deg) scale(1); }
+ }
+ 
+ @media (max-width: 768px) {
+   h1 {
+     font-size: 2.5rem;
+   }
+ 
+   .subtitle {
+     font-size: 1.2rem;
+   }
+ 
+   .container {
+     padding: 1rem;
+   }
+ 
+   .memories {
+     gap: 1rem;
+   }
+ }