audio-vis/index.html

95 lines
3.3 KiB
HTML
Raw Normal View History

2020-04-05 15:28:22 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
2020-08-01 21:51:54 +02:00
<title>VS3D-Vis</title>
2020-04-07 21:44:46 +02:00
<link rel="stylesheet" href="out/theme/style.css">
2020-04-05 15:28:22 +02:00
</head>
<body>
2020-04-07 21:44:46 +02:00
<div class="loading-screen">
<loader></loader>
<loader class="delay"></loader>
<span>Loading</span>
2020-04-05 15:28:22 +02:00
</div>
2020-08-06 23:44:37 +02:00
<div class="menus">
<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-image menu-icon">
2020-04-07 21:44:46 +02:00
<svg role="img" class="icon">
2020-08-06 23:44:37 +02:00
<use href="out/icon-sprite.svg#fal-fa-file-image"></use>
2020-04-07 21:44:46 +02:00
</svg>
2020-08-06 23:44:37 +02:00
</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>
2020-04-07 21:44:46 +02:00
</div>
2020-08-06 23:44:37 +02:00
<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>
<button id="shuffle">
<svg role="img" class="icon">
<use href="out/icon-sprite.svg#fal-fa-random"></use>
</svg>
</button>
2020-04-07 21:44:46 +02:00
</div>
</div>
<canvas id="c"></canvas>
2020-08-06 23:44:37 +02:00
<canvas id="cInfo"></canvas>
2020-08-01 21:51:54 +02:00
<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>
2020-08-06 23:44:37 +02:00
<div class="inner">
2020-08-01 21:51:54 +02:00
2020-08-06 23:44:37 +02:00
</div>
2020-08-01 21:51:54 +02:00
</modal-footer>
</div>
</div>
<div class="notification">
2020-08-06 23:44:37 +02:00
2020-08-01 21:51:54 +02:00
</div>
2020-08-06 23:44:37 +02:00
<script src="out/js/scripts.min.js?v=1"></script>
2020-04-05 15:28:22 +02:00
</body>
</html>