CaveOps | Snippets: GNU/Linux Copypasta Generator

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 40px;
    max-width: 800px;
    width: 100%;
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 28px;
}

input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
    margin-bottom: 24px;
}

input[type="text"]:focus {
    border-color: #667eea;
}

button {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: #667eea;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

button:hover {
    background: #5568d3;
}

button:active {
    transform: scale(0.98);
}

.output {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #495057;
    min-height: 300px;
}

.highlight {
    background: #ffd700;
    color: #333;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.copy-btn {
    margin-top: 16px;
    background: #28a745;
}

.copy-btn:hover {
    background: #218838;
}

.copy-btn.copied {
    background: #6c757d;
}

CSS Before Head

HTML Head

CSS After Head

JS Before HTML Body

HTML Body Attrs

<div class="container">
    <h1>GNU/Linux Copypasta Generator</h1>

    <input type="text" id="nameInput" value="Linux" placeholder="Enter name (e.g., Linux, Windows, BSD)">

    <div class="output" id="output"></div>

    <button class="copy-btn" id="copyBtn" onclick="copyToClipboard()">Copy to Clipboard</button>
</div>

HTML Body

HTML Foot

const template = `I'd just like to interject for a moment. What you're refering to as Bob, is in fact, GNU/Bob, or as I've recently taken to calling it, GNU plus Bob. Bob is not an operating system unto itself, but rather another free component of a fully functioning GNU system made useful by the GNU corelibs, shell utilities and vital system components comprising a full OS as defined by POSIX.

Many computer users run a modified version of the GNU system every day, without realizing it. Through a peculiar turn of events, the version of GNU which is widely used today is often called Bob, and many of its users are not aware that it is basically the GNU system, developed by the GNU Project.

There really is a Bob, and these people are using it, but it is just a part of the system they use. Bob is the kernel: the program in the system that allocates the machine's resources to the other programs that you run. The kernel is an essential part of an operating system, but useless by itself; it can only function in the context of a complete operating system. Bob is normally used in combination with the GNU operating system: the whole system is basically GNU with Bob added, or GNU/Bob. All the so-called Bob distributions are really distributions of GNU/Bob!`;

function generate() {
    const name = document.getElementById('nameInput').value.trim() || 'Linux';
    const escapedName = name.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    const result = template.replace(/Bob/g, `<span class="highlight">${escapedName}</span>`);
    document.getElementById('output').innerHTML = result;
}

function copyToClipboard() {
    const output = document.getElementById('output').textContent;
    navigator.clipboard.writeText(output).then(() => {
        const btn = document.getElementById('copyBtn');
        btn.textContent = 'Copied!';
        btn.classList.add('copied');
        setTimeout(() => {
            btn.textContent = 'Copy to Clipboard';
            btn.classList.remove('copied');
        }, 2000);
    });
}

document.getElementById('nameInput').addEventListener('input', generate);

generate();

JS After HTML Body