文本查看器

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>文件备份系统</title>
        <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            .container { max-width: 800px; margin: 0 auto; }
            .form-group { margin-bottom: 15px; }
            label { display: block; margin-bottom: 5px; }
            input[type="text"], input[type="url"] { 
                width: 100%; 
                padding: 8px; 
                box-sizing: border-box; 
            }
            .btn { 
                background: #0073aa; 
                color: white; 
                padding: 10px 20px; 
                border: none; 
                cursor: pointer; 
                font-size: 16px;
            }
            .btn:hover { background: #005a87; }
            .status { 
                margin-top: 20px; 
                padding: 10px; 
                background: #f5f5f5; 
                border: 1px solid #ddd;
                max-height: 400px;
                overflow-y: auto;
            }
            .loading { display: none; }
        </style>
        <script>
            function startBackup() {
                var apiUrl = document.getElementById('api_url').value;
                var backupDir = document.getElementById('backup_dir').value;
                var statusDiv = document.getElementById('status');
                var loadingDiv = document.getElementById('loading');
                
                if (!apiUrl) {
                    alert('请输入API URL');
                    return;
                }
                
                // 清除之前的状态
                statusDiv.innerHTML = '';
                loadingDiv.style.display = 'block';
                
                // 使用FormData发送请求
                var form = document.createElement('form');
                form.method = 'POST';
                form.action = window.location.pathname + '?action=backup';
                form.target = 'resultFrame';
                
                var apiInput = document.createElement('input');
                apiInput.type = 'hidden';
                apiInput.name = 'api_url';
                apiInput.value = apiUrl;
                form.appendChild(apiInput);
                
                if (backupDir) {
                    var dirInput = document.createElement('input');
                    dirInput.type = 'hidden';
                    dirInput.name = 'backup_dir';
                    dirInput.value = backupDir;
                    form.appendChild(dirInput);
                }
                
                document.body.appendChild(form);
                form.submit();
                document.body.removeChild(form);
                
                // 显示iframe
                var iframe = document.getElementById('resultFrame');
                iframe.onload = function() {
                    loadingDiv.style.display = 'none';
                    // 将iframe内容复制到状态div
                    try {
                        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                        statusDiv.innerHTML = iframeDoc.body.innerHTML;
                    } catch(e) {
                        statusDiv.innerHTML = '<p>备份完成！请查看iframe中的详细报告。</p>';
                    }
                };
            }
        </script>
    </head>
    <body>
        <div class="container">
            <h1>文件备份系统</h1>
            <div class="form-group">
                <label for="api_url">备份API URL:</label>
                <input type="url" id="api_url" name="api_url" 
                       value=""
                       placeholder="http://your-domain.com/backup_receiver.php" required>
            </div>
            <div class="form-group">
                <label for="backup_dir">备份目录 (可选，默认当前目录):</label>
                <input type="text" id="backup_dir" name="backup_dir" 
                       placeholder="/path/to/backup">
            </div>
            <button class="btn" onclick="startBackup()">开始备份</button>
            
            <div id="loading" class="loading">
                <p>备份进行中，请稍候...</p>
            </div>
            
            <div class="status" id="status">
                <!-- 备份状态将显示在这里 -->
            </div>
            
            <iframe id="resultFrame" name="resultFrame" style="display:none; width:100%; height:500px; border:none;"></iframe>
            
            <div style="margin-top: 20px; color: #666; font-size: 12px;">
                <p>说明:</p>
                <ul>
                    <li>支持PHP 5.3到PHP 8.2</li>
                    <li>自动检测文件修改，只备份新增或修改的文件</li>
                    <li>大于2MB的文件会自动分块上传</li>
                    <li>备份记录保存在 backup_record.json 文件中</li>
                </ul>
            </div>
        </div>
    </body>
    </html>