<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editor de transcripciones / Doina Repede</title>
    <style>
        *{
            box-sizing: border-box;
        }

        body,
        html {
            height: 100%;
            margin: 0;
            /* display: flex; */
            justify-content: flex-start;
            align-items: center;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 16px;
            background-color: #daeced;
        }

        textarea {
            font-size: 16px;
            border: 0;
            padding: 15px;
            height: calc(100vh - 50px);
            font-family: monospace;
        }

        textarea:focus {
            border: none; 
            outline: none;
        }

        button {
            margin-top: 20px;
            font-size: 16px;
        }

        .cabecera {
            height: 50px;
            display: flex;
            width: 100%;
            padding: 10px;
            background-color: #79cacd;
            color: #FFFFFF;
            text-align: center;
            flex-direction: row;
            justify-content: space-between;
            align-content: center;
            align-items: center;
        }

        .contenido {
            display: grid;
            grid-template-columns: auto 230px;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
            align-items: stretch;
        }

        li {
            margin: 5px;
        }

        a {
            /* width: 100%; */
            text-decoration: none;
            color: #000;
            padding: 5px;
            border: 1px solid #000;
            border-radius: 5px;
            font-size: 12px;
            background-color: #FFFFFF;
        }

        a:hover {
            background-color: #79cacd;
            color: #FFFFFF;
        }



        label, button#saveButton {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            padding: 5px 10px;
            margin: 0 0  0 5px;
            font-size: 14px;
            background-color: #000000;
            color: #FFFFFF;
            border: 0;

        }

        input[type="file"] {
            display: none; /* Oculta el campo input file */
        }

        span.infotxtx {
            font-size: 80%;
            color: #a5a5a5;
        }

    </style>
    <script>
        const etiquetas = [
            "<alargamiento/>",
            "<ininteligible/>",
            "<vacilación/>",
            "<silencio/>",
            "<palabra_cortada/>",
            '<ruido = "aplausos"/>',
            '<risas = "I"/>',
            '<risas = "público"/>',
            "<cita>",
            "</cita>",
            "<sic>",
            "</sic>",
            "<simultáneo>",
            "</simultáneo>",   
            "<transcripción_dudosa>",
            "<transcripción_dudosa/>"
        ];

        function insertText(index) {
            const textarea = document.getElementById('editor');
            const text = etiquetas[index];
            const startPos = textarea.selectionStart;
            const endPos = textarea.selectionEnd;
            textarea.value = textarea.value.substring(0, startPos) + text + textarea.value.substring(endPos, textarea.value.length);
            const cursorPos = startPos + text.length;
            textarea.setSelectionRange(cursorPos, cursorPos);
            textarea.focus();
        }

        document.addEventListener('DOMContentLoaded', (event) => {
            const textarea = document.getElementById('editor');
            let keySequence = '';

            textarea.addEventListener('keydown', (e) => {
                if (e.ctrlKey && (e.key >= '0' && e.key <= '9')) {
                    keySequence += e.key;
                    e.preventDefault();

                    if (keySequence === '01') {
                        insertText(0);
                        keySequence = '';
                    } else if (keySequence === '02') {
                        insertText(1);
                        keySequence = '';
                    } else if (keySequence === '03') {
                        insertText(2);
                        keySequence = '';
                    } else if (keySequence === '04') {
                        insertText(3);
                        keySequence = '';
                    } else if (keySequence === '05') {
                        insertText(4);
                        keySequence = '';
                    } else if (keySequence === '06') {
                        insertText(5);
                        keySequence = '';
                    } else if (keySequence === '07') {
                        insertText(6);
                        keySequence = '';
                    } else if (keySequence === '08') {
                        insertText(7);
                        keySequence = '';
                    } else if (keySequence === '09') {
                        insertText(8);
                        keySequence = '';
                    } else if (keySequence === '10') {
                        insertText(9);
                        keySequence = '';
                    } else if (keySequence === '11') {
                        insertText(10);
                        keySequence = '';
                    } else if (keySequence === '12') {
                        insertText(11);
                        keySequence = '';
                    } else if (keySequence === '13') {
                        insertText(12);
                        keySequence = '';
                    } else if (keySequence === '14') {
                        insertText(13);
                        keySequence = '';
                    } else if (keySequence === '15') {
                        insertText(14);
                        keySequence = '';
                    } else if (keySequence === '16') {
                        insertText(15);
                        keySequence = '';
                    }

                } else {
                    keySequence = '';
                }
            });

            textarea.addEventListener('keyup', (e) => {
                if (!e.ctrlKey) {
                    keySequence = '';
                }
            });

            document.getElementById('saveButton').addEventListener('click', () => {
                const textToSave = textarea.value;
                const blob = new Blob([textToSave], { type: 'text/plain' });
                const anchor = document.createElement('a');
                anchor.download = 'texto_guardado.txt';
                anchor.href = window.URL.createObjectURL(blob);
                anchor.target = '_blank';
                anchor.style.display = 'none'; // make element invisible
                document.body.appendChild(anchor);
                anchor.click();
                document.body.removeChild(anchor); // clean up
            });

            document.getElementById('openButton').addEventListener('change', (event) => {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        textarea.value = e.target.result;
                    };
                    reader.readAsText(file);
                }
            });
        });
    </script>
    <script>
        window.addEventListener('beforeunload', function (e) {
            var confirmationMessage = 'Tienes cambios sin guardar. ¿Estás seguro de que quieres salir?';
    
            (e || window.event).returnValue = confirmationMessage; // For old browsers
            return confirmationMessage; // For modern browsers
        });
    </script>
    
