arrested.tsx 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. import React from 'react';
  2. import Head from 'next/head';
  3. export default function ArrestedPage() {
  4. return (
  5. <>
  6. <Head>
  7. <title>调查院正在出动 - 魔法国度调查院</title>
  8. <meta name="description" content="魔法国度调查院逮捕令" />
  9. <link rel="icon" href="/favicon.svg" />
  10. </Head>
  11. <div className="min-h-screen bg-gradient-to-br from-purple-900 via-violet-800 to-indigo-900 text-white font-sans relative overflow-hidden">
  12. {/* Magical background patterns */}
  13. <div className="absolute inset-0 opacity-10">
  14. <div className="absolute top-10 left-10 text-6xl animate-pulse">🌸</div>
  15. <div className="absolute top-20 right-20 text-4xl animate-bounce">🌿</div>
  16. <div className="absolute top-1/3 left-1/4 text-5xl animate-pulse">🌺</div>
  17. <div className="absolute top-2/3 right-1/3 text-3xl animate-bounce">🍃</div>
  18. <div className="absolute bottom-20 left-20 text-4xl animate-pulse">🌹</div>
  19. <div className="absolute bottom-10 right-10 text-5xl animate-bounce">🌷</div>
  20. <div className="absolute top-1/2 left-10 text-3xl animate-pulse">🌻</div>
  21. <div className="absolute top-1/4 right-1/4 text-4xl animate-bounce">🌼</div>
  22. </div>
  23. {/* Floating magical particles */}
  24. <div className="absolute inset-0 overflow-hidden pointer-events-none">
  25. <div className="absolute animate-float w-2 h-2 bg-purple-300 rounded-full opacity-60" style={{ top: '20%', left: '15%', animationDelay: '0s' }}></div>
  26. <div className="absolute animate-float w-1 h-1 bg-violet-300 rounded-full opacity-70" style={{ top: '40%', left: '80%', animationDelay: '1s' }}></div>
  27. <div className="absolute animate-float w-3 h-3 bg-pink-300 rounded-full opacity-50" style={{ top: '60%', left: '25%', animationDelay: '2s' }}></div>
  28. <div className="absolute animate-float w-1 h-1 bg-purple-200 rounded-full opacity-80" style={{ top: '80%', left: '70%', animationDelay: '3s' }}></div>
  29. </div>
  30. {/* Main magical content */}
  31. <div className="container mx-auto px-4 py-8 relative z-10" style={{ marginTop: '5rem' }}>
  32. {/* Enchanted warning banner */}
  33. <div className="text-center text-purple-100" style={{ marginBottom: '0.5rem' }}>您的结果是</div>
  34. <div className="bg-gradient-to-r from-pink-600 via-purple-600 to-violet-600 border-2 border-pink-400 rounded-lg p-6 mb-8 text-center shadow-2xl relative overflow-hidden">
  35. <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-10 animate-pulse"></div>
  36. <div className="relative z-10">
  37. <div className="text-4xl font-semibold text-purple-100" style={{ padding: '2rem' }}>
  38. 批 准 逮 捕
  39. </div>
  40. </div>
  41. </div>
  42. {/* Mystical arrest warrant */}
  43. <div className="bg-gradient-to-b from-purple-900 to-violet-900 border-2 border-pink-500 rounded-lg p-8 mb-8 shadow-2xl relative">
  44. {/* SVG background pattern */}
  45. <div
  46. className="absolute inset-0 rounded-lg opacity-20 bg-no-repeat bg-center bg-contain"
  47. style={{
  48. backgroundImage: 'url(/arrest-frame.svg)',
  49. backgroundSize: 'contain',
  50. backgroundPosition: 'center',
  51. }}
  52. ></div>
  53. <div className="absolute top-4 right-4 text-2xl animate-spin">🌟</div>
  54. <div className="absolute bottom-4 left-4 text-2xl animate-bounce">🌟</div>
  55. <div className="text-center mb-8" style={{ padding: '2rem' }}>
  56. <div className="text-lg md:text-xl text-purple-200 font-semibold" style={{ padding: '2rem', marginBottom: '4rem' }}>
  57. <p>调查使正在前往您的所在地</p>
  58. <p>请勿离开该界面</p>
  59. </div>
  60. <div className="text-purple-100 space-y-3" style={{ marginBottom: '8rem' }}>
  61. <p className="flex items-center justify-center gap-2" style={{ marginBottom: '0.5rem' }}>
  62. ⚠️ 金绿猫眼权杖严正声明 ⚠️
  63. </p>
  64. <p className="text-xl flex items-center justify-center gap-2">
  65. 城际网络并非法外之地
  66. </p>
  67. </div>
  68. </div>
  69. </div>
  70. {/* Magical footer warning */}
  71. <div className="mt-8 text-center">
  72. <div className="text-purple-300 text-sm" style={{ marginTop: '1rem' }}>
  73. 本逮捕令由魔法国度调查院授权发布
  74. </div>
  75. </div>
  76. </div>
  77. {/* Custom animations */}
  78. <style jsx>{`
  79. @keyframes float {
  80. 0%, 100% { transform: translateY(0px) rotate(0deg); }
  81. 50% { transform: translateY(-20px) rotate(180deg); }
  82. }
  83. .animate-float {
  84. animation: float 4s ease-in-out infinite;
  85. }
  86. `}</style>
  87. </div>
  88. </>
  89. );
  90. }