eDnevnik bilješke

Learning Commons – e-Dnevnik Generator Bilježaka (Autorica: Biljana Grbeša)

<!-- Zaglavlje s autorskim potpisom -->
<header class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col md:flex-row md:items-center md:justify-between gap-4">
  <div>
    <div class="flex flex-wrap items-center gap-2 mb-1.5">
      <span class="bg-indigo-600 text-white text-xs font-bold px-2.5 py-0.5 rounded-full uppercase tracking-wider">MZO Kurikulum (NN 7/2019)</span>
      <span class="bg-emerald-100 text-emerald-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Pravilnik NN 82/2019</span>
      <span class="bg-indigo-50 text-indigo-700 text-xs font-semibold px-2.5 py-0.5 rounded-full border border-indigo-100">Autorica: Biljana Grbeša</span>
    </div>
    <h1 class="text-2xl md:text-3xl font-bold text-slate-900 tracking-tight">e-Dnevnik Kurikularni Generator Bilježaka</h1>
    <p class="text-sm text-slate-500 mt-1">Usklađeni opisivači i kriteriji vrednovanja: EJ (1. – 8. razred) & NJ (4. – 8. razred).</p>
  </div>
  <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
    <div class="text-xs text-slate-500 bg-slate-50 border border-slate-200 p-3 rounded-xl max-w-xs no-select">
      <strong>Ljestvica pisanih provjera:</strong><br>
      50–62% (2) | 63–79% (3) | 80–89% (4) | 90–100% (5)
    </div>
    <button onclick="openBugReportModal()" class="flex items-center gap-1.5 bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 font-semibold py-2.5 px-3.5 rounded-xl text-xs transition shadow-sm cursor-pointer self-stretch sm:self-center justify-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
      Prijavi grešku
    </button>
  </div>
</header>

<!-- Kontrolna traka -->
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
    <!-- Predmet -->
    <div>
      <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-1.5">Nastavni predmet</label>
      <div class="grid grid-cols-2 gap-1.5">
        <button type="button" onclick="setSubject('EJ')" id="btnSubEJ" class="w-full py-2 px-2 text-xs font-semibold rounded-xl border transition text-center shadow-sm">
          Engleski (1.)
        </button>
        <button type="button" onclick="setSubject('NJ')" id="btnSubNJ" class="w-full py-2 px-2 text-xs font-semibold rounded-xl border transition text-center">
          Njemački (2.)
        </button>
      </div>
    </div>

    <!-- Razred -->
    <div>
      <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-1.5">Razred</label>
      <div class="grid grid-cols-8 gap-1" id="gradeSelector">
        <button type="button" onclick="setGrade(1)" class="grade-btn py-2 text-xs font-semibold rounded-xl border transition text-center" data-grade="1">1.</button>
        <button type="button" onclick="setGrade(2)" class="grade-btn py-2 text-xs font-semibold rounded-xl border transition text-center" data-grade="2">2.</button>
        <button type="button" onclick="setGrade(3)" class="grade-btn py-2 text-xs font-semibold rounded-xl border transition text-center" data-grade="3">3.</button>
        <button type="button" onclick="setGrade(4)" class="grade-btn py-2 text-xs font-semibold rounded-xl border transition text-center" data-grade="4">4.</button>
        <button type="button" onclick="setGrade(5)" class="grade-btn py-2 text-xs font-semibold rounded-xl border transition text-center" data-grade="5">5.</button>
        <button type="button" onclick="setGrade(6)" class="grade-btn py-2 text-xs font-semibold rounded-xl border transition text-center" data-grade="6">6.</button>
        <button type="button" onclick="setGrade(7)" class="grade-btn py-2 text-xs font-semibold rounded-xl border transition text-center" data-grade="7">7.</button>
        <button type="button" onclick="setGrade(8)" class="grade-btn py-2 text-xs font-semibold rounded-xl border transition text-center" data-grade="8">8.</button>
      </div>
    </div>

    <!-- Cjelina -->
    <div>
      <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-1.5">Cjelina / Unit</label>
      <select id="unitFilter" onchange="onUnitChange()" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2 text-xs md:text-sm font-medium focus:ring-2 focus:ring-indigo-500 focus:bg-white outline-none transition">
      </select>
    </div>

    <!-- Podtema -->
    <div>
      <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-1.5">Podtema / Lekcija</label>
      <select id="subthemeFilter" onchange="onSubthemeChange()" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2 text-xs md:text-sm font-medium focus:ring-2 focus:ring-indigo-500 focus:bg-white outline-none transition">
      </select>
    </div>

    <!-- Djelatnost -->
    <div>
      <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-1.5">Djelatnost (e-Dnevnik)</label>
      <select id="skillFilter" onchange="onSkillChange()" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2 text-xs md:text-sm font-medium focus:ring-2 focus:ring-indigo-500 focus:bg-white outline-none transition">
      </select>
    </div>
  </div>
