<?php 
include("koneksi.php");
$kode = $_GET['kode'];
if (strpos($kode, '\'') !== false) { //proteksi dari mysql injection
  die('forbidden');
}
$sql = "select isi2,title,keyword,descr,judul from tutorial where kode='$kode'";
$query = mysqli_query($koneksi,$sql);
$baris = mysqli_fetch_row($query);
$isi2 = $baris[0];
$title = $baris[1];
$keyword = $baris[2];
$desc = $baris[3];
$judul = $baris[4];
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title><?php echo($title); ?></title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="<?php echo($keyword); ?>" name="keywords">
  <meta content="<?php echo($desc); ?>" name="description">

  <!-- Favicons -->
  <link href="img/favicon.png" rel="icon">
  <link href="img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,500,600,700,700i|Montserrat:300,400,500,600,700" rel="stylesheet">

  <!-- Bootstrap CSS File -->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <link href="chat/style3.css" rel="stylesheet" type="text/css" />

  <!-- Libraries CSS Files -->
  <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="lib/animate/animate.min.css" rel="stylesheet">
  <link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
  <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

  <!-- Main Stylesheet File -->
  <link href="css/style.css" rel="stylesheet">

  <!-- =======================================================
    Theme Name: Rapid
    Theme URL: https://bootstrapmade.com/rapid-multipurpose-bootstrap-business-template/
    Author: BootstrapMade.com
    License: https://bootstrapmade.com/license/
  ======================================================= -->
</head>

<body>
  
  <!--==========================
  Header
  ============================-->
  <header id="header" class="header-scrolled">

    <div id="topbar">
      <div class="container">
        <div class="social-links">
          <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
          <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
          <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
          <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
        </div>
      </div>
    </div>

    <div class="container">

      <div class="logo float-left">
        <!-- Uncomment below if you prefer to use an image logo -->
        <h1 class="text-light"><a href="#intro" class="scrollto"><span>SIDRETAIL.ID</span></a></h1>
        <!-- <a href="#header" class="scrollto"><img src="img/logo.png" alt="" class="img-fluid"></a> -->
      </div>

      <nav class="main-nav float-right d-none d-lg-block">
        <ul>
          <li class="active"><a href="index.html">Beranda</a></li>
          <li class="drop-down"><a href="produk.html">Produk</a>
            <ul>
              <li><a href="sidretail-online.html">SIDRETAIL ONLINE</a></li>
              <li><a href="sidretail-platinum.html">SIDRETAIL PLATINUM</a></li>
            </ul>
          <li class="drop-down"><a href="cara-pemesanan.html">Order</a>
            <ul>
              <li><a href="order-sidretail-online.html">ORDER SIDRETAIL ONLINE</a></li>
              <li><a href="order-sidretail-platinum.html">ORDER SIDRETAIL PLATINUM</a></li>
            </ul>
          <li><a href="blog.php">Blog</a></li>
          <li class="drop-down"><a href="Layanan.html">Layanan</a>
            <ul>
              <li><a href="tata-cara-update.html">Tata Cara Update</a></li>
              <li><a href="tata-cara-komplain.html">Tata Cara Komplain</a></li>
              <li><a href="penambahan-fitur.html">Penambahan Fitur</a></li>
              <li><a href="kontak.html">Kontak</a></li>
            </ul>
          </li>
        </ul>
      </nav><!-- .main-nav -->
      
    </div>
  </header><!-- #header -->  

  <main id="main">


    <!--==========================
      Features Section
    ============================-->
    <section id="features">
      <div class="container">

        <br>

        <header class="section-header" >
          <h1 style="text-align: center;"> <strong><?php echo($judul); ?></strong></h1>
        </header> 
        
        <?php echo($isi2); ?>

      </div>
    </section>

  <!--==========================
    Footer
  ============================-->
  <footer id="footer" class="section-bg">
    <div class="footer-top">
      <div class="container">

        <div class="row">

          <div class="col-lg-6">

            <div class="row">

                <div class="col-sm-6">

                  <div class="footer-info">
                    <h3>SIDRETAIL</h3> 
                    <p>Merupakan aplikasi kasir untuk berbagai macam jenis usaha yang bisa diakses secara online,
                      mulai penjualan dan pembelian barang hingga berbagai macam laporan penjualan.
                      Cocok digunakan untuk mengelola orderan dari pelanggan langsung maupun dari reseller</p>
                  </div>

                </div>

                <div class="col-sm-6">
                  <div class="footer-links">
                    <h4>Tautan yang sering dibuka</h4>
                    <ul>
                      <li><a href="sidretail-online.html">SIDRETAIL ONLINE</a></li>
                      <li><a href="sidretail-platinum.html">SIDRETAIL PLATINUM</a></li>
                      <li><a href="harga.html">Harga</a></li>
                      <li><a href="cara-pemesnan.html">Cara Order</a></li>
                      <li><a href="penambahan-fitur.html">Penambahan Fitur</a></li>
                    </ul>
                  </div>

                  <div class="footer-links">
                    <h4>Kontak Kami</h4>
                    <p>
                      Software-id.com <br>
                      Griya Taman Sari II, Piyungan, <br> Bantul, D.I Yogyakarta <br>
                      <strong>Phone:</strong> 082137125585, 081234540765<br>
                      <strong>Email:</strong> admin@software-id.com<br>
                    </p>
                  </div>

                  <div class="social-links">
                    <a href="https://twitter.com/sidretail_id" class="twitter"><i class="fa fa-twitter"></i></a>
                    <a href="https://www.instagram.com/sidretail.id/" class="instagram"><i class="fa fa-instagram"></i></a>
                    <a href="https://web.facebook.com/profile.php?id=100071017095615" class="facebook"><i class="fa fa-facebook"></i></a>
                   </div>

                </div>

            </div>

          </div>

          <div class="col-lg-6">

            <div class="form">
              
              <h4>Kirim Pesan via e-Mail</h4>
              <p>Silakan kirim pertanyaan pada Kami untuk keterangan informasi lebih lanjut</p>
              <form action="" method="post" role="form" class="contactForm">
                <div class="form-group">
                  <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                  <div class="validation"></div>
                </div>
                <div class="form-group">
                  <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                  <div class="validation"></div>
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                  <div class="validation"></div>
                </div>
                <div class="form-group">
                  <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                  <div class="validation"></div>
                </div>

                <div id="sendmessage">Your message has been sent. Thank you!</div>
                <div id="errormessage"></div>

                <div class="text-center"><button type="submit" title="Send Message">Send Message</button></div>
              </form>
            </div>

          </div>

          

        </div>

      </div>
    </div>

    <div class="container">
      <div class="copyright">
        &copy; Copyright <strong>software-id.com</strong>. All Rights Reserved
      </div>
      <div class="credits">
        <!--
          All the links in the footer should remain intact.
          You can delete the links only if you purchased the pro version.
          Licensing information: https://bootstrapmade.com/license/
          Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Rapid
        -->
        Designed by <a href="http://www.software-id.com/">software-id.com</a>
      </div>
    </div>
  </footer><!-- #footer -->

  <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
  <!-- Uncomment below i you want to use a preloader -->
  <!-- <div id="preloader"></div> -->

  <!-- JavaScript Libraries -->
  <script src="lib/jquery/jquery.min.js"></script>
  <script src="lib/jquery/jquery-migrate.min.js"></script>
  <script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="lib/easing/easing.min.js"></script>
  <script src="lib/mobile-nav/mobile-nav.js"></script>
  <script src="lib/wow/wow.min.js"></script>
  <script src="lib/waypoints/waypoints.min.js"></script>
  <script src="lib/counterup/counterup.min.js"></script>
  <script src="lib/owlcarousel/owl.carousel.min.js"></script>
  <script src="lib/isotope/isotope.pkgd.min.js"></script>
  <script src="lib/lightbox/js/lightbox.min.js"></script>
  <!-- Contact Form JavaScript File -->
  <script src="contactform/contactform.js"></script>

  <!-- Template Main Javascript File -->
  <script src="js/main2.js"></script>


