diff options
| author | Front <27463495+Frontesque@users.noreply.github.com> | 2021-11-29 01:43:44 +0300 |
|---|---|---|
| committer | Front <27463495+Frontesque@users.noreply.github.com> | 2021-11-29 01:43:44 +0300 |
| commit | 36dffffff92e4217bb0fa14e64fdd348e6ba4c7d (patch) | |
| tree | 185e2ee6cfb5fcb434092f9b114c5ccc8bdd5850 | |
| parent | 8c5a376157c51f93dc50a7ccea9d47a3d6062e0b (diff) | |
working on extension ui
| -rw-r--r-- | temp/index.html | 46 | ||||
| -rw-r--r-- | temp/popup.css | 107 | ||||
| -rw-r--r-- | temp/popup.js | 59 |
3 files changed, 212 insertions, 0 deletions
diff --git a/temp/index.html b/temp/index.html new file mode 100644 index 0000000..b64973c --- /dev/null +++ b/temp/index.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta content="text/html; charset=utf-8"> + <title>Return Youtube Dislike</title> + <link rel="stylesheet" href="popup.css"> +</head> + +<body> + + + <center> + <img src="icons/icon48.png" alt="Logo" /> + <h1>Return Youtube Dislike</h1> + <p>by Dmitrii Selivanov & Community</p> + + <button id="link_website">Website</button> + <button id="link_github">Github</button> + <button id="link_discord">Discord</button> + + <br> + <button id="advancedToggle">Show Advanced</button> + + </center> + + <div id="advancedSettings"> + <label class="switch"> + <input type="checkbox" id="disable_ratio_bar" /> + <span class="slider" /> + <span class="switchLabel">Disable ratio bar</span> + </label><br> + + <label class="switch"> + <input type="checkbox" id="disable_api_unlisted" /> + <span class="slider" /> + <span class="switchLabel">Disable using the API for unlisted videos</span> + </label><br> + + + </div> + +</body> +<script src="popup.js"></script> + +</html>
\ No newline at end of file diff --git a/temp/popup.css b/temp/popup.css new file mode 100644 index 0000000..772e891 --- /dev/null +++ b/temp/popup.css @@ -0,0 +1,107 @@ +/* Variables */ +:root { + --primary: #ff6666; + --accent: #ffaaaa; + + --background: #111; + --secondary: #272727; + --lightGrey: #999; + --white: #fff; +} + +/* Window Styling */ +html, +body { + background-color: var(--background); + color: var(--white); + width: 300px; + padding: 0.5em; + font-family: Arial, Helvetica, sans-serif; + font-size: 14px; +} + +h1 { + font-size: 26px; +} + +button { + color: var(--white); + background: var(--secondary); + cursor: pointer; + padding: 5px 16px; + border: none; + border-radius: 4px; + font-weight: 500; + box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%); +} + +#advancedToggle { + margin-top: 1em; + margin-bottom: 2em; +} + +#advancedSettings { + display: none; + border: 2px solid var(--secondary); + border-radius: 4px; + padding: 0.5em; + margin-right: 1em; /* FIREFOX ONLY */ +} + +#ratio_bar_colour { + border: none; + outline: none; + background: none; +} + +/* Switches */ +.switch { + position: relative; + display: inline-block; + width: 30px; + height: 17px; + margin-bottom: 0.5em; +} + +.switch input { + display: none; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--secondary); + transition: .4s; + border-radius: 34px; +} + +.slider:before { + position: absolute; + content: ''; + height: 13px; + width: 13px; + left: 2px; + bottom: 2px; + background: var(--lightGrey); + transition: .4s; + border-radius: 50%; +} + +input:checked+.slider { + background: var(--accent); +} + +input:checked+.slider:before { + transform: translateX(13px); + background: var(--primary); +} + +.switchLabel { + width: 250px !important; + transform: translateX(35px); + display: inline-block; +}
\ No newline at end of file diff --git a/temp/popup.js b/temp/popup.js new file mode 100644 index 0000000..12dd0c3 --- /dev/null +++ b/temp/popup.js @@ -0,0 +1,59 @@ +/* Config */ +const config = { + advanced: false, + showAdvancedMessage: "Show Advanced", + hideAdvancedMessage: "Hide Advanced", + + links: { + website: 'https://returnyoutubedislike.com', + github: 'https://github.com/Anarios/return-youtube-dislike', + discord: 'https://discord.gg/mYnESY4Md5' + }, +}; + +/* Links */ +document.getElementById('link_website').addEventListener('click', () => { + chrome.tabs.create({ + url: config.links.website + }); +}); + +document.getElementById('link_github').addEventListener('click', () => { + chrome.tabs.create({ + url: config.links.github + }); +}); + +document.getElementById('link_discord').addEventListener('click', () => { + chrome.tabs.create({ + url: config.links.discord + }); +}); + +/* Advanced Toggle */ +const advancedToggle = document.getElementById('advancedToggle'); +advancedToggle.addEventListener('click', () => { + const adv = document.getElementById('advancedSettings'); + if (config.advanced) { + adv.style.display = "none"; + advancedToggle.innerHTML = config.showAdvancedMessage; + config.advanced = false; + } else { + adv.style.display = "block"; + advancedToggle.innerHTML = config.hideAdvancedMessage; + config.advanced = true; + } +}); + + + +/* popup-script.js +document.querySelector('#login') +.addEventListener('click', function () { + chrome.runtime.sendMessage({ message: 'get_auth_token' }); +}); + +document.querySelector("#log_off").addEventListener("click", function () { + chrome.runtime.sendMessage({ message: "log_off" }); +}); +*/
\ No newline at end of file |