129 lines
3.3 KiB
Smarty
129 lines
3.3 KiB
Smarty
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Badge Creator</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<link href="dasense/page/default_developer/css/libs/jquery.miniColors.css" rel="stylesheet" />
|
|
<style type="text/css">
|
|
|
|
/* Custom container */
|
|
.container-narrow {
|
|
|
|
}
|
|
|
|
.jumbotron {
|
|
margin: 40px 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.jumbotron h1 {
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
.jumbotron .btn {
|
|
font-size: 21px;
|
|
padding: 14px 24px;
|
|
}
|
|
|
|
form label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
form label.radio {
|
|
font-weight: normal;
|
|
}
|
|
|
|
form fieldset {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
span.minicolors {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
|
<!--[if lt IE 9]>
|
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container-narrow">
|
|
|
|
<div class="masthead">
|
|
|
|
<h3 class="muted">Badge Creator 1.0</h3>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="span5">
|
|
<form>
|
|
<legend>Design</legend>
|
|
<label>Shape</label>
|
|
<label class="radio">
|
|
<input type="radio" name="shape" id="shape-circle" value="circle" checked>
|
|
Circle
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="shape" id="shape-shield" value="shield">
|
|
Shield
|
|
</label>
|
|
<fieldset>
|
|
<div class="row">
|
|
<div class="span2">
|
|
<label>Background color</label>
|
|
<input type="minicolors" name="background-color" />
|
|
</div>
|
|
<div class="span2">
|
|
<label>Stroke color</label>
|
|
<input type="minicolors" name="stroke-color" />
|
|
</div>
|
|
</div>
|
|
<label>Stroke width</label>
|
|
<input type="text" name="stroke-width" class="input-mini">
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Icon</legend>
|
|
<label>File URL</label>
|
|
<input type="text" name="file-url" style="width:100%;">
|
|
<span class="help-block">e.g. <code>icons/red_dark/xhdpi/ic_action_achievement.png</code></span>
|
|
<div class="row">
|
|
<div class="span2">
|
|
<label>x-position</label>
|
|
<input type="text" name="iconx" class="input-small">
|
|
</div>
|
|
<div class="span2">
|
|
<label>y-position</label>
|
|
<input type="text" name="icony" class="input-small">
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<div class="span4">
|
|
<legend>Preview</legend>
|
|
<canvas id="badge" width="100" height="100"></canvas>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div>
|
|
<a class="btn btn-submit btn-primary" href="#"><i class="icon-arrow-down icon-white"></i> Download</a>
|
|
<p>
|
|
<small>Right-click → Save Link as</small>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
${js}
|
|
|
|
</body>
|
|
</html>
|