cctv/index.html at main · ngopslink/cctv · 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
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CCTV Athena Residence - NGOps!!!</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <meta name="description" content="Akses pantauan live untuk keamanan lingkungan bersama." />
<meta name="keywords" content="CCTV, Komplek, Keamanan, Kamera, Monitoring, Live, cctv.ngops.link" />
<meta property="og:image" content="https://cctv.ngops.link/ngops.jpg" />

<!-- Meta Tags untuk Open Graph -->
<meta property="og:title" content="CCTV Athena Residence - mau banget atau mau ajah?" />
<meta property="og:description" content="Pantau CCTV komplek secara online untuk meningkatkan keamanan dan kenyamanan warga." />
<meta property="og:image" content="https://cctv.ngops.link/ngops.jpg" />
<meta property="og:url" content="https://cctv.ngops.link" />
<meta property="og:type" content="website" />

<!-- Meta Tags untuk Twitter (opsional) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="mau banget atau mau ajah?" />
<meta name="twitter:description" content="Pantau CCTV komplek secara online untuk keamanan lingkungan bersama." />
<meta name="twitter:image" content="https://cctv.ngops.link/ngops.jpg" />


</head>
<body class="bg-gray-100 font-sans">

  <!-- Header -->
  <header class="bg-gray-900 text-white py-4">
    <div class="container mx-auto px-4 flex justify-between items-center">
      <h1 class="text-xl font-bold">CCTV Athena Residence</h1>
      <nav>
        <a href="#live" class="mx-2 hover:text-yellow-400">Live</a>
        <a href="#info" class="mx-2 hover:text-yellow-400">Info</a>
        <a href="#kontak" class="mx-2 hover:text-yellow-400">Kontak</a>
      </nav>
    </div>
  </header>

  <!-- Hero Section -->
  <section class="bg-gray-800 text-white text-center py-16">
    <h2 class="text-3xl font-bold mb-4">Selamat Datang di CCTV Athena Residence</h2>
    <p class="mb-6">Pantau keamanan lingkungan Anda secara online, mudah dan praktis.</p>
    <a href="https://192.168.1.10/" class="bg-yellow-500 text-gray-900 font-semibold py-2 px-4 rounded hover:bg-yellow-400">Lihat CCTV</a>
  </section>

  <!-- Live CCTV -->
  <section id="live" class="container mx-auto px-4 py-12">
    <h3 class="text-2xl font-bold mb-6 text-center">Live CCTV</h3>
    <div class="flex justify-center">
      <!-- Ganti iframe ini dengan link streaming CCTV -->
      <iframe src="https://www.youtube.com/embed/o5r1PeCabxs"
              class="w-full md:w-2/3 h-96 rounded shadow"
              frameborder="0" allowfullscreen></iframe>
    </div>
    <p class="text-center text-sm mt-4 text-gray-600">*Tampilan live CCTV hanya bisa diakses melalui jaringan internal komplek.</p>
  </section>

  <!-- Info Section -->
  <section id="info" class="bg-white py-12">
    <div class="container mx-auto px-4">
      <h3 class="text-2xl font-bold mb-6 text-center">Tentang Sistem CCTV</h3>
      <p class="text-gray-700 leading-relaxed text-center max-w-2xl mx-auto">
        Website ini dibuat untuk memudahkan warga komplek dalam memantau kondisi lingkungan.
        CCTV dipasang di titik-titik strategis untuk meningkatkan keamanan dan kenyamanan bersama.
      </p>
    </div>
  </section>

  <!-- Kontak -->
  <section id="kontak" class="bg-gray-200 py-12">
    <div class="container mx-auto px-4 text-center">
      <h3 class="text-2xl font-bold mb-6">Kontak Pengelola</h3>
      <p class="mb-2">Untuk pertanyaan atau laporan, hubungi:</p>
      <p class="font-semibold">WA: <a href="https://wa.me/628122013969" class="text-blue-600 hover:underline">Presiden Athena</a></p>
      <p>Email: <a href="mailto:admin@ngops.link" class="text-blue-600 hover:underline">admin@ngops.link</a></p>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-gray-900 text-white text-center py-4">
    <p>&copy; 2025 CCTV Ngops | <a href="https://cctv.ngops.link" class="underline">cctv.ngops.link</a></p>
  </footer>

</body>
</html>