Spaces:

Davidal07
/

test

Running

App Files Files Community

Davidal07 commited on Jul 15, 2025

Commit

7d80450

verified ·

1 Parent(s): 76c90f2

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +519 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Test
-emoji: 🏆
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: test
+emoji: 🐳
+colorFrom: gray
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,519 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sistema de Gestión de Números de Parte</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .fade-in {
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .feature-item:hover .delete-feature {
+            opacity: 1;
+        }
+        .delete-feature {
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <div class="max-w-4xl mx-auto">
+            <!-- Header -->
+            <div class="bg-blue-600 text-white rounded-lg shadow-md p-6 mb-8">
+                <h1 class="text-3xl font-bold">Sistema de Gestión de Números de Parte</h1>
+                <p class="mt-2">Registro y administración de números de parte para la empresa</p>
+            </div>
+            <!-- Main Form -->
+            <div class="bg-white rounded-lg shadow-md p-6 mb-8">
+                <h2 class="text-2xl font-semibold text-gray-800 mb-6">Nuevo Número de Parte</h2>
+                <form id="partForm" class="space-y-6">
+                    <!-- Basic Information -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label for="partNumber" class="block text-sm font-medium text-gray-700 mb-1">Número de Parte*</label>
+                            <input type="text" id="partNumber" name="partNumber" required
+                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <div>
+                            <label for="partType" class="block text-sm font-medium text-gray-700 mb-1">Tipo de Parte*</label>
+                            <select id="partType" name="partType" required
+                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                                <option value="">Seleccione un tipo</option>
+                                <option value="MGG">MGG</option>
+                                <option value="Iniciador">Iniciador</option>
+                                <option value="Naked">Naked</option>
+                            </select>
+                        </div>
+                    </div>
+                    <!-- Description -->
+                    <div>
+                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Descripción</label>
+                        <textarea id="description" name="description" rows="3"
+                                  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"></textarea>
+                    </div>
+                    <!-- Dynamic Features Section -->
+                    <div id="featuresSection" class="hidden fade-in">
+                        <h3 class="text-lg font-medium text-gray-800 mb-4">Características</h3>
+                        <div id="defaultFeatures" class="space-y-4 mb-6"></div>
+                        <!-- Add Custom Feature -->
+                        <div class="flex items-center space-x-4">
+                            <input type="text" id="newFeatureName" placeholder="Nombre de característica"
+                                   class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                            <input type="text" id="newFeatureValue" placeholder="Valor"
+                                   class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                            <button type="button" id="addFeatureBtn"
+                                    class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition">
+                                <i class="fas fa-plus mr-2"></i>Agregar
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Form Actions -->
+                    <div class="flex justify-end space-x-4 pt-6 border-t border-gray-200">
+                        <button type="reset"
+                                class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition">
+                            <i class="fas fa-times mr-2"></i>Cancelar
+                        </button>
+                        <button type="submit"
+                                class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
+                            <i class="fas fa-save mr-2"></i>Guardar
+                        </button>
+                    </div>
+                </form>
+            </div>
+            <!-- Parts List -->
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-2xl font-semibold text-gray-800 mb-6">Números de Parte Registrados</h2>
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Número</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descripción</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
+                            </tr>
+                        </thead>
+                        <tbody id="partsList" class="bg-white divide-y divide-gray-200">
+                            <!-- Parts will be loaded here -->
+                            <tr>
+                                <td colspan="4" class="px-6 py-4 text-center text-gray-500">No hay números de parte registrados</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Part Details Modal -->
+    <div id="partDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+        <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 id="modalTitle" class="text-xl font-semibold text-gray-800">Detalles del Número de Parte</h3>
+                    <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div id="modalContent" class="space-y-4">
+                    <!-- Content will be loaded here -->
+                </div>
+                <div class="flex justify-end space-x-4 pt-6 mt-6 border-t border-gray-200">
+                    <button id="editPartBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
+                        <i class="fas fa-edit mr-2"></i>Editar
+                    </button>
+                    <button id="deletePartBtn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition">
+                        <i class="fas fa-trash mr-2"></i>Eliminar
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Default features for each part type
+        const defaultFeatures = {
+            'MGG': [
+                { name: 'Material', value: '', required: true },
+                { name: 'Espesor', value: '', required: true },
+                { name: 'Color', value: '', required: true },
+                { name: 'Acabado', value: '', required: false }
+            ],
+            'Iniciador': [
+                { name: 'Potencia', value: '', required: true },
+                { name: 'Voltaje', value: '', required: true },
+                { name: 'Temperatura', value: '', required: false }
+            ],
+            'Naked': [
+                { name: 'Diámetro', value: '', required: true },
+                { name: 'Longitud', value: '', required: true },
+                { name: 'Peso', value: '', required: false }
+            ]
+        };
+        // Sample data storage (in a real scenario, this would be a database)
+        let partsDatabase = [];
+        // DOM Elements
+        const partForm = document.getElementById('partForm');
+        const partTypeSelect = document.getElementById('partType');
+        const featuresSection = document.getElementById('featuresSection');
+        const defaultFeaturesContainer = document.getElementById('defaultFeatures');
+        const newFeatureName = document.getElementById('newFeatureName');
+        const newFeatureValue = document.getElementById('newFeatureValue');
+        const addFeatureBtn = document.getElementById('addFeatureBtn');
+        const partsList = document.getElementById('partsList');
+        const partDetailsModal = document.getElementById('partDetailsModal');
+        const closeModalBtn = document.getElementById('closeModalBtn');
+        const modalContent = document.getElementById('modalContent');
+        const editPartBtn = document.getElementById('editPartBtn');
+        const deletePartBtn = document.getElementById('deletePartBtn');
+        // Event Listeners
+        partTypeSelect.addEventListener('change', updateFeatures);
+        addFeatureBtn.addEventListener('click', addCustomFeature);
+        partForm.addEventListener('submit', savePart);
+        closeModalBtn.addEventListener('click', () => partDetailsModal.classList.add('hidden'));
+        editPartBtn.addEventListener('click', editPart);
+        deletePartBtn.addEventListener('click', deletePart);
+        // Initialize the app
+        function init() {
+            // Load parts from localStorage (simulating database)
+            const savedParts = localStorage.getItem('partsDatabase');
+            if (savedParts) {
+                partsDatabase = JSON.parse(savedParts);
+                updatePartsList();
+            }
+        }
+        // Update features based on selected part type
+        function updateFeatures() {
+            const selectedType = partTypeSelect.value;
+            if (!selectedType) {
+                featuresSection.classList.add('hidden');
+                return;
+            }
+            // Clear previous features
+            defaultFeaturesContainer.innerHTML = '';
+            // Add default features for selected type
+            defaultFeatures[selectedType].forEach(feature => {
+                const featureItem = document.createElement('div');
+                featureItem.className = 'feature-item bg-gray-50 p-4 rounded-md relative';
+                featureItem.innerHTML = `
+                    <div class="flex items-center space-x-4">
+                        <div class="flex-1">
+                            <label class="block text-sm font-medium text-gray-700 mb-1">${feature.name}${feature.required ? '*' : ''}</label>
+                            <input type="text" name="feature_${feature.name}" value="${feature.value}"
+                                   ${feature.required ? 'required' : ''}
+                                   class="w-full px-3 py-1 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        ${!feature.required ? `
+                        <button type="button" class="delete-feature px-3 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition"
+                                onclick="this.closest('.feature-item').remove()">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                        ` : ''}
+                    </div>
+                `;
+                defaultFeaturesContainer.appendChild(featureItem);
+            });
+            // Show features section
+            featuresSection.classList.remove('hidden');
+        }
+        // Add custom feature
+        function addCustomFeature() {
+            const name = newFeatureName.value.trim();
+            const value = newFeatureValue.value.trim();
+            if (!name) {
+                alert('Por favor ingrese un nombre para la característica');
+                return;
+            }
+            const featureItem = document.createElement('div');
+            featureItem.className = 'feature-item bg-gray-50 p-4 rounded-md relative fade-in';
+            featureItem.innerHTML = `
+                <div class="flex items-center space-x-4">
+                    <div class="flex-1">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">${name}</label>
+                        <input type="text" name="feature_${name}" value="${value}"
+                               class="w-full px-3 py-1 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                    <button type="button" class="delete-feature px-3 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition"
+                            onclick="this.closest('.feature-item').remove()">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            `;
+            defaultFeaturesContainer.appendChild(featureItem);
+            // Clear inputs
+            newFeatureName.value = '';
+            newFeatureValue.value = '';
+        }
+        // Save part to database
+        function savePart(e) {
+            e.preventDefault();
+            const formData = new FormData(partForm);
+            const partNumber = formData.get('partNumber');
+            const partType = formData.get('partType');
+            const description = formData.get('description');
+            // Collect features
+            const features = [];
+            const featureItems = defaultFeaturesContainer.querySelectorAll('.feature-item');
+            featureItems.forEach(item => {
+                const label = item.querySelector('label').textContent.replace('*', '');
+                const input = item.querySelector('input');
+                const value = input.value.trim();
+                if (value) {
+                    features.push({
+                        name: label,
+                        value: value,
+                        required: input.required
+                    });
+                } else if (input.required) {
+                    alert(`Por favor complete el campo requerido: ${label}`);
+                    input.focus();
+                    throw new Error('Required field missing');
+                }
+            });
+            // Create part object
+            const part = {
+                id: Date.now().toString(),
+                partNumber,
+                partType,
+                description,
+                features,
+                createdAt: new Date().toISOString(),
+                createdBy: 'Usuario Actual' // In a real app, this would be the logged in user
+            };
+            // Add to database
+            partsDatabase.push(part);
+            localStorage.setItem('partsDatabase', JSON.stringify(partsDatabase));
+            // Update UI
+            updatePartsList();
+            partForm.reset();
+            featuresSection.classList.add('hidden');
+            // Show success message
+            alert('Número de parte guardado exitosamente!');
+        }
+        // Update parts list in UI
+        function updatePartsList() {
+            if (partsDatabase.length === 0) {
+                partsList.innerHTML = `
+                    <tr>
+                        <td colspan="4" class="px-6 py-4 text-center text-gray-500">No hay números de parte registrados</td>
+                    </tr>
+                `;
+                return;
+            }
+            partsList.innerHTML = '';
+            partsDatabase.forEach(part => {
+                const row = document.createElement('tr');
+                row.className = 'hover:bg-gray-50';
+                row.innerHTML = `
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${part.partNumber}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
+                                    ${part.partType === 'MGG' ? 'bg-blue-100 text-blue-800' :
+                                      part.partType === 'Iniciador' ? 'bg-green-100 text-green-800' :
+                                      'bg-purple-100 text-purple-800'}">
+                            ${part.partType}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4 text-sm text-gray-500">${part.description || 'Sin descripción'}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <button onclick="showPartDetails('${part.id}')" class="text-blue-600 hover:text-blue-900 mr-4">
+                            <i class="fas fa-eye"></i> Ver
+                        </button>
+                        <button onclick="editPartFromList('${part.id}')" class="text-yellow-600 hover:text-yellow-900">
+                            <i class="fas fa-edit"></i> Editar
+                        </button>
+                    </td>
+                `;
+                partsList.appendChild(row);
+            });
+        }
+        // Show part details in modal
+        function showPartDetails(partId) {
+            const part = partsDatabase.find(p => p.id === partId);
+            if (!part) return;
+            document.getElementById('modalTitle').textContent = `Detalles: ${part.partNumber}`;
+            let content = `
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                    <div>
+                        <h4 class="text-sm font-medium text-gray-500">Número de Parte</h4>
+                        <p class="mt-1 text-sm text-gray-900">${part.partNumber}</p>
+                    </div>
+                    <div>
+                        <h4 class="text-sm font-medium text-gray-500">Tipo</h4>
+                        <p class="mt-1 text-sm text-gray-900">${part.partType}</p>
+                    </div>
+                    <div>
+                        <h4 class="text-sm font-medium text-gray-500">Fecha de Creación</h4>
+                        <p class="mt-1 text-sm text-gray-900">${new Date(part.createdAt).toLocaleString()}</p>
+                    </div>
+                    <div>
+                        <h4 class="text-sm font-medium text-gray-500">Creado por</h4>
+                        <p class="mt-1 text-sm text-gray-900">${part.createdBy}</p>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <h4 class="text-sm font-medium text-gray-500">Descripción</h4>
+                    <p class="mt-1 text-sm text-gray-900">${part.description || 'Sin descripción'}</p>
+                </div>
+                <div>
+                    <h4 class="text-sm font-medium text-gray-500 mb-2">Características</h4>
+                    <div class="bg-gray-50 rounded-md p-4">
+            `;
+            if (part.features.length === 0) {
+                content += `<p class="text-sm text-gray-500">No hay características definidas</p>`;
+            } else {
+                content += `<div class="grid grid-cols-1 md:grid-cols-2 gap-4">`;
+                part.features.forEach(feat => {
+                    content += `
+                        <div>
+                            <h5 class="text-xs font-medium text-gray-500">${feat.name}</h5>
+                            <p class="text-sm text-gray-900">${feat.value}</p>
+                        </div>
+                    `;
+                });
+                content += `</div>`;
+            }
+            content += `</div></div>`;
+            modalContent.innerHTML = content;
+            editPartBtn.setAttribute('data-part-id', partId);
+            deletePartBtn.setAttribute('data-part-id', partId);
+            partDetailsModal.classList.remove('hidden');
+        }
+        // Edit part from list
+        function editPartFromList(partId) {
+            const part = partsDatabase.find(p => p.id === partId);
+            if (!part) return;
+            // Fill form with part data
+            document.getElementById('partNumber').value = part.partNumber;
+            document.getElementById('partType').value = part.partType;
+            document.getElementById('description').value = part.description || '';
+            // Trigger change event to load features
+            const event = new Event('change');
+            partTypeSelect.dispatchEvent(event);
+            // Wait for features to load
+            setTimeout(() => {
+                // Clear existing features
+                defaultFeaturesContainer.innerHTML = '';
+                // Add part features
+                part.features.forEach(feature => {
+                    const isDefault = defaultFeatures[part.partType].some(f => f.name === feature.name);
+                    const featureItem = document.createElement('div');
+                    featureItem.className = 'feature-item bg-gray-50 p-4 rounded-md relative fade-in';
+                    featureItem.innerHTML = `
+                        <div class="flex items-center space-x-4">
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-700 mb-1">${feature.name}${feature.required ? '*' : ''}</label>
+                                <input type="text" name="feature_${feature.name}" value="${feature.value}"
+                                       ${feature.required ? 'required' : ''}
+                                       class="w-full px-3 py-1 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                            </div>
+                            ${!feature.required ? `
+                            <button type="button" class="delete-feature px-3 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition"
+                                    onclick="this.closest('.feature-item').remove()">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                            ` : ''}
+                        </div>
+                    `;
+                    defaultFeaturesContainer.appendChild(featureItem);
+                });
+                // Show features section
+                featuresSection.classList.remove('hidden');
+                // Scroll to form
+                document.querySelector('form').scrollIntoView({ behavior: 'smooth' });
+            }, 100);
+        }
+        // Edit part (from modal)
+        function editPart() {
+            const partId = this.getAttribute('data-part-id');
+            partDetailsModal.classList.add('hidden');
+            editPartFromList(partId);
+        }
+        // Delete part
+        function deletePart() {
+            if (!confirm('¿Está seguro que desea eliminar este número de parte?')) return;
+            const partId = this.getAttribute('data-part-id');
+            partsDatabase = partsDatabase.filter(p => p.id !== partId);
+            localStorage.setItem('partsDatabase', JSON.stringify(partsDatabase));
+            partDetailsModal.classList.add('hidden');
+            updatePartsList();
+        }
+        // Initialize the app
+        init();
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Davidal07/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>