{"id":2254,"date":"2026-02-11T08:26:34","date_gmt":"2026-02-11T16:26:34","guid":{"rendered":"https:\/\/doukostudio.com\/?page_id=2254"},"modified":"2026-02-12T06:55:47","modified_gmt":"2026-02-12T14:55:47","slug":"timecode-2","status":"publish","type":"page","link":"https:\/\/doukostudio.com\/es\/","title":{"rendered":"TIMECODE"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2254\" class=\"elementor elementor-2254\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-10df7ae e-con-full e-flex e-con e-parent\" data-id=\"10df7ae\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b99eaed elementor-widget elementor-widget-html\" data-id=\"b99eaed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        :root {\n            --primary: #00ff88;\n            --accent: #00e1ff;\n            --bg-dark: #0a0f1a;\n            --glass: rgba(255, 255, 255, 0.07);\n            --glass-border: rgba(255, 255, 255, 0.12);\n        }\n\n        * { box-sizing: border-box; }\n\n        body, html {\n            margin: 0;\n            padding: 0;\n            width: 100%;\n            min-height: 100vh;\n            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n            background-color: var(--bg-dark);\n            color: white;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        \/* Contenedor Full Screen y Centrado *\/\n        .container {\n            width: 100%;\n            min-height: 100vh;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 20px;\n            background: radial-gradient(circle at center, #16213e 0%, #0a0f1a 100%);\n        }\n\n        \/* Card Principal *\/\n        .glass-card {\n            background: var(--glass);\n            backdrop-filter: blur(15px);\n            -webkit-backdrop-filter: blur(15px);\n            border: 1px solid var(--glass-border);\n            border-radius: 28px;\n            padding: clamp(20px, 5vw, 40px);\n            width: 100%;\n            max-width: 550px;\n            text-align: center;\n            box-shadow: 0 40px 100px rgba(0,0,0,0.6);\n        }\n\n        \/* Reloj Ultra-Responsive *\/\n        #timer {\n            font-size: clamp(2.5rem, 18vw, 6rem);\n            font-weight: 900;\n            font-variant-numeric: tabular-nums;\n            margin-bottom: 20px;\n            background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            line-height: 1;\n        }\n\n        \/* Controles de Input *\/\n        .input-group {\n            display: flex;\n            flex-wrap: wrap; \/* Permite que bajen si no caben *\/\n            gap: 10px;\n            justify-content: center;\n            margin-bottom: 25px;\n        }\n\n        .input-field {\n            flex: 1;\n            min-width: 80px; \/* Evita que sean demasiado peque\u00f1os *\/\n            display: flex;\n            flex-direction: column;\n            gap: 5px;\n        }\n\n        .input-field label {\n            font-size: 10px;\n            text-transform: uppercase;\n            color: #64748b;\n            letter-spacing: 1px;\n        }\n\n        input[type=\"number\"] {\n            background: rgba(0, 0, 0, 0.3);\n            border: 1px solid var(--glass-border);\n            border-radius: 12px;\n            color: white;\n            padding: 12px 5px;\n            font-size: 1.2rem;\n            text-align: center;\n            width: 100%;\n            outline: none;\n            transition: all 0.3s ease;\n        }\n\n        input:focus { border-color: var(--primary); background: rgba(0,0,0,0.5); }\n\n        \/* Botonera Responsiva *\/\n        .actions {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n            gap: 12px;\n            width: 100%;\n        }\n\n        button {\n            cursor: pointer;\n            border: none;\n            border-radius: 15px;\n            padding: 15px 10px;\n            font-size: 0.85rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            transition: all 0.2s ease;\n        }\n\n        #startBtn { background: var(--primary); color: #052e16; }\n        #captureBtn { background: rgba(255,255,255,0.1); color: white; border: 1px solid var(--glass-border); }\n        #resetBtn { background: #ef4444; color: white; }\n\n        button:hover { transform: translateY(-3px); filter: brightness(1.1); }\n        button:active { transform: translateY(0); }\n\n        \/* Historial *\/\n        .log-section {\n            margin-top: 30px;\n            width: 100%;\n            max-width: 450px;\n        }\n\n        h2 { font-size: 0.8rem; color: #64748b; letter-spacing: 3px; margin-bottom: 15px; }\n\n        ul {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n            max-height: 180px;\n            overflow-y: auto;\n        }\n\n        li {\n            background: rgba(255,255,255,0.03);\n            padding: 12px 20px;\n            border-radius: 12px;\n            margin-bottom: 8px;\n            display: flex;\n            justify-content: space-between;\n            font-family: monospace;\n            border-left: 3px solid var(--accent);\n            animation: fadeIn 0.4s ease forwards;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: scale(0.95); }\n            to { opacity: 1; transform: scale(1); }\n        }\n\n        \/* Scrollbar *\/\n        ul::-webkit-scrollbar { width: 4px; }\n        ul::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 10px; }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n    <div class=\"glass-card\">\n        <div id=\"timer\">00:00:00<\/div>\n        \n        <div class=\"input-group\">\n            <div class=\"input-field\">\n                <label>Hrs<\/label>\n                <input type=\"number\" id=\"hours\" min=\"0\" placeholder=\"00\">\n            <\/div>\n            <div class=\"input-field\">\n                <label>Min<\/label>\n                <input type=\"number\" id=\"minutes\" min=\"0\" max=\"59\" placeholder=\"00\">\n            <\/div>\n            <div class=\"input-field\">\n                <label>Seg<\/label>\n                <input type=\"number\" id=\"seconds\" min=\"0\" max=\"59\" placeholder=\"00\">\n            <\/div>\n        <\/div>\n\n        <div class=\"actions\">\n            <button id=\"startBtn\">Iniciar<\/button>\n            <button id=\"captureBtn\">Capturar<\/button>\n            <button id=\"resetBtn\">Reset<\/button>\n        <\/div>\n    <\/div>\n\n    <div class=\"log-section\">\n        <h2>HISTORIAL<\/h2>\n        <ul id=\"capturedTimes\"><\/ul>\n    <\/div>\n<\/div>\n\n<script>\n    const timerDisplay = document.querySelector(\"#timer\");\n    const startBtn = document.querySelector(\"#startBtn\");\n    const captureBtn = document.querySelector(\"#captureBtn\");\n    const resetBtn = document.querySelector(\"#resetBtn\");\n    const capturedTimesList = document.querySelector(\"#capturedTimes\");\n    \n    let timerInterval;\n    let isRunning = false;\n    let currentSeconds = 0;\n\n    function updateDisplay(totalSeconds) {\n        const h = Math.floor(totalSeconds \/ 3600);\n        const m = Math.floor((totalSeconds % 3600) \/ 60);\n        const s = totalSeconds % 60;\n        timerDisplay.innerHTML = `${pad(h)}:${pad(m)}:${pad(s)}`;\n    }\n\n    startBtn.addEventListener(\"click\", function() {\n        if (isRunning) {\n            clearInterval(timerInterval);\n            isRunning = false;\n            startBtn.innerText = \"Reanudar\";\n            startBtn.style.background = \"var(--accent)\";\n            return;\n        }\n\n        if (currentSeconds === 0) {\n            const h = parseInt(document.querySelector(\"#hours\").value || 0);\n            const m = parseInt(document.querySelector(\"#minutes\").value || 0);\n            const s = parseInt(document.querySelector(\"#seconds\").value || 0);\n            currentSeconds = (h * 3600) + (m * 60) + s;\n        }\n        \n        isRunning = true;\n        startBtn.innerText = \"Pausar\";\n        startBtn.style.background = \"#fbbf24\"; \/\/ Color \u00e1mbar al pausar\n\n        timerInterval = setInterval(function() {\n            currentSeconds++;\n            updateDisplay(currentSeconds);\n        }, 1000);\n    });\n\n    resetBtn.addEventListener(\"click\", function() {\n        clearInterval(timerInterval);\n        isRunning = false;\n        currentSeconds = 0;\n        updateDisplay(0);\n        startBtn.innerText = \"Iniciar\";\n        startBtn.style.background = \"var(--primary)\";\n        capturedTimesList.innerHTML = \"\";\n    });\n    \n    captureBtn.addEventListener(\"click\", function() {\n        if (currentSeconds === 0 && !isRunning) return;\n        const li = document.createElement(\"li\");\n        li.innerHTML = `<span>Timecode #${capturedTimesList.children.length + 1}<\/span> <strong>${timerDisplay.innerText}<\/strong>`;\n        capturedTimesList.prepend(li);\n    });\n    \n    function pad(num) {\n        return num.toString().padStart(2, \"0\");\n    }\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>00:00:00 Hrs Min Seg Iniciar Capturar Reset HISTORIAL<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2254","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/doukostudio.com\/es\/wp-json\/wp\/v2\/pages\/2254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doukostudio.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doukostudio.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doukostudio.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doukostudio.com\/es\/wp-json\/wp\/v2\/comments?post=2254"}],"version-history":[{"count":21,"href":"https:\/\/doukostudio.com\/es\/wp-json\/wp\/v2\/pages\/2254\/revisions"}],"predecessor-version":[{"id":2277,"href":"https:\/\/doukostudio.com\/es\/wp-json\/wp\/v2\/pages\/2254\/revisions\/2277"}],"wp:attachment":[{"href":"https:\/\/doukostudio.com\/es\/wp-json\/wp\/v2\/media?parent=2254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}