</div>

<!-- Dvije sekcije s pločicama: Ishodi i Načini vrednovanja -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
  <!-- Pločice za ishode -->
  <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-3">
    <div class="flex items-center justify-between">
      <label class="block text-xs font-bold uppercase tracking-wider text-slate-500">1. Kurikularni ishodi (Višestruki odabir)</label>
      <span class="text-xs text-indigo-600 font-semibold">Domene A, B, C</span>
    </div>
    <div id="outcomeTilesContainer" class="grid grid-cols-1 gap-2 max-h-56 overflow-y-auto p-1 border border-slate-100 rounded-xl bg-slate-50">
    </div>
  </div>

  <!-- Pločice za načine vrednovanja -->
  <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-3">
    <div class="flex items-center justify-between">
      <label class="block text-xs font-bold uppercase tracking-wider text-slate-500">2. Načini / Metode provjere (Višestruki odabir)</label>
      <span class="text-xs text-indigo-600 font-semibold">Metode provjere</span>
    </div>
    <div id="methodsTilesContainer" class="grid grid-cols-1 gap-2 max-h-56 overflow-y-auto p-1 border border-slate-100 rounded-xl bg-slate-50">
    </div>
  </div>
</div>

<!-- Prikaz kurikularnog ishoda i građe -->
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
  <div class="flex flex-wrap items-center gap-2">
    <span id="badgeOutcome" class="bg-indigo-100 text-indigo-800 text-xs font-bold px-3 py-1 rounded-lg">Odabrani ishodi</span>
    <span id="badgeCefr" class="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-lg"></span>
    <span id="badgeSkillType" class="bg-slate-100 text-slate-700 text-xs font-medium px-3 py-1 rounded-lg"></span>
    <span id="badgeSourceUnit" class="bg-amber-100 text-amber-900 text-xs font-medium px-3 py-1 rounded-lg"></span>
  </div>

  <div>
    <h2 id="outcomeTitle" class="text-base md:text-lg font-semibold text-slate-900 leading-snug"></h2>
    <p class="text-xs text-slate-400 mt-0.5">Službeni kurikularni ishodi i odabrani načini vrednovanja</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-3 pt-1">
    <div class="p-3.5 bg-slate-50 rounded-xl border border-slate-200 space-y-1">
      <div class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Integrirani jezični sadržaj & mikrovještina</div>
      <div id="microSkillDesc" class="text-xs md:text-sm text-slate-800 font-medium"></div>
    </div>
    <div class="p-3.5 bg-slate-50 rounded-xl border border-slate-200 space-y-1">
      <div class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Odabrani načini provjere</div>
      <div id="criteriaFocusDesc" class="text-xs md:text-sm text-indigo-900 font-medium"></div>
    </div>
  </div>
</div>

