commit 449efd53dab81b0ab5743a7d071e045ac2f18dc0
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 22:26:47 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..4057185
--- /dev/null
+++ b/body.html
@@ -0,0 +1,25 @@
+<header>
+ <h1>Family Tree Generator</h1>
+ <p>Create your unique Chinese family tree with just a few clicks!</p>
+</header>
+
+<main>
+ <section class="input-section">
+ <label for="familyName">Family Name:</label>
+ <input type="text" id="familyName" placeholder="Enter your family name" required>
+
+ <label for="firstName">Your First Name:</label>
+ <input type="text" id="firstName" placeholder="Enter your first name" required>
+
+ <button id="generateTree">Generate Family Tree</button>
+ </section>
+
+ <section class="tree-section">
+ <h2>Your Family Tree</h2>
+ <div id="familyTree"></div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with ❤️ for family connections</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..3923199
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "623c38d0-9a93-4cbe-a2aa-a2b956789eb4",
+ "object": "chat.completion",
+ "created": 1735338389,
+ "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>Create your unique Chinese family tree with just a few clicks!</p>\n</header>\n\n<main>\n <section class=\"input-section\">\n <label for=\"familyName\">Family Name:</label>\n <input type=\"text\" id=\"familyName\" placeholder=\"Enter your family name\" required>\n \n <label for=\"firstName\">Your First Name:</label>\n <input type=\"text\" id=\"firstName\" placeholder=\"Enter your first name\" required>\n \n <button id=\"generateTree\">Generate Family Tree</button>\n </section>\n\n <section class=\"tree-section\">\n <h2>Your Family Tree</h2>\n <div id=\"familyTree\"></div>\n </section>\n</main>\n\n<footer>\n <p>Made with ❤️ for family connections</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #4a90e2;\n --secondary-color: #f5a623;\n --background-color: #f8f8f8;\n --text-color: #333;\n --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\nbody {\n font-family: var(--font-family);\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nmain {\n padding: 2rem;\n max-width: 800px;\n margin: 0 auto;\n}\n\n.input-section {\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(--secondary-color);\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #e69500;\n}\n\n.tree-section {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n#familyTree {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n\n.family-member {\n background: var(--background-color);\n padding: 1rem;\n border-radius: 4px;\n text-align: center;\n}\n\n.family-member h3 {\n margin: 0;\n color: var(--primary-color);\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background-color: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 600px) {\n main {\n padding: 1rem;\n }\n \n .input-section, .tree-section {\n padding: 1rem;\n }\n}\n---script.js---\nconst familyNameInput = document.getElementById('familyName');\nconst firstNameInput = document.getElementById('firstName');\nconst generateButton = document.getElementById('generateTree');\nconst familyTreeContainer = document.getElementById('familyTree');\n\nconst chineseFirstNames = ['Wei', 'Jing', 'Ming', 'Li', 'Xiu', 'Hua', 'Yong', 'Qiang', 'Mei', 'Lan'];\nconst jobs = ['Carpenter', 'Hostess', 'Butcher', 'Painter'];\nconst relationships = ['Grandmother', 'Grandfather', 'Sister', 'Brother', 'Uncle'];\n\nfunction getRandomElement(array) {\n return array[Math.floor(Math.random() * array.length)];\n}\n\nfunction generateRandomAge(relationship) {\n if (relationship === 'Grandmother' || relationship === 'Grandfather') {\n return Math.floor(Math.random() * 30) + 60;\n } else if (relationship === 'Uncle') {\n return Math.floor(Math.random() * 20) + 40;\n } else {\n return Math.floor(Math.random() * 15) + 20;\n }\n}\n\nfunction generateFamilyMember(familyName) {\n const firstName = getRandomElement(chineseFirstNames);\n const relationship = getRandomElement(relationships);\n const job = getRandomElement(jobs);\n const age = generateRandomAge(relationship);\n \n return {\n name: `${firstName} ${familyName}`,\n relationship,\n job,\n age\n };\n}\n\nfunction displayFamilyTree(familyName, firstName) {\n familyTreeContainer.innerHTML = '';\n \n // Add yourself\n const yourself = document.createElement('div');\n yourself.className = 'family-member';\n yourself.innerHTML = `\n <h3>${firstName} ${familyName}</h3>\n <p>Yourself</p>\n `;\n familyTreeContainer.appendChild(yourself);\n \n // Generate 5 family members\n for (let i = 0; i < 5; i++) {\n const member = generateFamilyMember(familyName);\n const memberDiv = document.createElement('div');\n memberDiv.className = 'family-member';\n memberDiv.innerHTML = `\n <h3>${member.name}</h3>\n <p>${member.relationship}</p>\n <p>${member.job}</p>\n <p>Age: ${member.age}</p>\n `;\n familyTreeContainer.appendChild(memberDiv);\n }\n}\n\ngenerateButton.addEventListener('click', () => {\n const familyName = familyNameInput.value.trim();\n const firstName = firstNameInput.value.trim();\n \n if (familyName && firstName) {\n displayFamilyTree(familyName, firstName);\n } else {\n alert('Please enter both your family name and first name.');\n }\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 303,
+ "completion_tokens": 1452,
+ "total_tokens": 1755,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 303
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..5063b3a
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# familytree2.scroll.pub
+Website generated by DeepSeek from prompt: Family tree generator. Enter the name of the family and every member will use that last name. Enter your first name. Generate random family members with their relationship to you indicated grandmother grandfather sister brother uncle. Indicate their job (carpenter/hostess/butcher/painter). Indicate their age. Their name should sound chinese.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..5c7ab35
--- /dev/null
+++ b/script.js
@@ -0,0 +1,74 @@
+const familyNameInput = document.getElementById('familyName');
+const firstNameInput = document.getElementById('firstName');
+const generateButton = document.getElementById('generateTree');
+const familyTreeContainer = document.getElementById('familyTree');
+
+const chineseFirstNames = ['Wei', 'Jing', 'Ming', 'Li', 'Xiu', 'Hua', 'Yong', 'Qiang', 'Mei', 'Lan'];
+const jobs = ['Carpenter', 'Hostess', 'Butcher', 'Painter'];
+const relationships = ['Grandmother', 'Grandfather', 'Sister', 'Brother', 'Uncle'];
+
+function getRandomElement(array) {
+ return array[Math.floor(Math.random() * array.length)];
+}
+
+function generateRandomAge(relationship) {
+ if (relationship === 'Grandmother' || relationship === 'Grandfather') {
+ return Math.floor(Math.random() * 30) + 60;
+ } else if (relationship === 'Uncle') {
+ return Math.floor(Math.random() * 20) + 40;
+ } else {
+ return Math.floor(Math.random() * 15) + 20;
+ }
+}
+
+function generateFamilyMember(familyName) {
+ const firstName = getRandomElement(chineseFirstNames);
+ const relationship = getRandomElement(relationships);
+ const job = getRandomElement(jobs);
+ const age = generateRandomAge(relationship);
+
+ return {
+ name: `${firstName} ${familyName}`,
+ relationship,
+ job,
+ age
+ };
+}
+
+function displayFamilyTree(familyName, firstName) {
+ familyTreeContainer.innerHTML = '';
+
+ // Add yourself
+ const yourself = document.createElement('div');
+ yourself.className = 'family-member';
+ yourself.innerHTML = `
+ <h3>${firstName} ${familyName}</h3>
+ <p>Yourself</p>
+ `;
+ familyTreeContainer.appendChild(yourself);
+
+ // Generate 5 family members
+ for (let i = 0; i < 5; i++) {
+ const member = generateFamilyMember(familyName);
+ const memberDiv = document.createElement('div');
+ memberDiv.className = 'family-member';
+ memberDiv.innerHTML = `
+ <h3>${member.name}</h3>
+ <p>${member.relationship}</p>
+ <p>${member.job}</p>
+ <p>Age: ${member.age}</p>
+ `;
+ familyTreeContainer.appendChild(memberDiv);
+ }
+}
+
+generateButton.addEventListener('click', () => {
+ const familyName = familyNameInput.value.trim();
+ const firstName = firstNameInput.value.trim();
+
+ if (familyName && firstName) {
+ displayFamilyTree(familyName, firstName);
+ } else {
+ alert('Please enter both your family name and first name.');
+ }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..89ff23f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,109 @@
+:root {
+ --primary-color: #4a90e2;
+ --secondary-color: #f5a623;
+ --background-color: #f8f8f8;
+ --text-color: #333;
+ --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+ font-family: var(--font-family);
+ margin: 0;
+ padding: 0;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ background-color: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+}
+
+main {
+ padding: 2rem;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.input-section {
+ 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(--secondary-color);
+ color: white;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: background-color 0.3s ease;
+}
+
+button:hover {
+ background-color: #e69500;
+}
+
+.tree-section {
+ background: white;
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+#familyTree {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+}
+
+.family-member {
+ background: var(--background-color);
+ padding: 1rem;
+ border-radius: 4px;
+ text-align: center;
+}
+
+.family-member h3 {
+ margin: 0;
+ color: var(--primary-color);
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ background-color: var(--primary-color);
+ color: white;
+ margin-top: 2rem;
+}
+
+@media (max-width: 600px) {
+ main {
+ padding: 1rem;
+ }
+
+ .input-section, .tree-section {
+ padding: 1rem;
+ }
+}
\ No newline at end of file