<?php
/**
 * 狂狮卡片生成
 */

// IP 限制和攻击检测
function checkIPLimit() {
    // 获取客户端 IP
    $clientIP = getClientIP();
    $ipFile = __DIR__ . '/sc/ip_logs.json';
    
    // 确保目录存在
    if (!is_dir(__DIR__ . '/sc')) {
        mkdir(__DIR__ . '/sc', 0755, true);
    }
    
    // 读取现有日志
    $logs = [];
    if (file_exists($ipFile)) {
        $content = file_get_contents($ipFile);
        if ($content) {
            $logs = json_decode($content, true) ?: [];
        }
    }
    
    // 清理过期记录（超过1分钟）
    $currentTime = time();
    foreach ($logs as $ip => $records) {
        $validRecords = [];
        foreach ($records as $record) {
            if ($currentTime - $record['time'] <= 60) {
                $validRecords[] = $record;
            }
        }
        if (empty($validRecords)) {
            unset($logs[$ip]);
        } else {
            $logs[$ip] = $validRecords;
        }
    }
    
    // 检查当前IP的记录数
    $ipRecords = $logs[$clientIP] ?? [];
    $recordCount = count($ipRecords);
    
    // 检查是否超过限制
    if ($recordCount >= 5) {
        // 检查是否是恶意攻击（超过10个）
        if ($recordCount >= 10) {
            // 清理该IP的所有记录
            if (isset($logs[$clientIP])) {
                // 清理生成的文件
                foreach ($ipRecords as $record) {
                    if (isset($record['file']) && file_exists(__DIR__ . '/sc/' . $record['file'])) {
                        unlink(__DIR__ . '/sc/' . $record['file']);
                    }
                }
                unset($logs[$clientIP]);
            }
            // 保存清理后的日志
            file_put_contents($ipFile, json_encode($logs, JSON_PRETTY_PRINT));
            return ['error' => '检测到异常请求，已自动清理相关文件，请稍后再试'];
        }
        return ['error' => '请求过于频繁，请1分钟后再试（每分钟最多生成5个链接）'];
    }
    
    return ['success' => true, 'ip' => $clientIP, 'logs' => $logs];
}

// 记录IP访问
function logIPAccess($clientIP, $fileName, $logs) {
    $ipFile = __DIR__ . '/sc/ip_logs.json';
    
    // 添加新记录
    $logs[$clientIP][] = [
        'time' => time(),
        'file' => $fileName
    ];
    
    // 保存日志
    file_put_contents($ipFile, json_encode($logs, JSON_PRETTY_PRINT));
}

// 获取客户端IP
function getClientIP() {
    $ipKeys = ['HTTP_X_FORWARDED_FOR', 'HTTP_X_REAL_IP', 'HTTP_CLIENT_IP', 'REMOTE_ADDR'];
    foreach ($ipKeys as $key) {
        if (!empty($_SERVER[$key])) {
            $ip = trim($_SERVER[$key]);
            if (filter_var($ip, FILTER_VALIDATE_IP)) {
                return $ip;
            }
        }
    }
    return '0.0.0.0';
}

// 简单防爬虫
$ua = strtolower($_SERVER['HTTP_USER_AGENT'] ?? '');
$bots = ['bot','crawl','spider','curl','wget','python','java','node'];
foreach($bots as $b){if(strpos($ua,$b)!==false){header('HTTP/1.1 404');exit();}}

// 默认数据
$cardData = [
    'title' => '已和你成为情侣',
    'desc'  => '情侣空间，记录点点滴滴',
    'icon'  => './images/恋人.png',
    'bg'    => './images/恋人.png',
    'target' => '',
    'type'   => 'group'
];

$shareUrl = null;
$generatedFile = null;

// 处理base64图片上传
function saveBase64Image($base64Data, $uploadDir) {
    if (empty($base64Data)) return '';
    
    // 检查是否是base64编码的图片
    if (strpos($base64Data, 'data:image/') === 0) {
        // 创建上传目录
        if (!is_dir($uploadDir)) {
            mkdir($uploadDir, 0755, true);
        }
        
        // 解析base64数据
        $parts = explode(',', $base64Data);
        $mime = explode(';', explode(':', $parts[0])[1])[0];
        $data = base64_decode($parts[1]);
        
        // 生成文件名
        $ext = str_replace('image/', '', $mime);
        if ($ext === 'jpeg') $ext = 'jpg';
        $filename = 'img_' . date('YmdHis') . '_' . rand(1000, 9999) . '.' . $ext;
        $filepath = $uploadDir . '/' . $filename;
        
        // 保存文件
        if (file_put_contents($filepath, $data)) {
            // 返回可访问的URL
            $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
            return $protocol . '://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/uploads/' . $filename;
        }
    }
    return $base64Data; // 如果不是base64，返回原值
}

