@extends('menu/index')
@section('konten-site-karyawan')
<main class="app-main p-2"> <!--begin::App Content Header-->
    @include('flash-message')
    <script>
    setTimeout(function() { 
      var flashMessage = document.querySelector('.alert'); 
       if (flashMessage) { flashMessage.style.transition = 'opacity 1s ease'; flashMessage.style.opacity = 0; setTimeout(function() { flashMessage.remove(); }, 1000); 
       } }, 1500); </script>            
    {{-- <h5 class="text-center">Site karyawan</h5> --}}
    {{-- <div class="flex flex-col mt-2">
      <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
          <div
              class="inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg">
              <table class="min-w-full">
                  <thead>
                      <tr>
                          <th
                              class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
                              Name</th>
                          <th
                              class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
                              Title</th>
                          <th
                              class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
                              Status</th>
                          <th
                              class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
                              Role</th>
                          <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
                      </tr>
                  </thead>

                  <tbody class="bg-white">
                      <tr>
                          <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                              <div class="flex items-center">
                                  <div class="flex-shrink-0 w-10 h-10">
                                      <img class="w-10 h-10 rounded-full"
                                          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
                                          alt="">
                                  </div>

                                  <div class="ml-4">
                                      <div class="text-sm font-medium leading-5 text-gray-900">John Doe
                                      </div>
                                      <div class="text-sm leading-5 text-gray-500">john@example.com</div>
                                  </div>
                              </div>
                          </td>

                          <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                              <div class="text-sm leading-5 text-gray-900">Software Engineer</div>
                              <div class="text-sm leading-5 text-gray-500">Web dev</div>
                          </td>

                          <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                              <span
                                  class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">Active</span>
                          </td>

                          <td
                              class="px-6 py-4 text-sm leading-5 text-gray-500 whitespace-no-wrap border-b border-gray-200">
                              Owner</td>

                          <td
                              class="px-6 py-4 text-sm font-medium leading-5 text-right whitespace-no-wrap border-b border-gray-200">
                              <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
                          </td>
                      </tr>
                      <tr>
                          <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                              <div class="flex items-center">
                                  <div class="flex-shrink-0 w-10 h-10">
                                      <img class="w-10 h-10 rounded-full"
                                          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
                                          alt="">
                                  </div>

                                  <div class="ml-4">
                                      <div class="text-sm font-medium leading-5 text-gray-900">John Doe
                                      </div>
                                      <div class="text-sm leading-5 text-gray-500">john@example.com</div>
                                  </div>
                              </div>
                          </td>

                          <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                              <div class="text-sm leading-5 text-gray-900">Software Engineer</div>
                              <div class="text-sm leading-5 text-gray-500">Web dev</div>
                          </td>

                          <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                              <span
                                  class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">Active</span>
                          </td>

                          <td
                              class="px-6 py-4 text-sm leading-5 text-gray-500 whitespace-no-wrap border-b border-gray-200">
                              Owner</td>

                          <td
                              class="px-6 py-4 text-sm font-medium leading-5 text-right whitespace-no-wrap border-b border-gray-200">
                              <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
                          </td>
                      </tr>
                  </tbody>
              </table>
          </div>
      </div>
  </div> --}}
  <div style="width: 100%; height:80%; display:flex; justify-content:center; padding:10px; ">
    <img style="border-radius: 20px;" src="{{ url('../asset-modified/image/alertim2.gif') }}" alt="">
  </div>
    </main> <!--end::App Main-->
    @include('flash-message')
    <script>
    setTimeout(function() { 
      var flashMessage = document.querySelector('.alert'); 
       if (flashMessage) { flashMessage.style.transition = 'opacity 1s ease'; flashMessage.style.opacity = 0; setTimeout(function() { flashMessage.remove(); }, 1000); 
       } }, 1500); </script>
      <!-- stylesheet -->
      <link
        rel="stylesheet"
        href="https://unpkg.com/@material-tailwind/html@latest/styles/material-tailwind.css"
      />
      
      <!-- from cdn -->
      <script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>
            </div>
          </div>
    
    
      
      
          
    </main> <!--end::App Main-->
@endsection