rottavera/study.html at main · moorada/rottavera · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schede di studio – Patente nautica</title>
<link rel="stylesheet" href="style.css">
</head>
<body data-tab="study">

<header class="site-header">
  <a class="back-link" href="index.html">← Indice</a>
  <h1>Schede di studio</h1>
  <label class="reveal-label">
    <input type="checkbox" id="reveal-toggle">
    <span class="toggle-track"><span class="toggle-thumb"></span></span>
    Risposte visibili
  </label>
  <div class="cf-bar" id="cf-bar">
    <span class="cf-lbl">Mostra:</span>
    <button class="cf-btn active" data-cf="green"  title="Corrette">🟢</button>
    <button class="cf-btn active" data-cf="red"    title="Errate">🔴</button>
    <button class="cf-btn active" data-cf="yellow" title="Difficoltà media">🟡</button>
    <button class="cf-btn active" data-cf="white"  title="Non risposte">⬜</button>
    <button class="cf-all" id="cf-all">Tutte</button>
    <button class="cf-none" id="cf-none">Nessuna</button>
  </div>
</header>

<div class="layout">
  <main class="study-area" id="study-area">
    <p style="padding:32px;color:#888">Caricamento...</p>
  </main>

  <div class="resize-handle" id="resize-handle"></div>

  <aside class="quiz-panel" id="quiz-panel">
    <div class="panel-header">
      <span class="panel-title" id="panel-title">Quiz</span>
      <button class="panel-close" id="panel-close" title="Chiudi">✕</button>
    </div>
    <div class="panel-body" id="panel-body">
      <p class="no-quiz">Scorri le schede per vedere i quiz correlati.</p>
    </div>
  </aside>
</div>

<button class="panel-open-btn" id="panel-open">📝 Quiz</button>
<div class="fig-overlay" id="fig-overlay"><img id="fig-overlay-img" src="" alt=""></div>

<nav class="tab-bar" id="tab-bar">
  <button class="tab-btn active" data-tab="study">📖 Studia</button>
  <button class="tab-btn" data-tab="quiz">📝 Quiz</button>
</nav>

<script src="quiz.js"></script>
</body>
</html>