﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面未找到 | 17transit</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        dark: '#1D2939',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen font-inter text-dark">
    <div class="container mx-auto px-4 py-12 md:py-24">
        <!-- 导航栏 -->
        <nav class="flex justify-between items-center mb-16 md:mb-24">
            <a href="https://www.17transit.com" class="text-2xl md:text-3xl font-bold text-primary flex items-center">
                <i class="fa fa-paper-plane-o mr-2 text-secondary"></i>
                <span>17transit</span>
            </a>
            <div class="hidden md:flex space-x-8">
                <a href="https://www.17transit.com" class="text-dark hover:text-primary transition-colors duration-300">首页</a>
                <a href="https://www.17transit.com" class="text-dark hover:text-primary transition-colors duration-300">产品</a>
                <a href="https://www.17transit.com" class="text-dark hover:text-primary transition-colors duration-300">服务</a>
                <a href="https://www.17transit.com" class="text-dark hover:text-primary transition-colors duration-300">关于我们</a>
                <a href="https://www.17transit.com/contact.asp" class="text-dark hover:text-primary transition-colors duration-300">联系我们</a>
            </div>
            <button class="md:hidden text-dark text-xl">
                <i class="fa fa-bars"></i>
            </button>
        </nav>

        <!-- 主要内容 -->
        <main class="max-w-5xl mx-auto text-center">
            <div class="flex flex-col md:flex-row items-center justify-between gap-8 md:gap-16">
                <!-- 左侧图像 -->
                <div class="w-full md:w-1/2 flex justify-center">
                    <div class="relative">
                        <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-primary/10 flex items-center justify-center animate-float">
                            <div class="text-10xl md:text-14xl font-bold text-primary">404</div>
                        </div>
                        <div class="absolute -top-4 -right-4 w-20 h-20 bg-secondary rounded-full flex items-center justify-center text-white font-bold text-xl">
                            <i class="fa fa-exclamation-triangle"></i>
                        </div>
                    </div>
                </div>

                <!-- 右侧内容 -->
                <div class="w-full md:w-1/2 text-left">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-4 leading-tight">
                        页面<span class="text-primary">未找到</span>
                    </h1>
                    <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 mb-8 leading-relaxed">
                        很抱歉，您访问的页面不存在或已被移除。请检查URL或尝试以下操作。
                    </p>

                    <!-- 搜索框 -->
                    <div class="mb-8">
                        <form name="formsearch" action="https://www.17transit.com/plus/search.php" class="relative">
                            <input 
                                type="text" 
                                name="q" 
                                class="w-full px-6 py-4 rounded-full border-2 border-gray-200 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all duration-300 shadow-sm" 
                                placeholder="搜索我们的网站..."
                            >
                            <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-primary/90 transition-colors duration-300">
                                <i class="fa fa-search"></i>
                            </button>
                        </form>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="flex flex-wrap gap-4">
                        <a href="javascript:history.back()" class="px-6 py-3 bg-gray-200 hover:bg-gray-300 text-dark rounded-full flex items-center transition-all duration-300 shadow-sm">
                            <i class="fa fa-arrow-left mr-2"></i> 返回上一页
                        </a>
                        <a href="https://www.17transit.com" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white rounded-full flex items-center transition-all duration-300 shadow-sm">
                            <i class="fa fa-home mr-2"></i> 回到首页
                        </a>
                        <a href="https://www.17transit.com/contact.asp" class="px-6 py-3 bg-secondary hover:bg-secondary/90 text-white rounded-full flex items-center transition-all duration-300 shadow-sm">
                            <i class="fa fa-envelope mr-2"></i> 联系我们
                        </a>
                    </div>
                </div>
            </div>

            <!-- 波浪装饰 -->
            <div class="mt-16 md:mt-24 relative">
                <div class="h-24 overflow-hidden">
                    <svg viewBox="0 0 500 150" preserveAspectRatio="none" class="w-full h-full">
                        <path d="M0.00,49.98 C149.99,150.00 350.75,-49.98 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" class="fill-primary/5"></path>
                    </svg>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="mt-12 md:mt-24 text-center text-gray-500 text-sm">
            <div class="flex flex-wrap justify-center gap-4 md:gap-8 mb-4">
                <a href="https://www.17transit.com" class="hover:text-primary transition-colors duration-300">首页</a>
                <a href="https://www.17transit.com" class="hover:text-primary transition-colors duration-300">产品</a>
                <a href="https://www.17transit.com" class="hover:text-primary transition-colors duration-300">服务</a>
                <a href="https://www.17transit.com" class="hover:text-primary transition-colors duration-300">关于我们</a>
                <a href="https://www.17transit.com/contact.asp" class="hover:text-primary transition-colors duration-300">联系我们</a>
            </div>
            <p>&copy; 2025 17transit. 保留所有权利。</p>
        </footer>
    </div>

    <script>
        // 搜索框交互
        document.querySelector('input[name="q"]').addEventListener('focus', function() {
            this.placeholder = '';
        });
        
        document.querySelector('input[name="q"]').addEventListener('blur', function() {
            this.placeholder = '搜索我们的网站...';
        });
    </script>
</body>
</html>
    