ourworld_web/www_mycelium
20
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

turn all white

Browse Source
This commit is contained in:
sasha-astiadi 2025-02-18 19:51:50 +08:00
parent d52d412b5a
commit bbd7043ab5
6 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/images/feature6a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

10
templates/partials/hero/myhero1.html
View File

@ -1,15 +1,15 @@
<div class=" fade-in bg-black "> <div class=" fade-in bg-semi-white">
<div class="lg:py-24 relative isolate"> <div class="lg:py-24 relative isolate">
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8">
<div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto"> <div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto">
<p class="text-base/7 font-light text-white tracking-wide">ABOUT</p> <p class="text-base/7 font-light text-black tracking-wide">ABOUT</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">Discover Mycelium</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">Discover Mycelium</h2>
<p class="text-left mt-4 text-pretty lg:text-lg text-md font-light text-gray-300 fade-in max-w-3xl"> <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light text-black fade-in max-w-3xl">
At the forefront of digital evolution lies Mycelium, a visionary project at the heart of the ThreeFold Grid. Mycelium is more than just a new technology; it's a transformative force reshaping the way we connect in the digital age. <br><br>We're on a mission to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds. At the forefront of digital evolution lies Mycelium, a visionary project at the heart of the ThreeFold Grid. Mycelium is more than just a new technology; it's a transformative force reshaping the way we connect in the digital age. <br><br>We're on a mission to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
</p> </p>
<div class="mt-6 flex"> <div class="mt-6 flex">
<a href="" class=" rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-stone-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a> <a href="" class=" rounded-2xl bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
</div> </div>
</div> </div>

2
templates/partials/hero/myhero2.html
View File

@ -1,4 +1,4 @@
<div class="bg-white pt-12 lg:pt-24 pb-6 fade-in-box"> <div class="bg-white pt-12 pb-6 fade-in-box">
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0"> <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0">
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 "> <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 ">
<p class="text-base/7 font-light text-black tracking-wide">BENEFITS</p> <p class="text-base/7 font-light text-black tracking-wide">BENEFITS</p>

22
templates/partials/hero/myhero3.html
View File

@ -1,9 +1,9 @@
<div class=" fade-in bg-black"> <div class=" fade-in bg-white">
<div class="lg:py-24 relative isolate"> <div class="lg:py-12 relative isolate">
<div class=" mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 pb-24"> <div class=" mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 pb-24">
<p class="text-base/7 font-light text-white tracking-wide">HOW IT WORKS</p> <p class="text-base/7 font-light text-white tracking-wide">HOW IT WORKS</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">Unraveling Mycelium's Secrets </h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">Unraveling Mycelium's Secrets </h2>
<p class="text-left mt-4 text-pretty lg:text-lg text-md font-light text-gray-300 fade-in max-w-3xl"> <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light text-black fade-in max-w-3xl">
Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks. Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.
</p> </p>
</div> </div>
@ -11,29 +11,29 @@
<div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto"> <div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto">
<dl class="space-y-8 text-base/7 lg:max-w-none"> <dl class="space-y-8 text-base/7 lg:max-w-none">
<div class="relative pl-9"> <div class="relative pl-9">
<dt class="font-semibold lg:text-lg text-base text-white"> <dt class="font-semibold lg:text-lg text-base text-black ">
Decentralized Nodes Decentralized Nodes
</dt> </dt>
<dd class="mt-2 text-gray-300 font-light">Mycelium operates through a network of decentralized nodes, similar to how nature's mycelium forms a decentralized network of threads. Each node acts as a connection point in the overall digital ecosystem.</dd> <dd class="mt-2 text-black font-light">Mycelium operates through a network of decentralized nodes, similar to how nature's mycelium forms a decentralized network of threads. Each node acts as a connection point in the overall digital ecosystem.</dd>
</div> </div>
<div class="relative pl-9"> <div class="relative pl-9">
<dt class="font-semibold lg:text-lg text-base text-white"> <dt class="font-semibold lg:text-lg text-base text-black ">
Efficient Data Routing Efficient Data Routing
</dt> </dt>
<dd class="mt-2 text-gray-300 font-light">Mycelium optimizes data routing by choosing the most efficient path for communication. Data travels along the shortest path in terms of latency, ensuring that information reaches its destination swiftly.</dd> <dd class="mt-2 text-black font-light">Mycelium optimizes data routing by choosing the most efficient path for communication. Data travels along the shortest path in terms of latency, ensuring that information reaches its destination swiftly.</dd>
</div> </div>
<div class="relative pl-9"> <div class="relative pl-9">
<dt class=" font-semibold lg:text-lg text-base text-white"> <dt class=" font-semibold lg:text-lg text-base text-black ">
End-to-End Encryption End-to-End Encryption
</dt> </dt>
<dd class="mt-2 text-gray-300 font-light">Each node in the system is identified by a unique key pair. Data between nodes is encrypted using secret keys derived from these pairs. This ensures that data remains confidential, enhancing the privacy of the network.</dd> <dd class="mt-2 text-black font-light">Each node in the system is identified by a unique key pair. Data between nodes is encrypted using secret keys derived from these pairs. This ensures that data remains confidential, enhancing the privacy of the network.</dd>
</div> </div>
</dl> </dl>
</div> </div>
<div class="lg:order-first mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2"> <div class="lg:order-first mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/feature6.png" <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/feature6a.png"
alt="Mobile App Screenshot"> alt="Mobile App Screenshot">
</div> </div>
</div> </div>

36
templates/partials/hero/myhero6.html
View File

@ -13,10 +13,10 @@
}, },
}; };
</script> </script>
<main class="relative flex flex-col justify-center overflow-hidden bg-black"> <main class="relative flex flex-col justify-center overflow-hidden bg-white">
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-20"> <div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-12 border-t-2">
<h1 class="text-3xl font-normal tracking-tight text-white">Frequently Asked Questions</h1> <h1 class="text-3xl font-normal tracking-tight text-black">Frequently Asked Questions</h1>
<!-- Accordion component --> <!-- Accordion component -->
<div class="divide-y divide-white/50 my-10"> <div class="divide-y divide-white/50 my-10">
@ -31,7 +31,7 @@
:aria-expanded="expanded" :aria-expanded="expanded"
aria-controls="faqs-text-01" aria-controls="faqs-text-01"
> >
<span style="color: #fff;">What is Mycelium?</span> <span style="color: #000;">What is Mycelium?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@ -42,11 +42,11 @@
id="faqs-text-01" id="faqs-text-01"
role="region" role="region"
aria-labelledby="faqs-title-01" aria-labelledby="faqs-title-01"
class="grid text-sm text-slate-200 overflow-hidden transition-all duration-300 ease-in-out" class="grid text-sm text-black overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'" :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
> >
<div class="overflow-hidden"> <div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light"> <p class="pb-3 text-black text-base font-light">
Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications. Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications.
</p> </p>
</div> </div>
@ -63,7 +63,7 @@
:aria-expanded="expanded" :aria-expanded="expanded"
aria-controls="faqs-text-02" aria-controls="faqs-text-02"
> >
<span style="color: #fff;">How do I install the Mycelium app?</span> <span style="color: #000;">How do I install the Mycelium app?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@ -78,7 +78,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'" :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
> >
<div class="overflow-hidden"> <div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light"> <p class="pb-3 text-black text-base font-light">
The Mycelium app supports Linux, macOS, and Windows. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable. The Mycelium app supports Linux, macOS, and Windows. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable.
</p> </p>
</div> </div>
@ -95,7 +95,7 @@
:aria-expanded="expanded" :aria-expanded="expanded"
aria-controls="faqs-text-04" aria-controls="faqs-text-04"
> >
<span style="color: #fff;">How can I find and use my Mycelium address?</span> <span style="color: #000;">How can I find and use my Mycelium address?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@ -110,7 +110,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'" :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
> >
<div class="overflow-hidden"> <div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light"> <p class="pb-3 text-black text-base font-light">
Upon using the Mycelium app, you're assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface. Upon using the Mycelium app, you're assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface.
</p> </p>
</div> </div>
@ -127,7 +127,7 @@
:aria-expanded="expanded" :aria-expanded="expanded"
aria-controls="faqs-text-05" aria-controls="faqs-text-05"
> >
<span style="color: #fff;">Can I deploy workloads on the TFGrid using Mycelium?</span> <span style="color: #000;">Can I deploy workloads on the TFGrid using Mycelium?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@ -142,7 +142,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'" :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
> >
<div class="overflow-hidden"> <div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light"> <p class="pb-3 text-black text-base font-light">
Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation. Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation.
</p> </p>
</div> </div>
@ -159,7 +159,7 @@
:aria-expanded="expanded" :aria-expanded="expanded"
aria-controls="faqs-text-06" aria-controls="faqs-text-06"
> >
<span style="color: #fff;">Is there an API available for Mycelium?</span> <span style="color: #000;">Is there an API available for Mycelium?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@ -174,7 +174,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'" :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
> >
<div class="overflow-hidden"> <div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light"> <p class="pb-3 text-black text-base font-light">
Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository
</p> </p>
</div> </div>
@ -191,7 +191,7 @@
:aria-expanded="expanded" :aria-expanded="expanded"
aria-controls="faqs-text-04" aria-controls="faqs-text-04"
> >
<span style="color: #fff;">What should I do if I encounter issues during installation or usage?</span> <span style="color: #000;">What should I do if I encounter issues during installation or usage?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@ -206,7 +206,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'" :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
> >
<div class="overflow-hidden"> <div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light"> <p class="pb-3 text-black text-base font-light">
If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations. If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations.
</p> </p>
</div> </div>
@ -223,7 +223,7 @@
:aria-expanded="expanded" :aria-expanded="expanded"
aria-controls="faqs-text-04" aria-controls="faqs-text-04"
> >
<span style="color: #fff;">How does Mycelium handle routing within its network?</span> <span style="color: #000;">How does Mycelium handle routing within its network?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@ -238,7 +238,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'" :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
> >
<div class="overflow-hidden"> <div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light"> <p class="pb-3 text-black text-base font-light">
Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network. Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network.
</p> </p>
</div> </div>

2
templates/partials/hero/myhero7.html
View File

@ -6,7 +6,7 @@
<p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">Join the Mycelium network and be a part of the decentralized movement.</p> <p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">Join the Mycelium network and be a part of the decentralized movement.</p>
<div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start"> <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Download Now</a> <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Download Now</a>
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-100">Read Manual <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-vla hover:text-gray-100">Read Manual <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
<div class="relative mt-16 h-80 lg:mt-8"> <div class="relative mt-16 h-80 lg:mt-8">