Skip to content

Instantly share code, notes, and snippets.

@serverwentdown

serverwentdown/template.hbs

Created December 5, 2014 15:01
Show Gist options
  • Save serverwentdown/3e88fc15446099edc8cc to your computer and use it in GitHub Desktop.
Save serverwentdown/3e88fc15446099edc8cc to your computer and use it in GitHub Desktop.
Download ZIP
Some handlebars template
Raw
template.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{title}}</title>
<script src="https://www.google.com/recaptcha/api.js"></script>
<link href="/static/Flat-UI/dist/css/vendor/bootstrap.min.css" rel="stylesheet" />
<link href="/static/Flat-UI/dist/css/flat-ui.min.css" rel="stylesheet" />
<link href="/static/main.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="page-header">
<h1 class="text-center h4">{{title}}</h1>
{{#if subtitle}}
<h2 class="text-center h4"><small>{{subtitle}}</small></h1>
{{/if}}
</div>
{{#unless allowresubmission}}
{{#if hasdonebefore}}
<div class="alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<span class="glyphicon fui-alert-circle" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
WARNING: You are not allowed to resubmit this form as you have already submitted it.
</div>
{{else}}
<div class="alert alert-info" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<span class="glyphicon fui-info-circle" aria-hidden="true"></span>
<span class="sr-only">Note:</span>
You will not be able to resubmit this form again. Fill it in accurately. For help, contact the owner.
</div>
{{/if}}
{{/unless}}
<form role="form" method="post" action="/forms/{{id}}/submit">
<input type="hidden" value="{{key}}" name="key" required />
{{#each fields}}<!-- Don't mind me, I'm lazy, anyway this is not going to require the handling of a hundred requests per second, if it were I would have already purchased that $900 4*Xeon 96GB RAM Server on craigslist singapore... -->
{{#equals type "text"}}
<div class="form-group">
<label class="title" for="name">{{title}}</label>
<input type="text" class="form-control" name="name" placeholder="{{placeholder}}" {{#if required}}required{{/if}} />
</div>
{{/equals}}
{{#equals type "textarea"}}
<div class="form-group">
<label class="title">{{title}}</label>
<textarea class="form-control" rows="3" name="{{name}}" placeholder="{{placeholder}}" {{#if required}}required{{/if}}></textarea>
</div>
{{/equals}}
{{#equals type "radio"}}
<div class="form-group">
<label class="title">{{title}}</label>
{{#each options}}
{{#equals type "other"}}
<label class="radio">
<input type="radio" name="{{../../name}}" value="other" data-toggle="radio" {{#if required}}required{{/if}} />
<!-- Other -->
<input type="text" class="form-control" name="{{../../name}}other" placeholder="{{placeholder}}" />
</label>
{{else}}
<label class="radio">
<input type="radio" name="{{../../name}}" value="{{name}}" data-toggle="radio" {{#if required}}required{{/if}} />
{{title}}
</label>
{{/equals}}
{{/each}}
</div>
{{/equals}}
{{#equals type "checkbox"}}<!-- I need to enable express JS parsing of arrays -->
<div class="form-group">
<label class="title">{{title}}</label>
{{#each options}}
{{#equals type "other"}}
<label class="checkbox">
<input type="checkbox" name="{{../../name}}" value="other" data-toggle="checkbox" {{#if required}}required{{/if}} />
<!-- Other -->
<input type="text" class="form-control" name="{{../../name}}other" placeholder="{{placeholder}}" required /><!-- Do research on whether the required prop must be unset when disabled -->
</label>
{{else}}
<label class="checkbox">
<input type="checkbox" name="{{../../name}}" value="{{name}}" data-toggle="checkbox" {{#if required}}required{{/if}} />
{{title}}
</label>
{{/equals}}
{{/each}}
</div>
{{/equals}}
{{#equals type "slider"}}
<div class="form-group">
<label class="title">{{title}}</label>
<div class="slider-labels">
<span class="pull-left">{{mintitle}}</span>
<span class="pull-right">{{maxtitle}}</span>
<div class="clearfix"></div>
</div>
<input type="hidden" data-slider="{{name}}slider" name="{{name}}" {{#if required}}required{{/if}} />
<div class="ui-slider" id="{{name}}slider">
</div>
</div>
{{/equals}}
{{#equals type "ratio"}}
<div class="form-group">
<label class="title">{{title}}</label>
<div class=" col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input style="text-align: center;" type="number" class="form-control" name="{{a.name}}" placeholder="{{a.placeholder}}" {{#if required}}required{{/if}} />
</div>
<div class=" col-xs-1 col-sm-1 col-md-1 col-lg-1" style="line-height: 1.3em; font-size: 1.7em; width: 0.3em; padding: 0; text-align: center;">:</div>
<div class=" col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input style="text-align: center;" type="number" class="form-control" name="{{b.name}}" placeholder="{{b.placeholder}}" {{#if required}}required{{/if}} />
</div>
<div class="clearfix"></div>
</div>
{{/equals}}
{{/each}}
<div class="form-group">
{{#if requireCaptcha}}
<div class="g-recaptcha" data-sitekey="6LcPvP4SAAAAAKw7x1cNKhGVuaU-VK5a2wX9KY3p"></div>
{{/if}}
</div>
{{#if presubmitmessage}} <!-- rename donemessage to postsubmitmessage -->
{{presubmitmessage}}
{{/if}}
<button type="submit" class="btn btn-block btn-primary">
{{#if submittext}}
{{submittext}}
{{else}}
Submit
{{/if}}
</button>
</form>
</div>
<script src="/static/Flat-UI/dist/js/vendor/jquery.min.js"></script>
<script src="/static/Flat-UI/dist/js/flat-ui.min.js"></script>
<script src="/static/jquery.autosize.js"></script>
<script src="/static/main.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment