commit 18d30b051295e719967a5a288aa250fc49974b12
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 22:21:30 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..350931a
--- /dev/null
+++ b/body.html
@@ -0,0 +1,20 @@
+<header>
+ <h1>Family Tree Generator</h1>
+ <p>Enter your family name and your first name to generate a random family tree with 10 members.</p>
+</header>
+<main>
+ <form id="familyTreeForm">
+ <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="familyTree" class="hidden">
+ <h2>Your Family Tree</h2>
+ <ul id="familyMembers"></ul>
+ </div>
+</main>
+<footer>
+ <p>Created with ❤️ by Family Tree Generator</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..d789133
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "acd2fcf7-1bc5-4614-8cf5-0be5a6f3e7c5",
+ "object": "chat.completion",
+ "created": 1735338075,
+ "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 <p>Enter your family name and your first name to generate a random family tree with 10 members.</p>\n</header>\n<main>\n <form id=\"familyTreeForm\">\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=\"familyTree\" class=\"hidden\">\n <h2>Your Family Tree</h2>\n <ul id=\"familyMembers\"></ul>\n </div>\n</main>\n<footer>\n <p>Created with ❤️ by Family Tree Generator</p>\n</footer>\n---style.css---\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f4f4f9;\n color: #333;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n}\n\nheader {\n text-align: center;\n padding: 20px;\n background-color: #4CAF50;\n color: white;\n width: 100%;\n}\n\nheader h1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\nheader p {\n margin: 10px 0 0;\n font-size: 1.2rem;\n}\n\nmain {\n width: 90%;\n max-width: 600px;\n margin: 20px auto;\n padding: 20px;\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\nform {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n margin-bottom: 5px;\n font-weight: bold;\n}\n\ninput {\n margin-bottom: 15px;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 1rem;\n}\n\nbutton {\n padding: 10px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n font-size: 1rem;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #45a049;\n}\n\n#familyTree {\n margin-top: 20px;\n}\n\n#familyTree.hidden {\n display: none;\n}\n\n#familyMembers {\n list-style-type: none;\n padding: 0;\n}\n\n#familyMembers li {\n padding: 10px;\n border-bottom: 1px solid #ccc;\n font-size: 1.1rem;\n}\n\nfooter {\n text-align: center;\n padding: 10px;\n background-color: #4CAF50;\n color: white;\n width: 100%;\n position: fixed;\n bottom: 0;\n}\n---script.js---\ndocument.getElementById('familyTreeForm').addEventListener('submit', function(event) {\n event.preventDefault();\n \n const familyName = document.getElementById('familyName').value;\n const firstName = document.getElementById('firstName').value;\n \n const familyMembers = generateFamilyTree(familyName, firstName);\n \n const familyMembersList = document.getElementById('familyMembers');\n familyMembersList.innerHTML = '';\n \n familyMembers.forEach(member => {\n const li = document.createElement('li');\n li.textContent = `${member.name} - ${member.relationship}`;\n familyMembersList.appendChild(li);\n });\n \n document.getElementById('familyTree').classList.remove('hidden');\n});\n\nfunction generateFamilyTree(familyName, firstName) {\n const relationships = [\n 'Grandfather', 'Grandmother', 'Father', 'Mother', 'Uncle', 'Aunt', 'Brother', 'Sister', 'Cousin', 'Nephew'\n ];\n \n const firstNames = ['John', 'Jane', 'Michael', 'Emily', 'David', 'Sarah', 'James', 'Emma', 'William', 'Olivia'];\n const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];\n \n const familyMembers = [];\n \n for (let i = 0; i < 10; i++) {\n const randomFirstName = firstNames[Math.floor(Math.random() * firstNames.length)];\n const randomLastName = lastNames[Math.floor(Math.random() * lastNames.length)];\n const relationship = relationships[i];\n \n familyMembers.push({\n name: `${randomFirstName} ${randomLastName}`,\n relationship: relationship\n });\n }\n \n return familyMembers;\n}\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 294,
+ "completion_tokens": 1135,
+ "total_tokens": 1429,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 294
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..2686ba6
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# familytree1.scroll.pub
+Website generated by DeepSeek from prompt: I want a website that can generate a family tree. Enter the name of the family and you first name and it will generate you random named family members with their relationship towards you indicated. Grandfather grandmother ,uncles ,brothers, sisters... The number of family member should always be 10
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..665275d
--- /dev/null
+++ b/script.js
@@ -0,0 +1,43 @@
+document.getElementById('familyTreeForm').addEventListener('submit', function(event) {
+ event.preventDefault();
+
+ const familyName = document.getElementById('familyName').value;
+ const firstName = document.getElementById('firstName').value;
+
+ const familyMembers = generateFamilyTree(familyName, firstName);
+
+ const familyMembersList = document.getElementById('familyMembers');
+ familyMembersList.innerHTML = '';
+
+ familyMembers.forEach(member => {
+ const li = document.createElement('li');
+ li.textContent = `${member.name} - ${member.relationship}`;
+ familyMembersList.appendChild(li);
+ });
+
+ document.getElementById('familyTree').classList.remove('hidden');
+});
+
+function generateFamilyTree(familyName, firstName) {
+ const relationships = [
+ 'Grandfather', 'Grandmother', 'Father', 'Mother', 'Uncle', 'Aunt', 'Brother', 'Sister', 'Cousin', 'Nephew'
+ ];
+
+ const firstNames = ['John', 'Jane', 'Michael', 'Emily', 'David', 'Sarah', 'James', 'Emma', 'William', 'Olivia'];
+ const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];
+
+ const familyMembers = [];
+
+ for (let i = 0; i < 10; i++) {
+ const randomFirstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+ const randomLastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+ const relationship = relationships[i];
+
+ familyMembers.push({
+ name: `${randomFirstName} ${randomLastName}`,
+ relationship: relationship
+ });
+ }
+
+ return familyMembers;
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..07a0071
--- /dev/null
+++ b/style.css
@@ -0,0 +1,101 @@
+body {
+ font-family: 'Arial', sans-serif;
+ background-color: #f4f4f9;
+ color: #333;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+}
+
+header {
+ text-align: center;
+ padding: 20px;
+ background-color: #4CAF50;
+ color: white;
+ width: 100%;
+}
+
+header h1 {
+ margin: 0;
+ font-size: 2.5rem;
+}
+
+header p {
+ margin: 10px 0 0;
+ font-size: 1.2rem;
+}
+
+main {
+ width: 90%;
+ max-width: 600px;
+ margin: 20px auto;
+ padding: 20px;
+ background-color: white;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+}
+
+label {
+ margin-bottom: 5px;
+ font-weight: bold;
+}
+
+input {
+ margin-bottom: 15px;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 1rem;
+}
+
+button {
+ padding: 10px;
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 1rem;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #45a049;
+}
+
+#familyTree {
+ margin-top: 20px;
+}
+
+#familyTree.hidden {
+ display: none;
+}
+
+#familyMembers {
+ list-style-type: none;
+ padding: 0;
+}
+
+#familyMembers li {
+ padding: 10px;
+ border-bottom: 1px solid #ccc;
+ font-size: 1.1rem;
+}
+
+footer {
+ text-align: center;
+ padding: 10px;
+ background-color: #4CAF50;
+ color: white;
+ width: 100%;
+ position: fixed;
+ bottom: 0;
+}
\ No newline at end of file