Changes to whatsyourname.scroll.pub

root

22 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     What's your name?
+     
+       
+       
+     
+     
+   
+ 
+ 
+   Made with care by whatsyourname.scroll.pub
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://whatsyourname.scroll.pub
+ metaTags
+  description Ask and remember your name with a beautiful interactive experience
+  keywords name, interactive, personal
+ editButton /edit.html
+ title What's Your Name?
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01JM3bzrEJUUUGb5kX37xh4n",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll create a simple but elegant website that asks for and displays a user's name.\n\n---domain---\nwhatsyourname.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://whatsyourname.scroll.pub\nmetaTags\n description Ask and remember your name with a beautiful interactive experience\n keywords name, interactive, personal\neditButton /edit.html\ntitle What's Your Name?\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    What's your name?\n    \n      \n      \n    
\n    
\n  
\n\n\n  Made with care by whatsyourname.scroll.pub
\n\n\n---style.css---\n:root {\n  --primary-color: #6b48ff;\n  --secondary-color: #1a1a2e;\n  --accent-color: #ff6b6b;\n  --background: #f8f9fa;\n  --text-color: #2d2d2d;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  background: var(--background);\n  color: var(--text-color);\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.container {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 1rem;\n}\n\n.card {\n  background: white;\n  padding: 2.5rem;\n  border-radius: 1.5rem;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n  width: 100%;\n  max-width: 500px;\n  transform: translateY(0);\n  transition: transform 0.3s ease;\n}\n\n.card:hover {\n  transform: translateY(-5px);\n}\n\nh1 {\n  color: var(--secondary-color);\n  font-size: 2.5rem;\n  margin-bottom: 2rem;\n  text-align: center;\n  font-weight: 700;\n}\n\n.input-group {\n  display: flex;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n\ninput {\n  flex: 1;\n  padding: 1rem;\n  border: 2px solid #e0e0e0;\n  border-radius: 0.75rem;\n  font-size: 1.1rem;\n  transition: all 0.3s ease;\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px rgba(107, 72, 255, 0.2);\n}\n\nbutton {\n  padding: 1rem 1.5rem;\n  background: var(--primary-color);\n  color: white;\n  border: none;\n  border-radius: 0.75rem;\n  cursor: pointer;\n  font-size: 1.2rem;\n  transition: all 0.3s ease;\n}\n\nbutton:hover {\n  background: var(--secondary-color);\n  transform: translateX(2px);\n}\n\n.result {\n  text-align: center;\n  min-height: 50px;\n  font-size: 1.2rem;\n  color: var(--accent-color);\n  opacity: 0;\n  transform: translateY(20px);\n  transition: all 0.5s ease;\n}\n\n.result.show {\n  opacity: 1;\n  transform: translateY(0);\n}\n\nfooter {\n  text-align: center;\n  padding: 1.5rem;\n  color: #666;\n  font-size: 0.9rem;\n}\n\n@media (max-width: 480px) {\n  .card {\n    padding: 1.5rem;\n  }\n\n  h1 {\n    font-size: 2rem;\n  }\n\n  input {\n    padding: 0.8rem;\n  }\n\n  button {\n    padding: 0.8rem 1.2rem;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const nameInput = document.getElementById('nameInput');\n  const submitBtn = document.getElementById('submitBtn');\n  const result = document.getElementById('result');\n\n  const savedName = localStorage.getItem('userName');\n  if (savedName) {\n    showGreeting(savedName);\n  }\n\n  function handleSubmit() {\n    const name = nameInput.value.trim();\n    if (name) {\n      localStorage.setItem('userName', name);\n      showGreeting(name);\n      nameInput.value = '';\n    }\n  }\n\n  function showGreeting(name) {\n    const greetings = [\n      `Hello, ${name}! It's wonderful to meet you.`,\n      `Welcome back, ${name}!`,\n      `Glad to see you, ${name}!`,\n      `Hi ${name}, you have a beautiful name!`\n    ];\n    const greeting = greetings[Math.floor(Math.random() * greetings.length)];\n    \n    result.textContent = greeting;\n    result.classList.remove('show');\n    \n    // Force reflow\n    void result.offsetWidth;\n    \n    result.classList.add('show');\n  }\n\n  submitBtn.addEventListener('click', handleSubmit);\n  nameInput.addEventListener('keypress', (e) => {\n    if (e.key === 'Enter') {\n      handleSubmit();\n    }\n  });\n\n  // Add focus animation\n  nameInput.addEventListener('focus', () => {\n    document.querySelector('.card').style.transform = 'translateY(-8px)';\n  });\n\n  nameInput.addEventListener('blur', () => {\n    document.querySelector('.card').style.transform = 'translateY(0)';\n  });\n});\n\n---end---\n\nThis creates a beautiful, interactive website that:\n1. Asks for the user's name\n2. Stores it in localStorage\n3. Displays a random friendly greeting\n4. Features smooth animations and transitions\n5. Is fully responsive\n6. Follows accessibility best practices\n7. Uses semantic HTML\n8. Includes proper meta tags\n9. Has a clean, modern design with beautiful hover effects\n10. Works well on all devices\n\nThe design uses a modern color scheme with subtle shadows and animations to create an engaging but professional experience. The card floats on hover and when the input is focused, providing delightful user feedback."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 274,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 1767
+   }
+ }

