Changes to phonelist.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Phone Directory
+   
+ 
+ 
+ 
+   
+     
+   
+ 
+   +     
+       
+         
+         
+         
+         
+         
+       
+     
+     
+       
+     
+   
NameOfficePhoneLast UpdatedActions
+ 
+ 
+ 
+   
+     Add/Edit Entry
+     
+       Name:
+       
+     
+     
+       Office:
+       
+     
+     
+       Phone:
+       
+     
+     
+       
+       
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://phonelist.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Phone Directory
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  Phone Directory\n  \n\n\n\n  \n    \n  
\n\n  \n    \n      \n        \n        \n        \n        \n        \n      \n    \n    \n      \n    \n  NameOfficePhoneLast UpdatedActions
\n\n\n\n  \n    Add/Edit Entry\n    \n      Name:\n      \n    
\n    \n      Office:\n      \n    
\n    \n      Phone:\n      \n    
\n    \n      \n      \n    
\n  \n\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      ${entry.name}\n      ${entry.office}\n      ${entry.phone}\n      ${new Date(entry.lastUpdated).toLocaleString()}\n      \n        \n        \n      \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"
+ }

readme.scroll

Changed around line 1

+ # 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

script.js

Changed around line 1
+ 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 = `
+       ${entry.name}
+       ${entry.office}
+       ${entry.phone}
+       ${new Date(entry.lastUpdated).toLocaleString()}
+       
+         
+         
+       
+     `;
+     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();

style.css

Changed around line 1
+ :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;
+   }
+ }