mejoras de UI/UX
This commit is contained in:
@@ -1,12 +1,43 @@
|
||||
<template>
|
||||
<div class="uuid-selector-container">
|
||||
<div class="selector-card">
|
||||
<div
|
||||
v-if="showInstallBanner"
|
||||
class="install-banner"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
<div class="install-banner-content">
|
||||
<img class="install-icon" src="/pwa_icons/icon-72x72.png" alt="SnatchGame" />
|
||||
<div class="install-text">
|
||||
<strong>Instalá SnatchGame</strong>
|
||||
<span v-if="canPromptInstall">Acceso desde tu pantalla de inicio.</span>
|
||||
<span v-else>iOS: Compartir → Añadir a inicio.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="install-actions">
|
||||
<button v-if="canPromptInstall" class="btn-install" @click="triggerInstall">Instalar</button>
|
||||
<button class="btn-dismiss" @click="dismissBanner" aria-label="Cerrar">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<h1 class="title">
|
||||
<GameLogo size="large" /> Snatch Game
|
||||
</h1>
|
||||
<p class="subtitle">Selecciona tu UUID para continuar</p>
|
||||
</div>
|
||||
<!-- Acciones rápidas (arriba, estilo más sutil) -->
|
||||
<div class="quick-actions top">
|
||||
<button @click="selectRandom" class="qa-btn">
|
||||
Seleccionar Aleatorio
|
||||
</button>
|
||||
<button @click="goToDashboard" class="qa-btn">
|
||||
Panel de Adminstración
|
||||
</button>
|
||||
<button @click="goToLeaderboard" class="qa-btn">
|
||||
Estadísticas
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="search-container">
|
||||
<input
|
||||
@@ -57,22 +88,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quick-actions">
|
||||
<button @click="selectRandom" class="btn-random">
|
||||
🎲 Seleccionar Aleatorio
|
||||
</button>
|
||||
<button @click="goToDashboard" class="btn-dashboard">
|
||||
🎛️ Dashboard Admin
|
||||
</button>
|
||||
<button @click="goToLeaderboard" class="btn-leaderboard">
|
||||
📈 Leaderboard
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- QR Mode Toggle -->
|
||||
<div class="qr-mode-container">
|
||||
<label class="qr-mode-label">
|
||||
<input type="checkbox" v-model="qrMode" class="qr-mode-checkbox" />
|
||||
<span class="qr-toggle" aria-hidden="true"></span>
|
||||
<span class="qr-mode-text">
|
||||
{{ qrMode ? '📱 Modo QR activo - Click para ver código' : '🔓 Activar modo QR para acceso rápido' }}
|
||||
</span>
|
||||
@@ -130,7 +150,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import GameLogo from '../components/GameLogo.vue';
|
||||
import QRCode from 'qrcode';
|
||||
@@ -162,6 +182,29 @@ function isStandalone(): boolean {
|
||||
);
|
||||
}
|
||||
|
||||
// Install banner state and logic
|
||||
const showInstallBanner = ref(false);
|
||||
const canPromptInstall = ref(false);
|
||||
let deferredPrompt: any = null;
|
||||
let onBipHandler: ((e: any) => void) | null = null;
|
||||
let installTimer: any = null;
|
||||
const isIOS = () => /iphone|ipad|ipod/i.test(navigator.userAgent);
|
||||
function maybeShowInstallBanner() {
|
||||
const dismissed = localStorage.getItem('sg_install_banner_dismissed') === '1';
|
||||
if (dismissed || isStandalone()) return;
|
||||
if (deferredPrompt) {
|
||||
canPromptInstall.value = true;
|
||||
showInstallBanner.value = true;
|
||||
if (installTimer) clearTimeout(installTimer);
|
||||
installTimer = setTimeout(() => { showInstallBanner.value = false; }, 10000);
|
||||
} else if (isIOS()) {
|
||||
canPromptInstall.value = false;
|
||||
showInstallBanner.value = true;
|
||||
if (installTimer) clearTimeout(installTimer);
|
||||
installTimer = setTimeout(() => { showInstallBanner.value = false; }, 12000);
|
||||
}
|
||||
}
|
||||
|
||||
// Context menu state
|
||||
const contextMenu = ref({
|
||||
visible: false,
|
||||
@@ -181,6 +224,13 @@ const printModal = ref({
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// Install prompt listener (Android/Chrome)
|
||||
onBipHandler = (e: any) => {
|
||||
e.preventDefault();
|
||||
deferredPrompt = e;
|
||||
maybeShowInstallBanner();
|
||||
};
|
||||
window.addEventListener('beforeinstallprompt', onBipHandler);
|
||||
console.log('Loading UUIDs with names...');
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL || 'http://localhost:3000/api'}/admin/uuids-with-names`);
|
||||
|
||||
@@ -207,8 +257,31 @@ onMounted(async () => {
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
// Show banner if applicable (iOS or after BIP fires)
|
||||
maybeShowInstallBanner();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (onBipHandler) window.removeEventListener('beforeinstallprompt', onBipHandler);
|
||||
if (installTimer) clearTimeout(installTimer);
|
||||
});
|
||||
|
||||
async function triggerInstall() {
|
||||
try {
|
||||
if (!deferredPrompt) return;
|
||||
deferredPrompt.prompt();
|
||||
await deferredPrompt.userChoice;
|
||||
deferredPrompt = null;
|
||||
showInstallBanner.value = false;
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function dismissBanner() {
|
||||
showInstallBanner.value = false;
|
||||
localStorage.setItem('sg_install_banner_dismissed', '1');
|
||||
if (installTimer) clearTimeout(installTimer);
|
||||
}
|
||||
|
||||
function filterUuids() {
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
if (!query) {
|
||||
@@ -714,6 +787,26 @@ async function copyToClipboard() {
|
||||
animation: slideUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.install-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
background: #f7f9ff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.install-banner-content { display: flex; align-items: center; gap: 10px; }
|
||||
.install-icon { width: 24px; height: 24px; border-radius: 6px; }
|
||||
.install-text { display:flex; flex-direction: column; line-height: 1.1; }
|
||||
.install-text strong { font-size: 14px; color: #334155; }
|
||||
.install-text span { font-size: 12px; color: #64748b; }
|
||||
.install-actions { display:flex; align-items:center; gap: 6px; }
|
||||
.btn-install { background:#111; color:#fff; padding: 6px 10px; border-radius: 6px; font-size: 12px; }
|
||||
.btn-dismiss { background: transparent; color:#64748b; padding: 4px 6px; font-size: 14px; }
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -755,6 +848,46 @@ async function copyToClipboard() {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.quick-actions.top {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 8px 0 14px 0;
|
||||
}
|
||||
|
||||
.qa-btn {
|
||||
appearance: none;
|
||||
background: linear-gradient(135deg, rgba(102,126,234,0.28) 0%, rgba(118,75,162,0.28) 100%);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255,255,255,0.55);
|
||||
color: #243147;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
box-shadow: 0 6px 18px rgba(102,126,234,0.12);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.qa-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 22px rgba(118,75,162,0.16);
|
||||
}
|
||||
|
||||
.qa-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.qa-btn:focus-visible {
|
||||
outline: 2px solid rgba(102,126,234,0.6);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 15px 50px 15px 20px;
|
||||
@@ -780,65 +913,14 @@ async function copyToClipboard() {
|
||||
}
|
||||
|
||||
/* QR Mode Toggle Styles */
|
||||
.qr-mode-container {
|
||||
margin: 20px 0 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qr-mode-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
padding: 15px 25px;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 30px;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
user-select: none;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.qr-mode-label:hover {
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
border-color: rgba(102, 126, 234, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.qr-mode-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid #667eea;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qr-mode-checkbox:checked {
|
||||
background: #667eea;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.qr-mode-checkbox:checked::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 2px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.qr-mode-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.qr-mode-container { margin: 16px 0 0 0; display: flex; justify-content: center; }
|
||||
.qr-mode-label { display:flex; align-items:center; gap: 10px; cursor: pointer; user-select:none; }
|
||||
.qr-mode-checkbox { position:absolute; opacity:0; width:0; height:0; }
|
||||
.qr-toggle { width: 48px; height: 26px; background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.6); border-radius: 999px; position: relative; transition: background 0.25s ease, border-color 0.25s ease; box-shadow: inset 0 2px 6px rgba(0,0,0,0.08); }
|
||||
.qr-toggle::after { content: ''; width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 3px 8px rgba(0,0,0,0.18); }
|
||||
.qr-mode-checkbox:checked + .qr-toggle { background: linear-gradient(135deg, rgba(102,126,234,0.6) 0%, rgba(118,75,162,0.6) 100%); border-color: rgba(255,255,255,0.7); }
|
||||
.qr-mode-checkbox:checked + .qr-toggle::after { transform: translateX(22px); }
|
||||
.qr-mode-text { font-size: 14px; font-weight: 600; color: #374151; }
|
||||
|
||||
.uuids-grid {
|
||||
display: grid;
|
||||
@@ -1307,32 +1389,15 @@ async function copyToClipboard() {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.qr-mode-container {
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
|
||||
.qr-mode-label {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.qr-mode-text {
|
||||
font-size: 13px;
|
||||
}
|
||||
.qr-mode-container { margin: 12px 0 0 0; }
|
||||
.qr-mode-text { font-size: 13px; }
|
||||
|
||||
.uuids-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-random,
|
||||
.btn-dashboard,
|
||||
.btn-leaderboard {
|
||||
width: 100%;
|
||||
}
|
||||
.quick-actions.top { justify-content: center; gap: 8px; }
|
||||
.quick-actions.top .qa-btn { min-width: 120px; padding: 8px 10px; font-size: 13px; }
|
||||
.print-modal-content {
|
||||
width: 95%;
|
||||
padding: 20px;
|
||||
|
||||
Reference in New Issue
Block a user