<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Minifyer</title>
<style>
body {
flex-direction:column;
    margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #1a1a1a url('https://media.tenor.com/yMFeJWGODBoAAAAd/red-sky.gif') center/cover no-repeat; color: #ff4d4d; font-family: Arial, sans-serif;
}
.container {
    max-width: 800px; width: 80%; background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
padding: 30px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 1); border: 1px solid #ff4d4d;
}
h2 {
    color: #ff4d4d; text-align: center; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
textarea, .output {
    width: 100%; font-family: monospace; font-size: 14px; border: 1px solid #ff4d4d; border-radius: 8px; background: rgba(0, 0, 0, 0.8); color: #ff4d4d; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8); margin-bottom: 15px; padding: 10px; resize: vertical; outline: none;
}
textarea:focus, .output:focus {
    box-shadow: 0 0 10px #ff4d4d; border-color: #ff4d4d;
}
button {
    padding: 12px; font-size: 16px; font-weight: bold; color: #000; background-color: #ff4d4d; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s, transform 0.2s; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); margin-right: 10px;
}
button:last-child {
    margin-right: 0;
}
button:hover {
    background-color: #ff3333; transform: translateY(-2px);
}
button:active {
    background-color: #cc0000; transform: translateY(0);
}
.button-group {
    display: flex; justify-content: space-between; gap: 10px; margin-bottom: 20px;
}
.modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); color: #ff4d4d; padding: 20px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); z-index: 1000; width: 90%; max-width: 400px;
    display: none; /* Hidden by default */
}
.modal h3 {
    margin: 0 0 15px; text-align: center;
}
.modal p {
    margin-bottom: 20px;
}
.modal .close-btn {
    display: block; margin: 0 auto; padding: 10px 20px; background-color: #ff4d4d; color: #000; border: none; border-radius: 8px; cursor: pointer; text-align: center;
}
.modal .close-btn:hover {
    background-color: #ff3333;
}
.modal .close-btn:active {
    background-color: #cc0000;
}
.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; display: none; /* Hidden by default */
}

.footer {
    margin-top: 30px;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: rgba(255, 77, 77, 0.5); 
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

hr {border:1px solid red;}
</style>
</head>
<body>
<div class="container">
    <h2>NMBAH — Minifyer</h2>
    <p>Read about what this tool does.<br>Trust me, it's a short text and worth it!</p>
    <hr>
    <div class="button-group">
        <button onclick="showModal()">Read About</button>
        <button onclick="minifyCode()">Minify</button>
    </div>
    <textarea id="inputCode" placeholder="Paste that big characters here..."></textarea>
    <div class="output" id="outputCode"></div>
    <button onclick="copyOutput()">Copy</button>
</div>
<footer class="footer">© Not Made by a Human — HTML Minifyer</footer>
<div class="overlay" id="overlay" onclick="closeModal()"></div>
<div class="modal" id="modal">
    <h3>About this Tool</h3>
    <p>This is a smart tool created by <b>Not Made by a Human</b>, an indie company owned by <b>Kirey Cazkdnsky</b>. With this tool, you don't need to waste time navigating through multiple sessions or websites to compress your code. Here, you can simply paste your CSS, JS, HTML, or even everything together if you prefer. The intelligent system will minimize it as much as possible, removing unnecessary spaces, line breaks, and even comments, compressing your code to the max, all for free, fast, and without ads! Like it? You can help me by sharing this tool to other developers! That would mean a lot to me.
</p><p>
Thank you for using this tool, made with a lot of love and care. It was designed to address those complicated sites full of buttons and advanced information. Here, your code is compressed without hassle!
</p><p>
Just paste and compress. Created by one person, this tool offers what multi-million-dollar companies often don’t, as many don’t even compress your code this efficiently!
</p><p>
Thank you so much.<br>
— Kirey Cazkdnsky</p>
    <button class="close-btn" onclick="closeModal()">X</button>
</div>

<script>
function minifyCode() {
    const input = document.getElementById('inputCode').value;
    const minified = input
        .replace(/\s+/g, ' ') 
        .replace(/>\s+</g, '><')
        .replace(/\/\*[\s\S]*?\*\//g, '')
        .replace(/<!--[\s\S]*?-->/g, '')
        .replace(/\s*([{};:,])\s*/g, '$1')
        .trim();
    document.getElementById('outputCode').textContent = minified;
}

function copyOutput() {
    const output = document.getElementById('outputCode').textContent;
    if (output) {
        navigator.clipboard.writeText(output).then(() => alert('Copied!')).catch(err => alert('Error: ' + err));
    } else {
        alert('Write something first!');
    }
}

function showModal() {
    document.getElementById('modal').style.display = 'block';
    document.getElementById('overlay').style.display = 'block';
}

function closeModal() {
    document.getElementById('modal').style.display = 'none';
    document.getElementById('overlay').style.display = 'none';
}
</script>
</body>
</html>