sashaastiadi/www_ourverse.tf
1
0
Fork 0
forked from ourworld_web/www_template_2023
Code Pull Requests Activity

merge and docs

Browse Source
This commit is contained in:
despiegk 2023-07-13 14:01:20 +03:00
parent fb874e170f
commit 9a310b10e1
No known key found for this signature in database
15 changed files with 2030 additions and 2442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
content/buynow/index.md
View File

@ -33,19 +33,21 @@ Pre-order **OurPhone™** and become one of the firsts to unlock a secured d
|||
![image](./img/crowdfund1.png)
![image](./img/3nodes.png)
<button>[Crowdfund](https://forms.gle/G2qoLLDAsGLdjNgX6)</button>
<button>[Buy 3Node](https://forms.gle/G2qoLLDAsGLdjNgX6)</button>
Learn more about how to purchase **OurPhone&trade;** Company's shares, and become a co-owner of **OurPhone&trade;** Company.
Become a **ThreeFold Farmer**, Buy ThreeFold's **3Node**, be the host for our sovereign Digital Life.
|||
![image](./img/3nodes.png)
![image](./img/crowdfund1.png)
<button>[Crowdfund](https://forms.gle/Gnx5rJMavjXbJ3ro6)</button>
Learn more about how to purchase **Company** shares, and become a co-owner of **Our Venture Creator**.
<button>[Buy 3Node](https://marketplace.3node.global/index.php)</button>
Become a **ThreeFold Farmer**, Buy ThreeFold's **3Node**, be the host for our sovereign Digital Life.
{% end %}
</div>

2
content/header/_index.md
View File

@ -11,5 +11,5 @@ extra:
- [OURPHONE]("/")
- [BUYNOW]("/buynow")
- [SPECS]("/specs")
- [OUEVERSE]("https://ourverse.tf/")
- [TECHNOLOGY]("/technology")
- [OURVERSE]("https://ourverse.tf/")

2
content/home/index.md
View File

@ -62,12 +62,14 @@ Discover many unique features of __OurPhone&trade;__ that makes it <br>the ultim
{% row(style="center" margin="narrow" padding="none") %}
![Image](./img/data.png#sm#mx-auto)
### 100% Data Ownership
With __OurPhone&trade;__, you are the sole owner of your data, will always be, not some giant tech companies.
|||
![Image](./img/qss.png#sm#mx-auto)
### Quantum Safe Storage
Enjoy decentralized cloud storage benefit that comes with every __OurPhone&trade;__ Apps subscription.

2
content/specs/index.md
View File

@ -21,7 +21,7 @@ weight: 2
# OurPhone&trade; Overview
- Based on Google Pixel 6a, 7 and 7 Pro
- Based on Google Pixel 6a, 7 and 7 Pro (for our X, Y and A model)
- Graphene OS (Google-less Android)
- ThreeFold Quantum Safe Storage
- ThreeFold Planetary network

2
content/technology/index.md
View File

@ -50,7 +50,7 @@ Gain a full control and access to your sovereign internet life.
<a href="https://ourverse.tf/" target="_blank"><h1>OurVerse&trade;</h1></a>
<a href="https://ourverse.tf/" target="_blank"><ins>**OurVerse**</ins></a>**&trade;** is a secure and open-source digital world offering alternative SuperApps to centralized apps, customized by __OurPhone&trade;__ team.
<a href="https://ourverse.tf/" target="_blank"><ins>**OurVerse**</ins></a>**&trade;** is a secure and open-source digital world offering alternative SuperApps to centralized apps, develped by __OurWorld__ and __ThreeFold__ team.
|||

393
public/buynow/index.html
View File

@ -36,7 +36,7 @@
<!-- **** CONCLUSION, favicons **** -->
<!-- CSS/SCSS -->
<link rel="stylesheet" href="https://ourphone.ourworld.tf/css/index.css?h=8ea8a615d5a5a9339423096c45329cf61cd2193f52db4447f8ae0248efacaed8" /> <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>
<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>
@ -135,14 +135,102 @@
<header id="header-container">
<div class="z-10 bg-white fixed w-screen max-w-full customize">
<!--
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:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
<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="h-auto sm:w-15" src="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;images&#x2F;logo_placeholder.png" alt="Logo" />
<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">
@ -163,41 +251,190 @@
<nav class="flex space-x-10">
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;home&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
OurPhone
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;buynow&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;specs&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Specs
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;technology&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Technology
<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">
OUEVERSE
</a>
<div class="relative">
</div>
<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>
</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-22https-ourverse-tf-22-oueverse-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">
</ul>
</div>
</div>
</div>
</nav>
<!--
Mobile menu, show/hide based on mobile menu state.
@ -211,30 +448,80 @@
<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="pt-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">
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;buynow&#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">
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;specs&#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">
Specs
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;technology&#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">
Technology
<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">
OUEVERSE
</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/>
@ -262,6 +549,7 @@
<script>mermaid.initialize({startOnLoad:true});</script>
<div>
<div class="container-fluid mx-auto">
<br>
<!-- section 1 (co-found) -->
<!-- row shortcode
@ -327,6 +615,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -366,8 +665,8 @@ Parameters:
<div id="" class="relative justify-center flex overflow-hidden " style="background: url(&#x27;https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;buynow&#x2F;.&#x2F;img&#x2F;placeholder.png&#x27;); background-size: cover; background-position: center;">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-8 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 my-10 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<div id="" class="relative justify-center flex overflow-hidden " style="background: url(&#x27;https:&#x2F;&#x2F;ourphone.tf&#x2F;buynow&#x2F;.&#x2F;img&#x2F;placeholder.png&#x27;); background-size: cover; background-position: center;">
<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 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">
@ -377,14 +676,16 @@ Parameters:
<!-- handles mermaid markdown content display -->
<h1 id="be-a-part-of-our-sovereign-movement">BE A PART OF OUR SOVEREIGN MOVEMENT</h1>
<h1 id="be-a-part-of-our-sovereign-movement">BE A PART OF <br> OUR SOVEREIGN MOVEMENT</h1>
</div>
</div>
</div><!-- row shortcode
</div></div>
<div class="container mx-auto">
<!-- 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.
@ -456,9 +757,6 @@ Parameters:
@ -505,6 +803,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -541,7 +850,7 @@ Parameters:
<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 lg:items-start py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-start py-8 md:py-4 lg:py-24 mx-8 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -551,8 +860,8 @@ Parameters:
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.ourworld.tf/buynow/./img/phone1.png" alt="image" /></p>
<p><button><a href="https://ourphone.ourworld.tf/">Pre-Order</a></button></p>
<p><img src="https://ourphone.tf/buynow/./img/phone1.png" alt="image" /></p>
<p><button><a href="https://forms.gle/G2qoLLDAsGLdjNgX6">Pre-Order</a></button></p>
<p>Pre-order <strong>OurPhone™</strong> and become one of the firsts to unlock a secured digital future.</p>
@ -567,8 +876,8 @@ Parameters:
<p><img src="https://ourphone.ourworld.tf/buynow/./img/crowdfund1.png" alt="image" /></p>
<p><button><a href="https://ourphone.ourworld.tf/">Crowdfund</a></button></p>
<p><img src="https://ourphone.tf/buynow/./img/crowdfund1.png" alt="image" /></p>
<p><button><a href="https://forms.gle/G2qoLLDAsGLdjNgX6">Crowdfund</a></button></p>
<p>Learn more about how to purchase <strong>OurPhone™</strong> Company's shares, and become a co-owner of <strong>OurPhone™</strong> Company.</p>
@ -583,16 +892,16 @@ Parameters:
<p><img src="https://ourphone.ourworld.tf/buynow/./img/invest.png" alt="image" /></p>
<p><button><a href="https://ourphone.ourworld.tf/">Invest</a></button></p>
<p>Support <strong>OurPhone™</strong> project by financing <strong>OurPhone™</strong> Company's hardware acquisition.</p>
<p><img src="https://ourphone.tf/buynow/./img/3nodes.png" alt="image" /></p>
<p><button><a href="https://marketplace.3node.global/index.php">Buy 3Node</a></button></p>
<p>Become a <strong>ThreeFold Farmer</strong>, Buy ThreeFold's <strong>3Node</strong>, be the host for our sovereign Digital Life.</p>
</div>
</div>
</div>
</div></div>
</div>

2
public/css/index.css
View File

File diff suppressed because one or more lines are too long

1722
public/home/index.html
View File

File diff suppressed because it is too large Load Diff

BIN
public/images/logo_placeholder.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

548
public/index.html
View File

@ -36,7 +36,7 @@
<!-- **** CONCLUSION, favicons **** -->
<!-- CSS/SCSS -->
<link rel="stylesheet" href="https://ourphone.ourworld.tf/css/index.css?h=8ea8a615d5a5a9339423096c45329cf61cd2193f52db4447f8ae0248efacaed8" /> <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>
<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>
@ -135,14 +135,102 @@
<header id="header-container">
<div class="z-10 bg-white fixed w-screen max-w-full customize">
<!--
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:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
<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="h-auto sm:w-15" src="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;images&#x2F;logo_placeholder.png" alt="Logo" />
<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">
@ -163,41 +251,190 @@
<nav class="flex space-x-10">
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;home&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
OurPhone
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;buynow&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;specs&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Specs
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;technology&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Technology
<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">
OUEVERSE
</a>
<div class="relative">
</div>
<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>
</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-22https-ourverse-tf-22-oueverse-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">
</ul>
</div>
</div>
</div>
</nav>
<!--
Mobile menu, show/hide based on mobile menu state.
@ -211,30 +448,80 @@
<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="pt-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">
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;buynow&#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">
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;specs&#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">
Specs
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;technology&#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">
Technology
<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">
OUEVERSE
</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/>
@ -258,8 +545,9 @@
<!-- home page template, has a banner and rows of page summaries -->
<div>
<div class="container mx-auto">
<div class="container mx-auto">
<!-- section 1 (header) -->
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
@ -348,6 +636,11 @@ Parameters:
<!-- reverse col at mobile -->
@ -370,7 +663,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 my-10 " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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">
@ -380,11 +673,8 @@ Parameters:
<!-- handles mermaid markdown content display -->
<h1 id="meet">Meet<br></h1>
<h1 id="ourphonetm">OurPhone™</h1>
<p>Experience True Sovereignty at Your Fingertips <br>
with the World’s First Truly Decentralized Smartphone.</p>
<p><button><a href="https://ourphone.ourworld.tf/specs">Learn More</a></button></p>
<br>
<p><img src="https://ourphone.tf/home/./img/placeholder.png#mx-auto" alt="placeholder" /></p>
</div>
@ -398,7 +688,11 @@ with the World’s First Truly Decentralized Smartphone.</p>
<p><img src="https://ourphone.ourworld.tf/home/./img/placeholder.png#mx-auto" alt="placeholder" /></p>
<br>
<h1 id="meet-ourphonetm">Meet<br> OurPhone™</h1>
<p>Experience True Sovereignty at Your Fingertips <br>
with the World’s First Truly Decentralized Smartphone.</p>
<p><button><a href="https://ourphone.tf/specs">Learn More</a></button></p>
</div>
@ -493,6 +787,35 @@ Parameters:
<!-- reverse col at mobile -->
<!-- makes row semi-full screen width, strips margins -->
<!-- makes row full screen width, strips margins -->
@ -515,17 +838,20 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 my-10 " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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">
<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.ourworld.tf/home/./img/secure.png#mx-auto" alt="secure" /></p>
<h1 id="secure-every-click">Secure<br> Every Click</h1>
<p>Every application of <strong>OurPhone™</strong> is fully encrypted. <br>
Have no concerns about your data being manipulated or stolen.</p>
<p><button><a href="https://ourphone.tf/technology">Learn More</a></button></p>
</div>
@ -534,16 +860,12 @@ Parameters:
<!-- 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">
<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 -->
<h1 id="secure">Secure<br></h1>
<h1 id="every-click">Every Click</h1>
<p>Every application of <strong>OurPhone™</strong> is fully encrypted. <br>
Have no concerns about your data being manipulated or stolen.</p>
<p><button><a href="https://ourphone.ourworld.tf/technology">Learn More</a></button></p>
<p><img src="https://ourphone.tf/home/./img/secure.png#mx-auto" alt="secure" /></p>
</div>
@ -614,6 +936,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -650,7 +983,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -660,9 +993,8 @@ Parameters:
<!-- handles mermaid markdown content display -->
<h1 id="decentralized-smartphone">Decentralized Smartphone</h1>
<h1 id="like-no-other">Like No Other</h1>
<p>Discover many unique features of <strong>OurPhone™</strong> that makes it the ultimate decentralized smartphone like no other.</p>
<h1 id="decentralized-smartphone-like-no-other">Decentralized Smartphone <br> Like No Other</h1>
<p>Discover many unique features of <strong>OurPhone™</strong> that makes it <br>the ultimate decentralized smartphone like no other.</p>
</div>
@ -760,6 +1092,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -796,7 +1139,7 @@ Parameters:
<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 lg:items-start py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-start py-0 mx-8 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -806,7 +1149,7 @@ Parameters:
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.ourworld.tf/home/./img/data.png#sm#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/home/./img/data.png#sm#mx-auto" alt="Image" /></p>
<h3 id="100-data-ownership">100% Data Ownership</h3>
<p>With <strong>OurPhone™</strong>, you are the sole owner of your data, will always be, not some giant tech companies.</p>
@ -822,7 +1165,7 @@ Parameters:
<p><img src="https://ourphone.ourworld.tf/home/./img/qss.png#sm#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/home/./img/qss.png#sm#mx-auto" alt="Image" /></p>
<h3 id="quantum-safe-storage">Quantum Safe Storage</h3>
<p>Enjoy decentralized cloud storage benefit that comes with every <strong>OurPhone™</strong> Apps subscription.</p>
@ -838,7 +1181,7 @@ Parameters:
<p><img src="https://ourphone.ourworld.tf/home/./img/ourapps.png#sm#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/home/./img/ourapps.png#sm#mx-auto" alt="Image" /></p>
<h3 id="introducing-ourversetm">Introducing <strong>OurVerse™</strong></h3>
<p><strong>OurApps™</strong>: decentralized SuperApps powered by <strong>OurPhone™</strong> are ready to meet our needs.</p>
@ -938,6 +1281,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -974,7 +1328,7 @@ Parameters:
<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 lg:items-start py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-start py-2 md:py-4 lg:pb-24 mx-8 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -984,7 +1338,7 @@ Parameters:
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.ourworld.tf/home/./img/decentralized.png#sm#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/home/./img/decentralized.png#sm#mx-auto" alt="Image" /></p>
<h3 id="decentralized-network-support">Decentralized Network Support</h3>
<p><strong>OurVerse™</strong> are hosted on the world's largest decentralized network. Join the movement.</p>
@ -1000,7 +1354,7 @@ Parameters:
<p><img src="https://ourphone.ourworld.tf/home/./img/edge.png#sm#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/home/./img/edge.png#sm#mx-auto" alt="Image" /></p>
<h3 id="edge-computing-speed">Edge Computing Speed</h3>
<p>Experience unparalleled usage speed with <strong>OurVerse™</strong>'s latest edge cloud technology.</p>
@ -1016,7 +1370,7 @@ Parameters:
<p><img src="https://ourphone.ourworld.tf/home/./img/planetary.png#sm#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/home/./img/planetary.png#sm#mx-auto" alt="Image" /></p>
<h3 id="fully-encrypted-communication">Fully Encrypted Communication</h3>
<p>Any transfer of data is powered by <strong>Planetary Network™</strong>: a fully encrypted network technology.</p>
@ -1089,6 +1443,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -1125,7 +1490,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -1135,8 +1500,7 @@ Parameters:
<!-- handles mermaid markdown content display -->
<h1 id="ourversetm">OurVerse™</h1>
<h1 id="our-limitless-possibilities">Our Limitless Possibilities</h1>
<h1 id="ourversetm-our-limitless-possibilities">OurVerse™ <br> Our Limitless Possibilities</h1>
<p>Unlock limitless capabilities with <strong>OurVerse™</strong> SuperApps that meet our daily needs and protect our data sovereignty.</p>
@ -1231,6 +1595,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -1267,7 +1642,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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:pb-24 mx-8 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -1277,9 +1652,9 @@ Parameters:
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.ourworld.tf/home/./img/manyapps.png#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/home/./img/manyapps.png#mx-auto" alt="Image" /></p>
<br>
<p><button><a href="https://ourphone.ourworld.tf/specs">See Specs</a></button></p>
<p><button><a href="https://ourphone.tf/specs">See Specs</a></button></p>
</div>
@ -1350,6 +1725,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -1386,7 +1772,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -1398,7 +1784,7 @@ Parameters:
<h1 id="powered-by">Powered by</h1>
<h1 id="threefold">ThreeFold</h1>
<p>The world’s largest decentralized network by <strong>ThreeFold</strong> allows every application on the <strong>OurApps™</strong> to attain a level of security and privacy like never seen before.</p>
<p>The world’s largest decentralized network by <strong>ThreeFold</strong> allows every application<br> on the <strong>OurApps™</strong> to attain a level of security and privacy like never seen before.</p>
</div>
@ -1492,6 +1878,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -1528,7 +1925,7 @@ Parameters:
<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 lg:items-center py-0 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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:pb-24 mx-8 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -1538,9 +1935,9 @@ Parameters:
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.ourworld.tf/home/./img/tf.png#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/home/./img/tf.png#mx-auto" alt="Image" /></p>
<br>
<p><button><a href="https://ourphone.ourworld.tf/technology">Learn More</a></button></p>
<p><button><a href="https://ourphone.tf/technology">Learn More</a></button></p>
</div>
@ -1635,6 +2032,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -1671,7 +2079,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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">
@ -1682,19 +2090,19 @@ Parameters:
<h1 id="ourphonetm">OurPhone™</h1>
<p><img src="https://ourphone.ourworld.tf/home/./img/placeholder.png#medium#mx-auto" alt="Image" />
<p><img src="https://ourphone.tf/home/./img/placeholder.png#medium#mx-auto" alt="Image" />
<br>
<br></p>
<h3 id="a-truly-decentralized-smartphone"><strong>A Truly Decentralized Smartphone</strong></h3>
<h3 id="like-no-other"><strong>Like No Other</strong></h3>
<p><button><a href="https://ourphone.ourworld.tf/buynow">Buy Now</a></button></p>
<p><button><a href="https://ourphone.tf/buynow">Buy Now</a></button></p>
</div>
</div>
</div>
</div></div>
</div>
</div>

2
public/robots.txt
View File

@ -1,4 +1,4 @@
User-agent: *
Disallow:
Allow: /
Sitemap: https://ourphone.ourworld.tf/sitemap.xml
Sitemap: https://ourphone.tf/sitemap.xml

15
public/sitemap.xml
View File

@ -1,25 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://ourphone.ourworld.tf/</loc>
<loc>https://ourphone.tf/</loc>
</url>
<url>
<loc>https://ourphone.ourworld.tf/buynow/</loc>
<loc>https://ourphone.tf/buynow/</loc>
<lastmod>2021-02-20</lastmod>
</url>
<url>
<loc>https://ourphone.ourworld.tf/categories/</loc>
<loc>https://ourphone.tf/categories/</loc>
</url>
<url>
<loc>https://ourphone.ourworld.tf/home/</loc>
<loc>https://ourphone.tf/header/</loc>
</url>
<url>
<loc>https://ourphone.tf/home/</loc>
<lastmod>2021-02-20</lastmod>
</url>
<url>
<loc>https://ourphone.ourworld.tf/specs/</loc>
<loc>https://ourphone.tf/specs/</loc>
<lastmod>2021-02-20</lastmod>
</url>
<url>
<loc>https://ourphone.ourworld.tf/technology/</loc>
<loc>https://ourphone.tf/technology/</loc>
<lastmod>2021-02-20</lastmod>
</url>
</urlset>

488
public/specs/index.html
View File

@ -36,7 +36,7 @@
<!-- **** CONCLUSION, favicons **** -->
<!-- CSS/SCSS -->
<link rel="stylesheet" href="https://ourphone.ourworld.tf/css/index.css?h=8ea8a615d5a5a9339423096c45329cf61cd2193f52db4447f8ae0248efacaed8" /> <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>
<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>
@ -135,14 +135,102 @@
<header id="header-container">
<div class="z-10 bg-white fixed w-screen max-w-full customize">
<!--
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:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
<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="h-auto sm:w-15" src="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;images&#x2F;logo_placeholder.png" alt="Logo" />
<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">
@ -163,41 +251,190 @@
<nav class="flex space-x-10">
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;home&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
OurPhone
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;buynow&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;specs&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Specs
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;technology&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Technology
<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">
OUEVERSE
</a>
<div class="relative">
</div>
<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>
</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-22https-ourverse-tf-22-oueverse-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">
</ul>
</div>
</div>
</div>
</nav>
<!--
Mobile menu, show/hide based on mobile menu state.
@ -211,30 +448,80 @@
<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="pt-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">
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;buynow&#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">
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;specs&#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">
Specs
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;technology&#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">
Technology
<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">
OUEVERSE
</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/>
@ -262,6 +549,7 @@
<script>mermaid.initialize({startOnLoad:true});</script>
<div>
<div class="container mx-auto">
<br>
<!-- section 1 (header) -->
<!-- row shortcode
@ -341,6 +629,11 @@ Parameters:
<!-- reverse col at mobile -->
@ -363,7 +656,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 my-10 " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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">
@ -373,7 +666,7 @@ Parameters:
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.ourworld.tf/specs/./img/specf.png#large#mx-auto" alt="placeholder" /></p>
<p><img src="https://ourphone.tf/specs/./img/specf.png#large#mx-auto" alt="placeholder" /></p>
</div>
@ -391,7 +684,7 @@ Parameters:
<ul>
<li>Based on Google Pixel 6a, 7 and 7 Pro</li>
<li>Graphene OS (Google-less Android)</li>
<li>ThreeFold Quantum Safe Storage, </li>
<li>ThreeFold Quantum Safe Storage</li>
<li>ThreeFold Planetary network</li>
<li>ThreeFold Edge Compute Technology</li>
<li>OurVerse SuperApps, Android apps Compatibility</li>
@ -468,6 +761,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -504,7 +808,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -515,7 +819,7 @@ Parameters:
<h1 id="decentralized-smartphone">Decentralized SmartPhone,</h1>
<h2 id="designed-smartly">Designed Smartly</h2>
<h1 id="designed-smartly">Designed Smartly</h1>
</div>
@ -606,6 +910,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -642,7 +957,7 @@ Parameters:
<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 lg:items-center py-0 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-0 mx-8 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -652,7 +967,7 @@ Parameters:
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.ourworld.tf/specs/./img/waterproof.png#medium#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/specs/./img/waterproof.png#medium#mx-auto" alt="Image" /></p>
<p>Matte Enclosure Made from 100% Recycled Aluminum</p>
@ -667,7 +982,7 @@ Parameters:
<p><img src="https://ourphone.ourworld.tf/specs/./img/smooth.png#medium#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/specs/./img/smooth.png#medium#mx-auto" alt="Image" /></p>
<p>Fast and Responsive Display with High Durability</p>
@ -752,6 +1067,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -788,7 +1114,7 @@ Parameters:
<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 lg:items-center py-0 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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:pb-24 mx-8 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -798,7 +1124,7 @@ Parameters:
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.ourworld.tf/specs/./img/camera.png#medium#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/specs/./img/camera.png#medium#mx-auto" alt="Image" /></p>
<p>25% Brighter Outdoors, Even in Sunlight</p>
@ -870,6 +1196,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -906,7 +1243,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -1015,6 +1352,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -1051,7 +1399,7 @@ Parameters:
<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 lg:items-start py-0 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-start py-2 md:py-4 lg:pb-24 mx-8 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -1061,7 +1409,7 @@ Parameters:
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.ourworld.tf/specs/./img/phone1.png#medium#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/specs/./img/phone1.png#medium#mx-auto" alt="Image" /></p>
<h3 id="ourphonex"><strong>OurPhone<sup>X</sup></strong></h3>
<h4 id="display"><strong>Display</strong></h4>
<h6 id="6-7-inch-qhd-quad-high-definition"><strong>6.7-inch</strong> QHD+ Quad High Definition</h6>
@ -1078,7 +1426,7 @@ Parameters:
<br>
<h4 id="battery-and-charging"><strong>Battery and charging</strong></h4>
<h6 id="5000-mah3">5000 mAh3</h6>
<h6 id="24-hour-battery-life">24+ hour battery life</h6>
<h6 id="24h-hour-battery-life">24h+ hour battery life</h6>
<h6 id="fast-wireless-charging">Fast wireless charging</h6>
@ -1093,7 +1441,7 @@ Parameters:
<p><img src="https://ourphone.ourworld.tf/specs/./img/phone2.png#medium#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/specs/./img/phone2.png#medium#mx-auto" alt="Image" /></p>
<h3 id="ourphoney"><strong>OurPhone<sup>Y</sup></strong></h3>
<h4 id="display-1"><strong>Display</strong></h4>
<h6 id="6-3-inch-fhd-full-high-definition"><strong>6.3-inch</strong> FHD+ Full High Definition</h6>
@ -1110,7 +1458,7 @@ Parameters:
<br>
<h4 id="battery-and-charging-1"><strong>Battery and charging</strong></h4>
<h6 id="4355-mah3">4355 mAh3</h6>
<h6 id="24h-hour-battery-life">24h+ hour battery life</h6>
<h6 id="24h-hour-battery-life-1">24h+ hour battery life</h6>
<h6 id="fast-wireless-charging-1">Fast wireless charging</h6>
@ -1125,7 +1473,7 @@ Parameters:
<p><img src="https://ourphone.ourworld.tf/specs/./img/phone3.png#medium#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/specs/./img/phone3.png#medium#mx-auto" alt="Image" /></p>
<h3 id="ourphonea"><strong>OurPhone<sup>A</sup></strong></h3>
<h4 id="display-2"><strong>Display</strong></h4>
<h6 id="6-1-inch-fhd-full-high-definition"><strong>6.1-inch</strong> FHD+ Full High Definition</h6>
@ -1142,7 +1490,7 @@ Parameters:
<br>
<h4 id="battery-and-charging-2"><strong>Battery and charging</strong></h4>
<h6 id="4410-mah3">4410 mAh3</h6>
<h6 id="24h-hour-battery-life-1">24h+ hour battery life</h6>
<h6 id="24h-hour-battery-life-2">24h+ hour battery life</h6>
</div>
@ -1213,6 +1561,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -1249,7 +1608,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
@ -1329,22 +1688,13 @@ Parameters:
<!-- reverse col at mobile -->
<!-- makes row semi-full screen width, strips margins -->
<!-- makes row full screen width, strips margins -->
@ -1365,13 +1715,13 @@ Parameters:
<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 lg:items-start py-0 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-start py-2 md:py-4 lg:pb-24 mx-8 sm:mx-20 md:mx-28 lg:mx-40 " 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 ">
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
<!-- handles mermaid markdown content display -->
@ -1394,7 +1744,7 @@ Parameters:
<!-- 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 ">
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
<!-- handles mermaid markdown content display -->
@ -1418,7 +1768,7 @@ Parameters:
<!-- 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 ">
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
<!-- handles mermaid markdown content display -->
@ -1528,6 +1878,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -1564,7 +1925,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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">
@ -1575,19 +1936,18 @@ Parameters:
<h1 id="ourphonetm">OurPhone™</h1>
<p><img src="https://ourphone.ourworld.tf/specs/./img/placeholder.png#medium#mx-auto" alt="Image" />
<br>
<p><img src="https://ourphone.tf/specs/./img/placeholder.png#medium#mx-auto" alt="Image" />
<br></p>
<h3 id="a-truly-decentralized-smartphone"><strong>A Truly Decentralized Smartphone</strong></h3>
<h3 id="like-no-other"><strong>Like No Other</strong></h3>
<p><button><a href="https://ourphone.ourworld.tf/buynow">Buy Now</a></button></p>
<p><button><a href="https://ourphone.tf/buynow">Buy Now</a></button></p>
</div>
</div>
</div>
</div></div>
</div>

570
public/technology/index.html
View File

@ -36,7 +36,7 @@
<!-- **** CONCLUSION, favicons **** -->
<!-- CSS/SCSS -->
<link rel="stylesheet" href="https://ourphone.ourworld.tf/css/index.css?h=8ea8a615d5a5a9339423096c45329cf61cd2193f52db4447f8ae0248efacaed8" /> <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>
<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>
@ -135,14 +135,102 @@
<header id="header-container">
<div class="z-10 bg-white fixed w-screen max-w-full customize">
<!--
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:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
<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="h-auto sm:w-15" src="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;images&#x2F;logo_placeholder.png" alt="Logo" />
<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">
@ -163,41 +251,190 @@
<nav class="flex space-x-10">
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;home&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
OurPhone
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;buynow&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;specs&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Specs
<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>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;technology&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Technology
<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">
OUEVERSE
</a>
<div class="relative">
</div>
<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>
</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-22https-ourverse-tf-22-oueverse-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">
</ul>
</div>
</div>
</div>
</nav>
<!--
Mobile menu, show/hide based on mobile menu state.
@ -211,30 +448,80 @@
<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="pt-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">
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;buynow&#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">
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;specs&#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">
Specs
<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="https:&#x2F;&#x2F;ourphone.ourworld.tf&#x2F;technology&#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">
Technology
<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">
OUEVERSE
</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/>
@ -262,8 +549,9 @@
<script>mermaid.initialize({startOnLoad:true});</script>
<div>
<br>
<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 "|||"
@ -359,6 +647,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -395,7 +694,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 my-10 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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">
@ -407,9 +706,8 @@ Parameters:
<h1 id="powered-by-threefold">Powered by ThreeFold</h1>
<br>
<p><img src="https://ourphone.ourworld.tf/technology/./img/tfbg.png#mx-auto" alt="Image" /></p>
<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>
<br>
<p><button><a href="https://library.threefold.me/info/threefold/#/tfgrid/threefold__tfgrid_home">Learn More</a></button></p>
@ -495,6 +793,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -528,7 +837,7 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40" style="min-width: -webkit-fill-available; min-width: -moz-available">
<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">
@ -538,7 +847,7 @@ Parameters:
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.ourworld.tf/technology/./img/graphene.png#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/technology/./img/graphene.png#mx-auto" alt="Image" /></p>
</div>
@ -589,15 +898,6 @@ Parameters:
@ -650,6 +950,24 @@ Parameters:
<!-- reverse col at mobile -->
@ -683,17 +1001,17 @@ Parameters:
<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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40" style="min-width: -webkit-fill-available; min-width: -moz-available">
<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">
<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 -->
<h1 id="ourversetm"><a href="https://ourverse.tf/">OurVerse™</a></h1>
<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, customized by <strong>OurPhone™</strong> team.</p>
@ -703,12 +1021,12 @@ Parameters:
<!-- 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">
<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.ourworld.tf/technology/./img/ourverse.png#mx-auto" alt="Image" />
<p><img src="https://ourphone.tf/technology/./img/ourverse.png#mx-auto" alt="Image" />
<br></p>
@ -738,123 +1056,6 @@ Parameters:
<!-- aligns columns depending on col number-->
<!-- Padding -->
<!-- Margins -->
<!-- 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 lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " 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="threefold-s">ThreeFold's</h1>
<h1 id="decentralized-internet">Decentralized Internet</h1>
</div>
</div>
</div><!-- 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 -->
@ -901,6 +1102,10 @@ Parameters:
<!-- Margins -->
@ -916,6 +1121,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -949,7 +1165,7 @@ Parameters:
<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 lg:items-center py-8 md:py-8 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40" style="min-width: -webkit-fill-available; min-width: -moz-available">
<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">
@ -959,7 +1175,7 @@ Parameters:
<!-- handles mermaid markdown content display -->
<p><img src="https://ourphone.ourworld.tf/technology/./img/technology.png#mx-auto" alt="Image" /></p>
<p><img src="https://ourphone.tf/technology/./img/technology.png#mx-auto" alt="Image" /></p>
</div>
@ -973,6 +1189,7 @@ Parameters:
<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>
@ -1069,6 +1286,17 @@ Parameters:
<!-- reverse col at mobile -->
@ -1105,7 +1333,7 @@ Parameters:
<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 lg:items-center py-8 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available">
<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">
@ -1116,19 +1344,17 @@ Parameters:
<h1 id="ourphonetm">OurPhone™</h1>
<p><img src="https://ourphone.ourworld.tf/technology/./img/placeholder.png#medium#mx-auto" alt="Image" />
<br>
<p><img src="https://ourphone.tf/technology/./img/placeholder.png#medium#mx-auto" alt="Image" />
<br></p>
<h3 id="a-truly-decentralized-smartphone"><strong>A Truly Decentralized Smartphone</strong></h3>
<h3 id="like-no-other"><strong>Like No Other</strong></h3>
<p><button><a href="https://ourphone.ourworld.tf/buynow">Buy Now</a></button></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>
</div>

2
static/css/index.css
View File

File diff suppressed because one or more lines are too long