index.html

[LVT-ENG]

<title>TRYONME × DIVINEO — Mirror Engine V10</title> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script> <style> body { margin: 0; background: #000; color: #D4AF37; font-family: serif; overflow: hidden; } #canvas-container { position: relative; width: 100vw; height: 100vh; background: #000; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } #pau-bot { position: fixed; bottom: 30px; left: 30px; width: 130px; z-index: 9999; } #pau-bot video { width: 100%; border-radius: 50%; border: 1px solid #D4AF37; box-shadow: 0 0 20px rgba(212, 175, 55, 0.4); } .legal { position: fixed; bottom: 10px; width: 100%; text-align: center; font-size: 10px; opacity: 0.6; letter-spacing: 1px; pointer-events: none; } .scan-line { position: absolute; width: 100%; height: 2px; background: rgba(212, 175, 55, 0.4); top: 0; z-index: 10; animation: scan 4s infinite linear; } @Keyframes scan { from { top: 0%; } to { top: 100%; } } </style>

<div id="pau-bot">
    <video autoplay loop muted playsinline><source src="pau_transparent.webm" type="video/webm"></video>
</div>

<div class="legal">
    SIRET: 94361019600017 | PATENTE: PCT/EP2025/067317 | © 2026 DIVINEO PARIS
</div>

<script>
    const videoElement = document.getElementById('input_video');
    const canvasElement = document.getElementById('output_canvas');
    const canvasCtx = canvasElement.getContext('2d');

    function onResults(results) {
        canvasCtx.save();
        canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
        canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
        
        if (results.poseLandmarks) {
            // Dibujamos el motor de medición (esqueleto dorado)
            drawConnectors(canvasCtx, results.poseLandmarks, POSE_CONNECTIONS, {color: '#D4AF37', lineWidth: 2});
            drawLandmarks(canvasCtx, results.poseLandmarks, {color: '#FFFFFF', lineWidth: 1, radius: 3});
        }
        canvasCtx.restore();
    }

    const pose = new Pose({locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`});
    pose.setOptions({ modelComplexity: 1, smoothLandmarks: true, minDetectionConfidence: 0.5 });
    pose.onResults(onResults);

    const camera = new Camera(videoElement, {
        onFrame: async () => { await pose.send({image: videoElement}); },
        width: 1280, height: 720
    });
    camera.start();

    function resize() {
        canvasElement.width = window.innerWidth;
        canvasElement.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();
</script>

[LVT-ENG]

<title>TRYONME × DIVINEO — Mirror Engine V10</title> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script> <style> body { margin: 0; background: #000; color: #D4AF37; font-family: serif; overflow: hidden; } #canvas-container { position: relative; width: 100vw; height: 100vh; background: #000; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } #pau-bot { position: fixed; bottom: 30px; left: 30px; width: 130px; z-index: 9999; } #pau-bot video { width: 100%; border-radius: 50%; border: 1px solid #D4AF37; box-shadow: 0 0 20px rgba(212, 175, 55, 0.4); } .legal { position: fixed; bottom: 10px; width: 100%; text-align: center; font-size: 10px; opacity: 0.6; letter-spacing: 1px; pointer-events: none; } .scan-line { position: absolute; width: 100%; height: 2px; background: rgba(212, 175, 55, 0.4); top: 0; z-index: 10; animation: scan 4s infinite linear; } @Keyframes scan { from { top: 0%; } to { top: 100%; } } </style>

<div id="pau-bot">
    <video autoplay loop muted playsinline><source src="pau_transparent.webm" type="video/webm"></video>
</div>

<div class="legal">
    SIRET: 94361019600017 | PATENTE: PCT/EP2025/067317 | © 2026 DIVINEO PARIS
</div>

<script>
    const videoElement = document.getElementById('input_video');
    const canvasElement = document.getElementById('output_canvas');
    const canvasCtx = canvasElement.getContext('2d');

    function onResults(results) {
        canvasCtx.save();
        canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
        canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
        
        if (results.poseLandmarks) {
            drawConnectors(canvasCtx, results.poseLandmarks, POSE_CONNECTIONS, {color: '#D4AF37', lineWidth: 2});
            drawLandmarks(canvasCtx, results.poseLandmarks, {color: '#FFFFFF', lineWidth: 1, radius: 3});
        }
        canvasCtx.restore();
    }

    const pose = new Pose({locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`});
    pose.setOptions({ modelComplexity: 1, smoothLandmarks: true, minDetectionConfidence: 0.5 });
    pose.onResults(onResults);

    const camera = new Camera(videoElement, {
        onFrame: async () => { await pose.send({image: videoElement}); },
        width: 1280, height: 720
    });
    camera.start();

    function resize() {
        canvasElement.width = window.innerWidth;
        canvasElement.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();
</script>