<!-- Chat customer service -->
<button id="chat-toggle-btn" title="Chat Kami" style="position:fixed;bottom:20px;right:20px;z-index:9999;background:#376fd6;color:white;border:none;border-radius:50%;width:50px;height:50px;font-size:20px;cursor:pointer;">
<i class="fa fa-weixin"></i>
</button>
<div class="chat-container hide">
  <div class="chat-header">
      <span>Chat Kami / Fast Respon</span>
      <button id="chat-toggle">✕</button>
  </div>
  <div class="chat-messages"></div>
  <div id="typing-indicator">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
  </div>
  <div class="chat-input-bar">
  <div class="input-wrapper" style="position:relative; flex:1;">
      <textarea id="chat_msg" class="chat-input" placeholder="Ketik pesan..."></textarea>
      <label for="chatImage" id="imgBtn">
        <i class="fa fa-image"></i>
      </label>
      <input type="file" id="chatImage" accept="image/*" style="display:none;">
    </div>
    <button id="sendBtn"><i class="fa fa-paper-plane"></i></button>
  </div>
</div>
<script type="text/javascript" src="chat/chat.min3.js"></script>
<audio id="audio" preload="auto">
    <source src="chat/voice_on.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>
<div id="image-modal" style="
    display:none; 
    position:fixed; 
    top:50%; left:50%; 
    transform:translate(-50%, -50%) scale(0);
    max-width:100%; 
    max-height:95%; 
    background:rgba(0,0,0,0.75); 
    justify-content:center; 
    align-items:center; 
    z-index:9999;
    padding:5px;
    border-radius:12px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity:0;">
    <div style="position:relative; display:inline-block;">
        <img id="modal-img" src="" style="
            max-width:100%; 
            max-height:100%; 
            border-radius:12px; 
            box-shadow:0 4px 20px rgba(0,0,0,0.5);
            display:block;
        "/>
        <div id="modal-close" style="
            position:absolute;
            top:5px;
            right:5px;
            background:rgba(0,0,0,0.6);
            color:white;
            font-weight:bold;
            border-radius:50%;
            width:32px;
            height:32px;
            display:flex;
            justify-content:center;
            align-items:center;
            cursor:pointer;
            font-size:20px;
            z-index:10;
        ">×</div>
    </div>
</div>

</body>
</html>

<?php 
mysqli_close($koneksi); 
include("pesan-wa.php");
?>
