100 lines
4.6 KiB
HTML
Executable File
100 lines
4.6 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>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
|
|
<div class="fs-form-wrap" id="fs-form-wrap">
|
|
<div class="fs-title">
|
|
<h1>FLO Smart Contract tester</h1>
|
|
<div class="codrops-top">
|
|
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/NotificationStyles/"><span>Previous Demo</span></a>
|
|
<a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19520"><span>Back to the Codrops Article</span></a>
|
|
<a class="codrops-icon codrops-icon-info" href="#"><span>This is a demo for a fullscreen form</span></a>
|
|
</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">Contract name</label>
|
|
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="electionbetting" required/>
|
|
</li>
|
|
<li>
|
|
<label class="fs-field-label fs-anim-upper" for="q2">Contract's FLO address</label>
|
|
<input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="FKJiubshdbfyuESFe87yshj" required/>
|
|
</li>
|
|
<li data-input-trigger>
|
|
<label class="fs-field-label fs-anim-upper" for="q3" data-info="This will help us know what kind of service you need">Select type of Smart Contract</label>
|
|
<div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
|
|
<span><input id="q3b" name="q3" type="radio" value="conversion"/><label for="q3b" class="radio-conversion">Betting</label></span>
|
|
<span><input id="q3c" name="q3" type="radio" value="social"/><label for="q3c" class="radio-social">Become famous</label></span>
|
|
<span><input id="q3a" name="q3" type="radio" value="mobile"/><label for="q3a" class="radio-mobile">Mobile market</label></span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<label class="fs-field-label fs-anim-upper" for="q4">Token identification</label>
|
|
<input class="fs-anim-lower" id="q4" name="q4" type="text" placeholder="rmt" required/>
|
|
</li>
|
|
<li>
|
|
<label class="fs-field-label fs-anim-upper" for="q5">Contract conditions</label>
|
|
<input class="fs-anim-lower" id="q5" name="q5" type="text" placeholder='1. userAssetCommitment="1rmt" 2. smartContractPays="NAMO=WIN | NAMO=LOSE" 3. expiryTime="234863"' 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>If you enjoyed this demo you might also like:</p>
|
|
<a href="http://tympanus.net/Development/MinimalForm/">
|
|
<img src="img/relatedposts/minimalform1-300x162.png" />
|
|
<h3>Minimal Form Interface</h3>
|
|
</a>
|
|
<a href="http://tympanus.net/Development/ButtonComponentMorph/">
|
|
<img src="img/relatedposts/MorphingButtons-300x162.png" />
|
|
<h3>Morphing Buttons Concept</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>
|
|
</body>
|
|
</html> |