Contact form

<h3>Contact SYSING CONSULTING</h3>
<p>Gracias por tu interés en SYSING CONSULTING. Por favor, bríndanos alguna información para que podamos contactarnos o escríbanos directamente al <a href="https://api.whatsapp.com/send?phone=51926130853" target="_blank">+51926130853.</a>. Esperamos con interés poder ayudarte pronto.</p>

name

email

message

Embed

<div id="game-container" style="margin: 20px auto; max-width: 100%; width: 100%; border: 1px solid #ddd; border-radius: 5px; padding: 10px; background-color: #fff;">
    <iframe id="block-puzzle-iframe" srcdoc='<!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Block Puzzle</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column; /* Cambiamos la dirección del flex a columna */
                align-items: center;
                min-height: 100vh;
                background-color: #2e2e2e;
                font-family: "Segoe UI", sans-serif;
            }

            .container {
                display: flex;
                flex-direction: column; /* Cambiamos la dirección del flex a columna */
                align-items: center; /* Centramos los elementos horizontalmente */
                gap: 20px; /* Añadimos espacio entre el tablero y las piezas */
                max-width: 100%;
                width: 100%;
            }

            .game {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
            }

            h1 {
                margin-bottom: 20px;
                color: white;
            }

            .grid {
                display: grid;
                grid-template-columns: repeat(10, 30px);
                grid-template-rows: repeat(10, 30px);
                gap: 2px;
                background-color: #1c1c1c;
                padding: 10px;
                border-radius: 10px;
                position: relative;
                width: fit-content;
                margin-bottom: 20px; /* Añadimos margen inferior para separar del las piezas */
            }

            .cell {
                width: 30px;
                height: 30px;
                background-color: #444;
                border-radius: 4px;
                position: relative;
            }

            .cell.filled {
                background-color: #00cfff;
            }

            .pieces {
                display: flex;
                flex-direction: row; /* Cambiamos la dirección del flex a fila para mostrar las piezas horizontalmente */
                gap: 20px;
                align-items: flex-start; /* Alineamos las piezas en la parte superior */
                margin-top: 0; /* Eliminamos el margen superior innecesario */
                width: fit-content; /* Ajustamos el ancho al contenido de las piezas */
            }

            .piece {
                display: grid;
                grid-auto-flow: row;
                grid-template-columns: repeat(4, 30px);
                gap: 2px;
                cursor: grab;
                opacity: 1;
                transition: opacity 0.2s;
                position: relative;
            }

            .piece-cell {
                width: 30px;
                height: 30px;
                background-color: #00cfff;
                border-radius: 4px;
            }

            .score {
                margin-top: 20px;
                font-size: 18px;
                font-weight: bold;
                color: white;
            }

            .piece.dragging {
                opacity: 0.5;
                z-index: 10;
            }

            @media (max-width: 600px) {
                .pieces {
                    flex-direction: column; /* Volvemos a mostrar las piezas en columna en pantallas pequeñas */
                    align-items: center; /* Centramos las piezas horizontalmente en pantallas pequeñas */
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="game">
                <h1>Block Puzzle</h1>
                <div class="grid" id="grid"></div>
                <div class="score" id="score">Puntaje: 0</div>
            </div>
            <div class="pieces" id="pieces"></div>
        </div>
    
        <script>
            const gridSize = 10;
            const gridElement = document.getElementById("grid");
            const piecesContainer = document.getElementById("pieces");
            const scoreDisplay = document.getElementById("score");
            let score = 0;
            let draggingPiece = null;
            let pieceOffsetX, pieceOffsetY;
    
            const createGrid = () => {
                for (let i = 0; i < gridSize * gridSize; i++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");
                    cell.dataset.index = i;
                    gridElement.appendChild(cell);
                }
            };
    
            const getCell = (x, y) => {
                if (x < 0 || x >= gridSize || y < 0 || y >= gridSize) {
                    return null;
                }
                return gridElement.children[y * gridSize + x];
            };
    
            const pieceShapes = [
                [[1, 0], [1, 1], [1, 2]],
                [[1, 1], [2, 1], [3, 1]],
                [[0, 0], [1, 0], [1, 1]],
                [[0, 0], [0, 1], [1, 1]],
                [[0, 0], [1, 0], [2, 0], [3, 0]],
                [[0, 0], [0, 1], [0, 2], [0, 3]],
                [[0, 0], [1, 0], [0, 1]],
            ];
    
            const generatePiece = () => {
                const shape = pieceShapes[Math.floor(Math.random() * pieceShapes.length)];
                const piece = document.createElement("div");
                piece.classList.add("piece");
                shape.forEach(([x, y]) => {
                    const cell = document.createElement("div");
                    cell.classList.add("piece-cell");
                    cell.style.gridColumn = x + 1;
                    cell.style.gridRow = y + 1;
                    piece.appendChild(cell);
                });
                piece.dataset.shape = JSON.stringify(shape);
                piece.setAttribute("draggable", true);
                piece.addEventListener("dragstart", dragStart);
                piece.addEventListener("dragend", dragEnd);
                piece.addEventListener("mousedown", dragMouseDown);
                return piece;
            };
    
            const updatePieces = () => {
                piecesContainer.innerHTML = "";
                for (let i = 0; i < 3; i++) {
                    piecesContainer.appendChild(generatePiece());
                }
            };
    
            const dragStart = (e) => {
                draggingPiece = e.target;
                draggingPiece.classList.add("dragging");
                e.dataTransfer.setData("text/plain", e.target.dataset.shape);
            };
    
            const dragEnd = (e) => {
                e.preventDefault();
                if (draggingPiece) {
                    draggingPiece.classList.remove("dragging");
                    draggingPiece = null;
                }
            };
    
            const allowDrop = (e) => {
                e.preventDefault();
            };
    
            const drop = (e) => {
                e.preventDefault();
                if (!draggingPiece) return;
    
                const rect = gridElement.getBoundingClientRect();
                const offsetX = e.clientX - rect.left - pieceOffsetX;
                const offsetY = e.clientY - rect.top - pieceOffsetY;
    
                const cellSize = 32;
                const cellX = Math.floor(offsetX / cellSize);
                const cellY = Math.floor(offsetY / cellSize);
    
                const shape = JSON.parse(e.dataTransfer.getData("text/plain"));
    
                if (canPlace(shape, cellX, cellY)) {
                    placePiece(shape, cellX, cellY);
                    checkLines();
                    updateScore(1);
                    updatePieces();
                } else {
                    draggingPiece.style.transform = "";
                }
                draggingPiece = null;
            };
    
            const canPlace = (shape, x, y) => {
                return shape.every(([dx, dy]) => {
                    const nx = x + dx;
                    const ny = y + dy;
                    const cell = getCell(nx, ny);
                    return cell && !cell.classList.contains("filled");
                });
            };
    
            const placePiece = (shape, x, y) => {
                shape.forEach(([dx, dy]) => {
                    const nx = x + dx;
                    const ny = y + dy;
                    const cell = getCell(nx, ny);
                    if (cell) {
                        cell.classList.add("filled");
                    }
                });
            };
    
            const checkLines = () => {
                let linesRemoved = 0;
                for (let y = 0; y < gridSize; y++) {
                    if ([...Array(gridSize).keys()].every((x) => getCell(x, y).classList.contains("filled"))) {
                        linesRemoved++;
                        [...Array(gridSize).keys()].forEach((x) => getCell(x, y).classList.remove("filled"));
                    }
                }
    
                for (let x = 0; x < gridSize; x++) {
                    if ([...Array(gridSize).keys()].every((y) => getCell(x, y).classList.contains("filled"))) {
                        linesRemoved++;
                        [...Array(gridSize).keys()].forEach((y) => getCell(x, y).classList.remove("filled"));
                    }
                }
                if (linesRemoved > 0) {
                    updateScore(linesRemoved * 10);
                }
            };
    
            const updateScore = (points) => {
                score += points;
                scoreDisplay.textContent = `Puntaje: ${score}`;
            };
    
            function dragMouseDown(e) {
                const rect = this.getBoundingClientRect();
                pieceOffsetX = e.clientX - rect.left;
                pieceOffsetY = e.clientY - rect.top;
            }
    
            createGrid();
            updatePieces();
    
            gridElement.addEventListener("dragover", allowDrop);
            gridElement.addEventListener("drop", drop);
        </script>
    </body>
    </html>
    ' width="100%" height="700px" style="border:none;"></iframe>
</div>