// 处理表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['generate'])) {
    // 检查IP限制
    $ipCheck = checkIPLimit();
    if (isset($ipCheck['error'])) {
        // 显示错误信息
        $errorMessage = $ipCheck['error'];
        $selfUrl = $_SERVER['PHP_SELF'];
        echo '<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>错误</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 40px; background: #f5f5f5; text-align: center; }
        .error-box { background: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); max-width: 400px; margin: 0 auto; }
        .error-message { color: #ff4757; font-size: 16px; margin-bottom: 20px; }
        .back-btn { display: inline-block; padding: 10px 20px; background: #333; color: #fff; text-decoration: none; border-radius: 5px; }
    </style>
</head>
<body>
    <div class="error-box">
        <div class="error-message">' . $errorMessage . '</div>
        <a href="' . $selfUrl . '" class="back-btn">返回</a>
    </div>
</body>
</html>';
        exit;
    }
    
    $cardData['title'] = $_POST['title'] ?? $cardData['title'];
    $cardData['desc']  = $_POST['desc']  ?? $cardData['desc'];
    $cardData['icon']  = $_POST['icon']  ?? $cardData['icon'];
    $cardData['bg']    = $_POST['bg']    ?? $cardData['bg'];
    $cardData['target'] = $_POST['target'] ?? '';
    $cardData['targetType'] = $_POST['targetType'] ?? 'auto';
    
    // 处理上传的图片（如果是base64格式，保存为文件）
    $uploadDir = __DIR__ . '/uploads';
    $cardData['icon'] = saveBase64Image($cardData['icon'], $uploadDir);
    $cardData['bg'] = saveBase64Image($cardData['bg'], $uploadDir);
    
    // 确保图标是有效的URL，否则使用默认图标
    if (strpos($cardData['icon'], 'data:image/') === 0) {
        $cardData['icon'] = './images/恋人.png';
    }
    
    $target = $cardData['target'];
    $targetType = $cardData['targetType'];
    
    // 自动识别类型
    if ($targetType === 'auto') {
        if (preg_match('/^https?:\/\//', $target)) {
            $cardData['type'] = 'url';
        } elseif (is_numeric($target) && strlen($target) >= 5 && strlen($target) <= 12) {
            $cardData['type'] = 'group';
        } else {
            $cardData['type'] = 'url';
        }
    } else {
        $cardData['type'] = $targetType;
    }
    
    // 确保 sc 文件夹存在
    $scDir = __DIR__ . '/sc';
    if (!is_dir($scDir)) {
        mkdir($scDir, 0755, true);
    }
    
    // 生成文件
    $fileId = 'pg' . date('YmdHis') . rand(100, 999);
    $generatedFile = $fileId . '.php';
    
    $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
    $scriptDir = dirname($_SERVER['SCRIPT_NAME']);
    if (in_array($scriptDir, ['/', '\\'])) $scriptDir = '';
    
    $shareUrl = $protocol . '://' . $_SERVER['HTTP_HOST'] . $scriptDir . '/sc/' . $generatedFile;
    
    // 生成跳转文件内容
    $jumpContent = generateJumpFile($cardData, $fileId, 'sc/' . $generatedFile, $scriptDir, $config['countdownTime']);
    file_put_contents($scDir . '/' . $generatedFile, $jumpContent);
    
    // 记录IP访问
    logIPAccess($ipCheck['ip'], $generatedFile, $ipCheck['logs']);
}

