refactor: 미사용 모듈 정리
parent
aa4ca1a86d
commit
5bc82ebaae
@ -1,21 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSRF Attacker</h1>
|
||||
<a href="http://localhost:8080/spring-security-rest-full/transfer?accountNo=5678&amount=1000">Show Kittens Pictures</a>
|
||||
|
||||
<img src="http://localhost:8080/spring-security-rest-full/transfer?accountNo=5678&amount=1000"/>
|
||||
|
||||
<form action="http://localhost:8080/spring-security-rest-full/transfer" method="POST">
|
||||
<input name="accountNo" type="hidden" value="5678"/>
|
||||
<input name="amount" type="hidden" value="1000"/>
|
||||
<input type="submit" value="Show Kittens Picture">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{thymeleaf/layouts/layout-admin}">
|
||||
|
||||
|
||||
|
||||
<th:block layout:fragment="template">
|
||||
<div class="w-full md:text-center text-gray-400">
|
||||
<p th:text="${title} + '!'" />
|
||||
</div>
|
||||
</th:block>
|
||||
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{thymeleaf/layouts/layout-admin}">
|
||||
|
||||
|
||||
|
||||
<th:block layout:fragment="template">
|
||||
<div class="w-full md:text-center text-gray-400">
|
||||
<p th:text="${title} + '!'" />
|
||||
</div>
|
||||
</th:block>
|
||||
@ -1,19 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Test Error Page!</title>
|
||||
<link rel="stylesheet" th:href="@{/css/style.css}"></link>
|
||||
</head>
|
||||
<body>
|
||||
<div class="errorPage"><span class="errorHead">404</span><br/>
|
||||
<p th:text="${'path: ' + path}"></p>
|
||||
<p th:text="${'status: ' + status}"></p>
|
||||
<p th:text="${'timestamp: ' + timestamp}"></p>
|
||||
<p th:text="${'error: ' + error}"></p>
|
||||
<p th:text="${'errors: ' + errors}"></p>
|
||||
<p th:text="${'exception: ' + exception}"></p>
|
||||
<p th:text="${'message: ' + message}"></p>
|
||||
<p th:text="${'trace: ' + trace}"></p></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Test Error Page!</title>
|
||||
<link rel="stylesheet" th:href="@{/css/style.css}"></link>
|
||||
</head>
|
||||
<body>
|
||||
<div class="errorPage"><span class="errorHead">Error</span><br/>
|
||||
<p th:text="${'path: ' + path}"></p>
|
||||
<p th:text="${'status: ' + status}"></p>
|
||||
<p th:text="${'timestamp: ' + timestamp}"></p>
|
||||
<p th:text="${'error: ' + error}"></p>
|
||||
<p th:text="${'errors: ' + errors}"></p>
|
||||
<p th:text="${'exception: ' + exception}"></p>
|
||||
<p th:text="${'message: ' + message}"></p>
|
||||
<p th:text="${'trace: ' + trace}"></p></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,23 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{thymeleaf/layouts/layout-dark}">
|
||||
|
||||
<head></head>
|
||||
|
||||
<th:block layout:fragment="template">
|
||||
<div class="container-fluid" style="border: 1px solid red">
|
||||
<hr/>
|
||||
<span th:text="${defaultDto.msg}"></span>
|
||||
<span th:text="${defaultDto.result}"></span>
|
||||
<hr/>
|
||||
<div th:each="value : ${defaultDto.stringFlux}">
|
||||
<span th:text="${value}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
<script></script>
|
||||
|
||||
</html>
|
||||
@ -1,23 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{thymeleaf/layouts/layout-dark}">
|
||||
|
||||
<head></head>
|
||||
|
||||
<th:block layout:fragment="template">
|
||||
<div class="container-fluid" style="border: 1px solid red">
|
||||
<hr/>
|
||||
<span th:text="${defaultDto.msg}"></span>
|
||||
<span th:text="${defaultDto.result}"></span>
|
||||
<hr/>
|
||||
<div th:each="value : ${defaultDto.stringFlux}">
|
||||
<span th:text="${value}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
<script></script>
|
||||
|
||||
</html>
|
||||
@ -1,21 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{thymeleaf/layouts/layout-dark}">
|
||||
|
||||
<head></head>
|
||||
|
||||
<th:block layout:fragment="template">
|
||||
<div class="container-fluid" style="border: 1px solid red">
|
||||
<h1>WebFlux!!!!!!!!!!!!!!!!!</h1>
|
||||
<h3>
|
||||
<p>name : <b th:text="${data.name}"> </b></p>
|
||||
<p>age : <b th:text="${data.age}"> </b></p>
|
||||
</h3>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
<script></script>
|
||||
|
||||
</html>
|
||||
@ -1,5 +0,0 @@
|
||||
<footer th:fragment="footer-frmt" class="">
|
||||
<div class="">
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
@ -1,14 +0,0 @@
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org">
|
||||
<header th:fragment="header-frmt(title)">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title th:text="${title}">Tailwind Admin Starter Template : Tailwind Toolbox</title>
|
||||
<meta name="description" content="description here">
|
||||
<meta name="keywords" content="keywords,here">
|
||||
</head>
|
||||
</header>
|
||||
|
||||
</html>
|
||||
@ -1,79 +0,0 @@
|
||||
<nav th:fragment="menu-frmt" class="bg-gray-800 pt-2 md:pt-1 pb-1 px-1 mt-0 h-auto fixed w-full z-20 top-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="flex flex-shrink md:w-1/3 justify-center md:justify-start text-white">
|
||||
<a href="#">
|
||||
<span class="text-xl pl-2"><i class="em em-grinning"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 md:w-1/3 justify-center md:justify-start text-white px-2">
|
||||
<span class="relative w-full">
|
||||
<input type="search" placeholder="Search" class="w-full bg-gray-900 text-white transition border border-transparent focus:outline-none focus:border-gray-400 rounded py-3 px-2 pl-10 appearance-none leading-normal">
|
||||
<div class="absolute search-icon" style="top: 1rem; left: .8rem;">
|
||||
<svg class="fill-current pointer-events-none text-white w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full pt-2 content-center justify-between md:w-1/3 md:justify-end">
|
||||
<ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
|
||||
<li class="flex-1 md:flex-none md:mr-3">
|
||||
<a class="inline-block py-2 px-4 text-white no-underline" href="#">Active</a>
|
||||
</li>
|
||||
<li class="flex-1 md:flex-none md:mr-3">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
|
||||
</li>
|
||||
<li class="flex-1 md:flex-none md:mr-3">
|
||||
<div class="relative inline-block">
|
||||
<button onclick="toggleDD('myDropdown')" class="drop-button text-white focus:outline-none"> <span class="pr-2"><i class="em em-robot_face"></i></span> Hi, User <svg class="h-3 fill-current inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg></button>
|
||||
<div id="myDropdown" class="dropdownlist absolute bg-gray-800 text-white right-0 mt-3 p-3 overflow-auto z-30 invisible">
|
||||
<input type="text" class="drop-search p-2 text-gray-600" placeholder="Search.." id="myInput" onkeyup="filterDD('myDropdown','myInput')">
|
||||
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fa fa-user fa-fw"></i> Profile</a>
|
||||
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fa fa-cog fa-fw"></i> Settings</a>
|
||||
<div class="border border-gray-800"></div>
|
||||
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/*Toggle dropdown list*/
|
||||
function toggleDD(myDropMenu) {
|
||||
document.getElementById(myDropMenu).classList.toggle("invisible");
|
||||
}
|
||||
/*Filter dropdown options*/
|
||||
function filterDD(myDropMenu, myDropMenuSearch) {
|
||||
var input, filter, ul, li, a, i;
|
||||
input = document.getElementById(myDropMenuSearch);
|
||||
filter = input.value.toUpperCase();
|
||||
div = document.getElementById(myDropMenu);
|
||||
a = div.getElementsByTagName("a");
|
||||
for (i = 0; i < a.length; i++) {
|
||||
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
|
||||
a[i].style.display = "";
|
||||
} else {
|
||||
a[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
// Close the dropdown menu if the user clicks outside of it
|
||||
window.onclick = function(event) {
|
||||
if (!event.target.matches('.drop-button') && !event.target.matches('.drop-search')) {
|
||||
var dropdowns = document.getElementsByClassName("dropdownlist");
|
||||
for (var i = 0; i < dropdowns.length; i++) {
|
||||
var openDropdown = dropdowns[i];
|
||||
if (!openDropdown.classList.contains('invisible')) {
|
||||
openDropdown.classList.add('invisible');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
<aside id="sidebar" th:fragment="sidebar-frmt">
|
||||
|
||||
<div class="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:relative md:h-screen z-10 w-full md:w-48">
|
||||
|
||||
<div class="md:mt-12 md:w-48 md:fixed md:left-0 md:top-0 content-center md:content-start text-left justify-between">
|
||||
<ul class="list-reset flex flex-row md:flex-col py-0 md:py-3 px-1 md:px-2 text-center md:text-left">
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-pink-500">
|
||||
<i class="fas fa-tasks pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Tasks</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-purple-500">
|
||||
<i class="fa fa-envelope pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-blue-600">
|
||||
<i class="fas fa-chart-area pr-0 md:pr-3 text-blue-600"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-white md:text-white block md:inline-block">Analytics</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-0 md:pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-red-500">
|
||||
<i class="fa fa-wallet pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Payments</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@ -1,31 +0,0 @@
|
||||
<footer th:fragment="footer-frmt" class="bg-gray-900 border-t border-gray-400 shadow">
|
||||
<div class="container max-w-md mx-auto flex py-8">
|
||||
<div class="w-full mx-auto flex flex-wrap">
|
||||
<div class="flex w-full md:w-1/2 ">
|
||||
<div class="px-8">
|
||||
<h3 class="font-bold font-bold text-gray-100">About</h3>
|
||||
<p class="py-4 text-gray-600 text-sm">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel mi ut felis tempus commodo nec id erat. Suspendisse consectetur dapibus velit ut lacinia.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full md:w-1/2">
|
||||
<div class="px-8">
|
||||
<h3 class="font-bold font-bold text-gray-100">Social</h3>
|
||||
<ul class="list-reset items-center text-sm pt-3">
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@ -1,29 +0,0 @@
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org">
|
||||
<header th:fragment="header-frmt(title)">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title th:text="${title}">Tailwind Starter Template - Night Admin Template: Tailwind Toolbox</title>
|
||||
<meta name="description" content="description here">
|
||||
<meta name="keywords" content="keywords,here">
|
||||
|
||||
<style>
|
||||
.bg-black-alt {
|
||||
background:#191919;
|
||||
}
|
||||
.text-black-alt {
|
||||
color:#191919;
|
||||
}
|
||||
.border-black-alt {
|
||||
border-color: #191919;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
</header>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,142 +0,0 @@
|
||||
<nav th:fragment="menu-frmt" id="menu" class="bg-gray-900 fixed w-full z-10 top-0 shadow">
|
||||
<div class="w-full container mx-auto flex flex-wrap items-center mt-0 pt-3 pb-3 md:pb-0">
|
||||
<div class="w-1/2 pl-2 md:pl-0">
|
||||
<a class="text-gray-100 text-base xl:text-xl no-underline hover:no-underline font-bold" href="#">
|
||||
<i class="fas fa-moon text-blue-400 pr-3"></i> Admin Dark Mode
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="w-1/2 pr-0">
|
||||
<div class="flex relative inline-block float-right">
|
||||
|
||||
<div class="relative text-sm text-gray-100">
|
||||
<button id="userButton" class="flex items-center focus:outline-none mr-3">
|
||||
<img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of User">
|
||||
<span class="hidden md:inline-block text-gray-100">Hi, User</span>
|
||||
<svg class="pl-2 h-2 fill-current text-gray-100" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129"><g><path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/></g></svg>
|
||||
</button>
|
||||
<div id="userMenu" class="bg-gray-900 rounded shadow-md mt-2 absolute mt-12 top-0 right-0 min-w-full overflow-auto z-30 invisible">
|
||||
<ul class="list-reset">
|
||||
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">My account</a></li>
|
||||
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">Notifications</a></li>
|
||||
<li><hr class="border-t mx-2 border-gray-400"></li>
|
||||
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="block lg:hidden pr-4">
|
||||
<button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-100 hover:border-teal-500 appearance-none focus:outline-none">
|
||||
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-gray-900 z-20" id="nav-content">
|
||||
<ul class="list-reset lg:flex flex-1 items-center px-4 md:px-0">
|
||||
<li class="mr-6 my-2 md:my-0">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-blue-400 no-underline hover:text-gray-100 border-b-2 border-blue-400 hover:border-blue-400">
|
||||
<i class="fas fa-home fa-fw mr-3 text-blue-400"></i><span class="pb-1 md:pb-0 text-sm">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-6 my-2 md:my-0">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-pink-400">
|
||||
<i class="fas fa-tasks fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Tasks</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-6 my-2 md:my-0">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-purple-400">
|
||||
<i class="fa fa-envelope fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-6 my-2 md:my-0">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-green-400">
|
||||
<i class="fas fa-chart-area fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Analytics</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-6 my-2 md:my-0">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-red-400">
|
||||
<i class="fa fa-wallet fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Payments</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="relative pull-right pl-4 pr-4 md:pr-0">
|
||||
<input type="search" placeholder="Search" class="w-full bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 pl-10 appearance-none leading-normal">
|
||||
<div class="absolute search-icon" style="top: 0.375rem;left: 1.75rem;">
|
||||
<svg class="fill-current pointer-events-none text-gray-500 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
/*Toggle dropdown list*/
|
||||
/*https://gist.github.com/slavapas/593e8e50cf4cc16ac972afcbad4f70c8*/
|
||||
|
||||
var userMenuDiv = document.getElementById("userMenu");
|
||||
var userMenu = document.getElementById("userButton");
|
||||
|
||||
var navMenuDiv = document.getElementById("nav-content");
|
||||
var navMenu = document.getElementById("nav-toggle");
|
||||
|
||||
document.onclick = check;
|
||||
|
||||
function check(e){
|
||||
var target = (e && e.target) || (event && event.srcElement);
|
||||
|
||||
//User Menu
|
||||
if (!checkParent(target, userMenuDiv)) {
|
||||
// click NOT on the menu
|
||||
if (checkParent(target, userMenu)) {
|
||||
// click on the link
|
||||
if (userMenuDiv.classList.contains("invisible")) {
|
||||
userMenuDiv.classList.remove("invisible");
|
||||
} else {userMenuDiv.classList.add("invisible");}
|
||||
} else {
|
||||
// click both outside link and outside menu, hide menu
|
||||
userMenuDiv.classList.add("invisible");
|
||||
}
|
||||
}
|
||||
|
||||
//Nav Menu
|
||||
if (!checkParent(target, navMenuDiv)) {
|
||||
// click NOT on the menu
|
||||
if (checkParent(target, navMenu)) {
|
||||
// click on the link
|
||||
if (navMenuDiv.classList.contains("hidden")) {
|
||||
navMenuDiv.classList.remove("hidden");
|
||||
} else {navMenuDiv.classList.add("hidden");}
|
||||
} else {
|
||||
// click both outside link and outside menu, hide menu
|
||||
navMenuDiv.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function checkParent(t, elm) {
|
||||
while(t.parentNode) {
|
||||
if( t == elm ) {return true;}
|
||||
t = t.parentNode;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
<!--<aside id="sidebar" th:fragment="sidebar-frmt" class="bg-gray-900 fixed w-full z-10 top-0 shadow" >
|
||||
|
||||
<div class="w-full container mx-auto flex flex-wrap items-center mt-0 pt-3 pb-3 md:pb-0">-->
|
||||
|
||||
|
||||
<div th:fragment="sidebar-frmt" class="md:mt-12 md:w-48 md:fixed md:left-0 md:top-0 content-center md:content-start text-left justify-between">
|
||||
<ul class="list-reset flex flex-row md:flex-col py-0 md:py-3 px-1 md:px-2 text-center md:text-left">
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-pink-500">
|
||||
<i class="fas fa-tasks pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Tasks</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-purple-500">
|
||||
<i class="fa fa-envelope pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-blue-600">
|
||||
<i class="fas fa-chart-area pr-0 md:pr-3 text-blue-600"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-white md:text-white block md:inline-block">Analytics</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-0 md:pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-red-500">
|
||||
<i class="fa fa-wallet pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Payments</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -1,12 +0,0 @@
|
||||
<!-- webjar core CSS -->
|
||||
<link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
|
||||
<link th:href="@{/webjars/font-awesome/css/all.css}" rel="stylesheet"/>
|
||||
|
||||
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet" crossorigin="anonymous">
|
||||
<link href="https://emoji-css.afeld.me/emoji.css" rel="stylesheet" crossorigin="anonymous">
|
||||
|
||||
<!-- Custom common css -->
|
||||
<!--
|
||||
<link th:href="@{/css/common.css}" rel="stylesheet">
|
||||
<link th:href="@{/css/clean-blog.css}" rel="stylesheet">
|
||||
-->
|
||||
@ -1,14 +0,0 @@
|
||||
<!-- webjar core JavaScript -->
|
||||
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
|
||||
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
|
||||
<script th:src="@{/webjars/popper.js/umd/popper.js}"></script>
|
||||
<script th:src="@{/webjars/font-awesome/js/fontawesome.js}"></script>
|
||||
<script th:src="@{/webjars/momentjs/moment.js}"></script>
|
||||
<script th:src="@{/webjars/jquery-i18n-properties/jquery.i18n.properties.min.js}"></script>
|
||||
|
||||
|
||||
<!-- Custom scripts for this template -->
|
||||
<!-- 차트사용시 해당 페이지에서 import
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
|
||||
-->
|
||||
|
||||
@ -1,299 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{thymeleaf/layouts/layout-dark}">
|
||||
|
||||
|
||||
|
||||
<th:block layout:fragment="template">
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-green-600"><i class="fa fa-wallet fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">Total Revenue</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">$3249 <span class="text-green-500"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-pink-600"><i class="fas fa-users fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">Total Users</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">249 <span class="text-pink-500"><i class="fas fa-exchange-alt"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-yellow-600"><i class="fas fa-user-plus fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">New Users</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">2 <span class="text-yellow-600"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-blue-600"><i class="fas fa-server fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">Server Uptime</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">152 days</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-indigo-600"><i class="fas fa-tasks fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">To Do List</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">7 tasks</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-red-600"><i class="fas fa-inbox fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">Issues</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">3 <span class="text-red-500"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Divider-->
|
||||
<hr class="border-b-2 border-gray-600 my-8 mx-4">
|
||||
|
||||
<div class="flex flex-row flex-wrap flex-grow mt-2">
|
||||
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-7"), {
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April"],
|
||||
"datasets": [{
|
||||
"label": "Page Impressions",
|
||||
"data": [10, 20, 30, 40],
|
||||
"borderColor": "rgb(255, 99, 132)",
|
||||
"backgroundColor": "rgba(255, 99, 132, 0.2)"
|
||||
}, {
|
||||
"label": "Adsense Clicks",
|
||||
"data": [5, 15, 10, 30],
|
||||
"type": "line",
|
||||
"fill": false,
|
||||
"borderColor": "rgb(54, 162, 235)"
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"yAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-0" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-0"), {
|
||||
"type": "line",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April", "May", "June", "July"],
|
||||
"datasets": [{
|
||||
"label": "Views",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"borderColor": "rgb(75, 192, 192)",
|
||||
"lineTension": 0.1
|
||||
}]
|
||||
},
|
||||
"options": {}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-1" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-1"), {
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April", "May", "June", "July"],
|
||||
"datasets": [{
|
||||
"label": "Likes",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
|
||||
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
|
||||
"borderWidth": 1
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"yAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5"><canvas id="chartjs-4" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-4"), {
|
||||
"type": "doughnut",
|
||||
"data": {
|
||||
"labels": ["P1", "P2", "P3"],
|
||||
"datasets": [{
|
||||
"label": "Issues",
|
||||
"data": [300, 50, 100],
|
||||
"backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
|
||||
}]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Template Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Template</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/Template Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full p-3">
|
||||
<!--Table Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Table</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<table class="w-full p-5 text-gray-700">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left text-gray-600">Name</th>
|
||||
<th class="text-left text-gray-600">Side</th>
|
||||
<th class="text-left text-gray-600">Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Obi Wan Kenobi</td>
|
||||
<td>Light</td>
|
||||
<td>Jedi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Greedo</td>
|
||||
<td>South</td>
|
||||
<td>Scumbag</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Darth Vader</td>
|
||||
<td>Dark</td>
|
||||
<td>Sith</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="py-2"><a href="#" class="text-white">See More issues...</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/table Card-->
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
@ -1,446 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Tailwind Admin Starter Template : Tailwind Toolbox</title>
|
||||
<meta name="author" content="name">
|
||||
<meta name="description" content="description here">
|
||||
<meta name="keywords" content="keywords,here">
|
||||
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
|
||||
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> <!--Replace with your tailwind.css once created-->
|
||||
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> <!--Totally optional :) -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body class="bg-gray-800 font-sans leading-normal tracking-normal mt-12">
|
||||
|
||||
<!--Nav-->
|
||||
<nav class="bg-gray-800 pt-2 md:pt-1 pb-1 px-1 mt-0 h-auto fixed w-full z-20 top-0">
|
||||
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="flex flex-shrink md:w-1/3 justify-center md:justify-start text-white">
|
||||
<a href="#">
|
||||
<span class="text-xl pl-2"><i class="em em-grinning"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 md:w-1/3 justify-center md:justify-start text-white px-2">
|
||||
<span class="relative w-full">
|
||||
<input type="search" placeholder="Search" class="w-full bg-gray-900 text-white transition border border-transparent focus:outline-none focus:border-gray-400 rounded py-3 px-2 pl-10 appearance-none leading-normal">
|
||||
<div class="absolute search-icon" style="top: 1rem; left: .8rem;">
|
||||
<svg class="fill-current pointer-events-none text-white w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full pt-2 content-center justify-between md:w-1/3 md:justify-end">
|
||||
<ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
|
||||
<li class="flex-1 md:flex-none md:mr-3">
|
||||
<a class="inline-block py-2 px-4 text-white no-underline" href="#">Active</a>
|
||||
</li>
|
||||
<li class="flex-1 md:flex-none md:mr-3">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
|
||||
</li>
|
||||
<li class="flex-1 md:flex-none md:mr-3">
|
||||
<div class="relative inline-block">
|
||||
<button onclick="toggleDD('myDropdown')" class="drop-button text-white focus:outline-none"> <span class="pr-2"><i class="em em-robot_face"></i></span> Hi, User <svg class="h-3 fill-current inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg></button>
|
||||
<div id="myDropdown" class="dropdownlist absolute bg-gray-800 text-white right-0 mt-3 p-3 overflow-auto z-30 invisible">
|
||||
<input type="text" class="drop-search p-2 text-gray-600" placeholder="Search.." id="myInput" onkeyup="filterDD('myDropdown','myInput')">
|
||||
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fa fa-user fa-fw"></i> Profile</a>
|
||||
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fa fa-cog fa-fw"></i> Settings</a>
|
||||
<div class="border border-gray-800"></div>
|
||||
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="flex flex-col md:flex-row">
|
||||
|
||||
<div class="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:relative md:h-screen z-10 w-full md:w-48">
|
||||
|
||||
<div class="md:mt-12 md:w-48 md:fixed md:left-0 md:top-0 content-center md:content-start text-left justify-between">
|
||||
<ul class="list-reset flex flex-row md:flex-col py-0 md:py-3 px-1 md:px-2 text-center md:text-left">
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-pink-500">
|
||||
<i class="fas fa-tasks pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Tasks</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-purple-500">
|
||||
<i class="fa fa-envelope pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-blue-600">
|
||||
<i class="fas fa-chart-area pr-0 md:pr-3 text-blue-600"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-white md:text-white block md:inline-block">Analytics</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-3 flex-1">
|
||||
<a href="#" class="block py-1 md:py-3 pl-0 md:pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-red-500">
|
||||
<i class="fa fa-wallet pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Payments</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-content flex-1 bg-gray-100 mt-12 md:mt-2 pb-24 md:pb-5">
|
||||
|
||||
<div class="bg-gray-800 pt-3">
|
||||
<div class="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
|
||||
<h3 class="font-bold pl-2">Analytics</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gradient-to-b from-green-200 to-green-100 border-b-4 border-green-600 rounded-lg shadow-xl p-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded-full p-5 bg-green-600"><i class="fa fa-wallet fa-2x fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-600">Total Revenue</h5>
|
||||
<h3 class="font-bold text-3xl">$3249 <span class="text-green-500"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gradient-to-b from-pink-200 to-pink-100 border-b-4 border-pink-500 rounded-lg shadow-xl p-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded-full p-5 bg-pink-600"><i class="fas fa-users fa-2x fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-600">Total Users</h5>
|
||||
<h3 class="font-bold text-3xl">249 <span class="text-pink-500"><i class="fas fa-exchange-alt"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gradient-to-b from-yellow-200 to-yellow-100 border-b-4 border-yellow-600 rounded-lg shadow-xl p-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded-full p-5 bg-yellow-600"><i class="fas fa-user-plus fa-2x fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-600">New Users</h5>
|
||||
<h3 class="font-bold text-3xl">2 <span class="text-yellow-600"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gradient-to-b from-blue-200 to-blue-100 border-b-4 border-blue-500 rounded-lg shadow-xl p-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded-full p-5 bg-blue-600"><i class="fas fa-server fa-2x fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-600">Server Uptime</h5>
|
||||
<h3 class="font-bold text-3xl">152 days</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gradient-to-b from-indigo-200 to-indigo-100 border-b-4 border-indigo-500 rounded-lg shadow-xl p-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded-full p-5 bg-indigo-600"><i class="fas fa-tasks fa-2x fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-600">To Do List</h5>
|
||||
<h3 class="font-bold text-3xl">7 tasks</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gradient-to-b from-red-200 to-red-100 border-b-4 border-red-500 rounded-lg shadow-xl p-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded-full p-5 bg-red-600"><i class="fas fa-inbox fa-2x fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-600">Issues</h5>
|
||||
<h3 class="font-bold text-3xl">3 <span class="text-red-500"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-row flex-wrap flex-grow mt-2">
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-7"), {
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April"],
|
||||
"datasets": [{
|
||||
"label": "Page Impressions",
|
||||
"data": [10, 20, 30, 40],
|
||||
"borderColor": "rgb(255, 99, 132)",
|
||||
"backgroundColor": "rgba(255, 99, 132, 0.2)"
|
||||
}, {
|
||||
"label": "Adsense Clicks",
|
||||
"data": [5, 15, 10, 30],
|
||||
"type": "line",
|
||||
"fill": false,
|
||||
"borderColor": "rgb(54, 162, 235)"
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"yAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-0" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-0"), {
|
||||
"type": "line",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April", "May", "June", "July"],
|
||||
"datasets": [{
|
||||
"label": "Views",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"borderColor": "rgb(75, 192, 192)",
|
||||
"lineTension": 0.1
|
||||
}]
|
||||
},
|
||||
"options": {}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-1" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-1"), {
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April", "May", "June", "July"],
|
||||
"datasets": [{
|
||||
"label": "Likes",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
|
||||
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
|
||||
"borderWidth": 1
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"yAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5"><canvas id="chartjs-4" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-4"), {
|
||||
"type": "doughnut",
|
||||
"data": {
|
||||
"labels": ["P1", "P2", "P3"],
|
||||
"datasets": [{
|
||||
"label": "Issues",
|
||||
"data": [300, 50, 100],
|
||||
"backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
|
||||
}]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Table Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<table class="w-full p-5 text-gray-700">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left text-blue-900">Name</th>
|
||||
<th class="text-left text-blue-900">Side</th>
|
||||
<th class="text-left text-blue-900">Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Obi Wan Kenobi</td>
|
||||
<td>Light</td>
|
||||
<td>Jedi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Greedo</td>
|
||||
<td>South</td>
|
||||
<td>Scumbag</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Darth Vader</td>
|
||||
<td>Dark</td>
|
||||
<td>Sith</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="py-2"><a href="#">See More issues...</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/table Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Advert Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Advert</h5>
|
||||
</div>
|
||||
<div class="p-5 text-center">
|
||||
|
||||
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7D52JJ&placement=wwwtailwindtoolboxcom" id="_carbonads_js"></script>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/Advert Card-->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
/*Toggle dropdown list*/
|
||||
function toggleDD(myDropMenu) {
|
||||
document.getElementById(myDropMenu).classList.toggle("invisible");
|
||||
}
|
||||
/*Filter dropdown options*/
|
||||
function filterDD(myDropMenu, myDropMenuSearch) {
|
||||
var input, filter, ul, li, a, i;
|
||||
input = document.getElementById(myDropMenuSearch);
|
||||
filter = input.value.toUpperCase();
|
||||
div = document.getElementById(myDropMenu);
|
||||
a = div.getElementsByTagName("a");
|
||||
for (i = 0; i < a.length; i++) {
|
||||
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
|
||||
a[i].style.display = "";
|
||||
} else {
|
||||
a[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
// Close the dropdown menu if the user clicks outside of it
|
||||
window.onclick = function(event) {
|
||||
if (!event.target.matches('.drop-button') && !event.target.matches('.drop-search')) {
|
||||
var dropdowns = document.getElementsByClassName("dropdownlist");
|
||||
for (var i = 0; i < dropdowns.length; i++) {
|
||||
var openDropdown = dropdowns[i];
|
||||
if (!openDropdown.classList.contains('invisible')) {
|
||||
openDropdown.classList.add('invisible');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,513 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Tailwind Starter Template - Night Admin Template: Tailwind Toolbox</title>
|
||||
<meta name="description" content="description here">
|
||||
<meta name="keywords" content="keywords,here">
|
||||
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
|
||||
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> <!--Replace with your tailwind.css once created-->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin="anonymous"></script>
|
||||
|
||||
<style>
|
||||
.bg-black-alt {
|
||||
background:#191919;
|
||||
}
|
||||
.text-black-alt {
|
||||
color:#191919;
|
||||
}
|
||||
.border-black-alt {
|
||||
border-color: #191919;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body class="bg-black-alt font-sans leading-normal tracking-normal">
|
||||
|
||||
<nav id="header" class="bg-gray-900 fixed w-full z-10 top-0 shadow">
|
||||
|
||||
|
||||
<div class="w-full container mx-auto flex flex-wrap items-center mt-0 pt-3 pb-3 md:pb-0">
|
||||
|
||||
<div class="w-1/2 pl-2 md:pl-0">
|
||||
<a class="text-gray-100 text-base xl:text-xl no-underline hover:no-underline font-bold" href="#">
|
||||
<i class="fas fa-moon text-blue-400 pr-3"></i> Admin Dark Mode
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-1/2 pr-0">
|
||||
<div class="flex relative inline-block float-right">
|
||||
|
||||
<div class="relative text-sm text-gray-100">
|
||||
<button id="userButton" class="flex items-center focus:outline-none mr-3">
|
||||
<img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of User"> <span class="hidden md:inline-block text-gray-100">Hi, User</span>
|
||||
<svg class="pl-2 h-2 fill-current text-gray-100" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129"><g><path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/></g></svg>
|
||||
</button>
|
||||
<div id="userMenu" class="bg-gray-900 rounded shadow-md mt-2 absolute mt-12 top-0 right-0 min-w-full overflow-auto z-30 invisible">
|
||||
<ul class="list-reset">
|
||||
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">My account</a></li>
|
||||
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">Notifications</a></li>
|
||||
<li><hr class="border-t mx-2 border-gray-400"></li>
|
||||
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="block lg:hidden pr-4">
|
||||
<button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-100 hover:border-teal-500 appearance-none focus:outline-none">
|
||||
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-gray-900 z-20" id="nav-content">
|
||||
<ul class="list-reset lg:flex flex-1 items-center px-4 md:px-0">
|
||||
<li class="mr-6 my-2 md:my-0">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-blue-400 no-underline hover:text-gray-100 border-b-2 border-blue-400 hover:border-blue-400">
|
||||
<i class="fas fa-home fa-fw mr-3 text-blue-400"></i><span class="pb-1 md:pb-0 text-sm">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-6 my-2 md:my-0">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-pink-400">
|
||||
<i class="fas fa-tasks fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Tasks</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-6 my-2 md:my-0">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-purple-400">
|
||||
<i class="fa fa-envelope fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-6 my-2 md:my-0">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-green-400">
|
||||
<i class="fas fa-chart-area fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Analytics</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-6 my-2 md:my-0">
|
||||
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-red-400">
|
||||
<i class="fa fa-wallet fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Payments</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="relative pull-right pl-4 pr-4 md:pr-0">
|
||||
<input type="search" placeholder="Search" class="w-full bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 pl-10 appearance-none leading-normal">
|
||||
<div class="absolute search-icon" style="top: 0.375rem;left: 1.75rem;">
|
||||
<svg class="fill-current pointer-events-none text-gray-500 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!--Container-->
|
||||
<div class="container w-full mx-auto pt-20">
|
||||
|
||||
<div class="w-full px-4 md:px-0 md:mt-8 mb-16 text-gray-800 leading-normal">
|
||||
|
||||
<!--Console Content-->
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-green-600"><i class="fa fa-wallet fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">Total Revenue</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">$3249 <span class="text-green-500"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-pink-600"><i class="fas fa-users fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">Total Users</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">249 <span class="text-pink-500"><i class="fas fa-exchange-alt"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-yellow-600"><i class="fas fa-user-plus fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">New Users</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">2 <span class="text-yellow-600"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-blue-600"><i class="fas fa-server fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">Server Uptime</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">152 days</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-indigo-600"><i class="fas fa-tasks fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">To Do List</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">7 tasks</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-red-600"><i class="fas fa-inbox fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">Issues</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">3 <span class="text-red-500"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Divider-->
|
||||
<hr class="border-b-2 border-gray-600 my-8 mx-4">
|
||||
|
||||
<div class="flex flex-row flex-wrap flex-grow mt-2">
|
||||
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-7"), {
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April"],
|
||||
"datasets": [{
|
||||
"label": "Page Impressions",
|
||||
"data": [10, 20, 30, 40],
|
||||
"borderColor": "rgb(255, 99, 132)",
|
||||
"backgroundColor": "rgba(255, 99, 132, 0.2)"
|
||||
}, {
|
||||
"label": "Adsense Clicks",
|
||||
"data": [5, 15, 10, 30],
|
||||
"type": "line",
|
||||
"fill": false,
|
||||
"borderColor": "rgb(54, 162, 235)"
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"yAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-0" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-0"), {
|
||||
"type": "line",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April", "May", "June", "July"],
|
||||
"datasets": [{
|
||||
"label": "Views",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"borderColor": "rgb(75, 192, 192)",
|
||||
"lineTension": 0.1
|
||||
}]
|
||||
},
|
||||
"options": {}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-1" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-1"), {
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April", "May", "June", "July"],
|
||||
"datasets": [{
|
||||
"label": "Likes",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
|
||||
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
|
||||
"borderWidth": 1
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"yAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5"><canvas id="chartjs-4" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-4"), {
|
||||
"type": "doughnut",
|
||||
"data": {
|
||||
"labels": ["P1", "P2", "P3"],
|
||||
"datasets": [{
|
||||
"label": "Issues",
|
||||
"data": [300, 50, 100],
|
||||
"backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
|
||||
}]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Template Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Template</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/Template Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full p-3">
|
||||
<!--Table Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Table</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<table class="w-full p-5 text-gray-700">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left text-gray-600">Name</th>
|
||||
<th class="text-left text-gray-600">Side</th>
|
||||
<th class="text-left text-gray-600">Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Obi Wan Kenobi</td>
|
||||
<td>Light</td>
|
||||
<td>Jedi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Greedo</td>
|
||||
<td>South</td>
|
||||
<td>Scumbag</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Darth Vader</td>
|
||||
<td>Dark</td>
|
||||
<td>Sith</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="py-2"><a href="#" class="text-white">See More issues...</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/table Card-->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--/ Console Content-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!--/container-->
|
||||
|
||||
<footer class="bg-gray-900 border-t border-gray-400 shadow">
|
||||
<div class="container max-w-md mx-auto flex py-8">
|
||||
|
||||
<div class="w-full mx-auto flex flex-wrap">
|
||||
<div class="flex w-full md:w-1/2 ">
|
||||
<div class="px-8">
|
||||
<h3 class="font-bold font-bold text-gray-100">About</h3>
|
||||
<p class="py-4 text-gray-600 text-sm">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel mi ut felis tempus commodo nec id erat. Suspendisse consectetur dapibus velit ut lacinia.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full md:w-1/2">
|
||||
<div class="px-8">
|
||||
<h3 class="font-bold font-bold text-gray-100">Social</h3>
|
||||
<ul class="list-reset items-center text-sm pt-3">
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
/*Toggle dropdown list*/
|
||||
/*https://gist.github.com/slavapas/593e8e50cf4cc16ac972afcbad4f70c8*/
|
||||
|
||||
var userMenuDiv = document.getElementById("userMenu");
|
||||
var userMenu = document.getElementById("userButton");
|
||||
|
||||
var navMenuDiv = document.getElementById("nav-content");
|
||||
var navMenu = document.getElementById("nav-toggle");
|
||||
|
||||
document.onclick = check;
|
||||
|
||||
function check(e){
|
||||
var target = (e && e.target) || (event && event.srcElement);
|
||||
|
||||
//User Menu
|
||||
if (!checkParent(target, userMenuDiv)) {
|
||||
// click NOT on the menu
|
||||
if (checkParent(target, userMenu)) {
|
||||
// click on the link
|
||||
if (userMenuDiv.classList.contains("invisible")) {
|
||||
userMenuDiv.classList.remove("invisible");
|
||||
} else {userMenuDiv.classList.add("invisible");}
|
||||
} else {
|
||||
// click both outside link and outside menu, hide menu
|
||||
userMenuDiv.classList.add("invisible");
|
||||
}
|
||||
}
|
||||
|
||||
//Nav Menu
|
||||
if (!checkParent(target, navMenuDiv)) {
|
||||
// click NOT on the menu
|
||||
if (checkParent(target, navMenu)) {
|
||||
// click on the link
|
||||
if (navMenuDiv.classList.contains("hidden")) {
|
||||
navMenuDiv.classList.remove("hidden");
|
||||
} else {navMenuDiv.classList.add("hidden");}
|
||||
} else {
|
||||
// click both outside link and outside menu, hide menu
|
||||
navMenuDiv.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function checkParent(t, elm) {
|
||||
while(t.parentNode) {
|
||||
if( t == elm ) {return true;}
|
||||
t = t.parentNode;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,33 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
|
||||
|
||||
<th:block th:replace="/thymeleaf/fragments/admin/header :: header-frmt('dddd')"></th:block>
|
||||
<th:block th:include="/thymeleaf/fragments/include-link"></th:block>
|
||||
|
||||
<body class="bg-gray-800 font-sans leading-normal tracking-normal mt-12">
|
||||
|
||||
<th:block th:replace="/thymeleaf/fragments/admin/menu :: menu-frmt"></th:block>
|
||||
|
||||
<div class="flex flex-col md:flex-row">
|
||||
|
||||
<!-- 사이드바-->
|
||||
<div class="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:relative md:h-screen z-10 w-full md:w-48">
|
||||
<th:block th:replace="/thymeleaf/fragments/admin/sidebar :: sidebar-frmt"></th:block>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content" class="main-content flex-1 bg-gray-100 mt-12 md:mt-2 pb-24 md:pb-5">
|
||||
<th:block layout:fragment="template"></th:block>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div>
|
||||
<th:block th:replace="/fragments/admin/footer :: footer-frmt"></th:block>
|
||||
</div>-->
|
||||
|
||||
<!-- Common script -->
|
||||
<th:block th:include="/thymeleaf/fragments/include-script"></th:block>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,39 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
|
||||
|
||||
<th:block th:replace="/thymeleaf/fragments/dark/header :: header-frmt('dddd')"></th:block>
|
||||
<th:block th:include="/thymeleaf/fragments/include-link"></th:block>
|
||||
|
||||
|
||||
<body class="bg-black-alt font-sans leading-normal tracking-normal">
|
||||
|
||||
|
||||
<th:block th:replace="/thymeleaf/fragments/dark/menu :: menu-frmt"></th:block>
|
||||
<!-- Page Header -->
|
||||
|
||||
|
||||
|
||||
<!-- 사이드바-->
|
||||
<!--
|
||||
<div>
|
||||
<th:block th:replace="/fragments/dark/sidebar :: sidebar-frmt"></th:block>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div id="content" class="container w-full mx-auto pt-20">
|
||||
<div class="w-full px-4 md:px-0 md:mt-8 mb-16 text-white-800 leading-normal">
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<!-- Main Content -->
|
||||
<th:block layout:fragment="template"></th:block>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:replace="/thymeleaf/fragments/dark/footer :: footer-frmt"></th:block>
|
||||
</div>
|
||||
|
||||
<!-- Common script -->
|
||||
<th:block th:include="/thymeleaf/fragments/include-script"></th:block>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,84 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{thymeleaf/layouts/layout-dark}">
|
||||
|
||||
<th:block layout:fragment="template">
|
||||
<!-- <div class="w-full md:text-center text-gray-400">-->
|
||||
<div class="flex flex-wrap w-full bg-gray-800 pt-3 text-gray-400">
|
||||
|
||||
<!--<input type="text" value="엑셀 파일명.xlsx"/>엑셀파일명<br/>-->
|
||||
<button type="button" onclick="download()" class="button">엑셀다운로드 테스트</button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function download() {
|
||||
let params = {
|
||||
fileName: document.querySelector('input').value
|
||||
// titleList: ["아이디", "이름", "생년월일", "핸드폰번호", "전화", "이메일"],
|
||||
// fieldList: ["ID", "MBR_NM", "BRTHDY", "HP_NO", "TEL_NO", "EMAIL"]
|
||||
};
|
||||
let fileName = '';
|
||||
|
||||
fetch('http://localhost:8080/web/sample/exceldown',
|
||||
{
|
||||
headers: {
|
||||
Authorization: "jwt token"
|
||||
},
|
||||
method: 'POST',
|
||||
body: JSON.stringify(params)
|
||||
})
|
||||
.then(res => downloadFile(res))
|
||||
}
|
||||
|
||||
async function downloadFile(fetchResult) {
|
||||
let filename = fetchResult.headers.get('content-disposition').split('filename=')[1];
|
||||
//let filename = decodeURI(fetchResult.headers.get('content-disposition').split('filename=')[1]);
|
||||
let data = await fetchResult.blob();
|
||||
// It is necessary to create a new blob object with mime-type explicitly set
|
||||
// otherwise only Chrome works like it should
|
||||
const blob = new Blob([data], { type: data.type || 'application/octet-stream' });
|
||||
if (typeof window.navigator.msSaveBlob !== 'undefined') {
|
||||
// IE doesn't allow using a blob object directly as link href.
|
||||
// Workaround for "HTML7007: One or more blob URLs were
|
||||
// revoked by closing the blob for which they were created.
|
||||
// These URLs will no longer resolve as the data backing
|
||||
// the URL has been freed."
|
||||
window.navigator.msSaveBlob(blob, filename);
|
||||
return;
|
||||
}
|
||||
// Other browsers
|
||||
// Create a link pointing to the ObjectURL containing the blob
|
||||
const blobURL = window.URL.createObjectURL(blob);
|
||||
const tempLink = document.createElement('a');
|
||||
tempLink.style.display = 'none';
|
||||
tempLink.href = blobURL;
|
||||
tempLink.setAttribute('download', filename);
|
||||
// Safari thinks _blank anchor are pop ups. We only want to set _blank
|
||||
// target if the browser does not support the HTML5 download attribute.
|
||||
// This allows you to download files in desktop safari if pop up blocking
|
||||
// is enabled.
|
||||
if (typeof tempLink.download === 'undefined') {
|
||||
tempLink.setAttribute('target', '_blank');
|
||||
}
|
||||
document.body.appendChild(tempLink);
|
||||
tempLink.click();
|
||||
document.body.removeChild(tempLink);
|
||||
setTimeout(() => {
|
||||
// For Firefox it is necessary to delay revoking the ObjectURL
|
||||
window.URL.revokeObjectURL(blobURL);
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{thymeleaf/layouts/layout-dark}">
|
||||
|
||||
<th:block layout:fragment="template">
|
||||
<!-- <div class="w-full md:text-center text-gray-400">-->
|
||||
<div class="flex flex-wrap w-full bg-gray-800 pt-3 text-gray-400">
|
||||
<p th:text="${name} + '!'" />
|
||||
</div>
|
||||
|
||||
<!-- <script>-->
|
||||
|
||||
<!-- fetch("http://localhost:8301/sample/callback?codeGrpId=GrpID", {-->
|
||||
<!-- // method: "GET",-->
|
||||
<!-- // headers: {-->
|
||||
<!-- // "Content-Type": "application/json",-->
|
||||
<!-- // },-->
|
||||
<!-- // body: JSON.stringify({-->
|
||||
<!-- // title: "Test",-->
|
||||
<!-- // body: "I am testing!",-->
|
||||
<!-- // userId: 1,-->
|
||||
<!-- // }),-->
|
||||
<!-- }).then((response) => console.log(response));-->
|
||||
<!-- </script>-->
|
||||
</th:block>
|
||||
|
||||
</html>
|
||||
@ -1,266 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{thymeleaf/layouts/layout-admin}">
|
||||
|
||||
|
||||
|
||||
<th:block layout:fragment="template">
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<div class="bg-gray-800 pt-3">
|
||||
<div class="bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
|
||||
<h3 class="font-bold pl-2">Analytics</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gradient-to-b from-green-200 to-green-100 border-b-4 border-green-600 rounded-lg shadow-xl p-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded-full p-5 bg-green-600"><i class="fa fa-wallet fa-2x fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-600">Total Revenue</h5>
|
||||
<h3 class="font-bold text-3xl">$3249 <span class="text-green-500"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gradient-to-b from-pink-200 to-pink-100 border-b-4 border-pink-500 rounded-lg shadow-xl p-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded-full p-5 bg-pink-600"><i class="fas fa-users fa-2x fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-600">Total Users</h5>
|
||||
<h3 class="font-bold text-3xl">249 <span class="text-pink-500"><i class="fas fa-exchange-alt"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gradient-to-b from-yellow-200 to-yellow-100 border-b-4 border-yellow-600 rounded-lg shadow-xl p-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded-full p-5 bg-yellow-600"><i class="fas fa-user-plus fa-2x fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-600">New Users</h5>
|
||||
<h3 class="font-bold text-3xl">2 <span class="text-yellow-600"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-row flex-wrap flex-grow mt-2">
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-7"), {
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April"],
|
||||
"datasets": [{
|
||||
"label": "Page Impressions",
|
||||
"data": [10, 20, 30, 40],
|
||||
"borderColor": "rgb(255, 99, 132)",
|
||||
"backgroundColor": "rgba(255, 99, 132, 0.2)"
|
||||
}, {
|
||||
"label": "Adsense Clicks",
|
||||
"data": [5, 15, 10, 30],
|
||||
"type": "line",
|
||||
"fill": false,
|
||||
"borderColor": "rgb(54, 162, 235)"
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"yAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-0" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-0"), {
|
||||
"type": "line",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April", "May", "June", "July"],
|
||||
"datasets": [{
|
||||
"label": "Views",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"borderColor": "rgb(75, 192, 192)",
|
||||
"lineTension": 0.1
|
||||
}]
|
||||
},
|
||||
"options": {}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-1" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-1"), {
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April", "May", "June", "July"],
|
||||
"datasets": [{
|
||||
"label": "Likes",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
|
||||
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
|
||||
"borderWidth": 1
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"yAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5"><canvas id="chartjs-4" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-4"), {
|
||||
"type": "doughnut",
|
||||
"data": {
|
||||
"labels": ["P1", "P2", "P3"],
|
||||
"datasets": [{
|
||||
"label": "Issues",
|
||||
"data": [300, 50, 100],
|
||||
"backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
|
||||
}]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Table Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<table class="w-full p-5 text-gray-700">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left text-blue-900">Name</th>
|
||||
<th class="text-left text-blue-900">Side</th>
|
||||
<th class="text-left text-blue-900">Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Obi Wan Kenobi</td>
|
||||
<td>Light</td>
|
||||
<td>Jedi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Greedo</td>
|
||||
<td>South</td>
|
||||
<td>Scumbag</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Darth Vader</td>
|
||||
<td>Dark</td>
|
||||
<td>Sith</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="py-2"><a href="#">See More issues...</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/table Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
|
||||
<!--Advert Card-->
|
||||
<div class="bg-white border-transparent rounded-lg shadow-xl">
|
||||
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
|
||||
<h5 class="font-bold uppercase text-gray-600">Advert</h5>
|
||||
</div>
|
||||
<div class="p-5 text-center">
|
||||
|
||||
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7D52JJ&placement=wwwtailwindtoolboxcom" id="_carbonads_js"></script>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/Advert Card-->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</th:block>
|
||||
@ -1,253 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{thymeleaf/layouts/layout-dark}">
|
||||
|
||||
|
||||
|
||||
<th:block layout:fragment="template">
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-green-600"><i class="fa fa-wallet fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">Total Revenue</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">$3249 <span class="text-green-500"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-pink-600"><i class="fas fa-users fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">Total Users</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">249 <span class="text-pink-500"><i class="fas fa-exchange-alt"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Metric Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink pr-4">
|
||||
<div class="rounded p-3 bg-yellow-600"><i class="fas fa-user-plus fa-2x fa-fw fa-inverse"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 text-right md:text-center">
|
||||
<h5 class="font-bold uppercase text-gray-400">New Users</h5>
|
||||
<h3 class="font-bold text-3xl text-gray-600">2 <span class="text-yellow-600"><i class="fas fa-caret-up"></i></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Metric Card-->
|
||||
</div>
|
||||
|
||||
<!--Divider-->
|
||||
<hr class="border-b-2 border-gray-600 my-8 mx-4">
|
||||
|
||||
<div class="flex flex-row flex-wrap flex-grow mt-2">
|
||||
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-7"), {
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April"],
|
||||
"datasets": [{
|
||||
"label": "Page Impressions",
|
||||
"data": [10, 20, 30, 40],
|
||||
"borderColor": "rgb(255, 99, 132)",
|
||||
"backgroundColor": "rgba(255, 99, 132, 0.2)"
|
||||
}, {
|
||||
"label": "Adsense Clicks",
|
||||
"data": [5, 15, 10, 30],
|
||||
"type": "line",
|
||||
"fill": false,
|
||||
"borderColor": "rgb(54, 162, 235)"
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"yAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-0" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-0"), {
|
||||
"type": "line",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April", "May", "June", "July"],
|
||||
"datasets": [{
|
||||
"label": "Views",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"borderColor": "rgb(75, 192, 192)",
|
||||
"lineTension": 0.1
|
||||
}]
|
||||
},
|
||||
"options": {}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<canvas id="chartjs-1" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-1"), {
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": ["January", "February", "March", "April", "May", "June", "July"],
|
||||
"datasets": [{
|
||||
"label": "Likes",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
|
||||
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
|
||||
"borderWidth": 1
|
||||
}]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"yAxes": [{
|
||||
"ticks": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Graph Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
|
||||
</div>
|
||||
<div class="p-5"><canvas id="chartjs-4" class="chartjs" width="undefined" height="undefined"></canvas>
|
||||
<script>
|
||||
new Chart(document.getElementById("chartjs-4"), {
|
||||
"type": "doughnut",
|
||||
"data": {
|
||||
"labels": ["P1", "P2", "P3"],
|
||||
"datasets": [{
|
||||
"label": "Issues",
|
||||
"data": [300, 50, 100],
|
||||
"backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
|
||||
}]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Graph Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
|
||||
<!--Template Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Template</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/Template Card-->
|
||||
</div>
|
||||
|
||||
<div class="w-full p-3">
|
||||
<!--Table Card-->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded shadow">
|
||||
<div class="border-b border-gray-800 p-3">
|
||||
<h5 class="font-bold uppercase text-gray-600">Table</h5>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<table class="w-full p-5 text-gray-700">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left text-gray-600">Name</th>
|
||||
<th class="text-left text-gray-600">Side</th>
|
||||
<th class="text-left text-gray-600">Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Obi Wan Kenobi</td>
|
||||
<td>Light</td>
|
||||
<td>Jedi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Greedo</td>
|
||||
<td>South</td>
|
||||
<td>Scumbag</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Darth Vader</td>
|
||||
<td>Dark</td>
|
||||
<td>Sith</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="py-2"><a href="#" class="text-white">See More issues...</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/table Card-->
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
@ -1,47 +0,0 @@
|
||||
<%--
|
||||
Created by IntelliJ IDEA.
|
||||
User: Administrator
|
||||
Date: 2021-08-09
|
||||
Time: 20:49
|
||||
To change this template use File | Settings | File Templates.
|
||||
--%>
|
||||
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
||||
<html>
|
||||
<head>
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
JSP Test 에서 엑셀다운로드 테스트
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
var params = {
|
||||
};
|
||||
fetch('http://localhost:8080/web/sample/exceldown',
|
||||
{
|
||||
method: 'POST',
|
||||
body: JSON.stringify(params)
|
||||
})
|
||||
// .then(function (response) {
|
||||
// if (response.ok) return response.text();
|
||||
// })
|
||||
// .then(function (text) {
|
||||
// if (text) div.innerText = text;
|
||||
// else alert('error');
|
||||
// });
|
||||
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
var url = window.URL.createObjectURL(blob);
|
||||
var a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = "filename.xlsx";
|
||||
document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
|
||||
a.click();
|
||||
a.remove(); //afterwards we remove the element again
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,25 @@
|
||||
package com.xit;
|
||||
|
||||
import org.junit.jupiter.api.*;
|
||||
import org.junit.jupiter.api.extension.ExtendWith;
|
||||
import org.junit.runner.RunWith;
|
||||
import org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;
|
||||
import org.springframework.boot.test.context.SpringBootTest;
|
||||
import org.springframework.test.context.ActiveProfiles;
|
||||
import org.springframework.test.context.ContextConfiguration;
|
||||
import org.springframework.test.context.junit.jupiter.SpringExtension;
|
||||
import org.springframework.test.context.junit4.SpringRunner;
|
||||
|
||||
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.DEFINED_PORT)
|
||||
//@DataJpaTest
|
||||
@ContextConfiguration(classes = Application.class)
|
||||
@ExtendWith(SpringExtension.class)
|
||||
@ActiveProfiles({"dev"})
|
||||
public class ApplicationTest {
|
||||
|
||||
@Test
|
||||
void load(){
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue