devol
/
libredirect
mirror of https://codeberg.org/LibRedirect/libredirect.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improved design of sidebar and customize popup https://github.com/libredirect/libredirect/issues/369

This commit is contained in:
ManeraKai 2022-11-01 19:32:49 +03:00
parent 73cc5ce38d
commit cf7afda7e0
No known key found for this signature in database
GPG Key ID: 5ABC31FFD562E337
4 changed files with 332 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
src/config/config.json
View File

@ -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"
}
}
}
}

185
src/pages/options/widgets/general.ejs
View File

@ -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">&nbsp;
<select id="exceptions-custom-instance-type">
<option value="url">URL</option>
<option value="regex">Regex</option>
</select>&nbsp;
</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>&nbsp; &nbsp;</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>&nbsp;
<x data-localise="__MSG_importSettings__">Import Settings</x>
</label>
<input class="button button-inline" id="import-settings" type="file" style="display:none;">&nbsp; &nbsp;<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>&nbsp;
<x data-localise="__MSG_exportSettings__">Export Settings</x></a>&nbsp; &nbsp;<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" />&nbsp;
<select id="exceptions-custom-instance-type">
<option value="url">URL</option>
<option value="regex">Regex</option></select
>&nbsp;
</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
>&nbsp; &nbsp;
</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
>&nbsp;
<x data-localise="__MSG_importSettings__">Import Settings</x>
</label>
<input class="button button-inline" id="import-settings" type="file" style="display: none" />&nbsp; &nbsp;<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
>&nbsp; <x data-localise="__MSG_exportSettings__">Export Settings</x></a
>&nbsp; &nbsp;<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>

160
src/pages/options/widgets/services.ejs
View File

@ -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>&nbsp;
<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
>&nbsp;
<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>

17
src/pages/stylesheets/styles.css
View File

@ -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;
}
}