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,31 +2,49 @@
<head>
<meta charset="utf-8">
<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">
<base href="/">
<style>
h1 {
color: #69D2E7;
}
input {
margin-bottom: 1em !important;
}
</style>
</head>
<body ng-controller="mainController">
<div class="ui inverted menu">
<div class="ui container">
<a href="/" class="header item">
<img class="logo" src="http://placehold.it/40x40"> EasyCTF
</a>
<a class="item" href="/">Home</a>
<a class="item" href="/about">About</a>
<div class="right menu">
<a class="item" href="/register">Register</a>
<a class="item" href="/login">Login</a>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="/">EasyCTF</a>
</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 ng-view></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://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.5.0-rc.0/angular-route.min.js" integrity="sha384-9MZDoFf10trgrfsQOs9GJhf/mP/sh5weVp3FDSi8h/4TEaV6dloEDkpxGTaOmAs6" crossorigin="anonymous"></script>
<script src="js/easyctf.js"></script>
</body>
</html>
</html>

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">
<div class="column">
<h2 class="ui teal image header">
<img src="assets/images/logo.png" class="image">
<div class="content">Log-in to your account</div>
</h2>
<form id="login-form" class="ui large form">
<div class="ui stacked segment">
<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>
<center>
<h1>Log-in</h1>
<div class="input-group">
<form id="login-form">
<input type="text" class="form-control" placeholder="Email" id="email">
<input type="password" id="password" name="password" placeholder="Password" class="form-control">
<input type="submit" class="btn btn-lg btn-success" value="Login">
</form>
</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>

View file

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