commit 07653ab9cd2880f0ebdfec376c3937055238d0b0
Author: root <root@hub.scroll.pub> Date: 2024-12-28 11:26:17 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..e10b9f6 --- /dev/null +++ b/body.html @@ -0,0 +1,26 @@ +<header> + <h1>Family Tree Generator</h1> +</header> +<main> + <form id="family-form"> + <label for="family-name">Family Name:</label> + <input type="text" id="family-name" required> + <label for="first-name">Your First Name:</label> + <input type="text" id="first-name" required> + <button type="submit">Generate Family Tree</button> + </form> + <div id="tree-container" class="hidden"> + <div class="generation" id="grandparents"> + <!-- Grandparents will be inserted here --> + </div> + <div class="generation" id="parents"> + <!-- Parents and aunts/uncles will be inserted here --> + </div> + <div class="generation" id="children"> + <!-- Children and cousins will be inserted here --> + </div> + </div> +</main> +<footer> + <p>Create your family tree in seconds!</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..2425716 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "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<header>\n <h1>Family Tree Generator</h1>\n</header>\n<main>\n <form id=\"family-form\">\n <label for=\"family-name\">Family Name:</label>\n <input type=\"text\" id=\"family-name\" required>\n <label for=\"first-name\">Your First Name:</label>\n <input type=\"text\" id=\"first-name\" required>\n <button type=\"submit\">Generate Family Tree</button>\n </form>\n <div id=\"tree-container\" class=\"hidden\">\n <div class=\"generation\" id=\"grandparents\">\n <!-- Grandparents will be inserted here -->\n </div>\n <div class=\"generation\" id=\"parents\">\n <!-- Parents and aunts/uncles will be inserted here -->\n </div>\n <div class=\"generation\" id=\"children\">\n <!-- Children and cousins will be inserted here -->\n </div>\n </div>\n</main>\n<footer>\n <p>Create your family tree in seconds!</p>\n</footer>\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 <h3>${name}</h3>\n <p>${role}</p>\n <p>Age: ${age}</p>\n <p>${job}</p>\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" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..57a03cd --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# 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. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..56914d4 --- /dev/null +++ b/script.js @@ -0,0 +1,67 @@ +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 = ` + <h3>${name}</h3> + <p>${role}</p> + <p>Age: ${age}</p> + <p>${job}</p> + `; + 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); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e658ac8 --- /dev/null +++ b/style.css @@ -0,0 +1,138 @@ +: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; + } +} \ No newline at end of file