Created
August 7, 2025 04:38
-
-
Save mdestafadilah/8b4ba0c818fd46e7b76b3b2f99eb31b5 to your computer and use it in GitHub Desktop.
KANTIN DIGITAL
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kantin Digital SIMART</title> | |
| <meta name="description" content="Kantin Digital SIMART menyediakan berbagai makanan dan minuman dengan sistem digital yang modern dan praktis."> | |
| <meta name="keywords" content="kantin digital, SIMART, makanan, minuman, belanja online, sistem kantin"> | |
| <meta name="author" content="Sekolah Impian Simart"> | |
| <meta name="robots" content="index, follow"> | |
| <meta property="og:title" content="Kantin Digital SIMART"> | |
| <meta property="og:description" content="Belanja makanan dan minuman dengan sistem digital yang praktis dan modern."> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <meta name="twitter:title" content="Kantin Digital SIMART"> | |
| <meta name="twitter:description" content="Belanja makanan dan minuman dengan sistem digital yang praktis dan modern."> | |
| <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> | |
| <meta http-equiv="Pragma" content="no-cache"> | |
| <meta http-equiv="Expires" content="0"> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <link rel="stylesheet" href="css/mobile.css"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> | |
| <!-- source: https://simart.sekolahimpian.com/ --> | |
| <style> | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| 100% { | |
| transform: translateY(0px); | |
| } | |
| } | |
| body { | |
| background: linear-gradient(135deg, #f6f9fc 0%, #edf2f7 100%); | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| min-height: 100vh; | |
| } | |
| .navbar { | |
| background: rgba(255, 255, 255, 0.95) !important; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| .navbar-brand { | |
| background: linear-gradient(45deg, #2563eb, #3b82f6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| } | |
| .navbar-brand:hover { | |
| transform: scale(1.05); | |
| } | |
| .container { | |
| animation: fadeIn 0.8s ease-out; | |
| } | |
| .card { | |
| background: rgba(255, 255, 255, 0.9); | |
| border: none; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| .card-img-top { | |
| border-radius: 15px 15px 0 0; | |
| object-fit: cover; | |
| height: 130px; | |
| } | |
| .nav-tabs { | |
| border: none; | |
| background: rgba(255, 255, 255, 0.8); | |
| border-radius: 15px; | |
| padding: 5px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); | |
| } | |
| .nav-link { | |
| border: none !important; | |
| border-radius: 10px !important; | |
| color: #64748b !important; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| margin: 0 2px; | |
| } | |
| .nav-link.active { | |
| background: linear-gradient(45deg, #2563eb, #3b82f6) !important; | |
| color: white !important; | |
| box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); | |
| } | |
| .btn { | |
| border-radius: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(45deg, #2563eb, #3b82f6); | |
| border: none; | |
| box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); | |
| } | |
| .btn-danger { | |
| background: linear-gradient(45deg, #dc2626, #ef4444); | |
| border: none; | |
| box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3); | |
| } | |
| .fixed-bottom-menu { | |
| position: fixed; | |
| width: 100%; | |
| bottom: 0; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-top: 1px solid rgba(0, 0, 0, 0.05); | |
| box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1); | |
| padding: 15px 20px; | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| .total-text { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| background: linear-gradient(45deg, #059669, #10b981); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .modal-content { | |
| border-radius: 20px; | |
| border: none; | |
| box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); | |
| background: rgba(255, 255, 255, 0.95); | |
| } | |
| .modal-header { | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.05); | |
| background: linear-gradient(45deg, #f8fafc, #f1f5f9); | |
| border-radius: 20px 20px 0 0; | |
| } | |
| .form-control { | |
| border-radius: 10px; | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| padding: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .form-control:focus { | |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); | |
| border-color: #2563eb; | |
| } | |
| .cart-badge { | |
| background: linear-gradient(45deg, #dc2626, #ef4444) !important; | |
| border: 2px solid white; | |
| box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navbar --> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="#"> | |
| <i class="bi bi-cup-hot me-2"></i>Kantin Digital SIMART | |
| </a> | |
| <div class="d-flex align-items-center"> | |
| <a class="nav-link position-relative my-1 mx-3" href="#" data-bs-toggle="modal" data-bs-target="#detailModal"> | |
| <i class="bi bi-cart" style="font-size: 2rem;"></i> | |
| <span style="font-size: 10pt; width: 25px; height: 25px; margin-top: 10px" class="text-center position-absolute start-100 translate-middle cart-badge bg-danger p-1 fw-bold text-white rounded-circle" id="cart-badge">0</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Tabs Menu --> | |
| <div class="container p-3 shadow-lg rounded bg-white" style="margin-top: 60px; margin-bottom: 40px"> | |
| <ul class="nav nav-tabs d-flex justify-content-between border" id="menuTabs"> | |
| <li class="nav-item flex-fill text-center"> | |
| <button class="nav-link active w-100" | |
| data-bs-toggle="tab" | |
| data-bs-target="#jumat"> | |
| Jumat </button> | |
| </li> | |
| <li class="nav-item flex-fill text-center"> | |
| <button class="nav-link w-100" | |
| data-bs-toggle="tab" | |
| data-bs-target="#sabtu"> | |
| Sabtu </button> | |
| </li> | |
| <li class="nav-item flex-fill text-center"> | |
| <button class="nav-link w-100" | |
| data-bs-toggle="tab" | |
| data-bs-target="#ahad"> | |
| Ahad </button> | |
| </li> | |
| <li class="nav-item flex-fill text-center"> | |
| <button class="nav-link w-100" | |
| data-bs-toggle="tab" | |
| data-bs-target="#senin"> | |
| Senin </button> | |
| </li> | |
| <li class="nav-item flex-fill text-center"> | |
| <button class="nav-link w-100" | |
| data-bs-toggle="tab" | |
| data-bs-target="#selasa"> | |
| Selasa </button> | |
| </li> | |
| </ul> | |
| <!-- Tab Content --> | |
| <div class="tab-content mt-3"> | |
| <div class="tab-pane fade show active" id="jumat"> | |
| <div class="row"> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Abon Ayam"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Abon Ayam</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">15.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="jumat_1" | |
| data-product-name="Abon Ayam" | |
| data-product-price="15500" | |
| data-product-day="Jumat">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-jumat_1" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="jumat_1" | |
| data-product-name="Abon Ayam" | |
| data-product-price="15500" | |
| data-product-day="Jumat">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-pane fade " id="sabtu"> | |
| <div class="row"> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Ayam Geprek Special"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Ayam Geprek Special</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">20.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="sabtu_1" | |
| data-product-name="Ayam Geprek Special" | |
| data-product-price="20000" | |
| data-product-day="Sabtu">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-sabtu_1" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="sabtu_1" | |
| data-product-name="Ayam Geprek Special" | |
| data-product-price="20000" | |
| data-product-day="Sabtu">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Ayam Geprek Biasa"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Ayam Geprek Biasa</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">15.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="sabtu_2" | |
| data-product-name="Ayam Geprek Biasa" | |
| data-product-price="15000" | |
| data-product-day="Sabtu">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-sabtu_2" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="sabtu_2" | |
| data-product-name="Ayam Geprek Biasa" | |
| data-product-price="15000" | |
| data-product-day="Sabtu">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Aneka Varian Puding 1 Loyang"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Aneka Varian Puding 1 Loyang</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">85.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="sabtu_3" | |
| data-product-name="Aneka Varian Puding 1 Loyang" | |
| data-product-price="85000" | |
| data-product-day="Sabtu">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-sabtu_3" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="sabtu_3" | |
| data-product-name="Aneka Varian Puding 1 Loyang" | |
| data-product-price="85000" | |
| data-product-day="Sabtu">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Puding 150ml"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Puding 150ml</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">6.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="sabtu_4" | |
| data-product-name="Puding 150ml" | |
| data-product-price="6000" | |
| data-product-day="Sabtu">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-sabtu_4" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="sabtu_4" | |
| data-product-name="Puding 150ml" | |
| data-product-price="6000" | |
| data-product-day="Sabtu">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Ayam Katsu Geprek Special"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Ayam Katsu Geprek Special</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">20.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="sabtu_5" | |
| data-product-name="Ayam Katsu Geprek Special" | |
| data-product-price="20000" | |
| data-product-day="Sabtu">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-sabtu_5" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="sabtu_5" | |
| data-product-name="Ayam Katsu Geprek Special" | |
| data-product-price="20000" | |
| data-product-day="Sabtu">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Abon Ayam"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Abon Ayam</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">15.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="sabtu_6" | |
| data-product-name="Abon Ayam" | |
| data-product-price="15500" | |
| data-product-day="Sabtu">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-sabtu_6" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="sabtu_6" | |
| data-product-name="Abon Ayam" | |
| data-product-price="15500" | |
| data-product-day="Sabtu">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-pane fade " id="ahad"> | |
| <div class="row"> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Nasi Liwet"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Nasi Liwet</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">20.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="ahad_1" | |
| data-product-name="Nasi Liwet" | |
| data-product-price="20000" | |
| data-product-day="Ahad">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-ahad_1" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="ahad_1" | |
| data-product-name="Nasi Liwet" | |
| data-product-price="20000" | |
| data-product-day="Ahad">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Gohoyong Special"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Gohoyong Special</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">23.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="ahad_2" | |
| data-product-name="Gohoyong Special" | |
| data-product-price="23000" | |
| data-product-day="Ahad">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-ahad_2" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="ahad_2" | |
| data-product-name="Gohoyong Special" | |
| data-product-price="23000" | |
| data-product-day="Ahad">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://simart.sekolahimpian.com/img/Copilot_20250729_133047.png" class="card-img-top" alt="Pisang Crispy"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Pisang Crispy</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">15.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="ahad_3" | |
| data-product-name="Pisang Crispy" | |
| data-product-price="15000" | |
| data-product-day="Ahad">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-ahad_3" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="ahad_3" | |
| data-product-name="Pisang Crispy" | |
| data-product-price="15000" | |
| data-product-day="Ahad">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Dimsum Ayam"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Dimsum Ayam</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">11.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="ahad_4" | |
| data-product-name="Dimsum Ayam" | |
| data-product-price="11500" | |
| data-product-day="Ahad">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-ahad_4" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="ahad_4" | |
| data-product-name="Dimsum Ayam" | |
| data-product-price="11500" | |
| data-product-day="Ahad">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Gohoyong Biasa"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Gohoyong Biasa</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">11.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="ahad_5" | |
| data-product-name="Gohoyong Biasa" | |
| data-product-price="11500" | |
| data-product-day="Ahad">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-ahad_5" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="ahad_5" | |
| data-product-name="Gohoyong Biasa" | |
| data-product-price="11500" | |
| data-product-day="Ahad">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Abon Ayam"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Abon Ayam</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">15.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="ahad_6" | |
| data-product-name="Abon Ayam" | |
| data-product-price="15500" | |
| data-product-day="Ahad">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-ahad_6" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="ahad_6" | |
| data-product-name="Abon Ayam" | |
| data-product-price="15500" | |
| data-product-day="Ahad">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-pane fade " id="senin"> | |
| <div class="row"> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Nasi Kebuli"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Nasi Kebuli</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">22.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="senin_1" | |
| data-product-name="Nasi Kebuli" | |
| data-product-price="22500" | |
| data-product-day="Senin">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-senin_1" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="senin_1" | |
| data-product-name="Nasi Kebuli" | |
| data-product-price="22500" | |
| data-product-day="Senin">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Ayam Bakar Pedes Manis"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Ayam Bakar Pedes Manis</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">17.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="senin_2" | |
| data-product-name="Ayam Bakar Pedes Manis" | |
| data-product-price="17500" | |
| data-product-day="Senin">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-senin_2" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="senin_2" | |
| data-product-name="Ayam Bakar Pedes Manis" | |
| data-product-price="17500" | |
| data-product-day="Senin">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Spaghetti Bolognese"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Spaghetti Bolognese</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">11.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="senin_3" | |
| data-product-name="Spaghetti Bolognese" | |
| data-product-price="11500" | |
| data-product-day="Senin">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-senin_3" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="senin_3" | |
| data-product-name="Spaghetti Bolognese" | |
| data-product-price="11500" | |
| data-product-day="Senin">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Spaghetti Carbonara"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Spaghetti Carbonara</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">11.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="senin_4" | |
| data-product-name="Spaghetti Carbonara" | |
| data-product-price="11500" | |
| data-product-day="Senin">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-senin_4" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="senin_4" | |
| data-product-name="Spaghetti Carbonara" | |
| data-product-price="11500" | |
| data-product-day="Senin">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Ayam Bakar Manis Gurih"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Ayam Bakar Manis Gurih</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">17.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="senin_5" | |
| data-product-name="Ayam Bakar Manis Gurih" | |
| data-product-price="17500" | |
| data-product-day="Senin">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-senin_5" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="senin_5" | |
| data-product-name="Ayam Bakar Manis Gurih" | |
| data-product-price="17500" | |
| data-product-day="Senin">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Abon Ayam"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Abon Ayam</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">15.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="senin_6" | |
| data-product-name="Abon Ayam" | |
| data-product-price="15500" | |
| data-product-day="Senin">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-senin_6" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="senin_6" | |
| data-product-name="Abon Ayam" | |
| data-product-price="15500" | |
| data-product-day="Senin">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-pane fade " id="selasa"> | |
| <div class="row"> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Abon Ayam"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Abon Ayam</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">15.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="selasa_1" | |
| data-product-name="Abon Ayam" | |
| data-product-price="15500" | |
| data-product-day="Selasa">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-selasa_1" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="selasa_1" | |
| data-product-name="Abon Ayam" | |
| data-product-price="15500" | |
| data-product-day="Selasa">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Dimsum Happy 3 pcs"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Dimsum Happy 3 pcs</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">23.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="selasa_2" | |
| data-product-name="Dimsum Happy 3 pcs" | |
| data-product-price="23000" | |
| data-product-day="Selasa">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-selasa_2" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="selasa_2" | |
| data-product-name="Dimsum Happy 3 pcs" | |
| data-product-price="23000" | |
| data-product-day="Selasa">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Dimsum Mentai 3 pcs"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Dimsum Mentai 3 pcs</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">21.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="selasa_3" | |
| data-product-name="Dimsum Mentai 3 pcs" | |
| data-product-price="21000" | |
| data-product-day="Selasa">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-selasa_3" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="selasa_3" | |
| data-product-name="Dimsum Mentai 3 pcs" | |
| data-product-price="21000" | |
| data-product-day="Selasa">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Dimsum Mentai 6 pcs"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Dimsum Mentai 6 pcs</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">36.500</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="selasa_4" | |
| data-product-name="Dimsum Mentai 6 pcs" | |
| data-product-price="36500" | |
| data-product-day="Selasa">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-selasa_4" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="selasa_4" | |
| data-product-name="Dimsum Mentai 6 pcs" | |
| data-product-price="36500" | |
| data-product-day="Selasa">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Sate Ayam + Lontong"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Sate Ayam + Lontong</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">20.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="selasa_5" | |
| data-product-name="Sate Ayam + Lontong" | |
| data-product-price="20000" | |
| data-product-day="Selasa">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-selasa_5" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="selasa_5" | |
| data-product-name="Sate Ayam + Lontong" | |
| data-product-price="20000" | |
| data-product-day="Selasa">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Dimsum Happy 6 pcs"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Dimsum Happy 6 pcs</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">38.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="selasa_6" | |
| data-product-name="Dimsum Happy 6 pcs" | |
| data-product-price="38000" | |
| data-product-day="Selasa">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-selasa_6" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="selasa_6" | |
| data-product-name="Dimsum Happy 6 pcs" | |
| data-product-price="38000" | |
| data-product-day="Selasa">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 col-6 my-2"> | |
| <div class="card position-relative" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> | |
| <div class="position-relative"> | |
| <!-- Overlay hanya untuk gambar --> | |
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25"></div> | |
| <!-- Badge --> | |
| <span class="badge bg-success position-absolute top-0 end-0 m-2 shadow-sm">Promo</span> | |
| <img src="https://img.freepik.com/premium-vector/thai-foods-vector-art-foods-vector-illustration_787567-774.jpg" class="card-img-top" alt="Dimsum Cheese Lovers"> | |
| </div> | |
| <div class="card-body"> | |
| <h6 class="card-title">Dimsum Cheese Lovers</h6> | |
| <p class="card-text fw-bold text-danger">Rp <span class="harga-produk">37.000</span></p> | |
| <div class="d-flex align-items-center"> | |
| <!-- Tombol kurang dengan unique ID dan data attributes --> | |
| <button class="btn btn-danger btn-sm subtract-from-cart me-2" | |
| data-product-id="selasa_7" | |
| data-product-name="Dimsum Cheese Lovers" | |
| data-product-price="37000" | |
| data-product-day="Selasa">-</button> | |
| <!-- Input quantity dengan unique ID --> | |
| <input disabled type="number" | |
| class="form-control me-2 qty-input" | |
| id="qty-selasa_7" | |
| value="0" min="0" | |
| style="width: 60px; text-align:center"> | |
| <!-- Tombol tambah dengan unique ID dan data attributes --> | |
| <button class="btn btn-primary btn-sm add-to-cart" | |
| data-product-id="selasa_7" | |
| data-product-name="Dimsum Cheese Lovers" | |
| data-product-price="37000" | |
| data-product-day="Selasa">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fixed Bottom Menu --> | |
| <div class="fixed-bottom-menu d-flex justify-content-between"> | |
| <span class="total-text">Total: <span id="total-nominal" class="text-success">Rp 0</span></span> | |
| </div> | |
| <!-- Modal Detail Pemesanan --> | |
| <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="detailModalLabel">Detail Pemesanan</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <table class="table border p-1 shadow-sm rounded"> | |
| <thead> | |
| <tr> | |
| <th>Produk</th> | |
| <th>Qty</th> | |
| <th>Subtotal</th> | |
| <th>Aksi</th> | |
| </tr> | |
| </thead> | |
| <tbody id="detail-body"> | |
| <tr> | |
| <td colspan="4" class="text-center">Belum ada produk yang dipilih.</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <form id="customerForm" class="mb-4"> | |
| <div class="mb-3"> | |
| <label for="namaWali" class="form-label">Nama Wali *</label> | |
| <input type="text" class="form-control" id="namaWali" placeholder="Nama Wali" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="noWhatsapp" class="form-label">No. WhatsApp *</label> | |
| <input type="number" class="form-control" id="noWhatsapp" | |
| pattern="[0-9]+" placeholder="Masukan no. whatsapp" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="namaSantri" class="form-label">Nama Santri *</label> | |
| <input type="text" class="form-control" id="namaSantri" placeholder="Nama Santri" required> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button> | |
| <button type="button" class="btn btn-primary" id="processOrderBtn">Proses Pesanan</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Include JavaScript Files --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- Fixed validasi.js (Inline to avoid loading issues) --> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function() { | |
| let totalHarga = 0; | |
| let cart = {}; | |
| function updateTotal() { | |
| totalHarga = Object.values(cart).reduce((total, item) => total + item.subtotal, 0); | |
| document.getElementById("total-nominal").textContent = "Rp " + totalHarga.toLocaleString("id-ID"); | |
| updateCartBadge(); | |
| } | |
| function updateCartBadge() { | |
| let totalItems = Object.values(cart).reduce((total, item) => total + item.qty, 0); | |
| let badge = document.getElementById("cart-badge"); | |
| let checkoutBtn = document.getElementById("checkoutBtn"); | |
| if (totalItems > 0) { | |
| badge.textContent = totalItems; | |
| badge.classList.remove("d-none"); | |
| if (checkoutBtn) { | |
| checkoutBtn.classList.remove("d-none"); | |
| } | |
| } else { | |
| badge.classList.add("d-none"); | |
| if (checkoutBtn) { | |
| checkoutBtn.classList.add("d-none"); | |
| } | |
| } | |
| } | |
| function updateDetailModal() { | |
| let detailBody = document.getElementById("detail-body"); | |
| if (Object.keys(cart).length > 0) { | |
| detailBody.innerHTML = Object.entries(cart).map(([key, item]) => ` | |
| <tr> | |
| <td>${item.produk} <small class="text-muted">(${item.hari})</small></td> | |
| <td>${item.qty}</td> | |
| <td>Rp ${item.subtotal.toLocaleString("id-ID")}</td> | |
| <td><button class="btn btn-danger btn-sm remove-item" data-product-key="${key}">Hapus</button></td> | |
| </tr> | |
| `).join(""); | |
| } else { | |
| detailBody.innerHTML = '<tr><td colspan="4" class="text-center">Belum ada produk yang dipilih.</td></tr>'; | |
| } | |
| attachRemoveItemListeners(); | |
| } | |
| function attachRemoveItemListeners() { | |
| document.querySelectorAll(".remove-item").forEach(btn => { | |
| btn.addEventListener("click", function() { | |
| let productKey = this.getAttribute("data-product-key"); | |
| let qtyInput = document.getElementById(`qty-${productKey}`); | |
| if (qtyInput) { | |
| qtyInput.value = 0; | |
| } | |
| delete cart[productKey]; | |
| updateDetailModal(); | |
| updateTotal(); | |
| }); | |
| }); | |
| } | |
| document.addEventListener("click", function(e) { | |
| if (e.target.classList.contains("add-to-cart")) { | |
| let productId = e.target.getAttribute("data-product-id"); | |
| let productName = e.target.getAttribute("data-product-name"); | |
| let productPrice = parseInt(e.target.getAttribute("data-product-price")); | |
| let productDay = e.target.getAttribute("data-product-day"); | |
| if (!productId || !productName || !productPrice || !productDay) { | |
| console.error("Missing product data attributes"); | |
| return; | |
| } | |
| let qtyInput = document.getElementById(`qty-${productId}`); | |
| if (!qtyInput) { | |
| console.error(`Quantity input not found for product: ${productId}`); | |
| return; | |
| } | |
| let currentQty = parseInt(qtyInput.value) + 1; | |
| qtyInput.value = currentQty; | |
| if (cart[productId]) { | |
| cart[productId].qty = currentQty; | |
| cart[productId].subtotal = productPrice * currentQty; | |
| } else { | |
| cart[productId] = { | |
| produk: productName, | |
| qty: currentQty, | |
| harga: productPrice, | |
| subtotal: productPrice * currentQty, | |
| hari: productDay | |
| }; | |
| } | |
| updateTotal(); | |
| return; | |
| } | |
| if (e.target.classList.contains("subtract-from-cart")) { | |
| let productId = e.target.getAttribute("data-product-id"); | |
| let productPrice = parseInt(e.target.getAttribute("data-product-price")); | |
| // Validasi data attributes | |
| if (!productId || !productPrice) { | |
| console.error("Missing product data attributes for subtract"); | |
| return; | |
| } | |
| let qtyInput = document.getElementById(`qty-${productId}`); | |
| if (!qtyInput) { | |
| console.error(`Quantity input not found for product: ${productId}`); | |
| return; | |
| } | |
| let currentQty = parseInt(qtyInput.value); | |
| if (currentQty > 0) { | |
| currentQty--; | |
| qtyInput.value = currentQty; | |
| if (currentQty === 0) { | |
| delete cart[productId]; | |
| } else if (cart[productId]) { | |
| cart[productId].qty = currentQty; | |
| cart[productId].subtotal = productPrice * currentQty; | |
| } | |
| updateTotal(); | |
| } | |
| return; | |
| } | |
| }); | |
| // Event listener untuk modal cart | |
| let cartModalTrigger = document.querySelector('[data-bs-target="#detailModal"]'); | |
| if (cartModalTrigger) { | |
| cartModalTrigger.addEventListener("click", function() { | |
| updateDetailModal(); | |
| }); | |
| } | |
| // Event listener untuk checkout button | |
| let checkoutBtn = document.getElementById("checkoutBtn"); | |
| if (checkoutBtn) { | |
| checkoutBtn.addEventListener("click", function() { | |
| if (Object.keys(cart).length === 0) { | |
| Swal.fire({ | |
| title: "Keranjang Kosong!", | |
| text: "Silahkan pilih produk terlebih dahulu.", | |
| icon: "warning", | |
| confirmButtonText: "OK" | |
| }); | |
| return; | |
| } | |
| // Show modal | |
| let detailModal = document.getElementById("detailModal"); | |
| if (detailModal) { | |
| let modal = new bootstrap.Modal(detailModal); | |
| modal.show(); | |
| } | |
| }); | |
| } | |
| // Customer form localStorage handling | |
| let customerForm = document.getElementById("customerForm"); | |
| if (customerForm) { | |
| // Load data from localStorage | |
| let namaWaliInput = document.getElementById("namaWali"); | |
| let noWhatsappInput = document.getElementById("noWhatsapp"); | |
| let namaSantriInput = document.getElementById("namaSantri"); | |
| if (namaWaliInput && localStorage.getItem("namaWali")) { | |
| namaWaliInput.value = localStorage.getItem("namaWali"); | |
| } | |
| if (noWhatsappInput && localStorage.getItem("noWhatsapp")) { | |
| noWhatsappInput.value = localStorage.getItem("noWhatsapp"); | |
| } | |
| if (namaSantriInput && localStorage.getItem("namaSantri")) { | |
| namaSantriInput.value = localStorage.getItem("namaSantri"); | |
| } | |
| // Save to localStorage on input | |
| customerForm.addEventListener("input", function() { | |
| if (namaWaliInput) { | |
| localStorage.setItem("namaWali", namaWaliInput.value); | |
| } | |
| if (noWhatsappInput) { | |
| localStorage.setItem("noWhatsapp", noWhatsappInput.value); | |
| } | |
| if (namaSantriInput) { | |
| localStorage.setItem("namaSantri", namaSantriInput.value); | |
| } | |
| }); | |
| } | |
| // Event listener untuk proses pesanan | |
| let processOrderBtn = document.getElementById("processOrderBtn"); | |
| if (processOrderBtn) { | |
| processOrderBtn.addEventListener("click", function() { | |
| // Prevent double submission | |
| if (processOrderBtn.disabled) { | |
| return; | |
| } | |
| let namaWaliInput = document.getElementById("namaWali"); | |
| let noWhatsappInput = document.getElementById("noWhatsapp"); | |
| let namaSantriInput = document.getElementById("namaSantri"); | |
| if (!namaWaliInput || !noWhatsappInput || !namaSantriInput) { | |
| Swal.fire({ | |
| title: "Error!", | |
| text: "Form input tidak ditemukan.", | |
| icon: "error", | |
| confirmButtonText: "OK" | |
| }); | |
| return; | |
| } | |
| const namaWali = namaWaliInput.value.trim(); | |
| const noWhatsapp = noWhatsappInput.value.trim(); | |
| const namaSantri = namaSantriInput.value.trim(); | |
| // Validasi input | |
| if (!namaWali || !noWhatsapp || !namaSantri) { | |
| Swal.fire({ | |
| title: "Data Tidak Lengkap!", | |
| text: "Mohon lengkapi semua field yang wajib diisi!", | |
| icon: "warning", | |
| confirmButtonText: "OK" | |
| }); | |
| return; | |
| } | |
| if (!/^[0-9]+$/.test(noWhatsapp)) { | |
| Swal.fire({ | |
| title: "Format Salah!", | |
| text: "Nomor WhatsApp hanya boleh berisi angka!", | |
| icon: "error", | |
| confirmButtonText: "OK" | |
| }); | |
| return; | |
| } | |
| if (Object.keys(cart).length === 0) { | |
| Swal.fire({ | |
| title: "Keranjang Kosong!", | |
| text: "Silahkan pilih produk terlebih dahulu.", | |
| icon: "warning", | |
| confirmButtonText: "OK" | |
| }); | |
| return; | |
| } | |
| // Disable button dan show loading | |
| processOrderBtn.disabled = true; | |
| processOrderBtn.textContent = "Diproses..."; | |
| // Show loading | |
| Swal.fire({ | |
| title: 'Memproses Pesanan...', | |
| text: 'Mohon tunggu sebentar', | |
| allowOutsideClick: false, | |
| showConfirmButton: false, | |
| didOpen: () => { | |
| Swal.showLoading(); | |
| } | |
| }); | |
| // Convert cart object ke array untuk dikirim ke server | |
| const cartArray = Object.values(cart); | |
| const orderData = { | |
| customer: { | |
| nama_wali: namaWali, | |
| no_whatsapp: noWhatsapp, | |
| nama_santri: namaSantri | |
| }, | |
| items: cartArray, | |
| total: totalHarga, | |
| order_date: new Date().toISOString() | |
| }; | |
| console.log("Sending order data:", orderData); // Debug log | |
| fetch("bayar.php", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| body: JSON.stringify(orderData) | |
| }) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => { | |
| console.log("Server response:", data); | |
| if (data.status === "success") { | |
| Swal.fire({ | |
| title: "Silahkan Melakukan Pembayaran", | |
| text: "Anda akan diarahkan ke halaman pembayaran...", | |
| icon: "success", | |
| allowOutsideClick: false, | |
| showConfirmButton: false, | |
| didOpen: () => { | |
| Swal.showLoading(); | |
| } | |
| }); | |
| setTimeout(() => { | |
| const reff = data.reff; | |
| cart = {}; | |
| totalHarga = 0; | |
| updateTotal(); | |
| updateDetailModal(); | |
| document.querySelectorAll(".qty-input").forEach(input => { | |
| input.value = 0; | |
| }); | |
| if (customerForm) { | |
| customerForm.reset(); | |
| } | |
| let detailModal = document.getElementById("detailModal"); | |
| if (detailModal) { | |
| let modalInstance = bootstrap.Modal.getInstance(detailModal); | |
| if (modalInstance) { | |
| modalInstance.hide(); | |
| } | |
| } | |
| window.location.href = `transfer.php?reff=${reff}`; | |
| }, 1500); | |
| } else { | |
| throw new Error(data.message || "Terjadi kesalahan server"); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error("Error:", error); | |
| Swal.fire({ | |
| title: "Gagal!", | |
| text: "Terjadi kesalahan: " + error.message, | |
| icon: "error", | |
| confirmButtonText: "OK" | |
| }); | |
| }) | |
| .finally(() => { | |
| processOrderBtn.disabled = false; | |
| processOrderBtn.textContent = "Proses Pesanan"; | |
| }); | |
| }); | |
| } | |
| updateCartBadge(); | |
| console.log("validasi.js loaded successfully"); | |
| }); | |
| </script> | |
| <script> | |
| (function() { | |
| history.pushState(null, null, location.href); | |
| window.onpopstate = function() { | |
| history.pushState(null, null, location.href); | |
| location.reload(); // Reload halaman jika user menekan tombol back | |
| }; | |
| })(); | |
| </script> | |
| <!-- | |
| <script> | |
| // Tampilkan modal saat halaman dimuat | |
| window.addEventListener('load', function () { | |
| var myModal = new bootstrap.Modal(document.getElementById('maintenanceModal'), { | |
| keyboard: false, | |
| backdrop: 'static' | |
| }); | |
| myModal.show(); | |
| }); | |
| </script> | |
| --> | |
| <script> | |
| document.addEventListener("contextmenu", function (e) { | |
| e.preventDefault(); | |
| alert("Klik kanan dinonaktifkan."); | |
| }); | |
| document.addEventListener("keydown", function (e) { | |
| if ( | |
| e.key === "F12" || | |
| (e.ctrlKey && e.shiftKey && (e.key === "I" || e.key === "J" || e.key === "C")) || | |
| (e.ctrlKey && e.key === "U") | |
| ) { | |
| e.preventDefault(); | |
| alert("Akses shortcut dibatasi."); | |
| } | |
| }); | |
| (function () { | |
| let devtoolsOpen = false; | |
| function detectDevTools() { | |
| const start = performance.now(); | |
| debugger; // menyebabkan delay jika DevTools aktif | |
| const time = performance.now() - start; | |
| if (time > 100) { | |
| return true; | |
| } | |
| const threshold = 160; | |
| const widthThreshold = window.outerWidth - window.innerWidth > threshold; | |
| const heightThreshold = window.outerHeight - window.innerHeight > threshold; | |
| return widthThreshold || heightThreshold; | |
| } | |
| setInterval(function () { | |
| if (detectDevTools()) { | |
| } else { | |
| devtoolsOpen = false; | |
| } | |
| }, 1000); | |
| })(); | |
| </script> | |
| <noscript> | |
| <style> | |
| body { | |
| display: none; | |
| } | |
| </style> | |
| <div style="text-align:center; padding:50px;"> | |
| <h1>JavaScript Nonaktif</h1> | |
| <p>Website ini membutuhkan JavaScript. Silakan aktifkan JavaScript di browser Anda.</p> | |
| </div> | |
| </noscript> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment