<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Quản Lý - CheckAcc Tools</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .main-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            margin: 20px;
        }
        
        @media (max-width: 768px) {
            .main-container {
                margin: 10px;
                border-radius: 15px;
            }
        }
        
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 20px 20px 0 0;
            padding: 40px;
            text-align: center;
        }
        
        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .hero-subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 0;
        }
        
        @media (max-width: 768px) {
            .hero-section {
                padding: 25px 20px;
                border-radius: 15px 15px 0 0;
            }
            
            .hero-title {
                font-size: 2rem;
            }
            
            .hero-subtitle {
                font-size: 1rem;
            }
        }
        
        .tools-section {
            padding: 40px;
        }
        
        @media (max-width: 768px) {
            .tools-section {
                padding: 25px 20px;
            }
        }
        
        .tool-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        @media (max-width: 768px) {
            .tool-card {
                padding: 20px 15px;
                margin-bottom: 20px;
                border-radius: 12px;
            }
        }
        
        .tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
        }
        
        .tool-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
            border-color: #667eea;
        }
        
        .tool-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            margin-bottom: 20px;
            margin: 0 auto 20px;
        }
        
        .tool-icon.checkacc {
            background: linear-gradient(135deg, #28a745, #20c997);
        }
        
        .tool-icon.fillacc {
            background: linear-gradient(135deg, #17a2b8, #20c997);
        }
        
        .tool-icon.getacc {
            background: linear-gradient(135deg, #9c27b0, #673ab7);
        }
        
        .tool-icon.toexcel {
            background: linear-gradient(135deg, #fd7e14, #e55a00);
        }
        
        .tool-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .tool-description {
            color: #666;
            text-align: center;
            margin-bottom: 25px;
            line-height: 1.6;
        }
        
        .tool-features {
            list-style: none;
            padding: 0;
            margin-bottom: 25px;
        }
        
        .tool-features li {
            padding: 8px 0;
            color: #555;
            position: relative;
            padding-left: 25px;
        }
        
        .tool-features li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #28a745;
            font-weight: bold;
        }
        
        .btn-tool {
            width: 100%;
            padding: 12px 25px;
            border-radius: 25px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            border: none;
        }
        
        .btn-checkacc {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
        }
        
        .btn-checkacc:hover {
            background: linear-gradient(135deg, #218838, #1e7e34);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
        }
        
        .btn-fillacc {
            background: linear-gradient(135deg, #17a2b8, #20c997);
            color: white;
        }
        
        .btn-fillacc:hover {
            background: linear-gradient(135deg, #138496, #1e7e34);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(23, 162, 184, 0.4);
        }
        
        .btn-getacc {
            background: linear-gradient(135deg, #9c27b0, #673ab7);
            color: white;
        }
        
        .btn-getacc:hover {
            background: linear-gradient(135deg, #7b1fa2, #512da8);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(156, 39, 176, 0.4);
        }
        
        .btn-toexcel {
            background: linear-gradient(135deg, #fd7e14, #e55a00);
            color: white;
        }
        
        .btn-toexcel:hover {
            background: linear-gradient(135deg, #e55a00, #cc4a00);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(253, 126, 20, 0.4);
        }
        
        .stats-section {
            background: rgba(102, 126, 234, 0.1);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .stat-label {
            color: #666;
            font-weight: 500;
        }
        
        @media (max-width: 768px) {
            .stats-section {
                padding: 20px 15px;
                margin-bottom: 20px;
            }
            
            .stat-card {
                padding: 15px 10px;
                margin-bottom: 10px;
            }
            
            .stat-number {
                font-size: 2rem !important;
            }
            
            .stat-label {
                font-size: 0.9rem;
            }
        }
        
        .footer {
            background: #f8f9fa;
            border-radius: 0 0 20px 20px;
            padding: 20px;
            text-align: center;
            color: #666;
        }
        
        @media (max-width: 768px) {
            .footer {
                padding: 15px;
                border-radius: 0 0 15px 15px;
            }
        }
        
        .quick-actions {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
        }
        
        .quick-action-btn {
            background: linear-gradient(135deg, #6c757d, #495057);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            margin: 5px;
            transition: all 0.3s ease;
        }
        
        @media (max-width: 768px) {
            .quick-actions {
                padding: 20px 15px;
                margin-bottom: 20px;
            }
            
            .quick-action-btn {
                padding: 8px 15px;
                font-size: 0.9rem;
                margin: 3px;
            }
        }
        
        .quick-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(108, 117, 125, 0.4);
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- Hero Section -->
        <div class="hero-section">
            <h1 class="hero-title">
                <i class="fas fa-tools me-3"></i>CheckAcc Tools
            </h1>
            <p class="hero-subtitle">Bộ công cụ quản lý tài khoản chuyên nghiệp</p>
        </div>
        
        <!-- Tools Section -->
        <div class="tools-section">
            <!-- Quick Actions -->
            <div class="quick-actions">
                <h5 class="mb-3"><i class="fas fa-bolt me-2"></i>Thao tác nhanh</h5>
                <button class="quick-action-btn" onclick="openTool('checkacc')">
                    <i class="fas fa-search me-2"></i>Kiểm tra tài khoản
                </button>
                <button class="quick-action-btn" onclick="openTool('fillacc')">
                    <i class="fas fa-edit me-2"></i>Điền thông tin
                </button>
                <button class="quick-action-btn" onclick="openTool('getacc')">
                    <i class="fas fa-download me-2"></i>Lấy tài khoản
                </button>
                <button class="quick-action-btn" onclick="openTool('toexcel')">
                    <i class="fas fa-file-excel me-2"></i>Xuất Excel
                </button>
            </div>
            
            <!-- Statistics -->
            <div class="stats-section">
                <h5 class="mb-3"><i class="fas fa-chart-bar me-2"></i>Thống kê tổng quan</h5>
                <div class="row">
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-number">4</div>
                            <div class="stat-label">Công cụ</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-number">100%</div>
                            <div class="stat-label">Tự động hóa</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-number">24/7</div>
                            <div class="stat-label">Sẵn sàng</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-number">∞</div>
                            <div class="stat-label">Không giới hạn</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Tool Cards -->
            <div class="row">
                
                <!-- CheckAcc Tool -->
                <div class="col-lg-3 col-md-6">
                    <div class="tool-card">
                        <div class="tool-icon checkacc">
                            <i class="fas fa-search"></i>
                        </div>
                        <h3 class="tool-title">CheckAcc</h3>
                        <p class="tool-description">
                            Công cụ kiểm tra thông tin tài khoản theo danh sách, hỗ trợ upload file và nhập text trực tiếp.
                        </p>
                        <ul class="tool-features">
                            <li>Upload file txt tự động</li>
                            <li>Nhập danh sách acc trực tiếp</li>
                            <li>Kiểm tra qua API</li>
                            <li>Hiển thị kết quả chi tiết</li>
                            <li>Bộ lọc và tìm kiếm</li>
                        </ul>
                        <button class="btn-tool btn-checkacc" onclick="openTool('checkacc')">
                            <i class="fas fa-play me-2"></i>Sử dụng ngay
                        </button>
                    </div>
                </div>
                
                <!-- FillAcc Tool -->
                <div class="col-lg-3 col-md-6">
                    <div class="tool-card">
                        <div class="tool-icon fillacc">
                            <i class="fas fa-edit"></i>
                        </div>
                        <h3 class="tool-title">FillAcc</h3>
                        <p class="tool-description">
                            Công cụ lọc tài khoản từ dữ liệu thô (raw), xử lý và làm sạch dữ liệu tài khoản.
                        </p>
                        <ul class="tool-features">
                            <li>Xử lý dữ liệu thô</li>
                            <li>Lọc tài khoản tự động</li>
                            <li>Làm sạch dữ liệu</li>
                            <li>Định dạng chuẩn</li>
                            <li>Giao diện thân thiện</li>
                        </ul>
                        <button class="btn-tool btn-fillacc" onclick="openTool('fillacc')">
                            <i class="fas fa-play me-2"></i>Sử dụng ngay
                        </button>
                    </div>
                </div>
                
                <!-- GetAcc Tool -->
                <div class="col-lg-3 col-md-6">
                    <div class="tool-card">
                        <div class="tool-icon getacc">
                            <i class="fas fa-download"></i>
                        </div>
                        <h3 class="tool-title">GetAcc</h3>
                        <p class="tool-description">
                            Công cụ lấy tài khoản theo yêu cầu từ API, tự động kiểm tra và hiển thị thông tin.
                        </p>
                        <ul class="tool-features">
                            <li>Lấy tài khoản theo yêu cầu</li>
                            <li>Tự động kiểm tra thông tin</li>
                            <li>Hỗ trợ tối đa 10 acc/lần</li>
                            <li>Tích hợp với CheckAcc</li>
                            <li>Thống kê real-time</li>
                        </ul>
                        <button class="btn-tool btn-getacc" onclick="openTool('getacc')">
                            <i class="fas fa-play me-2"></i>Sử dụng ngay
                        </button>
                    </div>
                </div>
                
                <!-- ToExcel Tool -->
                <div class="col-lg-3 col-md-6">
                    <div class="tool-card">
                        <div class="tool-icon toexcel">
                            <i class="fas fa-file-excel"></i>
                        </div>
                        <h3 class="tool-title">ToExcel</h3>
                        <p class="tool-description">
                            Công cụ chuyển tài khoản đã lọc sang Excel với nhiều định dạng và tùy chỉnh nâng cao.
                        </p>
                        <ul class="tool-features">
                            <li>Chuyển tài khoản sang Excel</li>
                            <li>Nhiều định dạng file</li>
                            <li>Tùy chỉnh cột dữ liệu</li>
                            <li>Xử lý dữ liệu lớn</li>
                            <li>Tích hợp với các tool khác</li>
                        </ul>
                        <button class="btn-tool btn-toexcel" onclick="openTool('toexcel')">
                            <i class="fas fa-play me-2"></i>Sử dụng ngay
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Footer -->
        <div class="footer">
            <p class="mb-0">
                <i class="fas fa-code me-2"></i>
                Được phát triển bởi CheckAcc Team | 
                <i class="fas fa-heart me-2 text-danger"></i>
                Phiên bản 3.0.0
            </p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function openTool(toolName) {
            switch(toolName) {
                case 'checkacc':
                    window.open('./checkAcc/', '_blank');
                    break;
                case 'fillacc':
                    window.open('./fillAcc/', '_blank');
                    break;
                case 'toexcel':
                    window.open('./toExcel/', '_blank');
                    break;
                case 'getacc':
                    window.open('./getAcc/', '_blank');
                    break;
                default:
                    console.log('Tool không xác định:', toolName);
            }
        }
        
        // Thêm hiệu ứng hover cho các card
        document.addEventListener('DOMContentLoaded', function() {
            const toolCards = document.querySelectorAll('.tool-card');
            
            toolCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-10px) scale(1.02)';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });
        });
    </script>
</body>
</html>