<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12"> <form class="form-horizontal"> <fieldset> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput"></label> <div class="col-md-4"> <h2>Promotion Campaign</h2> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Promotion Code</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="ONNERSONGKRAN" class="form-control input-md" required=""> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Promotion Type</label> <div class="col-md-4"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Percentage %</option> <option value="2">Absolute Discount</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Start Date</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="12-04-2016 00:00:01" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">End Date</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="16-04-2016 23:59:59" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Limit Count</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="200" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Min Amount</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="500" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Discount Type</label> <div class="col-md-4"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Only Total Food</option> <option value="2">All</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Category ID</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="6" class="form-control input-md"> <span class="help-block">6 is all</span> </div> </div> <!-- Search input--> <div class="form-group"> <label class="col-md-4 control-label" for="searchinput">Limit Budget</label> <div class="col-md-4"> <input id="searchinput" name="searchinput" type="search" placeholder="100000" class="form-control input-md"> </div> </div> <!-- Search input--> <div class="form-group"> <label class="col-md-4 control-label" for="searchinput">Shop ID</label> <div class="col-md-4"> <input id="searchinput" name="searchinput" type="search" placeholder="49" class="form-control input-md"> <p class="help-block"> *Optional, Incase discount by specific shop</p> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="button1id"></label> <div class="col-md-8"> <button id="button1id" name="button1id" class="btn btn-primary">Submit</button> <button id="button2id" name="button2id" class="btn btn-danger">Reset</button> </div> </div> </fieldset> </form> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal -->

/* -------------------------------------------------- :: Login Section -------------------------------------------------- */ #login { padding-top: 50px } #login .form-wrap { width: 30%; margin: 0 auto; } #login h1 { color: #1fa67b; font-size: 18px; text-align: center; font-weight: bold; padding-bottom: 20px; } #login .form-group { margin-bottom: 25px; } #login .checkbox { margin-bottom: 20px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #login .checkbox.show:before { content: '\e013'; color: #1fa67b; font-size: 17px; margin: 1px 0 0 3px; position: absolute; pointer-events: none; font-family: 'Glyphicons Halflings'; } #login .checkbox .character-checkbox { width: 25px; height: 25px; cursor: pointer; border-radius: 3px; border: 1px solid #ccc; vertical-align: middle; display: inline-block; } #login .checkbox .label { color: #6d6d6d; font-size: 13px; font-weight: normal; } #login .btn.btn-custom { font-size: 14px; margin-bottom: 20px; } #login .forget { font-size: 13px; text-align: center; display: block; } /* -------------------------------------------------- :: Inputs & Buttons -------------------------------------------------- */ .form-control { color: #212121; } .btn-custom { color: #fff; background-color: #1fa67b; } .btn-custom:hover, .btn-custom:focus { color: #fff; } /* -------------------------------------------------- :: Footer -------------------------------------------------- */ #footer { color: #6d6d6d; font-size: 12px; text-align: center; } #footer p { margin-bottom: 0; } #footer a { color: inherit; }

function showPassword() { var key_attr = $('#key').attr('type'); if(key_attr != 'text') { $('.checkbox').addClass('show'); $('#key').attr('type', 'text'); } else { $('.checkbox').removeClass('show'); $('#key').attr('type', 'password'); } }