www_jungle_paradise/public/restaurant/freeflowvalue/index.html
2023-04-03 16:50:28 +02:00

716 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

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

<!DOCTYPE html>
<html lang="en" charset="utf-8">
<head>
<link rel="icon" type="image/x-icon" href="https://www.jungle_paradise/images/favicon.png">
<meta name="generator" content="Zola v.0.13.0 - getzola.org" />
<title>FreeFlow Values &bull; Jungle Paradise</title>
<meta property="og:title" content="FreeFlow Values &bull; Jungle Paradise" />
<!-- Required meta categories -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- **** BEGINNING, favicons **** -->
<!-- generics -->
<!-- iOS -->
<!-- Android -->
<!-- Windows 8, IE 10 -->
<!-- Windows 8.1 and up, IE 11 -->
<!-- **** CONCLUSION, favicons **** -->
<!-- CSS/SCSS -->
<link rel="stylesheet" href="https://www.jungle_paradise/css/index.css?h=641fbb6fdd33739edaec" /> <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
</head>
<body>
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><!-- This example requires Tailwind CSS v1.4.0+ -->
<script type="text/javascript">
var displayedMenu = "";
var hamburgerShown = false;
let width = screen.width;
var isMobile = width < 1024;
function toggleMenu(button) {
if (displayedMenu === button.id.split("-")[0]) {
button.className = button.className.replace(" text-green-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-green-500 bg-stone-200 sm:bg-transparent");
displayedMenu = button.id.split("-")[0]
}
}
function handleClick(button) {
if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
if (button.id.indexOf("menu") !== -1 ) {
toggleMenu(button)
}
}
function toggleHamburger() {
if (hamburgerShown) {
hideHamburger();
hamburgerShown = false;
}
else {
showHamburger();
hamburgerShown = true;
}
}
function showMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace(" hidden" , "");
setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
}
function hideMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
}
function showHamburger() {
document.getElementById('header-container').className = "overflow-hidden";
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
}
function hideHamburger() {
document.getElementById('header-container').className = "";
document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
if (displayedMenu !== "") { hideMenu(displayedMenu); }
}
window.onload = function(){
let elements = document.getElementsByTagName("button");
let buttons = [...elements]
buttons.forEach((button) => {
button.addEventListener( 'click', function() { handleClick(button) });
})
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
}
</script>
<!-- set variables used for header template -->
<header id="header-container">
<div class="z-10 header_BG fixed w-screen max-w-full customize">
<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>
<a href="/" class="flex">
<img class="logo" src="https:&#x2F;&#x2F;www.jungle_paradise&#x2F;images&#x2F;logo.png" alt="Logo" />
</a>
</div>
<div class="-mr-2 -my-2 lg:hidden">
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
<!-- Heroicon name: menu -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
<!-- Heroicon name: x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
<nav class="flex space-x-6">
<a href="https:&#x2F;&#x2F;www.jungle_paradise&#x2F;home&#x2F;" class="text-md font-normal leading-6 text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Home
</a>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;www.jungle_paradise&#x2F;rooms&#x2F;" class="text-md font-normal leading-6 text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Rooms
</a>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;www.jungle_paradise&#x2F;restaurant&#x2F;" class="text-md font-normal leading-6 text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Restaurant
</a>
<div class="relative">
</div>
<a href="https:&#x2F;&#x2F;www.jungle_paradise&#x2F;health-wellness&#x2F;" class="text-md font-normal leading-6 text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Health &amp; Wellness
</a>
<div class="relative">
</div>
</nav>
</div>
</div>
</div>
<!--
Mobile menu, show/hide based on mobile menu state.
Entering: "duration-200 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
<div>
<div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
<div class="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">
<nav class="flex flex-col justify-around pb-12">
<a href="https:&#x2F;&#x2F;www.jungle_paradise&#x2F;rooms&#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">
Rooms
</a>
<hr/>
<a href="https:&#x2F;&#x2F;www.jungle_paradise&#x2F;restaurant&#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">
Restaurant
</a>
<hr/>
<a href="https:&#x2F;&#x2F;www.jungle_paradise&#x2F;health-wellness&#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">
Health &amp; Wellness
</a>
<hr/>
</nav>
</div>
</div>
</div>
</div>
</header>
<div id="content" class="mx-auto overflow-hidden">
<main>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<div>
<div class="container mx-auto">
<br>
<!-- section 1 -->
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- This fixes link & img paths in local, prod, and wth prefix -->
<!-- aligns columns depending on col number-->
<!-- Padding -->
<!-- Margins -->
<!-- reverse col at mobile -->
<!-- makes row semi-full screen width, strips margins -->
<!-- makes row full screen width, strips margins -->
<!-- makes row full screen width and adds background img -->
<!-- Cancels page margins so that rows can have separate margins -->
<div id="" class="relative justify-center flex overflow-hidden " style="">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-2 md:py-4 lg:pt-24 mx-6 sm:mx-20 md:mx-28 lg:mx-40 mt-10 lg:mt-0 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 ">
<!-- handles mermaid markdown content display -->
<h2 id="freeflow-values">FreeFlow Values</h2>
<br>
<hr>
<br>
</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 -->
<!-- aligns columns depending on col number-->
<!-- Padding -->
<!-- Margins -->
<!-- makes row full screen width and adds background img -->
<!-- Cancels page margins so that rows can have separate margins -->
<div id="" class="relative justify-center flex overflow-hidden " style="">
<div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden items-center py-0 mx-6 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">
<!-- handles mermaid markdown content display -->
<h3 id="1-equal-opportunity">1. Equal Opportunity</h3>
<p class="text-base">Independent of location, race or religion. Censorship should not block access to information. Cost of the information system needs to be low enough so that everyone can afford to participate.<br><br>Everyone can deliver services or products to everyone else with minimal intermediate steps. Intermediaries are often necessary but should charge fair costs in relation to their added value. It's not acceptable that a poor farmer receives only 5% of the price we pay for the product in the shop. This is neither sustainable for them nor for the planet.</p>
<br>
<h3 id="2-respect">2. Respect</h3>
<p class="text-base">Respect We declare that respect and not fear nor ego will be the basis of our communications and our actions in this digital nation. We dont have to agree, but respect and tolerance for other opinions is a must.</p>
<br>
<h3 id="3-data-neutrality-privacy">3. Data Neutrality &amp; Privacy</h3>
<p class="text-base">We have sole ownership of our created information / content (e.g. photos, text, videos). No one has access to our information unless we have given explicit access rights. We define the circles (groups of people) we want to communicate with and we have absolute freedom to decide what we want to share, and with whom we share it. We can at any point in time retrieve and destroy our information or revoke access rights.</p>
<p class="text-base">Data cannot be manipulated and we can ask for verification of the information at any point in time, it's up to the person who shares to withhold that proof but at least we then know that the source wants to stay anonymous and cannot be validated.
</p>
<p class="text-base">It should be technically impossible for a hacker or other organization to change information and represent it in another way than originally intended.
</p>
<p class="text-base">We have the ability to search & consume information in freedom and neutrality. We dont like that an AI (Artificial Intelligence) algorithm decides what information gets priority or is blocked. Today we navigate in a restricted information world, much smaller than we believe. Keeping us uninformed and manipulating the information which is being presented to us can influence our consumption and voting actions.</p>
<p class="text-base">Censorship is not acceptable and goes against our beliefs; info should be accessible for everyone.</p>
<br>
<h3 id="4-protecting-our-planet">4. Protecting our Planet</h3>
<p class="text-base">If we dont want to be the product then we need to accept paying for what we consume.<br><br>If it's free, we are the product. Free does not exist. Often it means we pay in other ways at a price in excess of the cost of the resources we actually use. We need to be respectful of finite world resources.</p>
<br>
<h3 id="5-access-to-reliable-complementary-currencies">5. Access to Reliable Complementary Currencies</h3>
<p class="text-base">Complementary currencies are not meant to replace existing currencies, but rather complement. They can have unique properties, they can be designed more as a store of value, or serve as a medium of exchange.
<br><br>We need to be able to keep our fiat or digital currencies safe at all times. We need to be able to exchange value without having to pay huge transaction or exchange fees.<br><br>Others should not be able to influence or obtain non-transparent benefits from our transactions.</p>
<br>
<h3 id="6-products-that-are-sustainable-and-described-fairly">6. Products that are Sustainable and Described Fairly</h3>
<p class="text-base">We declare that we want to produce high quality and sustainable products or services. We need the description of products and services to be done fairly. A transparent reputation system can help.</p>
<br>
<h3 id="7-acceptance-that-we-are-not-powerless-and-need-to-act-ourselves">7. Acceptance that we are not powerless and need to act ourselves</h3>
<p class="text-base">Many believe we have no choice and need to live in the current structures without a way to have an impact. We believe everyone should be a master of their own destiny. The current systems are huge and very efficient but that also makes them very vulnerable. If only 10 percent of us would change the buying decisions we make, these large companies would not be able to continue the way they currently work and change would come. These companies are more vulnerable than many believe.<br><br>We have to be responsible and look at the choices we can make ourselves what do we eat, consume, how do we travel, & so on. This doesnt mean we have no right to a financially comfortable life, but it means<br><br>We have to act and help heal the world.</p>
<br>
</div>
</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 -->
<!-- aligns columns depending on col number-->
<!-- Padding -->
<!-- Margins -->
<!-- reverse col at mobile -->
<!-- makes row semi-full screen width, strips margins -->
<!-- makes row full screen width, strips margins -->
<!-- makes row full screen width and adds background img -->
<!-- Cancels page margins so that rows can have separate margins -->
<div id="" class="relative justify-center flex overflow-hidden " style="background-color: #efefef; background-size: cover">
<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 sm:mx-16 md:mx-20 lg:mx-28 text-center items-center " style="min-width: -webkit-fill-available; min-width: -moz-available">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 ">
<!-- handles mermaid markdown content display -->
<br>
<h2 id="want-to-learn-more-about-freeflow">Want to learn more about FreeFlow?</h2>
<p><button><a href="https://freeflownation.org/" target="_blank">Head this Way!</a></button></p>
<br>
</div>
</div>
</div>
</div>
</main>
</div>
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
-->
<footer class="bottom-0">
<div class="customize">
<div class="py-4 px-4 sm:px-6">
<div class="lg:flex lg:gap-4">
<div class="space-y-8 lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
<img class="w-1/2 lg:mx-4 mb-4" src="/images/logo_black.png" alt="incubaid Logo" />
</div>
<div class="lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
<p class="subheader text-xl">Location</p>
<p class="mt-0">
Mbweni Ruins - Unguja Urban West<br>
Zanzibar - Republik of Tanzania<br>
Find us here on Google maps
</p>
</div>
<div class="lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
<p class="subheader text-xl">CONTACT</p>
<p class="mt-0">
+255 778 242424 (WhatsApp)<br>
info@hotels-zanzibar.com
</p>
</div>
<div class="lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
<p class="subheader text-xl">HOURS</p>
<p class="mt-0">
Reception: 24 Hours<br>
Check-in: after 3pm <br>
Check-out: before 11am
</p>
</div>
</div>
</div>
<hr class="my-4 border-y-0 w-1/2 border-blue-500/50">
<div class="mx-4 text-center">
<p class="text-base pt-4 my-0">&#169; 2022 Jungle Paradise Beach Resort & SPA <a href="https://threefold.io/" target="_blank" class="hard_blue my-0 text-base">Terms & Conditions</a></p>
</div>
</div>
</footer>
<style>
.subheader {
font-family: 'Poiret One', cursive;
font-weight: 600;
color: #4173a1;
margin: 0;
}
</style>
</body>
</html>