85 lines
2.9 KiB
HTML
85 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>VS3D-Vis</title>
|
|
<link rel="stylesheet" href="out/theme/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="loading-screen">
|
|
<loader></loader>
|
|
<loader class="delay"></loader>
|
|
<span>Loading</span>
|
|
</div>
|
|
<div class="top-menu-left">
|
|
<div class="settings-icon menu-icon">
|
|
<svg role="img" class="icon">
|
|
<use href="out/icon-sprite.svg#fal-fa-cogs"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="upload menu-icon">
|
|
<label for="upload">
|
|
<svg role="img" class="icon">
|
|
<use href="out/icon-sprite.svg#fal-fa-file-audio"></use>
|
|
</svg>
|
|
</label>
|
|
<input type="file" multiple accept="audio/*" id="upload">
|
|
</div>
|
|
<div class="upload menu-icon">
|
|
<label for="upload-dir">
|
|
<svg role="img" class="icon">
|
|
<use href="out/icon-sprite.svg#fal-fa-folder-upload"></use>
|
|
</svg>
|
|
</label>
|
|
<input type="file" multiple directory webkitdirectory accept="audio/*" id="upload-dir">
|
|
</div>
|
|
<div class="playlist menu-icon">
|
|
<svg role="img" class="icon">
|
|
<use href="out/icon-sprite.svg#fal-fa-list-music"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="controls">
|
|
<button id="previous">
|
|
<svg role="img" class="icon">
|
|
<use href="out/icon-sprite.svg#fal-fa-caret-left"></use>
|
|
</svg>
|
|
</button>
|
|
<button id="play">
|
|
<svg role="img" data-name="pause" class="pause icon hide">
|
|
<use href="out/icon-sprite.svg#fal-fa-pause"></use>
|
|
</svg>
|
|
<svg role="img" data-name="play" class="icon">
|
|
<use href="out/icon-sprite.svg#fal-fa-play"></use>
|
|
</svg>
|
|
</button>
|
|
<button id="next">
|
|
<svg role="img" class="icon">
|
|
<use href="out/icon-sprite.svg#fal-fa-caret-right"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<canvas id="c"></canvas>
|
|
<div class="grey-screen hide">
|
|
<div id="modal">
|
|
<header>
|
|
<span class="headline">Playlist</span>
|
|
<span class="close">X</span>
|
|
</header>
|
|
<modal-content>
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
|
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
|
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
</modal-content>
|
|
<modal-footer>
|
|
|
|
</modal-footer>
|
|
</div>
|
|
</div>
|
|
<script src="out/js/scripts.min.js"></script>
|
|
</body>
|
|
</html>
|