Changes to namecraft.scroll.pub

root

23 days ago

Initial commit

body.html

Changed around line 1
+ 
+   NameCraft
+   Craft the perfect name for any purpose
+ 
+ 
+ 
+   
+     
+       
+ 
+       
+         
+         Any
+         
+         Masculine
+         
+         Feminine
+       
+     
+ 
+     
+ 
+     
+       Click generate to create a name
+       
+         📋
+       
+     
+   
+ 
+   
+     Recent Names
+     
+   
+ 
+ 
+ 
+   Made with creativity by NameCraft
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://namecraft.scroll.pub
+ metaTags
+  description Generate unique and creative names for characters, businesses, products, or projects
+  keywords name generator, random names, character names, business names
+ editButton /edit.html
+ title NameCraft - Creative Name Generator
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_013w2vEXqb8T7Dmd5SKGSmnk",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll create a name generator website with a clean, modern design.\n\n---domain---\nnamecraft.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://namecraft.scroll.pub\nmetaTags\n description Generate unique and creative names for characters, businesses, products, or projects\n keywords name generator, random names, character names, business names\neditButton /edit.html\ntitle NameCraft - Creative Name Generator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  NameCraft\n  Craft the perfect name for any purpose
\n\n\n\n  \n    \n      \n      \n      \n        \n        Any\n        \n        Masculine\n        \n        Feminine\n      
\n    
\n\n    \n\n    \n      Click generate to create a name
\n      \n    
\n  \n\n  \n    Recent Names\n    \n  \n\n\n\n  Made with creativity by NameCraft
\n\n\n---style.css---\n:root {\n  --primary-color: #6366f1;\n  --secondary-color: #818cf8;\n  --background: #f8fafc;\n  --text-color: #1e293b;\n  --container-bg: #ffffff;\n  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: system-ui, -apple-system, sans-serif;\n  background: var(--background);\n  color: var(--text-color);\n  line-height: 1.5;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\nheader {\n  text-align: center;\n  padding: 3rem 1rem;\n  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n  color: white;\n}\n\nh1 {\n  font-size: 2.5rem;\n  margin-bottom: 0.5rem;\n  font-weight: 800;\n}\n\n.tagline {\n  font-size: 1.1rem;\n  opacity: 0.9;\n}\n\nmain {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 2rem 1rem;\n  width: 100%;\n  flex: 1;\n}\n\n.generator-container {\n  background: var(--container-bg);\n  padding: 2rem;\n  border-radius: 1rem;\n  box-shadow: var(--shadow);\n  margin-bottom: 2rem;\n}\n\n.options {\n  display: flex;\n  gap: 1rem;\n  flex-wrap: wrap;\n  margin-bottom: 1.5rem;\n}\n\nselect {\n  padding: 0.5rem 1rem;\n  border: 2px solid #e2e8f0;\n  border-radius: 0.5rem;\n  font-size: 1rem;\n  background: white;\n  min-width: 200px;\n}\n\n.gender-toggle {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.gender-toggle input[type=\"radio\"] {\n  display: none;\n}\n\n.gender-toggle label {\n  padding: 0.5rem 1rem;\n  border: 2px solid #e2e8f0;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.gender-toggle input[type=\"radio\"]:checked + label {\n  background: var(--primary-color);\n  color: white;\n  border-color: var(--primary-color);\n}\n\n.generate-btn {\n  width: 100%;\n  padding: 1rem;\n  background: var(--primary-color);\n  color: white;\n  border: none;\n  border-radius: 0.5rem;\n  font-size: 1.1rem;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.generate-btn:hover {\n  background: var(--secondary-color);\n  transform: translateY(-1px);\n}\n\n.result {\n  margin-top: 1.5rem;\n  padding: 1rem;\n  background: #f8fafc;\n  border-radius: 0.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.copy-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.5rem;\n  opacity: 0.7;\n  transition: opacity 0.2s;\n}\n\n.copy-btn:hover {\n  opacity: 1;\n}\n\n.history {\n  background: var(--container-bg);\n  padding: 2rem;\n  border-radius: 1rem;\n  box-shadow: var(--shadow);\n}\n\n.history h2 {\n  margin-bottom: 1rem;\n}\n\n#nameHistory {\n  list-style: none;\n}\n\n#nameHistory li {\n  padding: 0.5rem 0;\n  border-bottom: 1px solid #e2e8f0;\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: var(--container-bg);\n  margin-top: auto;\n}\n\n@media (max-width: 600px) {\n  .options {\n    flex-direction: column;\n  }\n  \n  .generator-container {\n    padding: 1rem;\n  }\n  \n  .history {\n    padding: 1rem;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const nameTypes = {\n    character: {\n      prefixes: ['Al', 'El', 'Kai', 'Zar', 'Ry', 'Mar'],\n      middleParts: ['an', 'en', 'in', 'on', 'ar', 'or'],\n      suffixes: ['der', 'ton', 'ley', 'son', 'wen', 'thy']\n    },\n    business: {\n      prefixes: ['Nova', 'Peak', 'Prime', 'Elite', 'Core', 'Apex'],\n      middleParts: ['tech', 'mind', 'shift', 'wave', 'flux', 'sync'],\n      suffixes: ['hub', 'labs', 'works', 'corp', 'pro', 'max']\n    },\n    product: {\n      prefixes: ['i', 'eco', 'smart', 'pro', 'ultra', 'meta'],\n      middleParts: ['flex', 'flow', 'pulse', 'spark', 'dash', 'zen'],\n      suffixes: ['x', 'plus', 'pro', 'lite', 'max', 'go']\n    },\n    fantasy: {\n      prefixes: ['Aether', 'Frost', 'Storm', 'Dawn', 'Night', 'Star'],\n      middleParts: ['blade', 'heart', 'soul', 'wind', 'fire', 'light'],\n      suffixes: ['bane', 'forge', 'weave', 'born', 'shade', 'glow']\n    }\n  };\n\n  const generateBtn = document.getElementById('generate');\n  const copyBtn = document.getElementById('copy');\n  const nameTypeSelect = document.getElementById('nameType');\n  const generatedNameElement = document.getElementById('generatedName');\n  const nameHistory = document.getElementById('nameHistory');\n  \n  const generateName = () => {\n    const type = nameTypeSelect.value;\n    const gender = document.querySelector('input[name=\"gender\"]:checked').value;\n    const parts = nameTypes[type];\n    \n    const prefix = parts.prefixes[Math.floor(Math.random() * parts.prefixes.length)];\n    const middle = parts.middleParts[Math.floor(Math.random() * parts.middleParts.length)];\n    const suffix = parts.suffixes[Math.floor(Math.random() * parts.suffixes.length)];\n    \n    let name = '';\n    if (Math.random() > 0.5) {\n      name = `${prefix}${middle}`;\n    } else {\n      name = `${prefix}${middle}${suffix}`;\n    }\n    \n    if (gender === 'feminine' && type === 'character') {\n      name += 'a';\n    }\n    \n    return name;\n  };\n  \n  generateBtn.addEventListener('click', () => {\n    const name = generateName();\n    generatedNameElement.textContent = name;\n    \n    const historyItem = document.createElement('li');\n    historyItem.textContent = name;\n    nameHistory.insertBefore(historyItem, nameHistory.firstChild);\n    \n    if (nameHistory.children.length > 5) {\n      nameHistory.removeChild(nameHistory.lastChild);\n    }\n  });\n  \n  copyBtn.addEventListener('click', () => {\n    navigator.clipboard.writeText(generatedNameElement.textContent)\n      .then(() => {\n        copyBtn.classList.add('copied');\n        setTimeout(() => copyBtn.classList.remove('copied'), 1000);\n      });\n  });\n});\n\n---end---\n\nThis creates a beautiful, responsive name generator with:\n- Modern gradient header\n- Clean, accessible UI\n- Different name types (character, business, product, fantasy)\n- Gender options for character names\n- Copy to clipboard functionality\n- Recent names history\n- Smooth animations and transitions\n- Mobile-responsive design\n- Semantic HTML structure\n- Professional color scheme\n- Clear visual hierarchy\n- Proper ARIA labels and roles\n\nThe site is both functional and visually appealing while maintaining simplicity and usability."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 274,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2771
+   }
+ }

