<!doctype html>
<html>
<head>
	  <link href="../static/assets/css/atlantis.css" rel="stylesheet" type="text/css" media="screen">
    <link href="../static/assets/css/atlantis.css.map.css" rel="stylesheet" type="text/css">
    <link href="../static/assets/css/atlantis.min.css" rel="stylesheet" type="text/css">
    <link href="../static/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../static/assets/css/demo.css" rel="stylesheet" type="text/css">
    <link href="../static/assets/css/fonts.css" rel="stylesheet" type="text/css"><link href="../static/assets/css/fonts.min.css" rel="stylesheet" type="text/css">
	<div th:include="layout::head"></div>
<meta charset="utf-8">
<title>main</title>
</head>

<body>
<!-- Custom template | don't include it in your project! -->
		
	<!-- End Custom template -->
  </div>
	<!--   Core JS Files   -->
<div class="wrapper">
	  <div class="main-header">
	    <!-- Logo Header -->
	    <div class="logo-header" data-background-color="blue"> <a href="index.html" class="logo"> <img src="../assets/img/logo.svg" alt="navbar brand" class="navbar-brand"></a>
	      <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"> <i class="icon-menu"></i></span></button>
	      <button class="topbar-toggler more"><i class="icon-options-vertical"></i></button>
	      <div class="nav-toggle">
	        <button class="btn btn-toggle toggle-sidebar"> <i class="icon-menu"></i></button>
          </div>
        </div>
	    <!-- End Logo Header -->
	    <!-- Navbar Header -->
	    <nav class="navbar navbar-header navbar-expand-lg" data-background-color="blue2">
	      <div class="container-fluid">
	        <div class="collapse" id="search-nav">
	          <form class="navbar-left navbar-form nav-search mr-md-3">
	            <div class="input-group">
	              <div class="input-group-prepend">
	                <button type="submit" class="btn btn-search pr-1"> <i class="fa fa-search search-icon"></i></button>
                  </div>
	              <input type="text" placeholder="Search ..." class="form-control">
                </div>
              </form>
            </div>
	        <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
	          <li class="nav-item toggle-nav-search hidden-caret"> <a class="nav-link" data-toggle="collapse" href="#search-nav" role="button" aria-expanded="false" aria-controls="search-nav"> <i class="fa fa-search"></i></a></li>
	          <li class="nav-item dropdown hidden-caret"> <a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-envelope"></i></a>
	            <ul class="dropdown-menu messages-notif-box animated fadeIn" aria-labelledby="messageDropdown">
	              <li>
	                <div class="dropdown-title d-flex justify-content-between align-items-center"> Messages <a href="#" class="small">Mark all as read</a></div>
                  </li>
	              <li>
	                <div class="message-notif-scroll scrollbar-outer">
	                  <div class="notif-center"> <a href="#">
	                    <div class="notif-img"> <img src="../assets/img/jm_denis.jpg" alt="Img Profile"></div>
	                    <div class="notif-content"> <span class="subject">Jimmy Denis</span> <span class="block"> How are you ? </span> <span class="time">5 minutes ago</span></div>
	                    </a> <a href="#">
	                      <div class="notif-img"> <img src="../assets/img/chadengle.jpg" alt="Img Profile"></div>
	                      <div class="notif-content"> <span class="subject">Chad</span> <span class="block"> Ok, Thanks ! </span> <span class="time">12 minutes ago</span></div>
	                      </a> <a href="#">
	                        <div class="notif-img"> <img src="../assets/img/mlane.jpg" alt="Img Profile"></div>
	                        <div class="notif-content"> <span class="subject">Jhon Doe</span> <span class="block"> Ready for the meeting today... </span> <span class="time">12 minutes ago</span></div>
	                        </a> <a href="#">
	                          <div class="notif-img"> <img src="../assets/img/talha.jpg" alt="Img Profile"></div>
	                          <div class="notif-content"> <span class="subject">Talha</span> <span class="block"> Hi, Apa Kabar ? </span> <span class="time">17 minutes ago</span></div>
	                          </a></div>
                    </div>
                  </li>
	              <li> <a class="see-all" href="javascript:void(0);">See all messages<i class="fa fa-angle-right"></i></a></li>
                </ul>
              </li>
	          <li class="nav-item dropdown hidden-caret"> <a class="nav-link dropdown-toggle" href="#" id="notifDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bell"></i> <span class="notification">4</span></a>
	            <ul class="dropdown-menu notif-box animated fadeIn" aria-labelledby="notifDropdown">
	              <li>
	                <div class="dropdown-title">You have 4 new notification</div>
                  </li>
	              <li>
	                <div class="notif-scroll scrollbar-outer">
	                  <div class="notif-center"> <a href="#">
	                    <div class="notif-icon notif-primary"> <i class="fa fa-user-plus"></i></div>
	                    <div class="notif-content"> <span class="block"> New user registered </span> <span class="time">5 minutes ago</span></div>
	                    </a> <a href="#">
	                      <div class="notif-icon notif-success"> <i class="fa fa-comment"></i></div>
	                      <div class="notif-content"> <span class="block"> Rahmad commented on Admin </span> <span class="time">12 minutes ago</span></div>
	                      </a> <a href="#">
	                        <div class="notif-img"> <img src="../assets/img/profile2.jpg" alt="Img Profile"></div>
	                        <div class="notif-content"> <span class="block"> Reza send messages to you </span> <span class="time">12 minutes ago</span></div>
	                        </a> <a href="#">
	                          <div class="notif-icon notif-danger"> <i class="fa fa-heart"></i></div>
	                          <div class="notif-content"> <span class="block"> Farrah liked Admin </span> <span class="time">17 minutes ago</span></div>
	                          </a></div>
                    </div>
                  </li>
	              <li> <a class="see-all" href="javascript:void(0);">See all notifications<i class="fa fa-angle-right"></i></a></li>
                </ul>
              </li>
	          <li class="nav-item dropdown hidden-caret"> <a class="nav-link" data-toggle="dropdown" href="#" aria-expanded="false"> <i class="fas fa-layer-group"></i></a>
	            <div class="dropdown-menu quick-actions quick-actions-info animated fadeIn">
	              <div class="quick-actions-header"> <span class="title mb-1">Quick Actions</span> <span class="subtitle op-8">Shortcuts</span></div>
	              <div class="quick-actions-scroll scrollbar-outer">
	                <div class="quick-actions-items">
	                  <div class="row m-0"> <a class="col-6 col-md-4 p-0" href="#">
	                    <div class="quick-actions-item"> <i class="flaticon-file-1"></i> <span class="text">Generated Report</span></div>
	                    </a> <a class="col-6 col-md-4 p-0" href="#">
	                      <div class="quick-actions-item"> <i class="flaticon-database"></i> <span class="text">Create New Database</span></div>
	                      </a> <a class="col-6 col-md-4 p-0" href="#">
	                        <div class="quick-actions-item"> <i class="flaticon-pen"></i> <span class="text">Create New Post</span></div>
	                        </a> <a class="col-6 col-md-4 p-0" href="#">
	                          <div class="quick-actions-item"> <i class="flaticon-interface-1"></i> <span class="text">Create New Task</span></div>
	                          </a> <a class="col-6 col-md-4 p-0" href="#">
	                            <div class="quick-actions-item"> <i class="flaticon-list"></i> <span class="text">Completed Tasks</span></div>
	                            </a> <a class="col-6 col-md-4 p-0" href="#">
	                              <div class="quick-actions-item"> <i class="flaticon-file"></i> <span class="text">Create New Invoice</span></div>
	                              </a></div>
                    </div>
                  </div>
                </div>
              </li>
	          <li class="nav-item dropdown hidden-caret"> <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
	            <div class="avatar-sm"> <img src="../assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle"></div>
	            </a>
	            <ul class="dropdown-menu dropdown-user animated fadeIn">
	              <div class="dropdown-user-scroll scrollbar-outer">
	                <li>
	                  <div class="user-box">
	                    <div class="avatar-lg"><img src="../assets/img/profile.jpg" alt="image profile" class="avatar-img rounded"></div>
	                    <div class="u-text">
	                      <h4>Hizrian</h4>
	                      <p class="text-muted">hello@example.com</p>
	                      <a href="profile.html" class="btn btn-xs btn-secondary btn-sm">View Profile</a></div>
                      </div>
                    </li>
	                <li>
	                  <div class="dropdown-divider"></div>
	                  <a class="dropdown-item" href="#">My Profile</a> <a class="dropdown-item" href="#">My Balance</a> <a class="dropdown-item" href="#">Inbox</a>
	                  <div class="dropdown-divider"></div>
	                  <a class="dropdown-item" href="#">Account Setting</a>
	                  <div class="dropdown-divider"></div>
	                  <a class="dropdown-item" href="#">Logout</a></li>
                  </div>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
	    <!-- End Navbar -->
      </div>
	  <!-- Sidebar -->
	  <div class="sidebar sidebar-style-2">
	    <div class="sidebar-wrapper scrollbar scrollbar-inner">
	      <div class="sidebar-content">
	        <div class="user">
	          <div class="avatar-sm float-left mr-2"> <img src="../assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle"></div>
	          <div class="info"> <a data-toggle="collapse" href="#collapseExample" aria-expanded="true"> <span> 二狗子<span class="user-level">学生</span> <span class="caret"></span></span></a>
	            <div class="clearfix"></div>
	            <div class="collapse in" id="collapseExample">
	              <ul class="nav">
	                <li> <a href="#profile"> <span class="link-collapse">基本资料</span></a></li>
	                <li> <a href="#edit"> <span class="link-collapse">编辑个人信息</span></a></li>
					  <li> <a href="#settings"> <span class="link-collapse">修改密码</span></a></li>
	                <li> <a href="#settings"> <span class="link-collapse">注销</span></a></li>
                  </ul>
                </div>
              </div>
            </div>
	        <ul class="nav nav-primary">
<!--
	          <li class="nav-item active"> <a data-toggle="collapse" href="#dashboard" class="collapsed" aria-expanded="false"> <i class="fas fa-home"></i>
	            <p>主页</p>
	            <span class="caret"></span></a>
	            <div class="collapse" id="dashboard">
	              <ul class="nav nav-collapse">
	                <li> <a href="../demo1/index.html"> <span class="sub-item">个人信息</span></a></li>
	                <li> <a href="../demo2/index.html"> <span class="sub-item">成绩</span></a></li>
                  </ul>
                </div>
              </li>
-->
	          <li class="nav-section"> <span class="sidebar-mini-icon"> <i class="fa fa-ellipsis-h"></i></span>
	            <h4 class="text-section">功能</h4>
              </li>
	          <li class="nav-item"> <a data-toggle="collapse" href="#base"> <i class="fas fa-layer-group"></i>
	            <p>活动</p>
	            <span class="caret"></span></a>
	            <div class="collapse" id="base">
	              <ul class="nav nav-collapse">
	                <li> <a href="huodong-1.html"> <span class="sub-item">我的活动</span></a></li>
	                <li> <a href="huodong-2.html"> <span class="sub-item">创建活动</span></a></li>
	                <li> <a href="huodong-3.html"> <span class="sub-item">活动列表</span></a></li>
	                <li> <a href="huodong-4.html"> <span class="sub-item">活动报告</span></a></li>
	                
                  </ul>
                </div>
              </li>
	          <li class="nav-item"> <a data-toggle="collapse" href="#sidebarLayouts"> <i class="fas fa-th-list"></i>
	            <p>消息</p>
	            <span class="caret"></span></a>
	            <div class="collapse" id="sidebarLayouts">
	              <ul class="nav nav-collapse">
	                <li> <a href="xiaoxi-1.html"> <span class="sub-item">我的消息</span></a></li>
	                <li> <a href="xiaoxi-2.html"> <span class="sub-item">发送消息</span></a></li>
	               
                  </ul>
                </div>
              </li>
	          <li class="nav-item"> <a data-toggle="collapse" href="#forms"> <i class="fas fa-pen-square"></i>
	            <p>请假</p>
	            <span class="caret"></span></a>
	            <div class="collapse" id="forms">
	              <ul class="nav nav-collapse">
	                <li> <a href="qingjia-1.html"> <span class="sub-item">请假申请</span></a></li>
					  <li> <a href="qingjia-2.html"> <span class="sub-item">假条审核</span></a></li>
                  </ul>
                </div>
              </li>
	          
	          <li class="nav-item"> <a href="widgets.html"> <i class="fas fa-desktop"></i>
	            <p>Widgets</p>
	            <span class="badge badge-success">4</span></a></li>
