index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generador de Variables CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        textarea {
            width: 100%;
            height: 150px;
            margin-bottom: 10px;
        }
        pre {
            background: #f4f4f4;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h2>Generador de Variables CSS</h2>
    <textarea id="input" placeholder="Ingresa los colores aquí..."></textarea>
    <button onclick="generateCSS()">Generar CSS</button>
    <pre id="output"></pre>

    <script>
        function generateCSS() {
            const input = document.getElementById('input').value;
            const output = document.getElementById('output');
            const lines = input.split('\n');
            let cssVars = ':root {\n';

            lines.forEach(line => {
                const match = line.match(/-\s*(.+):\s*(hsl\(.+\))/i);
                if (match) {
                    let varName = match[1].trim().replace(/\s+/g, '-');
                    let colorValue = match[2].trim();
                    cssVars += `  --${varName}: ${colorValue};\n`;
                }
            });

            cssVars += '}';
            output.textContent = cssVars;
        }
    </script>
</body>
</html>