<!DOCTYPE html>
<?php
include "koneksi.php";
if (!isset($_SESSION["UserID"]))
{
	header("location:index.html?p=3");
}
?>
<html lang="en">
<title>PT.MULTI HYDRACHROME BALIKPAPAN</title>
<link rel="icon" type="image/png" href="images/mhb.jpeg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
<body>
<!--Ticket Modal -->
<?php
if (isset($_GET["p"]))
				{
					$p=mysqli_real_escape_string($conn,$_GET["p"]);
					if ($p=="1")
					{
						?>		  
								<div id="ticketModal">
									<div class="w3-modal-content w3-animate-top w3-card-4">
									  <header class="w3-container w3-teal w3-center w3-padding-32"> 
										<span onclick="document.getElementById('ticketModal').style.display='none'" 
									   class="w3-button w3-teal w3-xlarge w3-display-topright">×</span>
										<h2 class="w3-wide"><i class="fa fa-suitcase w3-margin-right" style="width:10%"></i>Selamat Datang!</h2>
										<button class="w3-button w3-red w3-section" onclick="document.getElementById('ticketModal').style.display='none'">Close <i class="fa fa-remove"></i></button>
									  </header>
									</div>
								</div>
						<?php
					}
					else if ($p=="2")
					{
						?>
							<div id="ticketModal">
									<div class="w3-modal-content w3-animate-top w3-card-4">
									  <header class="w3-container w3-teal w3-center w3-padding-32"> 
										<span onclick="document.getElementById('ticketModal').style.display='none'" 
									   class="w3-button w3-teal w3-xlarge w3-display-topright">×</span>
										<h2 class="w3-wide"><i class="fa fa-suitcase w3-margin-right" style="width:80%"></i>Daily Report</h2>
									  </header>
									  <div class="w3-container">
                                        <h2 class="w3-wide"><i class="w3-margin-right"></i>Gagal!</h2>
										<button class="w3-button w3-red w3-section" onclick="document.getElementById('ticketModal').style.display='none'">Close <i class="fa fa-remove"></i></button>
										
									  </div>
									</div>
								</div>
						<?php
					}
				}
?>
<!-- Navbar -->
<?php
include "part/menu2.php";
?>

<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
  <a href="#band" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">BAND</a>
  <a href="#tour" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">TOUR</a>
  <a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">CONTACT</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">MERCH</a>
</div>