<!--
	          <li class="nav-item"> <a data-toggle="collapse" href="#submenu"> <i class="fas fa-bars"></i>
	            <p>Menu Levels</p>
	            <span class="caret"></span></a>
	            <div class="collapse" id="submenu">
	              <ul class="nav nav-collapse">
	                <li> <a data-toggle="collapse" href="#subnav1"> <span class="sub-item">Level 1</span> <span class="caret"></span></a>
	                  <div class="collapse" id="subnav1">
	                    <ul class="nav nav-collapse subnav">
	                      <li> <a href="#"> <span class="sub-item">Level 2</span></a></li>
	                      <li> <a href="#"> <span class="sub-item">Level 2</span></a></li>
                        </ul>
                      </div>
                    </li>
	                <li> <a data-toggle="collapse" href="#subnav2"> <span class="sub-item">Level 1</span> <span class="caret"></span></a>
	                  <div class="collapse" id="subnav2">
	                    <ul class="nav nav-collapse subnav">
	                      <li> <a href="#"> <span class="sub-item">Level 2</span></a></li>
                        </ul>
                      </div>
                    </li>
	                <li> <a href="#"> <span class="sub-item">Level 1</span></a></li>
                  </ul>
                </div>
              </li>
-->
	          <li class="mx-4 mt-2"> <a href="#" class="btn btn-primary btn-block"><span class="btn-label mr-2"> <i class="fa fa-heart"></i></span>Buy Pro</a></li>
            </ul>
          </div>
        </div>
      </div>
	  
		   	
		  

	   		 <iframe id="frame-area" src="huodong2.html" style="width:100%; height:100%;overflow-x: hidden" ></iframe>
		  
      
