-
Admin 템플릿 : AdminLTE
다운로드 : https://adminlte.io/
* resources 폴더에 복사
* home.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page session="false" %> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Admin Dashboard</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> <link rel="stylesheet" href="/resources/AdminLTE-3.2.0/plugins/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="/resources/AdminLTE-3.2.0/dist/css/adminlte.min.css?v=3.2.0"> <body class="hold-transition sidebar-mini"> <div class="wrapper"> <nav class="main-header navbar navbar-expand navbar-white navbar-light"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a></li> <li class="nav-item d-none d-sm-inline-block"><a href="index3.html" class="nav-link">Home</a></li> <li class="nav-item d-none d-sm-inline-block"><a href="#" class="nav-link">Contact</a></li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" data-widget="navbar-search" href="#" role="button"><i class="fas fa-search"></i></a> <div class="navbar-search-block"> <form class="form-inline"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"><i class="fas fa-search"></i></button> <button class="btn btn-navbar" type="button" data-widget="navbar-search"><i class="fas fa-times"></i></button> </div> </div> </form> </div> </li> <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#"><i class="far fa-comments"></i><span class="badge badge-danger navbar-badge">3</span></a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> <a href="#" class="dropdown-item"> <div class="media"> <img src="/resources/AdminLTE-3.2.0/dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle"> <div class="media-body"> <h3 class="dropdown-item-title">Brad Diesel<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span></h3> <p class="text-sm">Call me whenever you can...</p> <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p> </div> </div> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <div class="media"> <img src="/resources/AdminLTE-3.2.0/dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"> <div class="media-body"> <h3 class="dropdown-item-title">John Pierce<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span></h3> <p class="text-sm">I got your message bro</p> <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p> </div> </div> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <div class="media"> <img src="/resources/AdminLTE-3.2.0/dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"> <div class="media-body"> <h3 class="dropdown-item-title"> Nora Silvester <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span> </h3> <p class="text-sm">The subject goes here</p> <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p> </div> </div> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">See All Messages</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#"><i class="far fa-bell"></i><span class="badge badge-warning navbar-badge">15</span></a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> <span class="dropdown-header">15 Notifications</span> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"><i class="fas fa-envelope mr-2"></i> 4 new messages<span class="float-right text-muted text-sm">3 mins</span></a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"><i class="fas fa-users mr-2"></i> 8 friend requests<span class="float-right text-muted text-sm">12 hours</span></a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"><i class="fas fa-file mr-2"></i> 3 new reports<span class="float-right text-muted text-sm">2 days</span></a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a> </div> </li> <li class="nav-item"> <a class="nav-link" data-widget="fullscreen" href="#" role="button"><i class="fas fa-expand-arrows-alt"></i></a> </li> <li class="nav-item"> <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i class="fas fa-th-large"></i></a> </li> </ul> </nav> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <a href="#" class="brand-link"><img src="/resources/AdminLTE-3.2.0/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"><span class="brand-text font-weight-light">관리자 Admin</span></a> <div class="sidebar"> <nav class="mt-2"> </nav> </div> </aside> <div class="content-wrapper"> <div class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"><h1 class="m-0">대쉬보드 Dashboard</h1></div> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Dashboard</li> </ol> </div> </div> </div> </div> <div class="content"> <div class="container-fluid"> <div class="row"> <a href="/user/userLogInForm">로그인</a> <a href="/user/userLogOut">로그아웃</a> </div> </div> </div> </div> <aside class="control-sidebar control-sidebar-dark"> <div class="p-3"> <h5>Title</h5> <p>Sidebar content</p> </div> </aside> <footer class="main-footer"> <strong><a href="https://adminlte.io">WSOL</a></strong> <div class="float-right d-none d-sm-inline">${serverTime}</div> </footer> </div> <script src="/resources/AdminLTE-3.2.0/plugins/jquery/jquery.min.js"></script> <script src="/resources/AdminLTE-3.2.0/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="/resources/AdminLTE-3.2.0/dist/js/adminlte.min.js?v=3.2.0"></script> </body> </html>