Gather_all_things_under_heaven/interpol.html at main · zyhgov/Gather_all_things_under_heaven · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- 页面标题 -->
  <title>国际刑警组织红色通缉令 - 联合库UNHub INTERPOL 杖雍皓</title>

  <!-- 页面描述（用于搜索引擎摘要） -->
  <meta name="description" content="国际刑警组织官方授权联合库UNHub展示INTERPOL红色通缉令数据库内容，适用于中国大陆公众查询国际刑警组织全球通缉信息。查看和搜索公共通缉令中的通缉令。">

  <!-- 关键词（建议使用中文关键词） -->
  <meta name="keywords" content="红色通缉令, INTERPOL, 国际刑警组织, 通缉犯查询, 杖雍皓, 联合库UNHub, UNHub, 中国通缉令, 全球通缉令, 数据授权, INTERPOL API, View Red Notices, View Yellow Notices">

  <!-- 基本 SEO 标签 -->
  <meta name="author" content="联合库UNHub国际团队">
  <meta name="robots" content="index, follow">

  <!-- Favicon and Icons -->
  <link rel="icon" href="/icpo.ico" type="image/png">
  <link rel="apple-touch-icon" href="/icpo.ico">

  <!-- Windows 8/10 Tile -->
  <meta name="msapplication-TileColor" content="#00467f">
  <meta name="msapplication-TileImage" content="/icpo.ico">

  <!-- 主题色（浏览器地址栏颜色） -->
  <meta name="theme-color" content="#00467f">

  <!-- Open Graph (用于 Facebook / 微信等社交平台) -->
  <meta property="og:title" content="国际刑警组织红色通缉令 - 联合库UNHub INTERPOL">
  <meta property="og:description" content="联合库UNHub官方授权展示INTERPOL红色通缉令数据库内容，适用于中国大陆公众查询国际刑警组织全球通缉信息。">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://zyhorg.ac.cn/interpol.html">
  <meta property="og:image" content="https://zyhorg.ac.cn/interpol.jpg">
  <meta property="og:site_name" content="国际刑警组织红色通缉令展示平台">

  <!-- Twitter Card Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="国际刑警组织红色通缉令 - 联合库UNHub INTERPOL">
  <meta name="twitter:description" content="联合库UNHub官方授权展示INTERPOL红色通缉令数据库内容，适用于中国大陆公众查询国际刑警组织全球通缉信息。">
  <meta name="twitter:image" content="https://zyhorg.ac.cn/interpol.jpg">
  <meta name="twitter:site" content="@unhubcn">

  <!-- Schema.org 结构化数据（JSON-LD） -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "国际刑警组织红色通缉令展示平台",
    "description": "联合库UNHub官方授权展示INTERPOL红色通缉令数据库内容，适用于中国大陆公众查询国际刑警组织全球通缉信息。",
    "url": "https://zyhorg.ac.cn/interpol.html",
    "publisher": {
      "@type": "Organization",
      "name": "联合库UNHub",
      "logo": {
        "@type": "ImageObject",
        "url": "https://zyhorg.ac.cn/logo.png"
      },
      "sameAs": [
        "https://www.unhub.cn"
      ]
    },
    "about": {
      "@type": "Organization",
      "name": "国际刑警组织 (INTERPOL)",
      "url": "https://www.interpol.int"
    }
  }
  </script>

  <!-- Tailwind CSS & Fonts -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


  <!-- 自定义字体 -->
  <style>
    @font-face {
      font-family: 'OpenAISans-Medium';
      src: url('/font/openai/OpenAISans-Medium.woff2') format('woff2');
    }
    @font-face {
      font-family: 'OpenAISans-Regular';
      src: url('/font/openai/OpenAISans-Regular.woff2') format('woff2');
    }
    @font-face {
      font-family: 'OpenAISans-Semibold';
      src: url('/font/openai/OpenAISans-Semibold.woff2') format('woff2');
    }

    body {
      font-family: 'OpenAISans-Regular', sans-serif;
    }

    h1, h2, h3 {
      font-family: 'OpenAISans-Semibold', sans-serif;
    }

    button, label {
      font-family: 'OpenAISans-Medium', sans-serif;
    }
  </style>
    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
    <script>LA.init({id:"Kg8KQJs3VUpgJFYj",ck:"Kg8KQJs3VUpgJFYj",autoTrack:true,hashMode:true,screenRecord:true})</script>
    <script type="f8671b2f8219b004b1a1666c-text/javascript">
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script", "pnjcz18od3");
    </script>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col">

  <!-- 顶部导航栏（粘滞） -->
<header id="navbar" class="bg-white/80 backdrop-blur-md shadow-md sticky top-0 z-40 transition-all duration-300">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <img src="/asset/icon_logo/icpo.png" alt="logo" class="h-14">
    </div>
    <nav class="space-x-4 text-sm">
      <a href="https://www.interpol.int/" class="text-gray-600 hover:text-gray-900">国际刑警组织官网</a>
      <a href="https://www.interpol.int/How-we-work/Notices/Red-Notices/View-Red-Notices" class="text-gray-600 hover:text-gray-900">查看红色通缉令</a>
      <a href="https://www.interpol.int/How-we-work/Notices/Yellow-Notices/View-Yellow-Notices" class="text-gray-600 hover:text-gray-900">查看黄色通知</a>
      <a href="https://zyhorg.ac.cn/" class="text-gray-600 hover:text-gray-900">联合库UNHub官网</a>
    </nav>
  </div>
</header>

  <div class="flex flex-1 overflow-hidden">

    <!-- 左侧筛选栏 -->
    <aside class="w-72 bg-white p-6 border-r fixed top-[100px] left-0 rounded-tr-2xl rounded-br-2xl shadow-md overflow-y-auto">
      <h2 class="text-lg font-semibold mb-4">ICPO INTERPOL <br> 筛选条件</h2>
      <form id="filter-form" class="space-y-4">
        <div><label class="block text-sm font-medium">姓</label><input name="forename" class="mt-1 w-full p-2 border rounded" type="text" /></div>
        <div><label class="block text-sm font-medium">名字</label><input name="name" class="mt-1 w-full p-2 border rounded" type="text" /></div>
<div>
  <label class="block text-sm font-medium">国籍代码 ISO标准</label>
  <input list="nationality-list" name="nationality" id="nationality-input" class="mt-1 w-full p-2 border rounded" placeholder="-- 全部国家 --">
  <datalist id="nationality-list">
        <option value="">-- 全部国家 --</option>
<option value="AF">Afghanistan (AF)</option>
<option value="AL">Albania (AL)</option>
<option value="DZ">Algeria (DZ)</option>
<option value="AR">Argentina (AR)</option>
<option value="AU">Australia (AU)</option>
<option value="AT">Austria (AT)</option>
<option value="AZ">Azerbaijan (AZ)</option>
<option value="BS">Bahamas (BS)</option>
<option value="BH">Bahrain (BH)</option>
<option value="BD">Bangladesh (BD)</option>
<option value="BB">Barbados (BB)</option>
<option value="BY">Belarus (BY)</option>
<option value="BE">Belgium (BE)</option>
<option value="BZ">Belize (BZ)</option>
<option value="BJ">Benin (BJ)</option>
<option value="BT">Bhutan (BT)</option>
<option value="BO">Bolivia (BO)</option>
<option value="BA">Bosnia and Herzegovina (BA)</option>
<option value="BW">Botswana (BW)</option>
<option value="BR">Brazil (BR)</option>
<option value="BN">Brunei (BN)</option>
<option value="BG">Bulgaria (BG)</option>
<option value="BF">Burkina Faso (BF)</option>
<option value="BI">Burundi (BI)</option>
<option value="KH">Cambodia (KH)</option>
<option value="CM">Cameroon (CM)</option>
<option value="CA">Canada (CA)</option>
<option value="CV">Cape Verde (CV)</option>
<option value="CF">Central African Republic (CF)</option>
<option value="TD">Chad (TD)</option>
<option value="CL">Chile (CL)</option>
<option value="CN" selected>China (CN)</option>
<option value="CO">Colombia (CO)</option>
<option value="KM">Comoros (KM)</option>
<option value="CG">Congo (CG)</option>
<option value="CD">Congo (Democratic Republic) (CD)</option>
<option value="CR">Costa Rica (CR)</option>
<option value="HR">Croatia (HR)</option>
<option value="CU">Cuba (CU)</option>
<option value="CY">Cyprus (CY)</option>
<option value="CZ">Czech Republic (CZ)</option>
<option value="DK">Denmark (DK)</option>
<option value="DJ">Djibouti (DJ)</option>
<option value="DM">Dominica (DM)</option>
<option value="DO">Dominican Republic (DO)</option>
<option value="TL">East Timor (TL)</option>
<option value="EC">Ecuador (EC)</option>
<option value="EG">Egypt (EG)</option>
<option value="SV">El Salvador (SV)</option>
<option value="GQ">Equatorial Guinea (GQ)</option>
<option value="ER">Eritrea (ER)</option>
<option value="EE">Estonia (EE)</option>
<option value="ET">Ethiopia (ET)</option>
<option value="FJ">Fiji (FJ)</option>
<option value="FI">Finland (FI)</option>
<option value="FR" selected>France (FR)</option>
<option value="GA">Gabon (GA)</option>
<option value="GM">Gambia (GM)</option>
<option value="GE">Georgia (GE)</option>
<option value="DE" selected>Germany (DE)</option>
<option value="GH">Ghana (GH)</option>
<option value="GR">Greece (GR)</option>
<option value="GD">Grenada (GD)</option>
<option value="GT">Guatemala (GT)</option>
<option value="GN">Guinea (GN)</option>
<option value="GW">Guinea-Bissau (GW)</option>
<option value="GY">Guyana (GY)</option>
<option value="HT">Haiti (HT)</option>
<option value="HN">Honduras (HN)</option>
<option value="HU">Hungary (HU)</option>
<option value="IS">Iceland (IS)</option>
<option value="IN">India (IN)</option>
<option value="ID">Indonesia (ID)</option>
<option value="IR">Iran (IR)</option>
<option value="IQ">Iraq (IQ)</option>
<option value="IE">Ireland (IE)</option>
<option value="IL">Israel (IL)</option>
<option value="IT">Italy (IT)</option>
<option value="CI">Ivory Coast (CI)</option>
<option value="JM">Jamaica (JM)</option>
<option value="JP">Japan (JP)</option>
<option value="JO">Jordan (JO)</option>
<option value="KZ">Kazakhstan (KZ)</option>
<option value="KE">Kenya (KE)</option>
<option value="KI">Kiribati (KI)</option>
<option value="KP">Korea (North) (KP)</option>
<option value="KR">Korea (South) (KR)</option>
<option value="KW">Kuwait (KW)</option>
<option value="KG">Kyrgyzstan (KG)</option>
<option value="LA">Laos (LA)</option>
<option value="LV">Latvia (LV)</option>
<option value="LB">Lebanon (LB)</option>
<option value="LS">Lesotho (LS)</option>
<option value="LR">Liberia (LR)</option>
<option value="LY">Libya (LY)</option>
<option value="LI">Liechtenstein (LI)</option>
<option value="LT">Lithuania (LT)</option>
<option value="LU">Luxembourg (LU)</option>
<option value="MK">Macedonia (MK)</option>
<option value="MG">Madagascar (MG)</option>
<option value="MW">Malawi (MW)</option>
<option value="MY">Malaysia (MY)</option>
<option value="MV">Maldives (MV)</option>
<option value="ML">Mali (ML)</option>
<option value="MT">Malta (MT)</option>
<option value="MH">Marshall Islands (MH)</option>
<option value="MR">Mauritania (MR)</option>
<option value="MU">Mauritius (MU)</option>
<option value="MX">Mexico (MX)</option>
<option value="FM">Micronesia (FM)</option>
<option value="MD">Moldova (MD)</option>
<option value="MC">Monaco (MC)</option>
<option value="MN">Mongolia (MN)</option>
<option value="ME">Montenegro (ME)</option>
<option value="MA">Morocco (MA)</option>
<option value="MZ">Mozambique (MZ)</option>
<option value="MM">Myanmar (MM)</option>
<option value="NA">Namibia (NA)</option>
<option value="NR">Nauru (NR)</option>
<option value="NP">Nepal (NP)</option>
<option value="NL">Netherlands (NL)</option>
<option value="NZ">New Zealand (NZ)</option>
<option value="NI">Nicaragua (NI)</option>
<option value="NE">Niger (NE)</option>
<option value="NG">Nigeria (NG)</option>
<option value="NO">Norway (NO)</option>
<option value="OM">Oman (OM)</option>
<option value="PK">Pakistan (PK)</option>
<option value="PW">Palau (PW)</option>
<option value="PA">Panama (PA)</option>
<option value="PG">Papua New Guinea (PG)</option>
<option value="PY">Paraguay (PY)</option>
<option value="PE">Peru (PE)</option>
<option value="PH">Philippines (PH)</option>
<option value="PL">Poland (PL)</option>
<option value="PT">Portugal (PT)</option>
<option value="QA">Qatar (QA)</option>
<option value="RO">Romania (RO)</option>
<option value="RU">Russia (RU)</option>
<option value="RW">Rwanda (RW)</option>
<option value="KN">Saint Kitts and Nevis (KN)</option>
<option value="LC">Saint Lucia (LC)</option>
<option value="VC">Saint Vincent and the Grenadines (VC)</option>
<option value="WS">Samoa (WS)</option>
<option value="SM">San Marino (SM)</option>
<option value="ST">Sao Tome and Principe (ST)</option>
<option value="SA">Saudi Arabia (SA)</option>
<option value="SN">Senegal (SN)</option>
<option value="RS">Serbia (RS)</option>
<option value="SC">Seychelles (SC)</option>
<option value="SL">Sierra Leone (SL)</option>
<option value="SG">Singapore (SG)</option>
<option value="SK">Slovakia (SK)</option>
<option value="SI">Slovenia (SI)</option>
<option value="SB">Solomon Islands (SB)</option>
<option value="SO">Somalia (SO)</option>
<option value="ZA">South Africa (ZA)</option>
<option value="SS">South Sudan (SS)</option>
<option value="ES">Spain (ES)</option>
<option value="LK">Sri Lanka (LK)</option>
<option value="SD">Sudan (SD)</option>
<option value="SR">Suriname (SR)</option>
<option value="SZ">Swaziland (SZ)</option>
<option value="SE">Sweden (SE)</option>
<option value="CH">Switzerland (CH)</option>
<option value="SY">Syria (SY)</option>
<option value="TJ">Tajikistan (TJ)</option>
<option value="TZ">Tanzania (TZ)</option>
<option value="TH">Thailand (TH)</option>
<option value="TG">Togo (TG)</option>
<option value="TO">Tonga (TO)</option>
<option value="TT">Trinidad and Tobago (TT)</option>
<option value="TN">Tunisia (TN)</option>
<option value="TR">Turkey (TR)</option>
<option value="TM">Turkmenistan (TM)</option>
<option value="TV">Tuvalu (TV)</option>
<option value="UG">Uganda (UG)</option>
<option value="UA">Ukraine (UA)</option>
<option value="AE">United Arab Emirates (AE)</option>
<option value="GB">United Kingdom (GB)</option>
<option value="US" selected>United States (US)</option>
<option value="UY">Uruguay (UY)</option>
<option value="UZ">Uzbekistan (UZ)</option>
<option value="VU">Vanuatu (VU)</option>
<option value="VA">Vatican City (VA)</option>
<option value="VE">Venezuela (VE)</option>
<option value="VN">Vietnam (VN)</option>
<option value="YE">Yemen (YE)</option>
<option value="ZM">Zambia (ZM)</option>
<option value="ZW">Zimbabwe (ZW)</option>
          </datalist>
        </div>
        <div>
          <label class="block text-sm font-medium">性别</label>
          <select name="sex" class="mt-1 w-full p-2 border rounded">
            <option value="">-- 不限 --</option>
            <option value="M">男性</option>
            <option value="F">女性</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium">当前年龄</label>
          <div class="flex space-x-2">
            <input name="age_min" placeholder="最小" type="number" class="w-1/2 p-2 border rounded" />
            <input name="age_max" placeholder="最大" type="number" class="w-1/2 p-2 border rounded" />
          </div>
        </div>
        <div><label class="block text-sm font-medium">通缉者</label><input name="issuer" type="text" class="mt-1 w-full p-2 border rounded" /></div>
        <div><label class="block text-sm font-medium">关键词</label><input name="keyword" type="text" class="mt-1 w-full p-2 border rounded" /></div>
        <button type="submit" class="w-full mt-4 text-white py-2 rounded hover:bg-[#003965] bg-[#00467f]">应用筛选</button>
      </form>
    </aside>

    <!-- 右侧内容展示 -->
    <main class="flex-1 overflow-y-auto p-6 ml-80">
      <h1 class="text-2xl font-bold mb-6">流通中的公共红色通缉令</h1>
<div id="loading" class="text-center my-10 hidden">
  <div class="flex items-center justify-center gap-3 text-gray-500 font-bold animate-pulse">
    <img src="/asset/icon_logo/icpo-logo.png" alt="logo" class="h-14">
    <span class="text-3xl">Interpol Data加载中，请稍候...</span>
  </div>
</div>
      <div id="results" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"></div>
<div id="no-results" class="hidden text-center text-gray-500 mt-8">
  <div class="flex items-center justify-center gap-4 text-3xl font-bold">
    <img src="/asset/icon_logo/icpo-logo.png" alt="logo" class="h-14">
    <span>未找到匹配的信息</span>
  </div>
</div>
      <div class="mt-6 flex justify-center space-x-2" id="pagination"></div>
    </main>
  </div>

  <!-- 页脚 -->
<footer class="bg-gray-200 p-4 text-center text-sm text-gray-600" style="margin-top: 20px;">
  <div class="flex flex-col items-center space-y-2">
    <!-- INTERPOL 标志 -->
    <img src="/asset/icon_logo/icpo.png" alt="INTERPOL Logo" class="h-10 w-auto mb-2">

    <!-- 文本说明 -->
    <p><script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/Kg8KQJs3VUpgJFYj/quote.js?theme=#FFFFFF,#333333,#262626,#333333,#FFFFFF,#1690FF,14&f=14&display=1,0,0,0,0,0,0,1"></script></p>
    <p>本网站用于展示 INTERPOL 红色通缉令数据，国际刑警组织授权官方站点</p>
    <p>联合库 UNHub 已获取国际刑警组织 API 团队的数据许可，适用于中国大陆的公众查看国际刑警组织数据库的内容。</p>
  </div>
