240 lines
9.7 KiB
HTML
Executable File
240 lines
9.7 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en" class="no-js">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>FLOdata tester</title>
|
||
<meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
|
||
<meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
|
||
<meta name="author" content="Codrops" />
|
||
<link rel="shortcut icon" href="../favicon.ico">
|
||
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
||
<link rel="stylesheet" type="text/css" href="css/demo.css" />
|
||
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
||
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
|
||
<link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
|
||
<script src="js/modernizr.custom.js"></script>
|
||
<!-- Imported from index3.html .. to be integrated later -->
|
||
<link rel="stylesheet" type="text/css" href="css/normalize1.css" />
|
||
<link rel="stylesheet" type="text/css" href="css/demo1.css" />
|
||
<link rel="stylesheet" type="text/css" href="css/component1.css" />
|
||
<link rel="stylesheet" type="text/css" href="css/content1.css" />
|
||
<style>
|
||
.btn {
|
||
background-color: DodgerBlue;
|
||
border: none;
|
||
color: white;
|
||
padding: 12px 16px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Darker background on mouse-over */
|
||
.btn:hover {
|
||
background-color: RoyalBlue;
|
||
}
|
||
</style>
|
||
<script src="js/modernizr1.custom.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<!--This section is all imported from index3.html -->
|
||
<div class="morph-button morph-button-overlay morph-button-fixed">
|
||
<button type="button" class="codrops-icon" href="#">Help</button>
|
||
<div class="morph-content" style="left: 642.5px; top: 391.734px;">
|
||
<div>
|
||
<div class="content-style-overlay">
|
||
<span class="icon icon-close">Close the overlay</span>
|
||
<h2>What is token tester?</h2>
|
||
<p>FLO Token Tester is part of the Token creation and transfer system on the FLO blockchain. FLO blockchain allows for 1024 characters of plaintext to be put in the public ledger with a simple transaction. The characters, which are called FLO data, enable to extend the satoshi blockchain design to further use cases</p>
|
||
<p>You can create tokens by simply writing the following as FLO data:<br><br>
|
||
<b><i>Create 21 million tokens with name alphacoin#</i></b>
|
||
<br>or<br>
|
||
<b><i>Start alphacoin# token system with 21 million tokens</i></b></p>
|
||
<p>You can transfer tokens by simply writing the following as FLO data:<br><br>
|
||
<b><i>Send 500 alphacoin# to FLOAddress$</i></b>
|
||
<br>or<br>
|
||
<b><i>Transfer 500 alphacoin# to FLOAddress$</i></b></p>
|
||
<p>In this system there is no need for technical code to be written. Everyone would be able to create and launch their own token systems, without knowing any kind of programming.</p>
|
||
<p>You can test if the FLO data you will enter to create or transfer tokens is valid using the Token Tester. Go ahead!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- morph-button -->
|
||
<div class="fs-form-wrap" id="fs-form-wrap">
|
||
<div class="fs-title">
|
||
<h1>FLO Data Tester</h1>
|
||
<div class="codrops-top">
|
||
</div>
|
||
</div>
|
||
<form id="myform" class="fs-form fs-form-full" autocomplete="off">
|
||
<ol class="fs-fields">
|
||
<li>
|
||
<label class="fs-field-label fs-anim-upper" for="q1">Enter FLO data</label>
|
||
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="Send 50 rmt# to address$" required />
|
||
</li>
|
||
</ol><!-- /fs-fields -->
|
||
<button class="fs-submit" type="submit">Send answers</button>
|
||
</form><!-- /fs-form -->
|
||
</div><!-- /fs-form-wrap -->
|
||
<!-- Related demos -->
|
||
<div class="related">
|
||
<p>Yo! Its time to put this FLO Data to use</p>
|
||
<a href="http://ranchimall1.duckdns.org:8000/WebWallet/testnet.html">
|
||
<img src="img/relatedposts/FLO-webwallet-360x162.png" />
|
||
<h3>Go to FLO webwallet & Send/Create tokens</h3>
|
||
</a>
|
||
<a href="http://ranchimall1.duckdns.org:5000/">
|
||
<img src="img/relatedposts/token-explorer-300x162.png" />
|
||
<h3>Track your tokens at the Token Explorer</h3>
|
||
</a>
|
||
</div>
|
||
</div><!-- /container -->
|
||
<script src="js/classie.js"></script>
|
||
<script src="js/selectFx.js"></script>
|
||
<script src="js/fullscreenForm.js"></script>
|
||
<script>
|
||
(function() {
|
||
var formWrap = document.getElementById('fs-form-wrap');
|
||
|
||
[].slice.call(document.querySelectorAll('select.cs-select')).forEach(function(el) {
|
||
new SelectFx(el, {
|
||
stickyPlaceholder: false,
|
||
onChange: function(val) {
|
||
document.querySelector('span.cs-placeholder').style.backgroundColor = val;
|
||
}
|
||
});
|
||
});
|
||
|
||
new FForm(formWrap, {
|
||
onReview: function() {
|
||
classie.add(document.body, 'overview'); // for demo purposes only
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
<script src="js/uiMorphingButton_fixed.js"></script>
|
||
<script>
|
||
(function() {
|
||
var docElem = window.document.documentElement,
|
||
didScroll, scrollPosition;
|
||
|
||
// trick to prevent scrolling when opening/closing button
|
||
function noScrollFn() {
|
||
window.scrollTo(scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0);
|
||
}
|
||
|
||
function noScroll() {
|
||
window.removeEventListener('scroll', scrollHandler);
|
||
window.addEventListener('scroll', noScrollFn);
|
||
}
|
||
|
||
function scrollFn() {
|
||
window.addEventListener('scroll', scrollHandler);
|
||
}
|
||
|
||
function canScroll() {
|
||
window.removeEventListener('scroll', noScrollFn);
|
||
scrollFn();
|
||
}
|
||
|
||
function scrollHandler() {
|
||
if (!didScroll) {
|
||
didScroll = true;
|
||
setTimeout(function() { scrollPage(); }, 60);
|
||
}
|
||
};
|
||
|
||
function scrollPage() {
|
||
scrollPosition = { x: window.pageXOffset || docElem.scrollLeft, y: window.pageYOffset || docElem.scrollTop };
|
||
didScroll = false;
|
||
};
|
||
|
||
scrollFn();
|
||
|
||
var el = document.querySelector('.morph-button');
|
||
|
||
new UIMorphingButton(el, {
|
||
closeEl: '.icon-close',
|
||
onBeforeOpen: function() {
|
||
// don't allow to scroll
|
||
noScroll();
|
||
},
|
||
onAfterOpen: function() {
|
||
// can scroll again
|
||
canScroll();
|
||
// add class "noscroll" to body
|
||
classie.addClass(document.body, 'noscroll');
|
||
// add scroll class to main el
|
||
classie.addClass(el, 'scroll');
|
||
},
|
||
onBeforeClose: function() {
|
||
// remove class "noscroll" to body
|
||
classie.removeClass(document.body, 'noscroll');
|
||
// remove scroll class from main el
|
||
classie.removeClass(el, 'scroll');
|
||
// don't allow to scroll
|
||
noScroll();
|
||
},
|
||
onAfterClose: function() {
|
||
// can scroll again
|
||
canScroll();
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
<script type="text/javascript">
|
||
(function(document, documentElement) {
|
||
// Enable strict mode
|
||
"use strict";
|
||
|
||
// Form the style on the fly to result in smaller minified file
|
||
var important = "!important;";
|
||
var style = "position:absolute" + important + "visibility:hidden" + important + "width:1em" + important + "font-size:1em" + important + "padding:0" + important;
|
||
|
||
window.getEmPixels = function(element) {
|
||
|
||
var extraBody;
|
||
|
||
if (!element) {
|
||
// Emulate the documentElement to get rem value (documentElement does not work in IE6-7)
|
||
element = extraBody = document.createElement("body");
|
||
extraBody.style.cssText = "font-size:1em" + important;
|
||
documentElement.insertBefore(extraBody, document.body);
|
||
}
|
||
|
||
// Create and style a test element
|
||
var testElement = document.createElement("i");
|
||
testElement.style.cssText = style;
|
||
element.appendChild(testElement);
|
||
|
||
// Get the client width of the test element
|
||
var value = testElement.clientWidth;
|
||
|
||
if (extraBody) {
|
||
// Remove the extra body element
|
||
documentElement.removeChild(extraBody);
|
||
} else {
|
||
// Remove the test element
|
||
element.removeChild(testElement);
|
||
}
|
||
|
||
// Return the em value in pixels
|
||
return value;
|
||
};
|
||
}(document, document.documentElement));
|
||
|
||
var emToPx = getEmPixels();
|
||
|
||
if (window.innerWidth < emToPx * 52.5) {
|
||
var x = document.getElementsByClassName("fs-continue");
|
||
x[0].innerHTML = '';
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|