ElectricTree
/
Youtube-Playlist-Mozilla-Addon


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Playlists</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="fonts.css">
    <link rel="stylesheet" type="text/css" href="themes.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="playlist-main-window" class="background-theme">
        <div id="playlists" class="background-theme borders-theme"></div>
        <div id="main-window-buttons-container">
            <button id="add-new-playlist-button" class="buttons-theme text-theme borders-theme font-type">ADD NEW LIST</button>
            <button id="options-button" class="buttons-theme borders-theme text-theme"></button>
        </div>
    </div>
    <div id="edit-playlist-main-window" class="background-theme">
        <div id="playlist-name-parent" class="borders-theme">
            <input id= "input-playlist-name" class="text-theme font-type" type="text" disabled="true">
            <button id="playlist-change-name-button" class="borders-theme"></button>
            <button id="playlist-delete-button" class="borders-theme"></button>
        </div>
        <div id="songs" class="background-theme borders-theme"></div>
        <div id="add-new-song-parent">
            <input id="input-insert-url" class="list-objects-theme borders-theme text-theme font-type" type="text" placeholder="URL HERE">
            <button id="add-song-button"></button>
        </div>
        <div id="final-options-parent">
            <button id="save-button" class="borders-theme buttons-theme text-theme font-type">SAVE</button>
            <button id="return-to-main-frame" class="borders-theme buttons-theme text-theme font-type">CLOSE</button>
        </div>
    </div>
    <div id="options-main-window" class="background-theme">
        <div id="options-title" class="borders-theme text-theme font-type">OPTIONS</div>
        <div id="player-selector">
            <div id="player-text" class="text-theme font-type">PLAYER</div>
            <select id="player-select" class="borders-theme buttons-theme text-theme font-type">
                <option value="youtube-player">Youtube</option>
                <option value="invidious-player">Invidious</option>
            </select>
        </div>
        <div id="theme-selector">
            <div id="theme-text" class="text-theme font-type">THEME</div>
            <select id="theme-select" class="borders-theme buttons-theme text-theme font-type">
                <option value="white-theme">White</option>
                <option value="black-theme">Black</option>
                <option value="neon-pink-theme">Neon Pink</option>
                <option value="matrix-theme">Matrix</option>
                <option value="huwhite-theme">huWhite</option>
                <option value="blue-theme">Blue</option>
                <option value="coffee-theme">Coffee</option>
                <option value="night-theme">Night</option>
                <option value="forest-theme">Forest</option>
            </select>
        </div>
        <div id="font-selector" class="font-type">
            <div id="font-text" class="text-theme font-type">FONT</div>
            <select id="font-select" class="borders-theme buttons-theme text-theme font-type">
                <option value="barlow-font">Barlow</option>
                <option value="cormorant-unicase-font">Cormorant Unicase</option>
                <option value="exo2-font">Exo 2</option>
                <option value="gemunu-libre-font">Gemunu Libre</option>
                <option value="josefin-sans-font">Josefin Sans</option>
                <option value="oswald-font">Oswald</option>
                <option value="roboto-condensed-font">Roboto Condensed</option>
                <option value="roboto-font">Roboto</option>
                <option value="roboto-slab-font">Roboto Slab</option>
                <option value="space-grotesk-font">Space Grotesk</option>
                <option value="zilla-slab-font">Zilla Slab</option>
            </select>
        </div>
        <div id="style-selector">
            <div id="style-text" class="text-theme font-type">STYLE</div>
            <select id="style-select" class="borders-theme buttons-theme text-theme font-type">
                <option value="sharp-style">Sharp</option>
                <option value="round-style">Round</option>
                <option value="leviosa-style">It's leviOsa, not levioSA!</option>
            </select>
        </div>
        <div id="export-import-container">
            <button id="export-button" class="buttons-theme borders-theme text-theme font-type">EXPORT</button>
            <button id="open-import-menu-button" class="buttons-theme borders-theme text-theme font-type">IMPORT</button>
        </div>
        <div id="delete-all-container" class="borders-theme">
            <button id="delete-all-button" class="buttons-theme borders-theme text-theme font-type">DELETE ALL</button>
            <div id="delete-warning-text" class="text-theme font-type">WARNING: this will delete all playlists.</div>
        </div>
        <div id="final-options-parent-options-panel">
            <button id="save-button-options-panel" class="buttons-theme borders-theme text-theme font-type">SAVE</button>
            <button id="close-button-options-panel" class="buttons-theme borders-theme text-theme font-type">CLOSE</button>
        </div>
    </div>
    <div id="import-main-window" class="background-theme">
        <div id="import-title" class="borders-theme text-theme font-type">IMPORT</div>
        <div id="import-options-container" class="borders-theme">
            <div class="import-options-individual-container">
                <div id="explanation-message" class="text-theme font-type">Unable to directly import files into the add-on for security reasons. Please open your backup file in a text editor, copy its content, and paste it below.</div>
            </div>
            <div class="import-options-individual-container">
                <input id="input-insert-backup" class="list-objects-theme borders-theme text-theme font-type" type="text" placeholder="FILE CONTENT HERE">
            </div>
            <div class="import-options-individual-container">
                <button id="import-button" class="buttons-theme borders-theme text-theme font-type">IMPORT</button>
            </div>
            <div class="import-options-individual-container">
                <div id="status-message" class="text-theme font-type">Status: No data.</div>
            </div>
        </div>
        <button id="close-import-menu" class="buttons-theme borders-theme text-theme font-type">CLOSE</button>
    </div>
    <script src="playlist.js"></script>
</body>
</html>