readme.scroll

Changed around line 1

+ # namecraft.scroll.pub

+ Website generated by Claude from prompt: website to generate name

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const nameTypes = {
+     character: {
+       prefixes: ['Al', 'El', 'Kai', 'Zar', 'Ry', 'Mar'],
+       middleParts: ['an', 'en', 'in', 'on', 'ar', 'or'],
+       suffixes: ['der', 'ton', 'ley', 'son', 'wen', 'thy']
+     },
+     business: {
+       prefixes: ['Nova', 'Peak', 'Prime', 'Elite', 'Core', 'Apex'],
+       middleParts: ['tech', 'mind', 'shift', 'wave', 'flux', 'sync'],
+       suffixes: ['hub', 'labs', 'works', 'corp', 'pro', 'max']
+     },
+     product: {
+       prefixes: ['i', 'eco', 'smart', 'pro', 'ultra', 'meta'],
+       middleParts: ['flex', 'flow', 'pulse', 'spark', 'dash', 'zen'],
+       suffixes: ['x', 'plus', 'pro', 'lite', 'max', 'go']
+     },
+     fantasy: {
+       prefixes: ['Aether', 'Frost', 'Storm', 'Dawn', 'Night', 'Star'],
+       middleParts: ['blade', 'heart', 'soul', 'wind', 'fire', 'light'],
+       suffixes: ['bane', 'forge', 'weave', 'born', 'shade', 'glow']
+     }
+   };
+ 
+   const generateBtn = document.getElementById('generate');
+   const copyBtn = document.getElementById('copy');
+   const nameTypeSelect = document.getElementById('nameType');
+   const generatedNameElement = document.getElementById('generatedName');
+   const nameHistory = document.getElementById('nameHistory');
+ 
+   const generateName = () => {
+     const type = nameTypeSelect.value;
+     const gender = document.querySelector('input[name="gender"]:checked').value;
+     const parts = nameTypes[type];
+ 
+     const prefix = parts.prefixes[Math.floor(Math.random() * parts.prefixes.length)];
+     const middle = parts.middleParts[Math.floor(Math.random() * parts.middleParts.length)];
+     const suffix = parts.suffixes[Math.floor(Math.random() * parts.suffixes.length)];
+ 
+     let name = '';
+     if (Math.random() > 0.5) {
+       name = `${prefix}${middle}`;
+     } else {
+       name = `${prefix}${middle}${suffix}`;
+     }
+ 
+     if (gender === 'feminine' && type === 'character') {
+       name += 'a';
+     }
+ 
+     return name;
+   };
+ 
+   generateBtn.addEventListener('click', () => {
+     const name = generateName();
+     generatedNameElement.textContent = name;
+ 
+     const historyItem = document.createElement('li');
+     historyItem.textContent = name;
+     nameHistory.insertBefore(historyItem, nameHistory.firstChild);
+ 
+     if (nameHistory.children.length > 5) {
+       nameHistory.removeChild(nameHistory.lastChild);
+     }
+   });
+ 
+   copyBtn.addEventListener('click', () => {
+     navigator.clipboard.writeText(generatedNameElement.textContent)
+       .then(() => {
+         copyBtn.classList.add('copied');
+         setTimeout(() => copyBtn.classList.remove('copied'), 1000);
+       });
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #6366f1;
+   --secondary-color: #818cf8;
+   --background: #f8fafc;
+   --text-color: #1e293b;
+   --container-bg: #ffffff;
+   --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: system-ui, -apple-system, sans-serif;
+   background: var(--background);
+   color: var(--text-color);
+   line-height: 1.5;
+   min-height: 100vh;
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ header {
+   text-align: center;
+   padding: 3rem 1rem;
+   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+   color: white;
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   margin-bottom: 0.5rem;
+   font-weight: 800;
+ }
+ 
+ .tagline {
+   font-size: 1.1rem;
+   opacity: 0.9;
+ }
+ 
+ main {
+   max-width: 800px;
+   margin: 0 auto;
+   padding: 2rem 1rem;
+   width: 100%;
+   flex: 1;
+ }
+ 
+ .generator-container {
+   background: var(--container-bg);
+   padding: 2rem;
+   border-radius: 1rem;
+   box-shadow: var(--shadow);
+   margin-bottom: 2rem;
+ }
+ 
+ .options {
+   display: flex;
+   gap: 1rem;
+   flex-wrap: wrap;
+   margin-bottom: 1.5rem;
+ }
+ 
+ select {
+   padding: 0.5rem 1rem;
+   border: 2px solid #e2e8f0;
+   border-radius: 0.5rem;
+   font-size: 1rem;
+   background: white;
+   min-width: 200px;
+ }
+ 
+ .gender-toggle {
+   display: flex;
+   gap: 0.5rem;
+ }
+ 
+ .gender-toggle input[type="radio"] {
+   display: none;
+ }
+ 
+ .gender-toggle label {
+   padding: 0.5rem 1rem;
+   border: 2px solid #e2e8f0;
+   border-radius: 0.5rem;
+   cursor: pointer;
+   transition: all 0.2s;
+ }
+ 
+ .gender-toggle input[type="radio"]:checked + label {
+   background: var(--primary-color);
+   color: white;
+   border-color: var(--primary-color);
+ }
+ 
+ .generate-btn {
+   width: 100%;
+   padding: 1rem;
+   background: var(--primary-color);
+   color: white;
+   border: none;
+   border-radius: 0.5rem;
+   font-size: 1.1rem;
+   cursor: pointer;
+   transition: all 0.2s;
+ }
+ 
+ .generate-btn:hover {
+   background: var(--secondary-color);
+   transform: translateY(-1px);
+ }
+ 
+ .result {
+   margin-top: 1.5rem;
+   padding: 1rem;
+   background: #f8fafc;
+   border-radius: 0.5rem;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+ }
+ 
+ .copy-btn {
+   background: none;
+   border: none;
+   cursor: pointer;
+   padding: 0.5rem;
+   opacity: 0.7;
+   transition: opacity 0.2s;
+ }
+ 
+ .copy-btn:hover {
+   opacity: 1;
+ }
+ 
+ .history {
+   background: var(--container-bg);
+   padding: 2rem;
+   border-radius: 1rem;
+   box-shadow: var(--shadow);
+ }
+ 
+ .history h2 {
+   margin-bottom: 1rem;
+ }
+ 
+ #nameHistory {
+   list-style: none;
+ }
+ 
+ #nameHistory li {
+   padding: 0.5rem 0;
+   border-bottom: 1px solid #e2e8f0;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: var(--container-bg);
+   margin-top: auto;
+ }
+ 
+ @media (max-width: 600px) {
+   .options {
+     flex-direction: column;
+   }
+ 
+   .generator-container {
+     padding: 1rem;
+   }
+ 
+   .history {
+     padding: 1rem;
+   }
+ }