<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Survey Gathering</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="wrapper">
    <h1 id="title">Survey Gathering 2025</h1>
    <p id="description">Survey Karyawan Metaform</p>
    <form id="survey-form">
      <div class="form-group">
        <label id="name-label" for="name">Nama</label>
        <input id="name" type="text" placeholder="Masukkan Nama" required>
      </div>

      <div class="form-group">
        <p>Department</p>
        <select id="dropdown" required>
          <option disabled selected value>Pilih Department</option>
          <option>Produksi</option>
          <option>Supply Chain</option>
          <option>Quality</option>
          <option>MME</option>
	  <option>Supporting</option>
        </select>
      </div>

      <div class="form-group">
        <label id="number-label" for="number">Tahun Masuk Bekerja</label>
        <input id="number" type="number" placeholder="Tahun" min="2016" max="2024">
      </div>

      <div class="form-group">
        <p>Jabatan di Perusahaan</p>
        <select id="dropdown" required>
          <option disabled selected value>Pilih Jabatan</option>
	  <option>Babu</option>
          <option>Operator/Attendant</option>
          <option>Officer</option>
          <option>Superintendent</option>
          <option>Manager</option>
        </select>
      </div>

      <div class="form-group">
        <p>Apakah perlu diadakan Gathering?</p>
        <label>
          <input type="radio" name="Survey" value="Diperlukan"> Diperlukan
        </label>
        <label>
          <input type="radio" name="Survey" value="Tidak Diperlukan"> Tidak Diperlukan
        </label>
        <label>
          <input type="radio" name="Survey" value="Hanya Perlu Naik Gaji" checked> Hanya Perlu Naik Gaji
        </label>
      </div>

      <div class="form-group">
        <p>Menurut Anda, Apa yang bisa meningkatkan motivasi untuk bekerja?</p>
        <label>
          <input type="checkbox" value="Naik Gaji"> Naik Gaji
        </label>
        <label>
          <input type="checkbox" value="Family Gathering"> Gathering
        </label>
        <label>
          <input type="checkbox" value="Cuti Ditambah"> Cuti Ditambah
        </label>
        <label>
          <input type="checkbox" value="Mood"> Mood
        </label>
      </div>
      
      <div class="puas">
	    <p>Apakah Anda Puas Kerja di Metaform ?</p>
	    <div class="btn-group">
            <button type="button" class="yes-btn">Yes</button>
            <button type="button" class="no-btn">No</button>
        </div>
      </div>
      <div class="form-group">
        <p>Kritik dan Saran</p>
        <textarea name="Saran" placeholder="Masukkan Kritik dan Saran Anda . . ." rows="4"></textarea>
      </div>

      <div>
        <button type="submit" id="submit">Kirim</button>
      </div>
    </form>
  </div>
  <div class="akhir">
    <h4>Copyright @ 2025 Bang Ambon Cikopo
    <br>All Rights Reserved</h4>
  </div>
  <div id="notif" class="notif">
    Data berhasil dikirim ke HR <br>silakan menunggu panggilan :)
  </div>
</body>


<style>
body {
  font-family: Arial, sans-serif;
  background-color: #503B26;
  margin: 0;
  padding: 0;
}

.wrapper {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background: #FFFFFF;
  box-shadow: 0 0 500px 50px rgba(255, 140, 0, 1);
  border-radius: 20px;
}

h1#title {
  text-align: center;
  color: darkorange;
  font-size: 2rem;
}

p#description {
  text-align: center;
  font-size: 1rem;
  color: #555;
  margin-bottom: 20px;
}

#survey-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

label {
  font-size: 1rem;
  color: #444;
  margin-bottom: 8px;
}

input, select, textarea {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

input:focus, select:focus, textarea:focus {
  border-color: darkorange;
}

input[type="radio"], input[type="checkbox"] {
  margin-right: 8px;
}

button#submit {
  background-color: #503B26;
  color: white;
  padding: 10px 15px;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

button#submit:hover {
  background-color: darkorange;
}

.yes-btn, .no-btn {
  background-color: #503B26;
  color: white;
  padding: 5px;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 10%;
  margin-right: 10px;
}

.yes-btn:hover, .no-btn:hover {
  background-color: darkorange;
}

.no-btn{
    position:absolute;
    z-index: 100;
}

.puas{
  flex-direction: column;
}

.akhir{
  background: #503b26;
  width: 100%;
  padding: 1px;
  margin-top: 20px;
}

h4{
  font-family: Arial;
  text-align: center;
  color: darkorange;
}

.notif {
   display: none;
   padding: 20px;
   background-color: #503B26;
   color: white;
   position: fixed;
   top: 20%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 5px;
   font-size: 16px;
   font-weight: bold;
   font-family: helvetica;
   text-align: center;
   z-index: 1000;
   box-shadow: 0 0 20px rgba(255, 140, 0, 1);
}

@media (max-width: 800px) {
  #main {
    padding: 15px;
  }
}
</style>
<script>
    const wrapper = document.querySelector('.wrapper');
    const question = document.querySelector('.question');
    const yesBtn = document.querySelector('.yes-btn');
    const noBtn = document.querySelector('.no-btn');
    const wrapperRect = wrapper.getBoundingClientRect();
    const noBtnRect = noBtn.getBoundingClientRect();
    noBtn.addEventListener('mouseover', () => {
        const i = Math.floor(Math.random() * (wrapperRect.width - noBtnRect.width)) + 1;
        const j = Math.floor(Math.random() * (wrapperRect.height - noBtnRect.height)) + 1;
        noBtn.style.left = i + 'px';
        noBtn.style.top = j + 'px';
});

  document.getElementById('survey-form').addEventListener('submit', function(event) {
    event.preventDefault();
            
  var notif = document.getElementById('notif');
  notif.style.display = 'block';

  setTimeout(function() {
    notif.style.display = 'none';
    }, 3000);
  });
</script>

</html>