<!-- End Sidebar -->  <!-- Custom template | don't include it in your project! -->	  <!-- End Custom template -->
</div>
	<script src="../assets/js/core/jquery.3.2.1.min.js"></script> <script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap.min.js"></script>

	<!-- jQuery UI -->
<script src="../assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="../assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>

	<!-- jQuery Scrollbar -->
<script src="../assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>


	<!-- Chart JS -->
<script src="../assets/js/plugin/chart.js/chart.min.js"></script>

	<!-- jQuery Sparkline -->
<script src="../assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js"></script>

	<!-- Chart Circle -->
<script src="../assets/js/plugin/chart-circle/circles.min.js"></script>

	<!-- Datatables -->
<script src="../assets/js/plugin/datatables/datatables.min.js"></script>

	<!-- Bootstrap Notify -->
<script src="../assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>

	<!-- jQuery Vector Maps -->
<script src="../assets/js/plugin/jqvmap/jquery.vmap.min.js"></script>
<script src="../assets/js/plugin/jqvmap/maps/jquery.vmap.world.js"></script>

	<!-- Sweet Alert -->
<script src="../assets/js/plugin/sweetalert/sweetalert.min.js"></script>

	<!-- Atlantis JS -->
<script src="../assets/js/atlantis.min.js"></script>

	<!-- Atlantis DEMO methods, don't include it in your project! -->
<script src="../assets/js/setting-demo.js"></script>
<script src="../assets/js/demo.js"></script>
<script>
		Circles.create({
			id:'circles-1',
			radius:45,
			value:60,
			maxValue:100,
			width:7,
			text: 5,
			colors:['#f1f1f1', '#FF9E27'],
			duration:400,
			wrpClass:'circles-wrp',
			textClass:'circles-text',
			styleWrapper:true,
			styleText:true
		})

		Circles.create({
			id:'circles-2',
			radius:45,
			value:70,
			maxValue:100,
			width:7,
			text: 36,
			colors:['#f1f1f1', '#2BB930'],
			duration:400,
			wrpClass:'circles-wrp',
			textClass:'circles-text',
			styleWrapper:true,
			styleText:true
		})

		Circles.create({
			id:'circles-3',
			radius:45,
			value:40,
			maxValue:100,
			width:7,
			text: 12,
			colors:['#f1f1f1', '#F25961'],
			duration:400,
			wrpClass:'circles-wrp',
			textClass:'circles-text',
			styleWrapper:true,
			styleText:true
		})

		var totalIncomeChart = document.getElementById('totalIncomeChart').getContext('2d');

		var mytotalIncomeChart = new Chart(totalIncomeChart, {
			type: 'bar',
			data: {
				labels: ["S", "M", "T", "W", "T", "F", "S", "S", "M", "T"],
				datasets : [{
					label: "Total Income",
					backgroundColor: '#ff9e27',
					borderColor: 'rgb(23, 125, 255)',
					data: [6, 4, 9, 5, 4, 6, 4, 3, 8, 10],
				}],
			},
			options: {
				responsive: true,
				maintainAspectRatio: false,
				legend: {
					display: false,
				},
				scales: {
					yAxes: [{
						ticks: {
							display: false //this will remove only the label
						},
						gridLines : {
							drawBorder: false,
							display : false
						}
					}],
					xAxes : [ {
						gridLines : {
							drawBorder: false,
							display : false
						}
					}]
				},
			}
		});

		$('#lineChart').sparkline([105,103,123,100,95,105,115], {
			type: 'line',
			height: '70',
			width: '100%',
			lineWidth: '2',
			lineColor: '#ffa534',
			fillColor: 'rgba(255, 165, 52, .14)'
		});
	</script>
</body>
</html>
