66 lines
2.2 KiB
PHP
66 lines
2.2 KiB
PHP
<?php
|
||
$app = app();
|
||
$app->assets()->addStyle('/assets/app.css', 'early');
|
||
$app->assets()->addScript('/assets/app.js', 'footer', true);
|
||
?>
|
||
|
||
<section class="mm-shell">
|
||
<header class="mm-header">
|
||
<div>
|
||
<p class="mm-kicker">Materialmatrix</p>
|
||
<h1 class="mm-title"><?= htmlspecialchars(t('common.title'), ENT_QUOTES) ?></h1>
|
||
<p class="mm-subtitle">Schnell prüfen, welche Filamente auf welchen Druckern laufen.</p>
|
||
</div>
|
||
<div class="mm-status" id="status">Bereit</div>
|
||
</header>
|
||
|
||
<div class="mm-card">
|
||
<aside class="mm-sidebar mm-sidebar--top">
|
||
<div class="mm-panel">
|
||
<h2>Drucker auswählen</h2>
|
||
<label for="printerSelect">Einzelansicht</label>
|
||
<select id="printerSelect">
|
||
<option value="">– wird geladen –</option>
|
||
</select>
|
||
<p>Zeigt die Kompatibilität nur für diesen Drucker.</p>
|
||
</div>
|
||
|
||
<div class="mm-panel">
|
||
<label for="printerCompare">Vergleich (mehrere)</label>
|
||
<select id="printerCompare" multiple></select>
|
||
<p>Strg/⌘ gedrückt halten, um mehrere zu wählen.</p>
|
||
</div>
|
||
|
||
<div class="mm-tip">
|
||
Tipp: Im Vergleich werden die ausgewählten Drucker rechts als separate Spalten hervorgehoben.
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="mm-main">
|
||
<div class="mm-table-wrap" id="tableWrap">
|
||
<table id="matTable" class="mm-table">
|
||
<thead>
|
||
<tr id="tableHead">
|
||
<th>Material</th>
|
||
<th>Eigenschaften</th>
|
||
<th>Anwendung</th>
|
||
<th>Kinder <span aria-hidden="true">👶</span></th>
|
||
<th>Emission <span aria-hidden="true">🌫️</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="matBody"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="errorBox" class="mm-error" hidden></div>
|
||
|
||
<section class="mm-disclaimer">
|
||
<p><strong>Hinweis:</strong> Dieses Projekt wird privat betrieben und befindet sich im Aufbau.
|
||
Es sind noch nicht alle Drucker und Materialien eingetragen.
|
||
Alle Angaben erfolgen nach bestem Wissen, jedoch <u>ohne Gewähr auf Vollständigkeit oder Richtigkeit</u>.
|
||
</p>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</section>
|