164 lines
5.1 KiB
HTML
Executable File
164 lines
5.1 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,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Natural Language Form</title>
|
|
<meta name="description" content="Natural Language Form with custom text input and drop-down lists" />
|
|
<meta name="keywords" content="Natural Language UI, sentence form, text input, contenteditable, html5, css3, jquery" />
|
|
<meta name="author" content="Codrops" />
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
|
<link rel="stylesheet" type="text/css" href="css/default.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
|
|
|
<!-- START Content from date time picker -->
|
|
|
|
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/material-datetime-picker.css">
|
|
|
|
<style>
|
|
/*
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
} */
|
|
|
|
.c-btn {
|
|
font-size: 14px;
|
|
text-transform: capitalize;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
line-height: 36px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
min-width: 88px;
|
|
height: 36px;
|
|
margin: 10px 8px;
|
|
padding: 0 8px;
|
|
text-align: center;
|
|
letter-spacing: .5px;
|
|
border-radius: 2px;
|
|
background: #F1F1F1;
|
|
color: #393939;
|
|
transition: background 200ms ease-in-out;
|
|
box-shadow: 0 3.08696px 5.82609px 0 rgba(0, 0, 0, 0.16174), 0 3.65217px 12.91304px 0 rgba(0, 0, 0, 0.12435);
|
|
}
|
|
|
|
.c-btn--flat {
|
|
background: transparent;
|
|
margin: 10px 8px;
|
|
min-width: 52px;
|
|
}
|
|
|
|
.c-btn:hover {
|
|
background: rgba(153, 153, 153, 0.2);
|
|
color: #393939;
|
|
}
|
|
|
|
.c-btn:active {
|
|
box-shadow: 0 9.6087px 10.78261px 0 rgba(0, 0, 0, 0.17217), 0 13.56522px 30.3913px 0 rgba(0, 0, 0, 0.15043);
|
|
}
|
|
|
|
.c-btn--flat, .c-btn--flat:hover, .c-btn--flat:active {
|
|
box-shadow: none;
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- END Content from date time picker -->
|
|
|
|
<script src="js/modernizr.custom.js"></script>
|
|
</head>
|
|
<body class="nl-blurred">
|
|
<div class="container demo-1">
|
|
<!-- Top Navigation -->
|
|
<div class="codrops-top clearfix">
|
|
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/MorphingDevices/"><span>Previous Demo</span></a>
|
|
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15139"><span>Back to the Codrops Article</span></a></span>
|
|
</div>
|
|
<header>
|
|
<h1>Smart Contract Creator<span>with custom input elements</span></h1>
|
|
</header>
|
|
<div class="main clearfix">
|
|
<form id="nl-form" class="nl-form">
|
|
I feel to eat
|
|
<select>
|
|
<option value="1" selected>any food</option>
|
|
<option value="2">Indian</option>
|
|
<option value="3">French</option>
|
|
<option value="4">Japanese</option>
|
|
<option value="2">Italian</option>
|
|
</select>
|
|
<br />in a
|
|
<select>
|
|
<option value="1" selected>standard</option>
|
|
<option value="2">fancy</option>
|
|
<option value="3">hip</option>
|
|
<option value="4">traditional</option>
|
|
<option value="2">romantic</option>
|
|
</select>
|
|
restaurant
|
|
<br />at
|
|
<select>
|
|
<option value="1" selected>anytime</option>
|
|
<option value="1">7 p.m.</option>
|
|
<option value="2">8 p.m.</option>
|
|
<option value="3">9 p.m.</option>
|
|
</select>
|
|
in <input type="text" value="" placeholder="any city" data-subline="For example: <em>Los Angeles</em> or <em>New York</em>"/>
|
|
|
|
<!-- date time picker content-->
|
|
differentiation text
|
|
<a class="c-btn c-datepicker-btn">
|
|
<span class="material-icon">date-time</span>
|
|
</a>
|
|
|
|
<pre id="output"></pre>
|
|
<!-- date time picker content-->
|
|
|
|
|
|
<div class="nl-submit-wrap">
|
|
<button class="nl-submit" type="submit">Find a restaurant</button>
|
|
</div>
|
|
|
|
<div class="nl-overlay"></div>
|
|
</form>
|
|
</div>
|
|
|
|
</div><!-- /container -->
|
|
|
|
<!-- START content from material date time picker-->
|
|
|
|
<script src="https://unpkg.com/babel-polyfill@6.2.0/dist/polyfill.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/rome/2.1.22/rome.standalone.js"></script>
|
|
<script src="js/material-datetime-picker.js" charset="utf-8"></script>
|
|
|
|
<script>
|
|
|
|
var picker = new MaterialDatetimePicker({})
|
|
.on('submit', function(d) {
|
|
output.innerText = d;
|
|
});
|
|
|
|
var el = document.querySelector('.c-datepicker-btn');
|
|
el.addEventListener('click', function() {
|
|
picker.open();
|
|
}, false);
|
|
|
|
</script>
|
|
|
|
<!-- END content from material date time picker-->
|
|
|
|
|
|
<script src="js/nlform.js"></script>
|
|
<script>
|
|
var nlform = new NLForm( document.getElementById( 'nl-form' ) );
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|