Skip to content

Instantly share code, notes, and snippets.

@johnllao
Last active October 7, 2015 15:11
Show Gist options
  • Save johnllao/539d9a41804651a68ac8 to your computer and use it in GitHub Desktop.
Save johnllao/539d9a41804651a68ac8 to your computer and use it in GitHub Desktop.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello Tomcat</title>
<link type="text/css" href="/styles/bootstrap.css" rel="stylesheet">
<link type="text/css" href="/styles/sidebar.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Hello Tomcat
</a>
</li>
<li>
<a href="#">One</a>
</li>
<li>
<a href="#">Two</a>
</li>
<li>
<a href="#">Three</a>
</li>
<li>
<a href="#">Four</a>
</li>
<li>
<a href="#">Five</a>
</li>
<li>
<a href="#">Six</a>
</li>
<li>
<a href="#">Seven</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">. . .</a>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Uno</a>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Dos</a>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate orci id augue scelerisque, sit amet mollis ex pharetra. Quisque eget orci sed purus dictum lacinia. Pellentesque sit amet mi felis. Ut id sapien vulputate, hendrerit est elementum, luctus diam. Morbi sed interdum lectus. Fusce pretium sit amet purus condimentum lacinia. Aliquam erat volutpat.</p>
<p>Maecenas tincidunt ipsum ex, non bibendum lorem volutpat tempus. Vestibulum lectus purus, elementum id augue sit amet, scelerisque hendrerit arcu. In posuere quam ligula, eget mattis sem pulvinar sed. Vivamus hendrerit eros vel hendrerit elementum. Duis ornare lacus id felis molestie lobortis. Vivamus urna quam, vulputate eu arcu quis, interdum tincidunt libero. Donec pretium ornare auctor. Nulla tincidunt, erat sit amet aliquam commodo, enim erat aliquam magna, in blandit magna leo at augue. Mauris consectetur nisl at egestas tincidunt.
<code>#page-content-wrapper</code>.
</p>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- jQuery -->
<script type="text/javascript" src="/scripts/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src="/scripts/bootstrap.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
package org.hello.tomcat.servlets;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/")
public class MainServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public MainServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setAttribute("title", "Hello Tomcat");
RequestDispatcher dispatcher = request.getRequestDispatcher("/main.jsp");
dispatcher.forward(request, response);
}
}
/*!
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #036;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #69c;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #69c;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/scripts/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/styles/*</url-pattern>
</servlet-mapping>
</web-app>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment