Code Minifier Pro

Mal ehrlich: Niemand mag aufgeblähten Code. Aber am Ende schleppen die meisten oft kiloweise unnötigen Ballast in CSS und JS Dateien mit rum. Sowas wie zB. Leerzeichen, Kommentare, Formatierungen, die eigentlich nur uns Menschen beim Lesen helfen, den Browser aber nur Zeit kosten. Genau dafür bieten wir euch unser PHP Script Code Minifier Pro.

Das Teil ist kein kompliziertes Monster, sondern ein direktes Werkzeug: Du wirfst deinen Code rein, das Script erkennt von selbst, ob es CSS oder Javascript ist, und dampft das Ganze auf das absolute Minimum ein. Keine Schnörkel, keine unnötigen Klicks.

Was du davon hast:

• Schnellere Ladezeiten: Deine Files werden so klein wie möglich, damit der Browser sie sofort schlucken kann.
• Direktes Feedback: Du siehst sofort auf das Byte genau, wie viel wir eingespart haben.
• Cleaner Workflow: Ein Button, ein Ergebnis. Den Rest macht die Automatik.

Ich hab das Design bewusst extrem reduziert und dunkel gehalten. Es soll sich nicht wie ein billiges Tool aus dem Netz anfühlen, sondern wie ein hochwertiges Terminal, das man gerne auf dem zweiten Monitor offen hat.

Es geht hier nicht um Schnickschnack, sondern darum, dass dein Projekt am Ende flüssiger läuft. Probier’s aus, hau deinen Code rein und schau, was passiert. Den unten stehenden Code abspeichern als Setup.php, einmal aufrufen und alle einzel Dateien werden aus der Datei heraus erstellt. Der Installer löscht sich im Anschluss von selbst.

<?php
if (!is_dir('fonts')) mkdir('fonts', 0755);
$fonts = [
    'outfit-reg.woff2' => 'https://fonts.gstatic.com/s/outfit/v11/QGYsz_O5rkz2mS4_OTuSfA.woff2',
    'outfit-bold.woff2' => 'https://fonts.gstatic.com/s/outfit/v11/QGYsz_O5rkz2mS4_ObeSfA.woff2',
    'space-mono.woff2' => 'https://fonts.gstatic.com/s/spacemono/v13/i7dMIFZOfXjS5EYXNwrY_NChbX0.woff2'
];
foreach ($fonts as $name => $url) {
    if (!file_exists("fonts/$name")) {
        $ch = curl_init($url); $fp = fopen("fonts/$name", 'wb');
        curl_setopt($ch, CURLOPT_FILE, $fp); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
        curl_exec($ch); curl_close($ch); fclose($fp);
    }
}
$api_php = <<<'EOD'
<?php
header('Content-Type: application/json');
function minify_css($css) {
    $css = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css);
    $css = str_replace(["\r\n", "\r", "\n", "\t", '  ', '    ', '    '], '', $css);
    return trim($css);
}
function minify_js($js) {
    $js = preg_replace('/((?:\/\*[\s\S]*?\*\/)|(?:\/\/.*))/', '', $js);
    $js = str_replace(["\r\n", "\r", "\n", "\t"], ' ', $js);
    $js = preg_replace('/\s+/', ' ', $js);
    return trim($js);
}
$data = json_decode(file_get_contents('php://input'), true);
if (isset($data['code']) && isset($data['type'])) {
    $minified = ($data['type'] === 'css') ? minify_css($data['code']) : minify_js($data['code']);
    echo json_encode([
        'success' => true,
        'minified' => $minified,
        'originalSize' => strlen($data['code']),
        'minifiedSize' => strlen($minified),
        'type' => strtoupper($data['type'])
    ]);
} else {
    echo json_encode(['success' => false]);
}
?>
EOD;
file_put_contents('api.php', $api_php);
$css_content = <<<'EOD'
@font-face { font-family: 'Outfit'; src: url('fonts/outfit-reg.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'Outfit'; src: url('fonts/outfit-bold.woff2') format('woff2'); font-weight: 900; }
@font-face { font-family: 'Space Mono'; src: url('fonts/space-mono.woff2') format('woff2'); font-weight: 400; }
:root { --accent: #d4af37; --bg: #050506; --panel: #0a0a0c; --border: rgba(255, 255, 255, 0.04); --text-muted: #555; --code-font: 'Space Mono', monospace; }
* { margin: 0; padding: 0; box-sizing: border-box; outline: none; }
body { font-family: 'Outfit', sans-serif; background: var(--bg); color: #fff; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.app-shell { display: grid; grid-template-columns: 1fr 2px 1fr; flex: 1; height: 100%; }
.panel { background: var(--panel); display: flex; flex-direction: column; position: relative; }
.panel-left { padding: 40px 60px; }
.panel-right { background: #000; }
.divider { background: var(--border); position: relative; }
.divider::after { content: ''; position: absolute; top: 15%; bottom: 15%; left: 0; right: 0; background: var(--accent); box-shadow: 0 0 15px var(--accent); opacity: 0; transition: 0.5s; }
.working .divider::after { opacity: 1; animation: pulse 1.5s infinite; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; }
h1 { font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; }
.brand { color: var(--text-muted); font-size: 0.7rem; letter-spacing: 1px; }
.monolith-container { flex: 1; position: relative; background: #000; border: 1px solid var(--border); border-radius: 4px; transition: 0.3s; }
.monolith-container:focus-within { border-color: rgba(212, 175, 55, 0.3); box-shadow: 0 0 30px rgba(212, 175, 55, 0.05); }
textarea { width: 100%; height: 100%; background: transparent; border: none; color: #aaa; padding: 30px; font-family: var(--code-font); font-size: 13px; line-height: 1.8; resize: none; }
textarea::placeholder { color: #333; }
.main-action-container { position: absolute; bottom: 40px; left: 60px; right: 60px; display: flex; justify-content: center; z-index: 10; }
.btn-ultra { background: #fff; color: #000; border: none; padding: 18px 60px; font-family: 'Outfit'; font-weight: 900; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; cursor: pointer; border-radius: 4px; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.btn-ultra:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 15px 50px rgba(212, 175, 55, 0.2); }
.btn-ultra:active { transform: translateY(1px); }
.btn-ultra:disabled { background: #111; color: #444; cursor: not-allowed; box-shadow: none; transform: none; }
.output-header { padding: 30px 40px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.output-meta { display: flex; gap: 30px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.output-meta b { color: var(--accent); font-weight: 900; }
.type-badge { font-size: 9px; background: rgba(255,255,255,0.05); padding: 3px 8px; border-radius: 2px; color: #fff; font-weight: 900; display: none; }
.type-badge.show { display: inline-block; }
.btn-copy { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 8px 20px; font-size: 0.65rem; text-transform: uppercase; font-weight: 900; letter-spacing: 1px; cursor: pointer; transition: 0.2s; border-radius: 2px; }
.btn-copy:hover { border-color: #fff; color: #fff; }
@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
footer { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; }
.footer-link { color: #222; text-decoration: none; font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; transition: 0.3s; }
.footer-link span { color: #333; font-weight: 900; }
.footer-link:hover span { color: var(--accent); }
#detect-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); display: none; justify-content: center; align-items: center; flex-direction: column; z-index: 100; }
#detect-overlay.show { display: flex; }
.detect-btn { background: var(--panel); border: 1px solid var(--border); color: #fff; padding: 15px 40px; margin: 10px; font-family: 'Outfit'; font-weight: 900; text-transform: uppercase; cursor: pointer; transition: 0.2s; }
.detect-btn:hover { border-color: var(--accent); color: var(--accent); }
EOD;
file_put_contents('style.css', $css_content);

$js_content = <<<'EOD'
const $ = id => document.getElementById(id);
let currentCodeType = null;
$("input-code").addEventListener('input', function() {
    const code = this.value;
    $('btn-main').disabled = !code.trim();
    if(!code.trim()) {
        currentCodeType = null;
        $('type-badge').classList.remove('show');
    }
});
function detectAndProcess() {
    const code = $("input-code").value;
    if(!code.trim()) return;

    const isCss = code.includes('{') && code.includes(':') && (code.includes(';') || code.includes('}'));
    const isJs = code.includes('function') || code.includes('var ') || code.includes('const ') || code.includes('let ') || code.includes('=>');
    if(isCss && !isJs) {
        process('css');
    } else if(isJs && !isCss) {
        process('js');
    } else {
        // Uneindeutig -> Overlay anzeigen
        $("detect-overlay").classList.add('show');
    }
}

function forceProcess(type) {
    $("detect-overlay").classList.remove('show');
    process(type);
}

async function process(type) {
    const code = $("input-code").value;
    const btn = $('btn-main');
    const shell = $('app-shell');
    
    btn.innerText = 'Optimierung läuft...';
    btn.disabled = true;
    shell.classList.add('working');

    try {
        const response = await fetch('api.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ code, type })
        });
        
        const data = await response.json();
        if (data.success) {
            $("output-code").value = data.minified;
            $("stat-orig").innerHTML = `Original: <b>${data.originalSize} B</b>`;
            $("stat-min").innerHTML = `Minifiziert: <b>${data.minifiedSize} B</b>`;
            const saved = Math.round((1 - data.minifiedSize / data.originalSize) * 100);
            $("stat-saved").innerHTML = `Ersparnis: <b>${saved}%</b>`;
            
            const badge = $("type-badge");
            badge.innerText = data.type;
            badge.classList.add('show');
        }
    } catch(e) { console.error(e); }

    btn.innerText = 'Code Optimieren';
    btn.disabled = false;
    shell.classList.remove('working');
}

function copyOutput() {
    const output = $("output-code");
    output.select();
    document.execCommand('copy');
    const btn = event.target;
    btn.innerText = 'Kopiert!';
    setTimeout(() => btn.innerText = 'Code Kopieren', 2000);
}
EOD;
file_put_contents('script.js', $js_content);

// --- INDEX (index.php) ---
$index_content = <<<'EOD'
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Code Minifier Pro | Dreamcodes Suite</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="detect-overlay">
    <h2 style="text-transform:uppercase; letter-spacing:3px; font-weight:900; margin-bottom:20px;">Code-Typ bestätigen</h2>
    <p style="color:#666; margin-bottom:30px; font-size:0.8rem;">Die Automatik ist unsicher. Bitte wählen Sie:</p>
    <div>
        <button class="detect-btn" onclick="forceProcess('css')">CSS STYLESHEET</button>
        <button class="detect-btn" onclick="forceProcess('js')">JAVASCRIPT</button>
    </div>
</div>

<div class="app-shell" id="app-shell">
    
    <div class="panel panel-left">
        <header>
            <h1>Code Minifier Ultra</h1>
            <div class="brand"></div>
        </header>
        
        <div class="monolith-container">
            <textarea id="input-code" placeholder="// Raw CSS oder JS Code hier einfügen...
// Die Automatik erkennt den Typ."></textarea>
        </div>
        <div class="main-action-container">
            <button class="btn-ultra" id="btn-main" onclick="detectAndProcess()" disabled>Code Optimieren</button>
        </div>
                <footer>
            <a href="https://www.dreamcodes.net" target="_blank" class="footer-link">Powered by | <span>Dreamcodes</span></a>
        </footer>
    </div>
    <div class="divider"></div>
    <div class="panel panel-right">
        <div class="output-header">
            <div class="output-meta">
                <span id="stat-orig">Original: <b>-</b></span>
                <span id="stat-min">Minifiziert: <b>-</b></span>
                <span id="stat-saved">Ersparnis: <b>-</b></span>
                <span class="type-badge" id="type-badge">JS</span>
            </div>
            <button class="btn-copy" onclick="copyOutput()">Code Kopieren</button>
        </div>
        <textarea id="output-code" readonly placeholder="/* Das optimierte Ergebnis erscheint hier... */"></textarea>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>
EOD;
file_put_contents('index.php', $index_content);

unlink(__FILE__);
?>
<!DOCTYPE html>
<html lang="de">
<head><meta charset="UTF-8"><title>Deploying Pro...</title><link rel="stylesheet" href="style.css"></head>
<body style="display:flex; justify-content:center; align-items:center; height:100vh; text-align:center; background:#000;">
    <div>
        <div style="width:40px; height:40px; border:2px solid rgba(255,255,255,0.05); border-top-color:#d4af37; border-radius:50%; animation:spin 1s linear infinite; margin: 0 auto 20px;"></div>
        <h1 style="color:#fff; font-size: 1rem; font-weight:900; letter-spacing: 4px; text-transform:uppercase;">Ultra Core v1.0</h1>
        <p style="color: #444; font-size: 0.6rem; letter-spacing: 2px; margin-top: 10px;">INSTALLATION LÄUFT. BITTE WARTEN...</p>
        <div id="timer" style="font-size: 3rem; font-weight: 900; color: #111; margin-top: 15px;">10</div>
    </div>
    <script>
        let timeLeft = 10;
        setInterval(() => {
            timeLeft--;
            document.getElementById('timer').innerText = timeLeft;
            if(timeLeft <= 0) window.location.href = 'index.php';
        }, 1000);
    </script>
    <style>@keyframes spin { to { transform: rotate(360deg); } }</style>
</body>
</html>