<!-- Page content -->
<div class="w3-content" style="max-width:200000px;margin-top:100px">

  <!-- Automatic Slideshow Images -->
  <div class="mySlides w3-display-container w3-center">
    <img src="profile/6.jpeg" style="width:15%">
    <div class="w3-display-bottommiddle w3-container w3-text-gray w3-padding-32 w3-hide-small">
      <h3>Multi Hydrachrome Balikpapan</h3>
      <p><b>One Vision For Quality Work!</b></p>   
    </div>
  </div>
  <div class="mySlides w3-display-container w3-center">
    <img src="profile/7.jpeg" style="width:45%">
    <div class="w3-display-bottommiddle w3-container w3-text-gray w3-padding-32 w3-hide-small">
      <h3>New Generation</h3>
      <p><b>Number one in Balikpapan.</b></p>    
    </div>
  </div>
  <div class="mySlides w3-display-container w3-center">
    <img src="profile/1.jpeg" style="width:28%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>Quality</h3>
      <p><b>We Prioritized Quality.</b></p>    
    </div>
  </div>
    <div class="mySlides w3-display-container w3-center">
    <img src="profile/3.jpeg" style="width:28%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>Office</h3>
      <p><b>Era 4.0 On All Fronts.</b></p>    
    </div>
  </div>
    <div class="mySlides w3-display-container w3-center">
    <img src="profile/4.jpeg" style="width:28%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>Workshop</h3>
      <p><b>Era 4.0 On All Fronts.</b></p>    
    </div>
  </div>
    <div class="mySlides w3-display-container w3-center">
    <img src="profile/2.jpeg" style="width:28%">
    <div class="w3-display-bottommiddle w3-container w3-text-gray w3-padding-32 w3-hide-small">
      <h3>Dream</h3>
      <p><b>Thank you, A night we won't forget.</b></p>    
    </div>
  </div>
  <div class="mySlides w3-display-container w3-center">
    <img src="profile/8.jpeg" style="width:28%">
    <div class="w3-display-bottommiddle w3-container w3-text-grey w3-padding-32 w3-hide-small">
      <h3>Engineering</h3>
      <p><b>One Vision For Quality Work!</b></p>   
    </div>
  </div>
  <div class="mySlides w3-display-container w3-center">
    <img src="profile/9.jpeg" style="width:28%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>New Generation</h3>
      <p><b>Number one in Balikpapan.</b></p>    
    </div>
  </div>
  <div class="mySlides w3-display-container w3-center">
    <img src="profile/10.jpeg" style="width:28%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>Team</h3>
      <p><b>Work With Family.</b></p>	  
    </div>
  </div>
    <div class="mySlides w3-display-container w3-center">
    <img src="profile/11.jpeg" style="width:28%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>Clean</h3>
      <p><b>Mind Set.</b></p>    
    </div>
  </div>
    <div class="mySlides w3-display-container w3-center">
    <img src="profile/12.jpeg" style="width:20%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>Safety</h3>
      <p><b>Is Our Top Priority.</b></p>    
    </div>
  </div>
    <div class="mySlides w3-display-container w3-center">
    <img src="profile/7.jpeg" style="width:45%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>BALIKPAPAN</h3>
      <p><b>Thank you</b></p>    
    </div>
  </div>

  <!-- The Band Section -->
  <div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="band">
    <h2 class="w3-wide">PROFESSIONAL INFORMATION SYSTEM</h2>
    <p class="w3-opacity"><i>We Are Familly<i></p>
    <p class="w3-justify">PT. Multi Hydrachrome Balikpapan sebagai perusahaan yang menyediakan produk Hydraulic Chylinder, memiliki komitmen
	                      untuk melaksanakan Sistem Manajemen Mutu, Keselamatan dan Kesehatan Kerja, serta Lingkungan, yang bertujuan untuk memberikan kepuasan pelanggan
						  melalui kualitas produk dan jas, menjaga dan melestarikan lingkungan sekitarnya serta bertekad untuk mencapai suatu kondisi kerja yang bebas dari 
						  kecelakaan kerja dan penyakit akibat  (Zero Incident), dengan memenuhi persyaratan ISO 90001, ISO 14001 dan ISO 45001.</p>
    <div class="w3-row w3-padding-32">
      <div class="w3-third">
        <p>ISO 9001</p>
        <img src="profile/iso1.jpg" class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%">
      </div>
      <div class="w3-third">
        <p>ISO 14001</p>
        <img src="profile/iso2.jpg" class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%">
      </div>
      <div class="w3-third">
        <p>ISO 45001</p>
        <img src="profile/iso3.jpg" class="w3-round" alt="Random Name" style="width:60%">
      </div>
    </div>
  </div>

  <!-- The Tour Section -->
  <div class="w3-black" id="tour">
    <div class="w3-container w3-content w3-padding-64" style="max-width:800px">
      <h2 class="w3-wide w3-center">UPDATE NEWS</h2>
      <p class="w3-opacity w3-center"><i>Remember to share info!</i></p><br>

      <ul class="w3-ul w3-border w3-white w3-text-grey">
        <li class="w3-padding">Date <span class="w3-tag w3-red w3-margin-right"><?php echo date('d / M / y'); ?></span></li>
		<button class="w3-button w3-orange w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Update Info</button>
      </ul>

      <div class="w3-row-padding w3-padding-32" style="margin:0 -16px">
        <div class="w3-third w3-margin-bottom">
          <img src="profile/11.jpeg" alt="New York" style="width:100%" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>Demo</b></p>
            <p class="w3-opacity">Fri 27 Nov 2021</p>
            <p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
            <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Comment</button>
          </div>
        </div>
        <div class="w3-third w3-margin-bottom">
          <img src="profile/5.jpeg" alt="Paris" style="width:100%" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>Libur</b></p>
            <p class="w3-opacity">Sat 28 Nov 2021</p>
            <p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
            <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Comment</button>
          </div>
        </div>
        <div class="w3-third w3-margin-bottom">
          <img src="profile/10.jpeg" alt="San Francisco" style="width:100%" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>Jum'at bersih</b></p>
            <p class="w3-opacity">Sun 29 Nov 2021</p>
            <p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
            <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Comment</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Ticket Modal -->
  <div id="ticketModal" class="w3-modal">
    <div class="w3-modal-content w3-animate-top w3-card-4">
      <header class="w3-container w3-teal w3-center w3-padding-32"> 
        <span onclick="document.getElementById('ticketModal').style.display='none'" 
       class="w3-button w3-teal w3-xlarge w3-display-topright">×</span>
        <h2 class="w3-wide"><i class="fa fa-suitcase w3-margin-right"></i>Update</h2>
      </header>
      <div class="w3-container">
        <p><label><i class="fa fa-shopping-cart"></i> News</label></p>
        <input class="w3-input w3-border" type="text" placeholder="How many?">
        <p><label><i class="fa fa-user"></i> Send To</label></p>
        <input class="w3-input w3-border" type="text" placeholder="Enter email">
        <button class="w3-button w3-block w3-teal w3-padding-16 w3-section w3-right">SEND <i class="fa fa-check"></i></button>
        <button class="w3-button w3-red w3-section" onclick="document.getElementById('ticketModal').style.display='none'">Close <i class="fa fa-remove"></i></button>
        <p class="w3-right">Need <a href="#" class="w3-text-blue">help?</a></p>
      </div>
    </div>
  </div>

  <!-- The Contact Section -->
  <div class="w3-container w3-content w3-padding-64" style="max-width:1000px" id="contact">
    <h2 class="w3-wide w3-center">CONTACT</h2>
    <p class="w3-opacity w3-center"><i>Drop a note!</i></p>
    <div class="w3-row w3-padding-32">
      <div class="w3-col m6 w3-large w3-margin-bottom">
        <i class="fa fa-map-marker" style="width:30px"></i> Jl. Mulawarman RT.038 No. 26A Manggar - Balikpapan, INDONESIA<br>
        <i class="fa fa-phone" style="width:30px"></i> Phone: +62 542 771836<br>
        <i class="fa fa-envelope" style="width:30px"> </i> Email: hc_ga@ptmhb.com<br>
      </div>
      <div class="w3-col m6">

      </div>
    </div>
  </div>
  