<!-- Odabir ocjene klikom (1 do 5) -->
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
  <div class="flex items-center justify-between">
    <label class="block text-xs font-bold uppercase tracking-wider text-slate-500">Razina ostvarenosti / Ocjena (klikni za odabir)</label>
    <span class="text-xs text-slate-400 font-medium">Odaberite ocjenu (1 do 5)</span>
  </div>

  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3" id="gradeButtons">
    <button onclick="selectGrade(1)" class="score-card p-3.5 rounded-xl border text-left transition relative cursor-pointer" data-score="1">
      <div class="font-bold text-sm text-slate-800">Nedovoljan (1)</div>
      <div class="text-[11px] text-slate-500">0–49%</div>
      <div class="text-[11px] font-semibold text-rose-700 mt-1">Potrebna podrška</div>
    </button>
    <button onclick="selectGrade(2)" class="score-card p-3.5 rounded-xl border text-left transition relative cursor-pointer" data-score="2">
      <div class="font-bold text-sm text-slate-800">Dovoljan (2)</div>
      <div class="text-[11px] text-slate-500">Prag 50–62%</div>
      <div class="text-[11px] font-semibold text-amber-700 mt-1">Zadovoljavajuće</div>
    </button>
    <button onclick="selectGrade(3)" class="score-card p-3.5 rounded-xl border text-left transition relative cursor-pointer" data-score="3">
      <div class="font-bold text-sm text-slate-800">Dobar (3)</div>
      <div class="text-[11px] text-slate-500">Prag 63–79%</div>
      <div class="text-[11px] font-semibold text-blue-700 mt-1">Temeljna razina</div>
    </button>
    <button onclick="selectGrade(4)" class="score-card p-3.5 rounded-xl border text-left transition relative cursor-pointer" data-score="4">
      <div class="font-bold text-sm text-slate-800">Vrlo dobar (4)</div>
      <div class="text-[11px] text-slate-500">Prag 80–89%</div>
      <div class="text-[11px] font-semibold text-emerald-700 mt-1">Uspješno</div>
    </button>
    <button onclick="selectGrade(5)" class="score-card p-3.5 rounded-xl border text-left transition relative cursor-pointer" data-score="5">
      <div class="font-bold text-sm text-slate-800">Odličan (5)</div>
      <div class="text-[11px] text-slate-500">Prag 90–100%</div>
      <div class="text-[11px] font-semibold text-purple-700 mt-1">Iznimno postignuće</div>
    </button>
  </div>

  <div class="p-3.5 bg-amber-50/70 rounded-xl border border-amber-200/80 text-xs md:text-sm text-amber-900 leading-relaxed">
    <strong class="font-semibold text-amber-950">Opisivač postignuća učenika/ce:</strong>
    <span id="behaviorText" class="ml-1"></span>
  </div>
</div>

<!-- Generirane bilješke za e-Dnevnik -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
  <!-- Formativno (Bilješke) -->
  <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between space-y-4">
    <div>
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-bold uppercase tracking-wider text-slate-600 flex items-center gap-1.5">
          <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
          Rubrika „Bilješke” (Formativno)
        </span>
        <span class="text-[11px] text-slate-400">Pravilnik NN 82/2019</span>
      </div>
      <div id="formativeNote" class="p-3.5 bg-slate-50 border border-slate-200 rounded-xl text-xs md:text-sm text-slate-800 leading-relaxed min-h-[160px] whitespace-pre-line font-mono text-[12px]"></div>
    </div>
    <button onclick="copyContent('formativeNote', this)" class="w-full bg-slate-900 hover:bg-slate-800 text-white font-medium py-2.5 px-4 rounded-xl text-xs md:text-sm transition">
      Kopiraj u Bilješke
    </button>
  </div>

  <!-- Sumativno (Ocjena + Opcionalni unos bodova) -->
  <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between space-y-4">
    <div class="space-y-3">
      <div class="flex items-center justify-between">
        <span class="text-xs font-bold uppercase tracking-wider text-slate-600 flex items-center gap-1.5">
          <span class="w-2 h-2 rounded-full bg-indigo-600"></span>
          Rubrika Ocjene (Sumativno)
        </span>
        <span class="text-[11px] text-slate-400">Vrednovanje naučenog</span>
      </div>

      <!-- Opcionalni redak za unos bodova -->
      <div class="grid grid-cols-2 gap-2 bg-indigo-50/50 p-2.5 rounded-xl border border-indigo-100 text-xs">
        <div>
          <label class="block font-bold text-indigo-900 mb-1">Osvojeni bodovi (opcionalno):</label>
          <input type="number" id="earnedPoints" value="" placeholder="npr. 18" min="0" oninput="onPointsInput()" class="w-full bg-white border border-indigo-300 rounded-lg p-1.5 text-center font-bold text-sm outline-none focus:ring-2 focus:ring-indigo-500">
        </div>
        <div>
          <label class="block font-bold text-indigo-900 mb-1">Ukupno bodova:</label>
          <input type="number" id="maxPoints" value="" placeholder="npr. 20" min="1" oninput="onPointsInput()" class="w-full bg-white border border-indigo-300 rounded-lg p-1.5 text-center font-bold text-sm outline-none focus:ring-2 focus:ring-indigo-500">
        </div>
      </div>

      <div id="summativeNote" class="p-3.5 bg-slate-50 border border-slate-200 rounded-xl text-xs md:text-sm text-slate-800 leading-relaxed min-h-[120px] whitespace-pre-line font-mono text-[12px]"></div>
    </div>
    <button onclick="copyContent('summativeNote', this)" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2.5 px-4 rounded-xl text-xs md:text-sm transition">
      Kopiraj za Rubriku Ocjene
    </button>
  </div>
