148 lines
5.9 KiB
HTML
148 lines
5.9 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') }}">
|
|
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
|
|
</head>
|
|
|
|
<body>
|
|
<script> const userId = "{{ user.id }}"; </script>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="left">
|
|
<p id="homeBtn">Home</p>
|
|
<p id="playlistBtn">Playlist</p>
|
|
</div>
|
|
<div class="center">
|
|
<div class="search-container">
|
|
<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="dropdown-content">
|
|
<img src="{{ user.avatar.url }}" />
|
|
<p>{{ user.username }}</p>
|
|
</div>
|
|
<div class="dropdown-item">
|
|
<a href="logout"><i class="fa-solid fa-right-from-bracket"></i>Log Out</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main" id="main">
|
|
<div class="toastContrainer"></div>
|
|
<div class="thumbnail">
|
|
<img id="largeImage" alt="" />
|
|
<div class="thumbnail-background"></div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="auto-play">
|
|
<div>
|
|
<p>Autoplay</p>
|
|
<p>Similar track will be to the queue</p>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="auto-play">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</div>
|
|
<div class="queue-list">
|
|
<ul id="sortable">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="playlists" id="playlists" style="display: None">
|
|
<div class="playlists-grid" id="playlists-grid">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="users-bar">
|
|
<div class="info">
|
|
<h3 id="channel-name"> </h3>
|
|
<h5>You are listen in</h5>
|
|
</div>
|
|
<ul id="users-container" class="users-container">
|
|
</ul>
|
|
</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 class="position-info"></div>
|
|
</div>
|
|
<div class="control-container">
|
|
<div class="left">
|
|
<div class="control">
|
|
<i id="back-btn" class="fa-solid fa-backward-step"></i>
|
|
<i id="play-pause-btn" class="fa-solid fa-play"></i>
|
|
<i id="skip-btn" 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>
|
|
<i class="fa-regular fa-thumbs-up" id="like-btn"></i>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<i id="repeat-btn" class="fa-solid fa-repeat"></i>
|
|
<i id="shuffle-btn" class="fa-solid fa-shuffle"></i>
|
|
<i id="users-btn" class="fa-solid fa-user-group"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="context-menu" class="context-menu">
|
|
<ul>
|
|
<li id="remove-track-btn"><i class="fa-solid fa-trash"></i>Remove</li>
|
|
<li id="copy-track-btn"><i class="fa-solid fa-share"></i>Copy Song Link</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="playlist-context-menu" class="context-menu">
|
|
<ul>
|
|
<li id="remove-playlist-btn"><i class="fa-solid fa-trash"></i>Remove</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |