104 lines
4.2 KiB
HTML
104 lines
4.2 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Vocard Dashboard</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
|
|
integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdn.socket.io/4.6.0/socket.io.min.js"
|
|
integrity="sha384-c79GN5VsunZvi+Q/WObgk2in0CbZsHnjEqvFxC5DxHn9lTfNce2WW6h2pH6u/kF+"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
|
|
|
|
<script type="text/javascript" src="{{ url_for('static', filename='js/socket.js') }}"></script>
|
|
<script type="text/javascript" src="{{ url_for('static', filename='js/action.js') }}"></script>
|
|
<script type="text/javascript" src="{{ url_for('static', filename='js/objects.js') }}"></script>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
|
|
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
|
|
</head>
|
|
|
|
<body>
|
|
<script> const userId = "{{ user.id }}"</script>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="left">
|
|
<p>Home</p>
|
|
<p>Playlist</p>
|
|
</div>
|
|
<div class="center">
|
|
<div class="search-contrainer">
|
|
<div class="search-bar">
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
<input id="search-input" class="search-input" placeholder="Search your input and add it to the queue."/>
|
|
<div id="search-loader" class="search-loader"></div>
|
|
</div>
|
|
<ul id="search-result-list" class="search-result-list">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="dropdown-container">
|
|
<div class="account">
|
|
<img src="{{ user.avatar.url }}" />
|
|
<p>{{ user.username }}</p>
|
|
</div>
|
|
<ul>
|
|
<a class="dropdown-item" href="logout">
|
|
<li><i class="fa-solid fa-right-from-bracket"></i> Log Out</li>
|
|
</a>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<div class="toastContrainer"></div>
|
|
<div class="thumbnail">
|
|
<img id="largeImage" />
|
|
</div>
|
|
<div class="queue-list">
|
|
<ul id="sortable">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="player-controller">
|
|
<div class="progress-bar-container">
|
|
<input type="range" value="0" min="0" max="500" class="seek-bar" id="seek-bar">
|
|
</div>
|
|
<div class="control-container">
|
|
<div class="left">
|
|
<div class="control">
|
|
<i id="back-button" class="fa-solid fa-backward-step"></i>
|
|
<i id="play-pause-button" class="fa-solid fa-play"></i>
|
|
<i id="skip-button" class="fa-solid fa-forward-step"></i>
|
|
</div>
|
|
|
|
<div class="position">
|
|
<p id="position">00:00 </p>/ <p id="length"> 00:00</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="center">
|
|
<img class="image" id="image">
|
|
<div class="data">
|
|
<p id="title"></p>
|
|
<p class="desc" id="author"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<i id="shuffle-button" class="fa-solid fa-shuffle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |