admin/manjapro_v6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b0d901260b1385c193587f82cd7fedc132094d18
manjapro_v6/web/index.php
T
WD - Dev b0d901260b ALL UPDTAE MANJAPRO
2026-08-20 18:39:37 +07:00

732 lines
28 KiB
PHP
Raw Blame History

<?php
date_default_timezone_set('Asia/Jakarta');
$jam = date('H');
if ($jam >= 5 && $jam < 11) {
$waktuSapa = "Selamat Pagi";
} elseif ($jam >= 11 && $jam < 15) {
$waktuSapa = "Selamat Siang";
} elseif ($jam >= 15 && $jam < 18) {
$waktuSapa = "Selamat Sore";
} else {
$waktuSapa = "Selamat Malam";
}
$pesantext = $waktuSapa . ', Ada yang mau saya tanyakan terkait Aplikasi ManjaPro';
$pesantext_encoded = urlencode($pesantext);
// BaseUrl placeholder (ganti jika perlu)
$BaseUrl = '';
?>
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>ManjaPro — PT Radhika Data Nusantara</title>
<meta name="description" content="MANJAPRO — Solusi manajemen jaringan profesional untuk Mikrotik. PPPOE, Hotspot, billing, OLT, WhatsApp Gateway dan banyak lagi." />
<link rel="icon" href="web/assets/img/logo-sm.png" />
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Feather icons -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
:root{
--brand-1: #0f172a; /* dark navy */
--accent-1: linear-gradient(90deg,#ff7a18 0%, #2ec0ff 100%); /* warm -> cool */
--card-bg: rgba(255,255,255,0.04);
--glass: rgba(255,255,255,0.06);
--muted: #9aa4b2;
}
*{box-sizing:border-box}
body{
font-family: 'Inter',system-ui,Arial,Helvetica,sans-serif;
background: linear-gradient(180deg,#f7fbff 0%, #ffffff 60%);
color: #061028;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* Header */
.site-header{
background: transparent;
position: sticky;
top: 0;
z-index: 1030;
backdrop-filter: blur(6px);
transition: background .25s, box-shadow .25s, padding .25s;
}
.site-header.scrolled{
background: rgba(255,255,255,0.96);
box-shadow: 0 6px 22px rgba(8,15,30,0.06);
}
.navbar-brand img{height:40px}
/* Hero */
.hero {
padding: 84px 0;
position: relative;
}
.hero .eyebrow{
display:inline-block;
background: #eef6ff;
color:#0366d6;
padding:6px 12px;
border-radius:999px;
font-weight:600;
font-size:13px;
}
.hero h1{
font-size: clamp(30px, 4.6vw, 44px);
line-height:1.06;
margin-top:18px;
margin-bottom:18px;
font-weight:800;
letter-spacing:-0.02em;
color: var(--brand-1);
}
.hero p.lead{
font-size:16px;
color: #334155;
margin-bottom:22px;
}
.hero-visual{
background: linear-gradient(180deg, rgba(47,84,255,0.05), rgba(255,122,24,0.03));
border-radius:14px;
padding:20px;
display:flex;
align-items:center;
justify-content:center;
min-height:320px;
}
.device-mock{
width:100%;
max-width:420px;
border-radius:12px;
box-shadow: 0 12px 40px rgba(6,16,40,0.08);
background: white;
overflow:hidden;
border:1px solid rgba(6,16,40,0.04);
padding:18px;
}
/* Features */
.features .card{
border: none;
border-radius:12px;
box-shadow: 0 8px 20px rgba(10,20,40,0.04);
}
/* Pricing */
.price-card{
transition: transform .25s, box-shadow .25s;
border-radius:14px;
border:1px solid rgba(6,16,40,0.04);
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
padding:28px;
box-shadow: 0 10px 30px rgba(12,22,60,0.04);
height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.price-card:hover{ transform: translateY(-8px); box-shadow: 0 18px 45px rgba(12,22,60,0.08); }
.price-badge { font-weight:700; font-size:22px; color:#0b63f7; }
/* CTA */
.cta {
padding: 44px 0;
border-radius: 14px;
background: linear-gradient(90deg,#f8fbff, #ffffff);
box-shadow: 0 8px 30px rgba(10,20,40,0.03);
}
/* Footer */
.site-footer{
background: linear-gradient(180deg,#0b1220, #061028);
color: #cfe6ff;
padding: 48px 0;
}
.site-footer a{ color: #e6f4ff; text-decoration:none; }
.social-btn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background: rgba(255,255,255,0.03); margin-right:8px; }
/* Floating WhatsApp */
.wa-float{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 1200;
border-radius: 12px;
box-shadow: 0 12px 30px rgba(6,16,40,0.12);
display:flex; gap:8px;
align-items:center;
background: linear-gradient(90deg,#25D366,#128C7E);
color:white;
padding:10px 14px;
}
.wa-float a{ color:white; text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
/* Misc */
hr.sep{ border-top:1px dashed rgba(6,16,40,0.06); margin:18px 0; }
.muted{ color:var(--muted); font-size:14px; }
@media (max-width:991px){
.hero { padding:48px 0; }
.hero-visual{ margin-top:28px; }
}
</style>
</head>
<body>
<!-- Header -->
<header class="site-header">
<nav class="navbar navbar-expand-lg container">
<a class="navbar-brand d-flex align-items-center gap-2" href="#">
<img src="web/assets/img/logo/Logo_big.png" alt="ManjaPro" />
<div style="line-height:1;">
<div style="font-weight:800; color:var(--brand-1);">MANJAPRO</div>
<small class="text-muted" style="font-size:11px;">PT Radhika Data Nusantara</small>
</div>
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navMain">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMain">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item"><a href="#home" class="nav-link px-3">Home</a></li>
<li class="nav-item"><a href="#features" class="nav-link px-3">Fitur</a></li>
<li class="nav-item"><a href="#pricing" class="nav-link px-3">Paket</a></li>
<li class="nav-item"><a href="#contact" class="nav-link px-3">Kontak</a></li>
<li class="nav-item my-1 mx-3">
<a href="<?= $BaseUrl; ?>/login" class="btn btn-outline-primary">Login</a>
</li>
<li class="nav-item my-1 mx-3">
<a href="<?= $BaseUrl; ?>/register" class="btn btn-primary">Register</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- HERO -->
<section id="home" class="hero">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-lg-6">
<span class="eyebrow">Solusi Manajemen Jaringan</span>
<h1>
Satu Tampilan. <span style="background: linear-gradient(90deg,#ff7a18,#2ec0ff); -webkit-background-clip: text; color:transparent;">Kontrol Semua Kebutuhan</span>
</h1>
<p class="lead">
<strong>MANJAPRO</strong> dari <strong>PT Radhika Data Nusantara</strong> adalah platform manajemen jaringan profesional yang dirancang untuk mempermudah pengelolaan pengguna Mikrotik dalam satu sistem terpadu. Dengan fitur lengkap seperti <strong>PPPOE, Hotspot, penagihan & isolasi otomatis, WhatsApp Gateway, multi-admin, tiket gangguan, aplikasi agen, invoice, manajemen OLT, dukungan multi-Mikrotik</strong>, hingga <strong>automasi cerdas</strong>, MANJAPRO membantu bisnis Anda bekerja <strong>lebih cepat, lebih efisien, dan tanpa kerumitan</strong>.
</p>
<div class="d-flex gap-3 flex-wrap">
<a href="/register" class="btn btn-lg btn-primary">Registrasi Sekarang</a>
<a href="#features" class="btn btn-lg btn-outline-secondary">Lihat Fitur</a>
</div>
<!--<div class="mt-4 muted">Trusted by ISP, MSP, and network operators across Indonesia.</div>-->
<div class="row mt-5 g-3">
<div class="col-6 col-md-6">
<div class="d-flex align-items-center gap-3">
<div style="width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg,#fff, #f3f9ff);display:flex;align-items:center;justify-content:center;">
<i data-feather="zap" stroke-width="1.6"></i>
</div>
<div>
<div style="font-weight:700">Automasi Cerdas</div>
<div class="muted">Hemat waktu & biaya operasional</div>
</div>
</div>
</div>
<div class="col-6 col-md-6">
<div class="d-flex align-items-center gap-3">
<div style="width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg,#fff, #f3f9ff);display:flex;align-items:center;justify-content:center;">
<i data-feather="shield" stroke-width="1.6"></i>
</div>
<div>
<div style="font-weight:700">Keamanan & Kontrol</div>
<div class="muted">Multi-level akses & audit trail</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="hero-visual">
<div class="device-mock">
<!-- Mock UI -->
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
<div>
<div style="font-weight:800">MANJAPRO</div>
<div class="muted" style="font-size:13px">Dashboard • Live • 12:<?php echo date('i'); ?></div>
</div>
<div class="muted" style="font-size:13px">v1.8</div>
</div>
<div style="background:#f8fafc;border-radius:10px;padding:12px;border:1px solid rgba(6,16,40,0.03)">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
<div style="font-size:13px;font-weight:700">Pengguna Aktif</div>
<div style="font-size:18px;font-weight:800">1.248</div>
</div>
<div style="height:8px;background:linear-gradient(90deg,#2ec0ff,#ff7a18);border-radius:99px;"></div>
</div>
<div style="display:flex;gap:10px;margin-top:12px;">
<div style="flex:1;background:white;padding:12px;border-radius:8px;border:1px solid rgba(6,16,40,0.03)">
<div class="muted" style="font-size:12px">PPPOE</div>
<div style="font-weight:700;margin-top:6px">520 / 800</div>
</div>
<div style="flex:1;background:white;padding:12px;border-radius:8px;border:1px solid rgba(6,16,40,0.03)">
<div class="muted" style="font-size:12px">Hotspot</div>
<div style="font-weight:700;margin-top:6px">1.100</div>
</div>
</div>
<div style="margin-top:16px; display:flex; gap:8px; align-items:center;">
<div style="width:52px;height:52px;border-radius:10px;background:linear-gradient(180deg,#fff,#f3f9ff);display:flex;align-items:center;justify-content:center;">
<i data-feather="wifi"></i>
</div>
<div>
<div style="font-weight:700">Topologi Jaringan</div>
<div class="muted" style="font-size:13px">OLT • CRS310 • CCR2004</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="features" class="py-5 features">
<div class="container">
<div class="row align-items-center mb-4">
<div class="col-lg-8">
<h3 style="font-weight:800">Fitur Unggulan</h3>
<p class="muted">Semua kebutuhan manajemen jaringan dikumpulkan dalam satu platform yang mudah digunakan.</p>
</div>
<div class="col-lg-4 text-lg-end">
<a href="/register" class="btn btn-primary">Mulai Gratis</a>
</div>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card p-3 h-100">
<div class="d-flex gap-3">
<div class="bg-light rounded-3 p-3" style="min-width:56px; display:flex;align-items:center;justify-content:center;">
<i data-feather="server"></i>
</div>
<div>
<h5 style="margin-bottom:6px">Manajemen PPPOE & Hotspot</h5>
<div class="muted">Buat, kelola, dan pantau user dengan mudah — dukungan mass-import dan templating.</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card p-3 h-100">
<div class="d-flex gap-3">
<div class="bg-light rounded-3 p-3" style="min-width:56px; display:flex;align-items:center;justify-content:center;">
<i data-feather="credit-card"></i>
</div>
<div>
<h5 style="margin-bottom:6px">Billing & Isolasi Otomatis</h5>
<div class="muted">Tagihan, pengingat, dan isolir otomatis ketika tenggat lewat.</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card p-3 h-100">
<div class="d-flex gap-3">
<div class="bg-light rounded-3 p-3" style="min-width:56px; display:flex;align-items:center;justify-content:center;">
<i data-feather="smartphone"></i>
</div>
<div>
<h5 style="margin-bottom:6px">WhatsApp Gateway</h5>
<div class="muted">Kirim tagihan, notifikasi, dan OTP via WhatsApp terintegrasi.</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card p-3 h-100">
<div class="d-flex gap-3">
<div class="bg-light rounded-3 p-3" style="min-width:56px; display:flex;align-items:center;justify-content:center;">
<i data-feather="map"></i>
</div>
<div>
<h5 style="margin-bottom:6px">Maps & Monitoring</h5>
<div class="muted">Lokasi pelanggan, topologi, dan monitoring dalam 1 tampilan.</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card p-3 h-100">
<div class="d-flex gap-3">
<div class="bg-light rounded-3 p-3" style="min-width:56px; display:flex;align-items:center;justify-content:center;">
<i data-feather="users"></i>
</div>
<div>
<h5 style="margin-bottom:6px">Multi-Admin & Role</h5>
<div class="muted">Buat level akses sesuai peran — Admin, Teknisi, Penagih, Agen.</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card p-3 h-100">
<div class="d-flex gap-3">
<div class="bg-light rounded-3 p-3" style="min-width:56px; display:flex;align-items:center;justify-content:center;">
<i data-feather="tool"></i>
</div>
<div>
<h5 style="margin-bottom:6px">Integrasi OLT & Multi Mikrotik</h5>
<div class="muted">Koneksi dan kontrol perangkat OLT/Mikrotik dari 1 interface.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section id="pricing" class="py-5">
<div class="container">
<div class="row align-items-center mb-4">
<div class="col-lg-8">
<h3 style="font-weight:800">Paket Layanan</h3>
<p class="muted">Pilih paket sesuai kebutuhan — dari usaha kecil hingga enterprise.</p>
</div>
</div>
<div class="row g-4">
<!-- Basic -->
<div class="col-md-6 col-lg-4">
<div class="price-card">
<div>
<div class="d-flex align-items-center justify-content-between mb-3">
<div>
<div class="muted">Paket Basic</div>
<h4 style="margin:0">Rp. 200.000 / Bln</h4>
</div>
<div class="badge bg-light text-primary">Popular</div>
</div>
<hr class="sep">
<ul class="muted" style="padding-left:18px;">
<li>Managemant PPPOE Max 200</li>
<li>Managemant Hotspot Unlimited</li>
<li>Apk Agen Hotspot Max 10</li>
<li>Multi Level Akses</li>
</ul>
</div>
<div class="mt-4">
<a href="/register" class="btn btn-outline-primary w-100">Order Now</a>
</div>
</div>
</div>
<!-- Intermediate -->
<div class="col-md-6 col-lg-4">
<div class="price-card">
<div>
<div class="d-flex align-items-center justify-content-between mb-3">
<div>
<div class="muted">Paket Intermediate</div>
<h4 style="margin:0">Rp. 300.000 / Bln</h4>
</div>
<div class="badge bg-light text-primary">Best Value</div>
</div>
<hr class="sep">
<ul class="muted" style="padding-left:18px;">
<li>Managemant PPPOE Max 500</li>
<li>Managemant Hotspot Unlimited</li>
<li>Apk Agen Hotspot Max 20</li>
<li>Multi Level Akses</li>
</ul>
</div>
<div class="mt-4">
<a href="/register" class="btn btn-primary w-100">Order Now</a>
</div>
</div>
</div>
<!-- Advanced -->
<div class="col-md-6 col-lg-4">
<div class="price-card">
<div>
<div class="d-flex align-items-center justify-content-between mb-3">
<div>
<div class="muted">Paket Advanced</div>
<h4 style="margin:0">Rp. 450.000 / Bln</h4>
</div>
<div class="badge bg-light text-primary">Advanced</div>
</div>
<hr class="sep">
<ul class="muted" style="padding-left:18px;">
<li>Managemant PPPOE Max 800</li>
<li>Managemant Hotspot Unlimited</li>
<li>Apk Agen Hotspot Max 50</li>
<li>Multi Level Akses</li>
</ul>
</div>
<div class="mt-4">
<a href="/register" class="btn btn-outline-primary w-100">Order Now</a>
</div>
</div>
</div>
<!-- Additional packages (2 rows) -->
<div class="col-md-6 col-lg-4">
<div class="price-card">
<div>
<div class="muted">Paket Expert</div>
<h4>Rp. 750.000 / Bln</h4>
<hr class="sep">
<ul class="muted" style="padding-left:18px;">
<li>PPPOE Max 1200</li>
<li>Apk Agen Hotspot Max 70</li>
</ul>
</div>
<div class="mt-4">
<a href="/register" class="btn btn-outline-primary w-100">Order Now</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="price-card">
<div>
<div class="muted">Paket Master</div>
<h4>Rp. 1.000.000 / Bln</h4>
<hr class="sep">
<ul class="muted" style="padding-left:18px;">
<li>PPPOE Max 1600</li>
<li>Apk Agen Hotspot Max 100</li>
</ul>
</div>
<div class="mt-4">
<a href="/register" class="btn btn-outline-primary w-100">Order Now</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="price-card">
<div>
<div class="muted">Paket Custom</div>
<h4>Hubungi Sales</h4>
<hr class="sep">
<ul class="muted" style="padding-left:18px;">
<li>PPPOE Unlimited</li>
<li>Hotspot Unlimited</li>
<li>Apk Agen Hotspot Unlimited</li>
</ul>
</div>
<div class="mt-4">
<a href="https://wa.me/6281242659178?text=<?= $pesantext_encoded; ?>" target="_blank" class="btn btn-primary w-100">Hubungi Sales</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta">
<div class="container text-center">
<div class="row align-items-center">
<div class="col-lg-8 mx-auto">
<h4 style="font-weight:800">Siap tingkatkan manajemen jaringan Anda?</h4>
<p class="muted">Coba MANJAPRO sekarang — registrasi cepat atau tanya dulu via WhatsApp.</p>
<div class="d-flex gap-3 justify-content-center mt-3">
<a href="/register" class="btn btn-lg btn-primary">Daftar Sekarang</a>
<a href="https://wa.me/6281242659178?text=<?= $pesantext_encoded; ?>" target="_blank" class="btn btn-lg btn-outline-success">Tanya Sales</a>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT / FOOTER -->
<footer id="contact" class="site-footer mt-5">
<div class="container">
<div class="row gy-4">
<div class="col-md-6 col-lg-4">
<img src="web/assets/img/logo/logo_wht.png" alt="ManjaPro" style="height:44px" />
<p class="mt-3" style="max-width:360px">
<strong>PT RADHIKA DATA NUSANTARA</strong><br>
Jl Cirengkol - Cikembar - Sukabumi - Jawa Barat
</p>
<div class="mt-3">
<a class="social-btn" href="https://wa.me/6281242659178?text=<?= $pesantext_encoded; ?>" target="_blank"><i data-feather="phone"></i></a>
<a class="social-btn" href="#" target="_blank"><i data-feather="facebook"></i></a>
<a class="social-btn" href="#" target="_blank"><i data-feather="instagram"></i></a>
</div>
</div>
<div class="col-md-6 col-lg-4">
<h5 style="font-weight:700">Link Cepat</h5>
<ul class="list-unstyled muted" style="line-height:2">
<li><a href="#features">Fitur</a></li>
<li><a href="#pricing">Paket</a></li>
<li><a href="/register">Register</a></li>
<li><a href="<?= $BaseUrl; ?>/login">Login</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-4">
<h5 style="font-weight:700">Hubungi Support</h5>
<p class="muted">
Support 1: <a href="https://wa.me/6281242659178?text=<?= $pesantext_encoded; ?>" target="_blank">0812-4265-9178</a><br>
Support 2: <a href="https://wa.me/6285603935233?text=<?= $pesantext_encoded; ?>" target="_blank">0856-0393-5233</a>
</p>
<div class="mt-3">
<a class="btn btn-outline-light btn-sm" target="_blank" href="https://play.google.com/store/apps/details?id=com.bilspro.appbilspro">Download APK Agen</a>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col text-center muted">
&copy; <?= date('Y'); ?> PT Radhika Data Nusantara. All rights reserved.
</div>
</div>
</div>
</footer>
<!-- Floating WhatsApp -->
<div class="wa-float" role="button" aria-label="Chat WhatsApp">
<a href="https://wa.me/6281242659178?text=<?= $pesantext_encoded; ?>" target="_blank">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="vertical-align:middle">
<path d="M21 12.07A9 9 0 1 0 11.93 21L7.2 22.8 8.07 18A9 9 0 0 0 21 12.07z" fill="#fff" opacity="0.06"/>
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.1-.472-.149-.672.15-.2.297-.772.967-.947 1.165-.174.2-.348.223-.646.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.478-1.761-1.653-2.059-.174-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.199-.298.298-.497.099-.2.05-.373-.025-.522-.074-.148-.672-1.615-.921-2.212-.242-.58-.487-.502-.672-.512l-.572-.01c-.2 0-.52.074-.792.373s-1.04 1.016-1.04 2.479c0 1.462 1.064 2.877 1.213 3.074.149.2 2.096 3.2 5.077 4.487 0 0 .094.04.17.047.076.009.17.01.27.01.1 0 .2-.036.297-.073.099-.037 1.758-.805 2.006-1.59.248-.785.248-1.458.174-1.59-.075-.131-.272-.2-.572-.349z" fill="#fff"/>
</svg>
<span style="font-size:14px">Chat Sales</span>
</a>
</div>
<!-- Modal: Register (example) -->
<div class="modal fade" id="modalRegister" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<form class="modal-content" id="formRegister" onsubmit="handleRegister(event)">
<div class="modal-header">
<h5 class="modal-title">Form Registrasi</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Nama Lengkap</label>
<input type="text" class="form-control" name="nama" required>
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" name="email" required>
</div>
<div class="mb-3">
<label class="form-label">No. Telp / WhatsApp</label>
<input type="text" class="form-control" name="telp" required>
</div>
<div class="mb-3">
<label class="form-label">Nama Perusahaan (opsional)</label>
<input type="text" class="form-control" name="perusahaan">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-primary">Daftar</button>
</div>
</form>
</div>
</div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Feather icons
feather.replace();
// Header scroll effect
const header = document.querySelector('.site-header');
window.addEventListener('scroll', () => {
if (window.scrollY > 20) header.classList.add('scrolled');
else header.classList.remove('scrolled');
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(link=>{
link.addEventListener('click', (e)=>{
const target = document.querySelector(link.getAttribute('href'));
if(target){
e.preventDefault();
target.scrollIntoView({behavior:'smooth', block:'start'});
}
});
});
// Example register handler (change to real submission)
function handleRegister(e){
e.preventDefault();
const form = e.target;
const data = new FormData(form);
const payload = Object.fromEntries(data.entries());
// For demo, open WA with prefilled message
const msg = `Halo, saya ingin registrasi MANJAPRO. Nama: ${payload.nama}, Email: ${payload.email}, Telp: ${payload.telp}, Perusahaan: ${payload.perusahaan || '-'}`;
const url = 'https://wa.me/6281242659178?text=' + encodeURIComponent(msg);
window.open(url, '_blank');
// Close modal
const modalEl = document.getElementById('modalRegister');
const modal = bootstrap.Modal.getInstance(modalEl);
if(modal) modal.hide();
}
// Open register modal when clicking Register buttons (mobile)
document.querySelectorAll('a[href="/register"]').forEach(el=>{
el.addEventListener('click', function(e){
// on small screens show modal, otherwise go to register page
if(window.innerWidth < 992){
e.preventDefault();
const modal = new bootstrap.Modal(document.getElementById('modalRegister'));
modal.show();
}
});
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink