LABIMATHS

Repositorio de Modelos 3D para Educación en Matemáticas

---

🎯 PROJECT OVERVIEW

LABIMATHS is a web-based catalog system for educational 3D models, combining a static frontend with secure PHP backend for admin operations. Developed for educational purposes, featuring curated 3D models with browser-based preview and print request capabilities.

Key Features:

• 📚 Curated 3D model catalog with filtering
• 🔍 Real-time search and advanced filters
• 🎨 Interactive 3D viewer (Three.js)
• 📄 Professional print request system with PDF generation
• ⚙️ Admin panel for content management
• 📱 Fully responsive design

---

🚀 QUICK START

Prerequisites

• PHP 7.4+ (required for admin panel)
• Web server with PHP support (Apache/Nginx with PHP-FPM)
• Modern browser (Chrome, Firefox, Edge)
• For development: XAMPP, MAMP, or similar PHP local server

Installation

# Clone repository
git clone https://github.com/your-org/labimaths.git

# For production: Upload to PHP-enabled web server
# For development: Use XAMPP/MAMP or PHP built-in server
cd labim3d
php -S localhost:8000

# Important: Configure .gitignore to exclude api/auth-config.php
echo "api/auth-config.php" >> .gitignore

Access Points

• Homepage: index.html
• Catalog: catalog.html
• Admin Panel: admin/index.html
  • Password: labim3d2025 (configured in /api/auth-config.php)
  • Session duration: 8 hours
• Print Request: solicitar-impresion.html
• API Endpoints: /api/* (require authentication)

---

📂 PROJECT STRUCTURE

labim3d/
├── index.html              # Homepage
├── catalog.html            # Model catalog
├── model.html              # Model detail + 3D viewer
├── solicitar-impresion.html # Print request form
├── css/                    # Modular stylesheets
├── js/                     # JavaScript modules
├── data/
│   ├── index.json          # Master model list
│   └── models/*.json       # Individual model files
├── models/                 # STL files
├── images/                 # Thumbnails + gallery
└── admin/                  # Admin panel

---

🛠️ CORE SYSTEMS

Catalog System

• Real-time search
• Multi-filter (category, type, origin)
• Grid/List view toggle
• Sort options

3D Viewer

• Three.js r84 with STLLoader
• Multi-STL file support
• OrbitControls with damping
• Auto-centering and scaling

Admin Panel

• PHP session authentication (Session 2+)
• New model creation with file upload
• Edit existing models
• Delete models
• Multi-STL management
• Auto-fill and validation
• localStorage draft backup

Print Request

• Minimal required fields
• PDF generation (jsPDF)
• Logos from server
• mailto integration

---

📊 CURRENT STATUS

Session 2 Complete (2025-01-04)

• ✅ Homepage with featured models
• ✅ Advanced catalog with filters
• ✅ Model detail pages with gallery
• ✅ 3D viewer with multi-STL support
• ✅ Admin panel with edit mode
• ✅ Print request form with PDF
• 🔄 Database growth (6 models → target 20+)
• 🔄 Final documentation

Progress: 75% (7/8 sessions)

---

📋 KEY FILES

Data Files

• data/index.json - Master model list
• data/models/{id}.json - Individual model data

JavaScript Modules

• js/catalog.js - Catalog logic
• js/model-viewer.js - 3D viewer + detail page
• js/solicitar-impresion.js - Print form + PDF
• js/admin.js - Admin panel logic

CSS Modules

• css/base.css - Global styles + variables
• css/catalog.css - Catalog-specific
• css/model.css - Model detail pages
• css/solicitar-impresion.css - Print form

PHP Backend (Session 2+)

• api/auth-config.php - Authentication config (sensitive)
• api/login.php - Login endpoint
• api/logout.php - Logout endpoint
• api/check-auth.php - Session verification
• api/upload-model.php - Upload/edit models
• api/delete-model.php - Delete models
• api/config.php - Global config & helpers

---

🔧 USAGE

Adding New Model

1. Access admin/index.html
2. Fill form with model details
3. Add STL files (path auto-validated)
4. Generate JSON → Downloads 2 files
5. Upload files to server:
   • {id}.json → data/models/
   • index.json → data/ (replace)
   • STL files → models/
   • Images → images/models/{id}/

Requesting Print

1. Navigate to model detail page
2. Click "Solicitar Impresión"
3. Fill minimal fields (name, email, model, quantity)
4. Generate PDF (auto-downloads)
5. Send email with PDF attached

---

📚 DOCUMENTATION

• ARCHITECTURE.md - System architecture and design decisions
• SESSION-{N}-SUMMARY.md - Detailed session logs
• README.md - This file

---

🐛 KNOWN ISSUES

• Browser JS caching requires hard refresh (Ctrl+Shift+R)
• Large STL files (>10MB) may take 2-3 seconds to load
• Email requires manual PDF attachment

---

🎨 TECHNOLOGY STACK

Frontend:

• HTML5 + CSS3 (Custom properties)
• Vanilla JavaScript (ES6+)
• Three.js r84 (3D rendering)
• jsPDF (PDF generation)

Backend (Session 2+):

• PHP 7.4+ (authentication, file management)
• Session-based authentication
• bcrypt password hashing

Data:

• JSON files for model catalog
• PHP for secure admin operations

Development:

• PHP 7.4+ (XAMPP, MAMP, or built-in server)
• VS Code
• Git version control

---

👥 TEAM

Developer: Fernanda López
Organization: TecMedHub - Universidad Austral de Chile
Location: Puerto Montt, Chile
Contact: fernanda.lopez@uach.cl

---

📄 LICENSE

Educational use - Universidad Austral de Chile

---

🗺️ ROADMAP

• Session 1: Core functionality
• Session 2: Print request system
• Session 3: Database growth + final polish
• Future: User feedback system, analytics

---

Last Updated: 2025-01-15
Version: 0.25 (Session 2)
Status: Active Development