+

+

Family Tree Generator

+

+

+

+ Family Name:

+

+ Your First Name:

+

+ Generate Family Tree

+

+

+

+

+

Create your family tree in seconds!

+

+ buildHtml

+ baseUrl https://familytree.scroll.pub

+ metaTags

+ editButton /edit.html

+ title Family Tree Generator

+ style.css

+ body.html

+ script.js

+ {

+ "id": "2d275b38-228a-44bf-a8d6-8b46a4239199",

+ "object": "chat.completion",

+ "created": 1735385154,

+ "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 Family Name:\n \n Your First Name:\n \n Generate Family Tree\n

\n

\n

\n \n

\n

\n \n

\n

\n \n

\n

\n

\n\n---style.css---\n:root {\n --primary-color: #4a90e2;\n --secondary-color: #f5f5f5;\n --accent-color: #ff6b6b;\n --text-color: #333;\n --font-family: 'Segoe UI', sans-serif;\n}\n\nbody {\n font-family: var(--font-family);\n color: var(--text-color);\n margin: 0;\n padding: 20px;\n background-color: var(--secondary-color);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2rem;\n}\n\nh1 {\n color: var(--primary-color);\n font-size: 2.5rem;\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 max-width: 400px;\n width: 100%;\n margin-bottom: 2rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\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 border: none;\n padding: 0.75rem 1.5rem;\n border-radius: 4px;\n cursor: pointer;\n width: 100%;\n}\n\nbutton:hover {\n background-color: #357abd;\n}\n\n#tree-container {\n display: none;\n width: 100%;\n max-width: 1200px;\n margin-top: 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 color: var(--primary-color);\n margin-bottom: 0.5rem;\n}\n\n.member p {\n margin: 0.25rem 0;\n}\n\n.connector {\n position: absolute;\n background: var(--primary-color);\n}\n\n.horizontal-connector {\n width: 100%;\n height: 2px;\n top: 50%;\n}\n\n.vertical-connector {\n width: 2px;\n height: 100px;\n left: 50%;\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n margin-top: auto;\n padding: 1rem;\n text-align: center;\n color: #666;\n}\n\n@media (max-width: 768px) {\n .generation {\n flex-direction: column;\n align-items: center;\n }\n \n .member {\n margin: 0.5rem 0;\n }\n}\n---script.js---\nconst jobs = [\n 'butcher', 'blacksmith', 'medic', 'librarian', 'trainer', \n 'guard', 'sweeper', 'host', 'merchant', 'administration', \n 'sewer', 'lumberjack', 'miner', 'tailor'\n];\n\nfunction getRandomAge(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n}\n\nfunction getRandomJob() {\n return jobs[Math.floor(Math.random() * jobs.length)];\n}\n\nfunction createMember(name, role, age, job) {\n const member = document.createElement('div');\n member.className = 'member';\n member.innerHTML = `\n

${name}

\n

${role}

\n

Age: ${age}

\n

${job}

\n `;\n return member;\n}\n\nfunction generateFamilyTree(familyName, firstName) {\n const grandparents = [\n createMember(`${familyName} Senior`, 'Grandfather', getRandomAge(60, 70), getRandomJob()),\n createMember(`${familyName} Seniora`, 'Grandmother', getRandomAge(60, 70), getRandomJob())\n ];\n\n const parents = [\n createMember(`${familyName} Junior`, 'Father', getRandomAge(30, 40), getRandomJob()),\n createMember(`${firstName} ${familyName}`, 'Mother', getRandomAge(30, 40), getRandomJob()),\n createMember(`${familyName} Uncle`, 'Uncle', getRandomAge(30, 40), getRandomJob()),\n createMember(`${familyName} Aunt`, 'Aunt', getRandomAge(30, 40), getRandomJob())\n ];\n\n const children = [\n createMember(`${familyName} Jr.`, 'Brother', getRandomAge(10, 20), 'Student at the Academy'),\n createMember(`${familyName} Jr.`, 'Sister', getRandomAge(10, 20), 'Training as a Civilian'),\n createMember(`${familyName} Cousin`, 'Cousin', getRandomAge(10, 20), 'Student at the Academy')\n ];\n\n const treeContainer = document.getElementById('tree-container');\n const grandparentsDiv = document.getElementById('grandparents');\n const parentsDiv = document.getElementById('parents');\n const childrenDiv = document.getElementById('children');\n\n grandparentsDiv.innerHTML = '';\n parentsDiv.innerHTML = '';\n childrenDiv.innerHTML = '';\n\n grandparents.forEach(gp => grandparentsDiv.appendChild(gp));\n parents.forEach(p => parentsDiv.appendChild(p));\n children.forEach(c => childrenDiv.appendChild(c));\n\n treeContainer.classList.remove('hidden');\n}\n\ndocument.getElementById('family-form').addEventListener('submit', function(e) {\n e.preventDefault();\n const familyName = document.getElementById('family-name').value;\n const firstName = document.getElementById('first-name').value;\n generateFamilyTree(familyName, firstName);\n});\n---end---"

+ },

+ "logprobs": null,

+ "finish_reason": "stop"

+ }

+ ],

+ "usage": {

+ "prompt_tokens": 494,

+ "completion_tokens": 1615,

+ "total_tokens": 2109,

+ "prompt_cache_hit_tokens": 0,

+ "prompt_cache_miss_tokens": 494

+ },

+ "system_fingerprint": "fp_f1afce2943"

+ }

+ # familytree4.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. 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. Rectangles representing family members should be linked by a line. A vertical line to display being siblings and a vertical line to indicate being the parent of / the children of.

+ const jobs = [

+ 'butcher', 'blacksmith', 'medic', 'librarian', 'trainer',

+ 'guard', 'sweeper', 'host', 'merchant', 'administration',

+ 'sewer', 'lumberjack', 'miner', 'tailor'

+ ];

+

+ function getRandomAge(min, max) {

+ return Math.floor(Math.random() * (max - min + 1)) + min;

+ }

+

+ function getRandomJob() {

+ return jobs[Math.floor(Math.random() * jobs.length)];

+ }

+

+ function createMember(name, role, age, job) {

+ const member = document.createElement('div');

+ member.className = 'member';

+ member.innerHTML = `

+

${name}

+

${role}

+

Age: ${age}

+

${job}

+ `;

+ return member;

+ }

+

+ function generateFamilyTree(familyName, firstName) {

+ const grandparents = [

+ createMember(`${familyName} Senior`, 'Grandfather', getRandomAge(60, 70), getRandomJob()),

+ createMember(`${familyName} Seniora`, 'Grandmother', getRandomAge(60, 70), getRandomJob())

+ ];

+

+ const parents = [

+ createMember(`${familyName} Junior`, 'Father', getRandomAge(30, 40), getRandomJob()),

+ createMember(`${firstName} ${familyName}`, 'Mother', getRandomAge(30, 40), getRandomJob()),

+ createMember(`${familyName} Uncle`, 'Uncle', getRandomAge(30, 40), getRandomJob()),

+ createMember(`${familyName} Aunt`, 'Aunt', getRandomAge(30, 40), getRandomJob())

+ ];

+

+ const children = [

+ createMember(`${familyName} Jr.`, 'Brother', getRandomAge(10, 20), 'Student at the Academy'),

+ createMember(`${familyName} Jr.`, 'Sister', getRandomAge(10, 20), 'Training as a Civilian'),

+ createMember(`${familyName} Cousin`, 'Cousin', getRandomAge(10, 20), 'Student at the Academy')

+ ];

+

+ const treeContainer = document.getElementById('tree-container');

+ const grandparentsDiv = document.getElementById('grandparents');

+ const parentsDiv = document.getElementById('parents');

+ const childrenDiv = document.getElementById('children');

+

+ grandparentsDiv.innerHTML = '';

+ parentsDiv.innerHTML = '';

+ childrenDiv.innerHTML = '';

+

+ grandparents.forEach(gp => grandparentsDiv.appendChild(gp));

+ parents.forEach(p => parentsDiv.appendChild(p));

+ children.forEach(c => childrenDiv.appendChild(c));

+

+ treeContainer.classList.remove('hidden');

+ }

+

+ document.getElementById('family-form').addEventListener('submit', function(e) {

+ e.preventDefault();

+ const familyName = document.getElementById('family-name').value;

+ const firstName = document.getElementById('first-name').value;

+ generateFamilyTree(familyName, firstName);

+ });

+ :root {

+ --primary-color: #4a90e2;

+ --secondary-color: #f5f5f5;

+ --accent-color: #ff6b6b;

+ --text-color: #333;

+ --font-family: 'Segoe UI', sans-serif;

+ }

+

+ body {

+ font-family: var(--font-family);

+ color: var(--text-color);

+ margin: 0;

+ padding: 20px;

+ background-color: var(--secondary-color);

+ min-height: 100vh;

+ display: flex;

+ flex-direction: column;

+ align-items: center;

+ }

+

+ header {

+ text-align: center;

+ margin-bottom: 2rem;

+ }

+

+ h1 {

+ color: var(--primary-color);

+ font-size: 2.5rem;

+ }

+

+ form {

+ background: white;

+ padding: 2rem;

+ border-radius: 8px;

+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);

+ max-width: 400px;

+ width: 100%;

+ margin-bottom: 2rem;

+ }

+

+ label {

+ display: block;

+ margin-bottom: 0.5rem;

+ }

+

+ input {

+ width: 100%;

+ padding: 0.5rem;

+ margin-bottom: 1rem;

+ border: 1px solid #ddd;

+ border-radius: 4px;

+ }

+

+ button {

+ background-color: var(--primary-color);

+ color: white;

+ border: none;

+ padding: 0.75rem 1.5rem;

+ border-radius: 4px;

+ cursor: pointer;

+ width: 100%;

+ }

+

+ button:hover {

+ background-color: #357abd;

+ }

+

+ #tree-container {

+ display: none;

+ width: 100%;

+ max-width: 1200px;

+ margin-top: 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 {

+ color: var(--primary-color);

+ margin-bottom: 0.5rem;

+ }

+

+ .member p {

+ margin: 0.25rem 0;

+ }

+

+ .connector {

+ position: absolute;

+ background: var(--primary-color);

+ }

+

+ .horizontal-connector {

+ width: 100%;

+ height: 2px;

+ top: 50%;

+ }

+

+ .vertical-connector {

+ width: 2px;

+ height: 100px;

+ left: 50%;

+ }

+

+ .hidden {

+ display: none;

+ }

+

+ footer {

+ margin-top: auto;

+ padding: 1rem;

+ text-align: center;

+ color: #666;

+ }

+

+ @media (max-width: 768px) {

+ .generation {

+ flex-direction: column;

+ align-items: center;

+ }

+

+ .member {

+ margin: 0.5rem 0;

+ }

+ }