<?php 
include'koneksi.php';
?>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
  <meta name="author" content="Creative Tim">
  <title>Sistem Penilaian Esai Otomatis</title>
  <!-- Favicon -->
  <link rel="icon" href="assets/img/brand/favicon.png" type="image/png">
  <!-- Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
  <!-- Icons -->
  <link rel="stylesheet" href="assets/vendor/nucleo/css/nucleo.css" type="text/css">
  <link rel="stylesheet" href="assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
  <!-- Argon CSS -->
  <link rel="stylesheet" href="assets/css/argon.css?v=1.2.0" type="text/css">
  <style type="text/css">
    body,html{
      background-image: url('assets/img/back6.jpg');
      background-size: cover;
      background-repeat: no-repeat;
    }
  </style>
</head>

<body>
  <!-- Navbar -->
  <nav id="navbar-main" class="navbar navbar-horizontal navbar-transparent navbar-main navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="assets/img/logo1.png" style="border-radius: 20px; height: 70px;">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse navbar-custom-collapse collapse" id="navbar-collapse">
        <div class="navbar-collapse-header">
          <div class="row">
            <div class="col-6 collapse-brand">
              <a href="login.php">
                <img src="assets/img/brand/blue-b.png">
              </a>
            </div>
            <div class="col-6 collapse-close">
              <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
                <span></span>
                <span></span>
              </button>
            </div>
          </div>
        </div>
        <ul class="navbar-nav mr-auto">
  <li class="nav-item">
    <a href="login_admin.php"
       class="nav-link"
       style="background-color: white; color: black; padding: 8px 15px; border-radius: 6px;">
      <span style="text-shadow: 1px 1px 1px grey;" class="nav-link-inner--text">
        Login Admin
      </span>
    </a>
  </li>
</ul>

        <hr class="d-lg-none" />
        <?php 
        $data = mysqli_query($koneksi,"SELECT * FROM medsos");
        while ($tampil = mysqli_fetch_array($data)) {
         ?>
         <ul class="navbar-nav align-items-lg-center ml-lg-auto">
          <li class="nav-item">
            <a class="nav-link nav-link-icon text-dark social-box" href="<?= $tampil['fb']; ?>" target="_blank" data-toggle="tooltip" data-original-title="Like us on Facebook">
              <i class="fab fa-facebook-square"></i>
              <span class="nav-link-inner--text d-lg-none">Facebook</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link nav-link-icon text-dark social-box" href="<?= $tampil['ig']; ?>" target="_blank" data-toggle="tooltip" data-original-title="Follow us on Instagram">
              <i class="fab fa-instagram"></i>
              <span class="nav-link-inner--text d-lg-none">Instagram</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link nav-link-icon text-dark" href="<?= $tampil['twitter']; ?>" target="_blank" data-toggle="tooltip" data-original-title="Follow us on Twitter">
              <i class="fab fa-twitter-square"></i>
              <span class="nav-link-inner--text d-lg-none">Twitter</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link nav-link-icon text-dark" href="<?= $tampil['yt']; ?>" target="_blank" data-toggle="tooltip" data-original-title="Youtube">
              <i class="fab fa-youtube"></i>
              <span class="nav-link-inner--text d-lg-none">Youtube</span>
            </a>
          </li>
        </ul>
      <?php } ?>
    </div>
  </div>
</nav>
<!-- Main content -->
<div class="main-content">
  <!-- Header -->
  <div class="header py-7 py-lg-8 pt-lg-9">
    <div class="container">
      <div class="header-body text-center mb-7">
        <div class="row justify-content-center">
          <div class="col-xl-5 col-lg-6 col-md-8 px-5">
            <h1 class="display-3" style="color: black; text-shadow: 1px 1px 1px grey;">SELAMAT DATANG</h1>
            <h3 style="color: black; text-shadow: 1px 1px 1px grey;" class="text-lead">SISTEM PENILAIAN OTOMATIS</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Page content -->
  <div class="container mt--9 pb-1 login-container">
    <div class="row justify-content-center">
      <div class="col-lg-5 col-md-7">
        <div class="card bg-secondary border-0 mb-0">
          <div class="card-header bg-transparent pb-5">
            <center><img style="width: 80px; height: 80px;" src="assets/img/sma.jpeg"></center>
            <div class="text-center mt-2 mb-3" style="color: black;"><small>LOGIN</small></div>
            <div class="btn-wrapper text-center">
              <a href="login_guru.php" style="height: 50px; font-size: 14pt;" class="btn btn-warning">
                Guru
              </a>
              <a href="login_siswa.php" style="height: 50px; font-size: 14pt;" class="btn btn-warning">
                Siswa
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<br><br>

<!-- Footer -->
<footer class="py-5" id="footer-main">
  <div class="container">
    <div class="row align-items-center justify-content-xl-between">
      <div class="col-xl-6">
        <div class="copyright text-center text-xl-left text-muted">
          <p style="color: white; text-shadow: 1px 1px 1px grey;"><b>&copy; 2026 <br> Kelas Pintar <br>SMA Swasta Tongkoseng</b></p>
        </div>
      </div>
    </div>
  </div>
</footer>

<!-- cripts -->
<!-- Core -->
<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/js-cookie/js.cookie.js"></script>
<script src="assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- JS -->
<script src="assets/js/argon.js?v=1.2.0"></script>
</body>

</html>