<style>
    .checkbox-group {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }
</style>

    <p>GUID 生成器是一个文本实用程序，可创建全局唯一标识符。</p>

    <section>
        <label for="quantity">数量</label>
        <input type="number" id="quantity" value="10" min="1" max="100">
        
        <div class="checkbox-group">
            <label><input type="checkbox" id="uppercase" checked> 大写字母</label>
            <label><input type="checkbox" id="hyphens" checked> 包括连字符</label>
        </div>
        
        <button class="btn" onclick="generateGUID()">创造</button>

        <label for="guid-data" style="margin-top: 15px;">GUID</label>
        <textarea id="guid-data" rows="15"></textarea>

        <button class="btn" onclick="copyToClipboard()">复制</button>    
    </section>

    <section>
        <h2>什么是 GUID？</h2>
        <p>
          GUID（Globally Unique Identifier）是全局唯一标识符。 
          它有多种用途，包括软件开发、数据库密钥和交易 ID。
          通常，GUID 是大小为 128 位（16 字节）的唯一标识符，通常由 32 个十六进制字符和 4 个连字符 (-) 组成。
        </p>
        <p>
          通用格式: <code>xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx</code>
        </p>
        <p><code>x</code>: 十六进制(0-9, a-f)</p>
        <p><code>M</code>: 版本号 (1\~5)</p>
        <p><code>N</code>: 具有特定位模式的值</p>
    </section>

    <section>
        <h2>GUID 发电机的使用方法</h2>
        <p><strong>数量:</strong> 输入要生成的 GUID 的数量.</p>
        <p><strong>大写字母:</strong> 您可以选择是否将 GUID 转换为大写.</p>
        <p><strong>包括连字符:</strong> 您可以选择是否包含连字符 (-).</p>
        <p><strong>创造:</strong> 根据所选选项生成 GUID.</p>
        <p><strong>复制:</strong> 将生成的 GUID 复制到剪贴板.</p>
    </section>

<script>
    function generateGUID() {
        const quantity = parseInt(document.getElementById("quantity").value);
        const uppercase = document.getElementById("uppercase").checked;
        const hyphens = document.getElementById("hyphens").checked;
        let guids = [];
        
        for (let i = 0; i < quantity; i++) {
            let guid = crypto.randomUUID();
            if (!hyphens) guid = guid.replace(/-/g, "");
            if (uppercase) guid = guid.toUpperCase();
            guids.push(guid);
        }
        
        document.getElementById("guid-data").value = guids.join("\n");
    }

    function copyToClipboard() {
        const textarea = document.getElementById("guid-data");
        textarea.select();
        document.execCommand("copy");
        alert("GUID 已复制!");
    }
</script>