<!DOCTYPE html>
<html>
<head>
    
     <link rel="shortcut icon" href="logo/jayawijaya.png">
    <title >Arleken</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}
    .bg-image1 {
        background-image: radial-gradient(circle at bottom right, maroon,black);
  
    }
.bg-image {
  /* The image used */
  background-image: url("img/x.jpg");
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 50%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-image2 {
  /* The image used */
  background-image: url("img/x.png");
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(0px);
  
  /* Full height */
  height: 10%; 
  width: 100%;
  /* Center and scale the image nicely */
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  padding: 20px;
  text-align: center;
}
</style>

    
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/kot.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
     <script src="js/w3.js"></script>
     <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  
<link rel="stylesheet" href=".../../plugins/fontawesome-free/css/all.min.css">
  <!-- SweetAlert2 -->
  <link rel="stylesheet" href="../../plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
  <!-- Toastr -->
  <link rel="stylesheet" href="../../plugins/toastr/toastr.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
    <!-- Select2 -->
  <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
  <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
<script >
  function pass(){
    if($("#pass").val()==="User Atau Pasword Salah")
    {
    alert("⚠ User Atau PAsword Salah 😦 ")
  }
  }
</script>
      
</head>
<body onload="pass()">
    <div class="bg-image">

  </div>
  
<div class="bg-text" style ="background-image:conic-gradient(BurlyWood,grey,white);border-radius :55px ; width: 45%; ">
      
    <span><h2><strong style="color:grey">Arle</strong><strong>ken</strong></h2></span> <br>
    <span  style="color:pink"><?php echo isset($_GET['pasword']) ? $_GET['pasword'] : ''; ?></span>
    <span hidden="hidden">
    <input type="text" id="pass" name="" value="<?php echo isset($_GET['pasword']) ? $_GET['pasword'] : ''; ?>"></span>
                     <form name="login" action="proc.php" method="post" accept-charset="utf-8" >   
                <p style="text-align:left;"><label for="user1" class ="label-control" style ="color:white ; ">Nama User</label></p>
                <p style="text-align:left;"><input type="text" name="user1" placeholder="Masukan Nama User"  class ="form-control" style ="color :purple ; background-image : linear-gradient(white,white,white,white,black) " autocomplete ="off"> </p>
                <p style="text-align:left;"><label for="pass1" class ="label-control" style ="color:white">Kata Sandi</label>  </p>
                <p><input type="password" name="pass1" placeholder="Masukan Password/ Sandi Anda" required="required" class ="form-control" style ="color :purple ; background-image : linear-gradient(white,white,white,white,black) "  autocomplete="off"></p> 
                <p style="text-align:left;"><label for="bulan" class ="label-control" style ="color:white">Bulan</label>  </p>
                <p><select name="tahun" class="form-control">
                  <option value="<?php echo date('Y'); ?>"><?php echo date('Y'); ?></option>
                  <option value="2024">2024</option>
                  <option value="2025">2025</option>
                  <option value="2026">2026</option>
                </select></p> 
               
                <p style="text-align:right" ><input type="submit" value="M a s u k" class="btn btn-success fa fa-hand-pointer-o btn-lg " style ="background-image:conic-gradient(lightblue,black) ; color:white" /> </p>
                <span style="color: darkkhaki;">Sistem Informasi Perencanaan dan Keuangan </span>
                <br>
                <span style="color: black;">PEMERINTAH DAERAH KABUPATEN JAYAWIJAYA</span>
  
   </form>
               
    
  
</div>
    
</div>

              
           
    
 
      
<!-- jQuery 3 -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
   
    
  
    
</body>
</html>