commit bbd48169ef0ffc8f0944be98ee7060297da7b4e8
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 11:30:26 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d82e1b8
--- /dev/null
+++ b/body.html
@@ -0,0 +1,13 @@
+<div class="container">
+ <h1>Family Tree Generator</h1>
+ <form id="familyForm">
+ <label for="familyName">Family Name:</label>
+ <input type="text" id="familyName" required>
+ <label for="firstName">Your First Name:</label>
+ <input type="text" id="firstName" required>
+ <button type="submit">Generate Family Tree</button>
+ </form>
+ <div id="treeContainer" class="tree">
+ <!-- Family tree will be generated here -->
+ </div>
+</div>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..8618122
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://familytree.scroll.pub
+metaTags
+editButton /edit.html
+title Family Tree Generator
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..f331933
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "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<div class=\"container\">\n <h1>Family Tree Generator</h1>\n <form id=\"familyForm\">\n <label for=\"familyName\">Family Name:</label>\n <input type=\"text\" id=\"familyName\" required>\n <label for=\"firstName\">Your First Name:</label>\n <input type=\"text\" id=\"firstName\" required>\n <button type=\"submit\">Generate Family Tree</button>\n </form>\n <div id=\"treeContainer\" class=\"tree\">\n <!-- Family tree will be generated here -->\n </div>\n</div>\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 <div class=\"generation\">\n <div class=\"member\">\n <h3>${grandfather.name}</h3>\n <p>Age: ${grandfather.age}</p>\n <p>Occupation: ${grandfather.occupation}</p>\n <p>Relation: ${grandfather.relation}</p>\n </div>\n <div class=\"member\">\n <h3>${grandmother.name}</h3>\n <p>Age: ${grandmother.age}</p>\n <p>Occupation: ${grandmother.occupation}</p>\n <p>Relation: ${grandmother.relation}</p>\n </div>\n </div>\n <div class=\"line vertical-line\"></div>\n <div class=\"generation\">\n <div class=\"member\">\n <h3>${father.name}</h3>\n <p>Age: ${father.age}</p>\n <p>Occupation: ${father.occupation}</p>\n <p>Relation: ${father.relation}</p>\n </div>\n <div class=\"member\">\n <h3>${mother.name}</h3>\n <p>Age: ${mother.age}</p>\n <p>Occupation: ${mother.occupation}</p>\n <p>Relation: ${mother.relation}</p>\n </div>\n <div class=\"member\">\n <h3>${uncle.name}</h3>\n <p>Age: ${uncle.age}</p>\n <p>Occupation: ${uncle.occupation}</p>\n <p>Relation: ${uncle.relation}</p>\n </div>\n <div class=\"member\">\n <h3>${aunt.name}</h3>\n <p>Age: ${aunt.age}</p>\n <p>Occupation: ${aunt.occupation}</p>\n <p>Relation: ${aunt.relation}</p>\n </div>\n </div>\n <div class=\"line vertical-line\"></div>\n <div class=\"generation\">\n <div class=\"member\">\n <h3>${brother.name}</h3>\n <p>Age: ${brother.age}</p>\n <p>Occupation: ${brother.occupation}</p>\n <p>Relation: ${brother.relation}</p>\n </div>\n <div class=\"member\">\n <h3>${sister.name}</h3>\n <p>Age: ${sister.age}</p>\n <p>Occupation: ${sister.occupation}</p>\n <p>Relation: ${sister.relation}</p>\n </div>\n <div class=\"member\">\n <h3>${cousin.name}</h3>\n <p>Age: ${cousin.age}</p>\n <p>Occupation: ${cousin.occupation}</p>\n <p>Relation: ${cousin.relation}</p>\n </div>\n </div>\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"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..10980b3
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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"
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..12111d5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,151 @@
+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 = `
+ <div class="generation">
+ <div class="member">
+ <h3>${grandfather.name}</h3>
+ <p>Age: ${grandfather.age}</p>
+ <p>Occupation: ${grandfather.occupation}</p>
+ <p>Relation: ${grandfather.relation}</p>
+ </div>
+ <div class="member">
+ <h3>${grandmother.name}</h3>
+ <p>Age: ${grandmother.age}</p>
+ <p>Occupation: ${grandmother.occupation}</p>
+ <p>Relation: ${grandmother.relation}</p>
+ </div>
+ </div>
+ <div class="line vertical-line"></div>
+ <div class="generation">
+ <div class="member">
+ <h3>${father.name}</h3>
+ <p>Age: ${father.age}</p>
+ <p>Occupation: ${father.occupation}</p>
+ <p>Relation: ${father.relation}</p>
+ </div>
+ <div class="member">
+ <h3>${mother.name}</h3>
+ <p>Age: ${mother.age}</p>
+ <p>Occupation: ${mother.occupation}</p>
+ <p>Relation: ${mother.relation}</p>
+ </div>
+ <div class="member">
+ <h3>${uncle.name}</h3>
+ <p>Age: ${uncle.age}</p>
+ <p>Occupation: ${uncle.occupation}</p>
+ <p>Relation: ${uncle.relation}</p>
+ </div>
+ <div class="member">
+ <h3>${aunt.name}</h3>
+ <p>Age: ${aunt.age}</p>
+ <p>Occupation: ${aunt.occupation}</p>
+ <p>Relation: ${aunt.relation}</p>
+ </div>
+ </div>
+ <div class="line vertical-line"></div>
+ <div class="generation">
+ <div class="member">
+ <h3>${brother.name}</h3>
+ <p>Age: ${brother.age}</p>
+ <p>Occupation: ${brother.occupation}</p>
+ <p>Relation: ${brother.relation}</p>
+ </div>
+ <div class="member">
+ <h3>${sister.name}</h3>
+ <p>Age: ${sister.age}</p>
+ <p>Occupation: ${sister.occupation}</p>
+ <p>Relation: ${sister.relation}</p>
+ </div>
+ <div class="member">
+ <h3>${cousin.name}</h3>
+ <p>Age: ${cousin.age}</p>
+ <p>Occupation: ${cousin.occupation}</p>
+ <p>Relation: ${cousin.relation}</p>
+ </div>
+ </div>
+ `;
+
+ treeContainer.innerHTML = treeHTML;
+}
+
+familyForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ const familyName = document.getElementById('familyName').value;
+ const firstName = document.getElementById('firstName').value;
+ generateFamilyTree(familyName, firstName);
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..8a04f75
--- /dev/null
+++ b/style.css
@@ -0,0 +1,133 @@
+: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;
+ }
+}
\ No newline at end of file