|
|
@@ -1,2967 +0,0 @@
|
|
|
-<script setup>
|
|
|
-import { ref, onMounted, onUnmounted } from 'vue';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-import FloatingAds from '../components/FloatingAds.vue';
|
|
|
-import FakeDownload from '../components/FakeDownload.vue';
|
|
|
-import FakeNotifications from '../components/FakeNotifications.vue';
|
|
|
-
|
|
|
-const router = useRouter();
|
|
|
-
|
|
|
-// 恶搞状态管理
|
|
|
-const adPopups = ref([]);
|
|
|
-const popupCount = ref(0);
|
|
|
-const showMainAd = ref(false);
|
|
|
-const showOverlayAd = ref(false);
|
|
|
-const showFloatingAds = ref(false);
|
|
|
-const showFakeDownload = ref(false);
|
|
|
-const showNotifications = ref(false);
|
|
|
-const showVibrationAd = ref(false);
|
|
|
-const showFakeVirus = ref(false);
|
|
|
-const showFakeUpdate = ref(false);
|
|
|
-const isMouseTrapped = ref(false);
|
|
|
-const preventClose = ref(false);
|
|
|
-const audioContext = ref(null);
|
|
|
-const showLeaveDialog = ref(false); // 自定义离开确认对话框
|
|
|
-const showCustomNotification = ref(false); // 自定义通知
|
|
|
-const customNotificationMessage = ref(''); // 通知消息
|
|
|
-const showPrankDialog = ref(false); // 恶搞对话框
|
|
|
-const prankDialogContent = ref(''); // 恶搞对话框内容
|
|
|
-
|
|
|
-// 新增超级恶心功能状态
|
|
|
-const isUltraAnnoyingMode = ref(false); // 超级恶心模式
|
|
|
-const fakeCloseButtons = ref([]); // 假关闭按钮数组
|
|
|
-const movingElements = ref(false); // 移动界面元素
|
|
|
-const invertedControls = ref(false); // 反向控制
|
|
|
-const fakeLoadingScreen = ref(false); // 假加载界面
|
|
|
-const screenShake = ref(false); // 屏幕震动
|
|
|
-const rapidColorChange = ref(false); // 快速变色
|
|
|
-const annoyanceLevel = ref(1); // 恶心等级
|
|
|
-const popupBombingActive = ref(false); // 弹窗轰炸激活状态
|
|
|
-
|
|
|
-// 增强版恼人广告文本
|
|
|
-const ultraAnnoyingTexts = [
|
|
|
- "🎪 恭喜！您已被永久绑定到广告宇宙！",
|
|
|
- "🔄 正在安装999999个广告插件...",
|
|
|
- "🎭 您的浏览器已被广告占领！",
|
|
|
- "🚀 正在传送您到广告天堂...",
|
|
|
- "🎨 您的屏幕已被广告病毒感染！",
|
|
|
- "🎵 正在播放24小时不间断广告音乐...",
|
|
|
- "🎪 您已成为永恒广告体验的志愿者！",
|
|
|
- "🔮 广告系统正在读取您的购物欲望...",
|
|
|
- "🎯 恭喜！您已被广告永久锁定！",
|
|
|
- "🌟 您获得了终生广告观看资格！"
|
|
|
-];
|
|
|
-
|
|
|
-// 恶搞音效生成器
|
|
|
-const createAnnoyingSound = () => {
|
|
|
- if (!audioContext.value) {
|
|
|
- audioContext.value = new (window.AudioContext || window.webkitAudioContext)();
|
|
|
- }
|
|
|
-
|
|
|
- const oscillator = audioContext.value.createOscillator();
|
|
|
- const gainNode = audioContext.value.createGain();
|
|
|
-
|
|
|
- oscillator.connect(gainNode);
|
|
|
- gainNode.connect(audioContext.value.destination);
|
|
|
-
|
|
|
- // 制造恼人的蜂鸣声
|
|
|
- oscillator.frequency.setValueAtTime(800, audioContext.value.currentTime);
|
|
|
- oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.value.currentTime + 0.1);
|
|
|
-
|
|
|
- gainNode.gain.setValueAtTime(0.3, audioContext.value.currentTime);
|
|
|
- gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.value.currentTime + 0.1);
|
|
|
-
|
|
|
- oscillator.start();
|
|
|
- oscillator.stop(audioContext.value.currentTime + 0.1);
|
|
|
-};
|
|
|
-
|
|
|
-// 创建恼人弹窗音效
|
|
|
-const createPopupSound = () => {
|
|
|
- if (!audioContext.value) {
|
|
|
- audioContext.value = new (window.AudioContext || window.webkitAudioContext)();
|
|
|
- }
|
|
|
-
|
|
|
- const oscillator = audioContext.value.createOscillator();
|
|
|
- const gainNode = audioContext.value.createGain();
|
|
|
-
|
|
|
- oscillator.connect(gainNode);
|
|
|
- gainNode.connect(audioContext.value.destination);
|
|
|
-
|
|
|
- oscillator.frequency.setValueAtTime(1000, audioContext.value.currentTime);
|
|
|
- gainNode.gain.setValueAtTime(0.2, audioContext.value.currentTime);
|
|
|
- gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.value.currentTime + 0.05);
|
|
|
-
|
|
|
- oscillator.start();
|
|
|
- oscillator.stop(audioContext.value.currentTime + 0.05);
|
|
|
-};
|
|
|
-
|
|
|
-// 自定义通知函数 - 替代alert
|
|
|
-const showCustomNotificationFn = (message) => {
|
|
|
- customNotificationMessage.value = message;
|
|
|
- showCustomNotification.value = true;
|
|
|
- createAnnoyingSound();
|
|
|
-
|
|
|
- // 3秒后自动关闭通知
|
|
|
- setTimeout(() => {
|
|
|
- showCustomNotification.value = false;
|
|
|
- }, 3000);
|
|
|
-};
|
|
|
-
|
|
|
-// 自定义恶搞对话框 - 替代confirm
|
|
|
-const showPrankDialogFn = (content, callback = null) => {
|
|
|
- prankDialogContent.value = content;
|
|
|
- showPrankDialog.value = true;
|
|
|
- createAnnoyingSound();
|
|
|
-
|
|
|
- // 如果有回调函数，保存起来
|
|
|
- if (callback) {
|
|
|
- window.tempPrankCallback = callback;
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 关闭恶搞对话框
|
|
|
-const closePrankDialog = (choice = false) => {
|
|
|
- showPrankDialog.value = false;
|
|
|
-
|
|
|
- // 如果有回调函数，执行它
|
|
|
- if (window.tempPrankCallback) {
|
|
|
- window.tempPrankCallback(choice);
|
|
|
- delete window.tempPrankCallback;
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 生成随机位置（确保弹窗不重叠）
|
|
|
-const getRandomPosition = () => {
|
|
|
- const maxWidth = window.innerWidth - 300;
|
|
|
- const maxHeight = window.innerHeight - 200;
|
|
|
- return {
|
|
|
- left: `${Math.random() * maxWidth}px`,
|
|
|
- top: `${Math.random() * maxHeight}px`
|
|
|
- };
|
|
|
-};
|
|
|
-
|
|
|
-// 创建超级恼人的弹窗
|
|
|
-const createAnnoyingPopup = () => {
|
|
|
- const popup = {
|
|
|
- id: Date.now() + Math.random(),
|
|
|
- text: ultraAnnoyingTexts[Math.floor(Math.random() * ultraAnnoyingTexts.length)],
|
|
|
- position: getRandomPosition(),
|
|
|
- zIndex: 1000 + popupCount.value
|
|
|
- };
|
|
|
-
|
|
|
- adPopups.value.push(popup);
|
|
|
- popupCount.value++;
|
|
|
-
|
|
|
- // 播放恼人音效
|
|
|
- createPopupSound();
|
|
|
-
|
|
|
- // 让页面震动（如果支持）
|
|
|
- if (navigator.vibrate) {
|
|
|
- navigator.vibrate([100, 50, 100]);
|
|
|
- }
|
|
|
-
|
|
|
- // 随机改变页面标题
|
|
|
- const annoyingTitles = [
|
|
|
- "🚨 紧急通知！",
|
|
|
- "💰 恭喜中奖！",
|
|
|
- "⚠️ 安全警告！",
|
|
|
- "🎉 限时特价！",
|
|
|
- "📱 系统通知",
|
|
|
- "🔥 爆款推荐！"
|
|
|
- ];
|
|
|
- document.title = annoyingTitles[Math.floor(Math.random() * annoyingTitles.length)];
|
|
|
-};
|
|
|
-
|
|
|
-// 强制关闭弹窗（移除恶意阻拦行为）
|
|
|
-const closePopup = (id) => {
|
|
|
- const popup = adPopups.value.find(p => p.id === id);
|
|
|
-
|
|
|
- // 简化关闭逻辑，移除恶意阻拦
|
|
|
- adPopups.value = adPopups.value.filter(popup => popup.id !== id);
|
|
|
-
|
|
|
- // 关闭弹窗后偶尔创建一个新的（而不是两个）
|
|
|
- if (Math.random() > 0.7 && adPopups.value.length < 3) {
|
|
|
- setTimeout(() => {
|
|
|
- createAnnoyingPopup();
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 点击广告的恶搞行为
|
|
|
-const clickAd = () => {
|
|
|
- createAnnoyingSound();
|
|
|
-
|
|
|
- // 随机恶搞行为
|
|
|
- const pranks = [
|
|
|
- () => showCustomNotificationFn("恭喜！您已成功被骗！这是一个恶搞网站！😄"),
|
|
|
- () => {
|
|
|
- showCustomNotificationFn("正在为您下载1000个文件...");
|
|
|
- showFakeDownload.value = true;
|
|
|
- },
|
|
|
- () => {
|
|
|
- showCustomNotificationFn("检测到病毒！正在启动全盘扫描...");
|
|
|
- showFakeVirus.value = true;
|
|
|
- router.push('/virus');
|
|
|
- },
|
|
|
- () => {
|
|
|
- showCustomNotificationFn("您的中奖信息已发送到火星！请等待外星人联系您！");
|
|
|
- createMultiplePopups();
|
|
|
- },
|
|
|
- () => {
|
|
|
- window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"; // Rick Roll
|
|
|
- }
|
|
|
- ];
|
|
|
-
|
|
|
- const randomPrank = pranks[Math.floor(Math.random() * pranks.length)];
|
|
|
- randomPrank();
|
|
|
-};
|
|
|
-
|
|
|
-// 创建多个弹窗轰炸（减少数量）
|
|
|
-const createMultiplePopups = () => {
|
|
|
- // 减少弹窗数量从5个到3个
|
|
|
- for (let i = 0; i < 3; i++) {
|
|
|
- setTimeout(() => {
|
|
|
- createAnnoyingPopup();
|
|
|
- }, i * 500);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 鼠标陷阱（鼠标移动到某些区域会触发弹窗）
|
|
|
-const handleMouseMove = (event) => {
|
|
|
- if (isMouseTrapped.value && Math.random() > 0.98) {
|
|
|
- createAnnoyingPopup();
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 阻止用户离开页面
|
|
|
-const blockPageLeave = (e) => {
|
|
|
- e.preventDefault();
|
|
|
- e.returnValue = '🎁 广告正在加载您的专属奖品！确定要离开吗？';
|
|
|
- return '🎁 广告正在加载您的专属奖品！确定要离开吗？';
|
|
|
-};
|
|
|
-
|
|
|
-// 禁用各种快捷键
|
|
|
-const disableShortcuts = (e) => {
|
|
|
- if (e.key === 'F12' ||
|
|
|
- (e.ctrlKey && e.shiftKey && e.key === 'I') ||
|
|
|
- (e.ctrlKey && e.key === 'u') ||
|
|
|
- (e.ctrlKey && e.key === 'U') ||
|
|
|
- (e.altKey && e.key === 'F4') ||
|
|
|
- (e.ctrlKey && e.key === 'w') ||
|
|
|
- (e.ctrlKey && e.key === 'W')) {
|
|
|
- e.preventDefault();
|
|
|
- showCustomNotificationFn('🚫 开发者工具已被广告商禁用！');
|
|
|
- createAnnoyingSound();
|
|
|
- return false;
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 禁用右键菜单
|
|
|
-const disableRightClick = (e) => {
|
|
|
- e.preventDefault();
|
|
|
- showCustomNotificationFn('🚫 右键功能已被广告保护！');
|
|
|
- createAnnoyingSound();
|
|
|
- return false;
|
|
|
-};
|
|
|
-
|
|
|
-// 检测页面失焦
|
|
|
-const handlePageBlur = () => {
|
|
|
- showCustomNotificationFn('💰 检测到您想离开！广告正在为您计算奖金！');
|
|
|
- window.focus();
|
|
|
- createAnnoyingSound();
|
|
|
-};
|
|
|
-
|
|
|
-// 创建假关闭按钮
|
|
|
-const createFakeCloseButtons = () => {
|
|
|
- for (let i = 0; i < 15; i++) {
|
|
|
- fakeCloseButtons.value.push({
|
|
|
- id: Date.now() + i,
|
|
|
- x: Math.random() * (window.innerWidth - 60),
|
|
|
- y: Math.random() * (window.innerHeight - 60),
|
|
|
- clicked: false,
|
|
|
- text: Math.random() > 0.5 ? '❌' : '🚪'
|
|
|
- });
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 点击假关闭按钮
|
|
|
-const clickFakeCloseButton = (buttonId) => {
|
|
|
- const button = fakeCloseButtons.value.find(b => b.id === buttonId);
|
|
|
- if (button) {
|
|
|
- button.clicked = true;
|
|
|
- annoyanceLevel.value++;
|
|
|
-
|
|
|
- showCustomNotificationFn("😈 这也是假的关闭按钮！广告等级提升！");
|
|
|
- createAnnoyingSound();
|
|
|
-
|
|
|
- // 创建更多假按钮
|
|
|
- createFakeCloseButtons();
|
|
|
-
|
|
|
- // 激活更多恶心功能
|
|
|
- if (annoyanceLevel.value > 3) {
|
|
|
- activateUltraAnnoyingMode();
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 激活超级恶心模式
|
|
|
-const activateUltraAnnoyingMode = () => {
|
|
|
- isUltraAnnoyingMode.value = true;
|
|
|
- showCustomNotificationFn("🎪 恭喜解锁超级广告轰炸模式！");
|
|
|
-
|
|
|
- // 启动各种恶心效果
|
|
|
- setTimeout(() => movingElements.value = true, 500);
|
|
|
- setTimeout(() => invertedControls.value = true, 1000);
|
|
|
- setTimeout(() => screenShake.value = true, 1500);
|
|
|
- setTimeout(() => rapidColorChange.value = true, 2000);
|
|
|
- setTimeout(() => popupBombingActive.value = true, 2500);
|
|
|
-
|
|
|
- // 开始疯狂弹窗轰炸
|
|
|
- startPopupBombing();
|
|
|
-
|
|
|
- // 开始移动所有按钮
|
|
|
- startMovingElements();
|
|
|
-};
|
|
|
-
|
|
|
-// 弹窗轰炸
|
|
|
-const startPopupBombing = () => {
|
|
|
- if (popupBombingActive.value) {
|
|
|
- setInterval(() => {
|
|
|
- if (isUltraAnnoyingMode.value && adPopups.value.length < 10) {
|
|
|
- for (let i = 0; i < 2; i++) {
|
|
|
- setTimeout(() => {
|
|
|
- createAnnoyingPopup();
|
|
|
- }, i * 300);
|
|
|
- }
|
|
|
- }
|
|
|
- }, 1500); // 更频繁的弹窗
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 移动元素功能
|
|
|
-const startMovingElements = () => {
|
|
|
- setInterval(() => {
|
|
|
- if (movingElements.value) {
|
|
|
- // 让所有按钮随机移动位置
|
|
|
- const buttons = document.querySelectorAll('.popup-btn, .mega-button, .overlay-btn');
|
|
|
- buttons.forEach(button => {
|
|
|
- if (Math.random() > 0.7) {
|
|
|
- const randomX = (Math.random() - 0.5) * 100;
|
|
|
- const randomY = (Math.random() - 0.5) * 100;
|
|
|
- button.style.transform = `translate(${randomX}px, ${randomY}px) rotate(${Math.random() * 20 - 10}deg)`;
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- button.style.transform = 'none';
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }, 3000);
|
|
|
-};
|
|
|
-
|
|
|
-// 增强版继续恶搞体验
|
|
|
-const continueAnnoyingExperience = () => {
|
|
|
- annoyanceLevel.value++;
|
|
|
-
|
|
|
- // 根据点击次数增加恶心程度
|
|
|
- if (annoyanceLevel.value <= 3) {
|
|
|
- const fakeMessages = [
|
|
|
- "🤡 想回去？你想多了！",
|
|
|
- "😈 这里就是你的新家！",
|
|
|
- "🎪 欢迎来到广告监狱！"
|
|
|
- ];
|
|
|
- showCustomNotificationFn(fakeMessages[annoyanceLevel.value - 1]);
|
|
|
- } else if (annoyanceLevel.value <= 6) {
|
|
|
- const escalationMessages = [
|
|
|
- "🔥 广告强度正在飙升...",
|
|
|
- "⚡ 系统正在释放更多广告能量...",
|
|
|
- "🌪️ 广告风暴即将席卷而来..."
|
|
|
- ];
|
|
|
- showCustomNotificationFn(escalationMessages[annoyanceLevel.value - 4]);
|
|
|
-
|
|
|
- // 开始移动界面元素
|
|
|
- movingElements.value = true;
|
|
|
- createFakeCloseButtons();
|
|
|
- } else if (annoyanceLevel.value <= 10) {
|
|
|
- showCustomNotificationFn("🚀 恭喜触发终极广告轰炸模式！");
|
|
|
- activateUltraAnnoyingMode();
|
|
|
-
|
|
|
- // 启动假加载
|
|
|
- showFakeLoading();
|
|
|
- } else {
|
|
|
- // 超过10次点击，给假的"怜悯"选项
|
|
|
- showPrankDialogFn(
|
|
|
- '🙏 您已经尝试逃离了' + annoyanceLevel.value + '次！\n\n真的想显示离开选项吗？\n\n（提示：选"否"可能会更糟糕）',
|
|
|
- (choice) => {
|
|
|
- if (choice) {
|
|
|
- // 即使用户选择"是"，也继续恶搞
|
|
|
- setTimeout(() => {
|
|
|
- showCustomNotificationFn("😈 刚才只是在测试您的耐心！广告继续！");
|
|
|
- activateUltraAnnoyingMode();
|
|
|
- createFakeCloseButtons();
|
|
|
- }, 2000);
|
|
|
- } else {
|
|
|
- showCustomNotificationFn("🎉 您选择了继续广告体验！恶心等级MAX！");
|
|
|
- annoyanceLevel.value = 999;
|
|
|
- activateUltraAnnoyingMode();
|
|
|
-
|
|
|
- // 疯狂轰炸
|
|
|
- for (let i = 0; i < 5; i++) {
|
|
|
- setTimeout(() => createAnnoyingPopup(), i * 1000);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- // 每次点击都触发更多恶搞内容
|
|
|
- triggerPrankContent();
|
|
|
- createAnnoyingSound();
|
|
|
-};
|
|
|
-
|
|
|
-// 触发恶搞内容
|
|
|
-const triggerPrankContent = () => {
|
|
|
- const prankActions = [
|
|
|
- () => createMultiplePopups(),
|
|
|
- () => {
|
|
|
- document.body.style.filter = 'hue-rotate(' + Math.random() * 360 + 'deg) brightness(' + (0.5 + Math.random()) + ')';
|
|
|
- setTimeout(() => {
|
|
|
- document.body.style.filter = 'none';
|
|
|
- }, 3000);
|
|
|
- },
|
|
|
- () => {
|
|
|
- document.body.style.transform = 'rotate(' + (Math.random() * 6 - 3) + 'deg) scale(' + (0.95 + Math.random() * 0.1) + ')';
|
|
|
- setTimeout(() => {
|
|
|
- document.body.style.transform = 'none';
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
- () => showFakeLoading(),
|
|
|
- () => createFakeCloseButtons(),
|
|
|
- () => {
|
|
|
- // 让整个页面闪烁
|
|
|
- document.body.style.opacity = '0.5';
|
|
|
- setTimeout(() => {
|
|
|
- document.body.style.opacity = '1';
|
|
|
- }, 500);
|
|
|
- }
|
|
|
- ];
|
|
|
-
|
|
|
- const randomAction = prankActions[Math.floor(Math.random() * prankActions.length)];
|
|
|
- randomAction();
|
|
|
-};
|
|
|
-
|
|
|
-// 假加载屏幕
|
|
|
-const showFakeLoading = () => {
|
|
|
- fakeLoadingScreen.value = true;
|
|
|
- showCustomNotificationFn("正在连接广告母星...");
|
|
|
-
|
|
|
- let progress = 0;
|
|
|
- const loadingInterval = setInterval(() => {
|
|
|
- progress += Math.random() * 3;
|
|
|
- if (progress >= 99.8) {
|
|
|
- progress = 99.8;
|
|
|
- clearInterval(loadingInterval);
|
|
|
-
|
|
|
- // 假装加载失败，然后重新开始
|
|
|
- setTimeout(() => {
|
|
|
- fakeLoadingScreen.value = false;
|
|
|
- showCustomNotificationFn("连接失败！正在重新建立广告链接...");
|
|
|
-
|
|
|
- // 重新开始假加载
|
|
|
- setTimeout(() => {
|
|
|
- if (isUltraAnnoyingMode.value) {
|
|
|
- showFakeLoading();
|
|
|
- }
|
|
|
- }, 3000);
|
|
|
- }, 5000);
|
|
|
- }
|
|
|
- }, 150);
|
|
|
-};
|
|
|
-
|
|
|
-// 生成随机访问者编号
|
|
|
-const getRandomVisitorNumber = () => {
|
|
|
- return (1000000 + Math.floor(Math.random() * 1000)).toLocaleString();
|
|
|
-};
|
|
|
-
|
|
|
-// 生成随机倒计时
|
|
|
-const getRandomTime = () => {
|
|
|
- const hours = Math.floor(Math.random() * 24).toString().padStart(2, '0');
|
|
|
- const minutes = Math.floor(Math.random() * 60).toString().padStart(2, '0');
|
|
|
- const seconds = Math.floor(Math.random() * 60).toString().padStart(2, '0');
|
|
|
- return `${hours}:${minutes}:${seconds}`;
|
|
|
-};
|
|
|
-
|
|
|
-// 生成随机IP地址
|
|
|
-const getRandomIP = () => {
|
|
|
- return `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`;
|
|
|
-};
|
|
|
-
|
|
|
-// 生成随机奖品价值
|
|
|
-const getRandomPrizeValue = () => {
|
|
|
- return (Math.random() * 10000000 + 1000000).toFixed(0);
|
|
|
-};
|
|
|
-
|
|
|
-// 生成随机病毒数量
|
|
|
-const getRandomVirusCount = () => {
|
|
|
- return Math.floor(Math.random() * 999) + 1;
|
|
|
-};
|
|
|
-
|
|
|
-// 显示自定义离开确认对话框
|
|
|
-const showCustomLeaveDialog = () => {
|
|
|
- showLeaveDialog.value = true;
|
|
|
- createAnnoyingSound();
|
|
|
-};
|
|
|
-
|
|
|
-// 用户确认离开
|
|
|
-const confirmLeave = () => {
|
|
|
- const farewell = [
|
|
|
- "👋 感谢体验恶搞广告！",
|
|
|
- "💔 我们会想念您的！",
|
|
|
- "🎭 希望您玩得开心！",
|
|
|
- "🔄 随时欢迎回来继续恶搞！",
|
|
|
- "😄 成功逃脱广告轰炸！"
|
|
|
- ];
|
|
|
-
|
|
|
- showCustomNotificationFn(farewell[Math.floor(Math.random() * farewell.length)]);
|
|
|
- showLeaveDialog.value = false;
|
|
|
-
|
|
|
- // 延迟跳转，让用户看到通知
|
|
|
- setTimeout(() => {
|
|
|
- router.push('/');
|
|
|
- }, 1500);
|
|
|
-};
|
|
|
-
|
|
|
-// 用户选择继续留下
|
|
|
-const stayAndContinue = () => {
|
|
|
- showLeaveDialog.value = false;
|
|
|
- showCustomNotificationFn("🎉 明智的选择！广告轰炸继续！");
|
|
|
-
|
|
|
- // 重新激活所有恶搞功能
|
|
|
- showMainAd.value = true;
|
|
|
- showOverlayAd.value = true;
|
|
|
- createMultiplePopups();
|
|
|
- createAnnoyingSound();
|
|
|
-};
|
|
|
-
|
|
|
-// 增强版恶搞轮盘
|
|
|
-const showLuckyWheel = ref(false);
|
|
|
-const wheelSpinning = ref(false);
|
|
|
-const wheelResult = ref('');
|
|
|
-const luckyWheelPrizes = [
|
|
|
- '🎁 恭喜获得空气一份！',
|
|
|
- '💰 恭喜获得梦想一个！',
|
|
|
- '🏠 恭喜获得云彩别墅！',
|
|
|
- '🚗 恭喜获得想象跑车！',
|
|
|
- '💎 恭喜获得虚拟钻石！',
|
|
|
- '🎪 恭喜获得永恒恶搞！',
|
|
|
- '🎭 恭喜获得无限套路！',
|
|
|
- '🎨 恭喜获得画饼技能！'
|
|
|
-];
|
|
|
-
|
|
|
-// 疯狂弹窗类型
|
|
|
-const popupTypes = [
|
|
|
- 'urgent-winner', 'fake-security', 'celebrity-call', 'limited-time',
|
|
|
- 'virus-warning', 'bank-notification', 'system-update', 'exclusive-offer',
|
|
|
- 'friend-recommendation', 'government-notice', 'lucky-draw', 'prize-expired'
|
|
|
-];
|
|
|
-
|
|
|
-// 弹窗轰炸计数器
|
|
|
-const popupBombCount = ref(0);
|
|
|
-const maxPopups = ref(20); // 最大同时弹窗数
|
|
|
-
|
|
|
-// 创建疯狂弹窗
|
|
|
-const createCrazyPopup = (type = null) => {
|
|
|
- if (adPopups.value.length >= maxPopups.value) {
|
|
|
- // 如果达到最大数量，移除最老的弹窗
|
|
|
- adPopups.value.shift();
|
|
|
- }
|
|
|
-
|
|
|
- const popupType = type || popupTypes[Math.floor(Math.random() * popupTypes.length)];
|
|
|
- const popup = {
|
|
|
- id: Date.now() + Math.random(),
|
|
|
- type: popupType,
|
|
|
- text: getCrazyPopupText(popupType),
|
|
|
- position: getRandomPosition(),
|
|
|
- zIndex: 1000 + popupCount.value,
|
|
|
- isMoving: Math.random() > 0.7,
|
|
|
- color: getRandomColor(),
|
|
|
- size: Math.random() > 0.5 ? 'large' : 'normal'
|
|
|
- };
|
|
|
-
|
|
|
- adPopups.value.push(popup);
|
|
|
- popupCount.value++;
|
|
|
- popupBombCount.value++;
|
|
|
-
|
|
|
- // 播放恼人音效
|
|
|
- createPopupSound();
|
|
|
-
|
|
|
- // 页面震动
|
|
|
- if (navigator.vibrate) {
|
|
|
- navigator.vibrate([100, 50, 100]);
|
|
|
- }
|
|
|
-
|
|
|
- // 随机改变页面标题
|
|
|
- updateAnnoyingTitle();
|
|
|
-};
|
|
|
-
|
|
|
-// 获取疯狂弹窗文本
|
|
|
-const getCrazyPopupText = (type) => {
|
|
|
- const popupTexts = {
|
|
|
- 'urgent-winner': [
|
|
|
- '🚨 紧急通知：您是第99999位访客！立即领取999万！',
|
|
|
- '⚠️ 警告：奖品库存仅剩1份！马上领取！',
|
|
|
- '🔥 热烈祝贺：您被选为超级幸运用户！'
|
|
|
- ],
|
|
|
- 'fake-security': [
|
|
|
- '🔒 安全提醒：检测到异常访问，请立即验证身份！',
|
|
|
- '🛡️ 系统保护：为保护您的奖品，请完成安全认证！',
|
|
|
- '⚡ 防护警告：发现可疑活动，请立即处理！'
|
|
|
- ],
|
|
|
- 'celebrity-call': [
|
|
|
- '📞 马🐴来电：恭喜您中奖！请接听重要电话！',
|
|
|
- '📱 雷🐯留言：我也是在这里发家致富的！',
|
|
|
- '💬 刘🐧推荐：错过这次机会您会后悔终生！'
|
|
|
- ],
|
|
|
- 'limited-time': [
|
|
|
- '⏰ 限时特价：仅剩3分59秒！错过再等100年！',
|
|
|
- '⏳ 倒计时：距离活动结束还有2小时！',
|
|
|
- '🕐 最后机会：优惠即将结束，立即行动！'
|
|
|
- ],
|
|
|
- 'virus-warning': [
|
|
|
- '🦠 病毒警告：检测到恶意软件！立即下载杀毒软件！',
|
|
|
- '⚠️ 安全威胁：您的电脑已被感染！马上清理！',
|
|
|
- '🔥 紧急：发现木马病毒！点击立即清除！'
|
|
|
- ],
|
|
|
- 'bank-notification': [
|
|
|
- '🏦 银行通知：您的账户有999万待入账！',
|
|
|
- '💳 支付提醒：检测到大额转账，请确认身份！',
|
|
|
- '💰 财务通知：您的投资已获得超额收益！'
|
|
|
- ],
|
|
|
- 'system-update': [
|
|
|
- '🔄 系统更新：正在安装重要安全补丁...',
|
|
|
- '⚙️ 程序升级：恶搞系统正在升级到2.0版本！',
|
|
|
- '🔧 维护通知：系统将在5秒后重启！'
|
|
|
- ],
|
|
|
- 'exclusive-offer': [
|
|
|
- '🎁 专属优惠：仅限今日！VIP会员免费升级！',
|
|
|
- '⭐ 特别邀请：您已被选为内测用户！',
|
|
|
- '🏆 独家福利：恭喜获得终身免费资格！'
|
|
|
- ],
|
|
|
- 'friend-recommendation': [
|
|
|
- '👥 好友推荐：您的朋友李小明推荐您参加！',
|
|
|
- '🤝 社交分享：已有10000+好友成功中奖！',
|
|
|
- '💫 口碑推荐：99.9%用户都选择了我们！'
|
|
|
- ],
|
|
|
- 'government-notice': [
|
|
|
- '🏛️ 官方通知：根据新政策，您有资格领取补贴！',
|
|
|
- '📜 政府公告：恭喜您符合特殊奖励条件！',
|
|
|
- '🎖️ 国家认证：您已获得官方认可资格！'
|
|
|
- ],
|
|
|
- 'lucky-draw': [
|
|
|
- '🎰 幸运抽奖：恭喜您获得转盘机会！立即参与！',
|
|
|
- '🎲 运气爆棚：今天是您的幸运日！',
|
|
|
- '🌟 天选之子：您的运气值已达到MAX！'
|
|
|
- ],
|
|
|
- 'prize-expired': [
|
|
|
- '⏰ 奖品到期：您的奖品将在60秒后作废！',
|
|
|
- '🚨 紧急提醒：未领取的奖品即将清空！',
|
|
|
- '⚠️ 最后通牒：过期奖品无法找回！'
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- const texts = popupTexts[type] || popupTexts['urgent-winner'];
|
|
|
- return texts[Math.floor(Math.random() * texts.length)];
|
|
|
-};
|
|
|
-
|
|
|
-// 获取随机颜色
|
|
|
-const getRandomColor = () => {
|
|
|
- const colors = [
|
|
|
- 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
|
|
|
- 'linear-gradient(45deg, #feca57, #ff9ff3)',
|
|
|
- 'linear-gradient(45deg, #48dbfb, #0abde3)',
|
|
|
- 'linear-gradient(45deg, #1dd1a1, #10ac84)',
|
|
|
- 'linear-gradient(45deg, #a55eea, #8c7ae6)',
|
|
|
- 'linear-gradient(45deg, #fd79a8, #e84393)',
|
|
|
- 'linear-gradient(45deg, #fdcb6e, #e17055)',
|
|
|
- 'linear-gradient(45deg, #6c5ce7, #a29bfe)'
|
|
|
- ];
|
|
|
- return colors[Math.floor(Math.random() * colors.length)];
|
|
|
-};
|
|
|
-
|
|
|
-// 更新恼人标题
|
|
|
-const updateAnnoyingTitle = () => {
|
|
|
- const titles = [
|
|
|
- '🚨 ' + popupBombCount.value + '个弹窗已激活！',
|
|
|
- '🎪 恶搞进度：' + Math.min(popupBombCount.value * 5, 100) + '%',
|
|
|
- '💥 弹窗轰炸中...请勿关闭！',
|
|
|
- '🎯 您已被' + popupBombCount.value + '个广告锁定！',
|
|
|
- '🔥 广告强度：' + Math.min(annoyanceLevel.value * 20, 100) + '%',
|
|
|
- '⚡ 系统繁忙：处理中' + popupBombCount.value + '个任务',
|
|
|
- '🌪️ 广告风暴等级：' + Math.min(Math.floor(popupBombCount.value / 5), 10)
|
|
|
- ];
|
|
|
- document.title = titles[Math.floor(Math.random() * titles.length)];
|
|
|
-};
|
|
|
-
|
|
|
-// 超级弹窗轰炸模式
|
|
|
-const activateSuperPopupBombing = () => {
|
|
|
- showCustomNotificationFn("🎪 超级弹窗轰炸模式已激活！");
|
|
|
-
|
|
|
- // 连续创建多个不同类型的弹窗
|
|
|
- for (let i = 0; i < 5; i++) {
|
|
|
- setTimeout(() => {
|
|
|
- createCrazyPopup(popupTypes[i % popupTypes.length]);
|
|
|
- }, i * 500);
|
|
|
- }
|
|
|
-
|
|
|
- // 启动持续轰炸
|
|
|
- const bombingInterval = setInterval(() => {
|
|
|
- if (isUltraAnnoyingMode.value && adPopups.value.length < maxPopups.value) {
|
|
|
- for (let i = 0; i < 3; i++) {
|
|
|
- setTimeout(() => {
|
|
|
- createCrazyPopup();
|
|
|
- }, i * 200);
|
|
|
- }
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
-
|
|
|
- // 30秒后减缓频率（但不停止）
|
|
|
- setTimeout(() => {
|
|
|
- clearInterval(bombingInterval);
|
|
|
-
|
|
|
- // 启动温和一些的持续轰炸
|
|
|
- setInterval(() => {
|
|
|
- if (isUltraAnnoyingMode.value && Math.random() > 0.3) {
|
|
|
- createCrazyPopup();
|
|
|
- }
|
|
|
- }, 3000);
|
|
|
- }, 30000);
|
|
|
-};
|
|
|
-
|
|
|
-// 显示幸运转盘
|
|
|
-const showLuckyWheelPopup = () => {
|
|
|
- showLuckyWheel.value = true;
|
|
|
- showCustomNotificationFn("🎰 恭喜！您获得了专属转盘机会！");
|
|
|
- createAnnoyingSound();
|
|
|
-};
|
|
|
-
|
|
|
-// 转动转盘
|
|
|
-const spinWheel = () => {
|
|
|
- if (wheelSpinning.value) return;
|
|
|
-
|
|
|
- wheelSpinning.value = true;
|
|
|
- createAnnoyingSound();
|
|
|
-
|
|
|
- // 模拟转盘旋转
|
|
|
- setTimeout(() => {
|
|
|
- wheelSpinning.value = false;
|
|
|
- wheelResult.value = luckyWheelPrizes[Math.floor(Math.random() * luckyWheelPrizes.length)];
|
|
|
-
|
|
|
- // 显示中奖结果
|
|
|
- setTimeout(() => {
|
|
|
- showCustomNotificationFn(`🎉 转盘结果：${wheelResult.value}`);
|
|
|
-
|
|
|
- // 继续恶搞 - 要求再次转盘
|
|
|
- setTimeout(() => {
|
|
|
- showCustomNotificationFn("✨ 再转一次可获得更大奖品！");
|
|
|
- activateSuperPopupBombing(); // 激活超级弹窗轰炸
|
|
|
- }, 2000);
|
|
|
- }, 1000);
|
|
|
- }, 3000);
|
|
|
-};
|
|
|
-
|
|
|
-// 关闭幸运转盘（假的）
|
|
|
-const closeLuckyWheel = () => {
|
|
|
- // 假装关闭，实际上创建更多弹窗
|
|
|
- showLuckyWheel.value = false;
|
|
|
- showCustomNotificationFn("🎪 关闭转盘？那就来更多弹窗吧！");
|
|
|
- activateSuperPopupBombing();
|
|
|
-};
|
|
|
-
|
|
|
-// 增强版触发随机恶搞内容
|
|
|
-const triggerRandomPrankContent = () => {
|
|
|
- const prankActions = [
|
|
|
- () => createCrazyPopup('urgent-winner'),
|
|
|
- () => createCrazyPopup('fake-security'),
|
|
|
- () => createCrazyPopup('celebrity-call'),
|
|
|
- () => showLuckyWheelPopup(),
|
|
|
- () => activateSuperPopupBombing(),
|
|
|
- () => {
|
|
|
- // 创建多个假关闭按钮
|
|
|
- for (let i = 0; i < 10; i++) {
|
|
|
- fakeCloseButtons.value.push({
|
|
|
- id: Date.now() + i + Math.random(),
|
|
|
- x: Math.random() * (window.innerWidth - 50),
|
|
|
- y: Math.random() * (window.innerHeight - 50),
|
|
|
- text: ['❌', '✕', '×', '✖', '⨯'][Math.floor(Math.random() * 5)],
|
|
|
- clicked: false
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- () => {
|
|
|
- // 疯狂改变页面样式
|
|
|
- document.body.style.filter = `hue-rotate(${Math.random() * 360}deg) saturate(${1 + Math.random() * 2}) brightness(${0.5 + Math.random()})`;
|
|
|
- setTimeout(() => {
|
|
|
- document.body.style.filter = 'none';
|
|
|
- }, 3000);
|
|
|
- },
|
|
|
- () => {
|
|
|
- // 创建虚假系统消息
|
|
|
- const systemMessages = [
|
|
|
- 'Windows正在下载更新... 99%',
|
|
|
- '系统即将重启以安装更新',
|
|
|
- '检测到病毒，正在清理中...',
|
|
|
- '内存不足，建议关闭其他程序',
|
|
|
- 'CPU使用率过高，系统运行缓慢'
|
|
|
- ];
|
|
|
- showCustomNotificationFn(systemMessages[Math.floor(Math.random() * systemMessages.length)]);
|
|
|
- }
|
|
|
- ];
|
|
|
-
|
|
|
- // 随机执行1-3个恶搞动作
|
|
|
- const actionCount = Math.floor(Math.random() * 3) + 1;
|
|
|
- for (let i = 0; i < actionCount; i++) {
|
|
|
- setTimeout(() => {
|
|
|
- const randomAction = prankActions[Math.floor(Math.random() * prankActions.length)];
|
|
|
- randomAction();
|
|
|
- }, i * 1000);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- // 立即显示主广告
|
|
|
- setTimeout(() => {
|
|
|
- showMainAd.value = true;
|
|
|
- createAnnoyingSound();
|
|
|
- }, 500);
|
|
|
-
|
|
|
- // 减缓弹窗轰炸频率 - 从1.5秒改为3秒
|
|
|
- const popupInterval = setInterval(() => {
|
|
|
- // 限制最大弹窗数量
|
|
|
- if (adPopups.value.length < 5) {
|
|
|
- createAnnoyingPopup();
|
|
|
- }
|
|
|
- }, 3000);
|
|
|
-
|
|
|
- // 显示各种恶搞组件
|
|
|
- setTimeout(() => showFloatingAds.value = true, 2000);
|
|
|
- setTimeout(() => showOverlayAd.value = true, 5000);
|
|
|
- setTimeout(() => showNotifications.value = true, 3000);
|
|
|
-
|
|
|
- // 激活鼠标陷阱
|
|
|
- setTimeout(() => {
|
|
|
- isMouseTrapped.value = true;
|
|
|
- }, 3000);
|
|
|
-
|
|
|
- // 立即创建假关闭按钮
|
|
|
- createFakeCloseButtons();
|
|
|
-
|
|
|
- // 每5秒随机播放恶心音效
|
|
|
- setInterval(() => {
|
|
|
- if (Math.random() > 0.6) {
|
|
|
- createAnnoyingSound();
|
|
|
- }
|
|
|
- }, 5000);
|
|
|
-
|
|
|
- // 每3秒随机更改页面标题
|
|
|
- const annoyingTitles = [
|
|
|
- '🎉 恭喜中奖！点击领取百万大奖！',
|
|
|
- '⚠️ 您的电脑已被感染！立即清理！',
|
|
|
- '💰 限时优惠！错过再等100年！',
|
|
|
- '🚨 系统警告！请勿关闭此页面！',
|
|
|
- '🎁 免费iPhone等你来拿！',
|
|
|
- '⭐ 广告宇宙欢迎您的到来！',
|
|
|
- '🔥 热门！单身美女等你聊天！',
|
|
|
- '💎 钻石会员专属特权！'
|
|
|
- ];
|
|
|
-
|
|
|
- setInterval(() => {
|
|
|
- const randomTitle = annoyingTitles[Math.floor(Math.random() * annoyingTitles.length)];
|
|
|
- document.title = randomTitle;
|
|
|
- }, 3000);
|
|
|
-
|
|
|
- // 监控用户行为，恶心等级达到5时激活超级恶心模式
|
|
|
- setInterval(() => {
|
|
|
- if (annoyanceLevel.value >= 5 && !isUltraAnnoyingMode.value) {
|
|
|
- activateUltraAnnoyingMode();
|
|
|
- }
|
|
|
-
|
|
|
- // 如果处于超级恶心模式，随机触发恶搞内容
|
|
|
- if (isUltraAnnoyingMode.value && Math.random() > 0.7) {
|
|
|
- triggerPrankContent();
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
-
|
|
|
- // 每15秒自动增加恶心等级（最大10级）
|
|
|
- setInterval(() => {
|
|
|
- if (annoyanceLevel.value < 10) {
|
|
|
- annoyanceLevel.value++;
|
|
|
- showCustomNotificationFn(`广告恶心等级提升至 ${annoyanceLevel.value} 级！`);
|
|
|
- }
|
|
|
- }, 15000);
|
|
|
-
|
|
|
- // 添加键盘和右键限制（保留恶搞效果）
|
|
|
- document.addEventListener('mousemove', handleMouseMove);
|
|
|
- document.addEventListener('contextmenu', disableRightClick);
|
|
|
- document.addEventListener('keydown', disableShortcuts);
|
|
|
-
|
|
|
- // 禁用键盘快捷键，包括F5刷新、Ctrl+W关闭等
|
|
|
- document.addEventListener('keydown', (e) => {
|
|
|
- // 禁用F5刷新
|
|
|
- if (e.key === 'F5') {
|
|
|
- e.preventDefault();
|
|
|
- showCustomNotificationFn('刷新功能已被广告系统锁定！');
|
|
|
- createAnnoyingSound();
|
|
|
- }
|
|
|
-
|
|
|
- // 禁用Ctrl+W关闭窗口
|
|
|
- if (e.ctrlKey && e.key === 'w') {
|
|
|
- e.preventDefault();
|
|
|
- showCustomNotificationFn('关闭功能已被广告系统接管！');
|
|
|
- createAnnoyingSound();
|
|
|
- }
|
|
|
-
|
|
|
- // 禁用Alt+F4
|
|
|
- if (e.altKey && e.key === 'F4') {
|
|
|
- e.preventDefault();
|
|
|
- showCustomNotificationFn('Alt+F4已被广告系统屏蔽！');
|
|
|
- createAnnoyingSound();
|
|
|
- }
|
|
|
-
|
|
|
- // 禁用Ctrl+T新建标签页
|
|
|
- if (e.ctrlKey && e.key === 't') {
|
|
|
- e.preventDefault();
|
|
|
- showCustomNotificationFn('新建标签页功能已被锁定！');
|
|
|
- }
|
|
|
-
|
|
|
- // 禁用Escape键
|
|
|
- if (e.key === 'Escape') {
|
|
|
- e.preventDefault();
|
|
|
- showCustomNotificationFn('Escape键在广告宇宙中无效！');
|
|
|
- createAnnoyingSound();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 定时改变背景颜色制造闪烁效果
|
|
|
- const colorInterval = setInterval(() => {
|
|
|
- const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7'];
|
|
|
- document.body.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
|
|
- }, 3000);
|
|
|
-
|
|
|
- // 页面加载完成后开始持续的音效骚扰（减少频率）
|
|
|
- setTimeout(() => {
|
|
|
- const soundInterval = setInterval(() => {
|
|
|
- if (Math.random() > 0.8) { // 从0.7改为0.8，减少音效频率
|
|
|
- createAnnoyingSound();
|
|
|
- }
|
|
|
- }, 8000); // 从5秒改为8秒
|
|
|
- }, 10000);
|
|
|
-
|
|
|
- // 监控页面失焦事件（用户试图离开）
|
|
|
- window.addEventListener('blur', () => {
|
|
|
- if (isUltraAnnoyingMode.value) {
|
|
|
- showCustomNotificationFn('想逃跑？门都没有！');
|
|
|
- createAnnoyingSound();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 20秒后随机显示假加载屏幕
|
|
|
- setTimeout(() => {
|
|
|
- if (Math.random() > 0.5) {
|
|
|
- showFakeLoading();
|
|
|
- }
|
|
|
- }, 20000);
|
|
|
-
|
|
|
- // 开始监控鼠标移动（反向控制）
|
|
|
- if (invertedControls.value) {
|
|
|
- document.addEventListener('mousemove', (e) => {
|
|
|
- if (invertedControls.value) {
|
|
|
- // 反向鼠标控制
|
|
|
- const invertedX = window.innerWidth - e.clientX;
|
|
|
- const invertedY = window.innerHeight - e.clientY;
|
|
|
-
|
|
|
- // 创建虚假光标指示器
|
|
|
- let fakeCursor = document.getElementById('fake-cursor');
|
|
|
- if (!fakeCursor) {
|
|
|
- fakeCursor = document.createElement('div');
|
|
|
- fakeCursor.id = 'fake-cursor';
|
|
|
- fakeCursor.style.cssText = `
|
|
|
- position: fixed;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- background: red;
|
|
|
- border-radius: 50%;
|
|
|
- pointer-events: none;
|
|
|
- z-index: 10000;
|
|
|
- transition: all 0.1s ease;
|
|
|
- `;
|
|
|
- document.body.appendChild(fakeCursor);
|
|
|
- }
|
|
|
-
|
|
|
- fakeCursor.style.left = invertedX + 'px';
|
|
|
- fakeCursor.style.top = invertedY + 'px';
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 添加页面失焦处理
|
|
|
- window.addEventListener('blur', handlePageBlur);
|
|
|
-});
|
|
|
-
|
|
|
-onUnmounted(() => {
|
|
|
- // 清理事件监听器
|
|
|
- document.removeEventListener('mousemove', handleMouseMove);
|
|
|
- // 移除页面离开阻拦
|
|
|
- // window.removeEventListener('beforeunload', blockPageLeave);
|
|
|
- document.removeEventListener('contextmenu', disableRightClick);
|
|
|
- document.removeEventListener('keydown', disableShortcuts);
|
|
|
-
|
|
|
- // 移除页面失焦处理
|
|
|
- window.removeEventListener('blur', handlePageBlur);
|
|
|
-});
|
|
|
-
|
|
|
-// 获取弹窗标题
|
|
|
-const getPopupTitle = (type) => {
|
|
|
- const titles = {
|
|
|
- 'urgent-winner': '🚨 紧急通知',
|
|
|
- 'fake-security': '🔒 安全提醒',
|
|
|
- 'celebrity-call': '📞 马🐴来电',
|
|
|
- 'limited-time': '⏰ 限时特价',
|
|
|
- 'virus-warning': '🦠 病毒警告',
|
|
|
- 'bank-notification': '🏦 银行通知',
|
|
|
- 'system-update': '🔄 系统更新',
|
|
|
- 'exclusive-offer': '🎁 专属优惠',
|
|
|
- 'friend-recommendation': '👥 好友推荐',
|
|
|
- 'government-notice': '🏛️ 官方通知',
|
|
|
- 'lucky-draw': '🎰 幸运抽奖',
|
|
|
- 'prize-expired': '⏰ 奖品到期'
|
|
|
- };
|
|
|
- return titles[type] || titles['urgent-winner'];
|
|
|
-};
|
|
|
-
|
|
|
-// 获取弹窗图标
|
|
|
-const getPopupIcon = (type) => {
|
|
|
- const icons = {
|
|
|
- 'urgent-winner': '🏆',
|
|
|
- 'fake-security': '🔒',
|
|
|
- 'celebrity-call': '📞',
|
|
|
- 'limited-time': '⏰',
|
|
|
- 'virus-warning': '🦠',
|
|
|
- 'bank-notification': '🏦',
|
|
|
- 'system-update': '🔄',
|
|
|
- 'exclusive-offer': '🎁',
|
|
|
- 'friend-recommendation': '👥',
|
|
|
- 'government-notice': '🏛️',
|
|
|
- 'lucky-draw': '🎰',
|
|
|
- 'prize-expired': '⏰'
|
|
|
- };
|
|
|
- return icons[type] || icons['urgent-winner'];
|
|
|
-};
|
|
|
-
|
|
|
-// 获取按钮文本
|
|
|
-const getActionButtonText = (type) => {
|
|
|
- const texts = {
|
|
|
- 'urgent-winner': '🏆 立即领取',
|
|
|
- 'fake-security': '🔒 立即验证',
|
|
|
- 'celebrity-call': '📞 接听电话',
|
|
|
- 'limited-time': '🕐 立即行动',
|
|
|
- 'virus-warning': '🦠 立即下载',
|
|
|
- 'bank-notification': '🏦 立即转账',
|
|
|
- 'system-update': '🔄 立即更新',
|
|
|
- 'exclusive-offer': '🎁 VIP升级',
|
|
|
- 'friend-recommendation': '👥 推荐好友',
|
|
|
- 'government-notice': '🏛️ 领取补贴',
|
|
|
- 'lucky-draw': '🎰 参与抽奖',
|
|
|
- 'prize-expired': '⚡ 紧急领取'
|
|
|
- };
|
|
|
- return texts[type] || texts['urgent-winner'];
|
|
|
-};
|
|
|
-
|
|
|
-// 获取倒计时
|
|
|
-const getFakeCountdown = () => {
|
|
|
- const now = new Date().getTime();
|
|
|
- const end = new Date(now + 1000 * 60 * 60 * 24).getTime();
|
|
|
- const diff = end - now;
|
|
|
- const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
|
- const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
|
- const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
|
|
- const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
|
|
- return `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
|
|
|
-};
|
|
|
-
|
|
|
-// 处理弹窗操作
|
|
|
-const handlePopupAction = (popup) => {
|
|
|
- switch (popup.type) {
|
|
|
- case 'urgent-winner':
|
|
|
- activateSuperPopupBombing();
|
|
|
- break;
|
|
|
- case 'fake-security':
|
|
|
- createCrazyPopup('virus-warning');
|
|
|
- break;
|
|
|
- case 'celebrity-call':
|
|
|
- createCrazyPopup('government-notice');
|
|
|
- break;
|
|
|
- case 'lucky-draw':
|
|
|
- showLuckyWheelPopup();
|
|
|
- break;
|
|
|
- case 'prize-expired':
|
|
|
- triggerRandomPrankContent();
|
|
|
- break;
|
|
|
- default:
|
|
|
- // 处理其他类型的弹窗操作
|
|
|
- break;
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<template>
|
|
|
- <div class="fake-ad-container">
|
|
|
- <!-- 恶搞头部 -->
|
|
|
- <div class="header">
|
|
|
- <button
|
|
|
- class="back-btn"
|
|
|
- @click="continueAnnoyingExperience"
|
|
|
- :class="{ 'moving': movingElements, 'shake': screenShake }"
|
|
|
- >
|
|
|
- 继续体验
|
|
|
- </button>
|
|
|
- <div class="annoying-banner">
|
|
|
- <span class="blink-text">🔥 超级特价！今日限时！🔥</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 大量假关闭按钮 -->
|
|
|
- <div
|
|
|
- v-for="btn in fakeCloseButtons"
|
|
|
- :key="btn.id"
|
|
|
- class="scattered-fake-button"
|
|
|
- :style="{ left: btn.x + 'px', top: btn.y + 'px' }"
|
|
|
- @click="clickFakeCloseButton(btn.id)"
|
|
|
- :class="{ 'clicked': btn.clicked, 'moving': movingElements }"
|
|
|
- >
|
|
|
- {{ btn.text }}
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 假加载屏幕 -->
|
|
|
- <div v-if="fakeLoadingScreen" class="fake-loading-overlay">
|
|
|
- <div class="fake-loading-content">
|
|
|
- <div class="loading-spinner"></div>
|
|
|
- <h2>🎪 广告系统升级中...</h2>
|
|
|
- <div class="loading-bar">
|
|
|
- <div class="loading-progress"></div>
|
|
|
- </div>
|
|
|
- <p class="loading-text">正在下载更多广告内容... 99.8%</p>
|
|
|
- <p class="loading-subtext">⚠️ 请勿离开，广告即将变得更精彩！</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 超级恶心模式指示器 -->
|
|
|
- <div v-if="isUltraAnnoyingMode" class="ultra-mode-indicator">
|
|
|
- <div class="mode-badge">🎪 超级广告模式已激活</div>
|
|
|
- <div class="annoyance-meter">
|
|
|
- <div class="meter-fill" :style="{ width: Math.min(annoyanceLevel * 10, 100) + '%' }"></div>
|
|
|
- <span class="meter-text">恶心等级: {{ annoyanceLevel }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 移动的恶搞文本 -->
|
|
|
- <div v-if="movingElements" class="moving-text-container">
|
|
|
- <div class="moving-text" v-for="n in 6" :key="n">
|
|
|
- 🎭 您已被广告永久绑定！
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 背景恶搞效果 -->
|
|
|
- <div class="background-effects">
|
|
|
- <div class="floating-money">💰</div>
|
|
|
- <div class="floating-money">💎</div>
|
|
|
- <div class="floating-money">🎁</div>
|
|
|
- <div class="floating-money">🎉</div>
|
|
|
- <div class="floating-money">💸</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 弹窗容器 -->
|
|
|
- <div class="popup-container">
|
|
|
- <div
|
|
|
- v-for="popup in adPopups"
|
|
|
- :key="popup.id"
|
|
|
- class="ad-popup crazy-popup"
|
|
|
- :class="[
|
|
|
- `popup-${popup.type}`,
|
|
|
- `popup-${popup.size}`,
|
|
|
- { 'moving-popup': popup.isMoving }
|
|
|
- ]"
|
|
|
- :style="{
|
|
|
- left: popup.position.left,
|
|
|
- top: popup.position.top,
|
|
|
- zIndex: popup.zIndex,
|
|
|
- background: popup.color
|
|
|
- }"
|
|
|
- >
|
|
|
- <div class="popup-header crazy-header">
|
|
|
- <span class="popup-title" v-html="getPopupTitle(popup.type)"></span>
|
|
|
- <div class="fake-controls">
|
|
|
- <span class="fake-minimize">➖</span>
|
|
|
- <span class="fake-maximize">⬜</span>
|
|
|
- <button
|
|
|
- class="close-btn crazy-close"
|
|
|
- @click="closePopup(popup.id)"
|
|
|
- title="关闭弹窗"
|
|
|
- >
|
|
|
- ❌
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="popup-body crazy-body">
|
|
|
- <div class="popup-icon" v-html="getPopupIcon(popup.type)"></div>
|
|
|
- <div class="popup-text" v-html="popup.text"></div>
|
|
|
-
|
|
|
- <!-- 根据弹窗类型显示不同按钮 -->
|
|
|
- <div class="popup-actions">
|
|
|
- <button
|
|
|
- v-if="popup.type === 'urgent-winner'"
|
|
|
- class="action-btn winner-btn"
|
|
|
- @click="activateSuperPopupBombing"
|
|
|
- >
|
|
|
- 🏆 立即领取
|
|
|
- </button>
|
|
|
-
|
|
|
- <button
|
|
|
- v-if="popup.type === 'fake-security'"
|
|
|
- class="action-btn security-btn"
|
|
|
- @click="createCrazyPopup('virus-warning')"
|
|
|
- >
|
|
|
- 🔒 立即验证
|
|
|
- </button>
|
|
|
-
|
|
|
- <button
|
|
|
- v-if="popup.type === 'celebrity-call'"
|
|
|
- class="action-btn celebrity-btn"
|
|
|
- @click="createCrazyPopup('government-notice')"
|
|
|
- >
|
|
|
- 📞 接听电话
|
|
|
- </button>
|
|
|
-
|
|
|
- <button
|
|
|
- v-if="popup.type === 'lucky-draw'"
|
|
|
- class="action-btn lucky-btn"
|
|
|
- @click="showLuckyWheelPopup"
|
|
|
- >
|
|
|
- 🎰 参与抽奖
|
|
|
- </button>
|
|
|
-
|
|
|
- <button
|
|
|
- v-if="popup.type === 'prize-expired'"
|
|
|
- class="action-btn urgent-btn"
|
|
|
- @click="triggerRandomPrankContent"
|
|
|
- >
|
|
|
- ⚡ 紧急领取
|
|
|
- </button>
|
|
|
-
|
|
|
- <!-- 通用按钮 -->
|
|
|
- <button
|
|
|
- class="action-btn default-btn"
|
|
|
- @click="handlePopupAction(popup)"
|
|
|
- >
|
|
|
- {{ getActionButtonText(popup.type) }}
|
|
|
- </button>
|
|
|
-
|
|
|
- <button
|
|
|
- class="action-btn cancel-btn"
|
|
|
- @click="createCrazyPopup()"
|
|
|
- >
|
|
|
- ❌ 拒绝
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 假的进度条 -->
|
|
|
- <div v-if="popup.type === 'system-update'" class="fake-progress">
|
|
|
- <div class="progress-bar">
|
|
|
- <div class="progress-fill"></div>
|
|
|
- </div>
|
|
|
- <span class="progress-text">系统更新中... 99.9%</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 假的倒计时 -->
|
|
|
- <div v-if="popup.type === 'limited-time' || popup.type === 'prize-expired'" class="fake-countdown">
|
|
|
- <span class="countdown-label">剩余时间：</span>
|
|
|
- <span class="countdown-timer">{{ getFakeCountdown() }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 超级恼人的主广告 -->
|
|
|
- <div v-if="showMainAd" class="main-ad animate__animated animate__zoomIn">
|
|
|
- <div class="main-ad-content">
|
|
|
- <h3 class="rainbow-text">🎊 超级大奖 🎊</h3>
|
|
|
- <p class="blink-text mega-text">您是第{{ getRandomVisitorNumber() }}位访问者！</p>
|
|
|
- <div class="prize-showcase">
|
|
|
- <div class="prize-item">🏠 别墅一套</div>
|
|
|
- <div class="prize-item">🚗 豪车一辆</div>
|
|
|
- <div class="prize-item">💰 现金100万</div>
|
|
|
- <div class="prize-item">💎 黄金10公斤</div>
|
|
|
- </div>
|
|
|
- <p class="urgent-text">⚠️ 24小时内领取，否则自动作废！</p>
|
|
|
- <button class="claim-btn mega-button animate__animated animate__pulse animate__infinite" @click="clickAd">
|
|
|
- 🎯 立即领取全部奖品！
|
|
|
- </button>
|
|
|
- <div class="fake-timer">
|
|
|
- 倒计时：{{ getRandomTime() }}
|
|
|
- </div>
|
|
|
- <button class="close-main-ad" @click="continueAnnoyingExperience">×</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 全屏覆盖恶搞广告 - 永远显示 -->
|
|
|
- <div v-if="showOverlayAd" class="overlay-ad animate__animated animate__fadeIn">
|
|
|
- <div class="overlay-content">
|
|
|
- <h2 class="rainbow-text">🎁 永恒天降大奖！🎁</h2>
|
|
|
- <p class="mega-text">您的永恒IP地址 {{ getRandomIP() }}</p>
|
|
|
- <div class="prize-wheel"></div>
|
|
|
- <p class="blink-text">无限奖品总价值：¥{{ getRandomPrizeValue() }}</p>
|
|
|
- <button class="overlay-btn mega-button" @click="clickAd">
|
|
|
- 🏆 永远转动幸运轮盘！
|
|
|
- </button>
|
|
|
- <div class="warning-text">
|
|
|
- ⚠️ 不领取将永远待在这里！
|
|
|
- </div>
|
|
|
- <button class="overlay-close" @click="continueAnnoyingExperience">×</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 假病毒警告 -->
|
|
|
- <div v-if="showFakeVirus" class="virus-warning animate__animated animate__flash">
|
|
|
- <h2>🚨 检测到严重病毒感染！🚨</h2>
|
|
|
- <p>已发现 {{ getRandomVirusCount() }} 个恶意软件！</p>
|
|
|
- <button @click="showFakeVirus = false">立即修复</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 浮动广告组件 -->
|
|
|
- <FloatingAds v-if="showFloatingAds" />
|
|
|
-
|
|
|
- <!-- 假下载组件 -->
|
|
|
- <FakeDownload v-if="showFakeDownload" />
|
|
|
-
|
|
|
- <!-- 假通知组件 -->
|
|
|
- <FakeNotifications v-if="showNotifications" />
|
|
|
-
|
|
|
- <!-- 自定义离开确认对话框 -->
|
|
|
- <div v-if="showLeaveDialog" class="leave-dialog-overlay">
|
|
|
- <div class="leave-dialog">
|
|
|
- <div class="leave-dialog-header">
|
|
|
- <h3>🎯 真的要离开广告天堂吗？</h3>
|
|
|
- </div>
|
|
|
- <div class="leave-dialog-content">
|
|
|
- <p>离开就意味着你将错过：</p>
|
|
|
- <ul class="miss-list">
|
|
|
- <li>💰 100万现金大奖</li>
|
|
|
- <li>🏠 豪华别墅一套</li>
|
|
|
- <li>🚗 限量版跑车</li>
|
|
|
- <li>💎 钻石珠宝礼盒</li>
|
|
|
- <li>🎪 永恒的广告体验</li>
|
|
|
- </ul>
|
|
|
- <p class="final-plea">再想想吧，机会难得！</p>
|
|
|
- </div>
|
|
|
- <div class="leave-dialog-buttons">
|
|
|
- <button @click="stayAndContinue" class="stay-button">留下来享受！</button>
|
|
|
- <button @click="confirmLeave" class="leave-button">我意已决</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 自定义通知 - 替代alert -->
|
|
|
- <div v-if="showCustomNotification" class="custom-notification">
|
|
|
- <div class="notification-content">
|
|
|
- <div class="notification-icon">🔔</div>
|
|
|
- <div class="notification-message">{{ customNotificationMessage }}</div>
|
|
|
- <button class="notification-close" @click="showCustomNotification = false">×</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 自定义恶搞对话框 - 替代confirm -->
|
|
|
- <div v-if="showPrankDialog" class="prank-dialog-overlay">
|
|
|
- <div class="prank-dialog">
|
|
|
- <div class="prank-dialog-header">
|
|
|
- <h3>🎭 恶搞提示</h3>
|
|
|
- </div>
|
|
|
- <div class="prank-dialog-content">
|
|
|
- <p>{{ prankDialogContent }}</p>
|
|
|
- </div>
|
|
|
- <div class="prank-dialog-buttons">
|
|
|
- <button @click="closePrankDialog(true)" class="prank-yes-button">是</button>
|
|
|
- <button @click="closePrankDialog(false)" class="prank-no-button">否</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 幸运转盘弹窗 -->
|
|
|
- <div v-if="showLuckyWheel" class="lucky-wheel-overlay">
|
|
|
- <div class="lucky-wheel-container">
|
|
|
- <div class="wheel-header">
|
|
|
- <h2>🎰 超级幸运转盘 🎰</h2>
|
|
|
- <button class="wheel-close" @click="closeLuckyWheel">❌</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="wheel-content">
|
|
|
- <div class="wheel-display" :class="{ 'spinning': wheelSpinning }">
|
|
|
- <div class="wheel-segment" v-for="(prize, index) in luckyWheelPrizes" :key="index">
|
|
|
- {{ prize.split(' ')[0] }}
|
|
|
- </div>
|
|
|
- <div class="wheel-pointer">👆</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="wheel-result" v-if="wheelResult">
|
|
|
- <h3>🎉 恭喜您获得：</h3>
|
|
|
- <p class="result-text">{{ wheelResult }}</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="wheel-buttons">
|
|
|
- <button class="spin-button" @click="spinWheel" :disabled="wheelSpinning">
|
|
|
- {{ wheelSpinning ? '转盘中...' : '🎲 开始转盘' }}
|
|
|
- </button>
|
|
|
- <button class="spin-again-button" @click="spinWheel">
|
|
|
- ✨ 再转一次
|
|
|
- </button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="wheel-tips">
|
|
|
- <p>💡 提示：每次转盘都有惊喜！</p>
|
|
|
- <p>🔥 连续转盘可获得更大奖品！</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.fake-ad-container {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
|
|
|
- background-size: 400% 400%;
|
|
|
- animation: gradientShift 3s ease infinite;
|
|
|
- overflow: hidden;
|
|
|
- font-family: 'Arial', sans-serif;
|
|
|
-}
|
|
|
-
|
|
|
-/* 背景渐变动画 */
|
|
|
-@keyframes gradientShift {
|
|
|
- 0% { background-position: 0% 50%; }
|
|
|
- 50% { background-position: 100% 50%; }
|
|
|
- 100% { background-position: 0% 50%; }
|
|
|
-}
|
|
|
-
|
|
|
-.header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 15px;
|
|
|
- background: linear-gradient(90deg, #ff6b6b, #feca57);
|
|
|
- box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
|
- position: relative;
|
|
|
- z-index: 100;
|
|
|
-}
|
|
|
-
|
|
|
-.back-btn {
|
|
|
- padding: 10px 20px;
|
|
|
- background: linear-gradient(45deg, #3498db, #2980b9);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 25px;
|
|
|
- cursor: pointer;
|
|
|
- font-weight: bold;
|
|
|
- box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
|
|
|
- transition: all 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.back-btn:hover {
|
|
|
- transform: scale(1.1);
|
|
|
- box-shadow: 0 6px 20px rgba(52, 152, 219, 0.6);
|
|
|
-}
|
|
|
-
|
|
|
-.annoying-banner {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- color: white;
|
|
|
- text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
|
|
-}
|
|
|
-
|
|
|
-/* 漂浮背景效果 */
|
|
|
-.background-effects {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- pointer-events: none;
|
|
|
-}
|
|
|
-
|
|
|
-.floating-money {
|
|
|
- position: absolute;
|
|
|
- font-size: 40px;
|
|
|
- opacity: 0.7;
|
|
|
- animation: float 6s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.floating-money:nth-child(1) { left: 10%; animation-delay: 0s; }
|
|
|
-.floating-money:nth-child(2) { left: 30%; animation-delay: 1s; }
|
|
|
-.floating-money:nth-child(3) { left: 50%; animation-delay: 2s; }
|
|
|
-.floating-money:nth-child(4) { left: 70%; animation-delay: 3s; }
|
|
|
-.floating-money:nth-child(5) { left: 90%; animation-delay: 4s; }
|
|
|
-
|
|
|
-@keyframes float {
|
|
|
- 0%, 100% { transform: translateY(100vh) rotate(0deg); }
|
|
|
- 50% { transform: translateY(-100px) rotate(180deg); }
|
|
|
-}
|
|
|
-
|
|
|
-.popup-container {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- pointer-events: none;
|
|
|
- z-index: 9999;
|
|
|
-}
|
|
|
-
|
|
|
-.crazy-popup {
|
|
|
- position: absolute;
|
|
|
- width: 320px;
|
|
|
- min-height: 200px;
|
|
|
- background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
|
|
|
- background-size: 400% 400%;
|
|
|
- animation: gradientShift 2s ease infinite;
|
|
|
- border-radius: 15px;
|
|
|
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
|
|
|
- border: 3px solid #fff;
|
|
|
- pointer-events: auto;
|
|
|
- overflow: hidden;
|
|
|
- transform-origin: center;
|
|
|
-}
|
|
|
-
|
|
|
-.popup-small { width: 280px; min-height: 180px; }
|
|
|
-.popup-medium { width: 350px; min-height: 220px; }
|
|
|
-.popup-large { width: 420px; min-height: 280px; }
|
|
|
-
|
|
|
-/* 不同类型弹窗的特殊样式 */
|
|
|
-.popup-urgent-winner {
|
|
|
- border: 5px solid #ff0000;
|
|
|
- box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
|
|
|
- animation: urgentPulse 1s infinite, gradientShift 2s ease infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.popup-fake-security {
|
|
|
- border: 3px solid #ffd700;
|
|
|
- background: linear-gradient(135deg, #ff4757, #ffa502);
|
|
|
-}
|
|
|
-
|
|
|
-.popup-celebrity-call {
|
|
|
- border: 3px solid #00ff00;
|
|
|
- background: linear-gradient(135deg, #26de81, #20bf6b);
|
|
|
- animation: phoneCall 2s infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.popup-virus-warning {
|
|
|
- border: 5px solid #ff0000;
|
|
|
- background: linear-gradient(135deg, #ff3838, #ff6b6b);
|
|
|
- animation: virusAlert 0.5s infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.popup-system-update {
|
|
|
- border: 3px solid #007bff;
|
|
|
- background: linear-gradient(135deg, #3742fa, #2f3542);
|
|
|
-}
|
|
|
-
|
|
|
-/* 疯狂头部样式 */
|
|
|
-.crazy-header {
|
|
|
- background: linear-gradient(90deg, #ff4757, #ff3838);
|
|
|
- color: white;
|
|
|
- padding: 12px 15px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- font-weight: bold;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.popup-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- animation: titleBlink 1s infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.fake-controls {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.fake-minimize, .fake-maximize {
|
|
|
- padding: 2px 6px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border-radius: 3px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.crazy-close {
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border: none;
|
|
|
- color: white;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- cursor: pointer;
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- transition: all 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.crazy-close:hover {
|
|
|
- background: rgba(255,255,255,0.4);
|
|
|
- transform: rotate(90deg);
|
|
|
-}
|
|
|
-
|
|
|
-/* 疯狂内容样式 */
|
|
|
-.crazy-body {
|
|
|
- padding: 20px;
|
|
|
- text-align: center;
|
|
|
- color: white;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.popup-icon {
|
|
|
- font-size: 48px;
|
|
|
- margin-bottom: 15px;
|
|
|
- animation: iconBounce 2s infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.popup-text {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 1.5;
|
|
|
- margin-bottom: 20px;
|
|
|
- text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
|
|
-}
|
|
|
-
|
|
|
-/* 弹窗按钮样式 */
|
|
|
-.popup-actions {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.action-btn {
|
|
|
- padding: 12px 20px;
|
|
|
- border: none;
|
|
|
- border-radius: 25px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- text-transform: uppercase;
|
|
|
- letter-spacing: 1px;
|
|
|
-}
|
|
|
-
|
|
|
-.winner-btn {
|
|
|
- background: linear-gradient(45deg, #ffd700, #ffb347);
|
|
|
- color: #333;
|
|
|
- animation: goldenShine 2s infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.security-btn {
|
|
|
- background: linear-gradient(45deg, #ff4757, #ff3838);
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.celebrity-btn {
|
|
|
- background: linear-gradient(45deg, #26de81, #20bf6b);
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.lucky-btn {
|
|
|
- background: linear-gradient(45deg, #3742fa, #2f3542);
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.urgent-btn {
|
|
|
- background: linear-gradient(45deg, #ff6348, #ff4757);
|
|
|
- color: white;
|
|
|
- animation: urgentGlow 1s infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.default-btn {
|
|
|
- background: linear-gradient(45deg, #48dbfb, #0abde3);
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.cancel-btn {
|
|
|
- background: linear-gradient(45deg, #747d8c, #57606f);
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.action-btn:hover {
|
|
|
- transform: translateY(-3px);
|
|
|
- box-shadow: 0 8px 25px rgba(0,0,0,0.2);
|
|
|
-}
|
|
|
-
|
|
|
-/* 假进度条 */
|
|
|
-.fake-progress {
|
|
|
- margin-top: 15px;
|
|
|
- padding: 10px;
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
- border-radius: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.progress-bar {
|
|
|
- width: 100%;
|
|
|
- height: 20px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border-radius: 10px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.progress-fill {
|
|
|
- height: 100%;
|
|
|
- width: 99.9%;
|
|
|
- background: linear-gradient(90deg, #26de81, #20bf6b);
|
|
|
- border-radius: 10px;
|
|
|
- animation: progressBlink 2s infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.progress-text {
|
|
|
- color: white;
|
|
|
- font-size: 12px;
|
|
|
- margin-top: 8px;
|
|
|
- display: block;
|
|
|
-}
|
|
|
-
|
|
|
-/* 假倒计时 */
|
|
|
-.fake-countdown {
|
|
|
- margin-top: 15px;
|
|
|
- padding: 10px;
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
- border-radius: 8px;
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.countdown-label {
|
|
|
- font-size: 14px;
|
|
|
- color: #feca57;
|
|
|
-}
|
|
|
-
|
|
|
-.countdown-timer {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #ff6348;
|
|
|
- animation: countdownBlink 1s infinite;
|
|
|
-}
|
|
|
-
|
|
|
-/* 移动弹窗动画 */
|
|
|
-.moving-popup {
|
|
|
- animation: crazyMove 3s infinite linear;
|
|
|
-}
|
|
|
-
|
|
|
-/* 动画关键帧 */
|
|
|
-@keyframes urgentPulse {
|
|
|
- 0%, 100% {
|
|
|
- transform: scale(1);
|
|
|
- box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: scale(1.05);
|
|
|
- box-shadow: 0 0 30px rgba(255, 0, 0, 0.9);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes phoneCall {
|
|
|
- 0%, 100% { transform: rotate(0deg); }
|
|
|
- 25% { transform: rotate(-5deg); }
|
|
|
- 75% { transform: rotate(5deg); }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes virusAlert {
|
|
|
- 0%, 100% { background-position: 0% 50%; }
|
|
|
- 50% { background-position: 100% 50%; }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes titleBlink {
|
|
|
- 0%, 50% { opacity: 1; }
|
|
|
- 51%, 100% { opacity: 0.7; }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes iconBounce {
|
|
|
- 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
|
|
- 40% { transform: translateY(-10px); }
|
|
|
- 60% { transform: translateY(-5px); }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes goldenShine {
|
|
|
- 0% { background-position: -200px; }
|
|
|
- 100% { background-position: 200px; }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes urgentGlow {
|
|
|
- 0%, 100% { box-shadow: 0 0 5px rgba(255, 99, 72, 0.5); }
|
|
|
- 50% { box-shadow: 0 0 20px rgba(255, 99, 72, 0.8); }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes progressBlink {
|
|
|
- 0%, 50% { width: 99.9%; }
|
|
|
- 51%, 100% { width: 99.8%; }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes countdownBlink {
|
|
|
- 0%, 50% { color: #ff6348; }
|
|
|
- 51%, 100% { color: #feca57; }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes crazyMove {
|
|
|
- 0% { transform: translate(0, 0) rotate(0deg); }
|
|
|
- 25% { transform: translate(50px, -30px) rotate(5deg); }
|
|
|
- 50% { transform: translate(-30px, 50px) rotate(-5deg); }
|
|
|
- 75% { transform: translate(40px, -20px) rotate(3deg); }
|
|
|
- 100% { transform: translate(0, 0) rotate(0deg); }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes gradientShift {
|
|
|
- 0% { background-position: 0% 50%; }
|
|
|
- 50% { background-position: 100% 50%; }
|
|
|
- 100% { background-position: 0% 50%; }
|
|
|
-}
|
|
|
-
|
|
|
-/* 响应式设计 */
|
|
|
-@media (max-width: 768px) {
|
|
|
- .crazy-popup {
|
|
|
- width: 280px;
|
|
|
- min-height: 180px;
|
|
|
- }
|
|
|
-
|
|
|
- .popup-large {
|
|
|
- width: 300px;
|
|
|
- min-height: 200px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn {
|
|
|
- padding: 10px 15px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .popup-icon {
|
|
|
- font-size: 36px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 主广告超级恶搞样式 */
|
|
|
-.main-ad {
|
|
|
- position: fixed;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- width: 90%;
|
|
|
- max-width: 600px;
|
|
|
- background: linear-gradient(135deg, #fff, #f8f9fa);
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 20px 60px rgba(0,0,0,0.6);
|
|
|
- z-index: 9999;
|
|
|
- text-align: center;
|
|
|
- padding: 30px;
|
|
|
- border: 5px solid #ff6b6b;
|
|
|
- animation: megaPulse 1s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes megaPulse {
|
|
|
- 0%, 100% { transform: translate(-50%, -50%) scale(1); }
|
|
|
- 50% { transform: translate(-50%, -50%) scale(1.05); }
|
|
|
-}
|
|
|
-
|
|
|
-.rainbow-text {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- background-clip: text;
|
|
|
- font-size: 28px;
|
|
|
- font-weight: bold;
|
|
|
- animation: rainbowShift 2s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes rainbowShift {
|
|
|
- 0%, 100% { filter: hue-rotate(0deg); }
|
|
|
- 50% { filter: hue-rotate(180deg); }
|
|
|
-}
|
|
|
-
|
|
|
-.mega-text {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: bold;
|
|
|
- color: #e74c3c;
|
|
|
- margin: 15px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.prize-showcase {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- gap: 10px;
|
|
|
- margin: 20px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.prize-item {
|
|
|
- background: linear-gradient(45deg, #feca57, #ff9ff3);
|
|
|
- padding: 10px;
|
|
|
- border-radius: 10px;
|
|
|
- font-weight: bold;
|
|
|
- color: #2c3e50;
|
|
|
- border: 2px solid #ff6b6b;
|
|
|
-}
|
|
|
-
|
|
|
-.urgent-text {
|
|
|
- color: #e74c3c;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 16px;
|
|
|
- margin: 15px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.mega-button {
|
|
|
- padding: 15px 30px;
|
|
|
- background: linear-gradient(45deg, #e74c3c, #c0392b);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 30px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- cursor: pointer;
|
|
|
- box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
|
|
|
- transition: all 0.3s ease;
|
|
|
- margin: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.mega-button:hover {
|
|
|
- transform: scale(1.1);
|
|
|
- box-shadow: 0 12px 35px rgba(231, 76, 60, 0.6);
|
|
|
-}
|
|
|
-
|
|
|
-.fake-timer {
|
|
|
- background: #2c3e50;
|
|
|
- color: #ecf0f1;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 8px;
|
|
|
- font-family: 'Courier New', monospace;
|
|
|
- font-weight: bold;
|
|
|
- margin-top: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.close-main-ad {
|
|
|
- position: absolute;
|
|
|
- top: -15px;
|
|
|
- right: -15px;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 50%;
|
|
|
- background: linear-gradient(45deg, #2c3e50, #34495e);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: bold;
|
|
|
- cursor: pointer;
|
|
|
- box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
|
|
-}
|
|
|
-
|
|
|
-/* 全屏覆盖恶搞广告 */
|
|
|
-.overlay-ad {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(45deg, rgba(231, 76, 60, 0.95), rgba(155, 89, 182, 0.95));
|
|
|
- z-index: 10000;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
-}
|
|
|
-
|
|
|
-.overlay-content {
|
|
|
- text-align: center;
|
|
|
- padding: 40px;
|
|
|
- max-width: 600px;
|
|
|
- background: rgba(255, 255, 255, 0.95);
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
|
|
- animation: overlayBounce 2s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes overlayBounce {
|
|
|
- 0%, 100% { transform: scale(1); }
|
|
|
- 50% { transform: scale(1.05); }
|
|
|
-}
|
|
|
-
|
|
|
-.prize-wheel {
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- margin: 20px auto;
|
|
|
- border-radius: 50%;
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
|
|
|
- animation: spin 3s linear infinite;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 40px;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes spin {
|
|
|
- 0% { transform: rotate(0deg); }
|
|
|
- 100% { transform: rotate(360deg); }
|
|
|
-}
|
|
|
-
|
|
|
-.warning-text {
|
|
|
- color: #e74c3c;
|
|
|
- font-weight: bold;
|
|
|
- margin-top: 20px;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 假病毒警告 */
|
|
|
-.virus-warning {
|
|
|
- position: fixed;
|
|
|
- top: 20px;
|
|
|
- right: 20px;
|
|
|
- background: linear-gradient(45deg, #e74c3c, #c0392b);
|
|
|
- color: white;
|
|
|
- padding: 20px;
|
|
|
- border-radius: 10px;
|
|
|
- box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
|
|
|
- z-index: 9998;
|
|
|
- text-align: center;
|
|
|
- border: 3px solid #fff;
|
|
|
-}
|
|
|
-
|
|
|
-/* 闪烁文本动画 */
|
|
|
-.blink-text {
|
|
|
- animation: blink 1s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes blink {
|
|
|
- 0%, 100% { opacity: 1; }
|
|
|
- 50% { opacity: 0.3; }
|
|
|
-}
|
|
|
-
|
|
|
-.blink-button {
|
|
|
- animation: buttonPulse 1.5s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes buttonPulse {
|
|
|
- 0%, 100% { transform: scale(1); box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4); }
|
|
|
- 50% { transform: scale(1.1); box-shadow: 0 12px 35px rgba(231, 76, 60, 0.8); }
|
|
|
-}
|
|
|
-
|
|
|
-/* 响应式设计 */
|
|
|
-@media (max-width: 768px) {
|
|
|
- .ad-popup {
|
|
|
- width: 280px;
|
|
|
- }
|
|
|
-
|
|
|
- .main-ad {
|
|
|
- width: 95%;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .rainbow-text {
|
|
|
- font-size: 22px;
|
|
|
- }
|
|
|
-
|
|
|
- .mega-text {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .prize-showcase {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- }
|
|
|
-
|
|
|
- .mega-button {
|
|
|
- padding: 12px 25px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .overlay-content {
|
|
|
- padding: 30px;
|
|
|
- margin: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .prize-wheel {
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- font-size: 30px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes bounceIn {
|
|
|
- 0% { transform: scale(0.3); opacity: 0; }
|
|
|
- 50% { transform: scale(1.05); opacity: 0.8; }
|
|
|
- 70% { transform: scale(0.9); opacity: 0.9; }
|
|
|
- 100% { transform: scale(1); opacity: 1; }
|
|
|
-}
|
|
|
-
|
|
|
-/* 自定义离开确认对话框样式 */
|
|
|
-.leave-dialog-overlay {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- z-index: 10000;
|
|
|
- animation: fadeIn 0.3s ease-in-out;
|
|
|
-}
|
|
|
-
|
|
|
-.leave-dialog {
|
|
|
- background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
|
|
|
- background-size: 400% 400%;
|
|
|
- animation: gradientShift 3s ease infinite, dialogBounce 0.5s ease-out;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 30px;
|
|
|
- max-width: 500px;
|
|
|
- width: 90%;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
|
- border: 3px solid #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.leave-dialog-header h3 {
|
|
|
- margin: 0 0 20px 0;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
- color: #fff;
|
|
|
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
-}
|
|
|
-
|
|
|
-.leave-dialog-content {
|
|
|
- margin-bottom: 25px;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.leave-dialog-content p {
|
|
|
- margin: 10px 0;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.miss-list {
|
|
|
- list-style: none;
|
|
|
- padding: 0;
|
|
|
- margin: 15px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.miss-list li {
|
|
|
- margin: 8px 0;
|
|
|
- padding: 8px;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- border-radius: 10px;
|
|
|
- font-weight: bold;
|
|
|
- animation: listItemPulse 2s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.miss-list li:nth-child(odd) {
|
|
|
- animation-delay: 0.5s;
|
|
|
-}
|
|
|
-
|
|
|
-.final-plea {
|
|
|
- font-style: italic;
|
|
|
- color: #ffff00;
|
|
|
- font-size: 18px;
|
|
|
- text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
|
|
|
-}
|
|
|
-
|
|
|
-.leave-dialog-buttons {
|
|
|
- display: flex;
|
|
|
- gap: 15px;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.leave-dialog-buttons button {
|
|
|
- padding: 12px 25px;
|
|
|
- border: none;
|
|
|
- border-radius: 25px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- text-transform: uppercase;
|
|
|
-}
|
|
|
-
|
|
|
-.stay-button {
|
|
|
- background: linear-gradient(45deg, #00f260, #0575e6);
|
|
|
- color: white;
|
|
|
- box-shadow: 0 4px 15px rgba(0, 242, 96, 0.4);
|
|
|
-}
|
|
|
-
|
|
|
-.stay-button:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 6px 20px rgba(0, 242, 96, 0.6);
|
|
|
-}
|
|
|
-
|
|
|
-.leave-button {
|
|
|
- background: linear-gradient(45deg, #ff416c, #ff4b2b);
|
|
|
- color: white;
|
|
|
- box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
|
|
|
-}
|
|
|
-
|
|
|
-.leave-button:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 6px 20px rgba(255, 65, 108, 0.6);
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes gradientShift {
|
|
|
- 0% { background-position: 0% 50%; }
|
|
|
- 50% { background-position: 100% 50%; }
|
|
|
- 100% { background-position: 0% 50%; }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes dialogBounce {
|
|
|
- 0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
|
|
|
- 50% { transform: scale(1.1) rotate(5deg); opacity: 0.8; }
|
|
|
- 100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes listItemPulse {
|
|
|
- 0%, 100% { transform: scale(1); }
|
|
|
- 50% { transform: scale(1.05); }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes fadeIn {
|
|
|
- from { opacity: 0; }
|
|
|
- to { opacity: 1; }
|
|
|
-}
|
|
|
-
|
|
|
-/* 响应式设计 */
|
|
|
-@media (max-width: 768px) {
|
|
|
- .leave-dialog {
|
|
|
- padding: 20px;
|
|
|
- margin: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .leave-dialog-header h3 {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .leave-dialog-content {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .leave-dialog-buttons {
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
-
|
|
|
- .leave-dialog-buttons button {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 自定义通知 - 替代alert */
|
|
|
-.custom-notification {
|
|
|
- position: fixed;
|
|
|
- top: 20px;
|
|
|
- right: 20px;
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
- padding: 10px 20px;
|
|
|
- border-radius: 10px;
|
|
|
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
|
- z-index: 10000;
|
|
|
-}
|
|
|
-
|
|
|
-.notification-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.notification-icon {
|
|
|
- font-size: 24px;
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.notification-message {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.notification-close {
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- font-size: 20px;
|
|
|
- cursor: pointer;
|
|
|
- margin-left: auto;
|
|
|
-}
|
|
|
-
|
|
|
-/* 自定义恶搞对话框 - 替代confirm */
|
|
|
-.prank-dialog-overlay {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- z-index: 10000;
|
|
|
- animation: fadeIn 0.3s ease-in-out;
|
|
|
-}
|
|
|
-
|
|
|
-.prank-dialog {
|
|
|
- background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
|
|
|
- background-size: 400% 400%;
|
|
|
- animation: gradientShift 3s ease infinite, dialogBounce 0.5s ease-out;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 30px;
|
|
|
- max-width: 500px;
|
|
|
- width: 90%;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
|
- border: 3px solid #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.prank-dialog-header h3 {
|
|
|
- margin: 0 0 20px 0;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
- color: #fff;
|
|
|
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
-}
|
|
|
-
|
|
|
-.prank-dialog-content {
|
|
|
- margin-bottom: 25px;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.prank-dialog-buttons {
|
|
|
- display: flex;
|
|
|
- gap: 15px;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.prank-yes-button, .prank-no-button {
|
|
|
- padding: 12px 25px;
|
|
|
- border: none;
|
|
|
- border-radius: 25px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- text-transform: uppercase;
|
|
|
-}
|
|
|
-
|
|
|
-.prank-yes-button {
|
|
|
- background: linear-gradient(45deg, #00f260, #0575e6);
|
|
|
- color: white;
|
|
|
- box-shadow: 0 4px 15px rgba(0, 242, 96, 0.4);
|
|
|
-}
|
|
|
-
|
|
|
-.prank-yes-button:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 6px 20px rgba(0, 242, 96, 0.6);
|
|
|
-}
|
|
|
-
|
|
|
-.prank-no-button {
|
|
|
- background: linear-gradient(45deg, #ff416c, #ff4b2b);
|
|
|
- color: white;
|
|
|
- box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
|
|
|
-}
|
|
|
-
|
|
|
-.prank-no-button:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 6px 20px rgba(255, 65, 108, 0.6);
|
|
|
-}
|
|
|
-
|
|
|
-/* 自定义恶搞对话框 - 替代confirm */
|
|
|
-.prank-dialog-overlay {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- z-index: 10000;
|
|
|
- animation: fadeIn 0.3s ease-in-out;
|
|
|
-}
|
|
|
-
|
|
|
-.prank-dialog {
|
|
|
- background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
|
|
|
- background-size: 400% 400%;
|
|
|
- animation: gradientShift 3s ease infinite, dialogBounce 0.5s ease-out;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 30px;
|
|
|
- max-width: 500px;
|
|
|
- width: 90%;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
|
- border: 3px solid #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.prank-dialog-header h3 {
|
|
|
- margin: 0 0 20px 0;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
- color: #fff;
|
|
|
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
-}
|
|
|
-
|
|
|
-.prank-dialog-content {
|
|
|
- margin-bottom: 25px;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.prank-dialog-buttons {
|
|
|
- display: flex;
|
|
|
- gap: 15px;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.prank-yes-button, .prank-no-button {
|
|
|
- padding: 12px 25px;
|
|
|
- border: none;
|
|
|
- border-radius: 25px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- text-transform: uppercase;
|
|
|
-}
|
|
|
-
|
|
|
-.prank-yes-button {
|
|
|
- background: linear-gradient(45deg, #00f260, #0575e6);
|
|
|
- color: white;
|
|
|
- box-shadow: 0 4px 15px rgba(0, 242, 96, 0.4);
|
|
|
-}
|
|
|
-
|
|
|
-.prank-yes-button:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 6px 20px rgba(0, 242, 96, 0.6);
|
|
|
-}
|
|
|
-
|
|
|
-.prank-no-button {
|
|
|
- background: linear-gradient(45deg, #ff416c, #ff4b2b);
|
|
|
- color: white;
|
|
|
- box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
|
|
|
-}
|
|
|
-
|
|
|
-.prank-no-button:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 6px 20px rgba(255, 65, 108, 0.6);
|
|
|
-}
|
|
|
-
|
|
|
-/* 超级恶心模式新增样式 */
|
|
|
-
|
|
|
-/* 散落的假关闭按钮 */
|
|
|
-.scattered-fake-button {
|
|
|
- position: fixed;
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- background: linear-gradient(45deg, #e74c3c, #c0392b);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 50%;
|
|
|
- font-size: 24px;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 9999;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
|
|
|
- animation: floatAroundCrazy 3s ease-in-out infinite;
|
|
|
- transition: all 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.scattered-fake-button:hover {
|
|
|
- transform: scale(1.3);
|
|
|
- background: linear-gradient(45deg, #ff0000, #cc0000);
|
|
|
- box-shadow: 0 6px 20px rgba(255, 0, 0, 0.6);
|
|
|
-}
|
|
|
-
|
|
|
-.scattered-fake-button.clicked {
|
|
|
- background: linear-gradient(45deg, #2ecc71, #27ae60);
|
|
|
- animation: clickedExplosion 1s ease-out;
|
|
|
-}
|
|
|
-
|
|
|
-.scattered-fake-button.moving {
|
|
|
- animation: crazyMove 2s linear infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes floatAroundCrazy {
|
|
|
- 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
|
|
- 25% { transform: translate(20px, -30px) rotate(90deg) scale(1.1); }
|
|
|
- 50% { transform: translate(-20px, 20px) rotate(180deg) scale(0.9); }
|
|
|
- 75% { transform: translate(30px, 10px) rotate(270deg) scale(1.2); }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes clickedExplosion {
|
|
|
- 0% { transform: scale(1) rotate(0deg); }
|
|
|
- 25% { transform: scale(2) rotate(90deg); opacity: 1; }
|
|
|
- 50% { transform: scale(3) rotate(180deg); opacity: 0.5; }
|
|
|
- 75% { transform: scale(4) rotate(270deg); opacity: 0.2; }
|
|
|
- 100% { transform: scale(1) rotate(360deg); opacity: 1; }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes crazyMove {
|
|
|
- 0% { transform: translate(0, 0) rotate(0deg); }
|
|
|
- 25% { transform: translate(100px, -50px) rotate(180deg); }
|
|
|
- 50% { transform: translate(-100px, 100px) rotate(360deg); }
|
|
|
- 75% { transform: translate(50px, -100px) rotate(540deg); }
|
|
|
- 100% { transform: translate(0, 0) rotate(720deg); }
|
|
|
-}
|
|
|
-
|
|
|
-/* 假加载屏幕 */
|
|
|
-.fake-loading-overlay {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(45deg, #1a1a1a, #2c3e50, #34495e);
|
|
|
- background-size: 400% 400%;
|
|
|
- animation: gradientShift 2s ease infinite;
|
|
|
- z-index: 10003;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.fake-loading-content {
|
|
|
- text-align: center;
|
|
|
- color: white;
|
|
|
- padding: 50px;
|
|
|
- background: rgba(0, 0, 0, 0.9);
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
|
|
|
- border: 3px solid #e74c3c;
|
|
|
- animation: loadingContentPulse 1.5s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.loading-spinner {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- margin: 0 auto 30px;
|
|
|
- border: 10px solid #3498db;
|
|
|
- border-top: 10px solid #e74c3c;
|
|
|
- border-right: 10px solid #f39c12;
|
|
|
- border-bottom: 10px solid #2ecc71;
|
|
|
- border-radius: 50%;
|
|
|
- animation: spinCrazy 0.8s linear infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes spinCrazy {
|
|
|
- 0% { transform: rotate(0deg) scale(1); }
|
|
|
- 25% { transform: rotate(90deg) scale(1.1); }
|
|
|
- 50% { transform: rotate(180deg) scale(0.9); }
|
|
|
- 75% { transform: rotate(270deg) scale(1.2); }
|
|
|
- 100% { transform: rotate(360deg) scale(1); }
|
|
|
-}
|
|
|
-
|
|
|
-.loading-bar {
|
|
|
- width: 400px;
|
|
|
- height: 30px;
|
|
|
- background: #34495e;
|
|
|
- border-radius: 15px;
|
|
|
- margin: 25px auto;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
|
|
|
-}
|
|
|
-
|
|
|
-.loading-progress {
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(45deg, #e74c3c, #f39c12, #2ecc71, #3498db);
|
|
|
- background-size: 400% 400%;
|
|
|
- width: 99.8%;
|
|
|
- animation: loadingProgressShift 2s ease-in-out infinite;
|
|
|
- border-radius: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes loadingProgressShift {
|
|
|
- 0%, 100% { background-position: 0% 50%; width: 99.8%; }
|
|
|
- 50% { background-position: 100% 50%; width: 99.85%; }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes loadingContentPulse {
|
|
|
- 0%, 100% { transform: scale(1); }
|
|
|
- 50% { transform: scale(1.02); }
|
|
|
-}
|
|
|
-
|
|
|
-/* 超级恶心模式指示器 */
|
|
|
-.ultra-mode-indicator {
|
|
|
- position: fixed;
|
|
|
- top: 50%;
|
|
|
- left: 20px;
|
|
|
- transform: translateY(-50%);
|
|
|
- background: rgba(0, 0, 0, 0.9);
|
|
|
- padding: 20px;
|
|
|
- border-radius: 15px;
|
|
|
- z-index: 9998;
|
|
|
- border: 3px solid #e74c3c;
|
|
|
- animation: indicatorPulse 2s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.mode-badge {
|
|
|
- background: linear-gradient(45deg, #e74c3c, #f39c12);
|
|
|
- color: white;
|
|
|
- padding: 10px 15px;
|
|
|
- border-radius: 20px;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 15px;
|
|
|
- animation: badgeBlink 1s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.annoyance-meter {
|
|
|
- position: relative;
|
|
|
- width: 200px;
|
|
|
- height: 25px;
|
|
|
- background: #34495e;
|
|
|
- border-radius: 12px;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.meter-fill {
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(45deg, #2ecc71, #f39c12, #e74c3c);
|
|
|
- transition: width 0.5s ease;
|
|
|
- border-radius: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.meter-text {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- color: white;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 12px;
|
|
|
- text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes indicatorPulse {
|
|
|
- 0%, 100% { transform: translateY(-50%) scale(1); }
|
|
|
- 50% { transform: translateY(-50%) scale(1.05); }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes badgeBlink {
|
|
|
- 0%, 100% { opacity: 1; }
|
|
|
- 50% { opacity: 0.7; }
|
|
|
-}
|
|
|
-
|
|
|
-/* 移动文本容器 */
|
|
|
-.moving-text-container {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- pointer-events: none;
|
|
|
- z-index: 9997;
|
|
|
-}
|
|
|
-
|
|
|
-.moving-text {
|
|
|
- position: absolute;
|
|
|
- font-size: 28px;
|
|
|
- font-weight: bold;
|
|
|
- color: #e74c3c;
|
|
|
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
|
- animation: textCrazyMove 6s linear infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.moving-text:nth-child(1) {
|
|
|
- left: 5%;
|
|
|
- animation-delay: 0s;
|
|
|
- color: #e74c3c;
|
|
|
-}
|
|
|
-
|
|
|
-.moving-text:nth-child(2) {
|
|
|
- left: 25%;
|
|
|
- animation-delay: 1s;
|
|
|
- color: #f39c12;
|
|
|
-}
|
|
|
-
|
|
|
-.moving-text:nth-child(3) {
|
|
|
- left: 45%;
|
|
|
- animation-delay: 2s;
|
|
|
- color: #2ecc71;
|
|
|
-}
|
|
|
-
|
|
|
-.moving-text:nth-child(4) {
|
|
|
- left: 65%;
|
|
|
- animation-delay: 3s;
|
|
|
- color: #3498db;
|
|
|
-}
|
|
|
-
|
|
|
-.moving-text:nth-child(5) {
|
|
|
- left: 85%;
|
|
|
- animation-delay: 4s;
|
|
|
- color: #9b59b6;
|
|
|
-}
|
|
|
-
|
|
|
-.moving-text:nth-child(6) {
|
|
|
- left: 95%;
|
|
|
- animation-delay: 5s;
|
|
|
- color: #e91e63;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes textCrazyMove {
|
|
|
- 0% { transform: translateY(100vh) rotate(0deg) scale(1); opacity: 1; }
|
|
|
- 25% { transform: translateY(75vh) rotate(90deg) scale(1.2); opacity: 0.8; }
|
|
|
- 50% { transform: translateY(50vh) rotate(180deg) scale(0.8); opacity: 0.9; }
|
|
|
- 75% { transform: translateY(25vh) rotate(270deg) scale(1.5); opacity: 0.7; }
|
|
|
- 100% { transform: translateY(-50px) rotate(360deg) scale(1); opacity: 0; }
|
|
|
-}
|
|
|
-
|
|
|
-/* 移动和震动效果 */
|
|
|
-.moving {
|
|
|
- animation: elementMove 4s ease-in-out infinite !important;
|
|
|
-}
|
|
|
-
|
|
|
-.shake {
|
|
|
- animation: violentShake 0.3s ease-in-out infinite !important;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes elementMove {
|
|
|
- 0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
|
- 25% { transform: translate(15px, -10px) rotate(2deg); }
|
|
|
- 50% { transform: translate(-10px, 15px) rotate(-2deg); }
|
|
|
- 75% { transform: translate(10px, -5px) rotate(1deg); }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes violentShake {
|
|
|
- 0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
|
- 10% { transform: translate(-3px, 2px) rotate(1deg); }
|
|
|
- 20% { transform: translate(3px, -2px) rotate(-1deg); }
|
|
|
- 30% { transform: translate(-2px, 3px) rotate(1deg); }
|
|
|
- 40% { transform: translate(2px, -3px) rotate(-1deg); }
|
|
|
- 50% { transform: translate(-3px, -2px) rotate(1deg); }
|
|
|
- 60% { transform: translate(3px, 2px) rotate(-1deg); }
|
|
|
- 70% { transform: translate(-2px, -3px) rotate(1deg); }
|
|
|
- 80% { transform: translate(2px, 3px) rotate(-1deg); }
|
|
|
- 90% { transform: translate(-3px, 2px) rotate(1deg); }
|
|
|
-}
|
|
|
-
|
|
|
-/* 全局恶心效果增强 */
|
|
|
-.fake-ad-container.ultra-annoying {
|
|
|
- animation: containerCrazy 3s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes containerCrazy {
|
|
|
- 0%, 100% {
|
|
|
- transform: translateX(0) scale(1);
|
|
|
- filter: hue-rotate(0deg);
|
|
|
- }
|
|
|
- 25% {
|
|
|
- transform: translateX(-3px) scale(1.01);
|
|
|
- filter: hue-rotate(90deg);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: translateX(3px) scale(0.99);
|
|
|
- filter: hue-rotate(180deg);
|
|
|
- }
|
|
|
- 75% {
|
|
|
- transform: translateX(-2px) scale(1.01);
|
|
|
- filter: hue-rotate(270deg);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 快速变色效果增强 */
|
|
|
-.rapid-color-change {
|
|
|
- animation: rapidColorCrazy 0.3s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes rapidColorCrazy {
|
|
|
- 0% { filter: hue-rotate(0deg) saturate(2) brightness(1.2); }
|
|
|
- 20% { filter: hue-rotate(72deg) saturate(3) brightness(0.8); }
|
|
|
- 40% { filter: hue-rotate(144deg) saturate(1.5) brightness(1.5); }
|
|
|
- 60% { filter: hue-rotate(216deg) saturate(2.5) brightness(0.6); }
|
|
|
- 80% { filter: hue-rotate(288deg) saturate(1.8) brightness(1.3); }
|
|
|
- 100% { filter: hue-rotate(360deg) saturate(2) brightness(1.2); }
|
|
|
-}
|
|
|
-
|
|
|
-/* 响应式设计 */
|
|
|
-@media (max-width: 768px) {
|
|
|
- .scattered-fake-button {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .fake-loading-content {
|
|
|
- padding: 30px;
|
|
|
- margin: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .loading-spinner {
|
|
|
- width: 70px;
|
|
|
- height: 70px;
|
|
|
- }
|
|
|
-
|
|
|
- .loading-bar {
|
|
|
- width: 280px;
|
|
|
- height: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .moving-text {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .ultra-mode-indicator {
|
|
|
- left: 10px;
|
|
|
- padding: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .annoyance-meter {
|
|
|
- width: 150px;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 幸运转盘弹窗 */
|
|
|
-.lucky-wheel-overlay {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- z-index: 10001;
|
|
|
- animation: fadeIn 0.3s ease-in-out;
|
|
|
-}
|
|
|
-
|
|
|
-.lucky-wheel-container {
|
|
|
- background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
|
|
|
- background-size: 400% 400%;
|
|
|
- animation: gradientShift 3s ease infinite, dialogBounce 0.5s ease-out;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 30px;
|
|
|
- max-width: 500px;
|
|
|
- width: 90%;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
|
- border: 3px solid #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.wheel-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 12px;
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ee5a52);
|
|
|
- color: white;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.wheel-close {
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border: none;
|
|
|
- color: white;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- cursor: pointer;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.wheel-content {
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.wheel-display {
|
|
|
- position: relative;
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- margin: 0 auto;
|
|
|
- border-radius: 50%;
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
|
|
|
- animation: spin 3s linear infinite;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 40px;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes spin {
|
|
|
- 0% { transform: rotate(0deg); }
|
|
|
- 100% { transform: rotate(360deg); }
|
|
|
-}
|
|
|
-
|
|
|
-.wheel-pointer {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- font-size: 30px;
|
|
|
- color: white;
|
|
|
- animation: pointerMove 3s linear infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes pointerMove {
|
|
|
- 0% { transform: translate(-50%, -50%) rotate(0deg); }
|
|
|
- 50% { transform: translate(-50%, -50%) rotate(180deg); }
|
|
|
- 100% { transform: translate(-50%, -50%) rotate(360deg); }
|
|
|
-}
|
|
|
-
|
|
|
-.wheel-result {
|
|
|
- margin-top: 20px;
|
|
|
- color: white;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.result-text {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 18px;
|
|
|
-}
|
|
|
-
|
|
|
-.wheel-buttons {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.spin-button, .spin-again-button {
|
|
|
- flex: 1;
|
|
|
- padding: 12px 25px;
|
|
|
- border: none;
|
|
|
- border-radius: 25px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.spin-button:hover, .spin-again-button:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 6px 20px rgba(255, 65, 108, 0.6);
|
|
|
-}
|
|
|
-
|
|
|
-.wheel-tips {
|
|
|
- margin-top: 20px;
|
|
|
- color: white;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-</style>
|