</head>

<body>

    <div class="cabecera"><div>Editor de transcripciones / Doina Repede 2025</div><div><button id="saveButton">Guardar</button><label for="openButton">Abrir</label><input type="file" id="openButton" accept=".txt"></div></div>
    <div class="contenido">

        <textarea id="editor"></textarea>

        <ul>
            <li><a href="javascript:insertText(0)">alargamiento <span class="infotxtx">(Ctrl + 01)</span></a></li>
            <li><a href="javascript:insertText(1)">ininteligible <span class="infotxtx">(Ctrl + 02)</a></li>
            <li><a href="javascript:insertText(2)">vacilación <span class="infotxtx">(Ctrl + 03)</a></li>
            <li><a href="javascript:insertText(3)">silencio <span class="infotxtx">(Ctrl + 04)</a></li>
            <li><a href="javascript:insertText(4)">palabra cortada <span class="infotxtx">(Ctrl + 05)</a></li>
            <li><a href="javascript:insertText(5)">ruido (aplausos) <span class="infotxtx">(Ctrl + 06)</a></li>
            <li><a href="javascript:insertText(6)">risas (i) <span class="infotxtx">(Ctrl + 07)</a></li>
            <li><a href="javascript:insertText(7)">risas (público) <span class="infotxtx">(Ctrl + 08)</a></li>
            <li><a href="javascript:insertText(8)">cita apertura <span class="infotxtx">(Ctrl + 09)</a></li>
            <li><a href="javascript:insertText(9)">cita cierre <span class="infotxtx">(Ctrl + 10)</a></li>
            <li><a href="javascript:insertText(10)">sic apertura <span class="infotxtx">(Ctrl + 11)</a></li>
            <li><a href="javascript:insertText(11)">sic cierre <span class="infotxtx">(Ctrl + 12)</a></li>
            <li><a href="javascript:insertText(12)">simultáneo apertura <span class="infotxtx">(Ctrl + 13)</a></li>
            <li><a href="javascript:insertText(13)">simultáneo cierre <span class="infotxtx">(Ctrl + 14)</a></li>
            <li><a href="javascript:insertText(14)">transcripción dudosa apertura <span class="infotxtx">(Ctrl + 15)</a></li>
            <li><a href="javascript:insertText(15)">transcripción dudosa cierre <span class="infotxtx">(Ctrl + 16)</a></li>
        </ul>
    
    </div>


    <!-- Default Statcounter code for Cursos
https://aprende.sinelta.es/html -->
<script type="text/javascript">
    var sc_project=13062866; 
    var sc_invisible=1; 
    var sc_security="084664f7"; 
    var sc_client_storage="disabled"; 
    </script>
    <script type="text/javascript"
    src="https://www.statcounter.com/counter/counter.js"
    async></script>
    <noscript><div class="statcounter"><a title="hit counter"
    href="https://statcounter.com/" target="_blank"><img
    class="statcounter"
    src="https://c.statcounter.com/13062866/0/084664f7/1/"
    alt="hit counter"
    referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
    <!-- End of Statcounter Code -->

</body>

</html>
