Optimize mobile experience: Auto-detect viewport and redirect to interactive mobile 3D gallery and visualizer

frontend/app.js

@@ -3932,3 +3932,64 @@ function updateSelectedBoneMarker() {
     }
 }
 
+// Check mobile viewport and show interactive redirect dialog
+function checkMobileRedirect() {
+    if (window.innerWidth < 768) {
+        const overlay = document.createElement('div');
+        overlay.style.position = 'fixed';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.width = '100vw';
+        overlay.style.height = '100vh';
+        overlay.style.backgroundColor = 'rgba(10, 10, 12, 0.96)';
+        overlay.style.zIndex = '999999';
+        overlay.style.display = 'flex';
+        overlay.style.alignItems = 'center';
+        overlay.style.justifyContent = 'center';
+        overlay.style.padding = '24px';
+        overlay.style.boxSizing = 'border-box';
+        overlay.style.backdropFilter = 'blur(10px)';
+        overlay.style.webkitBackdropFilter = 'blur(10px)';
+        
+        overlay.innerHTML = `
+            <div style="background: #18181c; border: 1px solid #7c3aed; border-radius: 16px; padding: 24px; text-align: center; max-width: 400px; width: 100%; box-shadow: 0 20px 45px rgba(0,0,0,0.5); font-family: sans-serif;">
+                <div style="font-size: 3.5rem; margin-bottom: 16px; animation: bounce 2s infinite;">📱</div>
+                <h3 style="color: #ffffff; margin-top: 0; font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.5px;">¿Estás en un Celular?</h3>
+                <p style="color: #a1a1aa; font-size: 0.9rem; line-height: 1.5; margin-bottom: 24px;">
+                    La creación, edición y limpieza de mallas está diseñada para pantallas de PC/Laptops. En celulares, te recomendamos usar el visor 3D táctil optimizado y proyectar en Realidad Aumentada (AR).
+                </p>
+                <div style="display: flex; flex-direction: column; gap: 12px; width: 100%;">
+                    <a href="/viewer.html" style="background: #7c3aed; color: #ffffff; padding: 14px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 0.95rem; display: block; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);">
+                        Abrir Visor Móvil (AR)
+                    </a>
+                    <button id="btnStayOnPCWeb" style="background: transparent; border: 1px solid rgba(255,255,255,0.15); color: #a1a1aa; padding: 12px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s;">
+                        Seguir en Web de PC (No recomendado)
+                    </button>
+                </div>
+            </div>
+            <style>
+                @keyframes bounce {
+                    0%, 100% { transform: translateY(0); }
+                    50% { transform: translateY(-10px); }
+                }
+                #btnStayOnPCWeb:hover {
+                    background: rgba(255,255,255,0.05);
+                    color: #ffffff;
+                }
+            </style>
+        `;
+        document.body.appendChild(overlay);
+        
+        overlay.querySelector('#btnStayOnPCWeb').addEventListener('click', () => {
+            document.body.removeChild(overlay);
+        });
+    }
+}
+
+// Execute check on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', checkMobileRedirect);
+} else {
+    checkMobileRedirect();
+}
+

frontend/viewer.html

@@ -32,6 +32,8 @@
             left: 0;
             right: 0;
             z-index: 10;
+            height: 48px;
+            box-sizing: border-box;
         }
 
         .logo {
@@ -52,6 +54,14 @@
             text-decoration: none;
         }
 
+        /* Container for viewer */
+        #viewer-container {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            display: none;
+        }
+
         model-viewer {
             width: 100%;
             height: 100%;
@@ -62,23 +72,20 @@
         #ar-button {
             background-color: #7c3aed;
             color: white;
-            border-radius: 4px;
+            border-radius: 8px;
             border: none;
             position: absolute;
             bottom: 24px;
             right: 24px;
-            padding: 12px 18px;
+            padding: 14px 20px;
             font-size: 0.95rem;
             font-weight: 600;
             cursor: pointer;
-            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
             display: flex;
             align-items: center;
             gap: 8px;
-        }
-
-        #ar-button:active {
-            background-color: #6d28d9;
+            z-index: 99;
         }
 
         #ar-prompt {
