diff options
Diffstat (limited to 'cockpit.html')
| -rw-r--r-- | cockpit.html | 267 |
1 files changed, 132 insertions, 135 deletions
diff --git a/cockpit.html b/cockpit.html index 072060a..d40bc38 100644 --- a/cockpit.html +++ b/cockpit.html @@ -1,150 +1,147 @@ <!doctype html> <html lang="de"> -<head> - <meta charset="utf-8"> - <title>Cockpit</title> - <link rel="stylesheet" href="cockpit.css"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <script src="./dist/cockpit.js"></script> -</head> -<body> + <head> + <meta charset="utf-8" /> + <title>Cockpit</title> + <link rel="stylesheet" href="cockpit.css" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <script src="./dist/cockpit.js"></script> + </head> + <body> + <div id="student-selection-container" data-availability="if-lehrer"> + <div id="student-selection-search-container"> + <input + type="text" + id="student-selection" + class="student-selection" + placeholder="Vorname Nachname Klasse" + /> + <button id="student-selection-clear" style="display: none">×</button> + <span id="student-selection-loader" style="display: none"></span> + </div> + <ul id="student-selection-list"></ul> + <p id="student-selection-noresults" style="display: none">No results found</p> + </div> -<div id="student-selection-container" data-availability="if-lehrer"> - <div id="student-selection-search-container"> - <input - type="text" - id="student-selection" - class="student-selection" - placeholder="Vorname Nachname Klasse" - /> - <button id="student-selection-clear" style="display: none;">×</button> - <span id="student-selection-loader" style="display: none;"></span> - </div> - <ul id="student-selection-list"> - </ul> - <p id="student-selection-noresults" style="display: none;"> - No results found - </p> -</div> + <div id="student-content" style="display: none"> + <div id="student-info"> + <div id="student-info-top" class="student-info-banner"> + <div id="student-info-icons"> + <img id="student-info-icon" src="assets/user-profile-icon.svg" /> + <img id="student-level-icon" /> + </div> + <div id="student-info-name-container"> + <span id="student-info-name"></span> + <span id="student-info-tag"></span> + </div> + <div id="student-info-coach-container"> + <img id="student-info-coach-icon" /> + <div id="student-info-coach-column"> + Lernbegleiter: + <span id="student-info-coach"></span> + </div> + </div> + </div> -<div id="student-content" style="display: none"> - <div id="student-info"> - <div id="student-info-top" class="student-info-banner"> - <div id="student-info-icons"> - <img id="student-info-icon" src="assets/user-profile-icon.svg" /> - <img id="student-level-icon" /> - </div> - <div id="student-info-name-container"> - <span id="student-info-name"></span> - <span id="student-info-tag"></span> - </div> - <div id="student-info-coach-container"> - <img id="student-info-coach-icon" /> - <div id="student-info-coach-column"> - Lernbegleiter: - <span id="student-info-coach"></span> - </div> - </div> - </div> + <div id="student-observation" class="student-info-banner"></div> - <div id="student-observation" class="student-info-banner"> - </div> + <div id="student-info-mid" class="student-info-banner"> + <div id="student-info-green" class="student-info-mid-element"> + ⚫Grüne Punkte <span class="student-info-points" id="student-info-points-green">0</span> + </div> + <div id="student-info-orange" class="student-info-mid-element"> + ⚫Orangene Punkte + <span class="student-info-points" id="student-info-points-orange">0</span> + </div> + <div id="student-info-red" class="student-info-mid-element"> + ⚫Rote Punkte <span class="student-info-points" id="student-info-points-red">0</span> + </div> + <div id="student-info-level-container" class="student-info-mid-element"> + Graduierungsstatus: + <span id="student-info-level"></span> + </div> + </div> - <div id="student-info-mid" class="student-info-banner"> - <div id="student-info-green" class="student-info-mid-element"> - ⚫Grüne Punkte <span class="student-info-points" id="student-info-points-green">0</span> - </div> - <div id="student-info-orange" class="student-info-mid-element"> - ⚫Orangene Punkte <span class="student-info-points" id="student-info-points-orange">0</span> - </div> - <div id="student-info-red" class="student-info-mid-element"> - ⚫Rote Punkte <span class="student-info-points" id="student-info-points-red">0</span> - </div> - <div id="student-info-level-container" class="student-info-mid-element"> - Graduierungsstatus: - <span id="student-info-level"></span> - </div> - </div> + <div id="student-info-point-reason-container" style="display: none"> + <textarea id="student-info-point-reason" name="reason" rows="5" spellcheck="default"> + </textarea> + <button id="student-info-point-reason-submit">↵</button> + </div> - <div id="student-info-point-reason-container" style="display: none;"> - <textarea id="student-info-point-reason" name="reason" rows="5" spellcheck="default"> - </textarea> - <button id="student-info-point-reason-submit">↵</button> - </div> + <!-- <div id="student-info-bottom" class="student-info-banner"> --> + <!-- <div id="student-info-stickers-container" class="student-info-bottom-element"> --> + <!-- Monstersticker --> + <!-- <div id="student-info-stickers"> --> + <!-- </div> --> + <!-- </div> --> + <!-- <div id="student-info-bonus-container" class="student-info-bottom-element"> --> + <!-- Bonuskarten --> + <!-- <div id="student-info-bonus-row"> --> + <!-- <img /> --> + <!-- <span id="student-info-bonus-amount">0</span> --> + <!-- </div> --> + <!-- </div> --> + <!-- </div> --> + </div> - <!-- <div id="student-info-bottom" class="student-info-banner"> --> - <!-- <div id="student-info-stickers-container" class="student-info-bottom-element"> --> - <!-- Monstersticker --> - <!-- <div id="student-info-stickers"> --> - <!-- </div> --> - <!-- </div> --> - <!-- <div id="student-info-bonus-container" class="student-info-bottom-element"> --> - <!-- Bonuskarten --> - <!-- <div id="student-info-bonus-row"> --> - <!-- <img /> --> - <!-- <span id="student-info-bonus-amount">0</span> --> - <!-- </div> --> - <!-- </div> --> - <!-- </div> --> - </div> + <!-- <details id="progress"> --> + <!-- <summary>Lernfortschritt</summary> --> + <!-- </details> --> - <!-- <details id="progress"> --> - <!-- <summary>Lernfortschritt</summary> --> - <!-- </details> --> - - <!-- <details id="calendar"> --> - <!-- <summary>Kalender</summary> --> - <!-- </details> --> + <!-- <details id="calendar"> --> + <!-- <summary>Kalender</summary> --> + <!-- </details> --> - <details id="graduation" data-availability="if-lehrer"> - <summary>Graduierung</summary> + <details id="graduation" data-availability="if-lehrer"> + <summary>Graduierung</summary> - <details id="graduation-changes-container" class="graduation-dropdown"> - <summary>Übersicht über Grüne, Orangene und Rote Punkte</summary> - <table class="table table-striped"> - <thead> - <tr> - <th>Datum</th> - <th>Grund</th> - <th>Coach</th> - </tr> - </thead> - <tbody id="graduation-changes"> - </tbody> - </table> - </details> + <details id="graduation-changes-container" class="graduation-dropdown"> + <summary>Übersicht über Grüne, Orangene und Rote Punkte</summary> + <table class="table table-striped"> + <thead> + <tr> + <th>Datum</th> + <th>Grund</th> + <th>Coach</th> + </tr> + </thead> + <tbody id="graduation-changes"></tbody> + </table> + </details> - <details id="graduation-current-observation-period-container" class="graduation-dropdown"> - <summary>Aktueller Beobachtungszeitraum</summary> - <table class="table table-striped"> - <thead> - <tr> - <th></th> - <th>Ja</th> - <th>Nein</th> - </tr> - </thead> - <tbody id="graduation-current-observation-period"> - </tbody> - </table> + <details id="graduation-current-observation-period-container" class="graduation-dropdown"> + <summary>Aktueller Beobachtungszeitraum</summary> + <table class="table table-striped"> + <thead> + <tr> + <th></th> + <th>Ja</th> + <th>Nein</th> + </tr> + </thead> + <tbody id="graduation-current-observation-period"></tbody> + </table> - <div id="graduation-current-observation-period-end" style="display:none;"> - <textarea id="graduation-current-observation-period-end-reason" rows="5" spellcheck="default"> - </textarea> - Aktuellen Beobachtungszeitraum abschließen: - <button id="graduation-current-observation-period-end-success">Erfolreich</button> - <button id="graduation-current-observation-period-end-failure">Nicht Erfolreich</button> - </div> - </details> + <div id="graduation-current-observation-period-end" style="display: none"> + <textarea + id="graduation-current-observation-period-end-reason" + rows="5" + spellcheck="default" + > + </textarea> + Aktuellen Beobachtungszeitraum abschließen: + <button id="graduation-current-observation-period-end-success">Erfolreich</button> + <button id="graduation-current-observation-period-end-failure">Nicht Erfolreich</button> + </div> + </details> - <details id="graduation-observation-periods-container" class="graduation-dropdown"> - <summary>Vergangene Beobachtungszeiträume</summary> - <table class="table table-striped"> - <tbody id="graduation-observation-periods"> - </tbody> - </table> - </details> - </details> -</div> -</body> + <details id="graduation-observation-periods-container" class="graduation-dropdown"> + <summary>Vergangene Beobachtungszeiträume</summary> + <table class="table table-striped"> + <tbody id="graduation-observation-periods"></tbody> + </table> + </details> + </details> + </div> + </body> </html> |