-
Notifications
You must be signed in to change notification settings - Fork 113
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
bootstrap with bootswatch paper theme
- Loading branch information
Showing
6 changed files
with
218 additions
and
259 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,173 +1,19 @@ | ||
| body { | ||
| background: #CAECFF; | ||
| font-family: 'Trebuchet MS', sans-serif; | ||
| font-size: 14px; | ||
| padding-top: 20px; | ||
| padding-bottom: 20px; | ||
| } | ||
|
|
||
| a { | ||
| color: #2677FF; | ||
| } | ||
|
|
||
| a:hover { | ||
| color: #333; | ||
| } | ||
|
|
||
| input[type="text"], | ||
| input[type="password"] { | ||
| background: white; | ||
| border: 1px solid #BFE6FF; | ||
| padding: 2px; | ||
| font-family: 'Trebuchet MS', sans-serif; | ||
| font-size: 14px; | ||
| -moz-border-radius: 2px; | ||
| -webkit-border-radius: 2px; | ||
| color: #1057FF; | ||
| } | ||
|
|
||
| input[type="submit"] { | ||
| background: #1057FF; | ||
| border: 1px solid #073BFF; | ||
| padding: 1px 3px; | ||
| font-family: 'Trebuchet MS', sans-serif; | ||
| font-size: 14px; | ||
| font-weight: bold; | ||
| -moz-border-radius: 2px; | ||
| -webkit-border-radius: 2px; | ||
| color: white; | ||
| } | ||
|
|
||
| div.page { | ||
| background: white; | ||
| border: 1px solid #6ECCFF; | ||
| width: 700px; | ||
| margin: 30px auto; | ||
| } | ||
|
|
||
| div.page h1 { | ||
| background: #6ECCFF; | ||
| margin: 0; | ||
| padding: 10px 14px; | ||
| color: white; | ||
| letter-spacing: 1px; | ||
| text-shadow: 0 0 3px #2477FF; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| div.page div.navigation { | ||
| background: #DEE9FF; | ||
| padding: 4px 10px; | ||
| border-top: 1px solid #ccc; | ||
| border-bottom: 1px solid #eee; | ||
| color: #888; | ||
| font-size: 12px; | ||
| letter-spacing: 0.5px; | ||
| } | ||
|
|
||
| div.page div.navigation a { | ||
| color: #444; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| div.page h2 { | ||
| margin: 0 0 15px 0; | ||
| color: #1057FF; | ||
| text-shadow: 0 1px 2px #ccc; | ||
| } | ||
|
|
||
| div.page div.body { | ||
| padding: 10px; | ||
| } | ||
|
|
||
| div.page div.footer { | ||
| background: #eee; | ||
| color: #888; | ||
| padding: 5px 10px; | ||
| font-size: 12px; | ||
| } | ||
| .footer { | ||
| padding-top: 19px; | ||
| padding-right: 15px; | ||
| padding-left: 15px; | ||
|
|
||
| div.page div.followstatus { | ||
| border: 1px solid #ccc; | ||
| background: #E3EBFF; | ||
| -moz-border-radius: 2px; | ||
| -webkit-border-radius: 2px; | ||
| padding: 3px; | ||
| font-size: 13px; | ||
| color: #777; | ||
| border-top: 1px solid #e5e5e5; | ||
| } | ||
|
|
||
| div.page ul.messages { | ||
| list-style: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| @media (min-width: 768px) { | ||
| .container { | ||
| max-width: 730px; | ||
| } | ||
| } | ||
|
|
||
| div.page ul.messages li { | ||
| margin: 10px 0; | ||
| padding: 5px; | ||
| background: #F0FAFF; | ||
| border: 1px solid #DBF3FF; | ||
| -moz-border-radius: 5px; | ||
| -webkit-border-radius: 5px; | ||
| min-height: 48px; | ||
| } | ||
|
|
||
| div.page ul.messages p { | ||
| margin: 0; | ||
| } | ||
|
|
||
| div.page ul.messages li img { | ||
| float: left; | ||
| padding: 0 10px 0 0; | ||
| } | ||
|
|
||
| div.page ul.messages li small { | ||
| font-size: 0.9em; | ||
| color: #888; | ||
| } | ||
|
|
||
| div.page div.twitbox { | ||
| margin: 10px 0; | ||
| padding: 5px; | ||
| background: #F0FAFF; | ||
| border: 1px solid #94E2FF; | ||
| -moz-border-radius: 5px; | ||
| -webkit-border-radius: 5px; | ||
| } | ||
|
|
||
| div.page div.twitbox h3 { | ||
| margin: 0; | ||
| font-size: 1em; | ||
| color: #2C7EFF; | ||
| } | ||
|
|
||
| div.page div.twitbox p { | ||
| margin: 0; | ||
| } | ||
|
|
||
| div.page div.twitbox input[type="text"] { | ||
| width: 585px; | ||
| } | ||
|
|
||
| div.page div.twitbox input[type="submit"] { | ||
| width: 70px; | ||
| margin-left: 5px; | ||
| } | ||
|
|
||
| div.error { | ||
| margin: 10px 0; | ||
| background: #FAE4E4; | ||
| border: 1px solid #DD6F6F; | ||
| -moz-border-radius: 2px; | ||
| -webkit-border-radius: 2px; | ||
| padding: 4px; | ||
| font-size: 13px; | ||
| } | ||
|
|
||
| div.success { | ||
| margin: 10px 0; | ||
| background: #FAFFE4; | ||
| border: 1px solid #DDFF6F; | ||
| -moz-border-radius: 2px; | ||
| -webkit-border-radius: 2px; | ||
| padding: 4px; | ||
| font-size: 13px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,40 @@ | ||
| <#import "masterTemplate.ftl" as layout /> | ||
|
|
||
| <@layout.masterTemplate title="Sign In"> | ||
| <h2>Sign In</h2> | ||
| <#if message??> | ||
| <div class="success"> | ||
| <div class="alert alert-success"> | ||
| ${message} | ||
| </div> | ||
| </#if> | ||
| <#if error??> | ||
| <div class="error"> | ||
| <div class="alert alert-danger"> | ||
| <strong>Error:</strong> ${error} | ||
| </div> | ||
| </#if> | ||
| <form action="/login" method="post"> | ||
| <dl> | ||
| <dt>Username: | ||
| <dd><input type="text" name="username" size="30" maxlength="50" value="${username!}"> | ||
| <dt>Password: | ||
| <dd><input type="password" name="password" size="30"> | ||
| </dl> | ||
| <div class="actions"><input type="submit" value="Sign In"></div> | ||
|
|
||
| <h3>Sign In</h3> | ||
|
|
||
| <form class="form-horizontal" action="/login" role="form" method="post"> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="username" class="col-sm-2 control-label">Username: </label> | ||
| <div class="col-sm-10"> | ||
| <input type="text" class="form-control" name="username" id="username" placeholder="Username" value="${username!}" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="password" class="col-sm-2 control-label">Password: </label> | ||
| <div class="col-sm-10"> | ||
| <input type="password" class="form-control" name="password" placeholder="Password"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <div class="col-sm-offset-2 col-sm-10"> | ||
| <button type="submit" class="btn btn-default">Sign In</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| </form> | ||
| </@layout.masterTemplate> |
83 changes: 51 additions & 32 deletions
83
src/main/resources/spark/template/freemarker/masterTemplate.ftl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,53 @@ | ||
| <#macro masterTemplate title="Welcome"> | ||
| <!DOCTYPE html | ||
| PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | ||
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
| <html xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta> | ||
| <title>${title} | MiniTwit</title> | ||
| <link rel="stylesheet" type="text/css" href="/css/style.css"> | ||
| </head> | ||
| <body> | ||
| <div class="page"> | ||
| <h1>MiniTwit</h1> | ||
| <div class="navigation"> | ||
| <#if user??> | ||
| <a href="/">my timeline</a> | | ||
| <a href="/public">public timeline</a> | | ||
| <a href="/logout">sign out [${user.username}]</a> | ||
| <#else> | ||
| <a href="/public">public timeline</a> | | ||
| <a href="/register">sign up</a> | | ||
| <a href="/login">sign in</a> | ||
| </#if> | ||
| </div> | ||
| <div class="body"> | ||
| <#nested /> | ||
| </div> | ||
| <div class="footer"> | ||
| MiniTwit — A Spark Application | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
||
| <title>${title} | MiniTwit</title> | ||
| <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"> | ||
| <link rel="stylesheet" type="text/css" href="/css/style.css"> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <nav class="navbar navbar-default" role="navigation"> | ||
| <div class="navbar-header"> | ||
| <button type="button" class="navbar-toggle" | ||
| data-toggle="collapse" data-target="#example-navbar-collapse"> | ||
| <span class="sr-only">Toggle navigation</span> | ||
| <span class="icon-bar"></span> | ||
| <span class="icon-bar"></span> | ||
| <span class="icon-bar"></span> | ||
| </button> | ||
|
|
||
| <a class="navbar-brand" href="/">MiniTwit</a> | ||
| </div> | ||
|
|
||
| <div class="collapse navbar-collapse" id="example-navbar-collapse"> | ||
| <ul class="nav navbar-nav navbar-right"> | ||
| <#if user??> | ||
| <li><a href="/">My Timeline</a></li> | ||
| <li><a href="/public">Public Timeline</a></li> | ||
| <li><a href="/logout">Sign Out [${user.username}]</a></li> | ||
| <#else> | ||
| <li><a href="/public">Public Timeline</a></li> | ||
| <li><a href="/register">Sign Up</a></li> | ||
| <li><a href="/login">Sign In</a></li> | ||
| </#if> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <div class="container"> | ||
| <#nested /> | ||
| </div> | ||
|
|
||
| <footer class="footer"> | ||
| <p>MiniTwit — A Spark Application</p> | ||
| </footer> | ||
| </div><!-- /container --> | ||
| </body> | ||
| </html> | ||
| </#macro> |
58 changes: 42 additions & 16 deletions
58
src/main/resources/spark/template/freemarker/register.ftl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,49 @@ | ||
| <#import "masterTemplate.ftl" as layout /> | ||
|
|
||
| <@layout.masterTemplate title="Sign In"> | ||
| <h2>Sign Up</h2> | ||
|
|
||
| <#if error??> | ||
| <div class="error"> | ||
| <strong>Error:</strong> ${error} | ||
| </div> | ||
| <div class="alert alert-danger"> | ||
| <strong>Error:</strong> ${error} | ||
| </div> | ||
| </#if> | ||
| <form action="/register" method="post"> | ||
| <dl> | ||
| <dt>Username: | ||
| <dd><input type="text" name="username" maxlength="50" size="30" value="${username!}"> | ||
| <dt>E-Mail: | ||
| <dd><input type="text" name="email" maxlength="50" size="30" value="${email!}"> | ||
| <dt>Password: | ||
| <dd><input type="password" name="password" maxlength="20" size="30"> | ||
| <dt>Password <small>(repeat)</small>: | ||
| <dd><input type="password" name="password2" maxlength="20" size="30"> | ||
| </dl> | ||
| <div class="actions"><input type="submit" value="Sign Up"></div> | ||
|
|
||
| <h3>Sign Up</h3> | ||
|
|
||
| <form class="form-horizontal" action="/register" role="form" method="post"> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="username" class="col-sm-2 control-label">Username: </label> | ||
| <div class="col-sm-10"> | ||
| <input type="text" class="form-control" name="username" placeholder="Username" value="${username!}" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="email" class="col-sm-2 control-label">E-Mail: </label> | ||
| <div class="col-sm-10"> | ||
| <input type="email" class="form-control" name="email" placeholder="E-Mail" value="${email!}" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="password" class="col-sm-2 control-label">Password: </label> | ||
| <div class="col-sm-10"> | ||
| <input type="password" class="form-control" name="password" placeholder="Password" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="password2" class="col-sm-2 control-label">Password <small>(repeat)</small>:</label> | ||
| <div class="col-sm-10"> | ||
| <input type="password" class="form-control" name="password2"/> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <div class="col-sm-offset-2 col-sm-10"> | ||
| <button type="submit" class="btn btn-default">Sign Up</button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </@layout.masterTemplate> |
Oops, something went wrong.