Changes to familytree2.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Family Tree Generator
+   Create your unique Chinese family tree with just a few clicks!
+ 
+ 
+ 
+   
+     Family Name:
+     
+ 
+     Your First Name:
+     
+ 
+     
+   
+ 
+   
+     Your Family Tree
+     
+   
+ 
+ 
+ 
+   Made with ❤️ for family connections
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://familytree.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Family Tree Generator
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "623c38d0-9a93-4cbe-a2aa-a2b956789eb4",
+   "object": "chat.completion",
+   "created": 1735338389,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nfamilytree.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://familytree.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Family Tree Generator\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Family Tree Generator\n  Create your unique Chinese family tree with just a few clicks!
\n\n\n\n  \n    Family Name:\n    \n    \n    Your First Name:\n    \n    \n    \n  \n\n  \n    Your Family Tree\n    
\n  \n\n\n\n  Made with ❤️ for family connections
\n\n---style.css---\n:root {\n  --primary-color: #4a90e2;\n  --secondary-color: #f5a623;\n  --background-color: #f8f8f8;\n  --text-color: #333;\n  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\nbody {\n  font-family: var(--font-family);\n  margin: 0;\n  padding: 0;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  line-height: 1.6;\n}\n\nheader {\n  background-color: var(--primary-color);\n  color: white;\n  padding: 2rem;\n  text-align: center;\n}\n\nmain {\n  padding: 2rem;\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.input-section {\n  background: white;\n  padding: 2rem;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  margin-bottom: 2rem;\n}\n\nlabel {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-weight: bold;\n}\n\ninput {\n  width: 100%;\n  padding: 0.5rem;\n  margin-bottom: 1rem;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: var(--secondary-color);\n  color: white;\n  border: none;\n  padding: 0.75rem 1.5rem;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 1rem;\n  transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n  background-color: #e69500;\n}\n\n.tree-section {\n  background: white;\n  padding: 2rem;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n#familyTree {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;\n}\n\n.family-member {\n  background: var(--background-color);\n  padding: 1rem;\n  border-radius: 4px;\n  text-align: center;\n}\n\n.family-member h3 {\n  margin: 0;\n  color: var(--primary-color);\n}\n\nfooter {\n  text-align: center;\n  padding: 1rem;\n  background-color: var(--primary-color);\n  color: white;\n  margin-top: 2rem;\n}\n\n@media (max-width: 600px) {\n  main {\n    padding: 1rem;\n  }\n  \n  .input-section, .tree-section {\n    padding: 1rem;\n  }\n}\n---script.js---\nconst familyNameInput = document.getElementById('familyName');\nconst firstNameInput = document.getElementById('firstName');\nconst generateButton = document.getElementById('generateTree');\nconst familyTreeContainer = document.getElementById('familyTree');\n\nconst chineseFirstNames = ['Wei', 'Jing', 'Ming', 'Li', 'Xiu', 'Hua', 'Yong', 'Qiang', 'Mei', 'Lan'];\nconst jobs = ['Carpenter', 'Hostess', 'Butcher', 'Painter'];\nconst relationships = ['Grandmother', 'Grandfather', 'Sister', 'Brother', 'Uncle'];\n\nfunction getRandomElement(array) {\n  return array[Math.floor(Math.random() * array.length)];\n}\n\nfunction generateRandomAge(relationship) {\n  if (relationship === 'Grandmother' || relationship === 'Grandfather') {\n    return Math.floor(Math.random() * 30) + 60;\n  } else if (relationship === 'Uncle') {\n    return Math.floor(Math.random() * 20) + 40;\n  } else {\n    return Math.floor(Math.random() * 15) + 20;\n  }\n}\n\nfunction generateFamilyMember(familyName) {\n  const firstName = getRandomElement(chineseFirstNames);\n  const relationship = getRandomElement(relationships);\n  const job = getRandomElement(jobs);\n  const age = generateRandomAge(relationship);\n  \n  return {\n    name: `${firstName} ${familyName}`,\n    relationship,\n    job,\n    age\n  };\n}\n\nfunction displayFamilyTree(familyName, firstName) {\n  familyTreeContainer.innerHTML = '';\n  \n  // Add yourself\n  const yourself = document.createElement('div');\n  yourself.className = 'family-member';\n  yourself.innerHTML = `\n    ${firstName} ${familyName}\n    Yourself
\n  `;\n  familyTreeContainer.appendChild(yourself);\n  \n  // Generate 5 family members\n  for (let i = 0; i < 5; i++) {\n    const member = generateFamilyMember(familyName);\n    const memberDiv = document.createElement('div');\n    memberDiv.className = 'family-member';\n    memberDiv.innerHTML = `\n      ${member.name}\n      ${member.relationship}
\n      ${member.job}
\n      Age: ${member.age}
\n    `;\n    familyTreeContainer.appendChild(memberDiv);\n  }\n}\n\ngenerateButton.addEventListener('click', () => {\n  const familyName = familyNameInput.value.trim();\n  const firstName = firstNameInput.value.trim();\n  \n  if (familyName && firstName) {\n    displayFamilyTree(familyName, firstName);\n  } else {\n    alert('Please enter both your family name and first name.');\n  }\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 303,
+     "completion_tokens": 1452,
+     "total_tokens": 1755,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 303
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # familytree2.scroll.pub

+ Website generated by DeepSeek from prompt: Family tree generator. Enter the name of the family and every member will use that last name. Enter your first name. Generate random family members with their relationship to you indicated grandmother grandfather sister brother uncle. Indicate their job (carpenter/hostess/butcher/painter). Indicate their age. Their name should sound chinese.

script.js

Changed around line 1
+ const familyNameInput = document.getElementById('familyName');
+ const firstNameInput = document.getElementById('firstName');
+ const generateButton = document.getElementById('generateTree');
+ const familyTreeContainer = document.getElementById('familyTree');
+ 
+ const chineseFirstNames = ['Wei', 'Jing', 'Ming', 'Li', 'Xiu', 'Hua', 'Yong', 'Qiang', 'Mei', 'Lan'];
+ const jobs = ['Carpenter', 'Hostess', 'Butcher', 'Painter'];
+ const relationships = ['Grandmother', 'Grandfather', 'Sister', 'Brother', 'Uncle'];
+ 
+ function getRandomElement(array) {
+   return array[Math.floor(Math.random() * array.length)];
+ }
+ 
+ function generateRandomAge(relationship) {
+   if (relationship === 'Grandmother' || relationship === 'Grandfather') {
+     return Math.floor(Math.random() * 30) + 60;
+   } else if (relationship === 'Uncle') {
+     return Math.floor(Math.random() * 20) + 40;
+   } else {
+     return Math.floor(Math.random() * 15) + 20;
+   }
+ }
+ 
+ function generateFamilyMember(familyName) {
+   const firstName = getRandomElement(chineseFirstNames);
+   const relationship = getRandomElement(relationships);
+   const job = getRandomElement(jobs);
+   const age = generateRandomAge(relationship);
+ 
+   return {
+     name: `${firstName} ${familyName}`,
+     relationship,
+     job,
+     age
+   };
+ }
+ 
+ function displayFamilyTree(familyName, firstName) {
+   familyTreeContainer.innerHTML = '';
+ 
+   // Add yourself
+   const yourself = document.createElement('div');
+   yourself.className = 'family-member';
+   yourself.innerHTML = `
+     ${firstName} ${familyName}
+     Yourself
+   `;
+   familyTreeContainer.appendChild(yourself);
+ 
+   // Generate 5 family members
+   for (let i = 0; i < 5; i++) {
+     const member = generateFamilyMember(familyName);
+     const memberDiv = document.createElement('div');
+     memberDiv.className = 'family-member';
+     memberDiv.innerHTML = `
+       ${member.name}
+       ${member.relationship}
+       ${member.job}
+       Age: ${member.age}
+     `;
+     familyTreeContainer.appendChild(memberDiv);
+   }
+ }
+ 
+ generateButton.addEventListener('click', () => {
+   const familyName = familyNameInput.value.trim();
+   const firstName = firstNameInput.value.trim();
+ 
+   if (familyName && firstName) {
+     displayFamilyTree(familyName, firstName);
+   } else {
+     alert('Please enter both your family name and first name.');
+   }
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #4a90e2;
+   --secondary-color: #f5a623;
+   --background-color: #f8f8f8;
+   --text-color: #333;
+   --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ }
+ 
+ body {
+   font-family: var(--font-family);
+   margin: 0;
+   padding: 0;
+   background-color: var(--background-color);
+   color: var(--text-color);
+   line-height: 1.6;
+ }
+ 
+ header {
+   background-color: var(--primary-color);
+   color: white;
+   padding: 2rem;
+   text-align: center;
+ }
+ 
+ main {
+   padding: 2rem;
+   max-width: 800px;
+   margin: 0 auto;
+ }
+ 
+ .input-section {
+   background: white;
+   padding: 2rem;
+   border-radius: 8px;
+   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+   margin-bottom: 2rem;
+ }
+ 
+ label {
+   display: block;
+   margin-bottom: 0.5rem;
+   font-weight: bold;
+ }
+ 
+ input {
+   width: 100%;
+   padding: 0.5rem;
+   margin-bottom: 1rem;
+   border: 1px solid #ddd;
+   border-radius: 4px;
+ }
+ 
+ button {
+   background-color: var(--secondary-color);
+   color: white;
+   border: none;
+   padding: 0.75rem 1.5rem;
+   border-radius: 4px;
+   cursor: pointer;
+   font-size: 1rem;
+   transition: background-color 0.3s ease;
+ }
+ 
+ button:hover {
+   background-color: #e69500;
+ }
+ 
+ .tree-section {
+   background: white;
+   padding: 2rem;
+   border-radius: 8px;
+   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ }
+ 
+ #familyTree {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+   gap: 1rem;
+ }
+ 
+ .family-member {
+   background: var(--background-color);
+   padding: 1rem;
+   border-radius: 4px;
+   text-align: center;
+ }
+ 
+ .family-member h3 {
+   margin: 0;
+   color: var(--primary-color);
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 1rem;
+   background-color: var(--primary-color);
+   color: white;
+   margin-top: 2rem;
+ }
+ 
+ @media (max-width: 600px) {
+   main {
+     padding: 1rem;
+   }
+ 
+   .input-section, .tree-section {
+     padding: 1rem;
+   }
+ }