180 lines
No EOL
8.9 KiB
HTML
180 lines
No EOL
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" type="text/css" href="default.css">
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<div id="devtool-body">
|
|
<h1 id="devtool-title">DJ DevTools</h1>
|
|
|
|
<div id="devtool-keys-content">
|
|
<div class="devtool-box">
|
|
<img src="./img/keys/e.png" alt="">
|
|
<p>To place the DJ location</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="devtool-preview-container">
|
|
<video autoplay loop id="devtool-preview"></video>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="container-body">
|
|
<div id="container-menu">
|
|
<div id="left-menu">
|
|
<div id="left-nav-bar">
|
|
<h4 id="sound-button">Sound</h4>
|
|
<h4 id="playlists-button">Playlists</h4>
|
|
</div>
|
|
<div id="left-first-page">
|
|
<div class="menu-section">
|
|
<h4 id="range-label">Sound <span class="hightlight">Range</span></h4>
|
|
<input type="range" id="distance">
|
|
</div>
|
|
<div class="menu-section">
|
|
<h4 id="volume-label">Sound <span class="hightlight">Volume</span></h4>
|
|
<input type="range" id="volume">
|
|
</div>
|
|
<div class="division-line"></div>
|
|
<button id="microphone"><span class="microphone-hightlight">Talk</span> to Microphone</button>
|
|
<button id="stop-microphone">Stop <span class="stopmicrophone-hightlight">Talking</span></button>
|
|
</div>
|
|
<div id="left-second-page">
|
|
<div id='all-container'>
|
|
<div class="playlist-container">
|
|
<img class="add-song" src="./img/add.png">
|
|
<h1>Playlist 1</h1>
|
|
<div class="playlist-table">
|
|
<button class="song-parr">Play Song #1<img src="./img/close-icon.png"></button>
|
|
<button>Play Song #1</button>
|
|
<button>Play Song #1</button>
|
|
<button>Play Song #1</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img id="add-img" src="./img/add.png">
|
|
<img id="delete-img" src="./img/delete.png">
|
|
</div>
|
|
</div>
|
|
<div id = 'div-container'>
|
|
<input id="timeline" type="range" min="1" max="100" value="50" class="slider">
|
|
<button id = 'div-controls--music'></button>
|
|
<button id = 'div-controls--exit'>❌</button>
|
|
<button id = 'div-controls--stop'>✋</button>
|
|
<input type="text" id = 'div-controls--input' value = '' placeholder="MUSIC URL">
|
|
<button class = 'div-controls--sound first'></button>
|
|
<button class = 'div-controls--sound second'></button>
|
|
<button class = 'div-controls--sound third'></button>
|
|
<button class = 'div-controls--sound fourth'></button>
|
|
|
|
<button class = 'div-controls--sound2 quinto'></button>
|
|
<button class = 'div-controls--sound2 sexto'></button>
|
|
<button class = 'div-controls--sound2 septimo'></button>
|
|
<button class = 'div-controls--sound2 octavo'></button>
|
|
</div>
|
|
<div id="right-menu">
|
|
<div id="right-nav-bar">
|
|
<h4 id="controller-button">Controller</h4>
|
|
<h4 id="colors-button">Colors</h4>
|
|
</div>
|
|
<div id="right-first-page">
|
|
<h4 id="spotlight-mode-label">Spotlight <span class="hightlight">Mode</span></h4>
|
|
<select id="spotlight-select">
|
|
<option value="Dynamic" id="dynamic-label">Dynamic</option>
|
|
<option value="Static" id="static-label">Static</option>
|
|
<option value="Epilepsy" id="epilepsy-label">Epilepsy</option>
|
|
</select>
|
|
<h4 id="smoke-machine-label">Smoke <span class="hightlight">Machine</span></h4>
|
|
<button id="smoke-start"><span class="microphone-hightlight">Create</span> Smoke</button>
|
|
<h4 id="effects-label">Effects <span class="hightlight">Machine</span></h4>
|
|
<button id="fire-start"><span class="microphone-hightlight">Create</span> Fire</button>
|
|
<button id="firework-start"><span class="microphone-hightlight">Create</span> FireWork</button>
|
|
</div>
|
|
<div id="right-second-page">
|
|
<div class="menu-section">
|
|
<h4 id="spotlight-label">Change <span class="hightlight">SpotLight Color</span></h4>
|
|
<div class="spotlight-color-pick">
|
|
<div id="spotlight-color-red"></div>
|
|
<div id="spotlight-color-green"></div>
|
|
<div id="spotlight-color-blue"></div>
|
|
|
|
<div id="spotlight-color-red-2"></div>
|
|
<div id="spotlight-color-green-2"></div>
|
|
<div id="spotlight-color-blue-2"></div>
|
|
|
|
<div id="spotlight-color-red-3"></div>
|
|
<div id="spotlight-color-green-3"></div>
|
|
<div id="spotlight-color-blue-3"></div>
|
|
|
|
<div id="spotlight-color-red-4"></div>
|
|
<div id="spotlight-color-green-4"></div>
|
|
<div id="spotlight-color-blue-4"></div>
|
|
</div>
|
|
</div>
|
|
<div class="division-line"></div>
|
|
<div class="menu-section">
|
|
<h4 id="smoke-label">Change <span class="hightlight">Smoke Color</span></h4>
|
|
<div class="spotlight-color-pick">
|
|
<div id="smoke-color-red"></div>
|
|
<div id="smoke-color-green"></div>
|
|
<div id="smoke-color-blue"></div>
|
|
|
|
<div id="smoke-color-red-2"></div>
|
|
<div id="smoke-color-green-2"></div>
|
|
<div id="smoke-color-blue-2"></div>
|
|
|
|
<div id="smoke-color-red-3"></div>
|
|
<div id="smoke-color-green-3"></div>
|
|
<div id="smoke-color-blue-3"></div>
|
|
|
|
<div id="smoke-color-red-4"></div>
|
|
<div id="smoke-color-green-4"></div>
|
|
</div>
|
|
</div>
|
|
<div class="division-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="add-popup">
|
|
<img class="close-popups" src="./img/close-icon.png">
|
|
<h1 id="playlist-label">Create Playlist</h1>
|
|
<input id="new-playlist" type="text" placeholder="Playlist Name">
|
|
<button id="create-playlist-button">Submit</button>
|
|
</div>
|
|
<div id="delete-popup">
|
|
<img class="close-popups" src="./img/close-icon.png">
|
|
<h1 id="remove-label">Delete Playlist</h1>
|
|
<select id="select-delete" name="" id=""></select>
|
|
<button id="delete-playlist-button">Delete</button>
|
|
</div>
|
|
<div id="add-song-popup">
|
|
<img class="close-popups" src="./img/close-icon.png">
|
|
<h1 id="add-label">Add Song</h1>
|
|
<input id="new-song-name" type="text" placeholder="Song Name">
|
|
<input id="new-song-url" type="text" placeholder="Song URL">
|
|
<button id="add-song-playlist-button">Submit</button>
|
|
</div>
|
|
<img onclick="window.invokeNative('openUrl', 'https://discord.gg/sERxdnduDM');" id="watermark" src="https://cdn.discordapp.com/attachments/723696788099563601/1058124637910876270/logo-resized.png">
|
|
</div>
|
|
</body>
|
|
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
|
<script src="./listener.js" type="text/javascript"></script>
|
|
</html>
|
|
|
|
<!--
|
|
|
|
Made By Geloteee#2901
|
|
|
|
Join our Discord: https://discord.gg/sERxdnduDM
|
|
|
|
--> |