<?php

/**
 * @id 23
 * @name 字数统计
 * @version 1.0.0
 * @description 实时统计文本总字符数，支持文章URL正文字数统计功能，界面简洁易用，操作便捷高效
 * @price 0
 * @type 工具
 * @website 
 * @width 545
 * @height 390
 * @thumbnail /img/id23.png
 */
?>
<div class="word-count-tool">


    <div class="url-section">
        <input type="text" id="url-input" placeholder="输入文章URL，如 http://localhost/post_id150.html">
        <button id="fetch-btn" class="btn">获取内容</button>
    </div>

    <div class="input-section">
        <textarea id="text-input" placeholder="在此输入文本..."></textarea>
    </div>

    <div class="control-bar">
        <div class="char-count">
            <span id="total-count">0</span> 字符
        </div>
        <div class="action-buttons">
            <button id="clear-btn" class="btn">清空</button>
            <button id="copy-btn" class="btn">复制</button>
        </div>
    </div>
</div>

<style>
    .word-count-tool {
      
        padding: 20px;
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #e0e0e0;
        font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

    .header {
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
    }

    h3 {
        margin: 0;
        color: #333333;
        font-size: 18px;
        font-weight: 600;
    }

    .url-section {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
    }

    #url-input {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        font-size: 13px;
        transition: all 0.3s ease;
        font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    }

    #url-input:focus {
        outline: none;
        border-color: #2196F3;
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
    }

    .control-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #f0f0f0;
    }

    .char-count {
        background: #f5f5f5;
        color: #333333;
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid #e0e0e0;
    }

    #total-count {
        font-weight: 600;
        font-size: 16px;
        font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
        color: #2196F3;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
    }

    .btn {
        padding: 8px 14px;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    }

    .input-section {
        margin-bottom: 0;
    }

    #text-input {
        width: 100%;
        height: 210px;
        padding: 12px;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        resize: vertical;
        font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
        font-size: 14px;
        line-height: 1.5;
        box-sizing: border-box;
        transition: all 0.3s ease;
        background: #ffffff;
    }

    #text-input:focus {
        outline: none;
        border-color: #2196F3;
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
    }

    #clear-btn {
        background: #f5f5f5;
        color: #666666;
        border: 1px solid #e0e0e0;
    }

    #clear-btn:hover {
        background: #e0e0e0;
        transform: translateY(-1px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    #copy-btn {
        background: #2196F3;
        color: white;
    }

    #copy-btn:hover {
        background: #1976D2;
        transform: translateY(-1px);
        box-shadow: 0 1px 2px rgba(33, 150, 243, 0.3);
    }

    #copy-btn:active {
        transform: translateY(0);
    }

    #fetch-btn {
        background: #4CAF50;
        color: white;
    }

    #fetch-btn:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 1px 2px rgba(76, 175, 80, 0.3);
    }

    #fetch-btn:active {
        transform: translateY(0);
    }
</style>

<script>
    (function() {
        // 定义callParentToast函数，使用父页面的提示框
        function callParentToast(message, options = {}) {
            window.parent.postMessage({
                type: 'toast',
                func: 'showToast',
                message: message,
                options: options
            }, window.parent.location.origin);
        }

        // 元素获取
        const textInput = document.getElementById('text-input');
        const totalCount = document.getElementById('total-count');
        const clearBtn = document.getElementById('clear-btn');
        const copyBtn = document.getElementById('copy-btn');
        const urlInput = document.getElementById('url-input');
        const fetchBtn = document.getElementById('fetch-btn');

        // 统计函数
        function countCharacters() {
            const text = textInput.value;
            const length = text.length;
            totalCount.textContent = length;
        }

        // 清空按钮点击事件
        clearBtn.addEventListener('click', function() {
            textInput.value = '';
            urlInput.value = '';
            countCharacters();
        });

        // 复制按钮点击事件
        copyBtn.addEventListener('click', function() {
            textInput.select();
            document.execCommand('copy');

            // 显示复制成功效果
            const originalText = copyBtn.textContent;
            copyBtn.textContent = '已复制';
            copyBtn.style.background = '#52c41a';

            setTimeout(() => {
                copyBtn.textContent = originalText;
                copyBtn.style.background = '#3498db';
            }, 1000);
        });

        // 获取内容按钮点击事件
        fetchBtn.addEventListener('click', function() {
            const url = urlInput.value.trim();
            if (!url) {
                alert('请输入文章URL');
                return;
            }

            // 显示加载状态
            fetchBtn.textContent = '加载中...';
            fetchBtn.disabled = true;

            // 获取URL内容
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.text();
                })
                .then(html => {
                    // 从HTML中提取正文内容
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');

                    // 尝试不同的选择器获取正文
                    let content = '';
                    const selectors = ['article', '.post-content', '.content', '.article-content', '#content'];

                    for (const selector of selectors) {
                        const element = doc.querySelector(selector);
                        if (element) {
                            content = element.textContent || element.innerText;
                            break;
                        }
                    }

                    // 如果没有找到特定的正文元素，尝试获取<body>内容
                    if (!content) {
                        const body = doc.querySelector('body');
                        if (body) {
                            content = body.textContent || body.innerText;
                        }
                    }

                    // 清理内容并显示
                    textInput.value = content.trim();
                    countCharacters();
                })
                .catch(error => {
                    alert('获取内容失败：' + error.message);
                })
                .finally(() => {
                    // 恢复按钮状态
                    fetchBtn.textContent = '获取内容';
                    fetchBtn.disabled = false;
                });
        });

        // 绑定事件
        textInput.addEventListener('input', countCharacters);
        textInput.addEventListener('change', countCharacters);

        // 初始化统计
        countCharacters();
    })();
</script>