</footer>

<!-- 弹窗详情 Modal -->
<div id="detail-modal" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm hidden">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl px-4">
    <div class="bg-white rounded-2xl shadow-2xl p-8 relative flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-8 transform transition-all duration-300 ease-in-out">

      <!-- 关闭按钮 -->
<button id="close-modal" class="absolute top-3 right-3 w-10 h-10 flex items-center justify-center rounded-full bg-gray-200 text-gray-600 hover:bg-gray-300 z-10 transition">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
  </svg>
</button>

      <!-- 图片部分 -->
      <div class="w-full md:w-64 flex-shrink-0">
        <img id="detail-img" src="" alt="通缉犯图片" class="w-full h-auto object-cover rounded-xl shadow-md bg-gray-100" />
      </div>

      <!-- 内容部分 -->
      <div id="detail-content" class="text-gray-800 text-base leading-relaxed flex-1 overflow-y-auto max-h-[75vh] pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
        <!-- 内容插入位置 -->
        <div class="animate-pulse text-center text-gray-400">数据加载中...</div>
      </div>
    </div>
  </div>
</div>
<!-- 小屏幕警告提示 + 背景高斯模糊 -->
<div id="mobile-warning-wrapper" class="fixed inset-0 z-[9999] hidden">
  <div class="absolute inset-0 backdrop-blur-md bg-black/40"></div>
  <div class="relative z-10 flex items-center justify-center h-full">
    <div class="bg-white rounded-xl shadow-xl p-6 max-w-xs w-full mx-4 text-center">
      <img src="/asset/icon_logo/International_Criminal_Police_Organization_logo.svg" alt="logo" class="h-24 mx-auto mb-2">
      <h2 class="text-xl font-semibold text-red-600 mb-2">⚠️ 不支持小屏设备 ⚠️</h2>
      <p class="text-gray-700 text-sm">请使用电脑端（PC）、大屏设备或宽度大于600px的设备查看以获得最佳浏览体验。</p>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script src="/js/interpol.js"></script>
</body>
</html>