Last 10 Commits for phonelist.scroll.pub

commit 886b93e160e2e631bd72bbe7cccb45ab3007c7be Author: root <root@hub.scroll.pub> Date: 2024-12-27 15:15:04 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..9371066 --- /dev/null +++ b/body.html @@ -0,0 +1,47 @@ +<header> + <h1>Phone Directory</h1> + <button id="addEntry" class="btn-primary">Add New Entry</button> +</header> + +<main> + <div class="search-container"> + <input type="text" id="search" placeholder="Search by name or office..."> + </div> + + <table id="directoryTable"> + <thead> + <tr> + <th>Name</th> + <th>Office</th> + <th>Phone</th> + <th>Last Updated</th> + <th>Actions</th> + </tr> + </thead> + <tbody> +  + </tbody> + </table> +</main> + +<dialog id="entryDialog"> + <form id="entryForm"> + <h2>Add/Edit Entry</h2> + <div class="form-group"> + <label for="name">Name:</label> + <input type="text" id="name" required> + </div> + <div class="form-group"> + <label for="office">Office:</label> + <input type="text" id="office" required> + </div> + <div class="form-group"> + <label for="phone">Phone:</label> + <input type="tel" id="phone" required> + </div> + <div class="button-group"> + <button type="button" id="cancelBtn" class="btn-secondary">Cancel</button> + <button type="submit" class="btn-primary">Save</button> + </div> + </form> +</dialog> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..384cb52 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://phonelist.scroll.pub +metaTags +editButton /edit.html +title Phone Directory +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..a08acc5 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "e9e10d4e-fb40-4530-b9d7-12b2fffee051", + "object": "chat.completion", + "created": 1735312476, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nphonelist.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://phonelist.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Phone Directory\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Phone Directory</h1>\n <button id=\"addEntry\" class=\"btn-primary\">Add New Entry</button>\n</header>\n\n<main>\n <div class=\"search-container\">\n <input type=\"text\" id=\"search\" placeholder=\"Search by name or office...\">\n </div>\n\n <table id=\"directoryTable\">\n <thead>\n <tr>\n <th>Name</th>\n <th>Office</th>\n <th>Phone</th>\n <th>Last Updated</th>\n <th>Actions</th>\n </tr>\n </thead>\n <tbody>\n \n </tbody>\n </table>\n</main>\n\n<dialog id=\"entryDialog\">\n <form id=\"entryForm\">\n <h2>Add/Edit Entry</h2>\n <div class=\"form-group\">\n <label for=\"name\">Name:</label>\n <input type=\"text\" id=\"name\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"office\">Office:</label>\n <input type=\"text\" id=\"office\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"phone\">Phone:</label>\n <input type=\"tel\" id=\"phone\" required>\n </div>\n <div class=\"button-group\">\n <button type=\"button\" id=\"cancelBtn\" class=\"btn-secondary\">Cancel</button>\n <button type=\"submit\" class=\"btn-primary\">Save</button>\n </div>\n </form>\n</dialog>\n---style.css---\n:root {\n --primary-color: #2563eb;\n --secondary-color: #64748b;\n --background-color: #f8fafc;\n --text-color: #1e293b;\n --border-color: #e2e8f0;\n --shadow: 0 1px 3px rgba(0,0,0,0.12);\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n margin: 0;\n padding: 20px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nheader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 2rem;\n}\n\nh1 {\n color: var(--primary-color);\n margin: 0;\n}\n\n.search-container {\n margin-bottom: 1.5rem;\n}\n\n#search {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid var(--border-color);\n border-radius: 0.5rem;\n box-shadow: var(--shadow);\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n background: white;\n box-shadow: var(--shadow);\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n}\n\nth {\n background-color: var(--primary-color);\n color: white;\n font-weight: 600;\n}\n\ntr:nth-child(even) {\n background-color: var(--background-color);\n}\n\n.btn-primary, .btn-secondary {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 0.25rem;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.btn-primary {\n background-color: var(--primary-color);\n color: white;\n}\n\n.btn-secondary {\n background-color: var(--secondary-color);\n color: white;\n}\n\n.btn-primary:hover, .btn-secondary:hover {\n opacity: 0.9;\n}\n\n#entryDialog {\n border: none;\n border-radius: 0.5rem;\n box-shadow: var(--shadow);\n width: 90%;\n max-width: 400px;\n}\n\n.form-group {\n margin-bottom: 1rem;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 0.5rem;\n}\n\n.form-group input {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid var(--border-color);\n border-radius: 0.25rem;\n}\n\n.button-group {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n margin-top: 1rem;\n}\n\n@media (max-width: 768px) {\n header {\n flex-direction: column;\n align-items: flex-start;\n gap: 1rem;\n }\n\n table, thead, tbody, th, td, tr {\n display: block;\n }\n\n thead tr {\n position: absolute;\n top: -9999px;\n left: -9999px;\n }\n\n tr {\n margin-bottom: 1rem;\n border: 1px solid var(--border-color);\n border-radius: 0.5rem;\n }\n\n td {\n border: none;\n position: relative;\n padding-left: 50%;\n }\n\n td:before {\n position: absolute;\n left: 1rem;\n width: 45%;\n padding-right: 10px;\n white-space: nowrap;\n content: attr(data-label);\n font-weight: bold;\n }\n}\n---script.js---\nlet entries = JSON.parse(localStorage.getItem('phoneEntries')) || [];\nconst tableBody = document.querySelector('#directoryTable tbody');\nconst entryDialog = document.getElementById('entryDialog');\nconst entryForm = document.getElementById('entryForm');\nconst addEntryBtn = document.getElementById('addEntry');\nconst cancelBtn = document.getElementById('cancelBtn');\nconst searchInput = document.getElementById('search');\n\nlet currentEditIndex = null;\n\nfunction renderTable() {\n tableBody.innerHTML = '';\n entries.forEach((entry, index) => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td data-label=\"Name\">${entry.name}</td>\n <td data-label=\"Office\">${entry.office}</td>\n <td data-label=\"Phone\">${entry.phone}</td>\n <td data-label=\"Last Updated\">${new Date(entry.lastUpdated).toLocaleString()}</td>\n <td data-label=\"Actions\">\n <button onclick=\"editEntry(${index})\" class=\"btn-primary\">Edit</button>\n <button onclick=\"deleteEntry(${index})\" class=\"btn-secondary\">Delete</button>\n </td>\n `;\n tableBody.appendChild(row);\n });\n}\n\nfunction addEntry(entry) {\n entry.lastUpdated = new Date();\n entries.push(entry);\n localStorage.setItem('phoneEntries', JSON.stringify(entries));\n renderTable();\n}\n\nfunction editEntry(index) {\n currentEditIndex = index;\n const entry = entries[index];\n document.getElementById('name').value = entry.name;\n document.getElementById('office').value = entry.office;\n document.getElementById('phone').value = entry.phone;\n entryDialog.showModal();\n}\n\nfunction updateEntry(index, updatedEntry) {\n updatedEntry.lastUpdated = new Date();\n entries[index] = updatedEntry;\n localStorage.setItem('phoneEntries', JSON.stringify(entries));\n renderTable();\n}\n\nfunction deleteEntry(index) {\n if (confirm('Are you sure you want to delete this entry?')) {\n entries.splice(index, 1);\n localStorage.setItem('phoneEntries', JSON.stringify(entries));\n renderTable();\n }\n}\n\n// Event Listeners\naddEntryBtn.addEventListener('click', () => {\n currentEditIndex = null;\n entryForm.reset();\n entryDialog.showModal();\n});\n\ncancelBtn.addEventListener('click', () => {\n entryDialog.close();\n});\n\nentryForm.addEventListener('submit', (e) => {\n e.preventDefault();\n const entry = {\n name: document.getElementById('name').value,\n office: document.getElementById('office').value,\n phone: document.getElementById('phone').value\n };\n\n if (currentEditIndex !== null) {\n updateEntry(currentEditIndex, entry);\n } else {\n addEntry(entry);\n }\n entryDialog.close();\n});\n\nsearchInput.addEventListener('input', () => {\n const searchTerm = searchInput.value.toLowerCase();\n const filteredEntries = entries.filter(entry => \n entry.name.toLowerCase().includes(searchTerm) ||\n entry.office.toLowerCase().includes(searchTerm)\n );\n entries = filteredEntries.length > 0 ? filteredEntries : JSON.parse(localStorage.getItem('phoneEntries')) || [];\n renderTable();\n});\n\n// Initial render\nrenderTable();\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 258, + "completion_tokens": 1918, + "total_tokens": 2176, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 258 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..40d8b45 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# phonelist.scroll.pub +Website generated by DeepSeek from prompt: Phone directory site, one and add delete modify entries. It has name, office phone and last update fields among others \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..7d03dca --- /dev/null +++ b/script.js @@ -0,0 +1,98 @@ +let entries = JSON.parse(localStorage.getItem('phoneEntries')) || []; +const tableBody = document.querySelector('#directoryTable tbody'); +const entryDialog = document.getElementById('entryDialog'); +const entryForm = document.getElementById('entryForm'); +const addEntryBtn = document.getElementById('addEntry'); +const cancelBtn = document.getElementById('cancelBtn'); +const searchInput = document.getElementById('search'); + +let currentEditIndex = null; + +function renderTable() { + tableBody.innerHTML = ''; + entries.forEach((entry, index) => { + const row = document.createElement('tr'); + row.innerHTML = ` + <td data-label="Name">${entry.name}</td> + <td data-label="Office">${entry.office}</td> + <td data-label="Phone">${entry.phone}</td> + <td data-label="Last Updated">${new Date(entry.lastUpdated).toLocaleString()}</td> + <td data-label="Actions"> + <button onclick="editEntry(${index})" class="btn-primary">Edit</button> + <button onclick="deleteEntry(${index})" class="btn-secondary">Delete</button> + </td> + `; + tableBody.appendChild(row); + }); +} + +function addEntry(entry) { + entry.lastUpdated = new Date(); + entries.push(entry); + localStorage.setItem('phoneEntries', JSON.stringify(entries)); + renderTable(); +} + +function editEntry(index) { + currentEditIndex = index; + const entry = entries[index]; + document.getElementById('name').value = entry.name; + document.getElementById('office').value = entry.office; + document.getElementById('phone').value = entry.phone; + entryDialog.showModal(); +} + +function updateEntry(index, updatedEntry) { + updatedEntry.lastUpdated = new Date(); + entries[index] = updatedEntry; + localStorage.setItem('phoneEntries', JSON.stringify(entries)); + renderTable(); +} + +function deleteEntry(index) { + if (confirm('Are you sure you want to delete this entry?')) { + entries.splice(index, 1); + localStorage.setItem('phoneEntries', JSON.stringify(entries)); + renderTable(); + } +} + +// Event Listeners +addEntryBtn.addEventListener('click', () => { + currentEditIndex = null; + entryForm.reset(); + entryDialog.showModal(); +}); + +cancelBtn.addEventListener('click', () => { + entryDialog.close(); +}); + +entryForm.addEventListener('submit', (e) => { + e.preventDefault(); + const entry = { + name: document.getElementById('name').value, + office: document.getElementById('office').value, + phone: document.getElementById('phone').value + }; + + if (currentEditIndex !== null) { + updateEntry(currentEditIndex, entry); + } else { + addEntry(entry); + } + entryDialog.close(); +}); + +searchInput.addEventListener('input', () => { + const searchTerm = searchInput.value.toLowerCase(); + const filteredEntries = entries.filter(entry => + entry.name.toLowerCase().includes(searchTerm) || + entry.office.toLowerCase().includes(searchTerm) + ); + entries = filteredEntries.length > 0 ? filteredEntries : JSON.parse(localStorage.getItem('phoneEntries')) || []; + renderTable(); +}); + +// Initial render +renderTable(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1816974 --- /dev/null +++ b/style.css @@ -0,0 +1,160 @@ +:root { + --primary-color: #2563eb; + --secondary-color: #64748b; + --background-color: #f8fafc; + --text-color: #1e293b; + --border-color: #e2e8f0; + --shadow: 0 1px 3px rgba(0,0,0,0.12); +} + +body { + font-family: system-ui, -apple-system, sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--background-color); + margin: 0; + padding: 20px; + max-width: 1200px; + margin: 0 auto; +} + +header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; +} + +h1 { + color: var(--primary-color); + margin: 0; +} + +.search-container { + margin-bottom: 1.5rem; +} + +#search { + width: 100%; + padding: 0.75rem; + border: 1px solid var(--border-color); + border-radius: 0.5rem; + box-shadow: var(--shadow); +} + +table { + width: 100%; + border-collapse: collapse; + background: white; + box-shadow: var(--shadow); + border-radius: 0.5rem; + overflow: hidden; +} + +th, td { + padding: 1rem; + text-align: left; +} + +th { + background-color: var(--primary-color); + color: white; + font-weight: 600; +} + +tr:nth-child(even) { + background-color: var(--background-color); +} + +.btn-primary, .btn-secondary { + padding: 0.5rem 1rem; + border: none; + border-radius: 0.25rem; + cursor: pointer; + transition: all 0.2s; +} + +.btn-primary { + background-color: var(--primary-color); + color: white; +} + +.btn-secondary { + background-color: var(--secondary-color); + color: white; +} + +.btn-primary:hover, .btn-secondary:hover { + opacity: 0.9; +} + +#entryDialog { + border: none; + border-radius: 0.5rem; + box-shadow: var(--shadow); + width: 90%; + max-width: 400px; +} + +.form-group { + margin-bottom: 1rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; +} + +.form-group input { + width: 100%; + padding: 0.5rem; + border: 1px solid var(--border-color); + border-radius: 0.25rem; +} + +.button-group { + display: flex; + gap: 0.5rem; + justify-content: flex-end; + margin-top: 1rem; +} + +@media (max-width: 768px) { + header { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + table, thead, tbody, th, td, tr { + display: block; + } + + thead tr { + position: absolute; + top: -9999px; + left: -9999px; + } + + tr { + margin-bottom: 1rem; + border: 1px solid var(--border-color); + border-radius: 0.5rem; + } + + td { + border: none; + position: relative; + padding-left: 50%; + } + + td:before { + position: absolute; + left: 1rem; + width: 45%; + padding-right: 10px; + white-space: nowrap; + content: attr(data-label); + font-weight: bold; + } +} \ No newline at end of file