static/script.js

document.addEventListener('DOMContentLoaded', function() {
    const convertForm = document.getElementById('convertForm');
    const resultCard = document.getElementById('resultCard');
    const convertResult = document.getElementById('convertResult');
    const copyBtn = document.getElementById('copyBtn');
    const toast = document.getElementById('toast');
    
    // 表单提交事件
    convertForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取表单数据
        const formData = new FormData(convertForm);
        
        // 显示加载提示
        showToast('正在处理，请稍候...', 'info');
        
        // 禁用提交按钮，显示加载状态
        const submitBtn = this.querySelector('.btn-convert');
        const originalBtnText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';
        submitBtn.disabled = true;
        
        // 发送 AJAX 请求
        fetch('/convert', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            // 恢复按钮状态
            submitBtn.innerHTML = originalBtnText;
            submitBtn.disabled = false;
            
            if (data.status === 'success') {
                // 显示结果
                convertResult.value = data.result;
                resultCard.style.display = 'block';
                
                // 滚动到结果区域
                resultCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
                
                // 高亮显示结果区域
                resultCard.classList.add('highlight');
                setTimeout(() => {
                    resultCard.classList.remove('highlight');
                }, 1000);
                
                showToast('转换成功！', 'success');
            } else {
                showToast('错误: ' + data.message, 'error');
            }
        })
        .catch(error => {
            // 恢复按钮状态
            submitBtn.innerHTML = originalBtnText;
            submitBtn.disabled = false;
            
            showToast('请求失败: ' + error, 'error');
        });
    });
    
    // 复制按钮事件
    copyBtn.addEventListener('click', function() {
        // 选中文本
        convertResult.select();
        
        // 尝试复制文本
        try {
            const successful = document.execCommand('copy');
            if (successful) {
                showToast('已复制到剪贴板', 'success');
                
                // 添加按钮反馈
                this.innerHTML = '<i class="fas fa-check"></i> 已复制';
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-copy"></i> 复制';
                }, 2000);
            } else {
                showToast('复制失败，请手动复制', 'error');
            }
        } catch (err) {
            showToast('复制失败: ' + err, 'error');
        }
        
        // 取消选择状态
        window.getSelection().removeAllRanges();
    });
    
    // 显示提示消息
    function showToast(message, type = 'info') {
        // 设置图标
        let icon = '';
        if (type === 'success') icon = '<i class="fas fa-check-circle"></i> ';
        else if (type === 'error') icon = '<i class="fas fa-exclamation-circle"></i> ';
        else if (type === 'info') icon = '<i class="fas fa-info-circle"></i> ';
        
        // 设置内容
        toast.innerHTML = icon + message;
        
        // 添加类型样式
        toast.className = 'toast show ' + type;
        
        // 3秒后隐藏
        clearTimeout(toast.timerId);
        toast.timerId = setTimeout(function() {
            toast.className = 'toast';
        }, 3000);
    }
    
    // 输入框聚焦效果
    const inputs = document.querySelectorAll('input, textarea, select');
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.classList.add('focused');
        });
        
        input.addEventListener('blur', function() {
            this.parentElement.classList.remove('focused');
        });
    });
    
    // 添加表单验证动画效果
    convertForm.addEventListener('invalid', function(e) {
        // 防止显示默认的表单验证泡泡
        e.preventDefault();
        
        // 获取无效的输入元素
        const invalidInput = e.target;
        
        // 添加抖动效果
        invalidInput.classList.add('shake');
        setTimeout(() => {
            invalidInput.classList.remove('shake');
        }, 500);
        
        // 显示自定义错误提示
        showToast('请填写所有必填字段', 'error');
    }, true);
    
    // 为订阅链接输入框添加粘贴增强功能
    const originalUrlField = document.getElementById('original_url');
    originalUrlField.addEventListener('paste', function(e) {
        // 获取剪贴板文本
        let pasteData = e.clipboardData.getData('text');
        // 自动清理文本（移除多余空格、换行符等）
        pasteData = pasteData.trim();
        
        // 自动检测是否为完整的URL
        if (!/^https?:\/\//.test(pasteData) && pasteData.length > 0) {
            e.preventDefault(); // 阻止默认粘贴行为
            
            // 尝试自动修复（假设这可能是一个不完整的URL）
            if (pasteData.includes('://')) {
                // 提取URL部分
                const urlMatch = pasteData.match(/[a-z]+:\/\/[^\s]+/i);
                if (urlMatch) {
                    pasteData = urlMatch[0];
                }
            }
            
            // 插入经过处理的文本
            this.value = pasteData;
            
            // 如果完全无法识别为URL，则显示提示
            if (!/^[a-z]+:\/\//i.test(pasteData)) {
                showToast('您粘贴的内容不是标准的URL格式，请检查', 'info');
            }
        }
    });
    
    // 添加简单的暗黑/明亮模式切换（如果需要）
    if (document.getElementById('themeToggle')) {
        document.getElementById('themeToggle').addEventListener('click', function() {
            document.body.classList.toggle('light-mode');
            const isDark = !document.body.classList.contains('light-mode');
            this.innerHTML = isDark ? 
                '<i class="fas fa-sun"></i>' : 
                '<i class="fas fa-moon"></i>';
        });
    }
});