Changes to familytree1.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Family Tree Generator
+   Enter your family name and your first name to generate a random family tree with 10 members.
+ 
+ 
+   
+     Family Name:
+     
+     Your First Name:
+     
+     
+   
+   
+     Your Family Tree
+     
+   
+ 
+ 
+   Created with ❤️ by Family Tree Generator
+ 

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": "acd2fcf7-1bc5-4614-8cf5-0be5a6f3e7c5",
+   "object": "chat.completion",
+   "created": 1735338075,
+   "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  Enter your family name and your first name to generate a random family tree with 10 members.
\n\n\n  \n    Family Name:\n    \n    Your First Name:\n    \n    \n  \n  \n    Your Family Tree\n    \n  
\n\n\n  Created with ❤️ by Family Tree Generator
\n\n---style.css---\nbody {\n  font-family: 'Arial', sans-serif;\n  background-color: #f4f4f9;\n  color: #333;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n}\n\nheader {\n  text-align: center;\n  padding: 20px;\n  background-color: #4CAF50;\n  color: white;\n  width: 100%;\n}\n\nheader h1 {\n  margin: 0;\n  font-size: 2.5rem;\n}\n\nheader p {\n  margin: 10px 0 0;\n  font-size: 1.2rem;\n}\n\nmain {\n  width: 90%;\n  max-width: 600px;\n  margin: 20px auto;\n  padding: 20px;\n  background-color: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  margin-bottom: 5px;\n  font-weight: bold;\n}\n\ninput {\n  margin-bottom: 15px;\n  padding: 10px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 1rem;\n}\n\nbutton {\n  padding: 10px;\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  font-size: 1rem;\n  cursor: pointer;\n}\n\nbutton:hover {\n  background-color: #45a049;\n}\n\n#familyTree {\n  margin-top: 20px;\n}\n\n#familyTree.hidden {\n  display: none;\n}\n\n#familyMembers {\n  list-style-type: none;\n  padding: 0;\n}\n\n#familyMembers li {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  font-size: 1.1rem;\n}\n\nfooter {\n  text-align: center;\n  padding: 10px;\n  background-color: #4CAF50;\n  color: white;\n  width: 100%;\n  position: fixed;\n  bottom: 0;\n}\n---script.js---\ndocument.getElementById('familyTreeForm').addEventListener('submit', function(event) {\n  event.preventDefault();\n  \n  const familyName = document.getElementById('familyName').value;\n  const firstName = document.getElementById('firstName').value;\n  \n  const familyMembers = generateFamilyTree(familyName, firstName);\n  \n  const familyMembersList = document.getElementById('familyMembers');\n  familyMembersList.innerHTML = '';\n  \n  familyMembers.forEach(member => {\n    const li = document.createElement('li');\n    li.textContent = `${member.name} - ${member.relationship}`;\n    familyMembersList.appendChild(li);\n  });\n  \n  document.getElementById('familyTree').classList.remove('hidden');\n});\n\nfunction generateFamilyTree(familyName, firstName) {\n  const relationships = [\n    'Grandfather', 'Grandmother', 'Father', 'Mother', 'Uncle', 'Aunt', 'Brother', 'Sister', 'Cousin', 'Nephew'\n  ];\n  \n  const firstNames = ['John', 'Jane', 'Michael', 'Emily', 'David', 'Sarah', 'James', 'Emma', 'William', 'Olivia'];\n  const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];\n  \n  const familyMembers = [];\n  \n  for (let i = 0; i < 10; i++) {\n    const randomFirstName = firstNames[Math.floor(Math.random() * firstNames.length)];\n    const randomLastName = lastNames[Math.floor(Math.random() * lastNames.length)];\n    const relationship = relationships[i];\n    \n    familyMembers.push({\n      name: `${randomFirstName} ${randomLastName}`,\n      relationship: relationship\n    });\n  }\n  \n  return familyMembers;\n}\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 294,
+     "completion_tokens": 1135,
+     "total_tokens": 1429,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 294
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # familytree1.scroll.pub

+ Website generated by DeepSeek from prompt: I want a website that can generate a family tree. Enter the name of the family and you first name and it will generate you random named family members with their relationship towards you indicated. Grandfather grandmother ,uncles ,brothers, sisters... The number of family member should always be 10

script.js

Changed around line 1
+ document.getElementById('familyTreeForm').addEventListener('submit', function(event) {
+   event.preventDefault();
+ 
+   const familyName = document.getElementById('familyName').value;
+   const firstName = document.getElementById('firstName').value;
+ 
+   const familyMembers = generateFamilyTree(familyName, firstName);
+ 
+   const familyMembersList = document.getElementById('familyMembers');
+   familyMembersList.innerHTML = '';
+ 
+   familyMembers.forEach(member => {
+     const li = document.createElement('li');
+     li.textContent = `${member.name} - ${member.relationship}`;
+     familyMembersList.appendChild(li);
+   });
+ 
+   document.getElementById('familyTree').classList.remove('hidden');
+ });
+ 
+ function generateFamilyTree(familyName, firstName) {
+   const relationships = [
+     'Grandfather', 'Grandmother', 'Father', 'Mother', 'Uncle', 'Aunt', 'Brother', 'Sister', 'Cousin', 'Nephew'
+   ];
+ 
+   const firstNames = ['John', 'Jane', 'Michael', 'Emily', 'David', 'Sarah', 'James', 'Emma', 'William', 'Olivia'];
+   const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];
+ 
+   const familyMembers = [];
+ 
+   for (let i = 0; i < 10; i++) {
+     const randomFirstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+     const randomLastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+     const relationship = relationships[i];
+ 
+     familyMembers.push({
+       name: `${randomFirstName} ${randomLastName}`,
+       relationship: relationship
+     });
+   }
+ 
+   return familyMembers;
+ }

style.css

Changed around line 1
+ body {
+   font-family: 'Arial', sans-serif;
+   background-color: #f4f4f9;
+   color: #333;
+   margin: 0;
+   padding: 0;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   min-height: 100vh;
+ }
+ 
+ header {
+   text-align: center;
+   padding: 20px;
+   background-color: #4CAF50;
+   color: white;
+   width: 100%;
+ }
+ 
+ header h1 {
+   margin: 0;
+   font-size: 2.5rem;
+ }
+ 
+ header p {
+   margin: 10px 0 0;
+   font-size: 1.2rem;
+ }
+ 
+ main {
+   width: 90%;
+   max-width: 600px;
+   margin: 20px auto;
+   padding: 20px;
+   background-color: white;
+   border-radius: 8px;
+   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+ 
+ form {
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ label {
+   margin-bottom: 5px;
+   font-weight: bold;
+ }
+ 
+ input {
+   margin-bottom: 15px;
+   padding: 10px;
+   border: 1px solid #ccc;
+   border-radius: 4px;
+   font-size: 1rem;
+ }
+ 
+ button {
+   padding: 10px;
+   background-color: #4CAF50;
+   color: white;
+   border: none;
+   border-radius: 4px;
+   font-size: 1rem;
+   cursor: pointer;
+ }
+ 
+ button:hover {
+   background-color: #45a049;
+ }
+ 
+ #familyTree {
+   margin-top: 20px;
+ }
+ 
+ #familyTree.hidden {
+   display: none;
+ }
+ 
+ #familyMembers {
+   list-style-type: none;
+   padding: 0;
+ }
+ 
+ #familyMembers li {
+   padding: 10px;
+   border-bottom: 1px solid #ccc;
+   font-size: 1.1rem;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 10px;
+   background-color: #4CAF50;
+   color: white;
+   width: 100%;
+   position: fixed;
+   bottom: 0;
+ }