commit a64f40fd55760f888576fa0e308e54756735c4e0
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 11:18:45 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d130be2
--- /dev/null
+++ b/body.html
@@ -0,0 +1,19 @@
+<header>
+ <h1>Family Tree Generator</h1>
+</header>
+<main>
+ <form id="familyForm">
+ <label for="familyName">Family Name:</label>
+ <input type="text" id="familyName" name="familyName" required>
+ <label for="firstName">Your First Name:</label>
+ <input type="text" id="firstName" name="firstName" required>
+ <button type="submit">Generate Family Tree</button>
+ </form>
+ <div id="treeContainer" class="hidden">
+ <h2>Family Tree</h2>
+ <div id="tree"></div>
+ </div>
+</main>
+<footer>
+ <p>Create your family tree with ease.</p>
+</footer>
\ 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..dc1aef1
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "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<header>\n <h1>Family Tree Generator</h1>\n</header>\n<main>\n <form id=\"familyForm\">\n <label for=\"familyName\">Family Name:</label>\n <input type=\"text\" id=\"familyName\" name=\"familyName\" required>\n <label for=\"firstName\">Your First Name:</label>\n <input type=\"text\" id=\"firstName\" name=\"firstName\" required>\n <button type=\"submit\">Generate Family Tree</button>\n </form>\n <div id=\"treeContainer\" class=\"hidden\">\n <h2>Family Tree</h2>\n <div id=\"tree\"></div>\n </div>\n</main>\n<footer>\n <p>Create your family tree with ease.</p>\n</footer>\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 <h3>${member.name}</h3>\n <p><strong>Relationship:</strong> ${member.relationship}</p>\n <p><strong>Age:</strong> ${member.age}</p>\n <p><strong>Occupation:</strong> ${member.occupation}</p>\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"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..eda887c
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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,
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..70ae55c
--- /dev/null
+++ b/script.js
@@ -0,0 +1,52 @@
+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 = `
+ <h3>${member.name}</h3>
+ <p><strong>Relationship:</strong> ${member.relationship}</p>
+ <p><strong>Age:</strong> ${member.age}</p>
+ <p><strong>Occupation:</strong> ${member.occupation}</p>
+ `;
+ tree.appendChild(memberDiv);
+ });
+
+ treeContainer.classList.remove('hidden');
+}
+
+function getRandomAge(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4074f5e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,89 @@
+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;
+ }
+}
\ No newline at end of file