PatternLab/project.html at main · smxy1/PatternLab · 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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <!-- UTF-8 erlaubt deutsche Umlaute wie ä, ö, ü und ß im Dokument. -->
  <!-- Viewport sorgt dafür, dass die Seite auf mobilen Geräten richtig skaliert. -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Projekt-Detailansicht mit PDF-Anleitung, Checkliste, Notizen und Maschenzähler für Häkel- und Strickprojekte">
  <title>Projekt - PatternLab</title>
  <link rel="icon" type="image/png" href="design/logo.png">
  <!-- Open Sans wird als zentrale Schriftart der Anwendung geladen. -->
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- Gemeinsamer Layout-Container für Sidebar und Hauptbereich. -->
  <div class="container">

    <!-- ============================================================
         SIDEBAR: Navigation
         ============================================================ -->
    <aside class="sidebar">
      <!-- App-Name in der Sidebar. -->
      <div class="sidebar-header">
        <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="main-navigation" aria-label="Navigation öffnen">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <div class="sidebar-brand">
          <img class="sidebar-logo" src="design/logo.png" alt="PatternLab Logo">
          <span class="app-title">PatternLab</span>
        </div>
      </div>

      <!-- Hauptnavigation zwischen Dashboard und Projektformular. -->
      <div class="sidebar-menu-panel">
        <nav id="main-navigation">
          <ul>
            <li><a href="index.html">Dashboard</a></li>
            <li><a href="faq.html">FAQ</a></li>
            <li><a href="new-project.html">Neues Projekt</a></li>
          </ul>
        </nav>

        <!-- Schaltflächen für Kontrastmodus und Schriftgröße.
             Beide Buttons wirken seitenübergreifend, weil JavaScript Klassen am body-Element setzt. -->
        <div class="accessibility-controls">
          <button class="contrast-toggle" type="button" aria-pressed="false" aria-label="Kontrast erhöhen"></button>
          <button class="text-size-toggle" type="button" aria-label="Schriftgröße erhöhen, aktuell 100 Prozent">A</button>
        </div>

        <!-- Link zum Impressum. -->
        <footer>
          <a href="imprint.html">Impressum</a>
        </footer>
      </div>
    </aside>

    <!-- ============================================================
         HAUPTBEREICH: Projektansicht
         ============================================================ -->
    <main class="main-content">
      <!-- JavaScript füllt Titel, Kategorie und Fortschritt des geöffneten Projekts. -->
      <header class="project-header" id="project-header">
        <h1 id="project-title" aria-label="Projekttitel wird von JavaScript geladen">Projekt wird geladen...</h1>
        <div class="project-meta" id="project-meta">
          <p><strong>Kategorie:</strong> <span id="project-category"></span></p>
          <p><strong>Fortschritt:</strong> <span class="progress-value" id="project-progress"></span></p>
        </div>
      </header>

      <!-- Zweispaltiger Bereich: PDF links, interaktive Projektdaten rechts. -->
      <div class="project-content">

        <!-- ============================================================
             SPALTE 1: PDF-Anleitung
             ============================================================ -->
        <section class="pdf-section">
          <h2>Anleitung</h2>
          <div class="pdf-placeholder">
            <!-- JavaScript setzt hier den gespeicherten PDF-Link ein.
                 embed zeigt die PDF direkt in der Seite an, wenn der Browser sie laden kann. -->
            <embed id="project-pdf-viewer" type="application/pdf" width="100" height="600">
            <p id="project-pdf-message" hidden>Die PDF-Datei konnte nicht geladen werden. Bitte überprüfe den Link.</p>
          </div>
        </section>

        <!-- ============================================================
             SPALTE 2: Interaktive Projektdaten
             ============================================================ -->
        <div class="interactive-content">

          <!-- Checkliste wird pro Projekt aus dem LocalStorage geladen. -->
          <section class="checklist-section">
            <h2>Checkliste</h2>
            <ol class="checklist" id="checklist-container">
              <!-- Checklistenpunkte werden hier von JavaScript eingefügt.
                   Jeder Punkt besteht später aus Checkbox und Textfeld. -->
            </ol>
            <button class="btn-secondary add-checklist-item">+ Punkt hinzufügen</button>
            <button class="btn-secondary delete-last-checklist-item">Letzten Punkt löschen</button>
          </section>

          <!-- Freitextnotizen zum geöffneten Projekt. -->
          <section class="notes-section">
            <h2 id="notes-heading">Notizen</h2>
            <textarea id="project-notes" class="notes" aria-labelledby="notes-heading" placeholder="Mach dir hier Notizen zu deinem Projekt..."></textarea>
          </section>

          <!-- JavaScript zeigt hier Beschreibung, Material und Nadelstärke an. -->
          <section class="project-data-section">
            <h2>Projektdaten</h2>
            <dl id="project-data-container">
              <!-- Projektdaten werden hier von JavaScript eingefügt.
                   dl steht für eine Begriff-Wert-Liste: dt ist der Begriff, dd der Wert. -->
            </dl>
          </section>

          <!-- Maschenzähler für den aktuellen Projektstand. -->
          <section class="counter-section">
            <h2>Maschenzähler</h2>
            <div class="counter-display">
              <p>Masche: <strong id="counter-value">0</strong></p>
            </div>
            <div class="counter-buttons">
              <button class="btn-secondary counter-btn stitch-counter-btn" value="-1">−1</button>
              <button class="btn-secondary counter-btn stitch-counter-btn" value="+1">+1</button>
              <button class="btn-secondary counter-btn stitch-counter-btn" value="+10">+10</button>
              <button class="btn-secondary counter-btn stitch-counter-btn" value="+15">+15</button>
              <button class="btn-secondary counter-btn stitch-counter-btn" value="reset">Reset</button>
            </div>
          </section>

          <!-- Reihenzähler funktioniert wie der Maschenzähler, speichert aber einen eigenen Wert. -->
          <section class="counter-section">
            <h2>Reihenzähler</h2>
            <div class="counter-display">
              <p>Reihe: <strong id="row-counter-value">0</strong></p>
            </div>
            <div class="counter-buttons">
              <button class="btn-secondary counter-btn row-counter-btn" value="-1">−1</button>
              <button class="btn-secondary counter-btn row-counter-btn" value="+1">+1</button>
              <button class="btn-secondary counter-btn row-counter-btn" value="+10">+10</button>
              <button class="btn-secondary counter-btn row-counter-btn" value="+15">+15</button>
              <button class="btn-secondary counter-btn row-counter-btn" value="reset">Reset</button>
            </div>
          </section>

        </div>

      </div>

      <!-- Aktionen für Navigation, Bearbeiten und Löschen des geöffneten Projekts. -->
      <div class="project-footer">
        <div class="project-footer-actions">
          <a id="edit-project-link" class="btn-secondary edit-project-link" href="#">Projekt bearbeiten</a>
          <button type="button" id="delete-project-button" class="btn-secondary delete-project-button">Projekt löschen</button>
        </div>
        <a href="index.html">← Zurück zum Dashboard</a>
      </div>
    </main>
  </div>

  <!-- Gemeinsame JavaScript-Datei für Dashboard, Formular und Projektansicht. -->
  <script src="js/app.js"></script>
</body>
</html>