Changes to familytree5.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1

+ 
+   Family Tree Generator
+   
+     Family Name:
+     
+     Your First Name:
+     
+     
+   
+   
+     
+   
+ 

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": "7ddd66f2-cea3-417d-9215-770b53a864c2",
+   "object": "chat.completion",
+   "created": 1735385395,
+   "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  \n    Family Name:\n    \n    Your First Name:\n    \n    \n  \n  \n    \n  
\n
\n---style.css---\n:root {\n  --primary-color: #4a90e2;\n  --secondary-color: #f5f5f5;\n  --text-color: #333;\n  --line-color: #666;\n}\n\nbody {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: var(--secondary-color);\n  color: var(--text-color);\n}\n\n.container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 2rem;\n  text-align: center;\n}\n\nh1 {\n  color: var(--primary-color);\n  margin-bottom: 2rem;\n}\n\nform {\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(--primary-color);\n  color: white;\n  padding: 0.75rem 1.5rem;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n  background-color: #357abd;\n}\n\n.tree {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n  padding: 2rem;\n}\n\n.generation {\n  display: flex;\n  justify-content: center;\n  margin: 1rem 0;\n  position: relative;\n}\n\n.member {\n  background: white;\n  padding: 1rem;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  margin: 0 1rem;\n  text-align: center;\n  min-width: 150px;\n}\n\n.member h3 {\n  margin: 0;\n  color: var(--primary-color);\n}\n\n.member p {\n  margin: 0.5rem 0;\n  font-size: 0.9rem;\n}\n\n.line {\n  position: absolute;\n  background-color: var(--line-color);\n}\n\n.horizontal-line {\n  width: 100%;\n  height: 2px;\n  top: 50%;\n}\n\n.vertical-line {\n  width: 2px;\n  height: 100px;\n  left: 50%;\n}\n\n@media (max-width: 768px) {\n  .generation {\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .member {\n    margin: 1rem 0;\n  }\n\n  .horizontal-line {\n    display: none;\n  }\n\n  .vertical-line {\n    height: 50px;\n  }\n}\n---script.js---\nconst familyForm = document.getElementById('familyForm');\nconst treeContainer = document.getElementById('treeContainer');\n\nconst jobs = [\n  'Butcher', 'Blacksmith', 'Medic', 'Librarian', 'Trainer', \n  'Guard', 'Sweeper', 'Host', 'Merchant', 'Administration', \n  'Sewer', 'Lumberjack', 'Miner', 'Tailor'\n];\n\nfunction getRandomJob() {\n  return jobs[Math.floor(Math.random() * jobs.length)];\n}\n\nfunction generateFamilyTree(familyName, firstName) {\n  const grandfather = {\n    name: `Grandfather ${familyName}`,\n    age: Math.floor(Math.random() * 11) + 60,\n    occupation: getRandomJob(),\n    relation: 'Grandfather'\n  };\n\n  const grandmother = {\n    name: `Grandmother ${familyName}`,\n    age: Math.floor(Math.random() * 11) + 60,\n    occupation: getRandomJob(),\n    relation: 'Grandmother'\n  };\n\n  const father = {\n    name: `Father ${familyName}`,\n    age: Math.floor(Math.random() * 11) + 30,\n    occupation: getRandomJob(),\n    relation: 'Father'\n  };\n\n  const mother = {\n    name: `Mother ${familyName}`,\n    age: Math.floor(Math.random() * 11) + 30,\n    occupation: getRandomJob(),\n    relation: 'Mother'\n  };\n\n  const uncle = {\n    name: `Uncle ${familyName}`,\n    age: Math.floor(Math.random() * 11) + 30,\n    occupation: getRandomJob(),\n    relation: 'Uncle'\n  };\n\n  const aunt = {\n    name: `Aunt ${familyName}`,\n    age: Math.floor(Math.random() * 11) + 30,\n    occupation: getRandomJob(),\n    relation: 'Aunt'\n  };\n\n  const brother = {\n    name: `Brother ${familyName}`,\n    age: Math.floor(Math.random() * 11) + 10,\n    occupation: Math.random() > 0.5 ? 'Student at the Academy' : 'Training as a Civilian',\n    relation: 'Brother'\n  };\n\n  const sister = {\n    name: `Sister ${familyName}`,\n    age: Math.floor(Math.random() * 11) + 10,\n    occupation: Math.random() > 0.5 ? 'Student at the Academy' : 'Training as a Civilian',\n    relation: 'Sister'\n  };\n\n  const cousin = {\n    name: `Cousin ${familyName}`,\n    age: Math.floor(Math.random() * 11) + 10,\n    occupation: Math.random() > 0.5 ? 'Student at the Academy' : 'Training as a Civilian',\n    relation: 'Cousin'\n  };\n\n  const treeHTML = `\n    \n      \n        ${grandfather.name}\n        Age: ${grandfather.age}
\n        Occupation: ${grandfather.occupation}
\n        Relation: ${grandfather.relation}
\n      
\n      \n        ${grandmother.name}\n        Age: ${grandmother.age}
\n        Occupation: ${grandmother.occupation}
\n        Relation: ${grandmother.relation}
\n      
\n    
\n    
\n    \n      \n        ${father.name}\n        Age: ${father.age}
\n        Occupation: ${father.occupation}
\n        Relation: ${father.relation}
\n      
\n      \n        ${mother.name}\n        Age: ${mother.age}
\n        Occupation: ${mother.occupation}
\n        Relation: ${mother.relation}
\n      
\n      \n        ${uncle.name}\n        Age: ${uncle.age}
\n        Occupation: ${uncle.occupation}
\n        Relation: ${uncle.relation}
\n      
\n      \n        ${aunt.name}\n        Age: ${aunt.age}
\n        Occupation: ${aunt.occupation}
\n        Relation: ${aunt.relation}
\n      
\n    
\n    
\n    \n      \n        ${brother.name}\n        Age: ${brother.age}
\n        Occupation: ${brother.occupation}
\n        Relation: ${brother.relation}
\n      
\n      \n        ${sister.name}\n        Age: ${sister.age}
\n        Occupation: ${sister.occupation}
\n        Relation: ${sister.relation}
\n      
\n      \n        ${cousin.name}\n        Age: ${cousin.age}
\n        Occupation: ${cousin.occupation}
\n        Relation: ${cousin.relation}
\n      
\n    
\n  `;\n\n  treeContainer.innerHTML = treeHTML;\n}\n\nfamilyForm.addEventListener('submit', (e) => {\n  e.preventDefault();\n  const familyName = document.getElementById('familyName').value;\n  const firstName = document.getElementById('firstName').value;\n  generateFamilyTree(familyName, firstName);\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 491,
+     "completion_tokens": 2175,
+     "total_tokens": 2666,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 491
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # familytree5.scroll.pub

+ Website generated by DeepSeek from prompt: Website that generate family tree. Choose a name for the family (every member will have this name).choose your first name. Then click generate. The tree will be displayed with the relationship of family members indicated (grandfather, grandmother , uncle,mother,father,brother,sister,cosin. Their age will also be indicated between 60 and 70 for grand-parent , between 30 and 40 for parents and uncle and aunt. And between 10 and 20 for siblings and cosin. Their occupation should also be displayed. For siblings and cosin pick between "student at the academy" and "training as a civilian". For parents ,uncle and aunts give a random job from this list : butcher,blacksmith,medic,librairian,trainer,guard,sweeper,host,merchant,administration,sewer,lumberjack,miner,Tailor. For the design of the website the tree should display a the top on the same line grandfather and grandmother In the middle father mother uncle and aunt. At the bottom brother sister and cosin. family members should be linked by a line. A horizontal line to display being siblings and a vertical to indicate being "the children of"

script.js

Changed around line 1
+ const familyForm = document.getElementById('familyForm');
+ const treeContainer = document.getElementById('treeContainer');
+ 
+ const jobs = [
+   'Butcher', 'Blacksmith', 'Medic', 'Librarian', 'Trainer',
+   'Guard', 'Sweeper', 'Host', 'Merchant', 'Administration',
+   'Sewer', 'Lumberjack', 'Miner', 'Tailor'
+ ];
+ 
+ function getRandomJob() {
+   return jobs[Math.floor(Math.random() * jobs.length)];
+ }
+ 
+ function generateFamilyTree(familyName, firstName) {
+   const grandfather = {
+     name: `Grandfather ${familyName}`,
+     age: Math.floor(Math.random() * 11) + 60,
+     occupation: getRandomJob(),
+     relation: 'Grandfather'
+   };
+ 
+   const grandmother = {
+     name: `Grandmother ${familyName}`,
+     age: Math.floor(Math.random() * 11) + 60,
+     occupation: getRandomJob(),
+     relation: 'Grandmother'
+   };
+ 
+   const father = {
+     name: `Father ${familyName}`,
+     age: Math.floor(Math.random() * 11) + 30,
+     occupation: getRandomJob(),
+     relation: 'Father'
+   };
+ 
+   const mother = {
+     name: `Mother ${familyName}`,
+     age: Math.floor(Math.random() * 11) + 30,
+     occupation: getRandomJob(),
+     relation: 'Mother'
+   };
+ 
+   const uncle = {
+     name: `Uncle ${familyName}`,
+     age: Math.floor(Math.random() * 11) + 30,
+     occupation: getRandomJob(),
+     relation: 'Uncle'
+   };
+ 
+   const aunt = {
+     name: `Aunt ${familyName}`,
+     age: Math.floor(Math.random() * 11) + 30,
+     occupation: getRandomJob(),
+     relation: 'Aunt'
+   };
+ 
+   const brother = {
+     name: `Brother ${familyName}`,
+     age: Math.floor(Math.random() * 11) + 10,
+     occupation: Math.random() > 0.5 ? 'Student at the Academy' : 'Training as a Civilian',
+     relation: 'Brother'
+   };
+ 
+   const sister = {
+     name: `Sister ${familyName}`,
+     age: Math.floor(Math.random() * 11) + 10,
+     occupation: Math.random() > 0.5 ? 'Student at the Academy' : 'Training as a Civilian',
+     relation: 'Sister'
+   };
+ 
+   const cousin = {
+     name: `Cousin ${familyName}`,
+     age: Math.floor(Math.random() * 11) + 10,
+     occupation: Math.random() > 0.5 ? 'Student at the Academy' : 'Training as a Civilian',
+     relation: 'Cousin'
+   };
+ 
+   const treeHTML = `
+     
+       
+         ${grandfather.name}
+         Age: ${grandfather.age}
+         Occupation: ${grandfather.occupation}
+         Relation: ${grandfather.relation}
+       
+       
+         ${grandmother.name}
+         Age: ${grandmother.age}
+         Occupation: ${grandmother.occupation}
+         Relation: ${grandmother.relation}
+       
+     
+     
+     
+       
+         ${father.name}
+         Age: ${father.age}
+         Occupation: ${father.occupation}
+         Relation: ${father.relation}
+       
+       
+         ${mother.name}
+         Age: ${mother.age}
+         Occupation: ${mother.occupation}
+         Relation: ${mother.relation}
+       
+       
+         ${uncle.name}
+         Age: ${uncle.age}
+         Occupation: ${uncle.occupation}
+         Relation: ${uncle.relation}
+       
+       
+         ${aunt.name}
+         Age: ${aunt.age}
+         Occupation: ${aunt.occupation}
+         Relation: ${aunt.relation}
+       
+     
+     
+     
+       
+         ${brother.name}
+         Age: ${brother.age}
+         Occupation: ${brother.occupation}
+         Relation: ${brother.relation}
+       
+       
+         ${sister.name}
+         Age: ${sister.age}
+         Occupation: ${sister.occupation}
+         Relation: ${sister.relation}
+       
+       
+         ${cousin.name}
+         Age: ${cousin.age}
+         Occupation: ${cousin.occupation}
+         Relation: ${cousin.relation}
+       
+     
+   `;
+ 
+   treeContainer.innerHTML = treeHTML;
+ }
+ 
+ familyForm.addEventListener('submit', (e) => {
+   e.preventDefault();
+   const familyName = document.getElementById('familyName').value;
+   const firstName = document.getElementById('firstName').value;
+   generateFamilyTree(familyName, firstName);
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #4a90e2;
+   --secondary-color: #f5f5f5;
+   --text-color: #333;
+   --line-color: #666;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+   margin: 0;
+   padding: 0;
+   background-color: var(--secondary-color);
+   color: var(--text-color);
+ }
+ 
+ .container {
+   max-width: 1200px;
+   margin: 0 auto;
+   padding: 2rem;
+   text-align: center;
+ }
+ 
+ h1 {
+   color: var(--primary-color);
+   margin-bottom: 2rem;
+ }
+ 
+ form {
+   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(--primary-color);
+   color: white;
+   padding: 0.75rem 1.5rem;
+   border: none;
+   border-radius: 4px;
+   cursor: pointer;
+   transition: background-color 0.3s ease;
+ }
+ 
+ button:hover {
+   background-color: #357abd;
+ }
+ 
+ .tree {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   position: relative;
+   padding: 2rem;
+ }
+ 
+ .generation {
+   display: flex;
+   justify-content: center;
+   margin: 1rem 0;
+   position: relative;
+ }
+ 
+ .member {
+   background: white;
+   padding: 1rem;
+   border-radius: 8px;
+   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+   margin: 0 1rem;
+   text-align: center;
+   min-width: 150px;
+ }
+ 
+ .member h3 {
+   margin: 0;
+   color: var(--primary-color);
+ }
+ 
+ .member p {
+   margin: 0.5rem 0;
+   font-size: 0.9rem;
+ }
+ 
+ .line {
+   position: absolute;
+   background-color: var(--line-color);
+ }
+ 
+ .horizontal-line {
+   width: 100%;
+   height: 2px;
+   top: 50%;
+ }
+ 
+ .vertical-line {
+   width: 2px;
+   height: 100px;
+   left: 50%;
+ }
+ 
+ @media (max-width: 768px) {
+   .generation {
+     flex-direction: column;
+     align-items: center;
+   }
+ 
+   .member {
+     margin: 1rem 0;
+   }
+ 
+   .horizontal-line {
+     display: none;
+   }
+ 
+   .vertical-line {
+     height: 50px;
+   }
+ }