@@ -125,50 +132,198 @@
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+
+        /* Gallery Selector Page */
+        #gallery-container {
+            flex: 1;
+            padding: 70px 20px 20px 20px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            box-sizing: border-box;
+        }
+
+        .gallery-title {
+            font-size: 1.35rem;
+            font-weight: 700;
+            margin-bottom: 4px;
+            background: linear-gradient(135deg, #ffffff, #a1a1aa);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .gallery-desc {
+            font-size: 0.85rem;
+            color: #a1a1aa;
+            margin-bottom: 16px;
+            line-height: 1.4;
+        }
+
+        .gallery-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 16px;
+        }
+
+        .model-card {
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            transition: border-color 0.2s;
+        }
+
+        .model-card:active {
+            border-color: #7c3aed;
+            background: rgba(124, 58, 237, 0.05);
+        }
+
+        .model-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .model-icon {
+            background: rgba(124, 58, 237, 0.1);
+            color: #c084fc;
+            width: 44px;
+            height: 44px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.3rem;
+        }
+
+        .model-name {
+            font-weight: 600;
+            font-size: 0.9rem;
+            color: #ffffff;
+            margin-bottom: 4px;
+        }
+
+        .model-date {
+            font-size: 0.75rem;
+            color: #a1a1aa;
+        }
+
+        .btn-view {
+            background: #7c3aed;
+            color: #ffffff;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-size: 0.85rem;
+            font-weight: 600;
+            cursor: pointer;
+        }
+
+        .btn-back {
+            position: absolute;
+            top: 12px;
+            left: 16px;
+            background: rgba(255, 255, 255, 0.08);
+            border: none;
+            color: #ffffff;
+            padding: 6px 12px;
+            border-radius: 6px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            z-index: 99;
+            cursor: pointer;
+            display: none;
+        }
     </style>
 </head>
 <body>
-    <header>
+    <header id="app-header">
         <span class="logo">23DFactory Mobile</span>
         <a href="/" class="btn-close">Ir al inicio</a>
     </header>
 
-    <div id="loading-overlay">
-        <div class="spinner"></div>
-        <div style="font-size: 0.9rem; color: #a1a1aa;">Cargando modelo 3D...</div>
+    <button id="btnBackToGallery" class="btn-back">⬅ Volver</button>
+
+    <!-- 1. Gallery selector (shown if no model query param) -->
+    <div id="gallery-container">
+        <div>
+            <h2 class="gallery-title">Tu Biblioteca 3D</h2>
+            <p class="gallery-desc">Selecciona uno de tus modelos para visualizar en 3D interactivo y proyectar en tu habitación usando AR.</p>
+        </div>
+        <div class="gallery-grid" id="gallery-grid">
+            <div style="text-align: center; padding: 40px; color: #a1a1aa; font-size: 0.9rem;">
+                <div class="spinner" style="margin: 0 auto 16px auto;"></div>
+                Cargando tu galería...
+            </div>
+        </div>
     </div>
 
-    <model-viewer 
-        id="viewer"
-        src="" 
-        ar 
-        ar-modes="webxr scene-viewer quick-look" 
-        camera-controls 
-        touch-action="pan-y"
-        shadow-intensity="1" 
-        auto-rotate 
-        interaction-prompt="auto">
-        
-        <button slot="ar-button" id="ar-button">
-            ⚡ Ver en Realidad Aumentada (AR)
-        </button>
-        
-        <div id="ar-prompt">
-            Mueve tu celular para detectar el suelo
+    <!-- 2. Interactive model viewer (shown when active) -->
+    <div id="viewer-container">
+        <div id="loading-overlay">
+            <div class="spinner"></div>
+            <div id="loading-text" style="font-size: 0.9rem; color: #a1a1aa;">Cargando archivo 3D...</div>
         </div>
-    </model-viewer>
+
+        <model-viewer 
+            id="viewer"
+            src="" 
+            ar 
+            ar-modes="webxr scene-viewer quick-look" 
+            camera-controls 
+            touch-action="pan-y"
+            shadow-intensity="1" 
+            auto-rotate 
+            interaction-prompt="auto">
+            
+            <button slot="ar-button" id="ar-button">
+                ⚡ Proyectar en AR (Cámara)
+            </button>
+            
+            <div id="ar-prompt">
+                Mueve tu celular para detectar el suelo
+            </div>
+        </model-viewer>
+    </div>
 
     <script>
