vdo.ninja/base64.html at develop · CaptKrisp/vdo.ninja · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VDO.Ninja CSS to Base64 Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #1E1E1E;
            color: #E0E0E0;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1, h2 {
            color: #E0E0E0;
        }
        textarea {
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
            background-color: #2D2D2D;
            color: #E0E0E0;
            border: 1px solid #3D3D3D;
            border-radius: 4px;
            padding: 10px;
            font-family: monospace;
        }
        #output {
            height: 100px;
        }
        button {
            padding: 10px 20px;
            background-color: #4ecca3;
            color: #1E1E1E;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45b392;
        }
        .container {
            background-color: #2D2D2D;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>VDO.Ninja CSS Base64 Converter</h1>
        <div style="margin-bottom: 15px;">
            <label>
                <input type="radio" name="mode" value="encode" checked onchange="switchMode()"> Encode CSS to Base64
            </label>
            <label style="margin-left: 20px;">
                <input type="radio" name="mode" value="decode" onchange="switchMode()"> Decode Base64 to CSS
            </label>
        </div>
        <textarea id="cssInput" placeholder="Enter your CSS here..."></textarea>
        <button onclick="processInput()">Convert</button>
        <button onclick="prettifyCSS()" style="margin-left: 10px;">Prettify</button><br><br>
		<i>💡Tip: Adding <b>!important</b> after your CSS values can help override existing values.</i>

        <h2>Output:</h2>
        <textarea id="output" readonly></textarea>
        <button onclick="copyToClipboard()">Copy to Clipboard</button>
    </div>
    <script>
        function getMode() {
            return document.querySelector('input[name="mode"]:checked').value;
        }

        function switchMode() {
            const mode = getMode();
            const input = document.getElementById('cssInput');
            const output = document.getElementById('output');

            if (mode === 'encode') {
                input.placeholder = 'Enter your CSS here...';
            } else {
                input.placeholder = 'Enter base64 string (with or without &cssb64= prefix)...';
            }

            // Clear output but preserve input
            output.value = '';
        }

        function processInput() {
            const mode = getMode();
            if (mode === 'encode') {
                convertToBase64();
            } else {
                decodeFromBase64();
            }
        }

        function convertToBase64() {
            const cssInput = document.getElementById('cssInput').value;
            // Remove tabs and extra spaces
            const sanitizedCSS = cssInput.replace(/\s+/g, ' ').trim();
            const base64CSS = btoa(encodeURIComponent(sanitizedCSS));
            document.getElementById('output').value = '&cssb64=' + base64CSS;
        }

        function decodeFromBase64() {
            let base64Input = document.getElementById('cssInput').value.trim();

            // Remove &cssb64= prefix if present
            if (base64Input.startsWith('&cssb64=')) {
                base64Input = base64Input.substring(8);
            } else if (base64Input.startsWith('cssb64=')) {
                base64Input = base64Input.substring(7);
            }

            try {
                const decodedCSS = decodeURIComponent(atob(base64Input));
                document.getElementById('output').value = decodedCSS;
            } catch (error) {
                alert('Invalid base64 string. Please check your input.');
                document.getElementById('output').value = '';
            }
        }

        function prettifyCSS() {
            const outputField = document.getElementById('output');
            let css = outputField.value;

            if (!css || css.startsWith('&cssb64=')) {
                // If output is base64, decode it first
                if (css.startsWith('&cssb64=')) {
                    try {
                        css = decodeURIComponent(atob(css.substring(8)));
                    } catch (error) {
                        alert('Cannot prettify base64 output. Decode it first.');
                        return;
                    }
                } else {
                    alert('No CSS to prettify.');
                    return;
                }
            }

            // Basic CSS prettification
            css = css
                .replace(/\s*{\s*/g, ' {\n  ') // Add newline after opening brace
                .replace(/;\s*/g, ';\n  ') // Add newline after semicolon
                .replace(/\s*}\s*/g, '\n}\n') // Add newlines around closing brace
                .replace(/,\s*/g, ',\n') // Add newline after comma in selectors
                .replace(/\n\s*\n/g, '\n') // Remove extra blank lines
                .replace(/\s*:\s*/g, ': ') // Consistent spacing around colons
                .trim();

            // Fix indentation for nested rules
            const lines = css.split('\n');
            let indentLevel = 0;
            const prettifiedLines = lines.map(line => {
                line = line.trim();
                if (line.endsWith('{')) {
                    const result = '  '.repeat(indentLevel) + line;
                    indentLevel++;
                    return result;
                } else if (line === '}') {
                    indentLevel = Math.max(0, indentLevel - 1);
                    return '  '.repeat(indentLevel) + line;
                } else if (line) {
                    return '  '.repeat(indentLevel) + line;
                }
                return line;
            });

            outputField.value = prettifiedLines.join('\n');
        }

        function copyToClipboard() {
            const output = document.getElementById('output');
            output.select();
            document.execCommand('copy');
            alert('Copied to clipboard!');
        }
    </script>
</body>
</html>