添加酷炫背景

start.bat

@@ -1,3 +1,3 @@
 @echo off
 chcp 65001
-python app.py 
+python app.py

static/css/particle-bg.css

@@ -0,0 +1,199 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #000;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    position: relative;
+    overflow-x: hidden;
+    cursor: none; /* 隐藏默认光标 */
+}
+
+/* 自定义光标 */
+.custom-cursor {
+    position: fixed;
+    width: auto;
+    height: auto;
+    pointer-events: none;
+    z-index: 9999;
+    font-size: 14px;
+    color: #fff;
+    text-shadow: 0 0 5px rgba(0, 123, 255, 0.7);
+    transition: transform 0.1s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(13, 110, 253, 0.2);
+    padding: 3px 8px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(2px);
+    white-space: nowrap;
+}
+
+/* 左上角固定文字 */
+.corner-text {
+    position: fixed;
+    top: 15px;
+    left: 15px;
+    font-size: 16px;
+    color: #fff;
+    text-shadow: 0 0 5px rgba(0, 123, 255, 0.7);
+    z-index: 9998;
+    opacity: 0;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    background-color: rgba(13, 110, 253, 0.2);
+    padding: 5px 10px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(2px);
+    transform: translateY(-20px);
+}
+
+.corner-text.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+#particles-js {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
+/* Adjust card styles for dark theme */
+.card {
+    background-color: rgba(30, 30, 30, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: default; /* 在卡片上显示默认指针 */
+}
+
+/* 鼠标悬停时的缩放效果 */
+.card:hover {
+    transform: scale(1.03);
+    box-shadow: 0 8px 16px rgba(0, 123, 255, 0.3);
+}
+
+.card-header {
+    background-color: rgba(40, 40, 40, 0.8);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.card-body {
+    color: #f0f0f0;
+}
+
+/* Adjust form elements for dark theme */
+.form-control {
+    background-color: rgba(50, 50, 50, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: #fff;
+    cursor: text; /* 在输入框上显示文本指针 */
+}
+
+.form-control:focus {
+    background-color: rgba(60, 60, 60, 0.8);
+    color: #fff;
+    border-color: rgba(0, 123, 255, 0.5);
+    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
+}
+
+.form-text {
+    color: #aaa;
+}
+
+/* Adjust buttons for dark theme */
+.btn-primary {
+    background-color: #0d6efd;
+    border-color: #0a58ca;
+    transition: transform 0.2s ease;
+    cursor: pointer; /* 在按钮上显示指针 */
+}
+
+.btn-primary:hover {
+    transform: scale(1.05);
+}
+
+.btn-success {
+    background-color: #198754;
+    border-color: #146c43;
+    transition: transform 0.2s ease;
+    cursor: pointer; /* 在按钮上显示指针 */
+}
+
+.btn-success:hover {
+    transform: scale(1.05);
+}
+
+.btn-secondary {
+    background-color: #6c757d;
+    border-color: #565e64;
+    transition: transform 0.2s ease;
+    cursor: pointer; /* 在按钮上显示指针 */
+}
+
+.btn-secondary:hover {
+    transform: scale(1.05);
+}
+
+/* 表单元素的指针样式 */
+input[type="radio"], 
+input[type="checkbox"], 
+label {
+    cursor: pointer; /* 在表单元素上显示指针 */
+}
+
+/* Adjust text colors */
+h2, h4, h5 {
+    color: #fff;
+}
+
+pre {
+    color: #f0f0f0;
+    background-color: rgba(40, 40, 40, 0.5);
+    padding: 15px;
+    border-radius: 5px;
+}
+
+/* Adjust form labels and radio buttons */
+.form-label, .form-check-label {
+    color: #f0f0f0;
+}
+
+.form-check-input:checked {
+    background-color: #0d6efd;
+    border-color: #0a58ca;
+}
+
+/* Adjust alert messages */
+.alert {
+    background-color: rgba(40, 40, 40, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #f0f0f0;
+}
+
+.alert-success {
+    background-color: rgba(25, 135, 84, 0.3);
+    border-color: rgba(25, 135, 84, 0.5);
+}
+
+.alert-danger {
+    background-color: rgba(220, 53, 69, 0.3);
+    border-color: rgba(220, 53, 69, 0.5);
+}
+
+.alert-warning {
+    background-color: rgba(255, 193, 7, 0.3);
+    border-color: rgba(255, 193, 7, 0.5);
+    color: #f0f0f0;
+}
+
+.alert-info {
+    background-color: rgba(13, 202, 240, 0.3);
+    border-color: rgba(13, 202, 240, 0.5);
+} 

static/js/cursor-effects.js

@@ -0,0 +1,86 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // 创建自定义光标元素
+    const customCursor = document.createElement('div');
+    customCursor.className = 'custom-cursor';
+    customCursor.textContent = '尚美娱乐';
+    document.body.appendChild(customCursor);
+
+    // 创建左上角固定文字元素
+    const cornerText = document.createElement('div');
+    cornerText.className = 'corner-text';
+    cornerText.textContent = '尚美娱乐';
+    document.body.appendChild(cornerText);
+
+    // 获取所有卡片元素
+    const cards = document.querySelectorAll('.card');
+    
+    // 鼠标移动时的位置变量
+    let mouseX = 0;
+    let mouseY = 0;
+    let cursorX = 0;
+    let cursorY = 0;
+    
+    // 平滑跟随效果
+    function animate() {
+        // 平滑跟随效果，使光标移动更自然
+        const distX = mouseX - cursorX;
+        const distY = mouseY - cursorY;
+        
+        cursorX += distX * 0.2;
+        cursorY += distY * 0.2;
+        
+        customCursor.style.left = cursorX + 'px';
+        customCursor.style.top = cursorY + 'px';
+        
+        requestAnimationFrame(animate);
+    }
+    
+    // 启动动画
+    animate();
+
+    // 鼠标移动时更新位置变量
+    document.addEventListener('mousemove', function(e) {
+        mouseX = e.clientX + 15;
+        mouseY = e.clientY + 15;
+        
+        // 添加轻微的缩放效果
+        const scale = 1 + Math.sin(Date.now() * 0.003) * 0.1;
+        customCursor.style.transform = `scale(${scale})`;
+    });
+
+    // 为所有可交互元素添加鼠标进入事件
+    const interactiveElements = document.querySelectorAll('.card, .btn, input, label, a, select, textarea');
+    
+    interactiveElements.forEach(element => {
+        element.addEventListener('mouseenter', function() {
+            // 鼠标进入可交互元素时，将自定义光标透明度设为很低（不是完全隐藏），显示左上角文字
+            customCursor.style.opacity = '0.01'; // 几乎不可见但仍然存在
+            cornerText.classList.add('visible');
+        });
+
+        element.addEventListener('mouseleave', function() {
+            // 鼠标离开可交互元素时，显示自定义光标，隐藏左上角文字
+            customCursor.style.opacity = '1';
+            cornerText.classList.remove('visible');
+        });
+    });
+
+    // 鼠标点击效果
+    document.addEventListener('click', function() {
+        // 点击时添加缩放动画
+        customCursor.style.transform = 'scale(0.8)';
+        setTimeout(() => {
+            const scale = 1 + Math.sin(Date.now() * 0.003) * 0.1;
+            customCursor.style.transform = `scale(${scale})`;
+        }, 100);
+    });
+
+    // 初始状态：显示自定义光标，隐藏左上角文字
+    customCursor.style.opacity = '1';
+    cornerText.classList.remove('visible');
+    
+    // 防止在页面加载时出现闪烁
+    setTimeout(() => {
+        customCursor.style.transition = 'opacity 0.3s ease, transform 0.1s ease';
+    }, 100);
+}); 

static/js/particles-config.js

@@ -0,0 +1,105 @@
+particlesJS('particles-js', {
+    "particles": {
+        "number": {
+            "value": 80,
+            "density": {
+                "enable": true,
+                "value_area": 800
+            }
+        },
+        "color": {
+            "value": "#ffffff"
+        },
+        "shape": {
+            "type": "circle",
+            "stroke": {
+                "width": 0,
+                "color": "#000000"
+            },
+            "polygon": {
+                "nb_sides": 5
+            }
+        },
+        "opacity": {
+            "value": 0.5,
+            "random": false,
+            "anim": {
+                "enable": false,
+                "speed": 1,
+                "opacity_min": 0.1,
+                "sync": false
+            }
+        },
+        "size": {
+            "value": 3,
+            "random": true,
+            "anim": {
+                "enable": false,
+                "speed": 40,
+                "size_min": 0.1,
+                "sync": false
+            }
+        },
+        "line_linked": {
+            "enable": true,
+            "distance": 150,
+            "color": "#3498db",
+            "opacity": 0.4,
+            "width": 1
+        },
+        "move": {
+            "enable": true,
+            "speed": 2,
+            "direction": "none",
+            "random": false,
+            "straight": false,
+            "out_mode": "out",
+            "bounce": false,
+            "attract": {
+                "enable": false,
+                "rotateX": 600,
+                "rotateY": 1200
+            }
+        }
+    },
+    "interactivity": {
+        "detect_on": "canvas",
+        "events": {
+            "onhover": {
+                "enable": true,
+                "mode": "grab"
+            },
+            "onclick": {
+                "enable": true,
+                "mode": "push"
+            },
+            "resize": true
+        },
+        "modes": {
+            "grab": {
+                "distance": 140,
+                "line_linked": {
+                    "opacity": 1
+                }
+            },
+            "bubble": {
+                "distance": 400,
+                "size": 40,
+                "duration": 2,
+                "opacity": 8,
+                "speed": 3
+            },
+            "repulse": {
+                "distance": 200,
+                "duration": 0.4
+            },
+            "push": {
+                "particles_nb": 4
+            },
+            "remove": {
+                "particles_nb": 2
+            }
+        }
+    },
+    "retina_detect": true
+}); 

templates/generate.html

@@ -4,8 +4,12 @@
     <meta charset="UTF-8">
     <title>生成宣传内容</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/particle-bg.css') }}" rel="stylesheet">
 </head>
 <body>
+    <!-- Particles.js container -->
+    <div id="particles-js"></div>
+    
     <div class="container mt-5">
         <div class="row justify-content-center">
             <div class="col-md-8">
@@ -58,6 +62,9 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="{{ url_for('static', filename='js/particles-config.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/cursor-effects.js') }}"></script>
     <script>
         // 更新输入框标签
         document.querySelectorAll('input[name="name_type"]').forEach(radio => {

templates/index.html

@@ -4,8 +4,12 @@
     <meta charset="UTF-8">
     <title>CDK兑换系统</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/particle-bg.css') }}" rel="stylesheet">
 </head>
 <body>
+    <!-- Particles.js container -->
+    <div id="particles-js"></div>
+    
     <div class="container mt-5">
         <div class="row justify-content-center">
             <div class="col-md-8">
@@ -41,5 +45,8 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="{{ url_for('static', filename='js/particles-config.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/cursor-effects.js') }}"></script>
 </body>
 </html> 

templates/redeem.html

@@ -4,8 +4,12 @@
     <meta charset="UTF-8">
     <title>CDK兑换</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/particle-bg.css') }}" rel="stylesheet">
 </head>
 <body>
+    <!-- Particles.js container -->
+    <div id="particles-js"></div>
+    
     <div class="container mt-5">
         <div class="row justify-content-center">
             <div class="col-md-8">
@@ -45,5 +49,8 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="{{ url_for('static', filename='js/particles-config.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/cursor-effects.js') }}"></script>
 </body>
 </html>