Changes to datamanage.scroll.pub

root
root
15 days ago
Initial commit
body.html
Changed around line 1
+
+

Personal Data Management

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
CodeNameLast NameDepartmentBirth DateActions
+
+
+
+
+
+

Personal Data Management System

+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://datamanage.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Personal Data Management System
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_019J83UA3XTfnHwyNDCrVYse",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a clean, modern website for managing personal data records.\n\n---domain---\ndatamanage.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://datamanage.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Personal Data Management System\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
\n

Personal Data Management

\n \n
\n\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
CodeNameLast NameDepartmentBirth DateActions
\n
\n
\n
\n\n
\n

Personal Data Management System

\n
\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --background-color: #f5f6fa;\n --text-color: #2c3e50;\n --border-radius: 8px;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nnav {\n margin-top: 1rem;\n}\n\nbutton {\n background: var(--secondary-color);\n color: white;\n border: none;\n padding: 0.8rem 1.5rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: transform 0.2s;\n margin: 0.5rem;\n}\n\nbutton:hover {\n transform: translateY(-2px);\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput {\n width: 100%;\n padding: 0.8rem;\n border: 1px solid #ddd;\n border-radius: var(--border-radius);\n font-size: 1rem;\n}\n\n.table-container {\n overflow-x: auto;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-top: 2rem;\n background: white;\n border-radius: var(--border-radius);\n overflow: hidden;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid #ddd;\n}\n\nth {\n background: var(--primary-color);\n color: white;\n}\n\ntr:hover {\n background: #f5f5f5;\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n header {\n padding: 1rem;\n }\n \n button {\n width: 100%;\n margin: 0.5rem 0;\n }\n \n th, td {\n padding: 0.5rem;\n }\n}\n\n---script.js---\n// Data Model Class\nclass DatosModel {\n constructor(codigo, nombre, apellido, departamento, fecha_nacimiento) {\n this.codigo = codigo;\n this.nombre = nombre;\n this.apellido = apellido;\n this.departamento = departamento;\n this.fecha_nacimiento = fecha_nacimiento;\n }\n}\n\n// DAO (Data Access Object) Class\nclass DatosDAO {\n constructor() {\n this.storage = window.localStorage;\n this.STORAGE_KEY = 'datos_personales';\n }\n\n getAll() {\n const data = this.storage.getItem(this.STORAGE_KEY);\n return data ? JSON.parse(data) : [];\n }\n\n save(datos) {\n const allData = this.getAll();\n datos.codigo = this.generateId(allData);\n allData.push(datos);\n this.storage.setItem(this.STORAGE_KEY, JSON.stringify(allData));\n return datos;\n }\n\n update(datos) {\n const allData = this.getAll();\n const index = allData.findIndex(item => item.codigo === datos.codigo);\n if (index !== -1) {\n allData[index] = datos;\n this.storage.setItem(this.STORAGE_KEY, JSON.stringify(allData));\n return true;\n }\n return false;\n }\n\n delete(codigo) {\n const allData = this.getAll();\n const filtered = allData.filter(item => item.codigo !== codigo);\n this.storage.setItem(this.STORAGE_KEY, JSON.stringify(filtered));\n }\n\n generateId(allData) {\n return allData.length > 0 ? Math.max(...allData.map(item => item.codigo)) + 1 : 1;\n }\n}\n\n// Service Class\nclass DatosService {\n constructor() {\n this.dao = new DatosDAO();\n }\n\n getAllDatos() {\n return this.dao.getAll();\n }\n\n saveDatos(datosModel) {\n return this.dao.save(datosModel);\n }\n\n updateDatos(datosModel) {\n return this.dao.update(datosModel);\n }\n\n deleteDatos(codigo) {\n this.dao.delete(codigo);\n }\n}\n\n// UI Controller\ndocument.addEventListener('DOMContentLoaded', () => {\n const service = new DatosService();\n const form = document.getElementById('dataForm');\n const addNewBtn = document.getElementById('addNew');\n const viewAllBtn = document.getElementById('viewAll');\n const formSection = document.getElementById('formSection');\n const tableSection = document.getElementById('tableSection');\n\n function refreshTable() {\n const tableBody = document.getElementById('dataTableBody');\n tableBody.innerHTML = '';\n \n service.getAllDatos().forEach(dato => {\n const row = document.createElement('tr');\n row.innerHTML = `\n ${dato.codigo}\n ${dato.nombre}\n ${dato.apellido}\n ${dato.departamento}\n ${dato.fecha_nacimiento}\n \n \n \n `;\n tableBody.appendChild(row);\n });\n }\n\n addNewBtn.addEventListener('click', () => {\n formSection.classList.remove('hidden');\n tableSection.classList.add('hidden');\n });\n\n viewAllBtn.addEventListener('click', () => {\n formSection.classList.add('hidden');\n tableSection.classList.remove('hidden');\n refreshTable();\n });\n\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n \n const datosModel = new DatosModel(\n null,\n form.nombre.value,\n form.apellido.value,\n form.departamento.value,\n form.fecha_nacimiento.value\n );\n\n service.saveDatos(datosModel);\n form.reset();\n formSection.classList.add('hidden');\n tableSection.classList.remove('hidden');\n refreshTable();\n });\n\n window.deleteDatos = (codigo) => {\n if (confirm('Are you sure you want to delete this record?')) {\n service.deleteDatos(codigo);\n refreshTable();\n }\n };\n\n // Initial load\n refreshTable();\n});\n\n---end---\n\nThis implementation creates a clean, modern, and responsive web application for managing personal data records. It includes:\n\n1. A Model class (DatosModel) representing the data structure\n2. A DAO class (DatosDAO) handling data persistence using localStorage\n3. A Service class (DatosService) providing business logic\n4. A responsive UI with add/view/delete functionality\n5. Modern CSS with variables, transitions, and responsive design\n6. Semantic HTML5 structure\n7. Accessibility features\n8. Clean JavaScript organization\n\nThe design is mobile-first and includes smooth animations, proper spacing, and a professional color scheme. The interface allows users to add new records, view all records in a table format, and delete existing records."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 379,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2593
+ }
+ }
readme.scroll
Changed around line 1
+ # datamanage.scroll.pub
+ Website generated by Claude from prompt: Crea las clases de model, service y dao en react en base a esta tabla en mysql: CREATE TABLE `tb_datos` ( `codigo` int(11) NOT NULL AUTO_INCREMENT, `nombre` varchar(45) DEFAULT NULL, `apellido` varchar(45) DEFAULT NULL, `departamento` varchar(45) DEFAULT NULL, `fecha_nacimiento` pon_el_tipo_de_dato_adecuado, PRIMARY KEY (`codigo`) )
script.js
Changed around line 1
+ // Data Model Class
+ class DatosModel {
+ constructor(codigo, nombre, apellido, departamento, fecha_nacimiento) {
+ this.codigo = codigo;
+ this.nombre = nombre;
+ this.apellido = apellido;
+ this.departamento = departamento;
+ this.fecha_nacimiento = fecha_nacimiento;
+ }
+ }
+
+ // DAO (Data Access Object) Class
+ class DatosDAO {
+ constructor() {
+ this.storage = window.localStorage;
+ this.STORAGE_KEY = 'datos_personales';
+ }
+
+ getAll() {
+ const data = this.storage.getItem(this.STORAGE_KEY);
+ return data ? JSON.parse(data) : [];
+ }
+
+ save(datos) {
+ const allData = this.getAll();
+ datos.codigo = this.generateId(allData);
+ allData.push(datos);
+ this.storage.setItem(this.STORAGE_KEY, JSON.stringify(allData));
+ return datos;
+ }
+
+ update(datos) {
+ const allData = this.getAll();
+ const index = allData.findIndex(item => item.codigo === datos.codigo);
+ if (index !== -1) {
+ allData[index] = datos;
+ this.storage.setItem(this.STORAGE_KEY, JSON.stringify(allData));
+ return true;
+ }
+ return false;
+ }
+
+ delete(codigo) {
+ const allData = this.getAll();
+ const filtered = allData.filter(item => item.codigo !== codigo);
+ this.storage.setItem(this.STORAGE_KEY, JSON.stringify(filtered));
+ }
+
+ generateId(allData) {
+ return allData.length > 0 ? Math.max(...allData.map(item => item.codigo)) + 1 : 1;
+ }
+ }
+
+ // Service Class
+ class DatosService {
+ constructor() {
+ this.dao = new DatosDAO();
+ }
+
+ getAllDatos() {
+ return this.dao.getAll();
+ }
+
+ saveDatos(datosModel) {
+ return this.dao.save(datosModel);
+ }
+
+ updateDatos(datosModel) {
+ return this.dao.update(datosModel);
+ }
+
+ deleteDatos(codigo) {
+ this.dao.delete(codigo);
+ }
+ }
+
+ // UI Controller
+ document.addEventListener('DOMContentLoaded', () => {
+ const service = new DatosService();
+ const form = document.getElementById('dataForm');
+ const addNewBtn = document.getElementById('addNew');
+ const viewAllBtn = document.getElementById('viewAll');
+ const formSection = document.getElementById('formSection');
+ const tableSection = document.getElementById('tableSection');
+
+ function refreshTable() {
+ const tableBody = document.getElementById('dataTableBody');
+ tableBody.innerHTML = '';
+
+ service.getAllDatos().forEach(dato => {
+ const row = document.createElement('tr');
+ row.innerHTML = `
+ ${dato.codigo}
+ ${dato.nombre}
+ ${dato.apellido}
+ ${dato.departamento}
+ ${dato.fecha_nacimiento}
+
+
+
+ `;
+ tableBody.appendChild(row);
+ });
+ }
+
+ addNewBtn.addEventListener('click', () => {
+ formSection.classList.remove('hidden');
+ tableSection.classList.add('hidden');
+ });
+
+ viewAllBtn.addEventListener('click', () => {
+ formSection.classList.add('hidden');
+ tableSection.classList.remove('hidden');
+ refreshTable();
+ });
+
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ const datosModel = new DatosModel(
+ null,
+ form.nombre.value,
+ form.apellido.value,
+ form.departamento.value,
+ form.fecha_nacimiento.value
+ );
+
+ service.saveDatos(datosModel);
+ form.reset();
+ formSection.classList.add('hidden');
+ tableSection.classList.remove('hidden');
+ refreshTable();
+ });
+
+ window.deleteDatos = (codigo) => {
+ if (confirm('Are you sure you want to delete this record?')) {
+ service.deleteDatos(codigo);
+ refreshTable();
+ }
+ };
+
+ // Initial load
+ refreshTable();
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #2c3e50;
+ --secondary-color: #3498db;
+ --background-color: #f5f6fa;
+ --text-color: #2c3e50;
+ --border-radius: 8px;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ }
+
+ header {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ nav {
+ margin-top: 1rem;
+ }
+
+ button {
+ background: var(--secondary-color);
+ color: white;
+ border: none;
+ padding: 0.8rem 1.5rem;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ transition: transform 0.2s;
+ margin: 0.5rem;
+ }
+
+ button:hover {
+ transform: translateY(-2px);
+ }
+
+ main {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ }
+
+ .form-group {
+ margin-bottom: 1.5rem;
+ }
+
+ label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+ }
+
+ input {
+ width: 100%;
+ padding: 0.8rem;
+ border: 1px solid #ddd;
+ border-radius: var(--border-radius);
+ font-size: 1rem;
+ }
+
+ .table-container {
+ overflow-x: auto;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 2rem;
+ background: white;
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ box-shadow: 0 0 20px rgba(0,0,0,0.1);
+ }
+
+ th, td {
+ padding: 1rem;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+
+ th {
+ background: var(--primary-color);
+ color: white;
+ }
+
+ tr:hover {
+ background: #f5f5f5;
+ }
+
+ .hidden {
+ display: none;
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: white;
+ margin-top: 2rem;
+ }
+
+ @media (max-width: 768px) {
+ header {
+ padding: 1rem;
+ }
+
+ button {
+ width: 100%;
+ margin: 0.5rem 0;
+ }
+
+ th, td {
+ padding: 0.5rem;
+ }
+ }