readme.scroll

Changed around line 1

+ # whatsyourname.scroll.pub

+ Website generated by Claude from prompt: what is your name?

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const nameInput = document.getElementById('nameInput');
+   const submitBtn = document.getElementById('submitBtn');
+   const result = document.getElementById('result');
+ 
+   const savedName = localStorage.getItem('userName');
+   if (savedName) {
+     showGreeting(savedName);
+   }
+ 
+   function handleSubmit() {
+     const name = nameInput.value.trim();
+     if (name) {
+       localStorage.setItem('userName', name);
+       showGreeting(name);
+       nameInput.value = '';
+     }
+   }
+ 
+   function showGreeting(name) {
+     const greetings = [
+       `Hello, ${name}! It's wonderful to meet you.`,
+       `Welcome back, ${name}!`,
+       `Glad to see you, ${name}!`,
+       `Hi ${name}, you have a beautiful name!`
+     ];
+     const greeting = greetings[Math.floor(Math.random() * greetings.length)];
+ 
+     result.textContent = greeting;
+     result.classList.remove('show');
+ 
+     // Force reflow
+     void result.offsetWidth;
+ 
+     result.classList.add('show');
+   }
+ 
+   submitBtn.addEventListener('click', handleSubmit);
+   nameInput.addEventListener('keypress', (e) => {
+     if (e.key === 'Enter') {
+       handleSubmit();
+     }
+   });
+ 
+   // Add focus animation
+   nameInput.addEventListener('focus', () => {
+     document.querySelector('.card').style.transform = 'translateY(-8px)';
+   });
+ 
+   nameInput.addEventListener('blur', () => {
+     document.querySelector('.card').style.transform = 'translateY(0)';
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #6b48ff;
+   --secondary-color: #1a1a2e;
+   --accent-color: #ff6b6b;
+   --background: #f8f9fa;
+   --text-color: #2d2d2d;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+   background: var(--background);
+   color: var(--text-color);
+   min-height: 100vh;
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ .container {
+   flex: 1;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   padding: 1rem;
+ }
+ 
+ .card {
+   background: white;
+   padding: 2.5rem;
+   border-radius: 1.5rem;
+   box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+   width: 100%;
+   max-width: 500px;
+   transform: translateY(0);
+   transition: transform 0.3s ease;
+ }
+ 
+ .card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ h1 {
+   color: var(--secondary-color);
+   font-size: 2.5rem;
+   margin-bottom: 2rem;
+   text-align: center;
+   font-weight: 700;
+ }
+ 
+ .input-group {
+   display: flex;
+   gap: 0.5rem;
+   margin-bottom: 1.5rem;
+ }
+ 
+ input {
+   flex: 1;
+   padding: 1rem;
+   border: 2px solid #e0e0e0;
+   border-radius: 0.75rem;
+   font-size: 1.1rem;
+   transition: all 0.3s ease;
+ }
+ 
+ input:focus {
+   outline: none;
+   border-color: var(--primary-color);
+   box-shadow: 0 0 0 3px rgba(107, 72, 255, 0.2);
+ }
+ 
+ button {
+   padding: 1rem 1.5rem;
+   background: var(--primary-color);
+   color: white;
+   border: none;
+   border-radius: 0.75rem;
+   cursor: pointer;
+   font-size: 1.2rem;
+   transition: all 0.3s ease;
+ }
+ 
+ button:hover {
+   background: var(--secondary-color);
+   transform: translateX(2px);
+ }
+ 
+ .result {
+   text-align: center;
+   min-height: 50px;
+   font-size: 1.2rem;
+   color: var(--accent-color);
+   opacity: 0;
+   transform: translateY(20px);
+   transition: all 0.5s ease;
+ }
+ 
+ .result.show {
+   opacity: 1;
+   transform: translateY(0);
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 1.5rem;
+   color: #666;
+   font-size: 0.9rem;
+ }
+ 
+ @media (max-width: 480px) {
+   .card {
+     padding: 1.5rem;
+   }
+ 
+   h1 {
+     font-size: 2rem;
+   }
+ 
+   input {
+     padding: 0.8rem;
+   }
+ 
+   button {
+     padding: 0.8rem 1.2rem;
+   }
+ }