248 lines
9.5 KiB
HTML
Executable File
248 lines
9.5 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>Try the following</p>
|
|
<ul>
|
|
<li>Create 21 million tokens with name alphacoin#</li>
|
|
<li>Start alphacoin# token system with 21 million tokens</li>
|
|
<li>Begin a token system called alphacoin# with initial supply of 21 million tokens</li>
|
|
<li>100 alphacoin# transfer</li>
|
|
<li>alphacoin# 100 transfer to Sherlock</li>
|
|
<li>alphacoin# give 100 to Sherlock</li>
|
|
<li>SEND 100 COINS OF ALPHACOIN# TO SHERLOCK</li>
|
|
</ul>
|
|
|
|
<p>If the result is noise then the text cannot be used inside FLO Blockchain for token creation and transfer</p>
|
|
|
|
<p>If the result is succesful parsing of all fields, then it is safe to use the text inside the FLO Blockchain</p>
|
|
|
|
<p>You can try any other combination you can think of</p>
|
|
|
|
<p>For more details, MEDIUM ARTICLE AND OTHER LINKS HERE</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>
|