Changes to familytree5.scroll.pub

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

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": "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 \n \n \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;
+ }
+ }