<!DOCTYPE html>

<head>

<

meta charset="UTF-8">

meta name="viewport" content="width=device-width, initial-scale=1.0">

title>Mi Quiniela en Vivo</title>

script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>

style>

:root {

-

-primary: #1a73e8;

-success: #0f9d58;

-danger: #db4437;

-warning: #f4b400;

-bg: #f8f9fa;

-card: #ffffff;

}

*

{ box-sizing: border-box; margin: 0; padding: 0; }

body {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

background: var(--bg);

color: #202124;

line-height: 1.5;

padding: 12px;

max-width: 900px;

margin: 0 auto;

}

h1 { font-size: 1.5rem; margin-bottom: 8px; }

h2 { font-size: 1.15rem; margin: 20px 0 10px; }

.card {

background: var(--card);

border-radius: 12px;

padding: 16px;

margin-bottom: 16px;

box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}

.btn {

display: inline-block;

background: var(--primary);

color: white;

border: none;

padding: 10px 18px;

border-radius: 8px;

font-size: 0.95rem;

cursor: pointer;

margin: 4px 4px 4px 0;

}

.btn:hover { opacity: 0.9; }

.btn-danger { background: var(--danger); }

.btn-secondary { background: #5f6368; }

table {

width: 100%;

border-collapse: collapse;

font-size: 0.9rem;

}

th, td {

padding: 8px 6px;

text-align: left;

border-bottom: 1px solid #eee;

}

th { background: #f1f3f4; font-weight: 600; }

.acierto { color: var(--success); font-weight: bold; }

.fallo { color: var(--danger); font-weight: bold; }

.en-juego { color: var(--warning); font-weight: bold; }

.pendiente { color: #5f6368; }

.resumen {

display: flex;

flex-wrap: wrap;

gap: 12px;

margin: 12px 0;

}

.resumen-item {

background: #e8f0fe;

padding: 10px 14px;

border-radius: 8px;

font-weight: 500;

}

#preview { max-width: 100%; max-height: 200px; margin: 10px 0; border-radius: 8px; }

.signo-input {

width: 40px;

text-align: center;

font-size: 1rem;

padding: 4px;

border: 1px solid #dadce0;

border-radius: 4px;

}

.oculto { display: none; }

footer { text-align: center; margin-top: 30px; color: #5f6368; font-size: 0.85rem; }

/style>

<

/head>

body>

<h1>

Mi Quiniela en Vivo</h1>

<p>Sube la foto de tu boleto o introduce los signos manualmente. Todo se guarda

automáticamente.</p>

<

!-- Subida de foto -->

div class="card">

<

h2>1. Sube tu boleto</h2>

input type="file" id="fotoInput" accept="image/*" capture="environment">

div id="previewContainer" class="oculto">

<p id="ocrStatus">Procesando foto...</p>

<

/div>

button class="btn" onclick="procesarFoto()">Leer foto con OCR</button>

button class="btn btn-secondary" onclick="mostrarManual()">Introducir

manualmente</button>

</div>

<

h2>2. Tus pronósticos</h2>

p>Corrige si es necesario (1, X, 2, 1X, X2, 12...)</p>

div id="tablaSignos"></div>

button class="btn" onclick="guardarBoleto()">Guardar boleto</button>

button class="btn btn-danger" onclick="borrarBoleto()">Borrar boleto</button>

</div>

<

!-- Resumen -->

div class="card">