-        // Get model path from URL query parameter
         const urlParams = new URLSearchParams(window.location.search);
         const modelUrl = urlParams.get('model');
+        
+        const galleryContainer = document.getElementById('gallery-container');
+        const viewerContainer = document.getElementById('viewer-container');
         const viewer = document.getElementById('viewer');
         const overlay = document.getElementById('loading-overlay');
+        const loadingText = document.getElementById('loading-text');
+        const btnBack = document.getElementById('btnBackToGallery');
+        const appHeader = document.getElementById('app-header');
+        const galleryGrid = document.getElementById('gallery-grid');
 
-        if (modelUrl) {
-            viewer.src = modelUrl;
-        } else {
-            overlay.innerHTML = '<div style="color: #ef4444; text-align: center; padding: 24px;">No se especificó ningún modelo 3D.</div>';
+        // Back button to list models
+        btnBack.addEventListener('click', () => {
+            viewerContainer.style.display = 'none';
+            btnBack.style.display = 'none';
+            appHeader.style.display = 'flex';
+            galleryContainer.style.display = 'flex';
+            viewer.src = '';
+        });
+
+        // Load 3D model in viewer
+        function loadModelInViewer(url) {
+            galleryContainer.style.display = 'none';
+            appHeader.style.display = 'none';
+            viewerContainer.style.display = 'block';
+            btnBack.style.display = 'block';
+            
+            overlay.style.display = 'flex';
+            overlay.style.opacity = 1;
+            loadingText.textContent = "Cargando archivo 3D...";
+            viewer.src = url;
         }
 
         viewer.addEventListener('load', () => {
@@ -178,8 +333,67 @@
 
         viewer.addEventListener('error', (e) => {
             console.error('Error loading model:', e);
-            overlay.innerHTML = '<div style="color: #ef4444; text-align: center; padding: 24px;">Error al cargar el archivo 3D.</div>';
+            loadingText.innerHTML = '<span style="color: #ef4444;">Error al cargar el archivo 3D. Asegúrate de que el formato sea correcto.</span>';
         });
+
+        // Fetch user gallery from server
+        async function fetchGallery() {
+            try {
+                const response = await fetch('/api/gallery');
+                if (!response.ok) throw new Error('Failed to fetch gallery');
+                const data = await response.json();
+                
+                // Filter only 3D models (GLB files)
+                const models = data.filter(item => item.type === '3d');
+                
+                if (models.length === 0) {
+                    galleryGrid.innerHTML = `
+                        <div style="text-align: center; padding: 40px; color: #a1a1aa; border: 1px dashed rgba(255,255,255,0.08); border-radius: 12px;">
+                            <div style="font-size: 2.5rem; margin-bottom: 12px;">📦</div>
+                            <div style="font-size: 0.9rem; font-weight: 600; color: #ffffff; margin-bottom: 4px;">No tienes modelos guardados</div>
+                            <div style="font-size: 0.8rem; color: #a1a1aa;">Crea un modelo 3D desde tu PC para verlo aquí.</div>
+                        </div>
+                    `;
+                    return;
+                }
+                
+                galleryGrid.innerHTML = '';
+                models.forEach(model => {
+                    const date = new Date(model.timestamp * 1000).toLocaleString('es-ES', {
+                        day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
+                    });
+                    
+                    const card = document.createElement('div');
+                    card.className = 'model-card';
+                    card.innerHTML = `
+                        <div class="model-info">
+                            <div class="model-icon">📦</div>
+                            <div>
+                                <div class="model-name">${model.filename.split('/').pop()}</div>
+                                <div class="model-date">${date}</div>
+                            </div>
+                        </div>
+                        <button class="btn-view">Ver 3D</button>
+                    `;
+                    
+                    card.querySelector('.btn-view').addEventListener('click', () => {
+                        loadModelInViewer(model.downloadUrl);
+                    });
+                    
+                    galleryGrid.appendChild(card);
+                });
+            } catch (err) {
+                console.error(err);
+                galleryGrid.innerHTML = `<div style="color: #ef4444; text-align: center; padding: 24px;">Error al conectar con la galería del servidor. Por favor, inicia sesión.</div>`;
+            }
+        }
+
+        // Routing Logic
+        if (modelUrl) {
+            loadModelInViewer(modelUrl);
+        } else {
+            fetchGallery();
+        }
     </script>
 </body>
 </html>