Changes to familytree3.scroll.pub

root
root
24 days ago
Initial commit
body.html
Changed around line 1
+
+

Family Tree Generator

+
+
+
+
+
+
+
+
+
+
+

Family Tree

+
+
+
+
+

Create your family tree with ease.

+
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": "510016af-f778-447c-9f24-8737ea30a64d",
+ "object": "chat.completion",
+ "created": 1735384704,
+ "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
\n
\n \n \n \n \n \n
\n
\n

Family Tree

\n
\n
\n
\n
\n

Create your family tree with ease.

\n
\n---style.css---\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n color: #333;\n}\n\nheader {\n background-color: #4CAF50;\n color: white;\n padding: 20px;\n text-align: center;\n}\n\nmain {\n padding: 20px;\n}\n\nform {\n max-width: 400px;\n margin: 0 auto;\n background: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\nlabel {\n display: block;\n margin-bottom: 8px;\n}\n\ninput {\n width: 100%;\n padding: 8px;\n margin-bottom: 16px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\nbutton {\n width: 100%;\n padding: 10px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #45a049;\n}\n\n#treeContainer {\n margin-top: 20px;\n}\n\n#tree {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.family-member {\n background: white;\n margin: 10px;\n padding: 15px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n text-align: center;\n width: 150px;\n}\n\n.hidden {\n display: none;\n}\n\n@media (max-width: 600px) {\n form {\n padding: 15px;\n }\n\n .family-member {\n width: 100%;\n margin: 5px 0;\n }\n}\n---script.js---\ndocument.getElementById('familyForm').addEventListener('submit', function(event) {\n event.preventDefault();\n const familyName = document.getElementById('familyName').value;\n const firstName = document.getElementById('firstName').value;\n\n const familyMembers = generateFamilyTree(familyName, firstName);\n displayFamilyTree(familyMembers);\n});\n\nfunction generateFamilyTree(familyName, firstName) {\n const jobsParents = [\"butcher\", \"blacksmith\", \"medic\", \"librarian\", \"trainer\", \"guard\", \"sweeper\", \"host\", \"merchant\", \"administration\", \"sewer\", \"lumberjack\", \"miner\", \"tailor\"];\n const jobsChildren = [\"student at the academy\", \"training as a civilian\"];\n\n const familyMembers = [\n { name: `Grandfather ${familyName}`, relationship: 'Grandfather', age: getRandomAge(60, 70), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },\n { name: `Grandmother ${familyName}`, relationship: 'Grandmother', age: getRandomAge(60, 70), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },\n { name: `Father ${familyName}`, relationship: 'Father', age: getRandomAge(30, 40), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },\n { name: `Mother ${familyName}`, relationship: 'Mother', age: getRandomAge(30, 40), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },\n { name: `Uncle ${familyName}`, relationship: 'Uncle', age: getRandomAge(30, 40), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },\n { name: `Aunt ${familyName}`, relationship: 'Aunt', age: getRandomAge(30, 40), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },\n { name: `${firstName} ${familyName}`, relationship: 'You', age: getRandomAge(10, 20), occupation: jobsChildren[Math.floor(Math.random() * jobsChildren.length)] },\n { name: `Brother ${familyName}`, relationship: 'Brother', age: getRandomAge(10, 20), occupation: jobsChildren[Math.floor(Math.random() * jobsChildren.length)] },\n { name: `Sister ${familyName}`, relationship: 'Sister', age: getRandomAge(10, 20), occupation: jobsChildren[Math.floor(Math.random() * jobsChildren.length)] },\n { name: `Cousin ${familyName}`, relationship: 'Cousin', age: getRandomAge(10, 20), occupation: jobsChildren[Math.floor(Math.random() * jobsChildren.length)] }\n ];\n\n return familyMembers;\n}\n\nfunction displayFamilyTree(familyMembers) {\n const treeContainer = document.getElementById('treeContainer');\n const tree = document.getElementById('tree');\n tree.innerHTML = '';\n\n familyMembers.forEach(member => {\n const memberDiv = document.createElement('div');\n memberDiv.className = 'family-member';\n memberDiv.innerHTML = `\n

${member.name}

\n

Relationship: ${member.relationship}

\n

Age: ${member.age}

\n

Occupation: ${member.occupation}

