<!DOCTYPE html>
<html lang="en">

<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>SPPS | Portal</title>
	<link rel="icon" type="image/png" href="<?php echo media_url('ico/favicon.ico') ?>">

	<!-- Bootstrap Core CSS -->
	<link href="<?php echo media_url() ?>/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="<?php echo media_url() ?>/css/load-font-googleapis.css">
	<!-- Font Awesome -->
	<link rel="stylesheet" href="<?php echo media_url() ?>/css/font-awesome.min.css">


	<!-- Custom CSS -->
	<link href="<?php echo media_url() ?>/css/frontend-style.css" rel="stylesheet">
	<link href="<?php echo media_url() ?>/css/portal.css" rel="stylesheet">

	<style>
		body {
			background: #fff; /* White background */
			color: #333; /* Dark text color for better readability */
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}
		.logo {
			width: 100px;
			margin: 20px auto;
			display: block;
			filter: drop-shadow(0 0 10px rgba(0, 255, 0, 0.8));
			animation: neonOutline 1.5s linear infinite;
		}
		.box {
			background-color: rgba(0, 0, 0, 0.8);
			border: 2px solid transparent;
			color: #fff;
			padding: 20px;
			margin: 20px;
			border-radius: 10px;
			text-align: center;
			transition: all 0.5s ease-in-out;
		}
		.box:hover {
			transform: scale(1.05);
			border-color: #fff;
		}
		.icon-menu {
			font-size: 50px;
			margin-bottom: 10px;
			transition: transform 0.5s ease-in-out;
		}
		.box:hover .icon-menu {
			transform: rotate(360deg);
		}
		.lead {
			font-size: 24px;
			font-weight: bold;
			margin-top: 20px;
			letter-spacing: 2px;
		}
		.time-date {
			margin: 20px auto;
			font-size: 18px;
			color: #333;
			font-weight: bold;
			text-align: center;
		}
		@keyframes neonOutline {
			0% {
				filter: drop-shadow(0 0 10px rgba(0, 255, 0, 0.8)) drop-shadow(0 0 20px rgba(0, 255, 0, 0.6));
			}
			50% {
				filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 0, 0, 0.6));
			}
			100% {
				filter: drop-shadow(0 0 10px rgba(0, 255, 0, 0.8)) drop-shadow(0 0 20px rgba(0, 255, 0, 0.6));
			}
		}
	</style>

</head>

<body>

	<!-- Home -->
	<section class="content-section">
		<div class="container text-center">
			<div class="row">
				<div class="col-md-12">
					<img src="logo smk.png" alt="Logo SMK Pasundan 3 Bandung" class="logo">
					<p class="lead mb-5"><b>SMK PASUNDAN 3 BANDUNG</b></p>
				</div>
				<marquee direction="left" scrollamount="2" align="center">
  
  <?php
  
  date_default_timezone_set("Asia/Jakarta");
  
  $b = time();
  $hour = date("G",$b);
  
  if ($hour >= 0 && $hour <= 11) {
      echo "<b>Selamat Pagi</b> ";
  } elseif ($hour >= 12 && $hour <= 14) {
      echo "<b>Selamat Siang</b> ";
  } elseif ($hour >= 15 && $hour <= 17) {
      echo "<b>Selamat Sore</b> ";
  } elseif ($hour >= 17 && $hour <= 18) {
      echo "<b>Selamat Petang</b> ";
  } elseif ($hour >= 19 && $hour <= 23) {
      echo "<b>Selamat Malam</b> ";
  }
  
  ?>
    
  Selamat datang di aplikasi <b>WILUJENG SUMPING SMK PASUNDAN 3 BANDUNG</b> jika ada kendala silahkan hubungi <a href="https://wa.me/6287878762628?text=Halo,%20admin%20"><b>Admin</b></a></marquee>
			</div>
			<div class="time-date" id="time-date">
				<!-- Time and date will be dynamically inserted here -->
			</div>
			<div class="col-md-4">
				<a href="<?php echo site_url('manage') ?>">
					<div class="box">
						<i class="fa fa-desktop icon-menu"></i>
						<br>
						Login Admin
					</div>
				</a>
			</div>
			<div class="col-md-4">
				<a href="<?php echo site_url('home') ?>">
					<div class="box">
						<i class="fa fa-credit-card icon-menu"></i>
						<br>
						Cek Pembayaran Siswa
					</div>
				</a>
			</div>
			<div class="col-md-4">
				<a href="<?php echo site_url('student') ?>">
					<div class="box">
						<i class="fa fa-users icon-menu"></i>
						<br>
						Login Siswa
					</div>
				</a>
			</div>
		</div>
	</section>

	<script>
		function updateTimeDate() {
			const now = new Date();
			const optionsDate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
			const optionsTime = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
			const dateString = now.toLocaleDateString('id-ID', optionsDate);
			const timeString = now.toLocaleTimeString('id-ID', optionsTime);
			document.getElementById('time-date').innerHTML = `${dateString} - ${timeString}`;
		}

		setInterval(updateTimeDate, 1000); // Update every second
		updateTimeDate(); // Initial call
	</script>

</body>

</html>