Selasa, 26 Agustus 2025

Latihan - Jurnal Mengajar

 


admin, admin1




Tahapan

Kode APPS Script
===========================

function doPost(e) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("JurnalMengajar");


  if (!sheet) {
    return ContentService.createTextOutput("Sheet tidak ditemukan!");
  }


  sheet.appendRow([
    e.parameter.tanggal,
    e.parameter.jam,
    e.parameter.namaasn,
    e.parameter.kelas,
    e.parameter.matapelajaran,
    e.parameter.materi,
    e.parameter.statuskeaktifan,
    e.parameter.hadir,
    e.parameter.tidakhadir,
    e.parameter.refleksi
  ]);


  return ContentService.createTextOutput("✅ Data berhasil disimpan!");
}

ID : AKfycbyW5gTmYXM1w-hWQ3tu3PGRFygeXHJ3ABtpCBJP3kcYRo-cQ1AYRnsSNfd7iFFmScpQ
URL  : https://script.google.com/macros/s/AKfycbyW5gTmYXM1w-hWQ3tu3PGRFygeXHJ3ABtpCBJP3kcYRo-cQ1AYRnsSNfd7iFFmScpQ/exec

Kode HTML
==================

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Form Jurnal Mengajar</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 600px;
      margin: 30px auto;
      background: #f9f9f9;
      padding: 20px;
      border-radius: 10px;
    }
    input, select, textarea, button {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    button {
      background-color: #0077cc;
      color: white;
      font-weight: bold;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h2>πŸ“˜ Jurnal Mengajar</h2>
  <form action="https://script.google.com/macros/s/AKfycbyW5gTmYXM1w-hWQ3tu3PGRFygeXHJ3ABtpCBJP3kcYRo-cQ1AYRnsSNfd7iFFmScpQ/exec" method="post">
    <label>Tanggal:</label>
    <input type="date" name="tanggal" required>


    <label>Jam Mengajar:</label>
    <input type="text" name="jam" required placeholder="Contoh: 07.30–09.00">

    <label>Nama ASN:</label>
    <select name="namaasn" required>
      <option value="Yolanda Antoneta Aponno, S.Th">Yolanda Antoneta Aponno, S.Th</option>
      <option value="Sarah Fransina Adelina Lesnussa, S.Pd">Sarah Fransina Adelina Lesnussa, S.Pd</option>
      <option value="Filomina Labobar, S.Pd">Filomina Labobar, S.Pd</option>
      <option value="Grace Huwae, S.Pd">Grace Huwae, S.Pd</option>
      <option value="Khristine Yudith Manuputty, S.Pd">Khristine Yudith Manuputty, S.Pd</option>
      <option value="Rika Sahetapy, SE">Rika Sahetapy, SE</option>
      <option value="Jacoba Pattiwaellapia, S.Pd">Jacoba Pattiwaellapia, S.Pd</option>
      <option value="Sandrien Paulianty Lekahena, S.Pd">Sandrien Paulianty Lekahena, S.Pd</option>
      <option value="Maria Ariance Warella">Maria Ariance Warella</option>
      <option value="Wilhelem Maoke">Wilhelem Maoke</option>
      <option value="Santya Alfons, S.Pd">Santya Alfons, S.Pd</option>
    </select>

    <label>Kelas:</label>
    <select name="kelas" required>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>

    <label>Mata Pelajaran:</label>
    <select name="matapelajaran" required>
      <option value="Pendidikan Agama dan Budi Pekerti">Pendidikan Agama dan Budi Pekerti</option>
      <option value="Pendidikan Pancasila">Pendidikan Pancasila</option>
      <option value="Bahasa Indonesia">Bahasa Indonesia</option>
      <option value="Matematika">Matematika</option>
      <option value="Ilmu Pengetahuan Alam dan Sosial">Ilmu Pengetahuan Alam dan Sosial</option>
      <option value="Seni dan Budaya">Seni dan Budaya</option>
      <option value="Pendidikan Jasmani Olahraga dan Kesehatan">Pendidikan Jasmani Olahraga dan Kesehatan</option>
      <option value="Bahasa Inggris">Bahasa Inggris</option>
      <option value="Pendidikan Lingkungan Hidup">Pendidikan Lingkungan Hidup</option>
     </select>
    
    <label>Materi:</label>
    <textarea name="materi" required></textarea>

    <label>Status Keaktifan:</label>
    <select name="statuskeaktifan" required>
     <option value="Sangat Aktif">Sangat Aktif</option>
     <option value="Aktif">Aktif</option>
     <option value="Cukup Aktif">Cukup Aktif</option>
     <option value="Tidak Aktif">Tidak Aktif</option>

    <label>Absensi:</label>
    <textarea name="hadir" required></textarea>

    <label>Absensi:</label>
    <textarea name="tidakhadir" required></textarea>

    <label>Refleksi:</label>
    <textarea name="refleksi"></textarea>

    <button type="submit">Simpan Jurnal</button>
  </form>
</body>
</html>

Image Pendukung
===================
logo sekolah 
latar belakang halaman 
Sebuh ilustrasi digital halaman sekolah dasar yang ramai. Terlihat siswa-siswi SD mengenakan seragam putih merah khas SD Indonesia. Beberapa siswa sedang berbicara dengan guru perempuan.

PROMPT
1. Paste html ke Canva
2. Revisi bagian di bawah ini
- tambahkan nama sekolah "SMK Percontohan Pervekt" dan letaknya berada di bawah kata Jurnal Mengajar pada bagian tajuk
- nama sekolah diganti : SMK Percontohan Pervekt 
- logo diganti :  https://freeimghost.net/images/2025/08/19/Logo-pervekt1.png
- latar belakang halaman : https://freeimghost.net/images/2025/08/19/sekolah1.jpg

Tambahkan bagian di bawah ini :
1. running text di bagian atas tajuk : "Jurnal Pembelajaran - SMK Percontohan Pervekt"
2. Jam digital, hari, dan tanggal di bagian bawah tajuk
3. Foto profil kepala sekolah di bagian bawah tajuk : https://freeimghost.net/images/2025/08/26/fotofb.png

Tambahkan bagian di bawah ini :
1. Footer : @2025 SMK Percontohan Pervekt - Hak Cipta Dilindungi
2. Gunakan padanan warna gradient : #ff0066, #ffff99, #000066

Tambahkan bagian di bawah ini :
1. upload foto pembelajaran minimal 2 foto dengan ukuran masing-masing foto sebesar 1 MB
2. batasi karakter pada kolom refleksi minimal 200 karaker dan maksimal 1000 karakter

Tambahkan halaman login
usernama : admin
kata sandi: admin1
Gunakan padanan warna gradient  : #ff0066, #ffff99, #000066


Source Code

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login - Jurnal Mengajar SMK Percontohan Pervekt</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    body {
      font-family: 'Inter', sans-serif;
    }
    .form-group {
      transition: all 0.3s ease;
    }
    .form-group:focus-within {
      transform: translateY(-2px);
    }
    .submit-btn {
      background: linear-gradient(135deg, #ff0066 0%, #ffff99 50%, #000066 100%);
      transition: all 0.3s ease;
    }
    .submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(255, 0, 102, 0.3);
    }
    .form-input {
      transition: all 0.3s ease;
    }
    .form-input:focus {
      transform: translateY(-1px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    .login-container {
      display: block;
    }
    .journal-container {
      display: none;
    }
    .gradient-text {
      background: linear-gradient(45deg, #ff0066, #000066);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  </style>
</head>
<body class="min-h-screen py-8" style="background-image: url('https://freeimghost.net/images/2025/08/19/sekolah1.jpg'); background-size: cover; background-position: center; background-attachment: fixed;">
  
  <!-- Login Page -->
  <div id="loginPage" class="login-container">
    <!-- Running Text -->
    <div class="py-2 overflow-hidden" style="background: linear-gradient(90deg, #ff0066 0%, #ffff99 50%, #000066 100%);">
      <div class="whitespace-nowrap animate-pulse">
        <div class="inline-block px-4 animate-bounce">
          <span class="text-sm font-medium text-white">πŸ” Login Sistem Jurnal Pembelajaran - SMK Percontohan Pervekt πŸ”</span>
        </div>
      </div>
    </div>

    <div class="max-w-md mx-auto px-6 mt-16">
      <!-- Login Header -->
      <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-white rounded-full shadow-lg mb-4 p-2">
          <img src="https://freeimghost.net/images/2025/08/19/Logo-pervekt1.png" alt="Logo SMK Percontohan Pervekt" class="w-full h-full object-contain" onerror="this.src=''; this.alt='Logo failed to load'; this.style.display='none';">
        </div>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">Login Sistem</h1>
        <h2 class="text-xl font-semibold mb-2 gradient-text">SMK Percontohan Pervekt</h2>
        <p class="text-gray-600">Masuk ke Sistem Jurnal Mengajar</p>
      </div>

      <!-- Login Form -->
      <div class="bg-white rounded-2xl shadow-xl p-8">
        <form id="loginForm" class="space-y-6">
          <div class="form-group">
            <label class="block text-sm font-semibold text-gray-700 mb-2">πŸ‘€ Username</label>
            <input type="text" id="username" required placeholder="Masukkan username"
                   class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-pink-500 focus:border-transparent outline-none">
          </div>
          
          <div class="form-group">
            <label class="block text-sm font-semibold text-gray-700 mb-2">πŸ”’ Kata Sandi</label>
            <input type="password" id="password" required placeholder="Masukkan kata sandi"
                   class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-pink-500 focus:border-transparent outline-none">
          </div>

          <div id="loginError" class="text-red-500 text-sm text-center hidden">
            Username atau kata sandi salah!
          </div>

          <div class="pt-4">
            <button type="submit" 
                    class="submit-btn w-full py-4 px-6 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform transition-all duration-300 flex items-center justify-center space-x-2">
              <span>πŸ”‘</span>
              <span>Masuk</span>
            </button>
          </div>
        </form>
      </div>

      <!-- Login Footer -->
      <div class="text-center mt-8 bg-gradient-to-r from-pink-600 via-yellow-200 to-blue-900 text-white py-4 rounded-lg shadow-lg">
        <p class="text-sm font-medium">©2025 SMK Percontohan Pervekt - Hak Cipta Dilindungi</p>
        <p class="text-xs mt-1 opacity-90">Sistem Jurnal Mengajar Digital</p>
      </div>
    </div>
  </div>

  <!-- Journal Page -->
  <div id="journalPage" class="journal-container">
    <!-- Running Text -->
    <div class="py-2 overflow-hidden" style="background: linear-gradient(90deg, #ff0066 0%, #ffff99 50%, #000066 100%);">
      <div class="whitespace-nowrap animate-pulse">
        <div class="inline-block px-4 animate-bounce">
          <span class="text-sm font-medium text-white">πŸ“š Jurnal Pembelajaran - SMK Percontohan Pervekt πŸ“š</span>
        </div>
      </div>
    </div>

    <div class="max-w-2xl mx-auto px-6">
      <!-- Header -->
      <div class="text-center mb-8 mt-8">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-white rounded-full shadow-lg mb-4 p-2">
          <img src="https://freeimghost.net/images/2025/08/19/Logo-pervekt1.png" alt="Logo SMK Percontohan Pervekt" class="w-full h-full object-contain" onerror="this.src=''; this.alt='Logo failed to load'; this.style.display='none';">
        </div>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">Jurnal Mengajar</h1>
        <h2 class="text-xl font-semibold mb-2 gradient-text">SMK Percontohan Pervekt</h2>
        <p class="text-gray-600">Dokumentasi kegiatan pembelajaran harian</p>
        
        <!-- Logout Button -->
        <button onclick="logout()" class="mt-2 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
          πŸšͺ Logout
        </button>
        
        <!-- Digital Clock and Date -->
        <div class="bg-white rounded-lg shadow-md p-4 mt-4 mb-4 inline-block border-2" style="border-image: linear-gradient(45deg, #ff0066, #ffff99, #000066) 1;">
          <div id="digitalClock" class="text-2xl font-bold mb-1 gradient-text"></div>
          <div id="currentDate" class="text-sm text-gray-600"></div>
        </div>
        
        <!-- Principal Photo -->
        <div class="mt-4">
          <div class="inline-block">
            <img src="https://freeimghost.net/images/2025/08/26/fotofb.png" 
                 alt="Foto Kepala Sekolah" 
                 class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-lg"
                 onerror="this.src=''; this.alt='Foto tidak dapat dimuat'; this.style.display='none';">
            <p class="text-sm text-gray-600 mt-2 font-medium">Kepala Sekolah</p>
          </div>
        </div>
      </div>

      <!-- Form Container -->
      <div class="bg-white rounded-2xl shadow-xl p-8">
        <form id="journalForm" action="https://script.google.com/macros/s/AKfycbyW5gTmYXM1w-hWQ3tu3PGRFygeXHJ3ABtpCBJP3kcYRo-cQ1AYRnsSNfd7iFFmScpQ/exec" method="POST" class="space-y-6">
          
          <!-- Date and Time Row -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="form-group">
              <label class="block text-sm font-semibold text-gray-700 mb-2">πŸ“… Tanggal</label>
              <input type="date" name="tanggal" required 
                     class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
            </div>
            
            <div class="form-group">
              <label class="block text-sm font-semibold text-gray-700 mb-2">πŸ• Jam Mengajar</label>
              <input type="text" name="jam" required placeholder="Contoh: 07.30–09.00"
                     class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
            </div>
          </div>

          <!-- Teacher Name -->
          <div class="form-group">
            <label class="block text-sm font-semibold text-gray-700 mb-2">πŸ‘©‍🏫 Nama ASN</label>
            <select name="namaasn" required 
                    class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none bg-white">
              <option value="">Pilih Nama ASN</option>
              <option value="Yolanda Antoneta Aponno, S.Th">Yolanda Antoneta Aponno, S.Th</option>
              <option value="Sarah Fransina Adelina Lesnussa, S.Pd">Sarah Fransina Adelina Lesnussa, S.Pd</option>
              <option value="Filomina Labobar, S.Pd">Filomina Labobar, S.Pd</option>
              <option value="Grace Huwae, S.Pd">Grace Huwae, S.Pd</option>
              <option value="Khristine Yudith Manuputty, S.Pd">Khristine Yudith Manuputty, S.Pd</option>
              <option value="Rika Sahetapy, SE">Rika Sahetapy, SE</option>
              <option value="Jacoba Pattiwaellapia, S.Pd">Jacoba Pattiwaellapia, S.Pd</option>
              <option value="Sandrien Paulianty Lekahena, S.Pd">Sandrien Paulianty Lekahena, S.Pd</option>
              <option value="Maria Ariance Warella">Maria Ariance Warella</option>
              <option value="Wilhelem Maoke">Wilhelem Maoke</option>
              <option value="Santya Alfons, S.Pd">Santya Alfons, S.Pd</option>
            </select>
          </div>

          <!-- Class and Subject Row -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="form-group">
              <label class="block text-sm font-semibold text-gray-700 mb-2">πŸŽ“ Kelas</label>
              <select name="kelas" required 
                      class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none bg-white">
                <option value="">Pilih Kelas</option>
                <option value="1">Kelas 1</option>
                <option value="2">Kelas 2</option>
                <option value="3">Kelas 3</option>
                <option value="4">Kelas 4</option>
                <option value="5">Kelas 5</option>
                <option value="6">Kelas 6</option>
              </select>
            </div>

            <div class="form-group">
              <label class="block text-sm font-semibold text-gray-700 mb-2">πŸ“š Mata Pelajaran</label>
              <select name="matapelajaran" required 
                      class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none bg-white">
                <option value="">Pilih Mata Pelajaran</option>
                <option value="Pendidikan Agama dan Budi Pekerti">Pendidikan Agama dan Budi Pekerti</option>
                <option value="Pendidikan Pancasila">Pendidikan Pancasila</option>
                <option value="Bahasa Indonesia">Bahasa Indonesia</option>
                <option value="Matematika">Matematika</option>
                <option value="Ilmu Pengetahuan Alam dan Sosial">Ilmu Pengetahuan Alam dan Sosial</option>
                <option value="Seni dan Budaya">Seni dan Budaya</option>
                <option value="Pendidikan Jasmani Olahraga dan Kesehatan">Pendidikan Jasmani Olahraga dan Kesehatan</option>
                <option value="Bahasa Inggris">Bahasa Inggris</option>
                <option value="Pendidikan Lingkungan Hidup">Pendidikan Lingkungan Hidup</option>
              </select>
            </div>
          </div>

          <!-- Material -->
          <div class="form-group">
            <label class="block text-sm font-semibold text-gray-700 mb-2">πŸ“– Materi</label>
            <textarea name="materi" required rows="3" placeholder="Jelaskan materi yang diajarkan..."
                      class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"></textarea>
          </div>

          <!-- Activity Status -->
          <div class="form-group">
            <label class="block text-sm font-semibold text-gray-700 mb-2">⚡ Status Keaktifan</label>
            <select name="statuskeaktifan" required 
                    class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none bg-white">
              <option value="">Pilih Status Keaktifan</option>
              <option value="Sangat Aktif">Sangat Aktif</option>
              <option value="Aktif">Aktif</option>
              <option value="Cukup Aktif">Cukup Aktif</option>
              <option value="Tidak Aktif">Tidak Aktif</option>
            </select>
          </div>

          <!-- Attendance Section -->
          <div class="bg-gray-50 rounded-xl p-6 space-y-4">
            <h3 class="text-lg font-semibold text-gray-800 flex items-center">
              <span class="mr-2">✅</span>
              Absensi Siswa
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="form-group">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Siswa Hadir</label>
                <textarea name="hadir" required rows="3" placeholder="Nama siswa yang hadir..."
                          class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"></textarea>
              </div>
              
              <div class="form-group">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Siswa Tidak Hadir</label>
                <textarea name="tidakhadir" required rows="3" placeholder="Nama siswa yang tidak hadir..."
                          class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"></textarea>
              </div>
            </div>
          </div>

          <!-- Reflection -->
          <div class="form-group">
            <label class="block text-sm font-semibold text-gray-700 mb-2">πŸ’­ Refleksi</label>
            <textarea name="refleksi" rows="4" placeholder="Refleksi pembelajaran hari ini (opsional)..."
                      class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"></textarea>
          </div>

          <!-- Submit Button -->
          <div class="pt-4">
            <button type="submit" 
                    class="submit-btn w-full py-4 px-6 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform transition-all duration-300 flex items-center justify-center space-x-2">
              <span>πŸ’Ύ</span>
              <span>Simpan Jurnal</span>
            </button>
          </div>
        </form>
      </div>

      <!-- Footer -->
      <div class="text-center mt-8 bg-gradient-to-r from-pink-600 via-yellow-200 to-blue-900 text-white py-4 rounded-lg shadow-lg">
        <p class="text-sm font-medium">©2025 SMK Percontohan Pervekt - Hak Cipta Dilindungi</p>
        <p class="text-xs mt-1 opacity-90">Sistem Jurnal Mengajar Digital</p>
      </div>
    </div>
  </div>

  <script>
    // Check if user is already logged in
    document.addEventListener('DOMContentLoaded', function() {
      if (sessionStorage.getItem('isLoggedIn') === 'true') {
        showJournalPage();
      }
    });

    // Login form handling
    document.getElementById('loginForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      const errorDiv = document.getElementById('loginError');
      
      if (username === 'admin' && password === 'admin1') {
        sessionStorage.setItem('isLoggedIn', 'true');
        showJournalPage();
      } else {
        errorDiv.classList.remove('hidden');
        setTimeout(() => {
          errorDiv.classList.add('hidden');
        }, 3000);
      }
    });

    // Show journal page
    function showJournalPage() {
      document.getElementById('loginPage').style.display = 'none';
      document.getElementById('journalPage').style.display = 'block';
      
      // Initialize journal page
      const dateInput = document.querySelector('input[name="tanggal"]');
      const today = new Date().toISOString().split('T')[0];
      dateInput.value = today;
      
      // Start clock
      updateClock();
      setInterval(updateClock, 1000);
    }

    // Logout function
    function logout() {
      sessionStorage.removeItem('isLoggedIn');
      document.getElementById('journalPage').style.display = 'none';
      document.getElementById('loginPage').style.display = 'block';
      
      // Clear login form
      document.getElementById('username').value = '';
      document.getElementById('password').value = '';
    }

    // Digital Clock and Date
    function updateClock() {
      const now = new Date();
      
      // Format time
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0');
      const timeString = `${hours}:${minutes}:${seconds}`;
      
      // Format date
      const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
      const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 
                     'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
      
      const dayName = days[now.getDay()];
      const day = now.getDate();
      const month = months[now.getMonth()];
      const year = now.getFullYear();
      const dateString = `${dayName}, ${day} ${month} ${year}`;
      
      // Update display
      const clockElement = document.getElementById('digitalClock');
      const dateElement = document.getElementById('currentDate');
      if (clockElement && dateElement) {
        clockElement.textContent = timeString;
        dateElement.textContent = dateString;
      }
    }

    // Form submission handling
    document.getElementById('journalForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
      const submitBtn = document.querySelector('#journalForm button[type="submit"]');
      const originalContent = submitBtn.innerHTML;
      
      // Show loading state
      submitBtn.innerHTML = '<span>⏳</span><span>Menyimpan...</span>';
      submitBtn.disabled = true;
      
      // Get form data
      const formData = new FormData(this);
      
      // Submit to Google Apps Script
      fetch(this.action, {
        method: 'POST',
        body: formData,
        mode: 'no-cors'
      })
      .then(() => {
        // Success feedback
        submitBtn.innerHTML = '<span>✅</span><span>Berhasil Disimpan!</span>';
        submitBtn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
        
        // Reset form after 2 seconds
        setTimeout(() => {
          this.reset();
          const dateInput = document.querySelector('input[name="tanggal"]');
          const today = new Date().toISOString().split('T')[0];
          dateInput.value = today;
          
          submitBtn.innerHTML = originalContent;
          submitBtn.style.background = 'linear-gradient(135deg, #ff0066 0%, #ffff99 50%, #000066 100%)';
          submitBtn.disabled = false;
        }, 2000);
      })
      .catch((error) => {
        // Error feedback
        submitBtn.innerHTML = '<span>❌</span><span>Gagal Menyimpan</span>';
        submitBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)';
        
        setTimeout(() => {
          submitBtn.innerHTML = originalContent;
          submitBtn.style.background = 'linear-gradient(135deg, #ff0066 0%, #ffff99 50%, #000066 100%)';
          submitBtn.disabled = false;
        }, 3000);
      });
    });
  </script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9757073c4149a553',t:'MTc1NjI1MDA5Ni4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>






Tidak ada komentar:

Posting Komentar

CRUD Canva

  https://www.youtube.com/watch?v=tHGA8tsUdR8 https://www.youtube.com/watch?v=B7h4pxDqNW0 https://www.youtube.com/watch?v=dCUCuSObwaw&li...