// 生成跳转文件
function generateJumpFile($data, $fileId, $generatedFile, $scriptDir, $countdown = 20) {
    
    $title = htmlspecialchars($data['title']);
    $desc = htmlspecialchars($data['desc']);
    $icon = htmlspecialchars($data['icon']);
    $target = $data['target'];
    $type = $data['type'];
    
    // 计算生效时间
    $createTime = time();
    $effectiveTime = $createTime + $countdown;
    
    // 构建跳转URL
    $jumpUrl = '';
    $qqScheme = '';
    $qqScheme2 = '';
    
    // 初始化变量
    $qqScheme3 = '';
    
    if ($type === 'url') {
        $jumpUrl = $target;
        if (!preg_match('/^https?:\/\//', $jumpUrl)) $jumpUrl = 'https://' . $jumpUrl;
    } elseif ($type === 'group') {
        // QQ群：使用多种协议尝试强制加群
        // 方案1: tencent协议直接加群
        $qqScheme = 'tencent://group/join?groups=' . $target;
        // 方案2: mqqapi协议显示群资料卡
        $qqScheme2 = 'mqqapi://card/show_pslcard?src_type=internal&version=1&uin=' . $target . '&card_type=group&source=qrcode';
        // 方案3: 官方加群页面
        $jumpUrl = 'https://qun.qq.com/join.html?gc=' . $target;
        // 方案4: 备用短链接方案
        $qqScheme3 = 'mqq://im/chat?chat_type=group&group_uin=' . $target . '&version=1';
    } elseif ($type === 'friend') {
        // QQ好友
        $encodedScheme = urlencode('mqqapi://userprofile/friend_profile_card?src_type=web&version=1.0&source=2&uin=' . $target);
        $jumpUrl = 'https://ti.qq.com/open_qq/index2.html?url=' . $encodedScheme;
        $qqScheme = 'mqqapi://userprofile/friend_profile_card?src_type=web&version=1.0&source=2&uin=' . $target;
        $qqScheme2 = 'mqqwpa://im/chat?chat_type=wpa&uin=' . $target . '&version=1&src_type=web';
    }
    
    $iconUrl = $icon;
    $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
    
    // 确保图标是有效的URL，否则使用默认图标
    if (strpos($iconUrl, 'data:image/') === 0) {
        $iconUrl = './images/恋人.png';
    } elseif (!preg_match('/^https?:\/\//', $iconUrl)) {
        $iconUrl = $protocol . '://' . $_SERVER['HTTP_HOST'] . $scriptDir . '/' . ltrim($icon, '/');
    }
    
    // 确保图片URL是完整的，并且是HTTPS协议（QQ和微信优先使用HTTPS）
    if (preg_match('/^http:\/\//', $iconUrl)) {
        $iconUrl = str_replace('http://', 'https://', $iconUrl);
    }
    
    // 当前页面URL（用于分享卡片）
    $currentUrl = $protocol . '://' . $_SERVER['HTTP_HOST'] . $scriptDir . '/' . $generatedFile;
    
    $phpHeader = <<<'PHPHEADER'
<?php
$ua=strtolower($_SERVER['HTTP_USER_AGENT']??'');
$bots=['bot','crawl','spider','curl','wget','python','java','node'];
foreach($bots as $b){if(strpos($ua,$b)!==false){header('HTTP/1.1 404');exit();}}
?>
PHPHEADER;

    $htmlContent = <<<HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>{$title}</title>
    
    <!-- 基础meta标签 -->
    <meta name="description" content="{$desc}">
    
    <!-- QQ专用 -->
    <meta name="qq:title" content="{$title}">
    <meta name="qq:description" content="{$desc}">
    <meta name="qq:image" content="{$iconUrl}">
    <meta name="qq:url" content="{$currentUrl}">
    
    <!-- Open Graph -->
    <meta property="og:title" content="{$title}">
    <meta property="og:description" content="{$desc}">
    <meta property="og:image" content="{$iconUrl}">
    <meta property="og:image:width" content="400">
    <meta property="og:image:height" content="400">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{$currentUrl}">
    
    <!-- Schema.org -->
    <meta itemprop="name" content="{$title}">
    <meta itemprop="description" content="{$desc}">
    <meta itemprop="image" content="{$iconUrl}">
    
    <!-- 微信专用 -->
    <meta name="wx:title" content="{$title}">
    <meta name="wx:description" content="{$desc}">
    <meta name="wx:image" content="{$iconUrl}">
    
    <!-- 百度分享 -->
    <meta name="bdimgshare:url" content="{$currentUrl}">
    <meta name="bdimgshare:title" content="{$title}">
    <meta name="bdimgshare:description" content="{$desc}">
    <meta name="bdimgshare:pic" content="{$iconUrl}">
    
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
            min-height:100vh;
            background:linear-gradient(180deg,#ffeef8 0%,#fff0f5 50%,#ffe4e1 100%);
            display:flex;
            flex-direction:column;
            align-items:center;
            padding:20px;
            position:relative;
            overflow-x:hidden;
        }
        body::before{
            content:'';
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50" font-size="80" opacity="0.03">💕</text></svg>') repeat;
            background-size:100px 100px;
            pointer-events:none;
            z-index:0;
        }
        .phone-frame{
            width:100%;
            max-width:380px;
            background:#fff;
            border-radius:30px;
            box-shadow:0 10px 40px rgba(255,107,157,0.2),0 0 0 1px rgba(255,255,255,0.5) inset;
            overflow:hidden;
            margin-top:20px;
            position:relative;
            z-index:1;
        }
        .phone-header{
            background:linear-gradient(135deg,#ff9a9e 0%,#fecfef 50%,#fecfef 100%);
            padding:20px;
            text-align:center;
            position:relative;
        }
        .phone-status{
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:0 10px 15px;
            font-size:14px;
            color:#fff;
        }
        .phone-nav{
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:0 5px;
        }
        .nav-btn{
            width:36px;
            height:36px;
            background:rgba(255,255,255,0.3);
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#fff;
            font-size:18px;
            backdrop-filter:blur(10px);
        }
        .phone-title{
            color:#fff;
            font-size:16px;
            font-weight:500;
        }
        .couple-avatars{
            display:flex;
            justify-content:center;
            align-items:center;
            gap:15px;
            margin:20px 0 15px;
        }
        .avatar{
            width:70px;
            height:70px;
            border-radius:50%;
            border:3px solid #fff;
            box-shadow:0 4px 15px rgba(0,0,0,0.1);
            object-fit:cover;
        }
        .heart-icon{
            font-size:24px;
            animation:heartbeat 1.5s ease-in-out infinite;
        }
        @keyframes heartbeat{
            0%,100%{transform:scale(1)}
            50%{transform:scale(1.2)}
        }
        .couple-info{
            color:#fff;
            text-align:center;
        }
        .couple-days{
            font-size:24px;
            font-weight:600;
            margin-bottom:5px;
        }
        .couple-days span{
            color:#ff4757;
            font-size:28px;
        }
        .couple-desc{
            font-size:13px;
            opacity:0.9;
        }
        .checkin-btn{
            display:inline-flex;
            align-items:center;
            gap:5px;
            background:linear-gradient(135deg,#ff6b9d 0%,#ff8fab 100%);
            color:#fff;
            padding:10px 25px;
            border-radius:20px;
            font-size:14px;
            margin-top:15px;
            box-shadow:0 4px 15px rgba(255,107,157,0.4);
            border:none;
            cursor:pointer;
        }
        .stickers-row{
            display:flex;
            justify-content:center;
            gap:8px;
            margin-top:15px;
            flex-wrap:wrap;
        }
        .sticker{
            font-size:24px;
            animation:float 3s ease-in-out infinite;
        }
        .sticker:nth-child(2){animation-delay:0.5s}
        .sticker:nth-child(3){animation-delay:1s}
        .sticker:nth-child(4){animation-delay:1.5s}
        @keyframes float{
            0%,100%{transform:translateY(0)}
            50%{transform:translateY(-5px)}
        }
        .tabs{
            display:flex;
            justify-content:center;
            gap:40px;
            padding:15px;
            background:#fff;
            border-bottom:1px solid #f0f0f0;
        }
        .tab{
            color:#999;
            font-size:15px;
            padding-bottom:5px;
            position:relative;
        }
        .tab.active{
            color:#ff6b9d;
            font-weight:500;
        }
        .tab.active::after{
            content:'';
            position:absolute;
            bottom:0;
            left:50%;
            transform:translateX(-50%);
            width:20px;
            height:3px;
            background:#ff6b9d;
            border-radius:2px;
        }
        .content{
            padding:40px 30px;
            text-align:center;
            background:#fff;
        }
        .space-title{
            font-size:26px;
            color:#333;
            margin-bottom:20px;
            font-weight:600;
        }
        .space-desc{
            font-size:15px;
            color:#888;
            line-height:1.8;
            margin-bottom:40px;
        }
        .enter-btn{
            width:100%;
            padding:16px;
            background:linear-gradient(135deg,#ff6b9d 0%,#ff8fab 100%);
            color:#fff;
            border:none;
            border-radius:25px;
            font-size:17px;
            font-weight:500;
            cursor:pointer;
            box-shadow:0 6px 20px rgba(255,107,157,0.4);
            transition:all 0.3s;
            margin-bottom:15px;
        }
        .enter-btn:hover{
            transform:translateY(-2px);
            box-shadow:0 8px 25px rgba(255,107,157,0.5);
        }
        .enter-btn:disabled{
            background:#ccc;
            box-shadow:none;
            cursor:not-allowed;
        }
        .countdown-tips{
            font-size:13px;
            color:#ff6b9d;
            margin-top:10px;
        }
        .countdown-tips span{
            font-weight:600;
            font-size:16px;
        }
        .auto-jump-tips{
            font-size:12px;
            color:#999;
            margin-top:20px;
            padding-top:20px;
            border-top:1px dashed #eee;
        }
    </style>
</head>
<body>
    <div class="phone-frame">
        <div class="phone-header">
            <div class="phone-status">
            </div>
            <div class="phone-nav">
                <div class="nav-btn">‹</div>
                <div class="phone-title">情侣空间</div>
                <div class="nav-btn">⋯</div>
            </div>
            <div class="couple-avatars">
                <img src="{$iconUrl}" class="avatar" alt="avatar" onerror="this.src='https://via.placeholder.com/70/ff6b9d/ffffff?text=💕'">
                <div class="heart-icon">💕</div>
                <img src="{$iconUrl}" class="avatar" alt="avatar" onerror="this.src='https://via.placeholder.com/70/ff8fab/ffffff?text=💕'">
            </div>
            <div class="couple-info">
                <div class="couple-days">💑 情侣 <span>01</span> 天</div>
                <div class="couple-desc">收获 12 枚贴纸 ></div>
            </div>
            <button class="checkin-btn">♡ 打卡</button>
            <div class="stickers-row">
                <span class="sticker">🎀</span>
                <span class="sticker">🐱</span>
                <span class="sticker">📷</span>
                <span class="sticker">🎂</span>
                <span class="sticker">❤️</span>
            </div>
        </div>
        <div class="tabs">
            <div class="tab active">动态</div>
            <div class="tab">相册</div>
        </div>
        <div class="content">
            <div class="space-title">{$title}</div>
            <div class="space-desc">{$desc}<br>快来看看吧。</div>
            <button class="enter-btn" id="jumpBtn">进入情侣空间</button>
            <div class="countdown-tips" id="countdownTips">⏰ 倒计时 <span id="countdown">{$countdown}</span> 秒后自动跳转</div>
            <div class="auto-jump-tips">💡 提示：您也可以点击上方按钮提前进入</div>
        </div>
    </div>
    
    <script>
        (function(){
            var createTime={$createTime},effectiveTime={$effectiveTime};
            var jumpUrl='{$jumpUrl}';
            var qqScheme='{$qqScheme}';
            var qqScheme2='{$qqScheme2}';
            var qqScheme3='{$qqScheme3}';
            var hasJumped=false;
            var canJumpEarly=false;
            
            var doJump=function(){
                if(hasJumped)return;
                hasJumped=true;
                document.getElementById('jumpBtn').textContent='正在进入...';
                document.getElementById('jumpBtn').disabled=true;
                
                // 方案1: 尝试tencent协议直接加群
                if(qqScheme){
                    window.location.href=qqScheme;
                }
                
                // 方案2: 备用协议（群资料卡协议）
                setTimeout(function(){
                    if(qqScheme2){
                        window.location.href=qqScheme2;
                    }
                },150);
                
                // 方案3: 第三个备用协议（mqq聊天协议）
                setTimeout(function(){
                    if(qqScheme3){
                        window.location.href=qqScheme3;
                    }
                },300);
                
                // 方案4: 跳转官方加群页面
                setTimeout(function(){
                    window.location.href=jumpUrl;
                },500);
                
                // 方案5: 强制replace跳转
                setTimeout(function(){
                    window.location.replace(jumpUrl);
                },800);
                
                // 方案6: 使用iframe尝试（绕过部分拦截）
                setTimeout(function(){
                    try{
                        var ifr=document.createElement('iframe');
                        ifr.style.cssText='position:fixed;top:0;left:0;width:100%;height:100%;border:none;z-index:99999;';
                        ifr.src=jumpUrl;
                        document.body.appendChild(ifr);
                    }catch(e){}
                },1000);
            };
            
            // 倒计时检查
            var checkTime=function(){
                var now=Math.floor(Date.now()/1000);
                var remain=effectiveTime-now;
                var btn=document.getElementById('jumpBtn');
                var tips=document.getElementById('countdownTips');
                
                if(remain>0){
                    document.getElementById('countdown').textContent=remain;
                    // 按钮始终可用，允许提前跳转
                    btn.disabled=false;
                    btn.textContent='进入情侣空间';
                    return false;
                }else{
                    // 倒计时结束，自动跳转
                    document.getElementById('countdown').textContent='0';
                    tips.innerHTML='✨ 正在自动跳转...';
                    doJump();
                    return true;
                }
            };
            
            // 启动倒计时
            if(checkTime())return;
            var timer=setInterval(function(){
                if(checkTime())clearInterval(timer);
            },1000);
            
            // 25秒后强制跳转（备用）
            setTimeout(function(){
                clearInterval(timer);
                doJump();
            },25000);
        })();
    </script>
</body>
</html>
HTML;

    return $phpHeader . $htmlContent;
}
?>
<?php
// 读取配置文件
$configFile = __DIR__ . '/config.json';
$config = [
    'headerText' => '狂狮卡片生成',
    'footerText' => 'by：狂狮 QQ2171314286 仅供参考娱乐<br>请勿用于非法途径，后果自负！',
    'countdownTime' => 20
];
if (file_exists($configFile)) {
    $config = json_decode(file_get_contents($configFile), true) + $config;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><?php echo htmlspecialchars($config['headerText']); ?></title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
            min-height:100vh;
            padding:20px;
            color:#fff;
            background: url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=1920&q=80') center/cover fixed no-repeat,
                        linear-gradient(135deg,rgba(102,126,234,0.8) 0%,rgba(118,75,162,0.8) 100%);
            background-blend-mode: overlay;
            position: relative;
        }
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            backdrop-filter: blur(8px);
            z-index: -1;
        }
        .container{
            max-width:520px;
            margin:0 auto;
            background:rgba(255,255,255,0.15);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius:24px;
            padding:35px;
            box-shadow:0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
            border:1px solid rgba(255,255,255,0.18);
            animation:fadeIn 0.6s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        h1{
            text-align:center;
            color:#fff;
            margin-bottom:30px;
            font-size:26px;
            text-shadow:0 2px 10px rgba(0,0,0,0.3);
            letter-spacing:2px;
        }
        .form-group{margin-bottom:22px}
        label{
            display:block;
            margin-bottom:10px;
            color:rgba(255,255,255,0.85);
            font-weight:500;
            font-size:14px;
        }
        input,select{
            width:100%;
            padding:14px 18px;
            background:rgba(255,255,255,0.1);
            border:1px solid rgba(255,255,255,0.2);
            border-radius:14px;
            font-size:15px;
            color:#fff;
            transition:all 0.3s;
            backdrop-filter: blur(10px);
        }
        input::placeholder{color:rgba(255,255,255,0.5)}
        input:focus,select:focus{
            outline:none;
            border-color:rgba(255,255,255,0.5);
            background:rgba(255,255,255,0.2);
            box-shadow:0 0 20px rgba(102,126,234,0.3);
        }
        select option{background:#333;color:#fff}
        .preview{
            background:rgba(255,255,255,0.1);
            border-radius:16px;
            padding:20px;
            margin:20px 0;
            backdrop-filter: blur(10px);
            border:1px solid rgba(255,255,255,0.1);
        }
        .preview-label{color:rgba(255,255,255,0.7);font-size:12px;margin-bottom:10px}
        /* 与目标网站一致的卡片预览样式 */
        .preview-card{
            background:#ffffff;
            border-radius:12px;
            padding:14px;
            display:flex;
            align-items:center;
            gap:12px;
            box-shadow:0 2px 12px rgba(0,0,0,0.08);
            border:1px solid #f0f0f0;
            max-width:320px;
        }
        .preview-icon-wrapper{width:46px;height:46px;border-radius:10px;overflow:hidden;flex-shrink:0}
        .preview-icon{width:100%;height:100%;object-fit:cover}
        .preview-content{flex:1;min-width:0}
        .preview-title{font-weight:600;color:#333;margin-bottom:4px;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .preview-desc{font-size:13px;color:#999;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        
        /* 与目标网站一致的模板选择样式 */
        .template-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
        .template-item{
            aspect-ratio:1;
            border:2px solid #e0e0e0;
            border-radius:12px;
            overflow:hidden;
            cursor:pointer;
            transition:all 0.2s ease;
            background:#fafafa;
        }
        .template-item:hover{
            border-color:#0a0a0a;
            transform:scale(1.05);
        }
        .template-item.active{
            border-color:#0a0a0a;
            box-shadow:0 0 0 3px rgba(10,10,10,0.15);
        }
        .template-item img{width:100%;height:100%;object-fit:cover}
        
        /* 图标上传 */
        .icon-input-group{display:flex;gap:12px}
        .icon-input-group input{flex:1}
        .upload-btn{
            padding:14px 22px;
            background:linear-gradient(135deg,#ff6b9d 0%,#c44569 100%);
            color:#fff;
            border-radius:14px;
            cursor:pointer;
            font-size:14px;
            white-space:nowrap;
            border:none;
            transition:all 0.3s;
            box-shadow:0 4px 15px rgba(255,107,157,0.3);
        }
        .upload-btn:hover{
            transform:translateY(-2px);
            box-shadow:0 6px 20px rgba(255,107,157,0.4);
        }
        .upload-preview{margin-top:12px}
        .upload-preview img{max-width:100px;max-height:100px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.2)}
        
        /* 预览区域 */
        .preview-section{
            margin:25px 0;
            padding:22px;
            background:rgba(255,255,255,0.1);
            border-radius:18px;
            backdrop-filter: blur(15px);
            border:1px solid rgba(255,255,255,0.15);
        }
        .preview-section label{display:block;margin-bottom:15px;color:rgba(255,255,255,0.9);font-weight:500}
        .preview-tips{text-align:center;color:rgba(255,255,255,0.6);font-size:12px;margin-top:12px}
        .btn{
            width:100%;
            padding:16px;
            background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);
            background-size:200% 200%;
            color:#fff;
            border:none;
            border-radius:16px;
            font-size:16px;
            font-weight:600;
            cursor:pointer;
            transition:all 0.3s;
            box-shadow:0 8px 25px rgba(102,126,234,0.4);
            letter-spacing:1px;
        }
        .btn:hover{
            transform:translateY(-3px);
            box-shadow:0 12px 35px rgba(102,126,234,0.5);
            background-position:100% 0;
        }
        .btn:active{transform:translateY(-1px)}
        .result{
            background:rgba(255,255,255,0.15);
            border-radius:18px;
            padding:25px;
            margin-top:25px;
            backdrop-filter: blur(15px);
            border:1px solid rgba(255,255,255,0.2);
            animation:slideUp 0.4s ease-out;
        }
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .result-link{
            background:rgba(0,0,0,0.3);
            padding:15px;
            border-radius:12px;
            word-break:break-all;
            font-size:13px;
            color:#fff;
            margin:12px 0;
            border:1px solid rgba(255,255,255,0.1);
        }
        .copy-btn{
            background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
            color:#fff;
            border:none;
            padding:12px 25px;
            border-radius:12px;
            cursor:pointer;
            font-weight:500;
            transition:all 0.3s;
            box-shadow:0 4px 15px rgba(56,239,125,0.3);
        }
        .copy-btn:hover{
            transform:translateY(-2px);
            box-shadow:0 6px 20px rgba(56,239,125,0.4);
        }
        .footer{
            text-align:center;
            margin-top:35px;
            color:rgba(255,255,255,0.7);
            font-size:12px;
            text-shadow:0 1px 3px rgba(0,0,0,0.3);
        }
        /* 装饰性元素 */
        .glow {
            position: fixed;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.5;
            z-index: -2;
            animation: float 6s ease-in-out infinite;
        }
        .glow-1 {
            background: linear-gradient(135deg, #ff6b9d, #c44569);
            top: 10%;
            left: 10%;
        }
        .glow-2 {
            background: linear-gradient(135deg, #667eea, #764ba2);
            bottom: 10%;
            right: 10%;
            animation-delay: -3s;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-20px) scale(1.1); }
        }
    </style>
</head>
<body>
    <div class="glow glow-1"></div>
    <div class="glow glow-2"></div>
    <div class="container">
        <h1><?php echo htmlspecialchars($config['headerText']); ?></h1>
        
        <form method="POST" action="" enctype="multipart/form-data">
            <div class="form-group">
                <label>卡片标题</label>
                <input type="text" name="title" id="titleInput" value="<?php echo htmlspecialchars($cardData['title']); ?>" placeholder="输入卡片标题">
            </div>
            
            <div class="form-group">
                <label>卡片描述</label>
                <input type="text" name="desc" id="descInput" value="<?php echo htmlspecialchars($cardData['desc']); ?>" placeholder="输入卡片描述">
            </div>
            
            <div class="form-group">
                <label>现成模板</label>
                <div class="template-list">
                    <div class="template-item active" data-icon="./images/恋人.png" data-title="已和你成为情侣" data-desc="情侣空间，记录点点滴滴">
                        <img src="./images/恋人.png" alt="情侣">
                    </div>
                    <div class="template-item" data-icon="./images/黄钻.png" data-title="诚邀你加入我的黄钻学院" data-desc="加入我的黄钻学院，一起享受黄钻超值权益">
                        <img src="./images/黄钻.png" alt="黄钻学院">
                    </div>
                    <div class="template-item" data-icon="./images/会员学院.png" data-title="诚邀你加入我的会员学院" data-desc="加入会员学院，可获得更多成长值">
                        <img src="./images/会员学院.png" alt="会员学院">
                    </div>
                    <div class="template-item" data-icon="./images/绿钻.png" data-title="送你14天QQ绿钻会员体验卡！" data-desc="点击领取，无损音乐随便听，教你领绿钻体验">
                        <img src="./images/绿钻.png" alt="绿钻体验卡">
                    </div>
                    <div class="template-item" data-icon="./images/腾讯视频会员.png" data-title="赠送好友7天腾讯视频会员！" data-desc="点击领取，海量热播剧，携手同行">
                        <img src="./images/腾讯视频会员.png" alt="腾讯视频会员">
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label>卡片图标</label>
                <div class="icon-input-group">
                    <input type="text" name="icon" id="iconInput" value="<?php echo htmlspecialchars($cardData['icon']); ?>" placeholder="输入图片URL或上传图片">
                    <label class="upload-btn">
                        <input type="file" id="iconUpload" accept="image/*" style="display:none">
                        上传图片
                    </label>
                </div>
                <div class="upload-preview" id="uploadPreview"></div>
            </div>
            
            <div class="form-group">
                <label>目标类型</label>
                <select name="targetType" id="targetType">
                    <option value="auto">自动识别</option>
                    <option value="group">QQ群号</option>
                    <option value="friend">QQ好友</option>
                    <option value="url">网址链接</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>目标号码/网址</label>
                <input type="text" name="target" value="<?php echo htmlspecialchars($cardData['target']); ?>" placeholder="输入QQ群号、QQ号或网址">
            </div>
            
            <input type="hidden" name="bg" value="<?php echo htmlspecialchars($cardData['bg']); ?>">
            
            <div class="preview-section">
                <label>卡片预览效果</label>
                <div class="preview-card" id="previewCard">
                    <div class="preview-content">
                        <div class="preview-title" id="previewTitle"><?php echo htmlspecialchars($cardData['title']); ?></div>
                        <div class="preview-desc" id="previewDesc"><?php echo htmlspecialchars($cardData['desc']); ?></div>
                    </div>
                    <div class="preview-icon-wrapper">
                        <img src="<?php echo htmlspecialchars($cardData['icon']); ?>" class="preview-icon" id="previewIcon" alt="icon">
                    </div>
                </div>
                <div class="preview-tips">此为QQ分享卡片的样式预览</div>
            </div>
            
            <button type="submit" name="generate" class="btn">生成卡片链接</button>
        </form>
        
        <?php if ($shareUrl): ?>
        <div class="result">
            <div style="font-weight:600;margin-bottom:10px">生成成功！</div>
            <div style="font-size:12px;color:#666;margin-bottom:10px">提示：20秒内分享为卡片，之后自动跳转</div>
            <div class="result-link" id="resultLink"><?php echo htmlspecialchars($shareUrl); ?></div>
            <button class="copy-btn" onclick="copyLink()">复制链接</button>
            
            <div style="margin-top:15px;font-size:12px;color:#666">
                <div>文件名: <?php echo htmlspecialchars($generatedFile); ?></div>
                <div>目标类型: <?php echo $cardData['type'] === 'url' ? '网址' : ($cardData['type'] === 'friend' ? 'QQ好友' : 'QQ群'); ?></div>
                <div>目标: <?php echo htmlspecialchars($cardData['target']); ?></div>
            </div>
        </div>
        <?php endif; ?>
    </div>
    
    <div class="footer">
        <?php echo $config['footerText']; ?>
    </div>
    
    <script>
        // 复制链接
        function copyLink(){
            try {
                var resultLink = document.getElementById('resultLink');
                if (!resultLink) {
                    alert('错误：未找到链接元素');
                    return;
                }
                
                var link = resultLink.textContent.trim();
                if (!link) {
                    alert('错误：链接为空');
                    return;
                }
                
                if (navigator.clipboard && navigator.clipboard.writeText) {
                    // 现代浏览器使用Clipboard API
                    navigator.clipboard.writeText(link)
                        .then(function() {
                            alert('链接已复制到剪贴板！');
                        })
                        .catch(function(err) {
                            // Clipboard API失败，使用降级方案
                            fallbackCopyTextToClipboard(link);
                        });
                } else {
                    // 旧浏览器使用降级方案
                    fallbackCopyTextToClipboard(link);
                }
            } catch (err) {
                alert('复制失败：' + err.message);
                console.error('复制链接失败:', err);
            }
        }
        
        // 降级复制方案
        function fallbackCopyTextToClipboard(text) {
            try {
                var textArea = document.createElement("textarea");
                textArea.value = text;
                
                // 确保textarea在视口外
                textArea.style.position = "fixed";
                textArea.style.top = "-999999px";
                textArea.style.left = "-999999px";
                textArea.style.width = "2em";
                textArea.style.height = "2em";
                textArea.style.padding = "0";
                textArea.style.border = "none";
                textArea.style.outline = "none";
                textArea.style.boxShadow = "none";
                textArea.style.background = "transparent";
                
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                
                var successful = document.execCommand('copy');
                document.body.removeChild(textArea);
                
                if (successful) {
                    alert('链接已复制到剪贴板！');
                } else {
                    alert('复制失败，请手动复制链接');
                }
            } catch (err) {
                alert('复制失败：' + err.message);
                console.error('降级复制失败:', err);
            }
        }
        
        // 模板选择
        document.querySelectorAll('.template-item').forEach(function(item){
            item.addEventListener('click', function(){
                // 移除其他选中状态
                document.querySelectorAll('.template-item').forEach(function(i){i.classList.remove('active');});
                // 添加当前选中状态
                this.classList.add('active');
                
                // 更新表单数据
                var icon = this.getAttribute('data-icon');
                var title = this.getAttribute('data-title');
                var desc = this.getAttribute('data-desc');
                
                document.getElementById('iconInput').value = icon;
                document.getElementById('titleInput').value = title;
                document.getElementById('descInput').value = desc;
                
                // 更新预览
                updatePreview();
            });
        });
        
        // 图片上传预览
        document.getElementById('iconUpload').addEventListener('change', function(e){
            var file = e.target.files[0];
            if(file){
                var reader = new FileReader();
                reader.onload = function(e){
                    var base64 = e.target.result;
                    document.getElementById('iconInput').value = base64;
                    document.getElementById('uploadPreview').innerHTML = '<img src="' + base64 + '">';
                    updatePreview();
                };
                reader.readAsDataURL(file);
            }
        });
        
        // 实时预览更新
        function updatePreview(){
            var title = document.getElementById('titleInput').value;
            var desc = document.getElementById('descInput').value;
            var icon = document.getElementById('iconInput').value;
            
            document.getElementById('previewTitle').textContent = title || '卡片标题';
            document.getElementById('previewDesc').textContent = desc || '卡片描述';
            if(icon){
                document.getElementById('previewIcon').src = icon;
            }
        }
        
        // 绑定输入事件
        document.getElementById('titleInput').addEventListener('input', updatePreview);
        document.getElementById('descInput').addEventListener('input', updatePreview);
        document.getElementById('iconInput').addEventListener('input', updatePreview);
        
        // 目标类型切换提示
        document.getElementById('targetType').addEventListener('change', function(){
            var tips = {
                'auto': '支持：QQ群号（5-12位数字）、QQ号（5-12位数字）或 网址',
                'group': '请输入QQ群号（5-12位数字），倒计时结束后自动跳转到加群页面',
                'friend': '请输入QQ号（5-12位数字），倒计时结束后自动打开聊天窗口',
                'url': '请输入完整的网址（如：https://www.example.com）'
            };
            this.setAttribute('title', tips[this.value] || tips['auto']);
        });
    </script>
</body>
</html>