this is my first or
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
<link rel="stylesheet" href="css/pagination.css" />
<section layout:fragment="content" class="sectionhome">
<script type="text/javascript">
$('#homePage').css('display', 'none');
</script>
<!-- Modal -->
<div class="modal fade" id="add_pro" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add project modal</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">project name</label>
<input type="text" class="form-control" id="pro_name" placeholder="project name"/>
</div>
<div class="form-group">
<label for="input-b4b">Disabled Input</label>
<!-- <input id="input-b4b" name="pro-file" type="file" class="file"/>-->
<div class="upload-box">
<img src="images/upload.jpg" />
<input type="file" name="prosimg" />
</div>
<p class="help-block" id="help-block-img" >A picture of a project.</p>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="create_pro" >create</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modify_pro" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add project modal</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">project name</label>
<input type="text" class="form-control pro_name" placeholder="project name"/>
</div>
<div class="form-group">
<label for="input-b4b">Disabled Input</label>
<!-- <input id="input-b4b" name="pro-file" type="file" class="file"/>-->
<div class="upload-box">
<img src="images/upload.jpg" />
<input type="file" name="prosimg" />
</div>
<p class="help-block" >A picture of a project.</p>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="forder_pro" >save</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="del-prompt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Prompt</h4>
</div>
<div class="modal-body">
<p>Do you confirm that you want to delete this record?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="sure" >sure</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="forder_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">detail</h4>
</div>
<div class="modal-body" >
<div id="detail-box" >
</div>
<script id="forder-detail-template" type="text/x-handlebars-template">
<ul class="pro-version" >
{{#each list}}
<li>
<div href="" class="clearfix" >
<i class="iconfont" style="color: #2b2eff;" ></i>
<p >{{ planName }}</p>
<div class="pull-right" >
<small >{{ formatDate createTime }}</small>
<span class="glyphicon glyphicon-remove" attr_id="{{ id }}" ></span>
</div>
</div>
</li>
{{/each}}
</ul>
</script>
<div id="pagination_detail" class="pagination"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="sure" >sure</button>
</div>
</div>
</div>
</div>
<div class="container home1 homey">
<div class="plan">
<div class="page-header" id="page-header-show" >
<h4 th:text="#{My.project}"></h4> <a class="pull-right add-pro-btn" data-toggle="modal" data-target="#add_pro" > <span class="glyphicon glyphicon-plus"></span> new project </a>
</div>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="plan-no-div">
</div>
</div>
</div>
<div class="page-header pad-top-50" >
<h4 >
<span th:text="#{New.product}"></span> <small> <span class="label label-default" th:text="#{New}"></span></small>
</h4>
</div>
<div class="pro-group">
<div class="pro-group-name">
<ul class="nav nav-tabs " id="group-list">
</ul>
<script id="group-list-template" type="text/x-handlebars-template">
{{#each result}}
{{active groupName @index id}}
{{/each}}
</script>
</div>
<div class="acd">
<div class=" hot clearfix" id="newProduct">
</div>
<script id="newProduct-template" type="text/x-handlebars-template">
{{#each list}}
<div class=" col-xs-2 hot-item">
<div class="add">
<a href="javascript:collect({{id}}, {{collected}}, {{groupId}})" class="addCon">
{{collectt collected}}
</a>
</div>
<img src="/{{pic}}" />
<div class="content-wrap">
<p class="text-sku">{{productNo}}</p>
<p class="text-wap text-center">{{productName}}</p>
</div>
</div>
{{/each}}
</script>
</div>
</div>
</div>
</section>
<th:block layout:fragment="script">
<script th:src="@{js/idangerous.swiper.min.js}"></script>
<script th:src="@{js/home/home.js}"></script>
</th:block>
</html>
