ourworld_web/www_mycelium
21
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

update dark light mode

Browse Source
This commit is contained in:
Ehab Hassan
2025-05-22 12:05:08 +03:00
parent ecfae1fa72
commit 417f1d0004
16 changed files with 238 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
templates/partials/header.html
View File

@@ -4,12 +4,17 @@
<header id="header-container">
<div class="z-20 fixed top-0 left-0 right-0 lg:absolute w-full">
<div class="relative z-50">
<div class="bg-white mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
<div>
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
{# <div>
<a href="{{get_url(path='/')}}" class="flex">
<img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="Mycelium Logo" />
</a>
</div>
</div> #}
<a href="{{ get_url(path='/') }}" class="flex">
<img id="lightLogo" src="{{ get_url(path=section.extra.logoPathLight) }}" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
<img id="darkLogo" src="{{ get_url(path=section.extra.logoPathDark) }}" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
</a>
<div class="-mr-2 -my-2 lg:hidden">
<button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border border-gray-900 rounded-md transition duration-200 ease-in-out">
<!-- Heroicon name: menu -->
@@ -36,7 +41,7 @@
{% set current = get_url(path=link_path[1]) ~ "/" %}
{% if header_label is containing("http") %}
{% if header_label is not containing("threefold") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
@@ -45,14 +50,14 @@
{{link_label}}
</a>
{% else %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% else %}
<div class="relative">
{% set button_id = header_label ~ "-menu-btn" | slugify %}
<button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3 text-black group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
<button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3 group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
<span>{{ header_label }}</span>
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button>
@@ -62,16 +67,16 @@
{% endif %}
{% endfor %}
<a href="https://threefold.info/mycelium/docs/"
class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150" target="_blank">
class="text-lg py-3 leading-6 font-light text-pretty tracking-wide focus:outline-none focus:text-gray-200 transition ease-in-out duration-150" target="_blank">
Docs
</a>
</nav>
<div class="hidden md:inline-block md:order-last">
<div class="inline-flex">
<div class="inline-flex justify-center items-center">
{# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
<li class="ml-4">
<a href="https://t.me/threefoldnews" target="_blank" class="text-black">
<a href="https://t.me/threefoldnews" target="_blank" class="">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
@@ -91,7 +96,7 @@
<a
href="javascript:;"
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
class="text-black"
class=""
>
<svg
aria-hidden="true"
@@ -111,7 +116,19 @@
</a>
</li>
</ul> #}
<a href="/download" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-600">Get Mycelium</a>
<div class="theme-toggle mx-4">
<label for="lightModeSwitch" class="switch">
<i class="fa-solid fa-sun" id="lightIcon"></i>
<input type="checkbox" id="lightModeSwitch">
<span class="slider"></span>
<i class="fas fa-moon" id="darkIcon"></i>
</label>
</div>
<a href="/download" class="blinking-effect dashboard rounded-2xl border border-gray-200 bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-600">Get Mycelium</a>
</div>
</div>
</div>
@@ -165,18 +182,18 @@
{% set link_path = header_label | split(pat="%22") | safe%}
{% if header_label is containing("http") %}
{% if header_label is not containing("threefold") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150">
<a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% else %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-black focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal hover: focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% else %}
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-black group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-black transition ease-in-out duration-150">
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus: transition ease-in-out duration-150">
{{ header_label }}
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button>
@@ -200,11 +217,11 @@
{% include "partials/socialLinks.html" %}
</div> #}
<a href="https://threefold.info/mycelium/docs/"
class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150" target="_blank">
class="text-lg px-8 py-3 leading-6 font-normal hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150" target="_blank">
Docs
</a>
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
<a href="/download" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-black shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get Mycelium</a>
<a href="/download" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get Mycelium</a>
</div>
</nav>
</div>
@@ -230,4 +247,88 @@
color: #c7c7c7 !important;
}
.theme-toggle {
border: none !important;
box-shadow: none !important;
}
/* logo image */
.light {
display: block; /* Show dark logo by default */
}
.dark {
display: none; /* Hide light logo by default */
}
.light-mode .light {
display: none; /* Hide dark logo in light mode */
}
.light-mode .dark {
display: block;/* Show light logo in light mode */
}
/* Styling for the switch container */
.switch {
position: relative;
display: inline-flex;
align-items: center;
width: 50px;
height: 25px;
background: #ccc;
border-radius: 50px;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
/* Hide the default checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* Slider (toggle button) */
.slider {
position: absolute;
top: 2px;
left: 3px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.3s ease-in-out;
}
/* Show moon by default (dark mode) */
#lightIcon {
display: block;
margin-left: 5px;
color: white;
}
#darkIcon {
display: inline-block;
margin-left: 5px;
}
/* When light mode is active */
.light-mode .switch {
background: #111; /* Dark background in light mode */
}
.light-mode .slider {
transform: translateX(25px); /* Move slider to the right */
}
.light-mode #lightIcon {
display: inline-block;
color: white;
}
.light-mode #darkIcon {
display: none;
}
</style>