\n `;\n tree.appendChild(memberDiv);\n });\n\n treeContainer.classList.remove('hidden');\n}\n\nfunction getRandomAge(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n}\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 421,
+ "completion_tokens": 1469,
+ "total_tokens": 1890,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 421
+ },
+ "system_fingerprint": "fp_f1afce2943"
+ }
readme.scroll
Changed around line 1
+ # familytree3.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,
script.js
Changed around line 1
+ document.getElementById('familyForm').addEventListener('submit', function(event) {
+ event.preventDefault();
+ const familyName = document.getElementById('familyName').value;
+ const firstName = document.getElementById('firstName').value;
+
+ const familyMembers = generateFamilyTree(familyName, firstName);
+ displayFamilyTree(familyMembers);
+ });
+
+ function generateFamilyTree(familyName, firstName) {
+ const jobsParents = ["butcher", "blacksmith", "medic", "librarian", "trainer", "guard", "sweeper", "host", "merchant", "administration", "sewer", "lumberjack", "miner", "tailor"];
+ const jobsChildren = ["student at the academy", "training as a civilian"];
+
+ const familyMembers = [
+ { name: `Grandfather ${familyName}`, relationship: 'Grandfather', age: getRandomAge(60, 70), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },
+ { name: `Grandmother ${familyName}`, relationship: 'Grandmother', age: getRandomAge(60, 70), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },
+ { name: `Father ${familyName}`, relationship: 'Father', age: getRandomAge(30, 40), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },
+ { name: `Mother ${familyName}`, relationship: 'Mother', age: getRandomAge(30, 40), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },
+ { name: `Uncle ${familyName}`, relationship: 'Uncle', age: getRandomAge(30, 40), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },
+ { name: `Aunt ${familyName}`, relationship: 'Aunt', age: getRandomAge(30, 40), occupation: jobsParents[Math.floor(Math.random() * jobsParents.length)] },
+ { name: `${firstName} ${familyName}`, relationship: 'You', age: getRandomAge(10, 20), occupation: jobsChildren[Math.floor(Math.random() * jobsChildren.length)] },
+ { name: `Brother ${familyName}`, relationship: 'Brother', age: getRandomAge(10, 20), occupation: jobsChildren[Math.floor(Math.random() * jobsChildren.length)] },
+ { name: `Sister ${familyName}`, relationship: 'Sister', age: getRandomAge(10, 20), occupation: jobsChildren[Math.floor(Math.random() * jobsChildren.length)] },
+ { name: `Cousin ${familyName}`, relationship: 'Cousin', age: getRandomAge(10, 20), occupation: jobsChildren[Math.floor(Math.random() * jobsChildren.length)] }
+ ];
+
+ return familyMembers;
+ }
+
+ function displayFamilyTree(familyMembers) {
+ const treeContainer = document.getElementById('treeContainer');
+ const tree = document.getElementById('tree');
+ tree.innerHTML = '';
+
+ familyMembers.forEach(member => {
+ const memberDiv = document.createElement('div');
+ memberDiv.className = 'family-member';
+ memberDiv.innerHTML = `
+

${member.name}

+

Relationship: ${member.relationship}

+

Age: ${member.age}

+

Occupation: ${member.occupation}

+ `;
+ tree.appendChild(memberDiv);
+ });
+
+ treeContainer.classList.remove('hidden');
+ }
+
+ function getRandomAge(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
style.css
Changed around line 1
+ body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f4;
+ color: #333;
+ }
+
+ header {
+ background-color: #4CAF50;
+ color: white;
+ padding: 20px;
+ text-align: center;
+ }
+
+ main {
+ padding: 20px;
+ }
+
+ form {
+ max-width: 400px;
+ margin: 0 auto;
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ }
+
+ label {
+ display: block;
+ margin-bottom: 8px;
+ }
+
+ input {
+ width: 100%;
+ padding: 8px;
+ margin-bottom: 16px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ }
+
+ button {
+ width: 100%;
+ padding: 10px;
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+
+ button:hover {
+ background-color: #45a049;
+ }
+
+ #treeContainer {
+ margin-top: 20px;
+ }
+
+ #tree {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .family-member {
+ background: white;
+ margin: 10px;
+ padding: 15px;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ width: 150px;
+ }
+
+ .hidden {
+ display: none;
+ }
+
+ @media (max-width: 600px) {
+ form {
+ padding: 15px;
+ }
+
+ .family-member {
+ width: 100%;
+ margin: 5px 0;
+ }
+ }