housing und dj

resources/[jobs]/[civ]/nv_DjDesk/html/default.css

@@ -0,0 +1,246 @@
+:root {
+    --color1: #140f09;
+    --color2: #202443;
+
+    --body: #4b4783d2;
+
+    --border-focus: #f2cbfa;
+
+    --background: #8370ce;
+    --border: #caa0fa;
+
+    --color: #ffffff;
+
+    --color-placeholder: #ffffffa8;
+
+    --hoverdiv: #6954be;
+}
+
+* {
+    font-family: 'Noto Sans', sans-serif;
+    transition: all .2s ease;
+    color: var(--color);
+    margin: 10px;
+    border-radius: 5px;
+}
+
+/*
+    Placeholder pages showcase
+*/
+
+#first-page {
+    height: 300px;
+}
+
+#second-page {
+    width: 800px;
+    height: 300px;
+}
+
+span {
+    margin: 0;
+}
+
+/*
+    Input text
+*/
+
+input {
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    height: 32px;
+    width: 300px;
+    font-size: 20px;
+    text-align: center;
+}
+
+input:focus {
+    outline: none;
+    border: 1px solid var(--border-focus);
+}
+
+input::placeholder {
+    color: var(--color-placeholder);
+}
+
+/*
+    Input with icon
+*/
+
+.input-with-icon {
+    display: flex;
+    align-items: center;
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    height: 34px;
+    width: 300px;
+    font-size: 20px;
+}
+
+.input-with-icon input {
+    text-align: left;
+    display: block;
+    margin: 0;
+    margin-left: 5px;
+    background-color: transparent;
+    border: none;
+    height: 32px;
+    width: 250px;
+    font-size: 20px;
+}
+
+.input-with-icon input:focus {
+    outline: none;
+    border: none;
+}
+
+.input-with-icon input::placeholder {
+    color: var(--color-placeholder);
+}
+
+.input-with-icon span {
+    background-color: transparent;
+}
+
+/*
+    Drop-Down menu
+*/
+
+select {
+    text-align: center;
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    width: 150px;
+    height: 35px;
+}
+
+select:focus {
+    outline: none;
+    border: 1px solid var(--border-focus);
+}
+
+select option {
+    color: var(--color-placeholder);
+}
+
+/*
+    Button
+*/
+
+button {
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    color: var(--color-placeholder);
+    width: 150px;
+    height: 35px;
+    cursor: pointer;
+    outline: none;
+}
+
+button:hover {
+    border: 1px solid var(--border-focus);
+    color: var(--color);
+}
+
+/*
+    Table
+*/
+
+.table-container {
+    width: 800px;
+    height: auto;
+    margin: 0;
+}
+
+.table-titles {
+    display: flex;
+    text-align: center;
+    margin: 0;
+    margin-bottom: 12.5px;
+    width: 800px;
+    height: 30px;
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    transition: all 0.6s;
+}
+
+.table-titles:hover {
+    background-color: var(--hoverdiv);
+}
+
+.titles-table {
+    align-items: center;
+    background-color: transparent;
+    border: none;
+    width: 100px;
+    flex-grow: 1;
+    height: 10px;
+    margin: 0;
+    margin-top: 4px;
+}
+
+.table-row-scroll {
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 801px;
+    padding-right: 1px;
+    height: auto;
+    max-height: 400px;
+    margin: 0;
+}
+
+.table-row-scroll::-webkit-scrollbar {
+    display: none;
+}
+
+.table-row {
+    display: flex;
+    text-align: center;
+    align-items: center;
+    margin: 0;
+    margin-bottom: 5px;
+    width: 800px;
+    height: 40px;
+    background-color: var(--background);
+    border: 1px solid var(--border);
+}
+
+.table-row:hover {
+    background-color: var(--hoverdiv);
+}
+
+.item-table {
+    align-items: center;
+    background-color: transparent;
+    flex-grow: 1;
+    height: 22.5px;
+    width: 100px;
+    text-overflow: ellipsis;
+    white-space:nowrap; 
+    overflow: hidden;
+}
+
+/*
+    GOOGLE ICONS
+*/
+
+.material-symbols-outlined {
+    margin-left: 5px;
+    font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 48
+}
+
+#watermark {
+	display: block;
+	position: absolute;
+	top: 0%;
+  	left: 50%;
+	opacity: 25%;
+	height: 100px;
+	width: auto;
+  	transform: translate(-50%, -0%);
+    cursor: pointer;
+}

resources/[jobs]/[civ]/nv_DjDesk/html/index.html

@@ -0,0 +1,180 @@
+<!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
+
+-->

resources/[jobs]/[civ]/nv_DjDesk/html/styles.css

@@ -0,0 +1,740 @@
+* {
+    padding: 0px;
+    margin: 0px;
+}
+
+#container-body {
+    display: none;
+}
+
+#container-menu {
+    user-select: none;
+    display: flex;
+    position: absolute;
+    width: 65vw;
+    height: 20vw;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: transparent;
+}
+
+#left-menu {
+    text-align: center;
+    width: 15vw;
+    height: 100%;
+    background-color: var(--body);
+    border: 1px solid var(--border);
+    border-top-left-radius: 1vw;
+    border-bottom-left-radius: 1vw;
+    border-top-right-radius: .25vw;
+}
+
+#right-menu {
+    text-align: center;
+    width: 15vw;
+    height: 100%;
+    background-color: var(--body);
+    border: 1px solid var(--border);
+    border-top-right-radius: 1vw;
+    border-bottom-right-radius: 1vw;
+    border-top-left-radius: .25vw;
+}
+
+#div-container {
+    display: block;
+    width: 35vw;
+    height: 20vw;
+    background-image: url('img/mesa.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#div-controls--music {
+    display: block;
+    width: 2vw;
+    height: 2vw;
+    margin-left: 16.45vw;
+    transform: translateY(6.25vw);
+    border-radius: 2vw;
+    border: none;
+    background-color: rgba(255, 0, 0, 0);
+}
+
+#div-controls--input {
+    display: block;
+    width: 7.5vw;
+    height: 1vw;
+    border: none;
+    font-size: 0.75vw;
+    text-align: center;
+    background-color: #000;
+    color: white;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+#div-controls--exit {
+    height: 1vw;
+    width: 1vw;
+    background-color: rgba(255, 255, 255, 0);
+    border: none;
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(375%, -50%);
+}
+
+#div-controls--stop {
+    height: 1vw;
+    width: 1vw;
+    background-color: rgba(255, 255, 255, 0);
+    border: none;
+
+    position: absolute;
+    top: 50%;
+    left: 36.75%;
+    transform: translate(375%, -50%);
+}
+
+/*
+
+    Made By Geloteee#2901
+
+    Join our Discord: https://discord.gg/sERxdnduDM
+
+*/
+
+h1 {
+    color: #fff;
+}
+  
+input[type=range] {
+  appearance: none;
+  width: 99.3%;
+  height: 5px;
+  background: #000;
+  outline: none;
+  border: 2.5px solid var(--background);
+  border-radius: 8px;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 10px;
+  height: 1.35vw;
+  background: #000;
+  cursor: pointer;
+  border: 2.55px solid var(--background);
+  border-radius: 4px;
+}
+
+.div-controls--sound {
+    display: block;
+    width: 2vw;
+    height: 2vw;
+    border-radius: 0.5vw;
+    border: none;
+    background-color: rgba(43, 255, 0, 0);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    outline: none;
+    box-shadow: none;
+}
+
+.div-controls--sound:hover {
+    border: none;
+}
+
+.div-controls--sound.first {
+    transform: translate(-845%, 275%);
+}
+
+.div-controls--sound.second {
+    transform: translate(-735%, 275%);
+}
+
+.div-controls--sound.third {
+    transform: translate(635%, 275%);
+}
+
+.div-controls--sound.fourth {
+    transform: translate(745%, 275%);
+}
+
+.div-controls--sound2 {
+    display: block;
+    width: 2vw;
+    height: 2vw;
+    border-radius: 0.5vw;
+    border: none;
+    background-color: rgba(43, 255, 0, 0);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    outline: none;
+    box-shadow: none;
+}
+
+.div-controls--sound2:hover {
+    border: none;
+}
+
+.div-controls--sound2.quinto {
+    transform: translate(-845%, 385%);
+}
+
+.div-controls--sound2.sexto {
+    transform: translate(-735%, 385%);
+}
+
+.div-controls--sound2.septimo {
+    transform: translate(635%, 385%);
+}
+
+.div-controls--sound2.octavo {
+    transform: translate(750%, 385%);
+}
+
+
+
+
+.menu-section {
+    margin-top: 1vw;
+}
+
+.hightlight {
+    color: var(--border);
+}
+
+.microphone-hightlight {
+    color: rgb(112, 255, 68);
+}
+
+.stopmicrophone-hightlight {
+    color: rgb(255, 90, 90);
+}
+
+#distance {
+    width: 10vw;
+    margin: 1vw;
+}
+
+#volume {
+    width: 10vw;
+    margin: 1vw;
+}
+
+.division-line {
+    height: 0.05vw;
+    width: 100%;
+    margin-top: 0.5vw;
+    background-color: rgba(255, 255, 255, 0.233);
+}
+
+#microphone {
+    margin-top: 1.25vw;
+    width: 8vw;
+    height: 1.85vw;
+    font-size: 0.75vw;
+}
+
+#stop-microphone {
+    margin-top: 1.25vw;
+    width: 8vw;
+    height: 1.85vw;
+    font-size: 0.75vw;
+}
+
+h4 {
+    font-size: 1vw;
+}
+
+#left-nav-bar {
+    width: 100%;
+    height: 10%;
+    border-radius: 0vw;
+    border-top-right-radius: .15vw;
+    border-top-left-radius: .9vw;
+    background-color: var(--background);
+}
+
+#left-nav-bar h4 {
+    display: inline-block;
+    margin-top: 0.25vw;
+    border: 1px solid var(--border);
+    padding-left: 1vw;
+    padding-right: 1vw;
+    cursor: pointer;
+}
+
+#right-nav-bar {
+    width: 100%;
+    height: 10%;
+    border-radius: 0vw;
+    border-top-right-radius: .9vw;
+    border-top-left-radius: .15vw;
+    background-color: var(--background);
+}
+
+#right-nav-bar h4 {
+    display: inline-block;
+    margin-top: 0.25vw;
+    border: 1px solid var(--border);
+    padding-left: 1vw;
+    padding-right: 1vw;
+    cursor: pointer;
+}
+
+#right-first-page {
+    display: block;
+}
+
+#right-first-page h4 {
+    margin-top: 1vw;
+    margin-bottom: .5vw;
+}
+
+#spotlight-select {
+    height: 1.35vw;
+    width: 6vw;
+}
+
+#smoke-start {
+    width: 8vw;
+    height: 1.85vw;
+    font-size: 0.75vw;
+}
+
+#fire-start {
+    margin-bottom: .5vw;
+    width: 8vw;
+    height: 1.85vw;
+    font-size: 0.75vw;
+}
+
+#firework-start {
+    margin-bottom: .5vw;
+    width: 8vw;
+    height: 1.85vw;
+    font-size: 0.75vw;
+}
+
+#right-second-page {
+    display: none;
+}
+
+.spotlight-color-pick {
+    margin-top: 1vw;
+    width: 100%;
+}
+
+.spotlight-color-pick div {
+    display: inline-block;
+    height: 1.31vw;
+    width: 1.31vw;
+    cursor: pointer;
+}
+
+
+#spotlight-color-red {
+    background-color: rgb(255, 59, 59);
+}
+
+#spotlight-color-green {
+    background-color: rgb(154, 255, 86);
+}
+
+#spotlight-color-blue {
+    background-color: rgb(59, 167, 255);
+}
+
+#spotlight-color-red-2 {
+    background-color: rgb(255, 242, 59);
+}
+
+#spotlight-color-green-2 {
+    background-color: rgb(86, 255, 227);
+}
+
+#spotlight-color-blue-2 {
+    background-color: rgb(222, 59, 255);
+}
+
+#spotlight-color-red-3 {
+    background-color: rgb(255, 59, 196);
+}
+
+#spotlight-color-green-3 {
+    background-color: rgb(119, 0, 255);
+}
+
+#spotlight-color-blue-3 {
+    background-color: rgb(255, 153, 0);
+}
+
+#spotlight-color-red-4 {
+    background-color: rgb(255, 255, 255);
+}
+
+#spotlight-color-green-4 {
+    background-color: rgb(0, 0, 0);
+}
+
+#spotlight-color-blue-4 {
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+
+#smoke-color-red {
+    background-color: rgb(255, 59, 59);
+}
+
+#smoke-color-green {
+    background-color: rgb(154, 255, 86);
+}
+
+#smoke-color-blue {
+    background-color: rgb(59, 167, 255);
+}
+
+#smoke-color-red-2 {
+    background-color: rgb(255, 242, 59);
+}
+
+#smoke-color-green-2 {
+    background-color: rgb(86, 255, 227);
+}
+
+#smoke-color-blue-2 {
+    background-color: rgb(222, 59, 255);
+}
+
+#smoke-color-red-3 {
+    background-color: rgb(255, 59, 196);
+}
+
+#smoke-color-green-3 {
+    background-color: rgb(119, 0, 255);
+}
+
+#smoke-color-blue-3 {
+    background-color: rgb(255, 153, 0);
+}
+
+#smoke-color-red-4 {
+    background-color: rgb(255, 255, 255);
+}
+
+#smoke-color-green-4 {
+    background-color: rgb(0, 0, 0);
+}
+
+
+
+
+
+#left-first-page {
+    display: block;
+}
+
+#left-second-page {
+    display: none;
+    text-align: center;
+    height: 18vw;
+    overflow-y: scroll;
+}
+
+#left-second-page::-webkit-scrollbar {
+    display: none;
+}
+
+.playlist-container {
+    display: inline-block;
+    text-align: center;
+    margin-top: .5vw;
+    width: 95%;
+    height: 1.5vw;
+    max-height: none;
+    background-color: var(--body);
+    border: 1px solid var(--border);
+    padding-top: .5vw;
+    padding-bottom: .5vw;
+}
+
+.playlist-table {
+    display: none;
+}
+
+.playlist-table img {
+    float: right;
+    height: .5vw;
+    transform: rotate(45deg);
+    margin: .25vw;
+    width: auto;
+}
+
+.playlist-table img:hover {
+    transform: rotate(45deg) scale(1.5);
+}
+
+.playlist-container h1 {
+    height: 2vw;
+    padding: 0;
+    font-size: 1vw;
+    font-style: normal;
+    cursor: pointer;
+    display: inline-block;
+    margin-bottom: .5vw;
+}
+
+.playlist-container button {
+    display: inline-block;
+    margin: 0;
+    margin-bottom: .25vw;
+    font-size: .75vw;
+    font-style: normal;
+    width: 90%;
+    height: auto;
+    cursor: pointer;
+}
+
+.add-song {
+    display: block;
+    width: .75vw;
+    height: auto;
+    float: left;
+    margin-left: .5vw;
+    cursor: pointer;
+}
+
+#add-img {
+    width: 1.5vw;
+    height: auto;
+    float: left;
+    margin: 1vw;
+    cursor: pointer;
+}
+
+#delete-img {
+    width: 1.75vw;
+    height: auto;
+    float: right;
+    margin: 1vw;
+    cursor: pointer;
+}
+
+
+
+#add-song-popup {
+    display: none;
+    position: absolute;
+    text-align: center;
+    width: 20vw;
+    height: 10vw;
+    background-color: var(--background);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 1px solid var(--border);
+}
+
+#add-song-popup h1 {
+    font-style: normal;
+    font-size: 1vw;
+    margin: 0;
+    margin-top: .5vw;
+    margin-bottom: .5vw;
+}
+
+#add-song-popup input {
+    text-align: center;
+    font-style: normal;
+    margin: 0;
+    margin-bottom: .5vw;
+    font-size: 1vw;
+    width: 15vw;
+    height: 2vw;
+}
+
+#add-song-popup button {
+    text-align: center;
+    font-style: normal;
+    font-size: .75vw;
+    width: 5vw;
+    height: 1.5vw;
+    margin: 0;
+    margin-top: .5vw;
+}
+
+#add-song-popup img {
+    position: absolute;
+    font-style: normal;
+    font-size: 1vw;
+    width: 1vw;
+    height: auto;
+    margin: 0;
+    margin-left: 8.5vw;
+    margin-top: .5vw;
+    transform: rotate(45deg);
+    cursor: pointer;
+}
+
+
+
+
+
+
+#add-popup {
+    display: none;
+    position: absolute;
+    text-align: center;
+    width: 20vw;
+    height: 7.5vw;
+    background-color: var(--background);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 1px solid var(--border);
+}
+
+#add-popup h1 {
+    font-style: normal;
+    font-size: 1vw;
+    margin: 0;
+    margin-top: .5vw;
+    margin-bottom: .5vw;
+}
+
+#add-popup input {
+    text-align: center;
+    font-style: normal;
+    font-size: 1vw;
+    width: 15vw;
+    height: 2vw;
+    margin: 0;
+}
+
+#add-popup button {
+    text-align: center;
+    font-style: normal;
+    font-size: .75vw;
+    width: 5vw;
+    height: 1.5vw;
+    margin: 0;
+    margin-top: .5vw;
+}
+
+#add-popup img {
+    position: absolute;
+    font-style: normal;
+    font-size: 1vw;
+    width: 1vw;
+    height: auto;
+    margin: 0;
+    margin-left: 8.5vw;
+    margin-top: .5vw;
+    transform: rotate(45deg);
+    cursor: pointer;
+}
+
+#delete-popup {
+    display: none;
+    position: absolute;
+    text-align: center;
+    width: 20vw;
+    height: 6vw;
+    background-color: var(--background);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 1px solid var(--border);
+}
+
+#delete-popup h1 {
+    font-style: normal;
+    font-size: 1vw;
+    margin: 0;
+    margin-top: .5vw;
+    margin-bottom: .5vw;
+}
+
+#delete-popup input {
+    text-align: center;
+    font-style: normal;
+    font-size: 1vw;
+    width: 15vw;
+    height: 2vw;
+    margin: 0;
+}
+
+#delete-popup button {
+    text-align: center;
+    font-style: normal;
+    font-size: .75vw;
+    width: 5vw;
+    height: 1.75vw;
+    margin: 0;
+    margin-top: .5vw;
+}
+
+#delete-popup img {
+    position: absolute;
+    font-style: normal;
+    font-size: 1vw;
+    width: 1vw;
+    height: auto;
+    margin: 0;
+    margin-left: 8.5vw;
+    margin-top: .5vw;
+    transform: rotate(45deg);
+    cursor: pointer;
+}
+
+#devtool-body {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 500px;
+    height: auto;
+    margin: 150px;
+    margin-top: 15px;
+    background-color: var(--body);
+    border: 1px solid var(--border);
+    padding-bottom: 15px;
+}
+
+#devtool-title {
+    text-align: center;
+    padding: 5px;
+}
+
+.devtool-box {
+    display: flex;
+    align-items: center;
+    margin-left: 20px;
+    margin-top: 10px;
+}
+
+.devtool-box p {
+    display: inline-block;
+    margin-left: 10px;
+}
+
+#devtool-preview-container {
+    display: block;
+    text-align: center;
+}
+
+#devtool-preview {
+    width: 455px;
+    margin-top: 20px;
+}