当前位置：首页 > news >正文

获客系统 V2

news 来源：原创 2025/5/11 13:35:35

先上图

Index：

<!DOCTYPE html>
<html>
<head>
    <title>NONONO</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
        
        #canvas {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }

        #design-text {
            position: absolute;
            bottom: 50px;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 2;
            font-family: 'Arial', sans-serif;
            font-size: 24px;
            color: #DAA520;
            text-align: center;
            text-shadow: 0 0 10px rgba(218, 165, 32, 0.7);
            filter: drop-shadow(0 0 15px white);
        }

        #customer-btn {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: 2px solid white;
            color: white;
            background: transparent;
            transition: opacity 0.5s;
            opacity: 1;
        }

        @keyframes rainbow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="design-text">Design By Tim</div>
    <button id="customer-btn">客流系统</button>
    <audio id="music" autoplay loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放
    </audio>

    <script>
        // 创建字母背景
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'.split('');
        const fontSize = 14;
        const columns = Math.floor(canvas.width / fontSize);
        const drops = Array(columns).fill(1);

        function drawMatrix() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            ctx.fillStyle = '#0F0';
            ctx.font = fontSize + 'px monospace';

            drops.forEach((drop, i) => {
                const char = chars[Math.floor(Math.random() * chars.length)];
                ctx.fillText(char, i * fontSize, drop * fontSize);
                
                if (drop * fontSize > canvas.height && Math.random() > 0.975) {
                    drops[i] = 0;
                }
                drops[i]++;
            });
        }

        // 背景动画
        setInterval(drawMatrix, 30);

        // 自动播放处理
        document.addEventListener('DOMContentLoaded', function() {
            const audio = document.getElementById('music');
            audio.play().catch(() => {
                document.body.addEventListener('click', () => audio.play());
            });
        });

        // 按钮功能
        const customerBtn = document.getElementById('customer-btn');
        customerBtn.addEventListener('click', function() {
            window.location.href = 'Customer.html';
        });

        function jump() {
            const btn = customerBtn;
            btn.style.transition = 'opacity 0.5s';
            btn.style.opacity = '0';
            
            setTimeout(() => {
                const maxX = window.innerWidth - btn.offsetWidth;
                const maxY = window.innerHeight - btn.offsetHeight;
                const newX = Math.random() * maxX;
                const newY = Math.random() * maxY;
                
                btn.style.transform = 'none';
                btn.style.left = newX + 'px';
                btn.style.top = newY + 'px';
                
                btn.style.background = 'linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet)';
                btn.style.backgroundSize = '200% 200%';
                btn.style.animation = 'rainbow 2s linear infinite';
                btn.style.opacity = '1';
            }, 500);
        }

        // 初始跳动和定时器
        setTimeout(jump, 1000);
        setInterval(jump, 5000);
    </script>
</body>
</html>

Customer

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 按钮动画 */
       .queue-button {
            animation: pulse 2s infinite;
            background: linear-gradient(45deg, #4F46E5, #EC4899);
            transition: transform 0.3s ease;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        /* 状态点样式 */
       .status-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: inline-block;
        }

       .online {
            background-color: #10B981;
        }

       .offline {
            background-color: #EF4444;
        }

        /* 金龙样式 */
       .golden-dragon {
            position: absolute;
            opacity: 0.3;
            z-index: -1;
            animation: moveDragon 20s infinite linear;
        }

        @keyframes moveDragon {
            0% {
                top: 10%;
                left: 10%;
            }

            25% {
                top: 10%;
                left: 80%;
            }

            50% {
                top: 80%;
                left: 80%;
            }

            75% {
                top: 80%;
                left: 10%;
            }

            100% {
                top: 10%;
                left: 10%;
            }
        }
    </style>
    <title>排队管理系统</title>
</head>

<body class="bg-gray-100 font-sans relative">
    <!-- 金龙简笔画 -->
    <img src="https://raw.githubusercontent.com/your-repo/golden-dragon.svg" alt="Design By Tim" class="golden-dragon">

    <!-- 导航栏 -->
    <nav class="bg-blue-600 p-4">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-white text-2xl font-bold" id="nav-title"></h1>
            <div class="text-white">
                <span class="status-dot online"></span>
                <span>实时更新</span>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <div class="container mx-auto p-4">
        <!-- 当前状态 -->
        <div class="bg-white p-6 rounded-lg shadow-md text-center mb-6">
            <div class="flex items-center justify-center mb-4">
                <span class="text-2xl mr-2">👥</span>
                <p class="text-4xl font-bold text-green-600" id="current-count">0</p>
            </div>
            <p class="text-gray-600">最大接待量：168人</p>
            <p class="text-sm text-gray-500 mt-2">预计等待时间：<span id="wait-time">6</span>分钟</p>
        </div>

        <!-- 排队操作 -->
        <div class="bg-white p-6 rounded-lg shadow-md text-center mb-6">
            <button id="queue-btn" class="queue-button text-white py-3 px-8 rounded-full font-bold text-lg hover:shadow-lg">
                🎯 立即取号
                <i class="fas fa-arrow-right ml-2 animate-pulse"></i>
            </button>
        </div>

        <!-- 排队记录 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-bold text-gray-700 mb-4">📜 最近排队记录</h2>
            <div class="overflow-x-auto">
                <table class="w-full border-collapse">
                    <thead>
                        <tr class="bg-gray-50">
                            <th class="p-3 text-left">时间</th>
                            <th class="p-3 text-left">昵称</th>
                            <th class="p-3 text-left">手机尾号</th>
                            <th class="p-3 text-center">状态</th>
                        </tr>
                    </thead>
                    <tbody id="history-table" class="divide-y divide-gray-200">
                        <!-- 动态加载数据 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // 从localStorage获取排队数据
        function getQueueDataFromStorage() {
            const queueData = localStorage.getItem('queueData');
            return queueData? JSON.parse(queueData) : [];
        }

        // 更新当前人数和等待时间
        function updateQueueStatus() {
            const queue = getQueueDataFromStorage();
            const currentCount = queue.length;  // 显示总排队人数
            document.getElementById('current-count').textContent = currentCount;
            document.getElementById('wait-time').textContent = 6;
        }

        // 更新排队记录表格
        function updateQueueTable() {
            const queue = getQueueDataFromStorage();
            const tbody = document.getElementById('history-table');
            const rows = queue.map(item => `
                <tr class="hover:bg-gray-50">
                    <td class="p-3">${new Date(item.timestamp).toLocaleString()}</td>
                    <td class="p-3">${item.nickname}</td>
                    <td class="p-3">${item.phone}</td>
                    <td class="p-3 text-center">
                        <span class="px-2 py-1 rounded-full ${getClassForStatus(item.status)}">
                            ${item.status}
                        </span>
                    </td>
                </tr>
            `).join('');
            tbody.innerHTML = rows;
        }

        // 根据状态返回对应的类名
        function getClassForStatus(status) {
            switch (status) {
                case '等待':
                    return 'bg-yellow-100 text-yellow-800';
                case '进行中':
                    return 'bg-blue-100 text-blue-800';
                case '完成':
                    return 'bg-green-100 text-green-800';
                default:
                    return '';
            }
        }

        // 初始化页面
        function initPage() {
            updateQueueStatus();
            updateQueueTable();
            // 随机选择一个 emoji
            const emojis = ['🍜', '🍔', '🍕', '🍣', '🍟', '🥐', '🍗', '🥩', '🍟', '🌯', '🥚', '🍳', '🍲', '🥣', '🥗', '🍇', '🍉', '🍊', '🍋', '🍌', '🍍', '🥭', '🍎', '🍑', '🍒', '🍓', '🥝', '🍅'];
            const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
            document.getElementById('nav-title').textContent = `${randomEmoji} 排队管理系统`;
        }

        // 点击取号按钮事件
        document.getElementById('queue-btn').addEventListener('click', () => {
            window.location.href ='register.html';
        });

        // 添加storage事件监听实现跨标签页实时更新
        window.addEventListener('storage', function (e) {
            if (e.key === 'queueData') {
                updateQueueStatus();
                updateQueueTable();
            }
        });

        // 定时更新
        setInterval(() => {
            updateQueueStatus();
            updateQueueTable();
            checkForCall();
        }, 3000);

        // 检查是否需要叫号
        function checkForCall() {
            const queue = getQueueDataFromStorage();
            const now = new Date().getTime();
            queue.forEach(item => {
                if (item.status === '进行中' &&!item.called && item.timestamp <= now) {
                    item.called = true;
                    localStorage.setItem('queueData', JSON.stringify(queue));
                    speakCall(item.nickname, item.phone);
                }
            });
        }

        // 语音叫号
        function speakCall(nickname, phone) {
            const message = `感谢您的等待，${nickname}${phone} 准备开始了`;
            const synth = window.speechSynthesis;
            const utterance = new SpeechSynthesisUtterance(message);
            utterance.lang = 'zh-CN';
            synth.speak(utterance);
        }

        initPage();
    </script>
</body>

</html>

Register


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <title>取号登记</title>
    <style>
       .form-step {
            transition: all 0.3s ease;
        }

       .progress-bar {
            height: 6px;
            background: #e5e7eb;
            border-radius: 3px;
            overflow: hidden;
        }

       .progress {
            width: 0%;
            height: 100%;
            background: #3B82F6;
            transition: width 0.4s ease;
        }
    </style>
</head>

<body class="bg-gray-100 font-sans">
    <!-- 导航栏 -->
    <nav class="bg-blue-600 p-4">
        <div class="container mx-auto">
            <h1 class="text-white text-2xl font-bold">📝 取号登记</h1>
        </div>
    </nav>

    <!-- 登记表单 -->
    <div class="container mx-auto p-4">
        <div class="bg-white rounded-lg shadow-md max-w-md mx-auto p-6">
            <div class="progress-bar mb-6">
                <div class="progress" id="form-progress"></div>
            </div>

            <form id="registration-form" class="space-y-6">
                <!-- 昵称 -->
                <div>
                    <label class="block text-gray-700 mb-2">🍔 您的昵称</label>
                    <input type="text" id="nickname" required
                        class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入昵称">
                </div>

                <!-- 手机号 -->
                <div>
                    <label class="block text-gray-700 mb-2">📱 手机尾号</label>
                    <input type="tel" id="phone" required maxlength="4" pattern="\d{4}"
                        class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入手机后4位">
                </div>

                <!-- 提交按钮 -->
                <button type="submit"
                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-all">
                    🚀 立即取号
                </button>
            </form>

            <!-- 成功提示 -->
            <div id="success-message" class="hidden text-center mt-6">
                <div class="text-green-500 text-5xl mb-4">✅</div>
                <h2 class="text-xl font-bold mb-2">取号成功！</h2>
                <p class="text-gray-600">您的排队号码：<span id="queue-number" class="font-bold">001</span></p>
                <p class="text-gray-600 mt-2" id="remaining-message"></p>
                <p class="text-sm text-gray-500 mt-4">3秒后自动返回首页...</p>
            </div>
        </div>
    </div>

    <script>
        const form = document.getElementById('registration-form');
        const progress = document.getElementById('form-progress');

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            progress.style.width = '100%';

            const nickname = document.getElementById('nickname').value;
            const phone = document.getElementById('phone').value;

            if (nickname.trim() === '' || phone.trim() === '' ||!/^\d{4}$/.test(phone)) {
                alert('请输入有效的昵称和手机尾号');
                progress.style.width = '0%';
                return;
            }

            try {
                const queueData = getQueueDataFromStorage();
                const newItem = {
                    id: queueData.length + 1,
                    timestamp: new Date().getTime(),
                    nickname: nickname,
                    phone: phone,
                    status: '等待'
                };
                queueData.push(newItem);
                localStorage.setItem('queueData', JSON.stringify(queueData));

                // 计算剩余等待人数
                const waitingCount = queueData.filter(item => item.status === '等待').length;
                const remaining = waitingCount - 1;
                const message = `昵称-${nickname}--取号成功，您前面还有${remaining}位，谢谢！`;

                // 显示剩余人数
                document.getElementById('remaining-message').textContent = message;
                
                // 语音播报
                if ('speechSynthesis' in window) {
                    const utterance = new SpeechSynthesisUtterance(message);
                    window.speechSynthesis.speak(utterance);
                }

                document.getElementById('queue-number').textContent = `00${newItem.id}`.slice(-3);
                form.style.display = 'none';
                document.getElementById('success-message').classList.remove('hidden');

                setTimeout(() => {
                    window.location.href = 'index.html';
                }, 5000);
            } catch (error) {
                alert('提交失败: ' + error.message);
                progress.style.width = '0%';
            }
        });

        function getQueueDataFromStorage() {
            const queueData = localStorage.getItem('queueData');
            return queueData? JSON.parse(queueData) : [];
        }
    </script>
</body>

</html>