<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Mis XV Años - Monica Sofia</title>

<style>
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, #111, #000);
    font-family: Arial, sans-serif;
    overflow: hidden;
}

/* HEADER */
.header {
    position: absolute;
    top: 14px;
    width: 100%;
    text-align: center;
    color: #e6e6e6;
    z-index: 20;
    font-weight: bold;
    letter-spacing: 1px;
}
.header small {
    display: block;
    font-size: 13px;
    color: #bfbfbf;
}

/* CAMARA */
.camera-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* VIDEO */
#video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

/* MARCO (SIEMPRE FIJO) */
#marco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

/* CONTROLES */
.controls {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom) + 24px);
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: 30;
}

/* BOTONES */
.controls button {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #aaa;
    background: linear-gradient(145deg, #f2f2f2, #9e9e9e);
    font-size: 26px;
    color: #000;
    box-shadow:
        inset 0 2px 6px rgba(255,255,255,.7),
        0 8px 20px rgba(0,0,0,.6);
}

.controls .shoot {
    width: 84px;
    height: 84px;
    font-size: 30px;
    border: 3px solid #fff;
}

/* OPCIONES */
.options {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom) + 115px);
    width: 100%;
    text-align: center;
    color: #ddd;
    font-size: 14px;
    z-index: 30;
}
.options input {
    transform: scale(1.2);
}
</style>
</head>

<body>

<div class="header">
    MIS XV AÑOS
    <small>Monica Sofia del Aguila Noguera</small>
</div>

<div class="camera-wrapper">
    <video id="video" autoplay playsinline></video>
    <img src="assets/marco.png" id="marco">
</div>

<div class="options">
    <label>
        <input type="checkbox" id="toggleMarco" checked>
        Usar marco de XV años
    </label>
</div>

<div class="controls">
    <button onclick="switchCamera()">🔄</button>
    <button onclick="zoomOut()">➖</button>
    <button class="shoot" onclick="takePhoto()">📸</button>
    <button onclick="zoomIn()">➕</button>
</div>

<canvas id="canvas" style="display:none;"></canvas>

<form id="form" method="POST" action="guardar.php">
    <input type="hidden" name="foto" id="foto">
</form>

<script>
let video = document.getElementById('video');
let marco = document.getElementById('marco');
let stream = null;
let facing = 'user';
let zoom = 1;

/* INICIAR CAMARA */
async function startCamera() {
    if (stream) stream.getTracks().forEach(t => t.stop());

    stream = await navigator.mediaDevices.getUserMedia({
        video: {
            facingMode: facing,
            width: { ideal: 1920 },
            height: { ideal: 1080 }
        }
    });

    video.srcObject = stream;

    // 🔥 SOLO EL VIDEO SE ESPEJA EN FRONTAL
    updateZoom();

    // 🔒 MARCO SIEMPRE NORMAL
    marco.style.transform = 'none';
}

/* CAMBIAR CAMARA */
function switchCamera() {
    facing = facing === 'user' ? 'environment' : 'user';
    startCamera();
}

/* ZOOM */
function zoomIn() {
    zoom = Math.min(2, zoom + 0.1);
    updateZoom();
}
function zoomOut() {
    zoom = Math.max(1, zoom - 0.1);
    updateZoom();
}
function updateZoom() {
    video.style.transform =
        facing === 'user'
        ? `scale(${zoom}) scaleX(-1)`
        : `scale(${zoom})`;
}

/* MARCO ON / OFF */
document.getElementById('toggleMarco').addEventListener('change', e => {
    marco.style.display = e.target.checked ? 'block' : 'none';
});

/* TOMAR FOTO */
function takePhoto() {
    const canvas = document.getElementById('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');

    // 🎨 FILTRO TIPO INSTAGRAM SUAVE
    ctx.filter = "brightness(1.05) contrast(1.15) saturate(1.1)";
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    ctx.filter = "none";

    if (marco.style.display !== 'none') {
        const img = new Image();
        img.src = 'assets/marco.png';
        img.onload = () => {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            send(canvas);
        };
    } else {
        send(canvas);
    }
}

/* 🧨 SOLUCIÓN ERROR 413 */
function send(canvas) {
    document.getElementById('foto').value =
        canvas.toDataURL('image/jpeg', 0.85);
    document.getElementById('form').submit();
}

startCamera();
</script>

</body>
</html>
