Converted from Semantic-UI to Bootstrap

This commit is contained in:
Charles Truluck 2015-12-26 00:01:19 -05:00
parent 619b8e2440
commit c744f44a37
4 changed files with 91 additions and 76 deletions

View file

@ -2,29 +2,47 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>EasyCTF 2016</title> <title>EasyCTF 2016</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" integrity="sha384-MkMf11Odtq01GxtmoywADPd87cCCjYkAUcFiuOytgpBP16Ei82+ulJraHrxcTl/m" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/style.css">
<base href="/"> <base href="/">
<style>
h1 {
color: #69D2E7;
}
input {
margin-bottom: 1em !important;
}
</style>
</head> </head>
<body ng-controller="mainController"> <body ng-controller="mainController">
<div class="ui inverted menu"> <nav class="navbar navbar-default">
<div class="ui container"> <div class="container-fluid">
<a href="/" class="header item"> <div class="navbar-header">
<img class="logo" src="http://placehold.it/40x40"> EasyCTF <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
</a> <span class="sr-only">Toggle navigation</span>
<a class="item" href="/">Home</a> <span class="icon-bar"></span>
<a class="item" href="/about">About</a> <span class="icon-bar"></span>
<div class="right menu"> <span class="icon-bar"></span>
<a class="item" href="/register">Register</a> </button>
<a class="item" href="/login">Login</a> <a class="navbar-brand" href="/">EasyCTF</a>
</div> </div>
</div>
</div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-fixed">
<li><a href="/about">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</a></li>
</ul>
</div>
</div>
</nav>
<div id="mainContent" class="ui container"> <div id="mainContent" class="ui container">
<div ng-view></div> <div ng-view></div>
</div> </div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" integrity="sha384-R4/ztc4ZlRqWjqIuvf6RX5yb/v90qNGx6fS48N0tRxiGkqveZETq72KgDVJCp2TC" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js" integrity="sha384-R4/ztc4ZlRqWjqIuvf6RX5yb/v90qNGx6fS48N0tRxiGkqveZETq72KgDVJCp2TC" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js" integrity="sha384-raqmvMx1osRCvgOKS+pn3feCjT4fwsgIgSfQLadfxqEKU49Gk8yWzQnGsBCYYjLz" crossorigin="anonymous"></script> --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" integrity="sha384-r1y8TJcloKTvouxnYsi4PJAx+nHNr90ibsEn3zznzDzWBN9X3o3kbHLSgcIPtzAp" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" integrity="sha384-r1y8TJcloKTvouxnYsi4PJAx+nHNr90ibsEn3zznzDzWBN9X3o3kbHLSgcIPtzAp" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-route.min.js" integrity="sha384-9MZDoFf10trgrfsQOs9GJhf/mP/sh5weVp3FDSi8h/4TEaV6dloEDkpxGTaOmAs6" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-route.min.js" integrity="sha384-9MZDoFf10trgrfsQOs9GJhf/mP/sh5weVp3FDSi8h/4TEaV6dloEDkpxGTaOmAs6" crossorigin="anonymous"></script>
<script src="js/easyctf.js"></script> <script src="js/easyctf.js"></script>

View file

@ -1 +1,2 @@
<h1>About</h1> <h1>About</h1>
<h2>(insert stuff here)</h2>

View file

@ -1,33 +1,15 @@
<div class="ui middle aligned center aligned grid"> <center>
<div class="column"> <h1>Log-in</h1>
<h2 class="ui teal image header"> <div class="input-group">
<img src="assets/images/logo.png" class="image"> <form id="login-form">
<div class="content">Log-in to your account</div> <input type="text" class="form-control" placeholder="Email" id="email">
</h2> <input type="password" id="password" name="password" placeholder="Password" class="form-control">
<form id="login-form" class="ui large form"> <input type="submit" class="btn btn-lg btn-success" value="Login">
<div class="ui stacked segment"> </form>
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" id="email" name="email" placeholder="E-mail address">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" id="password" name="password" placeholder="Password">
</div>
</div>
<input type="submit" class="ui fluid large teal submit button" value="Login">
</div>
<div class="ui error message"></div>
</form>
<div id="status"></div>
<div class="ui message">
<a href="#register" class="item">Register</a>
<a href="#forgot_password" class="item">Forgot Password?</a>
</div>
</div>
</div> </div>
<div id="status"></div>
<a href="#register" class="item">Register</a>
|
<a href="#forgot_password" class="item">Forgot Password</a>
</center>
<script src="js/login.js"></script> <script src="js/login.js"></script>

View file

@ -1,39 +1,53 @@
<center>
<h1 class="ui dividing header">Register</h1> <h1 class="ui dividing header">Register</h1>
<script src="https://www.google.com/recaptcha/api.js" async defer></script> <script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script src="js/register.js"></script> <script src="js/register.js"></script>
<form id="registration-form" class="ui form"> <div class="input-group">
<div class="field"> <form id="registration-form">
<div class="two fields"> <div class="row">
<div class="field">
<div class="col-md-6">
<label>Name</label> <label>Name</label>
<input type="text" name="name" id="name" autocomplete="off" autofocus placeholder="Name"> <br>
<input type="text" name="name" id="name" autocomplete="off" autofocus placeholder="Name" class="form-control">
</div> </div>
<div class="field">
<div class="col-md-6">
<label>Email</label> <label>Email</label>
<input type="email" name="email" id="email" autocomplete="off" placeholder="Email"> <br>
<input type="email" name="email" id="email" autocomplete="off" placeholder="Email" class="form-control">
</div> </div>
</div>
<div class="two fields"> <div class="col-md-6">
<div class="field">
<label>Username</label> <label>Username</label>
<input type="text" name="username" id="username" autocomplete="off" placeholder="Username"> <br>
<input type="text" name="username" id="username" autocomplete="off" placeholder="Username" class="form-control">
</div> </div>
<div class="field">
<div class="col-md-6">
<label>Password</label> <label>Password</label>
<input type="password" name="password" id="password" autocomplete="off" placeholder="Password"> <br>
<input type="password" name="password" id="password" autocomplete="off" placeholder="Password" class="form-control">
</div> </div>
</div>
<div class="two fields"> <div class="col-md-12">
<div class="field"> <label>Password</label>
<label>Password</label> <br>
<input type="password" name="password_confirm" id="password_confirm" autocomplete="off" placeholder="Confirm Password"> <input type="password" name="password_confirm" id="password_confirm" autocomplete="off" placeholder="Confirm Password" class="form-control">
</div> </div>
<div class="field">
<label>Captcha</label> <br>
<div class="g-recaptcha" data-sitekey="6Lc4xhMTAAAAAIaiF3yEWGbHRaGgMg4FHor61p1G"></div>
</div> <div class="col-md-12">
</div> <label>Captcha</label>
</div> <br>
<div id="status"></div> <div class="g-recaptcha" data-sitekey="6Lc4xhMTAAAAAIaiF3yEWGbHRaGgMg4FHor61p1G"></div>
<input type="submit" class="ui fluid large teal submit button" value="Register"> </div>
</form>
<div id="status"></div>
<input type="submit" class="btn btn-lg btn-success" value="Register" style="margin-top:1em;">
</div>
</form>
</div>
</center>