178 lines
9.4 KiB
HTML
178 lines
9.4 KiB
HTML
<div class="bg-white pt-24 pb-10 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-2xl px-6 lg:max-w-7xl lg:px-8 ">
|
|
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-black">Download Mycelium</h2>
|
|
<h3 class="mx-auto fade-in text-left lg:text-3xl text-2xl leading-snug font-light tracking-tight text-black">Nature's Blueprint for Digital Connectivity</h2>
|
|
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light text-black fade-in">
|
|
Get Mycelium for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently.
|
|
</p>
|
|
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light text-black fade-in">
|
|
Not sure how it works? <a href="https://manual.threefold.io/documentation/system_administrators/mycelium/mycelium_app.html" class="font-semibold" target="_blanks"><u>Read the manual.</u></a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="pb-12">
|
|
<div class="max-w-7xl mx-8 lg:mx-auto">
|
|
<div class="mx-auto max-w-2xl lg:max-w-none">
|
|
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-4">
|
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-transparent items-start">
|
|
<img src="/images/icons/apple.svg" alt="Apple" class="w-16 h-16 justify-start">
|
|
<dt class="mt-2 flex items-starts gap-x-3 text-base lg:text-md rounded-2xl font-semibold text-black">
|
|
Download for iOS & MacOS
|
|
</dt>
|
|
<dd class="mt-1 flex flex-auto flex-col">
|
|
<p class="flex-auto leading-normal font-light text-black text-sm">Download Mycelium App from the Apple Store.</p>
|
|
<p class="mt-3">
|
|
<a href="https://apps.apple.com/app/id6504277565" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Download Now <span aria-hidden="true">→</span></a>
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-transparent hover:bg-transparent items-start">
|
|
<img src="/images/icons/windows.svg" alt="Windows" class="w-16 h-16 justify-start">
|
|
<dt class="flex items-center gap-x-3 mt-2 text-base lg:text-md rounded-2xl font-semibold text-black">
|
|
Download for Windows
|
|
</dt>
|
|
<dd class="mt-1 flex flex-auto flex-col">
|
|
<p class="flex-auto leading-normal font-light text-black text-sm">Download the Mycelium App for Windows directly from its Github repository.</p>
|
|
<p class="mt-3">
|
|
<a href="https://github.com/threefoldtech/myceliumflut/releases" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Download Now <span aria-hidden="true">→</span></a>
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-transparent hover:bg-transparent items-start">
|
|
<img src="/images/icons/android.svg" alt="Android" class="w-16 h-16 justify-start">
|
|
<dt class="mt-2 flex items-center gap-x-3 text-base lg:text-md rounded-2xl font-semibold text-black">
|
|
Download for Android
|
|
</dt>
|
|
<dd class="mt-1 flex flex-auto flex-col">
|
|
<p class="flex-auto leading-normal font-light text-black text-sm">
|
|
Download Mycelium from the Google Play Store.</p>
|
|
<p class="mt-3">
|
|
<a href="https://play.google.com/store/apps/details?id=tech.threefold.mycelium" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Download Now <span aria-hidden="true">→</span></a>
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-transparent hover:bg-transparent items-start">
|
|
<img src="/images/icons/linux.png" alt="Android" class="w-16 h-16 justify-start">
|
|
<dt class="mt-2 flex items-center gap-x-3 text-base lg:text-md rounded-2xl font-semibold text-black">
|
|
Download for Linux
|
|
</dt>
|
|
<dd class="mt-1 flex flex-auto flex-col">
|
|
<p class="flex-auto leading-normal font-light text-black text-sm">
|
|
Download the Mycelium binary for Linux directly from its Github repository.</p>
|
|
<p class="mt-3">
|
|
<a href="https://github.com/threefoldtech/mycelium/releases/latest" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Download Now <span aria-hidden="true">→</span></a>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<hr class="border-t border-gray-200 my-12">
|
|
</div>
|
|
|
|
<section class="pb-12 bg-white">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl lg:max-w-none">
|
|
<div class="fade-in-box">
|
|
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-black mb-6">
|
|
Explore Mycelium
|
|
</h2>
|
|
<h3 class="mx-auto fade-in text-left lg:text-3xl text-2xl leading-snug font-light tracking-tight text-black">
|
|
Start the Mycelium app and access the Mycelium ecosystem
|
|
</h3>
|
|
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light text-black fade-in">
|
|
The following links are showcase apps running on the ThreeFold Grid via the Mycelium Network.
|
|
You can only access those websites while using Mycelium.
|
|
</p>
|
|
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light text-black fade-in">
|
|
This is just a glimpse of what is possible with Mycelium.
|
|
</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-6">
|
|
<a href="http://[40d:51ba:e938:6fba:ff0f:0:200:2]:8080/"
|
|
class="p-4 rounded-lg border border-gray-200 hover:border-gray-300 transition-all">
|
|
<p class="font-semibold text-black">Open WebUI</p>
|
|
<p class="text-sm text-gray-600 break-all">http://[40d:51ba:e938:6fba:ff0f:0:200:2]:8080/</p>
|
|
</a>
|
|
|
|
<a href="http://[4fe:8b20:9508:5313:ff0f:0:200:2]"
|
|
class="p-4 rounded-lg border border-gray-200 hover:border-gray-300 transition-all">
|
|
<p class="font-semibold text-black">Librespeed</p>
|
|
<p class="text-sm text-gray-600 break-all">http://[4fe:8b20:9508:5313:ff0f:0:200:2]</p>
|
|
</a>
|
|
|
|
<a href="http://[4ee:82b1:fe44:3988:ff0f:0:200:2]/"
|
|
class="p-4 rounded-lg border border-gray-200 hover:border-gray-300 transition-all">
|
|
<p class="font-semibold text-black">Umbrel</p>
|
|
<p class="text-sm text-gray-600 break-all">http://[4ee:82b1:fe44:3988:ff0f:0:200:2]/</p>
|
|
</a>
|
|
|
|
<a href="https://[57a:cc0c:32ae:b47b:ff0f:0:400:2]/"
|
|
class="p-4 rounded-lg border border-gray-200 hover:border-gray-300 transition-all">
|
|
<p class="font-semibold text-black">NodePilot</p>
|
|
<p class="text-sm text-gray-600 break-all">https://[57a:cc0c:32ae:b47b:ff0f:0:400:2]/</p>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12">
|
|
<h3 class="text-left text-2xl font-normal text-black mb-4">Access</h3>
|
|
<p class="text-left mb-4 text-sm text-gray-600">
|
|
If the website requires access, use the following credentials as it applies:
|
|
</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div class="p-4 rounded-lg border border-gray-200">
|
|
<div class="space-y-2">
|
|
<p class="text-sm">
|
|
<span class="font-semibold">Username:</span>
|
|
<span class="text-gray-600">myceliumdemo</span>
|
|
</p>
|
|
<p class="text-sm">
|
|
<span class="font-semibold">Password:</span>
|
|
<span class="text-gray-600">myceliumdemo</span>
|
|
</p>
|
|
<p class="text-sm">
|
|
<span class="font-semibold">Email:</span>
|
|
<span class="text-gray-600">mycelium@demo.com</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
/* Fade-in animation for the grid items */
|
|
.fade-in-box {
|
|
opacity: 0;
|
|
animation: fadeIn 0.7s ease-in-out forwards;
|
|
}
|
|
|
|
/* Fading in each grid item with a slight delay */
|
|
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
|
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
|
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
|
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
|
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
|
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
|
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
|
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
|
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
|
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
|
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
|
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|