</div>

© 2026. Biljana Grbeša. Sva prava pridržana.

e-Dnevnik Kurikularni Generator Bilježaka • Izrađeno za potrebe stručne nastave stranih jezika

Prijava greške ili prijedloga

✕

  <div class="bg-slate-50 p-3 rounded-xl border border-slate-200 space-y-1.5 text-xs text-slate-700">
    <div class="font-bold text-slate-900 uppercase text-[10px] tracking-wider mb-1">Automatski očitani kontekst:</div>
    <div class="grid grid-cols-2 gap-1">
      <div><span class="text-slate-400">Predmet:</span> <strong id="bugCtxSubject"></strong></div>
      <div><span class="text-slate-400">Razred:</span> <strong id="bugCtxGrade"></strong></div>
      <div><span class="text-slate-400">Djelatnost:</span> <strong id="bugCtxSkill"></strong></div>
      <div><span class="text-slate-400">Cjelina:</span> <strong id="bugCtxUnit" class="truncate block"></strong></div>
    </div>
    <div><span class="text-slate-400">Lekcija:</span> <span id="bugCtxSubtheme"></span></div>
    <div><span class="text-slate-400">Ishodi:</span> <span id="bugCtxOutcomes"></span></div>
    <div><span class="text-slate-400">Metode:</span> <span id="bugCtxMethods"></span></div>
  </div>

  <div class="space-y-1">
    <label class="block text-xs font-bold text-slate-700">Opis uočene greške ili ispravka:</label>
    <textarea id="bugUserComment" rows="3" placeholder="Ovdje ukratko opišite što nedostaje ili što treba ispraviti..." class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2.5 text-xs focus:ring-2 focus:ring-indigo-500 focus:bg-white outline-none"></textarea>
  </div>

  <div class="space-y-2">
    <label class="block text-xs font-bold text-slate-700">Screenshot (opcionalno - prenesi datoteku ili zalijepi s Ctrl+V):</label>
    <div id="pasteArea" class="border-2 border-dashed border-slate-300 rounded-xl p-3 text-center bg-slate-50/50 hover:bg-slate-50 transition cursor-pointer">
      <input type="file" id="bugImageInput" accept="image/*" onchange="onBugImageFileSelected(this)" class="hidden">
      <label for="bugImageInput" class="cursor-pointer text-xs text-indigo-600 font-semibold block">
        Klikni za odabir slike sa računala
      </label>
      <span class="text-[11px] text-slate-400">ili klikni ovdje pa zalijepi screenshot tipkama <strong>Ctrl + V</strong></span>
      <div id="screenshotPreviewContainer" class="mt-2 hidden">
        <img id="screenshotPreview" src="" alt="Screenshot pregled" class="max-h-36 mx-auto rounded-lg border border-slate-300 shadow-xs">
        <button onclick="removeAttachedScreenshot(event)" class="mt-1 text-[11px] text-rose-600 hover:underline">Ukloni sliku</button>
      </div>
    </div>
  </div>

  <div class="flex flex-col sm:flex-row items-center gap-2 pt-2 border-t border-slate-100">
    <button onclick="copyBugReportToClipboard(this)" class="w-full sm:w-1/2 bg-slate-900 hover:bg-slate-800 text-white font-medium py-2.5 px-3 rounded-xl text-xs transition">
      Kopiraj tekst prijave
    </button>
    <button onclick="sendBugReportEmail()" class="w-full sm:w-1/2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2.5 px-3 rounded-xl text-xs transition">
      Pošalji e-mailom
    </button>
  </div>
</div>