sashaastiadi/www_ourverse.tf
1
0
Fork 0
forked from ourworld_web/www_template_2023
Code Pull Requests Activity
13222e7897
www_ourverse.tf/public/technology/index.html
despiegk cb90b9ee5c
merge and docs
2023-07-13 15:03:16 +03:00

1380 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" charset="utf-8">
<head>
<meta name="generator" content="Zola v.0.13.0 - getzola.org" />
<title>Technology &bull; OurPhone</title>
<meta property="og:title" content="Technology &bull; OurPhone" />
<!-- Required meta categories -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- **** BEGINNING, favicons **** -->
<!-- generics -->
<!-- iOS -->
<!-- Android -->
<!-- Windows 8, IE 10 -->
<!-- Windows 8.1 and up, IE 11 -->
<!-- **** CONCLUSION, favicons **** -->
<!-- CSS/SCSS -->
<link rel="stylesheet" href="https://ourphone.tf/css/index.css?h=5799d43775da59ef5d2ca88a23a48a90600f2cde78709878bdcde6d51b76c93d" /> <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
</head>
<body>
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><!-- This example requires Tailwind CSS v1.4.0+ -->
<script type="text/javascript">
var displayedMenu = "";
var hamburgerShown = false;
let width = screen.width;
var isMobile = width < 1024;
function toggleMenu(button) {
if (displayedMenu === button.id.split("-")[0]) {
button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
hideMenu(button.id.split("-")[0]);
button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
displayedMenu = "";
}
else {
showMenu(button.id.split("-")[0]);
button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
displayedMenu = button.id.split("-")[0]
}
}
function handleClick(button) {
if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
if (button.id.indexOf("menu") !== -1 ) {
toggleMenu(button)
}
}
function toggleHamburger() {
if (hamburgerShown) {
hideHamburger();
hamburgerShown = false;
}
else {
showHamburger();
hamburgerShown = true;
}
}
function showMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace(" hidden" , "");
setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
}
function hideMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
}
function showHamburger() {
document.getElementById('header-container').className = "overflow-hidden";
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
}
function hideHamburger() {
document.getElementById('header-container').className = "";
document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
if (displayedMenu !== "") { hideMenu(displayedMenu); }
}
window.onload = function(){
let elements = document.getElementsByTagName("button");
let buttons = [...elements]
buttons.forEach((button) => {
button.addEventListener( 'click', function() { handleClick(button) });
})
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
}
</script>
<!-- set variables used for header template -->
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><!-- This example requires Tailwind CSS v1.4.0+ -->
<script type="text/javascript">
var displayedMenu = "";
var hamburgerShown = false;
let width = screen.width;
var isMobile = width < 1024;
function toggleMenu(button) {
if (displayedMenu === button.id.split("-")[0]) {
button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
hideMenu(button.id.split("-")[0]);
button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
displayedMenu = "";
}
else {
showMenu(button.id.split("-")[0]);
button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
displayedMenu = button.id.split("-")[0]
}
}
function handleClick(button) {
if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
if (button.id.indexOf("menu") !== -1 ) {
toggleMenu(button)
}
}
function toggleHamburger() {
if (hamburgerShown) {
hideHamburger();
hamburgerShown = false;
}
else {
showHamburger();
hamburgerShown = true;
}
}
function showMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace(" hidden" , "");
setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
}
function hideMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
}
function showHamburger() {
document.getElementById('header-container').className = "overflow-hidden";
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
}
function hideHamburger() {
document.getElementById('header-container').className = "";
document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
if (displayedMenu !== "") { hideMenu(displayedMenu); }
}
window.onload = function(){
let elements = document.getElementsByTagName("button");
let buttons = [...elements]
buttons.forEach((button) => {
button.addEventListener( 'click', function() { handleClick(button) });
})
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
}
</script>
<header id="header-container">
<div class="z-10 bg-white fixed w-screen">
<div class="relative z-50 shadow">
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
<div>
<a href="/" class="flex">
<img class="w-48 h-auto sm:w-15" src="&#x2F;images&#x2F;logo_placeholder.png" alt="Ourworld Logo" />
</a>
</div>
<div class="-mr-2 -my-2 lg:hidden">
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
<!-- Heroicon name: menu -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
<!-- Heroicon name: x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
<nav class="flex space-x-10">
<a href="&#x2F;" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
OURPHONE
</a>
<a href="&#x2F;buynow" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
BUYNOW
</a>
<a href="&#x2F;specs" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
SPECS
</a>
<a href="&#x2F;technology" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
TECHNOLOGY
</a>
<a href="https:&#x2F;&#x2F;ourverse.tf&#x2F;" target="_blank" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
OURVERSE
</a>
</nav>
</div>
</div>
</div>
<nav>
<div id="a-href-22-22-ourphone-a-menu" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
</div>
</div>
</div>
</nav>
<nav>
<div id="a-href-22-buynow-22-buynow-a-menu" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
</div>
</div>
</div>
</nav>
<nav>
<div id="a-href-22-specs-22-specs-a-menu" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
</div>
</div>
</div>
</nav>
<nav>
<div id="a-href-22-technology-22-technology-a-menu" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
</div>
</div>
</div>
</nav>
<nav>
<div id="a-href-22https-ourverse-tf-22-ourverse-a-menu" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
</ul>
</div>
</div>
</div>
</nav>
<!--
Mobile menu, show/hide based on mobile menu state.
Entering: "duration-200 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
<div>
<div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
<div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
<nav class="flex flex-col justify-around pb-12">
<a href="&#x2F;" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
OURPHONE
</a>
<hr/>
<a href="&#x2F;buynow" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
BUYNOW
</a>
<hr/>
<a href="&#x2F;specs" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
SPECS
</a>
<hr/>
<a href="&#x2F;technology" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
TECHNOLOGY
</a>
<hr/>
<a href="https:&#x2F;&#x2F;ourverse.tf&#x2F;" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
OURVERSE
</a>
<hr/>
</nav>
</div>
</div>
</div>
</div>
</header>
<div id="content" class="mx-auto overflow-hidden">
<main>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<div>
<div class="container mx-auto">
<!-- section 1 (co-found) -->
<br>
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- This fixes link & img paths in local, prod, and wth prefix -->
<!-- aligns columns depending on col number-->
<!-- Padding -->
<!-- Margins -->
<!-- reverse col at mobile -->
<!-- makes row semi-full screen width, strips margins -->
<!-- makes row full screen width, strips margins -->
<!-- makes row full screen width and adds background img -->
<!-- Cancels page margins so that rows can have separate margins -->
<div id="" class="relative justify-center flex overflow-hidden " style="">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-2 md:py-4 lg:pt-24 mx-8 sm:mx-20 md:mx-28 lg:mx-40 my-10 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 ">
<!-- handles mermaid markdown content display -->
<h1 id="powered-by-threefold">Powered by ThreeFold</h1>
<br>
<p><img src="https://ourphone.tf/technology/./img/tfbg.png#mx-auto" alt="Image" /></p>
<p><a href="https://library.threefold.me/info/threefold#/tfgrid/threefold__tfgrid_home" target="_blank"><ins>The world’s largest decentralized network </ins></a>by <a href="https://threefold.io/"><strong>ThreeFold</strong></a><br>allows every application on the <strong>OurApps™</strong> to attain a level of security and privacy like never seen before.</p>
<p><button><a href="https://library.threefold.me/info/threefold/#/tfgrid/threefold__tfgrid_home">Learn More</a></button></p>
</div>
</div>
</div><!-- section 2 (graphene) -->
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- This fixes link & img paths in local, prod, and wth prefix -->
<!-- aligns columns depending on col number-->
<!-- Padding -->
<!-- Margins -->
<!-- reverse col at mobile -->
<!-- makes row semi-full screen width, strips margins -->
<!-- makes row full screen width, strips margins -->
<!-- makes row full screen width and adds background img -->
<!-- Cancels page margins so that rows can have separate margins -->
<div id="" class="relative justify-center flex overflow-hidden " style="">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-8 md:py-4 lg:py-24 mx-8 " style="min-width: -webkit-fill-available; min-width: -moz-available">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.tf/technology/./img/graphene.png#mx-auto" alt="Image" /></p>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
<!-- handles mermaid markdown content display -->
<h1 id="meet">Meet</h1>
<h1 id="graphene-ostm">Graphene OS™</h1>
<p><a href="https://grapheneos.org/features" target="_blank"><ins><strong>Graphene OS</strong></ins></a><strong>™</strong>
is a private and secure Android-compatible mobile operating system.
Gain a full control and access to your sovereign internet life.</p>
</div>
</div>
</div><!-- section 2 (co-found) -->
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- This fixes link & img paths in local, prod, and wth prefix -->
<!-- aligns columns depending on col number-->
<!-- Padding -->
<!-- Margins -->
<!-- reverse col at mobile -->
<!-- makes row semi-full screen width, strips margins -->
<!-- makes row full screen width, strips margins -->
<!-- makes row full screen width and adds background img -->
<!-- Cancels page margins so that rows can have separate margins -->
<div id="" class="relative justify-center flex overflow-hidden " style="">
<div id="" class="flex flex-col-reverse md:flex-row items-center mx-8 text-center lg:text-right md:text-right justify-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 m-4 lg:m-0 mx-8">
<!-- handles mermaid markdown content display -->
<p><a href="https://ourverse.tf/" target="_blank"><h1>OurVerse™</h1></a></p>
<p><a href="https://ourverse.tf/" target="_blank"><ins><strong>OurVerse</strong></ins></a><strong>™</strong> is a secure and open-source digital world offering alternative SuperApps to centralized apps, develped by <strong>OurWorld</strong> and <strong>ThreeFold</strong> team.</p>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 m-4 lg:m-0 mx-8">
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.tf/technology/./img/ourverse.png#mx-auto" alt="Image" />
<br></p>
</div>
</div>
</div><!-- section 5 apps -->
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- This fixes link & img paths in local, prod, and wth prefix -->
<!-- aligns columns depending on col number-->
<!-- Padding -->
<!-- Margins -->
<!-- reverse col at mobile -->
<!-- makes row semi-full screen width, strips margins -->
<!-- makes row full screen width, strips margins -->
<!-- makes row full screen width and adds background img -->
<!-- Cancels page margins so that rows can have separate margins -->
<div id="" class="relative justify-center flex overflow-hidden " style="">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-8 md:py-4 lg:py-24 mx-8 " style="min-width: -webkit-fill-available; min-width: -moz-available">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.tf/technology/./img/technology.png#mx-auto" alt="Image" /></p>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
<!-- handles mermaid markdown content display -->
<h1 id="threefold-s-decentralized-internet">ThreeFold's <br> Decentralized Internet</h1>
<p>Learn about the magic of the technology behind <strong>OurPhone™</strong> such as <strong>Quantum Safe Storage System</strong>,<strong>Planetary Network</strong>, <strong>EDGE Computing</strong>, and many more.</p>
<p><button><a href="https://library.threefold.me/info/threefold/#/technology/threefold__zos">Learn More</a></button></p>
</div>
</div>
</div><!-- section 6 Buy -->
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- This fixes link & img paths in local, prod, and wth prefix -->
<!-- aligns columns depending on col number-->
<!-- Padding -->
<!-- Margins -->
<!-- reverse col at mobile -->
<!-- makes row semi-full screen width, strips margins -->
<!-- makes row full screen width, strips margins -->
<!-- makes row full screen width and adds background img -->
<!-- Cancels page margins so that rows can have separate margins -->
<div id="" class="relative justify-center flex overflow-hidden " style="">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-8 md:py-4 lg:py-24 mx-8 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 ">
<!-- handles mermaid markdown content display -->
<h1 id="ourphonetm">OurPhone™</h1>
<p><img src="https://ourphone.tf/technology/./img/placeholder.png#medium#mx-auto" alt="Image" />
<br></p>
<h3 id="a-truly-decentralized-smartphone-like-no-other"><strong>A Truly Decentralized Smartphone</strong> <br><strong>Like No Other</strong></h3>
<p><button><a href="https://ourphone.tf/buynow">Buy Now</a></button></p>
</div>
</div>
</div></div>
</div>
</main>
</div>
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
-->
<footer class="bottom-0">
<div class="customize">
<p class="text-center">&#169; Ourphone&trade; All Rights Reserved 2022</p>
</div>
</footer>
</body>
</html>
View Git Blame Copy Permalink