karyamanswasta
4fe4b13f39
This commit performs a major cleanup of the `adventure-rental-app` by removing all existing components, pages, layouts, and project brief documents. The application is reduced to a minimal Vite shell. - Deleted all authentication, chatbot, and dashboard components and pages. - Removed outdated project brief and PRD markdown files. - Updated Vite and `@vitejs/plugin-react` dependencies. Additionally, the `framer-motion` dependency was added to the `bookoomoo-app`.
1450 lines
55 KiB
HTML
1450 lines
55 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||
<title>Kloowear Cult</title>
|
||
<meta name="description" content="" />
|
||
<meta name="keywords" content="" />
|
||
<link href="assets/img/logo.png" rel="icon" />
|
||
<link href="assets/img/logo.png" rel="apple-touch-icon" />
|
||
<link href="https://fonts.googleapis.com" rel="preconnect" />
|
||
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<link
|
||
href="assets/vendor/bootstrap/css/bootstrap.min.css"
|
||
rel="stylesheet"
|
||
/>
|
||
<link
|
||
href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
|
||
rel="stylesheet"
|
||
/>
|
||
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
|
||
<link
|
||
href="assets/vendor/glightbox/css/glightbox.min.css"
|
||
rel="stylesheet"
|
||
/>
|
||
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
|
||
<link href="assets/css/main.css" rel="stylesheet" />
|
||
|
||
<style>
|
||
/* --- CSS untuk Floating Chat Button & Window (Tema Adventure: Hitam-Oranye) --- */
|
||
.chat-button {
|
||
position: fixed;
|
||
bottom: 90px; /* Di atas tombol Back to Top */
|
||
right: 20px;
|
||
background-color: #333; /* Hitam */
|
||
color: #ff8c00; /* Oranye */
|
||
border: 2px solid #ff8c00; /* Border oranye */
|
||
border-radius: 10px; /* Sudut membulat */
|
||
width: 60px;
|
||
height: 60px;
|
||
font-size: 24px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Bayangan lebih gelap */
|
||
z-index: 1000;
|
||
transition: background-color 0.3s ease, border-color 0.3s ease; /* Hapus transisi transform */
|
||
}
|
||
.chat-button:hover {
|
||
background-color: #444; /* Sedikit lebih terang saat hover */
|
||
border-color: #ffa500; /* Oranye lebih terang saat hover */
|
||
}
|
||
/* Tidak ada rotasi atau perubahan warna saat aktif jika ingin menghilangkan animasi */
|
||
/* .chat-button.active {
|
||
background-color: #ff8c00;
|
||
color: #333;
|
||
border-color: #333;
|
||
} */
|
||
|
||
.chat-window {
|
||
position: fixed;
|
||
bottom: 160px; /* Di atas tombol chat (90 + 60 + 10 = 160px) */
|
||
right: 20px;
|
||
width: 300px;
|
||
height: 400px;
|
||
background-color: #333; /* Background window hitam */
|
||
border: 1px solid #ff8c00; /* Border oranye */
|
||
border-radius: 10px; /* Sudut membulat */
|
||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* Bayangan lebih gelap */
|
||
z-index: 999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease-out;
|
||
transform: translateY(20px);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.chat-window.active {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
visibility: visible;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.chat-header {
|
||
background-color: #ff8c00; /* Header oranye */
|
||
color: #333; /* Teks header hitam */
|
||
padding: 10px 15px;
|
||
border-top-left-radius: 8px;
|
||
border-top-right-radius: 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
}
|
||
.chat-header .close-button {
|
||
background: none;
|
||
border: none;
|
||
color: #333; /* Tombol tutup hitam */
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.chat-messages {
|
||
flex-grow: 1;
|
||
padding: 15px;
|
||
overflow-y: auto;
|
||
background-color: #222; /* Background pesan lebih gelap */
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #eee; /* Warna teks pesan default (dari bot) */
|
||
}
|
||
|
||
.chat-message {
|
||
background-color: #444; /* Warna gelembung pesan bot */
|
||
padding: 8px 12px;
|
||
border-radius: 15px;
|
||
margin-bottom: 10px;
|
||
max-width: 80%;
|
||
align-self: flex-start;
|
||
}
|
||
.chat-message.user-message {
|
||
background-color: #ff8c00; /* Warna gelembung pesan pengguna oranye */
|
||
color: #333; /* Teks pesan pengguna hitam */
|
||
align-self: flex-end;
|
||
}
|
||
|
||
.chat-input {
|
||
padding: 10px;
|
||
border-top: 1px solid #ff8c00; /* Border input oranye */
|
||
display: flex;
|
||
background-color: #333; /* Background input hitam */
|
||
}
|
||
.chat-input input {
|
||
flex-grow: 1;
|
||
padding: 8px;
|
||
border: 1px solid #666; /* Border input lebih terang */
|
||
border-radius: 4px;
|
||
margin-right: 10px;
|
||
background-color: #555; /* Background input box */
|
||
color: white; /* Warna teks input */
|
||
}
|
||
.chat-input input::placeholder {
|
||
color: #bbb; /* Warna placeholder */
|
||
}
|
||
.chat-input button {
|
||
background-color: #ff8c00; /* Tombol kirim oranye */
|
||
color: #333; /* Teks tombol kirim hitam */
|
||
padding: 8px 15px;
|
||
font-size: 14px;
|
||
}
|
||
.chat-input button:hover {
|
||
background-color: #ffa500; /* Oranye lebih terang saat hover */
|
||
}
|
||
|
||
/* Sesuaikan padding-bottom pada main content agar tidak tertutup chat button dan window */
|
||
main.main {
|
||
padding-bottom: 200px; /* Sesuaikan jika perlu */
|
||
}
|
||
/* Pastikan elemen footer tidak tumpang tindih */
|
||
.footer {
|
||
z-index: 1; /* Pastikan footer di bawah chat */
|
||
position: relative; /* Ini penting agar z-index bekerja */
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="index-page">
|
||
<header id="header" class="header d-flex align-items-center fixed-top">
|
||
<div
|
||
class="header-container container-fluid container-xl position-relative d-flex align-items-center justify-content-end"
|
||
>
|
||
<a href="index.html" class="logo d-flex align-items-center me-auto">
|
||
<img src="assets/img/logo.png" alt="" />
|
||
</a>
|
||
<nav id="navmenu" class="navmenu">
|
||
<ul>
|
||
<li><a href="#hero" class="active">Home</a></li>
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#services">Services</a></li>
|
||
<li><a href="#portfolio">Portfolio</a></li>
|
||
<li><a href="#team">Team</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
</ul>
|
||
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
|
||
</nav>
|
||
<a class="btn-getstarted" href="index.html#call-to-action">Chat Now</a>
|
||
</div>
|
||
</header>
|
||
<main class="main">
|
||
<section id="hero" class="hero section dark-background">
|
||
<img src="assets/img/hero-bg.jpg" alt="" data-aos="fade-in" class="" />
|
||
<div
|
||
class="container text-center"
|
||
data-aos="fade-up"
|
||
data-aos-delay="100"
|
||
>
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<h2>KLOOWEAR CULT</h2>
|
||
<p>Be Different, Be You</p>
|
||
<a href="#about" class="btn-get-started">Let's Go</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="clients" class="clients section light-background">
|
||
<div class="container" data-aos="fade-up">
|
||
<div id="clients-swiper" class="swiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<div class="client-logo">
|
||
<img
|
||
src="assets/img/clients/omo.png"
|
||
class="img-fluid"
|
||
alt="Client 1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="client-logo">
|
||
<img
|
||
src="assets/img/clients/ll.png"
|
||
class="img-fluid"
|
||
alt="Client 2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="client-logo">
|
||
<img
|
||
src="assets/img/clients/mh.png"
|
||
class="img-fluid"
|
||
alt="Client 5"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="client-logo">
|
||
<img
|
||
src="assets/img/clients/gb.png"
|
||
class="img-fluid"
|
||
alt="Client 6"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="client-logo">
|
||
<img
|
||
src="assets/img/clients/mi.png"
|
||
class="img-fluid"
|
||
alt="Client 7"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="client-logo">
|
||
<img
|
||
src="assets/img/clients/uniska.png"
|
||
class="img-fluid"
|
||
alt="Client 8"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="client-logo">
|
||
<img
|
||
src="assets/img/clients/bri.png"
|
||
class="img-fluid"
|
||
alt="Client 3"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="client-logo">
|
||
<img
|
||
src="assets/img/clients/ic.webp"
|
||
class="img-fluid"
|
||
alt="Client 4"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="about" class="about section">
|
||
<div class="container">
|
||
<div class="row gy-4">
|
||
<div
|
||
class="col-lg-6 position-relative align-self-start order-lg-last order-first"
|
||
data-aos="fade-up"
|
||
data-aos-delay="200"
|
||
>
|
||
<img src="assets/img/about.jpg" class="img-fluid" alt="" />
|
||
<a
|
||
href="https://www.youtube.com/watch?v=7msWpDCKk-0&t=13s"
|
||
class="glightbox pulsating-play-btn"
|
||
></a>
|
||
</div>
|
||
<div
|
||
class="col-lg-6 col-md-5 content order-last order-lg-first"
|
||
data-aos="fade-up"
|
||
data-aos-delay="100"
|
||
>
|
||
<h3>About Us</h3>
|
||
<p class="justify-text">
|
||
Founded in 2015, Kloowear was born out of a simple
|
||
frustration—the lack of quality accessories that could be
|
||
customized to reflect personal style and function. From that
|
||
need, a brand was built with a strong commitment to
|
||
craftsmanship and individuality. At Kloowear, every product is
|
||
handmade, not mass-produced. We craft each piece as if it were
|
||
for ourselves—ensuring it's durable, cleanly finished, and
|
||
comfortable to wear. Using only premium materials, we create
|
||
accessories that are built to last—whether you're in the city or
|
||
out in the wild. We believe that everyone deserves to stand out
|
||
and express themselves through unique gear. That's why we offer
|
||
fully customizable designs to match your identity and purpose.
|
||
Over the years, Kloowear has become a trusted choice among
|
||
outdoor enthusiasts, creators, and anyone looking for
|
||
distinctive, well-made gear. Our long-term vision is clear: to
|
||
build the largest and most complete paracord store in Kediri,
|
||
where quality, creativity, and personal style come together.
|
||
Kloowear – Be Different, Be You.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="stats" class="stats section accent-background">
|
||
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="row gy-4">
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="stats-item text-center w-100 h-100">
|
||
<span
|
||
data-purecounter-start="0"
|
||
data-purecounter-end="10"
|
||
data-purecounter-duration="1"
|
||
class="purecounter"
|
||
></span>
|
||
<p>Years Experience</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="stats-item text-center w-100 h-100">
|
||
<span
|
||
data-purecounter-start="0"
|
||
data-purecounter-end="98"
|
||
data-purecounter-duration="1"
|
||
class="purecounter"
|
||
></span>
|
||
<p>% Satisfaction</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="stats-item text-center w-100 h-100">
|
||
<span
|
||
data-purecounter-start="0"
|
||
data-purecounter-end="3601"
|
||
data-purecounter-duration="1"
|
||
class="purecounter"
|
||
></span>
|
||
<p>Positive Review</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="stats-item text-center w-100 h-100">
|
||
<span
|
||
data-purecounter-start="0"
|
||
data-purecounter-end="124"
|
||
data-purecounter-duration="1"
|
||
class="purecounter"
|
||
></span>
|
||
<p>Colors Option</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="why-us" class="why-us section">
|
||
<div class="container section-title" data-aos="fade-up">
|
||
<h2>Why Choose Us</h2>
|
||
<p>Discover what makes Kloowear stand out in every stitch</p>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row gy-4">
|
||
<div
|
||
class="col-lg-3 col-md-6"
|
||
data-aos="fade-up"
|
||
data-aos-delay="100"
|
||
>
|
||
<div class="why-us-item position-relative">
|
||
<div class="icon">
|
||
<i class="bi bi-hand-thumbs-up"></i>
|
||
</div>
|
||
<a class="stretched-link">
|
||
<h3>Handmade Quality</h3>
|
||
</a>
|
||
<p>
|
||
Each piece is crafted by hand with meticulous attention to
|
||
detail.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-3 col-md-6"
|
||
data-aos="fade-up"
|
||
data-aos-delay="200"
|
||
>
|
||
<div class="why-us-item position-relative">
|
||
<div class="icon">
|
||
<i class="bi bi-boxes"></i>
|
||
</div>
|
||
<a class="stretched-link">
|
||
<h3>Military-Grade</h3>
|
||
</a>
|
||
<p>
|
||
550 lbs paracord tested for strength and water resistance.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-3 col-md-6"
|
||
data-aos="fade-up"
|
||
data-aos-delay="300"
|
||
>
|
||
<div class="why-us-item position-relative">
|
||
<div class="icon">
|
||
<i class="bi bi-heart"></i>
|
||
</div>
|
||
<a class="stretched-link">
|
||
<h3>Custom Designs</h3>
|
||
</a>
|
||
<p>Personalize colors and engravings to match your style.</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-3 col-md-6"
|
||
data-aos="fade-up"
|
||
data-aos-delay="400"
|
||
>
|
||
<div class="why-us-item position-relative">
|
||
<div class="icon">
|
||
<i class="bi bi-heart"></i>
|
||
</div>
|
||
<a class="stretched-link">
|
||
<h3>Ethical Craft</h3>
|
||
</a>
|
||
<p>Supporting local artisans with fair wages.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section
|
||
id="call-to-action"
|
||
class="call-to-action section dark-background"
|
||
>
|
||
<img src="assets/img/cta-bg.jpg" alt="" />
|
||
<div class="container">
|
||
<div class="row" data-aos="zoom-in" data-aos-delay="100">
|
||
<div class="col-xl-9 text-center text-xl-start">
|
||
<h3>Say Hi to Bakul Tali. Your 24/7 Paracord Pal!</h3>
|
||
<p>
|
||
This ain’t your average AI. Bakul Tali learns from
|
||
<strong>artisan tricks</strong> and
|
||
<strong>your wildest ideas</strong>
|
||
to suggest paracord combos you won’t find anywhere else.
|
||
</p>
|
||
</div>
|
||
<div class="col-xl-3 cta-btn-container text-center">
|
||
<a class="cta-btn align-middle" id="ctaChatButton">
|
||
<i class="bi bi-robot me-2"></i> Open Chat
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="services" class="services section">
|
||
<div class="container section-title" data-aos="fade-up">
|
||
<h2>Our Services</h2>
|
||
<p>Quality paracord solutions tailored to your needs</p>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row gy-4">
|
||
<div
|
||
class="col-lg-4 col-md-6"
|
||
data-aos="fade-up"
|
||
data-aos-delay="100"
|
||
>
|
||
<div class="service-item position-relative">
|
||
<div class="icon">
|
||
<i class="bi bi-palette"></i>
|
||
</div>
|
||
<a class="stretched-link">
|
||
<h3>Custom Designs</h3>
|
||
</a>
|
||
<p>
|
||
Create unique paracord accessories with your choice of colors,
|
||
patterns, and personal engravings.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6"
|
||
data-aos="fade-up"
|
||
data-aos-delay="200"
|
||
>
|
||
<div class="service-item position-relative">
|
||
<div class="icon">
|
||
<i class="bi bi-boxes"></i>
|
||
</div>
|
||
<a class="stretched-link">
|
||
<h3>Bulk Orders</h3>
|
||
</a>
|
||
<p>
|
||
Special discounts for group purchases. Perfect for events,
|
||
teams, or corporate gifts.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6"
|
||
data-aos="fade-up"
|
||
data-aos-delay="300"
|
||
>
|
||
<div class="service-item position-relative">
|
||
<div class="icon">
|
||
<i class="bi bi-tools"></i>
|
||
</div>
|
||
<a class="stretched-link">
|
||
<h3>Repair Service</h3>
|
||
</a>
|
||
<p>
|
||
We fix damaged paracord items. Free repairs for products
|
||
purchased from us.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6"
|
||
data-aos="fade-up"
|
||
data-aos-delay="400"
|
||
>
|
||
<div class="service-item position-relative">
|
||
<div class="icon">
|
||
<i class="bi bi-people"></i>
|
||
</div>
|
||
<a class="stretched-link">
|
||
<h3>DIY Workshops</h3>
|
||
</a>
|
||
<p>
|
||
Learn to make your own paracord accessories through our online
|
||
or in-person classes.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6"
|
||
data-aos="fade-up"
|
||
data-aos-delay="500"
|
||
>
|
||
<div class="service-item position-relative">
|
||
<div class="icon">
|
||
<i class="bi bi-shield-check"></i>
|
||
</div>
|
||
<a class="stretched-link">
|
||
<h3>Survival Kits</h3>
|
||
</a>
|
||
<p>
|
||
Ready-made paracord bundles with essential outdoor tools for
|
||
your adventures.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6"
|
||
data-aos="fade-up"
|
||
data-aos-delay="600"
|
||
>
|
||
<div class="service-item position-relative">
|
||
<div class="icon">
|
||
<i class="bi bi-lightning-charge"></i>
|
||
</div>
|
||
<a class="stretched-link">
|
||
<h3>Fast Shipping</h3>
|
||
</a>
|
||
<p>
|
||
Most orders processed within 24 hours. Free shipping options
|
||
available.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="portfolio" class="portfolio section">
|
||
<div class="container section-title" data-aos="fade-up">
|
||
<h2>Our Creations</h2>
|
||
<p>Handcrafted paracord accessories that tell your story</p>
|
||
</div>
|
||
<div class="container">
|
||
<div
|
||
class="isotope-layout"
|
||
data-default-filter="*"
|
||
data-layout="masonry"
|
||
data-sort="original-order"
|
||
>
|
||
<ul
|
||
class="portfolio-filters isotope-filters"
|
||
data-aos="fade-up"
|
||
data-aos-delay="100"
|
||
>
|
||
<li data-filter="*" class="filter-active">All</li>
|
||
<li data-filter=".filter-bracelet">Bracelet</li>
|
||
<li data-filter=".filter-lanyard">Lanyard</li>
|
||
<li data-filter=".filter-keychain">Keychain</li>
|
||
<li data-filter=".filter-zipper">Zipper Pull</li>
|
||
</ul>
|
||
<div
|
||
class="row gy-4 isotope-container"
|
||
data-aos="fade-up"
|
||
data-aos-delay="200"
|
||
>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-bracelet"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/b4.JPG"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/b4.JPG"
|
||
class="img-fluid"
|
||
alt="Cobra Weave Bracelet"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4>
|
||
<a href="" title="More Details">Cobra Weave Bracelet</a>
|
||
</h4>
|
||
<p>Military-grade 550 paracord with premium buckle</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-lanyard"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/l2.jpg"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/l2.jpg"
|
||
class="img-fluid"
|
||
alt="Office ID Lanyard"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4>
|
||
<a href="" title="More Details">Office ID Lanyard</a>
|
||
</h4>
|
||
<p>Lightweight design with quick-release clasp</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-keychain"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/k.JPG"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/k.JPG"
|
||
class="img-fluid"
|
||
alt="Survival Keychain"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4>
|
||
<a href="" title="More Details">Survival Keychain</a>
|
||
</h4>
|
||
<p>Integrated fire starter and mini compass</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-zipper"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/z3.jpg"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/z3.jpg"
|
||
class="img-fluid"
|
||
alt="Colorful Zipper Pull"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4>
|
||
<a href="" title="More Details">Tactical Zipper Pull</a>
|
||
</h4>
|
||
<p>Ready for action, built to impress.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-bracelet"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/b7.JPG"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/b7.JPG"
|
||
class="img-fluid"
|
||
alt="DNA Bracelet"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4>
|
||
<a href="" title="More Details">Premium Bracelet</a>
|
||
</h4>
|
||
<p>Double helix weave with personalized bead</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-lanyard"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/l3.png"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/l3.png"
|
||
class="img-fluid"
|
||
alt="Festival Lanyard"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4><a href="" title="More Details">Casual Lanyard</a></h4>
|
||
<p>Multi purpose lanyard for daily activity</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-keychain"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/k2.jpg"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/k2.jpg"
|
||
class="img-fluid"
|
||
alt="Carabiner Keychain"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4>
|
||
<a href="" title="More Details">Carabiner Keychain</a>
|
||
</h4>
|
||
<p>Aluminum carabiner with paracord grip</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-zipper"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/z1.png"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/z1.png"
|
||
class="img-fluid"
|
||
alt="Camouflage Zipper Pull"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4>
|
||
<a href="" title="More Details">Tactical Zipper Pull</a>
|
||
</h4>
|
||
<p>Tough look, smooth function – Camouflage Zipper Pull.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-bracelet"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/b6.JPG"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/b6.JPG"
|
||
class="img-fluid"
|
||
alt="Family Bracelet Set"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4><a href="" title="More Details">Whale Bracelet</a></h4>
|
||
<p>
|
||
Simple design that adds a unique twist to your daily
|
||
outfit.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-lanyard"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/l1.jpg"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/l1.jpg"
|
||
class="img-fluid"
|
||
alt="Tactical Lanyard"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4>
|
||
<a href="" title="More Details">Tactical Lanyard</a>
|
||
</h4>
|
||
<p>Breakaway design with tactical look</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-keychain"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/k3.JPG"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/k3.JPG"
|
||
class="img-fluid"
|
||
alt="Bottle Opener Keychain"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4><a href="" title="More Details">Casual Keychain</a></h4>
|
||
<p>Best for tagging anykind of your key</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-zipper"
|
||
>
|
||
<div class="portfolio-content h-100">
|
||
<a
|
||
href="assets/img/portfolio/z2.jpg"
|
||
data-gallery="portfolio-gallery-app"
|
||
class="glightbox"
|
||
><img
|
||
src="assets/img/portfolio/z2.jpg"
|
||
class="img-fluid"
|
||
alt="Glow Zipper Pull"
|
||
/></a>
|
||
<div class="portfolio-info">
|
||
<h4>
|
||
<a href="" title="More Details">Basic Zipper Pull</a>
|
||
</h4>
|
||
<p>Blend in. Stand out. The perfect zip detail.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="testimonials" class="testimonials section dark-background">
|
||
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="swiper init-swiper">
|
||
<script type="application/json" class="swiper-config">
|
||
{
|
||
"loop": true,
|
||
"speed": 600,
|
||
"autoplay": {
|
||
"delay": 5000
|
||
},
|
||
"slidesPerView": "auto",
|
||
"pagination": {
|
||
"el": ".swiper-pagination",
|
||
"type": "bullets",
|
||
"clickable": true
|
||
}
|
||
}
|
||
</script>
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<div class="testimonial-item">
|
||
<div class="row gy-4 justify-content-center">
|
||
<div class="col-lg-6">
|
||
<div class="testimonial-content">
|
||
<p>
|
||
<i class="bi bi-quote quote-icon-left"></i>
|
||
<span
|
||
>Gue pake gelang Kloowear tiap hari dari hiking
|
||
sampe ke mall, udah 1 tahun lebih masih keren banget
|
||
warnanya! Banyak yang nanya beli dimana soalnya
|
||
modelnya beda dari yang lain.</span
|
||
>
|
||
<i class="bi bi-quote quote-icon-right"></i>
|
||
</p>
|
||
<h3>Budi Santoso</h3>
|
||
<h4>Outdoor Enthusiast, Jakarta</h4>
|
||
<div class="stars">
|
||
<i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-2 text-center">
|
||
<img
|
||
src="assets/img/testimonials/testimonials-1.jpg"
|
||
class="img-fluid testimonial-img"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="testimonial-item">
|
||
<div class="row gy-4 justify-content-center">
|
||
<div class="col-lg-6">
|
||
<div class="testimonial-content">
|
||
<p>
|
||
<i class="bi bi-quote quote-icon-left"></i>
|
||
<span
|
||
>Zipper pullnya unik banget! Tas ransel gue jadi
|
||
paling eye-catching di kantor. Udah 6 bulan dipake
|
||
masih awet padahal sering kehujanan.</span
|
||
>
|
||
<i class="bi bi-quote quote-icon-right"></i>
|
||
</p>
|
||
<h3>Dewi Anggraeni</h3>
|
||
<h4>Graphic Designer, Bandung</h4>
|
||
<div class="stars">
|
||
<i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-2 text-center">
|
||
<img
|
||
src="assets/img/testimonials/testimonials-2.jpg"
|
||
class="img-fluid testimonial-img"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="testimonial-item">
|
||
<div class="row gy-4 justify-content-center">
|
||
<div class="col-lg-6">
|
||
<div class="testimonial-content">
|
||
<p>
|
||
<i class="bi bi-quote quote-icon-left"></i>
|
||
<span
|
||
>ID card kantor gue pake lanyard Kloowear udah
|
||
setahun lebih. Tahan banting banget - bolak-balik
|
||
proyek, kena hujan, masih aja kelihatan baru!</span
|
||
>
|
||
<i class="bi bi-quote quote-icon-right"></i>
|
||
</p>
|
||
<h3>Rudi Hermawan</h3>
|
||
<h4>Site Manager, Balikpapan</h4>
|
||
<div class="stars">
|
||
<i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-2 text-center">
|
||
<img
|
||
src="assets/img/testimonials/testimonials-3.jpg"
|
||
class="img-fluid testimonial-img"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="testimonial-item">
|
||
<div class="row gy-4 justify-content-center">
|
||
<div class="col-lg-6">
|
||
<div class="testimonial-content">
|
||
<p>
|
||
<i class="bi bi-quote quote-icon-left"></i>
|
||
<span
|
||
>Tali kameranya enak banget dipakai seharian! Ringan
|
||
tapi kuat, nggak bikin pegel leher kayak tali biasa.
|
||
Warna orange-nya juga bikin gampang dicari kalo lagi
|
||
sibuk liputan.</span
|
||
>
|
||
<i class="bi bi-quote quote-icon-right"></i>
|
||
</p>
|
||
<h3>Fitriani Wijaya</h3>
|
||
<h4>Photographer, Yogyakarta</h4>
|
||
<div class="stars">
|
||
<i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i
|
||
><i class="bi bi-star-fill"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-2 text-center">
|
||
<img
|
||
src="assets/img/testimonials/testimonials-4.jpg"
|
||
class="img-fluid testimonial-img"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-pagination"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="team" class="team section">
|
||
<div class="container section text-center" data-aos="fade-up">
|
||
<h2>Founder</h2>
|
||
<p>The creative mind behind Kloowear's unique paracord designs</p>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row gy-4 justify-content-center">
|
||
<div
|
||
class="col-xl-3 col-md-6 d-flex"
|
||
data-aos="fade-up"
|
||
data-aos-delay="100"
|
||
>
|
||
<div class="member">
|
||
<img
|
||
src="assets/img/team/team-1.jpg"
|
||
class="img-fluid"
|
||
alt="Kloowear Founder"
|
||
/>
|
||
<h4>Rizky 'Kinthoel'</h4>
|
||
<span>Chief Paracord Artisan</span>
|
||
<div class="social">
|
||
<a href="https://wa.me/6285747868690"
|
||
><i class="bi bi-whatsapp"></i
|
||
></a>
|
||
<a href="https://www.facebook.com/sikinthoel"
|
||
><i class="bi bi-facebook"></i
|
||
></a>
|
||
<a href="https://www.instagram.com/sikinthoel/"
|
||
><i class="bi bi-instagram"></i
|
||
></a>
|
||
<a href=""><i class="bi bi-linkedin"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="contact" class="contact section">
|
||
<div class="container section-title" data-aos="fade-up">
|
||
<h2>Get in Touch</h2>
|
||
<p>
|
||
Have a question, custom request, or collaboration idea? We're here
|
||
to help you stand out.
|
||
</p>
|
||
</div>
|
||
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="row gy-4">
|
||
<div class="col-lg-5">
|
||
<div class="info-wrap">
|
||
<div
|
||
class="info-item d-flex"
|
||
data-aos="fade-up"
|
||
data-aos-delay="200"
|
||
>
|
||
<i class="bi bi-geo-alt flex-shrink-0"></i>
|
||
<div>
|
||
<h3>Address</h3>
|
||
<p>
|
||
Jl. Setono No.110, Kota Kediri, Jawa Timur, INA - 64122
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="info-item d-flex"
|
||
data-aos="fade-up"
|
||
data-aos-delay="300"
|
||
>
|
||
<i class="bi bi-telephone flex-shrink-0"></i>
|
||
<div>
|
||
<h3>Call Us</h3>
|
||
<p>+62 851 7991 4486</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="info-item d-flex"
|
||
data-aos="fade-up"
|
||
data-aos-delay="400"
|
||
>
|
||
<i class="bi bi-envelope flex-shrink-0"></i>
|
||
<div>
|
||
<h3>Email Us</h3>
|
||
<p>contact@kloowear.com</p>
|
||
</div>
|
||
</div>
|
||
<iframe
|
||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3952.7976473762833!2d112.0240783758158!3d-7.811233277559197!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e785769f0541d41%3A0x7cedeee94ffacc00!2sKloowear%20Store!5e0!3m2!1sen!2sid!4v1746208908640!5m2!1sen!2sid"
|
||
frameborder="0"
|
||
style="border: 0; width: 100%; height: 270px"
|
||
allowfullscreen=""
|
||
loading="lazy"
|
||
referrerpolicy="no-referrer-when-downgrade"
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<form
|
||
action="forms/contact.php"
|
||
method="post"
|
||
class="php-email-form"
|
||
data-aos="fade-up"
|
||
data-aos-delay="200"
|
||
>
|
||
<div class="row gy-4">
|
||
<div class="col-md-6">
|
||
<label for="name-field" class="pb-2">Name</label>
|
||
<input
|
||
type="text"
|
||
name="name"
|
||
id="name-field"
|
||
class="form-control"
|
||
required=""
|
||
/>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="subject-field" class="pb-2">Phone</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
name="subject"
|
||
id="subject-field"
|
||
required=""
|
||
/>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<label for="email-field" class="pb-2">Email</label>
|
||
<input
|
||
type="email"
|
||
class="form-control"
|
||
name="email"
|
||
id="email-field"
|
||
required=""
|
||
/>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<label for="message-field" class="pb-2"
|
||
>Chat Bakul Tali</label
|
||
>
|
||
<textarea
|
||
class="form-control"
|
||
name="message"
|
||
rows="10"
|
||
id="message-field"
|
||
required=""
|
||
></textarea>
|
||
</div>
|
||
<div class="col-md-12 text-center">
|
||
<div class="loading">Loading</div>
|
||
<div class="error-message"></div>
|
||
<div class="sent-message">
|
||
Your message has been sent. Thank you!
|
||
</div>
|
||
<button type="submit">Send Message</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<footer id="footer" class="footer dark-background">
|
||
<div class="container footer-top">
|
||
<div class="row gy-4">
|
||
<div class="col-lg-5 col-md-12 footer-about">
|
||
<a href="index.html" class="logo d-flex align-items-center">
|
||
<span class="sitename">Kloowear</span>
|
||
</a>
|
||
<p>
|
||
Kloowear Cult is your ultimate destination for handcrafted paracord accessories. We believe in unique designs, military-grade durability, and ethical craftsmanship, empowering you to Be Different, Be You.
|
||
</p>
|
||
<div class="social-links d-flex mt-4">
|
||
<a href=""><i class="bi bi-twitter-x"></i></a>
|
||
<a href=""><i class="bi bi-facebook"></i></a>
|
||
<a href=""><i class="bi bi-instagram"></i></a>
|
||
<a href=""><i class="bi bi-linkedin"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-2 col-6 footer-links">
|
||
<h4>Useful Links</h4>
|
||
<ul>
|
||
<li><a href="#hero">Home</a></li>
|
||
<li><a href="#about">About Us</a></li>
|
||
<li><a href="#services">Our Services</a></li>
|
||
<li><a href="#">Terms of Service</a></li>
|
||
<li><a href="#">Privacy Policy</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-2 col-6 footer-links">
|
||
<h4>Our Services</h4>
|
||
<ul>
|
||
<li><a href="#services">Custom Designs</a></li>
|
||
<li><a href="#services">Bulk Orders</a></li>
|
||
<li><a href="#services">Repair Service</a></li>
|
||
<li><a href="#services">DIY Workshops</a></li>
|
||
<li><a href="#services">Survival Kits</a></li>
|
||
<li><a href="#services">Fast Shipping</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="container copyright text-center mt-4">
|
||
<p>
|
||
© <span>2025</span> <strong class="px-1 sitename">Kloowear</strong>
|
||
<span>All Rights Reserved</span>
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
<a
|
||
href="#"
|
||
id="scroll-top"
|
||
class="scroll-top d-flex align-items-center justify-content-center"
|
||
><i class="bi bi-arrow-up-short"></i
|
||
></a>
|
||
<div id="preloader"></div>
|
||
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||
<script src="assets/vendor/php-email-form/validate.js"></script>
|
||
<script src="assets/vendor/aos/aos.js"></script>
|
||
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
|
||
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
|
||
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
|
||
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
|
||
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
|
||
<script src="assets/js/main.js"></script>
|
||
<script src="assets/js/swipper.js"></script>
|
||
|
||
<button class="chat-button" id="toggleChatButton">
|
||
<i class="bi bi-chat-dots"></i>
|
||
</button>
|
||
|
||
<div class="chat-window" id="chatWindow">
|
||
<div class="chat-header">
|
||
<span>Bakul Tali Chat</span>
|
||
<button class="close-button" id="closeChatButtonInHeader">
|
||
×
|
||
</button>
|
||
</div>
|
||
<div class="chat-messages" id="chatMessages">
|
||
<div class="chat-message">Halo kak, ada yang bisa dibantu?</div>
|
||
</div>
|
||
<div class="chat-input">
|
||
<input type="text" id="chatInput" placeholder="Type here..." />
|
||
<button id="sendChatMessageButton">Send</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// --- Variabel & Fungsi untuk Floating Chat Window ---
|
||
const toggleChatButton = document.getElementById('toggleChatButton');
|
||
const closeChatButtonInHeader = document.getElementById('closeChatButtonInHeader');
|
||
const chatWindow = document.getElementById('chatWindow');
|
||
const chatMessages = document.getElementById('chatMessages');
|
||
const chatInput = document.getElementById('chatInput');
|
||
const sendChatMessageButton = document.getElementById('sendChatMessageButton');
|
||
|
||
// Ambil referensi ke tombol yang sudah ada di template yang ingin memicu chat
|
||
const headerChatButton = document.getElementById('headerChatButton');
|
||
const ctaChatButton = document.getElementById('ctaChatButton');
|
||
|
||
// --- PENTING: URL Webhook n8n Anda untuk CHAT BOT ---
|
||
const N8N_CHAT_WEBHOOK_URL = 'https://n8n.karyamanswasta.my.id/webhook/bakultali-web';
|
||
|
||
// Fungsi untuk mendapatkan atau membuat Chat ID
|
||
function getOrCreateChatId() {
|
||
let chatId = localStorage.getItem('kloowear_chat_id'); // Menggunakan kunci unik untuk Kloowear
|
||
if (!chatId) {
|
||
chatId = crypto.randomUUID(); // Membuat UUID unik
|
||
localStorage.setItem('kloowear_chat_id', chatId);
|
||
}
|
||
return chatId;
|
||
}
|
||
|
||
const currentChatId = getOrCreateChatId(); // Dapatkan Chat ID saat ini saat halaman dimuat
|
||
|
||
// Fungsi untuk menambahkan pesan ke jendela chat
|
||
function addMessageToChat(message, isUser = false) {
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.classList.add('chat-message');
|
||
if (isUser) {
|
||
messageDiv.classList.add('user-message');
|
||
}
|
||
messageDiv.textContent = message;
|
||
chatMessages.appendChild(messageDiv);
|
||
chatMessages.scrollTop = chatMessages.scrollHeight; // Scroll ke paling bawah
|
||
}
|
||
|
||
// Fungsi untuk membuka chat window
|
||
function openChat() {
|
||
chatWindow.classList.add('active');
|
||
toggleChatButton.classList.add('active'); // Tambah class 'active' ke tombol
|
||
toggleChatButton.querySelector('i').className = 'bi bi-x-lg'; // Ganti ikon menjadi 'x-lg'
|
||
chatInput.focus(); // Fokus ke input chat
|
||
}
|
||
|
||
// Fungsi untuk menutup chat window
|
||
function closeChat() {
|
||
chatWindow.classList.remove('active');
|
||
toggleChatButton.classList.remove('active'); // Hapus class 'active' dari tombol
|
||
toggleChatButton.querySelector('i').className = 'bi bi-chat-dots'; // Ganti ikon kembali menjadi 'chat-dots'
|
||
}
|
||
|
||
// Event listener untuk tombol toggle (membuka/menutup chat)
|
||
toggleChatButton.addEventListener('click', () => {
|
||
if (chatWindow.classList.contains('active')) {
|
||
closeChat();
|
||
} else {
|
||
openChat();
|
||
}
|
||
});
|
||
|
||
// Event listener untuk tombol X di header chat window
|
||
if (closeChatButtonInHeader) {
|
||
closeChatButtonInHeader.addEventListener('click', closeChat);
|
||
}
|
||
|
||
// Event listeners untuk tombol chat tambahan di header dan CTA
|
||
if (headerChatButton) {
|
||
headerChatButton.addEventListener('click', openChat);
|
||
}
|
||
|
||
if (ctaChatButton) {
|
||
ctaChatButton.addEventListener('click', openChat);
|
||
}
|
||
|
||
// Event listener untuk mengirim pesan chat
|
||
sendChatMessageButton.addEventListener('click', async () => {
|
||
const message = chatInput.value.trim();
|
||
if (message === '') return;
|
||
|
||
addMessageToChat(message, true); // Tambahkan pesan pengguna ke chat
|
||
chatInput.value = ''; // Kosongkan input
|
||
|
||
// Tampilkan indikator loading atau "sedang mengetik..."
|
||
addMessageToChat('Bakul Tali mengetik...', false);
|
||
|
||
try {
|
||
const response = await fetch(N8N_CHAT_WEBHOOK_URL, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
chatMessage: message,
|
||
chatId: currentChatId // KIRIM CHAT ID DENGAN SETIAP PESAN
|
||
})
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const errorData = await response.json().catch(() => ({
|
||
message: response.statusText,
|
||
}));
|
||
throw new Error(
|
||
`HTTP error! Status: ${response.status} - ${JSON.stringify(
|
||
errorData
|
||
)}`
|
||
);
|
||
}
|
||
|
||
const data = await response.json();
|
||
// Hapus pesan loading
|
||
if (
|
||
chatMessages.lastChild &&
|
||
chatMessages.lastChild.textContent === 'Bakul Tali mengetik...'
|
||
) {
|
||
chatMessages.lastChild.remove();
|
||
}
|
||
addMessageToChat(
|
||
data.reply || 'Maaf, ada masalah dalam respons.',
|
||
false
|
||
);
|
||
} catch (error) {
|
||
console.error('Terjadi kesalahan pada chat webhook:', error);
|
||
if (
|
||
chatMessages.lastChild &&
|
||
chatMessages.lastChild.textContent === 'Bakul Tali mengetik...'
|
||
) {
|
||
chatMessages.lastChild.remove();
|
||
}
|
||
addMessageToChat(
|
||
'Maaf, terjadi kesalahan saat mengirim pesan. Coba lagi nanti.',
|
||
false
|
||
);
|
||
}
|
||
});
|
||
|
||
// Mengirim pesan chat saat Enter ditekan
|
||
chatInput.addEventListener('keypress', (e) => {
|
||
if (e.key === 'Enter') {
|
||
sendChatMessageButton.click();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |