2023-01-13 00:25:05 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>LED Cube</title>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
2023-01-19 00:03:33 +01:00
|
|
|
<link rel="shortcut icon" type="application/svg+xml" href="graphics/app-icon.svg">
|
2023-01-13 00:25:05 +01:00
|
|
|
<script defer type="text/javascript" src="index.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2023-01-14 00:04:38 +01:00
|
|
|
<div id="header-menu">
|
|
|
|
|
<div id="color-selector" class="selector">
|
|
|
|
|
<div class="selector-title">LED-Farbe</div>
|
|
|
|
|
<div class="selector-display">Weiß</div>
|
|
|
|
|
<div class="selector-items">
|
|
|
|
|
<div class="selector-item">Weiß</div>
|
|
|
|
|
<div class="selector-item">Rot</div>
|
|
|
|
|
<div class="selector-item">Grün</div>
|
|
|
|
|
<div class="selector-item">Blau</div>
|
2023-01-13 00:25:05 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-01-14 00:04:38 +01:00
|
|
|
|
|
|
|
|
<div id="cube-window">
|
|
|
|
|
<div id="cube"></div>
|
|
|
|
|
</div>
|
2023-01-13 00:25:05 +01:00
|
|
|
|
|
|
|
|
<div id="animation-window">
|
|
|
|
|
<div id="frame-menu">
|
2023-01-14 00:04:38 +01:00
|
|
|
<button class="icon-button icon-button-play" id="button-toggle-animation" title="Animation abspielen" disabled></button>
|
|
|
|
|
|
|
|
|
|
<button id="button-add-frame-before" title="Frame davor hinzufügen">+</button>
|
2023-01-13 00:25:05 +01:00
|
|
|
|
|
|
|
|
<div id="frame-bar">
|
|
|
|
|
<div id="frame-display">Frame: <span id="current-frame">1</span>/<span id="frame-number">1</span></div>
|
|
|
|
|
<input id="frame-slider" type="range" step="1" min="1" max="1" value="1">
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-01-14 00:04:38 +01:00
|
|
|
<input type="number" id="frame-duration" class="suffix suffix-ms" min="1" step="1" max="65355" value="100" title="Frame-Dauer (ms)">
|
2023-01-13 00:25:05 +01:00
|
|
|
|
2023-01-19 00:03:33 +01:00
|
|
|
<div id="duration-scale">
|
|
|
|
|
<button id="button-scale-duration" class="icon-button icon-button-timer" title="Framedauer global ändern"></button>
|
|
|
|
|
<div id="global-duration-popup" class="submenu-popup">
|
|
|
|
|
<div class="value-slider">
|
|
|
|
|
<input id="global-duration-slider" style="flex-grow: 1" type="range" min="1" max="1000" step="1" value="100">
|
|
|
|
|
<span class="container-slider-value"><span id="global-duration-value" class="slider-value">100</span>%</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="menu-fullscreen-button-line">
|
|
|
|
|
<button id="button-change-global-duration">Anpassen</button>
|
|
|
|
|
<button id="button-close-menu">Abbrechen</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-01-14 00:04:38 +01:00
|
|
|
<button id="button-add-frame-after" title="Frame danach hinzufügen">+</button>
|
2023-01-17 23:13:34 +01:00
|
|
|
<button id="button-delete-frame" class="icon-button icon-button-delete" title="Frame löschen" disabled></button>
|
2023-01-13 00:25:05 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
