marcogll/ap_pos
1
0
Fork 0
mirror of https://github.com/marcogll/ap_pos.git synced 2026-01-13 13:15:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Replace product cards with search bar interface

Browse Source 
- Replace category cards with modern search bar for services/products
- Implement real-time search with debouncing (200ms delay)
- Add autocomplete functionality for better UX
- Maintain anticipo functionality with dedicated form
- Add visual feedback notifications instead of alerts
- Improve responsive design and accessibility

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Marco Gallegos
2025-09-16 12:07:31 -06:00
parent 5cb8dcdd9e
commit 9282bd5480
3 changed files with 416 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
index.html
View File

@@ -115,63 +115,44 @@
</div>
</div>
<!-- Categorías de Productos -->
<div class="categories-container">
<h3>Selecciona tus servicios</h3>
<!-- Vanity Lashes -->
<div class="category-section" data-category="Vanity Lashes">
<div class="category-header">
<span class="category-icon">👁️</span>
<h4>Vanity Lashes</h4>
<button class="category-toggle">▶</button>
<!-- Barra de Búsqueda de Servicios -->
<div class="services-search-container">
<h3>Buscar servicios y productos</h3>
<!-- Barra de búsqueda principal -->
<div class="search-bar-container">
<div class="search-input-wrapper">
<input type="text" id="service-search-input" placeholder="Buscar servicios, productos o escribir 'anticipo'..." autocomplete="off" />
<span class="search-icon">🔍</span>
</div>
<div class="products-grid" id="pestanas-products">
<!-- Los productos se cargarán dinámicamente aquí -->
<!-- Resultados de búsqueda -->
<div id="search-results" class="search-results" style="display: none;">
<!-- Los resultados aparecerán aquí -->
</div>
</div>
<!-- PMU Services -->
<div class="category-section" data-category="PMU Services">
<div class="category-header">
<span class="category-icon">✏️</span>
<h4>PMU Services</h4>
<button class="category-toggle">▶</button>
</div>
<div class="products-grid" id="microblading-products">
<!-- Los productos se cargarán dinámicamente aquí -->
</div>
</div>
<!-- Uñas -->
<div class="category-section" data-category="Uñas">
<div class="category-header">
<span class="category-icon">💅</span>
<h4>Nail Art</h4>
<button class="category-toggle">▶</button>
</div>
<div class="products-grid" id="unas-products">
<!-- Los productos se cargarán dinámicamente aquí -->
</div>
</div>
<!-- Anticipos -->
<div class="category-section" data-category="Anticipos">
<div class="category-header">
<span class="category-icon">💰</span>
<h4>Anticipos</h4>
<button class="category-toggle">▶</button>
</div>
<div class="anticipos-grid" id="anticipos-products">
<!-- Sección de Anticipos -->
<div id="anticipo-section" class="anticipo-section" style="display: none;">
<div class="anticipo-form-card">
<div class="anticipo-header">
<span class="category-icon">💰</span>
<h4>Agregar Anticipo</h4>
</div>
<div class="anticipo-form">
<div class="anticipo-input-group">
<input type="number" id="anticipo-amount" min="1" placeholder="Cantidad" />
<input type="text" id="anticipo-comment" placeholder="Comentario (opcional)" />
<button class="btn-add-anticipo" onclick="addAnticipo()">Agregar</button>
<button class="btn-add-anticipo" onclick="addAnticipo()">Agregar Anticipo</button>
</div>
</div>
</div>
</div>
<!-- Mensaje de ayuda -->
<div class="search-help">
<p>💡 Escribe el nombre del servicio o producto, o escribe "anticipo" para agregar un anticipo</p>
</div>
</div>
</div>