<!-- End Page Content -->
</div>

<!-- Image of location/map -->
<img src="profile/maps.jpg" class="w3-image w3-greyscale-min" style="width:100%">

<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
  <i class="fa fa-facebook-official w3-hover-opacity"></i>
  <i href="https://www.instagram.com" class="fa fa-instagram w3-hover-opacity"></i>
  <i class="fa fa-snapchat w3-hover-opacity"></i>
  <i class="fa fa-pinterest-p w3-hover-opacity"></i>
  <i class="fa fa-twitter w3-hover-opacity"></i>
  <i class="fa fa-linkedin w3-hover-opacity"></i>
  <p class="w3-medium">Powered by <a href="https://www.google.co.id/maps/place/Multi+Hidrachrome+Balikpapan.+PT/@-1.2254059,116.9549507,677m/data=!3m2!1e3!4b1!4m5!3m4!1s0x2df14fe853ad1281:0xb1be04f92f1ea2e0!8m2!3d-1.2254059!4d116.9571394" target="_blank">satrio.pringgondani</a></p>
</footer>

<script>
// Automatic Slideshow - change image every 4 seconds
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 4000);    
}

// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
  var x = document.getElementById("navDemo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}

// When the user clicks anywhere outside of the modal, close it
var modal = document.getElementById('ticketModal');
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>
