Spaces:

alterzick
/

notepad-v1

Running

App Files Files Community

alterzick commited on Jan 1

Commit

2e6530e

verified ·

1 Parent(s): 8297276

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +447 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Notepad V1
-emoji: 📚
-colorFrom: yellow
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: notepad-v1
+emoji: ⚛️
+colorFrom: purple
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - QwenSite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,447 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Aplikasi Catatan Pembelajaran</title>
+  <!-- jsPDF + autoTable untuk PDF berkualitas tinggi -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>
+  <!-- SheetJS untuk Excel -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+  <style>
+    body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; background: #f0f2f5; }
+    h1 { text-align: center; color: #1a1a1a; margin: 20px 0; }
+    .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+    .card { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; }
+    .tabs { display: flex; background: #f8f9fa; border-bottom: 1px solid #dee2e6; }
+    .tablink { flex: 1; padding: 16px; text-align: center; font-size: 18px; font-weight: 600; cursor: pointer; border: none; background: transparent; }
+    .tablink:hover { background: #e9ecef; }
+    .tablink.active { background: #007bff; color: white; }
+    .tabcontent { padding: 30px; display: none; }
+    .tabcontent.active { display: block; }
+    label { display: block; margin: 15px 0 8px; font-weight: 600; color: #333; }
+    input, select, textarea { width: 100%; padding: 12px; border: 1px solid #ced4da; border-radius: 8px; box-sizing: border-box; font-size: 16px; }
+    textarea { resize: vertical; min-height: 120px; }
+    button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 15px; margin: 5px; }
+    button:hover { background: #0056b3; }
+    button.secondary { background: #6c757d; }
+    button.secondary:hover { background: #545b62; }
+    button.danger { background: #dc3545; }
+    button.danger:hover { background: #c82333; }
+    button.small { padding: 6px 12px; font-size: 14px; }
+    .form-group { margin-bottom: 10px; }
+    .filter-group { display: flex; gap: 15px; flex-wrap: wrap; align-items: end; margin-bottom: 20px; }
+    .filter-group > div { flex: 1; min-width: 200px; }
+    table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; }
+    th { background: #007bff; color: white; padding: 14px; text-align: left; }
+    td { padding: 12px; border-bottom: 1px solid #dee2e6; vertical-align: top; }
+    tr:hover { background: #f8f9fa; }
+    .text-wrap { white-space: pre-wrap; word-wrap: break-word; }
+    .actions { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+    .edit-mode { background: #fff3cd; padding: 10px; border-radius: 8px; margin-bottom: 20px; }
+    @media (max-width: 768px) {
+      .filter-group { flex-direction: column; }
+      .tablink { font-size: 16px; padding: 12px; }
+      table { font-size: 14px; }
+      td, th { padding: 8px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Aplikasi Catatan Pembelajaran</h1>
+    <div class="card">
+      <div class="tabs">
+        <button class="tablink active" onclick="openTab(event, 'Input')">Input Pembelajaran</button>
+        <button class="tablink" onclick="openTab(event, 'Daftar')">Daftar Pembelajaran</button>
+      </div>
+      <!-- Tab Input -->
+      <div id="Input" class="tabcontent active">
+        <h2 style="margin-top:0; color:#333;">Input Data Pembelajaran</h2>
+        <div id="editModeInfo" class="edit-mode" style="display:none;">
+          <strong>Sedang mengedit entri #<span id="editIndex"></span></strong>
+          <button class="secondary small" onclick="batalEdit()">Batal Edit</button>
+        </div>
+        <label>Jenis Pembelajaran</label>
+        <select id="jenisSelect"></select>
+        <div id="manualJenisInput" class="form-group" style="display:none;">
+          <label>Tambah Jenis Baru</label>
+          <input type="text" id="jenisManual" placeholder="Contoh: Pemrograman, Fisika, dll.">
+        </div>
+        <label>Indicator (Sub Bab yang Dibahas)</label>
+        <select id="indicatorSelect"></select>
+        <div id="manualIndicatorInput" class="form-group" style="display:none;">
+          <label>Tambah Sub Bab Baru</label>
+          <input type="text" id="indicatorManual" placeholder="Contoh: Aljabar, HTML Dasar">
+        </div>
+        <label>Hasil Pembelajaran</label>
+        <textarea id="hasil" placeholder="Tuliskan detail apa yang telah Anda pelajari..."></textarea>
+        <label>Kesimpulan</label>
+        <textarea id="kesimpulan" placeholder="Tuliskan poin penting atau kesimpulan..."></textarea>
+        <div>
+          <button onclick="simpanData()">Simpan Pembelajaran</button>
+          <button class="secondary" onclick="resetForm()">Reset Form</button>
+        </div>
+      </div>
+      <!-- Tab Daftar -->
+      <div id="Daftar" class="tabcontent">
+        <h2 style="margin-top:0; color:#333;">Daftar Semua Pembelajaran</h2>
+        <div class="filter-group">
+          <div>
+            <label>Filter Jenis</label>
+            <select id="filterJenis"><option value="">Semua Jenis</option></select>
+          </div>
+          <div>
+            <label>Filter Kata Kunci</label>
+            <input type="text" id="filterKata" placeholder="Cari di hasil atau kesimpulan...">
+          </div>
+          <div>
+            <button onclick="terapkanFilter()">Terapkan Filter</button>
+            <button class="secondary" onclick="resetFilter()">Reset Filter</button>
+          </div>
+        </div>
+        <div class="actions">
+          <div>
+            <label style="display:inline-block; margin-right:10px;">Import dari Excel:</label>
+            <input type="file" id="importFile" accept=".xlsx, .xls" style="display:inline-block; width:auto;">
+            <button onclick="importExcel()">Import Data</button>
+          </div>
+          <div>
+            <button onclick="exportExcel()">Export ke Excel</button>
+            <button onclick="exportPDF()">Export ke PDF</button>
+          </div>
+        </div>
+        <table id="tabelPembelajaran">
+          <thead>
+            <tr>
+              <th style="width:5%;">No</th>
+              <th style="width:15%;">Tanggal</th>
+              <th style="width:12%;">Jenis</th>
+              <th style="width:15%;">Indicator</th>
+              <th style="width:25%;">Hasil Pembelajaran</th>
+              <th style="width:23%;">Kesimpulan</th>
+              <th style="width:10%;">Aksi</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <script>
+    const { jsPDF } = window.jspdf;
+    let dataPembelajaran = JSON.parse(localStorage.getItem('pembelajaran')) || [];
+    let jenisList = [...new Set(dataPembelajaran.map(d => d.jenis))].sort();
+    if (jenisList.length === 0) jenisList = ["Matematika", "Bahasa", "Sains"];
+    let indicatorList = [...new Set(dataPembelajaran.map(d => d.indikator))].sort();
+    if (indicatorList.length === 0) indicatorList = ["Dasar", "Menengah", "Lanjutan"];
+    let editIndex = -1; // -1 = tambah baru, >=0 = edit entri
+    function updateDropdowns() {
+      const jenisSelect = document.getElementById('jenisSelect');
+      const filterJenis = document.getElementById('filterJenis');
+      const indicatorSelect = document.getElementById('indicatorSelect');
+      jenisSelect.innerHTML = '';
+      filterJenis.innerHTML = '<option value="">Semua Jenis</option>';
+      jenisList.forEach(j => {
+        jenisSelect.add(new Option(j, j));
+        filterJenis.add(new Option(j, j));
+      });
+      jenisSelect.add(new Option('--- Tambah Jenis Baru ---', 'new'));
+      indicatorSelect.innerHTML = '';
+      indicatorList.forEach(i => indicatorSelect.add(new Option(i, i)));
+      indicatorSelect.add(new Option('--- Tambah Sub Bab Baru ---', 'new'));
+    }
+    document.getElementById('jenisSelect').addEventListener('change', function() {
+      document.getElementById('manualJenisInput').style.display = this.value === 'new' ? 'block' : 'none';
+    });
+    document.getElementById('indicatorSelect').addEventListener('change', function() {
+      document.getElementById('manualIndicatorInput').style.display = this.value === 'new' ? 'block' : 'none';
+    });
+    function simpanData() {
+      let jenis = document.getElementById('jenisSelect').value;
+      if (jenis === 'new') {
+        jenis = document.getElementById('jenisManual').value.trim();
+        if (!jenis) return alert('Masukkan nama jenis baru!');
+        if (!jenisList.includes(jenis)) {
+          jenisList.push(jenis);
+          jenisList.sort();
+        }
+      }
+      let indikator = document.getElementById('indicatorSelect').value;
+      if (indikator === 'new') {
+        indikator = document.getElementById('indicatorManual').value.trim();
+        if (!indikator) return alert('Masukkan nama sub bab baru!');
+        if (!indicatorList.includes(indikator)) {
+          indicatorList.push(indikator);
+          indicatorList.sort();
+        }
+      }
+      const hasil = document.getElementById('hasil').value.trim();
+      const kesimpulan = document.getElementById('kesimpulan').value.trim();
+      if (!jenis || !indikator || !hasil || !kesimpulan) {
+        return alert('Semua field wajib diisi!');
+      }
+      const entry = {
+        tanggal: editIndex === -1 ? new Date().toLocaleString('id-ID') : dataPembelajaran[editIndex].tanggal,
+        jenis,
+        indikator,
+        hasil,
+        kesimpulan
+      };
+      if (editIndex === -1) {
+        dataPembelajaran.push(entry);
+        alert('Data pembelajaran berhasil disimpan!');
+      } else {
+        dataPembelajaran[editIndex] = entry;
+        alert('Data pembelajaran berhasil diperbarui!');
+      }
+      localStorage.setItem('pembelajaran', JSON.stringify(dataPembelajaran));
+      updateDropdowns();
+      resetForm();
+      if (document.getElementById('Daftar').classList.contains('active')) tampilkanData();
+    }
+    function resetForm() {
+      editIndex = -1;
+      document.getElementById('editModeInfo').style.display = 'none';
+      document.getElementById('jenisSelect').value = jenisList[0] || '';
+      document.getElementById('manualJenisInput').style.display = 'none';
+      document.getElementById('jenisManual').value = '';
+      document.getElementById('indicatorSelect').value = indicatorList[0] || '';
+      document.getElementById('manualIndicatorInput').style.display = 'none';
+      document.getElementById('indicatorManual').value = '';
+      document.getElementById('hasil').value = '';
+      document.getElementById('kesimpulan').value = '';
+    }
+    function batalEdit() {
+      resetForm();
+    }
+    function editEntri(index) {
+      const entry = dataPembelajaran[index];
+      editIndex = index;
+      // Pindah ke tab Input
+      openTab(null, 'Input');
+      document.getElementById('editModeInfo').style.display = 'block';
+      document.getElementById('editIndex').textContent = index + 1;
+      // Set nilai form
+      let jenisSelect = document.getElementById('jenisSelect');
+      if (jenisList.includes(entry.jenis)) {
+        jenisSelect.value = entry.jenis;
+        document.getElementById('manualJenisInput').style.display = 'none';
+      } else {
+        jenisSelect.value = 'new';
+        document.getElementById('manualJenisInput').style.display = 'block';
+        document.getElementById('jenisManual').value = entry.jenis;
+      }
+      let indicatorSelect = document.getElementById('indicatorSelect');
+      if (indicatorList.includes(entry.indikator)) {
+        indicatorSelect.value = entry.indikator;
+        document.getElementById('manualIndicatorInput').style.display = 'none';
+      } else {
+        indicatorSelect.value = 'new';
+        document.getElementById('manualIndicatorInput').style.display = 'block';
+        document.getElementById('indicatorManual').value = entry.indikator;
+      }
+      document.getElementById('hasil').value = entry.hasil;
+      document.getElementById('kesimpulan').value = entry.kesimpulan;
+    }
+    function hapusEntri(index) {
+      if (confirm('Yakin ingin menghapus entri ini?')) {
+        dataPembelajaran.splice(index, 1);
+        localStorage.setItem('pembelajaran', JSON.stringify(dataPembelajaran));
+        tampilkanData();
+        alert('Data berhasil dihapus!');
+      }
+    }
+    function tampilkanData(filterJenis = '', filterKata = '') {
+      const tbody = document.querySelector('#tabelPembelajaran tbody');
+      tbody.innerHTML = '';
+      let filtered = dataPembelajaran;
+      if (filterJenis) filtered = filtered.filter(d => d.jenis === filterJenis);
+      if (filterKata) {
+        const kata = filterKata.toLowerCase();
+        filtered = filtered.filter(d =>
+          d.hasil.toLowerCase().includes(kata) || d.kesimpulan.toLowerCase().includes(kata)
+        );
+      }
+      filtered.forEach((d, i) => {
+        const actualIndex = dataPembelajaran.indexOf(d);
+        const row = tbody.insertRow();
+        row.insertCell(0).textContent = i + 1;
+        row.insertCell(1).textContent = d.tanggal;
+        row.insertCell(2).textContent = d.jenis;
+        row.insertCell(3).textContent = d.indikator;
+        row.insertCell(4).innerHTML = '<div class="text-wrap">' + d.hasil.replace(/\n/g, '<br>') + '</div>';
+        row.insertCell(5).innerHTML = '<div class="text-wrap">' + d.kesimpulan.replace(/\n/g, '<br>') + '</div>';
+        const cellAksi = row.insertCell(6);
+        cellAksi.innerHTML = `
+          <button class="secondary small" onclick="editEntri(${actualIndex})">Edit</button>
+          <button class="danger small" onclick="hapusEntri(${actualIndex})">Hapus</button>
+        `;
+      });
+    }
+    function terapkanFilter() {
+      const filterJenis = document.getElementById('filterJenis').value;
+      const filterKata = document.getElementById('filterKata').value;
+      tampilkanData(filterJenis, filterKata);
+    }
+    function resetFilter() {
+      document.getElementById('filterJenis').value = '';
+      document.getElementById('filterKata').value = '';
+      tampilkanData();
+    }
+    // Import dan Export tetap sama (dipertahankan dari versi sebelumnya)
+    function importExcel() {
+      const fileInput = document.getElementById('importFile');
+      const file = fileInput.files[0];
+      if (!file) return alert('Pilih file Excel terlebih dahulu!');
+      const reader = new FileReader();
+      reader.onload = function(e) {
+        try {
+          const data = new Uint8Array(e.target.result);
+          const workbook = XLSX.read(data, { type: 'array' });
+          const sheet = workbook.Sheets[workbook.SheetNames[0]];
+          const rows = XLSX.utils.sheet_to_json(sheet);
+          let imported = 0;
+          rows.forEach(row => {
+            const entry = {
+              tanggal: row['Tanggal'] || row['tanggal'] || new Date().toLocaleString('id-ID'),
+              jenis: row['Jenis'] || row['jenis'] || '',
+              indikator: row['Indicator (Sub Bab)'] || row['Indikator'] || row['indicator'] || row['sub bab'] || '',
+              hasil: row['Hasil Pembelajaran'] || row['Hasil'] || row['hasil'] || '',
+              kesimpulan: row['Kesimpulan'] || row['kesimpulan'] || ''
+            };
+            if (entry.jenis && entry.indikator && entry.hasil && entry.kesimpulan) {
+              dataPembelajaran.push(entry);
+              if (!jenisList.includes(entry.jenis)) jenisList.push(entry.jenis);
+              if (!indicatorList.includes(entry.indikator)) indicatorList.push(entry.indikator);
+              imported++;
+            }
+          });
+          jenisList = [...new Set(jenisList)].sort();
+          indicatorList = [...new Set(indicatorList)].sort();
+          localStorage.setItem('pembelajaran', JSON.stringify(dataPembelajaran));
+          updateDropdowns();
+          tampilkanData();
+          alert(`Berhasil mengimport ${imported} data pembelajaran!`);
+          fileInput.value = '';
+        } catch (err) {
+          alert('Gagal membaca file: ' + err.message);
+        }
+      };
+      reader.readAsArrayBuffer(file);
+    }
+    function exportExcel() {
+      if (dataPembelajaran.length === 0) return alert('Tidak ada data untuk diekspor!');
+      const ws = XLSX.utils.json_to_sheet(dataPembelajaran);
+      const wb = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(wb, ws, "Pembelajaran");
+      XLSX.writeFile(wb, "Catatan_Pembelajaran_" + new Date().toISOString().slice(0,10) + ".xlsx");
+    }
+    function exportPDF() {
+      if (dataPembelajaran.length === 0) return alert('Tidak ada data untuk diekspor!');
+      const doc = new jsPDF('l', 'mm', 'a4');
+      doc.setFontSize(18);
+      doc.text("Laporan Catatan Pembelajaran", 14, 20);
+      doc.setFontSize(11);
+      doc.text("Dicetak pada: " + new Date().toLocaleString('id-ID'), 14, 30);
+      const tableData = dataPembelajaran.map((d, i) => [
+        i + 1,
+        d.tanggal,
+        d.jenis,
+        d.indikator,
+        d.hasil.length > 80 ? d.hasil.substring(0,80) + '...' : d.hasil,
+        d.kesimpulan.length > 80 ? d.kesimpulan.substring(0,80) + '...' : d.kesimpulan
+      ]);
+      doc.autoTable({
+        head: [['No', 'Tanggal', 'Jenis', 'Indicator', 'Hasil Pembelajaran', 'Kesimpulan']],
+        body: tableData,
+        startY: 40,
+        styles: { fontSize: 10, cellPadding: 3 },
+        headStyles: { fillColor: [0, 123, 255] },
+        alternateRowStyles: { fillColor: [245, 248, 255] },
+        columnStyles: {
+          0: { cellWidth: 15 },
+          1: { cellWidth: 35 },
+          2: { cellWidth: 35 },
+          3: { cellWidth: 40 },
+          4: { cellWidth: 70 },
+          5: { cellWidth: 70 }
+        }
+      });
+      doc.save("Catatan_Pembelajaran_" + new Date().toISOString().slice(0,10) + ".pdf");
+    }
+    function openTab(evt, tabName) {
+      document.querySelectorAll(".tabcontent").forEach(el => el.classList.remove("active"));
+      document.querySelectorAll(".tablink").forEach(el => el.classList.remove("active"));
+      document.getElementById(tabName).classList.add("active");
+      if (evt) evt.currentTarget.classList.add("active");
+      if (tabName === 'Daftar') {
+        updateDropdowns();
+        tampilkanData();
+      }
+    }
+    // Inisialisasi
+    updateDropdowns();
+    tampilkanData(); // jika langsung buka tab daftar
+  </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/notepad-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes