|
|
|
|
@@ -1,623 +0,0 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="id">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
|
|
|
<meta name="description" content="Kedai Master - Platform Point of Sale untuk kafe & restoran" />
|
|
|
|
|
<meta name="author" content="Kediri Technopark" />
|
|
|
|
|
<link rel="icon" href="assets/images/kediri-technopark-logo.png" />
|
|
|
|
|
|
|
|
|
|
<title>Kedai Master | Kediri Technopark</title>
|
|
|
|
|
|
|
|
|
|
<!-- Fonts & Icons -->
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet" />
|
|
|
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap (CDN) -->
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
|
|
<!-- Base Styles -->
|
|
|
|
|
<style>
|
|
|
|
|
:root{
|
|
|
|
|
--brand:#92a103;
|
|
|
|
|
--brand-2:#5c5a02;
|
|
|
|
|
--ink:#023047;
|
|
|
|
|
--bg:linear-gradient(90deg,#e4f0a3 0%,#e5f6ff 100%);
|
|
|
|
|
--gold:#ffd02a;
|
|
|
|
|
}
|
|
|
|
|
html{scroll-behavior:smooth}
|
|
|
|
|
body{
|
|
|
|
|
margin:0;
|
|
|
|
|
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
|
|
|
|
|
color:var(--ink);
|
|
|
|
|
background:var(--bg);
|
|
|
|
|
overflow-x:hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Header */
|
|
|
|
|
.app-header{
|
|
|
|
|
position:sticky; top:0; z-index:1000; background:#ffffffcc; backdrop-filter:saturate(180%) blur(8px);
|
|
|
|
|
border-bottom:1px solid rgba(0,0,0,.06);
|
|
|
|
|
}
|
|
|
|
|
.nav-brand img{height:44px}
|
|
|
|
|
.nav-toggle{border:none;background:transparent;font-size:1.5rem;display:none}
|
|
|
|
|
.nav-links{
|
|
|
|
|
display:flex; gap:1rem; align-items:center;
|
|
|
|
|
}
|
|
|
|
|
.nav-links a{
|
|
|
|
|
text-decoration:none; color:var(--ink); font-weight:500;
|
|
|
|
|
padding:.5rem .75rem; border-radius:.5rem;
|
|
|
|
|
}
|
|
|
|
|
.nav-links a.active,.nav-links a:hover{background:rgba(146,161,3,.12)}
|
|
|
|
|
.profile-wrapper{position:relative; display:inline-block;}
|
|
|
|
|
.profile-image{width:40px;height:40px;border-radius:50%;object-fit:cover;cursor:pointer;border:2px solid rgba(0,0,0,.05)}
|
|
|
|
|
.tooltip-box{
|
|
|
|
|
display:none; position:absolute; right:0; margin-top:.5rem;
|
|
|
|
|
background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:.75rem;
|
|
|
|
|
box-shadow:0 10px 30px rgba(0,0,0,.08); padding:.75rem; min-width:180px;
|
|
|
|
|
}
|
|
|
|
|
.signout-button{
|
|
|
|
|
width:100%; border:none; background:#ef4444; color:#fff; padding:.5rem .75rem;
|
|
|
|
|
border-radius:.5rem; font-weight:600; cursor:pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hero */
|
|
|
|
|
.hero{
|
|
|
|
|
display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:3rem;
|
|
|
|
|
padding:clamp(2rem, 4vw, 4rem) 0;
|
|
|
|
|
}
|
|
|
|
|
.hero h1{
|
|
|
|
|
font-size:clamp(1.8rem, 4vw, 3rem);
|
|
|
|
|
background: linear-gradient(90deg,var(--brand-2), var(--brand));
|
|
|
|
|
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:1rem;
|
|
|
|
|
}
|
|
|
|
|
.hero p{font-size:clamp(1rem, 1.4vw, 1.15rem); color:#244; line-height:1.7}
|
|
|
|
|
.move-image img{
|
|
|
|
|
width:100%; max-width:640px; border-radius:20px; box-shadow:0 0 50px rgba(2,4,5,.12);
|
|
|
|
|
}
|
|
|
|
|
.floating-image{animation:float 3s ease-in-out infinite}
|
|
|
|
|
@keyframes float {
|
|
|
|
|
0%{ transform: translateY(18px) }
|
|
|
|
|
50%{ transform: translateY(-10px) }
|
|
|
|
|
100%{ transform: translateY(18px) }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Features */
|
|
|
|
|
.features{padding:2rem 0}
|
|
|
|
|
.features h2,.pricing-title{
|
|
|
|
|
text-align:center; font-weight:800; letter-spacing:.3px;
|
|
|
|
|
font-size:clamp(1.35rem,3.5vw,2.2rem);
|
|
|
|
|
}
|
|
|
|
|
.feature-grid{
|
|
|
|
|
display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:1rem;
|
|
|
|
|
}
|
|
|
|
|
.feature{
|
|
|
|
|
background: radial-gradient(ellipse at center, rgba(120,161,5,.18), transparent 70%);
|
|
|
|
|
border-radius:14px; padding:1.25rem; border:1px solid rgba(146,161,3,.2);
|
|
|
|
|
box-shadow:0 4px 18px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease;
|
|
|
|
|
}
|
|
|
|
|
.feature:hover{ transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,.08) }
|
|
|
|
|
.feature h3{font-size:1.05rem; margin-bottom:.5rem}
|
|
|
|
|
.feature p{color:#2a2a2a; margin:0}
|
|
|
|
|
|
|
|
|
|
/* Showcases (copx) */
|
|
|
|
|
.copx{display:flex; gap:1.5rem; align-items:center; justify-content:center; padding:2rem 0 1rem}
|
|
|
|
|
.copx-moving{height:auto; width:min(420px,90vw); border-radius:18px}
|
|
|
|
|
.copx-moving2{height:auto; width:min(220px,60vw); border-radius:18px}
|
|
|
|
|
.copx-shadow-container{position:relative; animation:float 3s ease-in-out infinite}
|
|
|
|
|
.copx-shadow-container::before{
|
|
|
|
|
content:""; position:absolute; top:100%; left:50%; width:80%; height:16px;
|
|
|
|
|
background: radial-gradient(ellipse at center, rgba(0,0,0,.25), transparent); transform: translateX(-50%);
|
|
|
|
|
border-radius:50%; filter:blur(3px); z-index:-1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.copx-section{
|
|
|
|
|
display:grid; grid-template-columns: auto auto 1fr; gap:1.25rem; align-items:center;
|
|
|
|
|
border-radius:16px; padding:1.25rem; max-width:1100px; margin-inline:auto; overflow:hidden;
|
|
|
|
|
}
|
|
|
|
|
.copx-image img{ width:100%; max-width:200px; border-radius:14px }
|
|
|
|
|
.copx-description h2{ color:#818f08; font-size:clamp(1.2rem,2.4vw,1.6rem); margin-bottom:.35rem }
|
|
|
|
|
.copx-description p{ color:#050404; line-height:1.7 }
|
|
|
|
|
|
|
|
|
|
/* CTA */
|
|
|
|
|
.cta{
|
|
|
|
|
text-align:center; padding:2rem 1rem; background:linear-gradient(90deg,#cbe4e9,#f5ff69);
|
|
|
|
|
border-radius:20px; margin-top:3rem;
|
|
|
|
|
}
|
|
|
|
|
.cta a{
|
|
|
|
|
display:inline-block; background:#a85c04; color:#fff; padding:.8rem 1.3rem; border-radius:100px;
|
|
|
|
|
text-decoration:none; font-weight:700;
|
|
|
|
|
}
|
|
|
|
|
.cta a:hover{ background:#00c3ff }
|
|
|
|
|
|
|
|
|
|
/* Pricing */
|
|
|
|
|
.back-pricing{
|
|
|
|
|
background: linear-gradient(135deg, var(--gold), #494507, var(--gold));
|
|
|
|
|
border:2px solid rgba(255,215,0,.3);
|
|
|
|
|
box-shadow:0 12px 40px rgba(255,208,42,.28), inset 0 0 12px rgba(255,255,255,.18);
|
|
|
|
|
padding: clamp(1.2rem,2.5vw,2rem); margin: clamp(1.5rem,3vw,3rem) 0; border-radius: 32px; position:relative; overflow:hidden;
|
|
|
|
|
}
|
|
|
|
|
.back-pricing::after{
|
|
|
|
|
content:""; position:absolute; inset:-20% -20% auto auto; width:160%; height:160%;
|
|
|
|
|
background: radial-gradient(circle, rgba(255,231,133,.22), transparent 70%);
|
|
|
|
|
filter: blur(60px); z-index:0; pointer-events:none;
|
|
|
|
|
}
|
|
|
|
|
.product-mrkyai-pricing{
|
|
|
|
|
position:relative; z-index:1; color:#383400; text-align:center;
|
|
|
|
|
background: rgba(255,255,255,.15); backdrop-filter: blur(14px); border:1px solid rgba(255,255,255,.25);
|
|
|
|
|
border-radius: 28px; padding: clamp(1rem,2.5vw,2rem);
|
|
|
|
|
}
|
|
|
|
|
.pricing-title{ color:#fafbe6; margin-bottom:1.25rem }
|
|
|
|
|
.pricing-options{
|
|
|
|
|
display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; align-items:stretch;
|
|
|
|
|
}
|
|
|
|
|
.price-card{
|
|
|
|
|
background: linear-gradient(90deg,#e9e7cb,#f5ff69); border:2px solid #b1ae0a; border-radius:16px;
|
|
|
|
|
padding:1rem; transition: transform .25s ease, box-shadow .25s ease;
|
|
|
|
|
display:flex; flex-direction:column; justify-content:space-between;
|
|
|
|
|
}
|
|
|
|
|
.price-card:hover{ transform:translateY(-6px); box-shadow: 0 10px 24px rgba(25,135,84,.28) }
|
|
|
|
|
.pack-title{ font-size:1.1rem; margin:.25rem 0 .5rem; color:#3c3d00; font-weight:800 }
|
|
|
|
|
.justlist{ list-style:none; padding-left:0; margin:0 0 1rem; display:flex; flex-direction:column; gap:.55rem; text-align:left }
|
|
|
|
|
.justlist li{ position:relative; padding-left:28px; font-weight:500; color:#2e2e2e; line-height:1.45 }
|
|
|
|
|
.justlist li::before{ content:"✔"; position:absolute; left:0; top:0; color:#7c6f00; font-weight:900 }
|
|
|
|
|
.pack-price{ font-size:1.3rem; font-weight:900; color:#3c3d00; margin:.25rem 0 1rem }
|
|
|
|
|
.select-btn{ background:#198754; color:#fff; border:none; padding:.7rem 1rem; border-radius:10px; font-weight:700; }
|
|
|
|
|
.select-btn:hover{ background:#0f7a49 }
|
|
|
|
|
.recommended{ border-color:#ffd900; box-shadow:0 0 20px rgba(255,230,0,.28) }
|
|
|
|
|
.recommended::before{
|
|
|
|
|
content:"Rekomendasi"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
|
|
|
|
|
background:#fffb00; color:#000; font-size:.75rem; font-weight:800; padding:.25rem .6rem; border-radius:.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Dynamic Products */
|
|
|
|
|
#dynamic-products{ padding-top:2rem }
|
|
|
|
|
.product-grid{
|
|
|
|
|
display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1rem;
|
|
|
|
|
}
|
|
|
|
|
.product-card{
|
|
|
|
|
background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:1rem;
|
|
|
|
|
box-shadow:0 6px 20px rgba(0,0,0,.06);
|
|
|
|
|
display:flex; flex-direction:column; gap:.6rem;
|
|
|
|
|
}
|
|
|
|
|
.product-card img{ width:100%; height:180px; object-fit:cover; border-radius:10px }
|
|
|
|
|
.product-price{ font-weight:900; color:#3c3d00 }
|
|
|
|
|
|
|
|
|
|
/* Footer */
|
|
|
|
|
footer{
|
|
|
|
|
background:#111; color:#fff; padding:2rem 0 2.5rem; margin-top:2rem;
|
|
|
|
|
border-top-left-radius: 20px; border-top-right-radius:20px;
|
|
|
|
|
}
|
|
|
|
|
footer a{ color:#a3d8ff; text-decoration:none }
|
|
|
|
|
footer a:hover{ text-decoration:underline }
|
|
|
|
|
|
|
|
|
|
/* Utilities */
|
|
|
|
|
.container-narrow{max-width:1200px;margin:auto;padding:0 16px}
|
|
|
|
|
.gradient-button a{ display:inline-block; background:linear-gradient(90deg,#7cab00,#b6d313); color:#fff; padding:.55rem .9rem; border-radius:.8rem; text-decoration:none; font-weight:800 }
|
|
|
|
|
.skeleton{
|
|
|
|
|
background:linear-gradient(90deg, #eee, #f7f7f7, #eee);
|
|
|
|
|
background-size:200% 100%; animation:shine 1.3s linear infinite; border-radius:12px;
|
|
|
|
|
}
|
|
|
|
|
@keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}
|
|
|
|
|
|
|
|
|
|
/* Responsive */
|
|
|
|
|
@media (max-width: 1200px){
|
|
|
|
|
.feature-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
|
|
|
|
|
.product-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
|
|
|
|
|
.pricing-options{ grid-template-columns:repeat(3, minmax(0,1fr)); }
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 992px){
|
|
|
|
|
.hero{ grid-template-columns:1fr; gap:1.5rem; text-align:center }
|
|
|
|
|
.feature-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
|
|
|
|
|
.product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
|
|
|
|
|
.pricing-options{ grid-template-columns:repeat(2, minmax(0,1fr)) }
|
|
|
|
|
.copx{ flex-direction:column }
|
|
|
|
|
.copx-section{ grid-template-columns: 1fr; text-align:center }
|
|
|
|
|
.nav-toggle{ display:inline-flex }
|
|
|
|
|
.nav-links{ position:absolute; left:0; right:0; top:64px; background:#fff; border-bottom:1px solid rgba(0,0,0,.06); flex-direction:column; padding: .75rem; display:none }
|
|
|
|
|
.nav-links.show{ display:flex }
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 576px){
|
|
|
|
|
.feature-grid{ grid-template-columns:1fr }
|
|
|
|
|
.product-grid{ grid-template-columns:1fr }
|
|
|
|
|
.pricing-options{ grid-template-columns:1fr }
|
|
|
|
|
.price-card{ padding:1rem }
|
|
|
|
|
.product-card img{ height:160px }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Respect reduced motion */
|
|
|
|
|
@media (prefers-reduced-motion: reduce){
|
|
|
|
|
.floating-image, .copx-shadow-container{ animation:none }
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<!-- Header -->
|
|
|
|
|
<header class="app-header">
|
|
|
|
|
<div class="container-narrow py-2">
|
|
|
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
|
|
|
<a href="index.html" class="nav-brand d-flex align-items-center gap-2 text-decoration-none">
|
|
|
|
|
<img src="assets/images/kediri-technopark-logo.png" alt="Kediri Technopark" />
|
|
|
|
|
<strong class="text-dark">Kedai Master</strong>
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<button class="nav-toggle" id="navToggle" aria-label="Buka menu">
|
|
|
|
|
<i class="fas fa-bars"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<nav>
|
|
|
|
|
<ul class="nav-links m-0" id="navLinks">
|
|
|
|
|
<li><a class="active" href="index.html">Home</a></li>
|
|
|
|
|
<li><a class="scroll-to-section" href="#services">Services</a></li>
|
|
|
|
|
<li><a class="scroll-to-section" href="#produk">Product</a></li>
|
|
|
|
|
<li><a class="scroll-to-section" href="#academy">Academy</a></li>
|
|
|
|
|
<li><a class="scroll-to-section" href="#about">About</a></li>
|
|
|
|
|
<li><a class="scroll-to-section" href="#contact">Contact</a></li>
|
|
|
|
|
<li><a id="usernameTop" class="fw-bold"></a></li>
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<div id="authArea" class="d-flex align-items-center">
|
|
|
|
|
<div class="gradient-button me-2" id="loginBtnWrapper">
|
|
|
|
|
<a id="modal_trigger" href="#modal"><i class="fa fa-sign-in-alt"></i> Sign In Now</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="profileWrapper" class="profile-wrapper" style="display:none;">
|
|
|
|
|
<img id="profileImage" src="" alt="Profile" class="profile-image" />
|
|
|
|
|
<div id="tooltip" class="tooltip-box">
|
|
|
|
|
<div class="tooltip-content">
|
|
|
|
|
<p id="usernameTooltip" class="fw-bold mb-2"></p>
|
|
|
|
|
<button id="signOutBtn" class="signout-button">Sign Out</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<main>
|
|
|
|
|
<div class="container-narrow">
|
|
|
|
|
|
|
|
|
|
<!-- Hero -->
|
|
|
|
|
<section class="hero" id="home">
|
|
|
|
|
<div class="hero-text">
|
|
|
|
|
<h1>Kedai Master</h1>
|
|
|
|
|
<p>Platform Point of Sale berbasis web untuk kebutuhan operasional kafe & restoran masa kini—fleksibel, interaktif, dan efisien.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="move-image">
|
|
|
|
|
<img src="assets/images/cupcoffekedmas.jpeg.jpg" alt="Mockup Aplikasi Kedai Master" class="floating-image" loading="lazy" />
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Features -->
|
|
|
|
|
<section class="features" id="services">
|
|
|
|
|
<h2>Fitur Unggulan</h2>
|
|
|
|
|
<div class="feature-grid mt-3">
|
|
|
|
|
<div class="feature">
|
|
|
|
|
<h3>Manajemen Tenant & Kasir</h3>
|
|
|
|
|
<p>Tenant dapat mendaftar dan mengelola kafe serta akun kasir secara mandiri.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="feature">
|
|
|
|
|
<h3>QR Pemesanan di Meja</h3>
|
|
|
|
|
<p>Tamu memesan langsung dari meja melalui QR code unik.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="feature">
|
|
|
|
|
<h3>Otomatisasi Pesanan & Keuangan</h3>
|
|
|
|
|
<p>Transaksi tercatat otomatis, lengkap dengan laporan keuangan.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="feature">
|
|
|
|
|
<h3>Request & Voting Lagu</h3>
|
|
|
|
|
<p>Tamu dapat memilih lagu untuk meningkatkan interaksi & suasana.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Motion Images -->
|
|
|
|
|
<section class="copx" aria-label="Demo Gambar Aplikasi">
|
|
|
|
|
<div class="copx-shadow-container">
|
|
|
|
|
<img src="assets/images/kemasmoving.gif" alt="Menu bergerak" class="copx-moving" loading="lazy" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="copx-shadow-container">
|
|
|
|
|
<img src="assets/images/kedaimaster2.png" alt="Tampilan Kedai Master" class="copx-moving2" loading="lazy" />
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Showcase -->
|
|
|
|
|
<section class="copx-section" id="about">
|
|
|
|
|
<div class="copx-image">
|
|
|
|
|
<img src="assets/images/kemasmenuimage.png" alt="Gambar menu 1" loading="lazy" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="copx-image">
|
|
|
|
|
<img src="assets/images/kedaimaster1.png" alt="Gambar menu 2" loading="lazy" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="copx-description">
|
|
|
|
|
<h2>Desain Menu Modern</h2>
|
|
|
|
|
<p>Tampilan menu bersih, interaktif, dan mudah dipahami pelanggan—memberi pengalaman visual yang memudahkan memilih hidangan favorit. Cocok untuk kafe & restoran masa kini.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- CTA -->
|
|
|
|
|
<section class="cta" id="academy">
|
|
|
|
|
<h2 class="mb-3">Siap Tingkatkan Bisnis Anda?</h2>
|
|
|
|
|
<a href="contactkm.html" class="mt-2">Coba Kedai Master Sekarang</a>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Pricing -->
|
|
|
|
|
<section class="back-pricing" id="produk" aria-label="Paket Harga">
|
|
|
|
|
<div class="product-mrkyai-pricing">
|
|
|
|
|
<h2 class="pricing-title">OUR PACK KEDAI MASTER</h2>
|
|
|
|
|
<div class="pricing-options mt-3">
|
|
|
|
|
<article class="price-card">
|
|
|
|
|
<h3 class="pack-title">Starter Pack</h3>
|
|
|
|
|
<ul class="justlist">
|
|
|
|
|
<li>Manajemen menu & kategori</li>
|
|
|
|
|
<li>Dashboard penjualan dasar</li>
|
|
|
|
|
<li>1 user akses admin</li>
|
|
|
|
|
<li>Support via email</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="pack-price">Rp 249.000</div>
|
|
|
|
|
<button class="select-btn" onclick="window.location.href='contactkm.html'">Pilih Paket</button>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class="price-card recommended">
|
|
|
|
|
<h3 class="pack-title">Professional Pack</h3>
|
|
|
|
|
<ul class="justlist">
|
|
|
|
|
<li>Semua fitur Starter</li>
|
|
|
|
|
<li>Integrasi kasir & printer thermal</li>
|
|
|
|
|
<li>AI pencatatan & prediksi stok</li>
|
|
|
|
|
<li>Notifikasi transaksi ke pelanggan</li>
|
|
|
|
|
<li>Support via WhatsApp</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="pack-price">Rp 499.000</div>
|
|
|
|
|
<button class="select-btn" onclick="window.location.href='contactkm.html'">Pilih Paket</button>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class="price-card">
|
|
|
|
|
<h3 class="pack-title">Enterprise Pack</h3>
|
|
|
|
|
<ul class="justlist">
|
|
|
|
|
<li>Semua fitur Professional</li>
|
|
|
|
|
<li>AI analitik performa menu & outlet</li>
|
|
|
|
|
<li>Multi outlet & multi user</li>
|
|
|
|
|
<li>Integrasi loyalty customer</li>
|
|
|
|
|
<li>Priority support 24/7</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="pack-price">Rp 849.000</div>
|
|
|
|
|
<button class="select-btn" onclick="window.location.href='contactkm.html'">Pilih Paket</button>
|
|
|
|
|
</article>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Dynamic Products from API -->
|
|
|
|
|
<section class="features" id="dynamic-products" aria-live="polite" aria-busy="true">
|
|
|
|
|
<h2>Produk Lainnya</h2>
|
|
|
|
|
<div id="product-grid" class="product-grid mt-3">
|
|
|
|
|
<!-- Skeleton Loading -->
|
|
|
|
|
<div class="product-card">
|
|
|
|
|
<div class="skeleton" style="height:180px;"></div>
|
|
|
|
|
<div class="skeleton" style="height:18px; width:70%;"></div>
|
|
|
|
|
<div class="skeleton" style="height:14px; width:90%;"></div>
|
|
|
|
|
<div class="skeleton" style="height:20px; width:40%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="product-card">
|
|
|
|
|
<div class="skeleton" style="height:180px;"></div>
|
|
|
|
|
<div class="skeleton" style="height:18px; width:70%;"></div>
|
|
|
|
|
<div class="skeleton" style="height:14px; width:90%;"></div>
|
|
|
|
|
<div class="skeleton" style="height:20px; width:40%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="product-card">
|
|
|
|
|
<div class="skeleton" style="height:180px;"></div>
|
|
|
|
|
<div class="skeleton" style="height:18px; width:70%;"></div>
|
|
|
|
|
<div class="skeleton" style="height:14px; width:90%;"></div>
|
|
|
|
|
<div class="skeleton" style="height:20px; width:40%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="product-card">
|
|
|
|
|
<div class="skeleton" style="height:180px;"></div>
|
|
|
|
|
<div class="skeleton" style="height:18px; width:70%;"></div>
|
|
|
|
|
<div class="skeleton" style="height:14px; width:90%;"></div>
|
|
|
|
|
<div class="skeleton" style="height:20px; width:40%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<p id="product-empty" class="text-center mt-3 d-none">Belum ada produk yang dapat ditampilkan.</p>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Contact in Footer -->
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<!-- Footer -->
|
|
|
|
|
<footer id="contact">
|
|
|
|
|
<div class="container-narrow">
|
|
|
|
|
<div class="row justify-content-center g-4">
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
<h4>Contact Us</h4>
|
|
|
|
|
<p style="color:#eee;">Sunan Giri GG. I No. 11, Rejomulyo, Kediri, Jawa Timur 64129</p>
|
|
|
|
|
<p><a href="tel:+6281318894994">0813 1889 4994</a></p>
|
|
|
|
|
<p><a href="mailto:marketing@kediritechnopark.com">marketing@kediritechnopark.com</a></p>
|
|
|
|
|
<p><a href="https://instagram.com/kediri.technopark" target="_blank" rel="noopener">@kediri.technopark</a></p>
|
|
|
|
|
<p><a href="https://kediritechnopark.com" target="_blank" rel="noopener">www.KEDIRITECHNOPARK.com</a></p>
|
|
|
|
|
<div class="mt-2">
|
|
|
|
|
<a href="https://wa.me/6281318894994" target="_blank" rel="noopener" style="margin-right:10px; font-size:20px;"><i class="fab fa-whatsapp"></i></a>
|
|
|
|
|
<a href="https://instagram.com/kediri.technopark" target="_blank" rel="noopener" style="font-size:20px;"><i class="fab fa-instagram"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-lg-6 text-center">
|
|
|
|
|
<h4>About Our Company</h4>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<img src="assets/images/logo-white.png" alt="Logo" style="height:46px" />
|
|
|
|
|
</div>
|
|
|
|
|
<p>Kediri Technopark adalah pusat pengembangan inovasi digital dan aplikasi untuk masyarakat dan pelaku usaha.</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-12 text-center">
|
|
|
|
|
<div class="mt-2" style="opacity:.9">
|
|
|
|
|
<p>
|
|
|
|
|
© 2025 Kediri Technopark. All Rights Reserved.<br />
|
|
|
|
|
Design by <a href="https://templatemo.com/" target="_blank" rel="noopener">TemplateMo</a><br />
|
|
|
|
|
Distributed by <a href="https://themewagon.com/" target="_blank" rel="noopener">ThemeWagon</a>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<!-- Scripts -->
|
|
|
|
|
<script>
|
|
|
|
|
// Simple mobile nav toggle
|
|
|
|
|
const navToggle = document.getElementById('navToggle');
|
|
|
|
|
const navLinks = document.getElementById('navLinks');
|
|
|
|
|
if(navToggle && navLinks){
|
|
|
|
|
navToggle.addEventListener('click', () => {
|
|
|
|
|
navLinks.classList.toggle('show');
|
|
|
|
|
});
|
|
|
|
|
// Close menu on link click (mobile)
|
|
|
|
|
navLinks.querySelectorAll('a').forEach(a=>{
|
|
|
|
|
a.addEventListener('click', ()=> navLinks.classList.remove('show'));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Auth UI (based on JWT in localStorage)
|
|
|
|
|
function parseJwt(token) {
|
|
|
|
|
try {
|
|
|
|
|
const base64Url = token.split('.')[1];
|
|
|
|
|
const base64 = decodeURIComponent(atob(base64Url).split('').map(c =>
|
|
|
|
|
'%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
|
|
|
|
|
return JSON.parse(base64);
|
|
|
|
|
} catch (e) { return null; }
|
|
|
|
|
}
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
|
const token = localStorage.getItem("token");
|
|
|
|
|
|
|
|
|
|
const loginBtnWrapper = document.getElementById("loginBtnWrapper");
|
|
|
|
|
const profileWrapper = document.getElementById("profileWrapper");
|
|
|
|
|
const profileImage = document.getElementById("profileImage");
|
|
|
|
|
const tooltip = document.getElementById("tooltip");
|
|
|
|
|
const signOutBtn = document.getElementById("signOutBtn");
|
|
|
|
|
const usernameTop = document.getElementById("usernameTop");
|
|
|
|
|
const usernameTooltip = document.getElementById("usernameTooltip");
|
|
|
|
|
|
|
|
|
|
if (token) {
|
|
|
|
|
const payload = parseJwt(token);
|
|
|
|
|
const username = payload?.username || "User";
|
|
|
|
|
|
|
|
|
|
if (loginBtnWrapper) loginBtnWrapper.style.display = "none";
|
|
|
|
|
if (profileWrapper) profileWrapper.style.display = "inline-block";
|
|
|
|
|
if (usernameTop) usernameTop.innerText = username;
|
|
|
|
|
if (usernameTooltip) usernameTooltip.innerText = username;
|
|
|
|
|
|
|
|
|
|
if (profileImage)
|
|
|
|
|
profileImage.src = "https://ui-avatars.com/api/?background=EEE&color=333&name=" + encodeURIComponent(username);
|
|
|
|
|
|
|
|
|
|
if (profileImage && tooltip) {
|
|
|
|
|
profileImage.addEventListener("click", function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
tooltip.style.display = tooltip.style.display === "block" ? "none" : "block";
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.addEventListener("click", function (e) {
|
|
|
|
|
if (tooltip && !tooltip.contains(e.target)) {
|
|
|
|
|
tooltip.style.display = "none";
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (signOutBtn) {
|
|
|
|
|
signOutBtn.addEventListener("click", function () {
|
|
|
|
|
localStorage.removeItem("token");
|
|
|
|
|
window.location.reload();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
if (loginBtnWrapper) loginBtnWrapper.style.display = "inline-block";
|
|
|
|
|
if (profileWrapper) profileWrapper.style.display = "none";
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Smooth scroll for internal anchors
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{
|
|
|
|
|
anchor.addEventListener('click', function(e){
|
|
|
|
|
const id = this.getAttribute('href').slice(1);
|
|
|
|
|
const target = document.getElementById(id);
|
|
|
|
|
if(target){
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
target.scrollIntoView({behavior:'smooth', block:'start'});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Fetch dynamic products
|
|
|
|
|
(function loadProducts(){
|
|
|
|
|
const grid = document.getElementById('product-grid');
|
|
|
|
|
const empty = document.getElementById('product-empty');
|
|
|
|
|
if(!grid) return;
|
|
|
|
|
|
|
|
|
|
fetch("https://bot.kediritechnopark.com/webhook/store-production/products", {
|
|
|
|
|
headers: {
|
|
|
|
|
"accept": "*/*",
|
|
|
|
|
"content-type": "application/json"
|
|
|
|
|
},
|
|
|
|
|
method: "POST",
|
|
|
|
|
mode: "cors",
|
|
|
|
|
credentials: "omit",
|
|
|
|
|
body: JSON.stringify({ type: "product" })
|
|
|
|
|
})
|
|
|
|
|
.then(res => res.json())
|
|
|
|
|
.then(list => {
|
|
|
|
|
grid.innerHTML = ""; // clear skeleton
|
|
|
|
|
if(!Array.isArray(list) || list.length===0){
|
|
|
|
|
empty.classList.remove('d-none');
|
|
|
|
|
document.getElementById('dynamic-products').setAttribute('aria-busy','false');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let visible = 0;
|
|
|
|
|
list.forEach(product => {
|
|
|
|
|
if(product?.is_visible !== true) return;
|
|
|
|
|
visible++;
|
|
|
|
|
|
|
|
|
|
const card = document.createElement('article');
|
|
|
|
|
card.className = 'product-card';
|
|
|
|
|
|
|
|
|
|
const imgUrl = product.image && product.image.trim() !== "" ? product.image : 'assets/images/no-image.png';
|
|
|
|
|
|
|
|
|
|
card.innerHTML = `
|
|
|
|
|
<img src="${imgUrl}" alt="${product.name ?? 'Produk'}" loading="lazy" />
|
|
|
|
|
<h3 class="h6 m-0">${product.name ?? ''}</h3>
|
|
|
|
|
<p class="m-0" style="color:#333">${product.description ?? ''}</p>
|
|
|
|
|
<div class="product-price mt-1">Rp ${Number(product.price||0).toLocaleString('id-ID')}</div>
|
|
|
|
|
${product.site_url ? `<a class="btn btn-sm btn-outline-success mt-2" href="${product.site_url}" target="_blank" rel="noopener">Lihat Detail</a>` : `<button class="btn btn-sm btn-success mt-2" onclick="window.location.href='contactkm.html'">Tanyakan Produk</button>`}
|
|
|
|
|
`;
|
|
|
|
|
grid.appendChild(card);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if(visible===0){
|
|
|
|
|
empty.classList.remove('d-none');
|
|
|
|
|
}
|
|
|
|
|
document.getElementById('dynamic-products').setAttribute('aria-busy','false');
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
console.error("Error fetching products:", err);
|
|
|
|
|
// keep skeleton but show message
|
|
|
|
|
const msg = document.createElement('p');
|
|
|
|
|
msg.className="text-center mt-3";
|
|
|
|
|
msg.textContent = "Gagal memuat produk. Silakan refresh halaman.";
|
|
|
|
|
grid.after(msg);
|
|
|
|
|
document.getElementById('dynamic-products').setAttribute('aria-busy','false');
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap Bundle (for potential components you might add later) -->
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
everythingonblack