diff options
| -rw-r--r-- | src/config/config.json | 189 | ||||
| -rw-r--r-- | src/pages/options/widgets/general.ejs | 185 | ||||
| -rw-r--r-- | src/pages/options/widgets/services.ejs | 160 | ||||
| -rw-r--r-- | src/pages/stylesheets/styles.css | 17 |
4 files changed, 332 insertions, 219 deletions
diff --git a/src/config/config.json b/src/config/config.json index b1c4c8a4..cff06b6c 100644 --- a/src/config/config.json +++ b/src/config/config.json @@ -22,8 +22,12 @@ "frontends": { "invidious": { "preferences": { - "cookies": ["PREFS"], - "localstorage": ["dark_mode"] + "cookies": [ + "PREFS" + ], + "localstorage": [ + "dark_mode" + ] }, "name": "Invidious", "embeddable": true, @@ -59,7 +63,9 @@ }, "pipedMaterial": { "preferences": { - "localstorage": ["PREFERENCES"] + "localstorage": [ + "PREFERENCES" + ] }, "name": "Piped-Material", "embeddable": false, @@ -109,7 +115,9 @@ "frontends": { "beatbump": { "preferences": { - "localstorage": ["settings"], + "localstorage": [ + "settings" + ], "indexeddb": "beatbump" }, "name": "Beatbump", @@ -117,14 +125,26 @@ }, "hyperpipe": { "preferences": { - "localstorage": ["api", "authapi", "codec", "locale", "next", "pipedapi", "quality", "theme", "vol"], + "localstorage": [ + "api", + "authapi", + "codec", + "locale", + "next", + "pipedapi", + "quality", + "theme", + "vol" + ], "indexeddb": "hyperpipedb" }, "name": "Hyperpipe", "instanceList": true } }, - "targets": ["^https?:\\/{2}music\\.youtube\\.com(\\/|$)"], + "targets": [ + "^https?:\\/{2}music\\.youtube\\.com(\\/|$)" + ], "name": "YT Music", "options": { "enabled": true, @@ -190,7 +210,9 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}(www\\.)?instagram\\.com\\/?(p\\/|$)"], + "targets": [ + "^https?:\\/{2}(www\\.)?instagram\\.com\\/?(p\\/|$)" + ], "name": "Instagram", "options": { "enabled": true @@ -203,13 +225,18 @@ "frontends": { "proxiTok": { "preferences": { - "cookies": ["api-test_endpoints", "theme"] + "cookies": [ + "api-test_endpoints", + "theme" + ] }, "name": "ProxiTok", "instanceList": true } }, - "targets": ["^https?:\\/{2}(www\\.|)tiktok\\.com(\\/|$)"], + "targets": [ + "^https?:\\/{2}(www\\.|)tiktok\\.com(\\/|$)" + ], "name": "TikTok", "options": { "enabled": true @@ -222,7 +249,20 @@ "frontends": { "libreddit": { "preferences": { - "cookies": ["theme", "front_page", "layout", "wide", "post_sort", "comment_sort", "show_nsfw", "autoplay_videos", "use_hls", "hide_hls_notification", "subscriptions", "filters"] + "cookies": [ + "theme", + "front_page", + "layout", + "wide", + "post_sort", + "comment_sort", + "show_nsfw", + "autoplay_videos", + "use_hls", + "hide_hls_notification", + "subscriptions", + "filters" + ] }, "name": "Libreddit", "instanceList": true @@ -253,13 +293,29 @@ }, "ferrit": { "preferences": { - "cookies": ["theme", "front_page", "layout", "wide", "post_sort", "comment_sort", "show_nsfw", "autoplay_videos", "use_hls", "hide_hls_notification", "subscriptions", "filters"] + "cookies": [ + "theme", + "front_page", + "layout", + "wide", + "post_sort", + "comment_sort", + "show_nsfw", + "autoplay_videos", + "use_hls", + "hide_hls_notification", + "subscriptions", + "filters" + ] }, "name": "Ferrit", "instanceList": true } }, - "targets": ["^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com(?=\\/u(ser)?\\/|\\/r\\/|\\/?$)", "^https?:\\/{2}(i|(external-)?preview)\\.redd\\.it"], + "targets": [ + "^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com(?=\\/u(ser)?\\/|\\/r\\/|\\/?$)", + "^https?:\\/{2}(i|(external-)?preview)\\.redd\\.it" + ], "name": "Reddit", "options": { "enabled": true, @@ -277,7 +333,9 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)"], + "targets": [ + "^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)" + ], "name": "Imgur", "options": { "enabled": true, @@ -291,13 +349,18 @@ "frontends": { "wikiless": { "preferences": { - "cookies": ["theme", "default_lang"] + "cookies": [ + "theme", + "default_lang" + ] }, "name": "Wikiless", "instanceList": true } }, - "targets": ["^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org(\\/|$)"], + "targets": [ + "^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org(\\/|$)" + ], "name": "Wikipedia", "options": { "enabled": false @@ -345,13 +408,17 @@ "frontends": { "quetre": { "preferences": { - "localstorage": ["theme"] + "localstorage": [ + "theme" + ] }, "name": "Quetre", "instanceList": true } }, - "targets": ["^https?:\\/{2}([a-zA-Z0-9-]+\\.)*quora\\.com(\\/|$)"], + "targets": [ + "^https?:\\/{2}([a-zA-Z0-9-]+\\.)*quora\\.com(\\/|$)" + ], "name": "Quora", "options": { "enabled": true @@ -364,13 +431,17 @@ "frontends": { "libremdb": { "preferences": { - "localstorage": ["theme"] + "localstorage": [ + "theme" + ] }, "name": "libremdb", "instanceList": true } }, - "targets": ["^https?:\\/{2}(?:www\\.|m\\.|)imdb\\.com\\/title"], + "targets": [ + "^https?:\\/{2}(?:www\\.|m\\.|)imdb\\.com\\/title" + ], "name": "IMDb", "options": { "enabled": true @@ -386,7 +457,9 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}(www\\.|)reuters\\.com(\\/|$)"], + "targets": [ + "^https?:\\/{2}(www\\.|)reuters\\.com(\\/|$)" + ], "name": "Reuters", "options": { "enabled": false @@ -402,7 +475,9 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}(?:[a-zA-Z0-9-]+\\.)?(?:fandom|wikia)\\.com(?=\\/wiki|\\/?$)"], + "targets": [ + "^https?:\\/{2}(?:[a-zA-Z0-9-]+\\.)?(?:fandom|wikia)\\.com(?=\\/wiki|\\/?$)" + ], "name": "Fandom", "options": { "enabled": true @@ -431,8 +506,18 @@ "frontends": { "librarian": { "preferences": { - "cookies": ["nsfw", "theme"], - "localstorage": ["autoplay", "autoplayNextVid", "collapseComments", "plyr", "sb_categories", "showRelated"] + "cookies": [ + "nsfw", + "theme" + ], + "localstorage": [ + "autoplay", + "autoplayNextVid", + "collapseComments", + "plyr", + "sb_categories", + "showRelated" + ] }, "name": "Librarian", "embeddable": true, @@ -444,7 +529,10 @@ "instanceList": false } }, - "targets": ["^https?:\\/{2}odysee\\.com(\\/|$)", "^https?:\\/{2}lbry\\.tv(\\/|$)"], + "targets": [ + "^https?:\\/{2}odysee\\.com(\\/|$)", + "^https?:\\/{2}lbry\\.tv(\\/|$)" + ], "name": "LBRY", "options": { "enabled": true, @@ -517,13 +605,26 @@ }, "librex": { "preferences": { - "cookies": ["bibliogram", "disable_frontends", " disable_special", "invidious", "libreddit", "nitter", "proxitok", "save", "theme", "wikiless"] + "cookies": [ + "bibliogram", + "disable_frontends", + " disable_special", + "invidious", + "libreddit", + "nitter", + "proxitok", + "save", + "theme", + "wikiless" + ] }, "name": "LibreX", "instanceList": true } }, - "targets": ["^https?:\\/{2}search\\.libredirect\\.invalid"], + "targets": [ + "^https?:\\/{2}search\\.libredirect\\.invalid" + ], "name": "Search", "options": { "enabled": true, @@ -537,14 +638,24 @@ "frontends": { "simplyTranslate": { "preferences": { - "cookies": ["from_lang", "to_lang", "tts_enabled", "use_text_fields"] + "cookies": [ + "from_lang", + "to_lang", + "tts_enabled", + "use_text_fields" + ] }, "name": "SimplyTranslate", "instanceList": true }, "lingva": { "preferences": { - "localstorage": ["isauto", "source", "target", "chakra-ui-color-mode"] + "localstorage": [ + "isauto", + "source", + "target", + "chakra-ui-color-mode" + ] }, "name": "Lingva Translate", "instanceList": true @@ -554,7 +665,10 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/", "^https?:\\/{2}translate\\.libredirect\\.invalid"], + "targets": [ + "^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/", + "^https?:\\/{2}translate\\.libredirect\\.invalid" + ], "name": "Translate", "options": { "enabled": true, @@ -576,7 +690,10 @@ "singleInstance": "https://www.openstreetmap.org" } }, - "targets": ["^https?:\\/{2}maps\\.libredirect\\.invalid", "^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)"], + "targets": [ + "^https?:\\/{2}maps\\.libredirect\\.invalid", + "^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)" + ], "name": "Maps", "options": { "enabled": false, @@ -593,7 +710,11 @@ "instanceList": "true" } }, - "targets": ["^https?:\\/{2}send\\.libredirect\\.invalid", "^https?:\\/{2}send\\.firefox\\.com\\/?$", "^https?:\\/{2}sendfiles\\.online\\/?$"], + "targets": [ + "^https?:\\/{2}send\\.libredirect\\.invalid", + "^https?:\\/{2}send\\.firefox\\.com\\/?$", + "^https?:\\/{2}sendfiles\\.online\\/?$" + ], "name": "Send Files", "options": { "enabled": true @@ -609,7 +730,9 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}paste\\.libredirect\\.invalid"], + "targets": [ + "^https?:\\/{2}paste\\.libredirect\\.invalid" + ], "name": "Paste Text", "options": { "enabled": true @@ -630,4 +753,4 @@ "color": "grey" } } -} +} \ No newline at end of file diff --git a/src/pages/options/widgets/general.ejs b/src/pages/options/widgets/general.ejs index e24046db..ca96f1c8 100644 --- a/src/pages/options/widgets/general.ejs +++ b/src/pages/options/widgets/general.ejs @@ -1,102 +1,87 @@ <section class="option-block" id="general_page"> - <div class="some-block option-block"> - <h1 data-localise="__MSG_general__">General</h1> - </div> - <hr> - <div class="some-block option-block"> - <h4 data-localise="__MSG_theme__">Theme</h4> - <select id="theme"> - <option value="detect" data-localise="__MSG_detect__">Detect</option> - <option value="light" data-localise="__MSG_light__">Light</option> - <option value="dark" data-localise="__MSG_dark__">Dark</option> - </select> - </div> - <div class="some-block option-block"> - <h4 data-localise="__MSG_network__">Network</h4> - <select id="network"> - <% for (const network in config.networks) { -%> -<option value="<%= network %>"><%= config.networks[network].name %></option> - <% }; %> -</select> - </div> - <div id="network-fallback"> - <div class="some-block option-block"> - <h4 data-localise="__MSG_networkFallback__">Fallback to clearnet if no instances are available for the current network</h4> - <input id="network-fallback-checkbox" type="checkbox"> - </div> - </div> - <div class="some-block option-block"> - <h4 data-localise="__MSG_autoRedirect__"></h4> - <input id="auto-redirect" type="checkbox"> - </div> - <form> - <div class="some-block option-block"> - <h4 data-localise="__MSG_latencyThreshold">Latency Threshold</h4> - <output id="latency-output" for="latencyInput" name="latencyOutput"></output> - <input id="latency-input" type="range" min="50" max="5000" value="1000" name="latencyInput" step="50"> - </div> - </form> - <div class="some-block option-block"> - <h4 data-localise="__MSG_exceptions__"></h4> - </div> - <form id="custom-exceptions-instance-form"> - <div class="some-block option-block"> - <div class="some-block" style="padding:0;"> - <input id="exceptions-custom-instance" placeholder="https://www.google.com" type="url"> - <select id="exceptions-custom-instance-type"> - <option value="url">URL</option> - <option value="regex">Regex</option> - </select> - </div> - <button class="add" id="exceptions-add-instance" type="submit"> - <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> - <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path> - </svg> - </button> - </div> - </form> - <div class="checklist" id="exceptions-custom-checklist"></div> - <div class="buttons buttons-inline"><a class="button button-inline" id="update-instances"> - <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> - <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path> - </svg> - <x data-localise="__MSG_updateInstances__">Update Instances</x></a> </div> - <div class="buttons buttons-inline"> - <label class="button button-inline" id="import_settings_text" for="import-settings"> - <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> - <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> - </svg> - <x data-localise="__MSG_importSettings__">Import Settings</x> - </label> - <input class="button button-inline" id="import-settings" type="file" style="display:none;"> <a class="button button-inline" id="export-settings"> - <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> - <path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path> - </svg> - <x data-localise="__MSG_exportSettings__">Export Settings</x></a> <a class="button button-inline" id="reset-settings"> - <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> - <path d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"></path> - <path d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z"></path> - </svg> - <x data-localise="__MSG_resetSettings__">Reset Settings</x></a> - </div> - <hr> - <div class="some-block option-block"> - <h4 data-localise="__MSG_customPopup__">Customize Popup</h4> - </div> - <div class="checklist-popup" id="popup-frontends-checklist"> - <% for (const service in config.services) { -%> -<div> - <div> - <% if (config.services[service].imageType != "svgMono") { _%> - <img src="../../../assets/images/<%= service %>-icon.<%= config.services[service].imageType %>"> - <% } else { _%> - <%- include ('src/assets/images/' + service + '-icon.svg') %> - <% } _%> - <label data-localise="__MSG_<%= service %>__" for="<%= service %>"><%= config.services[service].name %></label> - </div> - <input id="<%= service %>" type="checkbox"> - </div> - <% }; %> -</div> - <script type="module" src="./widgets/general.js"></script> + <div class="some-block option-block"> + <h1 data-localise="__MSG_general__">General</h1> + </div> + <hr /> + <div class="some-block option-block"> + <h4 data-localise="__MSG_theme__">Theme</h4> + <select id="theme"> + <option value="detect" data-localise="__MSG_detect__">Detect</option> + <option value="light" data-localise="__MSG_light__">Light</option> + <option value="dark" data-localise="__MSG_dark__">Dark</option> + </select> + </div> + <div class="some-block option-block"> + <h4 data-localise="__MSG_network__">Network</h4> + <select id="network"> + <% for (const network in config.networks) { -%> + <option value="<%= network %>"><%= config.networks[network].name %></option> + <% }; %> + </select> + </div> + <div id="network-fallback"> + <div class="some-block option-block"> + <h4 data-localise="__MSG_networkFallback__">Fallback to clearnet if no instances are available for the current network</h4> + <input id="network-fallback-checkbox" type="checkbox" /> + </div> + </div> + <div class="some-block option-block"> + <h4 data-localise="__MSG_autoRedirect__"></h4> + <input id="auto-redirect" type="checkbox" /> + </div> + <form> + <div class="some-block option-block"> + <h4 data-localise="__MSG_latencyThreshold">Latency Threshold</h4> + <output id="latency-output" for="latencyInput" name="latencyOutput"></output> + <input id="latency-input" type="range" min="50" max="5000" value="1000" name="latencyInput" step="50" /> + </div> + </form> + <div class="some-block option-block"> + <h4 data-localise="__MSG_exceptions__"></h4> + </div> + <form id="custom-exceptions-instance-form"> + <div class="some-block option-block"> + <div class="some-block" style="padding: 0"> + <input id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" /> + <select id="exceptions-custom-instance-type"> + <option value="url">URL</option> + <option value="regex">Regex</option></select + > + </div> + <button class="add" id="exceptions-add-instance" type="submit"> + <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> + <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path> + </svg> + </button> + </div> + </form> + <div class="checklist" id="exceptions-custom-checklist"></div> + <div class="buttons buttons-inline"> + <a class="button button-inline" id="update-instances"> + <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> + <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path> + </svg> + <x data-localise="__MSG_updateInstances__">Update Instances</x></a + > + </div> + <div class="buttons buttons-inline"> + <label class="button button-inline" id="import_settings_text" for="import-settings"> + <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> + <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path></svg + > + <x data-localise="__MSG_importSettings__">Import Settings</x> + </label> + <input class="button button-inline" id="import-settings" type="file" style="display: none" /> <a class="button button-inline" id="export-settings"> + <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> + <path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg + > <x data-localise="__MSG_exportSettings__">Export Settings</x></a + > <a class="button button-inline" id="reset-settings"> + <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> + <path d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"></path> + <path d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z"></path> + </svg> + <x data-localise="__MSG_resetSettings__">Reset Settings</x></a + > + </div> + <script type="module" src="./widgets/general.js"></script> </section> diff --git a/src/pages/options/widgets/services.ejs b/src/pages/options/widgets/services.ejs index 44c6a9f3..c3019074 100644 --- a/src/pages/options/widgets/services.ejs +++ b/src/pages/options/widgets/services.ejs @@ -1,86 +1,84 @@ <% for (const service in config.services) { -%> <section class="option-block" id="<%= service %>_page"> - <div class="some-block option-block"> - <h1 data-localise="__MSG_<%= service %>__"><%= config.services[service].name %></h1> - </div> - <hr> - <div class="some-block option-block"> - <h4 data-localise="__MSG_enable__">Enable</h4> - <input id="<%= service %>-enabled" type="checkbox"> - </div> - <% if (Object.keys(config.services[service].frontends).length > 1) { %> - <div class="some-block option-block"> - <h4 data-localise="__MSG_frontend__">Frontend</h4> - <select id="<%= service %>-frontend"> - <% for (const frontend in config.services[service].frontends) { -%> - <option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option> - <% } %> - </select> - </div> - <% if (config.services[service].embeddable) { _%> - <div class="some-block option-block"> - <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4> - <select id="<%= service %>-embedFrontend"> - <% for (const frontend in config.services[service].frontends) { -%> - <% if (config.services[service].frontends[frontend].embeddable) { _%> - <option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option> - <% } _%> - <% } %> - </select> - </div> - <% } _%> - <% } _%> - <% if (config.services[service].embeddable) { _%> - <div class="some-block option-block"> - <h4 data-localise="__MSG_redirectType__">Redirect Type</h4> - <select id="<%= service %>-redirectType"> - <option value="both" data-localise="__MSG_both__">both</option> - <option value="sub_frame" data-localise="__MSG_onlyEmbedded__">Only Embedded</option> - <option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option> - </select> - </div> - <% } _%> - <hr> - <% for (const frontend in config.services[service].frontends) { -%> - <% if (config.services[service].frontends[frontend].instanceList) { _%> - <div id="<%= frontend %>"> - <% for (const network in config.networks) { -%> - <div class="<%= network %>"> - <div class="some-block option-block"> - <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> - </div> - <div class="checklist"></div> - <hr> - <div class="some-block option-block"> - <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> - </div> - <form class="custom-instance-form"> - <div class="some-block option-block"> - <input class="custom-instance" placeholder="http://<%= frontend %>.<%= config.networks[network].tld %>" type="url"> - <button class="add add-instance" type="submit"> - <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> - <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path> - </svg> - </button> - </div> - </form> - <div class="checklist custom-checklist"></div> - <% if (network == "clearnet") { _%> - <div class="buttons buttons-inline"> - <label class="button button-inline" id="latency-<%= frontend %>-label" for="latency-<%= frontend %>"> - <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> - <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> - </svg> - <x data-localise="__MSG_testInstancesLatency__">Test Instances Latency</x> - </label> - <input class="button button-inline" id="latency-<%= frontend %>" style="display:none;"> - </div> - <% } _%> - </div> - <% } %> - </div> - <% } _%> - <% } %> + <div class="some-block option-block"> + <h1 data-localise="__MSG_<%= service %>__"><%= config.services[service].name %></h1> + </div> + <hr /> + <div class="some-block option-block"> + <h4 data-localise="__MSG_enable__">Enable</h4> + <input id="<%= service %>-enabled" type="checkbox" /> + </div> + <div class="some-block option-block"> + <h4 data-localise="__MSG_show_in_popup__">Show in Popup</h4> + <input id="<%= service %>" type="checkbox" /> + </div> + <% if (Object.keys(config.services[service].frontends).length> 1) { %> + <div class="some-block option-block"> + <h4 data-localise="__MSG_frontend__">Frontend</h4> + <select id="<%= service %>-frontend"> + <% for (const frontend in config.services[service].frontends) { -%> + <option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option> + <% } %> + </select> + </div> + <% if (config.services[service].embeddable) { _%> + <div class="some-block option-block"> + <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4> + <select id="<%= service %>-embedFrontend"> + <% for (const frontend in config.services[service].frontends) { -%> <% if (config.services[service].frontends[frontend].embeddable) { _%> + <option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option> + <% } _%> <% } %> + </select> + </div> + <% } _%> <% } _%> <% if (config.services[service].embeddable) { _%> + <div class="some-block option-block"> + <h4 data-localise="__MSG_redirectType__">Redirect Type</h4> + <select id="<%= service %>-redirectType"> + <option value="both" data-localise="__MSG_both__">both</option> + <option value="sub_frame" data-localise="__MSG_onlyEmbedded__">Only Embedded</option> + <option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option> + </select> + </div> + <% } _%> + <hr /> + <% for (const frontend in config.services[service].frontends) { -%> <% if (config.services[service].frontends[frontend].instanceList) { _%> + <div id="<%= frontend %>"> + <% for (const network in config.networks) { -%> + <div class="<%= network %>"> + <div class="some-block option-block"> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> + </div> + <div class="checklist"></div> + <hr /> + <div class="some-block option-block"> + <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> + </div> + <form class="custom-instance-form"> + <div class="some-block option-block"> + <input class="custom-instance" placeholder="http://<%= frontend %>.<%= config.networks[network].tld %>" type="url" /> + <button class="add add-instance" type="submit"> + <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> + <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path> + </svg> + </button> + </div> + </form> + <div class="checklist custom-checklist"></div> + <% if (network=="clearnet" ) { _%> + <div class="buttons buttons-inline"> + <label class="button button-inline" id="latency-<%= frontend %>-label" for="latency-<%= frontend %>"> + <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> + <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path></svg + > + <x data-localise="__MSG_testInstancesLatency__">Test Instances Latency</x> + </label> + <input class="button button-inline" id="latency-<%= frontend %>" style="display: none" /> + </div> + <% } _%> + </div> + <% } %> + </div> + <% } _%> <% } %> </section> <% } %> <script type="module" src="./widgets/services.js"></script> diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 0df2f9fa..5f2871e4 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -79,7 +79,6 @@ select { margin: 0; max-width: 500px; border-radius: 3px; - cursor: pointer; } input[type="url"], @@ -110,11 +109,19 @@ section.option-block h2 { body.option { display: flex; padding: 40px; - width: 900px; + width: 1100px; +} + +section.links { + display: flex; + flex-wrap: wrap; + flex-direction: column; + width: 300px; + max-height: 720px; } section.links div { - margin: 20px 0; + margin: 10px; width: max-content; } @@ -458,7 +465,7 @@ body div section { display: none; } -div.about > div { +div.about>div { justify-content: start; width: 520px; } @@ -480,4 +487,4 @@ input:disabled { div.about a { width: 500px; display: inline-block; -} +} \ No newline at end of file |