mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
enhance ui and fix
*fix crown svg on menu *update menu to get overflow of pages and plugins pages to always fit screen height *enhance and highlight some elements on pro tab content * add "preview" mention when no pro version activated + not allowed cursor on hover
This commit is contained in:
Jordan Blasenhauer
parent
ec29c70d90
commit
9c38c41e8c
5 changed files with 68 additions and 69 deletions
File diff suppressed because one or more lines are too long
|
|
@ -67,6 +67,9 @@ module.exports = {
|
|||
"focus:bg-emerald-500/80",
|
||||
"col-span-12",
|
||||
"w-full",
|
||||
"text-yellow-500",
|
||||
"text-green-500",
|
||||
"text-red-500"
|
||||
],
|
||||
|
||||
presets: [],
|
||||
|
|
|
|||
11
src/ui/templates/account.html
vendored
11
src/ui/templates/account.html
vendored
|
|
@ -57,7 +57,8 @@
|
|||
</div>
|
||||
{% set pro_info = {
|
||||
"message" : "Pro version" if is_pro_version else "Pro version but exceeding services" if pro_status == "active" and pro_overlapped else "Pro version is expired" if pro_status == "expired" else "Pro version suspended" if pro_status == "suspended" else "You are using free version",
|
||||
"link_message" : "All features available" if is_pro_version else "Awaiting compliance" if pro_status == "active" and pro_overlapped else "Renew license" if pro_status == "expired" else "Talk to team" if pro_status == "suspended" else "Upgrade to pro",
|
||||
"link_message" : "All features available" if is_pro_version else "Awaiting compliance" if pro_status == "active" and pro_overlapped else "Renew license" if pro_status == "expired" else "Suspended license" if pro_status == "suspended" else "Upgrade to pro",
|
||||
"link_message_color" : "text-green-500" if is_pro_version else "text-yellow-500" if pro_status == "active" and pro_overlapped else "text-yellow-500" if pro_status == "expired" else "text-red-500" if pro_status == "suspended" else "text-yellow-500",
|
||||
"icon" : "pro" if is_pro_version else "free"
|
||||
} %}
|
||||
<div data-tab-item="pro"
|
||||
|
|
@ -65,7 +66,7 @@
|
|||
<div class="col-span-12">
|
||||
<h5 class="text-xl my-1 text-center transition duration-300 ease-in-out font-bold m-0 mb-4 dark:text-gray-200">PRO</h5>
|
||||
<div class="flex justify-center items-center">
|
||||
<p class="mb-0 mr-2 dark:text-gray-300">{{ pro_info['message'] }}</p>
|
||||
<p class="mb-0 mr-2 dark:text-gray-300 font-semibold">{{ pro_info['message'] }}</p>
|
||||
<div role="img"
|
||||
aria-label="pro"
|
||||
class="dark:brightness-90 inline-block w-8 h-8 text-center rounded-circle bg-yellow-500">
|
||||
|
|
@ -91,7 +92,7 @@
|
|||
</div>
|
||||
{% if pro_info['link_message'] %}
|
||||
<div class="flex justify-center mt-2">
|
||||
<a class="text-center font-semibold text-yellow-500 underline"
|
||||
<a class="text-center font-semibold {{ pro_info['link_message_color'] }} underline"
|
||||
target="_blank"
|
||||
href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui#pro">{{ pro_info['link_message'] }}</a>
|
||||
</div>
|
||||
|
|
@ -99,10 +100,10 @@
|
|||
{% if is_pro_version %}
|
||||
<div class="mt-2 flex flex-col justify-center items-center">
|
||||
{% if pro_expire %}
|
||||
<p class="my-2 mr-2 dark:text-gray-300 text-center">Your license is valid until {{ pro_expire }}</p>
|
||||
<p class="my-2 mr-2 dark:text-gray-300 text-center">Your license is valid until <span class="font-bold">{{ pro_expire }}</span></p>
|
||||
{% endif %}
|
||||
{% if pro_services %}
|
||||
<p class="my-2 mr-2 dark:text-gray-300 text-center">You can handle {{ pro_services }} services</p>
|
||||
<p class="my-2 mr-2 dark:text-gray-300 text-center font-bold">{{ pro_services }} services plan</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
|||
117
src/ui/templates/menu.html
vendored
117
src/ui/templates/menu.html
vendored
|
|
@ -15,7 +15,7 @@
|
|||
<!-- end float button-->
|
||||
<!-- left sidebar -->
|
||||
<aside data-sidebar-menu
|
||||
class="transition-all mt-[4.5rem] fixed flex inset-y-0 flex-wrap justify-between w-full p-0 my-4 overflow-y-auto antialiased duration-200 -translate-x-full bg-white border-0 shadow-xl dark:shadow-none dark:bg-slate-850 dark:brightness-110 max-w-64 z-[1000] xl:ml-6 rounded-2xl xl:left-0 xl:translate-x-0"
|
||||
class="transition-all mt-[4.5rem] fixed flex flex-col justify-between inset-y-0 max-h-screen w-full p-0 my-4 antialiased duration-200 -translate-x-full bg-white border-0 shadow-xl dark:shadow-none dark:bg-slate-850 dark:brightness-110 max-w-64 z-[1000] xl:ml-6 rounded-2xl xl:left-0 xl:translate-x-0"
|
||||
aria-hidden="true"
|
||||
id="sidebar-menu">
|
||||
<!-- close btn-->
|
||||
|
|
@ -31,32 +31,35 @@
|
|||
</button>
|
||||
<!-- close btn-->
|
||||
<!-- top sidebar -->
|
||||
<div class="w-full">
|
||||
<div class="mt-6">
|
||||
<!-- logo and version -->
|
||||
<div class="h-19">
|
||||
<div class="w-full">
|
||||
<a aria-label="link to home"
|
||||
class="flex justify-center px-8 py-6 m-0 text-sm whitespace-nowrap dark:text-white text-slate-700"
|
||||
href="{% if current_endpoint == 'home' %}#{% else %}loading?next={{ url_for("home") }}{% endif %}">
|
||||
class="flex justify-center px-8 m-0 text-sm whitespace-nowrap dark:text-white text-slate-700"
|
||||
href="{% if current_endpoint == 'home' %}#{% else %}loading?next={{ url_for("home") }}{% endif %}">
|
||||
<img src="images/logo-menu-2.png"
|
||||
class="hidden dark:inline w-28 sm:w-36 transition-all duration-200 h-8 sm:h-10"
|
||||
alt="main logo" />
|
||||
class="hidden dark:inline w-28 sm:w-36 transition-all duration-200 h-8 sm:h-10"
|
||||
alt="main logo" />
|
||||
<img src="images/logo-menu.png"
|
||||
class="dark:hidden inline w-28 sm:w-36 transition-all duration-200 h-8 sm:h-10"
|
||||
alt="main logo" />
|
||||
class="dark:hidden inline w-28 sm:w-36 transition-all duration-200 h-8 sm:h-10"
|
||||
alt="main logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-full px-1">
|
||||
<div class="mt-2 w-full px-1">
|
||||
<h1 class="mb-0.5 tracking-normal text-primary text-center text-lg break-words whitespace-normal dark:text-gray-300">
|
||||
{{ username }}
|
||||
</h1>
|
||||
<a class="block underline mb-2 text-gray-600 dark:text-gray-400 text-sm text-center hover:brightness-90"
|
||||
href="{% if current_endpoint == 'account' %}#{% else %}loading?next={{ url_for("account") }}{% endif %}">manage account
|
||||
href="{% if current_endpoint == 'account' %}#{% else %}loading?next={{ url_for("account") }}{% endif %}">manage account
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<hr class="h-px mt-0 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent" />
|
||||
<!-- end logo version -->
|
||||
</div>
|
||||
|
||||
<!-- list items -->
|
||||
<div class="items-center block w-auto max-h-screen overflow-auto h-sidenav grow basis-full">
|
||||
<div class="items-center block w-auto overflow-auto grow basis-full">
|
||||
<!-- default anchor -->
|
||||
<ul class="flex flex-col pl-0 mb-0">
|
||||
{% set paths = [
|
||||
|
|
@ -197,58 +200,50 @@
|
|||
<!-- end loop paths-->
|
||||
</ul>
|
||||
<!-- end default anchor -->
|
||||
<!-- plugin list -->
|
||||
<div>
|
||||
<ul>
|
||||
<li class="w-full mt-4">
|
||||
<h6 class="pl-6 ml-2 text-xs font-bold leading-tight uppercase dark:text-gray-400 dark:opacity-100 opacity-60">
|
||||
PLUGINS PAGE
|
||||
</h6>
|
||||
</li>
|
||||
{% for plugin in plugins %}
|
||||
{% if plugin['page'] and plugin['type'] != "pro" %}
|
||||
<li class="mt-0.5 w-full">
|
||||
<a class="dark:hover:bg-primary/20 hover:bg-primary/5 hover:rounded-lg dark:text-gray-200 py-1 text-sm ease-nav-brand my-0 mx-2 flex items-center whitespace-nowrap px-4 transition"
|
||||
href="{{ request.url_root }}plugins/{{ plugin['id'] }}">
|
||||
<div class="mr-2 flex flex-wrap items-center justify-center rounded-lg bg-center stroke-0 text-center p-1 xl:p-1.5">
|
||||
<svg class="fill-gray-500 h-5 w-5 relative"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 384 512">
|
||||
<path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease">{{ plugin['name'] }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if plugin['page'] and plugin['type'] == "pro" %}
|
||||
<li class="mt-0.5 w-full">
|
||||
<a {% if not is_pro_version %}target="_blank" rel="noopener"{% endif %} class="dark:hover:bg-primary/20 hover:bg-primary/5 hover:rounded-lg dark:text-gray-200 py-1 text-sm ease-nav-brand my-0 mx-2 flex items-center whitespace-nowrap px-4 transition" href="{% if not is_pro_version %}https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui#pro{% else %}javascript:void(0){% endif %}"
|
||||
<div class="mr-2 flex flex-wrap items-center justify-center rounded-lg bg-center stroke-0 text-center p-1 xl:p-1.5">
|
||||
<svg class="h-5 w-5 dark:brightness-90 relative"
|
||||
viewBox="0 0 48 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="fill-yellow-500" d="M43.218 28.2327L43.6765 23.971C43.921 21.6973 44.0825 20.1957 43.9557 19.2497L44 19.25C46.071 19.25 47.75 17.5711 47.75 15.5C47.75 13.4289 46.071 11.75 44 11.75C41.929 11.75 40.25 13.4289 40.25 15.5C40.25 16.4366 40.5935 17.2931 41.1613 17.9503C40.346 18.4535 39.2805 19.515 37.6763 21.1128C36.4405 22.3438 35.8225 22.9593 35.1333 23.0548C34.7513 23.1075 34.3622 23.0532 34.0095 22.898C33.373 22.6175 32.9485 21.8567 32.0997 20.335L27.6262 12.3135C27.1025 11.3747 26.6642 10.5889 26.2692 9.95662C27.89 9.12967 29 7.44445 29 5.5C29 2.73857 26.7615 0.5 24 0.5C21.2385 0.5 19 2.73857 19 5.5C19 7.44445 20.11 9.12967 21.7308 9.95662C21.3358 10.589 20.8975 11.3746 20.3738 12.3135L15.9002 20.335C15.0514 21.8567 14.627 22.6175 13.9905 22.898C13.6379 23.0532 13.2487 23.1075 12.8668 23.0548C12.1774 22.9593 11.5595 22.3438 10.3238 21.1128C8.71968 19.515 7.6539 18.4535 6.83882 17.9503C7.4066 17.2931 7.75 16.4366 7.75 15.5C7.75 13.4289 6.07107 11.75 4 11.75C1.92893 11.75 0.25 13.4289 0.25 15.5C0.25 17.5711 1.92893 19.25 4 19.25L4.04428 19.2497C3.91755 20.1957 4.07905 21.6973 4.32362 23.971L4.782 28.2327C5.03645 30.5982 5.24802 32.849 5.50717 34.875H42.4928C42.752 32.849 42.9635 30.5982 43.218 28.2327Z" fill="#1C274C" />
|
||||
<path class="fill-yellow-500" d="M21.2803 45.5H26.7198C33.8098 45.5 37.3545 45.5 39.7198 43.383C40.7523 42.4588 41.4057 40.793 41.8775 38.625H6.1224C6.59413 40.793 7.24783 42.4588 8.2802 43.383C10.6454 45.5 14.1903 45.5 21.2803 45.5Z" fill="#1C274C" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-1 duration-300 {% if not is_pro_version %}opacity-80 dark:opacity-60{% endif %} pointer-events-none ease">{{ plugin['name'] }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<!-- end plugin list -->
|
||||
</div>
|
||||
<ul>
|
||||
<li class="w-full mt-4">
|
||||
<h6 class="pl-6 ml-2 text-xs font-bold leading-tight uppercase dark:text-gray-400 dark:opacity-100 opacity-60">
|
||||
PLUGINS PAGE
|
||||
</h6>
|
||||
</li>
|
||||
{% for plugin in plugins %}
|
||||
{% if plugin['page'] %}
|
||||
<li class="mt-0.5 w-full">
|
||||
<a class="dark:hover:bg-primary/20 hover:bg-primary/5 hover:rounded-lg dark:text-gray-200 py-1 text-sm ease-nav-brand my-0 mx-2 flex items-center whitespace-nowrap px-4 transition"
|
||||
href="{{ request.url_root }}plugins/{{ plugin['id'] }}">
|
||||
<div class="mr-2 flex flex-wrap items-center justify-center rounded-lg bg-center stroke-0 text-center p-1 xl:p-1.5">
|
||||
{% if plugin['type'] != "pro" %}
|
||||
<svg class="fill-gray-500 h-5 w-5 relative"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 384 512">
|
||||
<path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z" />
|
||||
</svg>
|
||||
{% endif %}
|
||||
{% if plugin['type'] == "pro" %}
|
||||
<svg class="h-5 w-5 dark:brightness-90 relative"
|
||||
viewBox="0 0 48 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="fill-yellow-500" d="M43.218 28.2327L43.6765 23.971C43.921 21.6973 44.0825 20.1957 43.9557 19.2497L44 19.25C46.071 19.25 47.75 17.5711 47.75 15.5C47.75 13.4289 46.071 11.75 44 11.75C41.929 11.75 40.25 13.4289 40.25 15.5C40.25 16.4366 40.5935 17.2931 41.1613 17.9503C40.346 18.4535 39.2805 19.515 37.6763 21.1128C36.4405 22.3438 35.8225 22.9593 35.1333 23.0548C34.7513 23.1075 34.3622 23.0532 34.0095 22.898C33.373 22.6175 32.9485 21.8567 32.0997 20.335L27.6262 12.3135C27.1025 11.3747 26.6642 10.5889 26.2692 9.95662C27.89 9.12967 29 7.44445 29 5.5C29 2.73857 26.7615 0.5 24 0.5C21.2385 0.5 19 2.73857 19 5.5C19 7.44445 20.11 9.12967 21.7308 9.95662C21.3358 10.589 20.8975 11.3746 20.3738 12.3135L15.9002 20.335C15.0514 21.8567 14.627 22.6175 13.9905 22.898C13.6379 23.0532 13.2487 23.1075 12.8668 23.0548C12.1774 22.9593 11.5595 22.3438 10.3238 21.1128C8.71968 19.515 7.6539 18.4535 6.83882 17.9503C7.4066 17.2931 7.75 16.4366 7.75 15.5C7.75 13.4289 6.07107 11.75 4 11.75C1.92893 11.75 0.25 13.4289 0.25 15.5C0.25 17.5711 1.92893 19.25 4 19.25L4.04428 19.2497C3.91755 20.1957 4.07905 21.6973 4.32362 23.971L4.782 28.2327C5.03645 30.5982 5.24802 32.849 5.50717 34.875H42.4928C42.752 32.849 42.9635 30.5982 43.218 28.2327Z" fill="#1C274C" />
|
||||
<path class="fill-yellow-500" d="M21.2803 45.5H26.7198C33.8098 45.5 37.3545 45.5 39.7198 43.383C40.7523 42.4588 41.4057 40.793 41.8775 38.625H6.1224C6.59413 40.793 7.24783 42.4588 8.2802 43.383C10.6454 45.5 14.1903 45.5 21.2803 45.5Z" fill="#1C274C" />
|
||||
</svg>
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease">{{ plugin['name'] }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<!-- end plugin list -->
|
||||
</div>
|
||||
<!-- end top sidebar -->
|
||||
|
||||
<!-- end list items -->
|
||||
</div>
|
||||
<!-- end top sidebar -->
|
||||
<!-- bottom sidebar -->
|
||||
<div class="w-full flex flex-col justify-end m-4">
|
||||
<!-- bottom sidebar -->
|
||||
<div class="flex flex-col justify-end mx-4 mt-2 mb-4">
|
||||
<!-- dark/light mode -->
|
||||
<div class="min-h-6 my-4 ml-12 flex justify-start">
|
||||
<div class="min-h-6 ml-12 my-4 flex justify-start">
|
||||
<input type="hidden"
|
||||
id="csrf_token"
|
||||
name="csrf_token"
|
||||
|
|
|
|||
4
src/ui/templates/plugins.html
vendored
4
src/ui/templates/plugins.html
vendored
|
|
@ -7,7 +7,7 @@
|
|||
{"name" : "TOTAL PLUGINS", "data" : plugins|length|string},
|
||||
{"name" : "INTERNAL PLUGINS", "data" : plugins_count_internal|string},
|
||||
{"name" : "EXTERNAL PLUGINS", "data" : plugins_count_external|string},
|
||||
{"name" : "PRO PLUGINS", "data" : plugins_count_pro|string},
|
||||
{"name" : "PRO PLUGINS", "data" : plugins_count_pro|string if is_pro_version else plugins_count_pro|string + ' (preview)'},
|
||||
] %}
|
||||
<div class="h-fit p-4 col-span-12 md:col-span-5 2xl:col-span-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
|
||||
<h5 class="col-span-12 mb-4 font-bold dark:text-white/90">INFO</h5>
|
||||
|
|
@ -154,7 +154,7 @@
|
|||
<div data-plugins-list class="grid grid-cols-12 gap-3">
|
||||
{% for plugin in plugins %}
|
||||
<div data-plugins-type="{{ plugin['type'] }}"
|
||||
class="py-3 min-h-12 relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 p-1 flex justify-between items-center transition rounded {% if plugin['type'] != 'pro' or plugin['type'] == 'pro' and is_pro_version %} bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800 {% else %} bg-gray-300 dark:bg-gray-800 {% endif %}">
|
||||
class="py-3 min-h-12 relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 p-1 flex justify-between items-center transition rounded {% if plugin['type'] != 'pro' or plugin['type'] == 'pro' and is_pro_version %} bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800 {% else %} cursor-not-allowed bg-gray-300 dark:bg-gray-800 {% endif %}">
|
||||
<p data-plugins-content
|
||||
class="{% if plugin['type'] == 'pro' and not is_pro_version %} opacity-80 dark:opacity-60 {% endif %} ml-3 mr-2 break-words mb-0 transition duration-300 ease-in-out text-left text-sm md:text-base text-slate-700 dark:text-gray-200">
|
||||
{{ plugin['name'] }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue