Skip to content

C
CTF
Commit 787f4546 authored by Antek Grzanka's avatar Antek Grzanka
Browse files
Options

Responsiva, responsiva. Finally refactored logo-like navbar.

parent 9fc81b4a
Show whitespace changes
Inline Side-by-side
Showing with 68 additions and 15 deletions
service/src/main/resources/assets/index.html
View file @ 787f4546
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Capture the flAGH 2016</title> <title>Capture the flAGH 2016</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwcHADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhoaABqamobkZGRv5mZmUYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACDg4MbiYmJwYWFhVySkpK+oqKiQpOTk0IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJOTk1eNjY3jl5eX/aOjo/CsrKxVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACqqqoZnJyc96qqqr64uLggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALW1tQCoqKhGp6en27GxsXK1tbUCAAAAAAAAAAAAAAAAAAAAAIGBgQCAgIBAgICAPoCAgAKAgIAFAAAAALKysgimpqaPq6ury7e3tysAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACqqqpotbW1rqioqJShoaHXnp6ef6ioqK2np6fNr6+vg7W1tQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtbW1i4GBgSKqqqo4rKysl6mpqV6cnJzYra2tnAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKysrImkpKTYkZGRLAAAAACAgIATo6Ojk6qqqmoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmpqaQpKSklwAAAACAgIAhsLCwaaWlpcyoqKg8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAr6+vrZycnOSTk5O5oqKi1oCAgAmnp6dsqampUwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMPDww3KyspQxsbGd5eXl3menp66vLy8nbW1tQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//8AAP/vAAD/hwAA/4EAAP/BAAD/wwAA/wcAAIIfAACAPwAAgP8AAIj/AACQ/wAAgP8AAID/AAD//wAA//8AAA==" rel="icon" type="image/x-icon"> <link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwcHADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhoaABqamobkZGRv5mZmUYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACDg4MbiYmJwYWFhVySkpK+oqKiQpOTk0IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJOTk1eNjY3jl5eX/aOjo/CsrKxVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACqqqoZnJyc96qqqr64uLggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALW1tQCoqKhGp6en27GxsXK1tbUCAAAAAAAAAAAAAAAAAAAAAIGBgQCAgIBAgICAPoCAgAKAgIAFAAAAALKysgimpqaPq6ury7e3tysAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACqqqpotbW1rqioqJShoaHXnp6ef6ioqK2np6fNr6+vg7W1tQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtbW1i4GBgSKqqqo4rKysl6mpqV6cnJzYra2tnAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKysrImkpKTYkZGRLAAAAACAgIATo6Ojk6qqqmoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmpqaQpKSklwAAAACAgIAhsLCwaaWlpcyoqKg8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAr6+vrZycnOSTk5O5oqKi1oCAgAmnp6dsqampUwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMPDww3KyspQxsbGd5eXl3menp66vLy8nbW1tQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//8AAP/vAAD/hwAA/4EAAP/BAAD/wwAA/wcAAIIfAACAPwAAgP8AAIj/AACQ/wAAgP8AAID/AAD//wAA//8AAA==" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="/webjars/materializecss/css/materialize.min.css"> <link rel="stylesheet" href="/webjars/materializecss/css/materialize.min.css">
<link rel="stylesheet" href="/webjars/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/webjars/font-awesome/css/font-awesome.min.css">
...@@ -14,7 +15,14 @@ ...@@ -14,7 +15,14 @@
<a href="#" class="brand-logo"> <a href="#" class="brand-logo">
<span class="title"></span> <span class="title"></span>
</a> </a>
<ul id="nav-mobile" class="right hide-on-med-and-down"> <a ng-hide="!logged" href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul ng-hide="!logged" class="right hide-on-med-and-down">
<li ng-if="logged"><a href="#/home">Początek</a></li>
<li ng-if="logged"><a href="#/tasks">Zadania</a></li>
<li ng-if="logged"><a href="#/scores">Wyniki</a></li>
<li ng-if="logged" ng-click="logout()"><a href="page#/">Wyloguj</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li ng-if="logged"><a href="#/home">Początek</a></li> <li ng-if="logged"><a href="#/home">Początek</a></li>
<li ng-if="logged"><a href="#/tasks">Zadania</a></li> <li ng-if="logged"><a href="#/tasks">Zadania</a></li>
<li ng-if="logged"><a href="#/scores">Wyniki</a></li> <li ng-if="logged"><a href="#/scores">Wyniki</a></li>
...@@ -26,7 +34,8 @@ ...@@ -26,7 +34,8 @@
<body> <body>
<div class="container"> <div class="container">
<div ui-view></div> <div ui-view>
</div>
</div> </div>
</body> </body>
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script> <script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
......
service/src/main/resources/assets/statics/css/main.css
View file @ 787f4546
...@@ -10,6 +10,15 @@ nav { ...@@ -10,6 +10,15 @@ nav {
box-shadow: none; box-shadow: none;
} }
@media only screen and (max-width: 992px) {
.title .username {
display: none;
}
.title {
font-size: 80%;
}
}
p { p {
color:white; color:white;
} }
......
service/src/main/resources/assets/statics/js/controllers/loginController.js
View file @ 787f4546
(function(){ (function(){
angular.module('ctfApp').controller('LoginController', angular.module('ctfApp').controller('LoginController',
['$scope', '$rootScope', '$location', 'AuthenticationService', '$window', ['$scope', '$rootScope', '$location', 'AuthenticationService', '$window', 'NavbarService',
function ($scope, $rootScope, $location, AuthenticationService, $window) { function ($scope, $rootScope, $location, AuthenticationService, $window, NavbarService) {
// reset login status // reset login status
AuthenticationService.clearCredentials(); AuthenticationService.clearCredentials();
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
$scope.dataLoading = true; $scope.dataLoading = true;
AuthenticationService.login($scope.username, $scope.password, function(response) { AuthenticationService.login($scope.username, $scope.password, function(response) {
if(response.status == 200) { if(response.status == 200) {
$('.title').html($scope.username+'@<b>capture-the-flAGH-2016</b>:~$'); NavbarService.setUsername($scope.username);
$location.path('/'); $location.path('/');
AuthenticationService.setCredentials($scope.username, $scope.password, response.team); AuthenticationService.setCredentials($scope.username, $scope.password, response.team);
// redirect to additional external auth point // redirect to additional external auth point
......
service/src/main/resources/assets/statics/js/controllers/navigationController.js
View file @ 787f4546
(function(){ (function(){
angular.module('ctfApp').controller('NavigationController', ['$scope', '$rootScope', '$location', 'AuthenticationService', angular.module('ctfApp').controller('NavigationController', ['$scope', '$rootScope', '$location', 'AuthenticationService', 'NavbarService',
function($scope, $rootScope, $location, AuthenticationService){ function($scope, $rootScope, $location, AuthenticationService, NavbarService){
$scope.logged = $rootScope.globals ? !!$rootScope.globals.currentUser : false; $scope.logged = $rootScope.globals ? !!$rootScope.globals.currentUser : false;
$scope.user = $rootScope.globals && $rootScope.globals.currentUser ? $rootScope.globals.currentUser.username : undefined; $scope.user = $rootScope.globals && $rootScope.globals.currentUser ? $rootScope.globals.currentUser.username : undefined;
$scope.logout = function(){ $scope.logout = function(){
$('.title').html('guest@<b>capture-the-flAGH-2016</b>:~$'); NavbarService.setGuest();
AuthenticationService.logout(function(data){ AuthenticationService.logout(function(data){
$location.path('/'); $location.path('');
}); });
}; };
......
service/src/main/resources/assets/statics/js/main.js
View file @ 787f4546
...@@ -63,8 +63,10 @@ ...@@ -63,8 +63,10 @@
}]); }]);
}]); }]);
app.run(['$rootScope', '$location', '$cookieStore', '$http', app.run(['$rootScope', '$location', '$cookieStore', '$http', 'NavbarService',
function ($rootScope, $location, $cookieStore, $http) { function ($rootScope, $location, $cookieStore, $http, NavbarService) {
$(".button-collapse").sideNav();
// keep user logged in after page refresh // keep user logged in after page refresh
$rootScope.globals = $cookieStore.get('globals') || {}; $rootScope.globals = $cookieStore.get('globals') || {};
...@@ -72,7 +74,7 @@ ...@@ -72,7 +74,7 @@
var username = $rootScope.globals.currentUser ? $rootScope.globals.currentUser.username : 'guest'; var username = $rootScope.globals.currentUser ? $rootScope.globals.currentUser.username : 'guest';
$(".title").typed({ $(".title").typed({
strings: [username+"@<b>capture-the-flag</b>:~$", username+"@<b>capture-the-flAGH-2016</b>:~$"], strings: NavbarService.getTypedStrings(username),
startDelay: 10, startDelay: 10,
backDelay: 500, backDelay: 500,
whenToStop: 17 + username.length whenToStop: 17 + username.length
......
service/src/main/resources/assets/statics/js/services/navbarService.js 0 → 100644
View file @ 787f4546
(function () {
angular.module('ctfApp').factory('NavbarService', [
function () {
var selector = '.title';
var firstDomain = 'capture-the-flag';
var secondDomain = 'capture-the-flAGH-2016';
return {
createNavbarString: function(username, domain){
return '<span class="username">'+username+'@</span><b>'+ (domain ? domain : secondDomain) +'</b>' + (domain ? ':~$' : '');
},
setUsername: function(username){
$(selector).html(this.createNavbarString(username));
},
setGuest: function(){
return this.setUsername('guest');
},
getTypedStrings: function(username){
return [this.createNavbarString(username, firstDomain), this.createNavbarString(username, secondDomain)];
},
getGuestTypedStrings: function(){
return this.getTypedStrings('guest');
}
};
}]);
})();
\ No newline at end of file
service/src/main/resources/assets/task.html
View file @ 787f4546
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
</div> </div>
<div class="circle-clipper right"> <div class="circle-clipper right">
<div class="circle"></div> <div class="circle"></div>
</div> </div>c
</div> </div>
</div> </div>
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
</div> </div>
</div> </div>
<div class="col s12 m4" style="text-align:center"> <div class="col s12 m4" style="text-align:center">
<img src="http://lorempixel.com/400/300/"/> <img class="responsive-img" src="http://lorempixel.com/400/300/"/>
<a class="waves-effect waves-light btn" target="_blank" href="{{apiAddress}}/task/{{task.level}}" <a class="waves-effect waves-light btn" target="_blank" href="{{apiAddress}}/task/{{task.level}}"
style="width:100%;margin-top:15px">Otwórz stronę z zadaniem</a> style="width:100%;margin-top:15px">Otwórz stronę z zadaniem</a>
</div> </div>
......
service/src/main/resources/assets/tasks.html
View file @ 787f4546
<div ng-controller="TasksController"> <div ng-controller="TasksController">
<div class="row"> <div class="row">
<div class="col s12 m6" ng-repeat="task in tasks"> <div class="col m6 s12" ng-repeat="task in tasks">
<div class="card blue-grey darken-1" ng-class="task.completed ? 'task-completed' : 'task-not-completed'"> <div class="card blue-grey darken-1" ng-class="task.completed ? 'task-completed' : 'task-not-completed'">
<div class="card-content white-text"> <div class="card-content white-text">
<div class="ribbon" ng-if="task.completed"><span>UKOŃCZONE</span></div> <div class="ribbon" ng-if="task.completed"><span>UKOŃCZONE</span></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment