Skip to content

Commit 708fbc9

Browse files
author
Peter Benjamin
committed
Tabbed landing page
1 parent 3aab40d commit 708fbc9

2 files changed

Lines changed: 83 additions & 208 deletions

File tree

‎index.html‎

Lines changed: 75 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<title>DevSecOps</title>
66
<!-- <link rel="shortcut icon" href="//www.devsecops.org/favicon.ico?v2" /> -->
7-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
7+
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
88
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
99
<link rel="stylesheet" href="css/main.css" />
1010
<link rel="stylesheet" href="css/mscom.css" />
@@ -75,50 +75,93 @@
7575
</div>
7676
</div>
7777
</div>
78-
<div class="row-fluid dlc-body" data-cols="1" data-view1="1" data-view2="1" data-view3="1" data-view4="1">
79-
<div class="span bp0-col-1-1 bp1-col-1-1 bp2-col-1-1 bp3-col-1-1 sortable-control">
80-
<div class="main-content">
81-
<div class="all-projects">
82-
<h3 ng-cloak>{{resultsSectionTitle}}</h3>
83-
<div class="loading" ng-hide="main.projects">Loading data...</div>
84-
<div class="row no-repos" ng-show="main.projects && (noOfRepos == 0)" ng-cloak>No repos found containing the search term '{{searchText}}'.</div>
85-
<div class="row" ng-show="main.projects && (noOfRepos > 0)" ng-cloak>
86-
<div class="col-md-4 col-md-offset-0 col-xs-6 col-xs-offset-0" ng-repeat="project in filtered | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
87-
<div class="panel panel-default">
88-
<div class="panel-heading">
89-
<a ng-href="{{project.Url}}">
90-
<div class="panel-title-area">{{project.Name}}</div>
91-
</a>
92-
</div>
93-
<div class="panel-body fork-info">
94-
<span ng-if="project.Fork">
78+
<uib-tabset active="active" type="tabs">
79+
<!-- PROJECTS TAB -->
80+
<uib-tab index="0" heading="Projects">
81+
<div class="row-fluid dlc-body" data-cols="1" data-view1="1" data-view2="1" data-view3="1" data-view4="1">
82+
<div class="span bp0-col-1-1 bp1-col-1-1 bp2-col-1-1 bp3-col-1-1 sortable-control">
83+
<div class="main-content">
84+
<div class="all-projects">
85+
<h3 ng-cloak>{{resultsSectionTitle}}</h3>
86+
<div class="loading" ng-hide="main.projects">Loading data...</div>
87+
<div class="row no-repos" ng-show="main.projects && (noOfRepos == 0)" ng-cloak>No repos found containing the search term '{{searchText}}'.</div>
88+
<div class="row" ng-show="main.projects && (noOfRepos > 0)" ng-cloak>
89+
<div class="col-md-4 col-md-offset-0 col-xs-6 col-xs-offset-0" ng-repeat="project in filtered | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
90+
<div class="panel panel-default">
91+
<div class="panel-heading">
92+
<a ng-href="{{project.Url}}">
93+
<div class="panel-title-area">{{project.Name}}</div>
94+
</a>
95+
</div>
96+
<div class="panel-body fork-info">
97+
<span ng-if="project.Fork">
9598
<span class="glyphicon glyphicon-random"></span>Forked from <a ng-href="{{project.ForkedFromUrl}}">{{project.ForkedFrom}}</a>
96-
</span>
97-
</div>
98-
<div class="panel-body description"><span>{{project.Description}}</span></div>
99-
<div class="panel-body">
100-
<div class="row">
101-
<div class="center">
102-
<span class="span-stars-group"><i class="fa fa-star fa-fw"></i>{{project.Stars}}</span>
103-
<span class="span-forks-group"><i class="fa fa-code-fork fa-fw"></i>{{project.Forks}}</span>
99+
</span>
100+
</div>
101+
<div class="panel-body description"><span>{{project.Description}}</span></div>
102+
<div class="panel-body">
103+
<div class="row">
104+
<div class="center">
105+
<span class="span-stars-group"><i class="fa fa-star fa-fw"></i>{{project.Stars}}</span>
106+
<span class="span-forks-group"><i class="fa fa-code-fork fa-fw"></i>{{project.Forks}}</span>
107+
</div>
108+
</div>
104109
</div>
105110
</div>
106111
</div>
112+
<div>
113+
<pagination class="col-xs-12 paginator pagination-small" ng-show="noOfRepos > 12" data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" on-select-page="pageChanged()" max-size="maxSize" data-previous-text="&laquo;" data-next-text="&raquo;"></pagination>
114+
</div>
107115
</div>
108116
</div>
109-
<div>
110-
<pagination class="col-xs-12 paginator pagination-small" ng-show="noOfRepos > 12" data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" on-select-page="pageChanged()" max-size="maxSize" data-previous-text="&laquo;" data-next-text="&raquo;"></pagination>
117+
</div>
118+
</div>
119+
</div>
120+
</uib-tab>
121+
<!-- BOOTCAMP TAB -->
122+
<uib-tab index="1" heading="Bootcamp">
123+
<div class="row-fluid dlc-body" data-cols="1" data-view1="1" data-view2="1" data-view3="1" data-view4="1">
124+
<div class="span bp0-col-1-1 bp1-col-1-1 bp2-col-1-1 bp3-col-1-1 sortable-control">
125+
<div class="main-content">
126+
<div class="all-projects">
127+
<div class="col-md-4 col-md-offset-0 col-xs-6 col-xs-offset-0" ng-repeat="week in bootcamp">
128+
<div class="panel panel-default">
129+
<div class="panel-heading">
130+
<a ng-href="{{week.url}}">
131+
<div class="panel-title-area">{{week.Week}}: {{week.Title}}</div>
132+
</a>
133+
</div>
134+
<div class="panel-body fork-info">
135+
<span ng-if="project.Fork">
136+
<span class="glyphicon glyphicon-random"></span>Forked from <a ng-href="{{project.ForkedFromUrl}}">{{project.ForkedFrom}}</a>
137+
</span>
138+
</div>
139+
<div class="panel-body description"><span>{{project.Description}}</span></div>
140+
<div class="panel-body">
141+
<div class="row">
142+
<div class="center">
143+
<span class="span-stars-group"><i class="fa fa-star fa-fw"></i>{{project.Stars}}</span>
144+
<span class="span-forks-group"><i class="fa fa-code-fork fa-fw"></i>{{project.Forks}}</span>
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
<div>
151+
<pagination class="col-xs-12 paginator pagination-small" ng-show="noOfRepos > 12" data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" on-select-page="pageChanged()" max-size="maxSize" data-previous-text="&laquo;" data-next-text="&raquo;"></pagination>
152+
</div>
111153
</div>
112154
</div>
113155
</div>
114156
</div>
115-
</div>
116-
</div>
157+
</uib-tab>
158+
</uib-tabset>
117159
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
118160
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
119-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
161+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
120162
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-aria.min.js"></script>
121-
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
163+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
164+
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
122165
<script src="js/main.js"></script>
123166
</body>
124167

‎js/main.js‎

Lines changed: 8 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -1,181 +1,16 @@
1-
var app = angular.module('site', ['ui.bootstrap', 'ngAria']);
2-
var bootcampData = {
3-
"Bootcamp": [{
4-
"Week": 1,
5-
"Title": "Getting Started",
6-
"Objectives": ["some objectives", "some objectives", "some objectives"],
7-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-1/README.md",
8-
"Lessons": [{
9-
"number": 1,
10-
"name": "Introductions",
11-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-1/LESSON-1.md"
12-
}, {
13-
"number": 2,
14-
"name": "Lab Guides",
15-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-1/LESSON-2.md"
16-
}, {
17-
"number": 3,
18-
"name": "Let's Get Moving!",
19-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-1/LESSON-3.md"
20-
}]
21-
}, {
22-
"Week": 2,
23-
"Title": "Building a Weak Application (Development)",
24-
"Objectives": ["Develop a Rails API", "Deploy to AWS manually", "Explore AWS-CLI & AWS-SDK"],
25-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-2/README.md",
26-
"Lessons": [{
27-
"number": 1,
28-
"name": "",
29-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-2/LESSON-1.md"
30-
}, {
31-
"number": 2,
32-
"name": "",
33-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-2/LESSON-2.md"
34-
}, {
35-
"number": 3,
36-
"name": "",
37-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-2/LESSON-3.md"
38-
}]
39-
}, {
40-
"Week": 3,
41-
"Title": "Security",
42-
"Objectives": ["Deploy a Vulnerable application to AWS", "Attack the application using different techniques (e.g. OWASP Top 10)", "Explore security tools (e.g. Metasploit, NMap, SQLMap, BurpSuite ...etc)"],
43-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-3/README.md",
44-
"Lessons": [{
45-
"number": 1,
46-
"name": "",
47-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-3/LESSON-1.md"
48-
}, {
49-
"number": 2,
50-
"name": "",
51-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-3/LESSON-2.md"
52-
}, {
53-
"number": 3,
54-
"name": "",
55-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-3/LESSON-3.md"
56-
}]
57-
}, {
58-
"Week": 4,
59-
"Title": "Keeping the Weak Alive (Operations)",
60-
"Objectives": ["Understanding data generated by attackers", "Detection & alerting with Splunk"],
61-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-4/README.md",
62-
"Lessons": [{
63-
"number": 1,
64-
"name": "",
65-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-4/LESSON-1.md"
66-
}, {
67-
"number": 2,
68-
"name": "",
69-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-4/LESSON-2.md"
70-
}, {
71-
"number": 3,
72-
"name": "",
73-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-4/LESSON-3.md"
74-
}]
75-
}, {
76-
"Week": 5,
77-
"Title": "Building a Rugged Application (Development)",
78-
"Objectives": ["Service Oriented Architecture (SOA)", "Automated AWS Deployments with CloudFormation", "Whitelisting & Attack Maps"],
79-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-5/README.md",
80-
"Lessons": [{
81-
"number": 1,
82-
"name": "",
83-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-5/LESSON-1.md"
84-
}, {
85-
"number": 2,
86-
"name": "",
87-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-5/LESSON-2.md"
88-
}, {
89-
"number": 3,
90-
"name": "",
91-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-5/LESSON-3.md"
92-
}]
93-
}, {
94-
"Week": 6,
95-
"Title": "Rugged Security",
96-
"Objectives": ["Account Takeovers", "Advanced cloud hacking techniques", "Lateral movement & privilege escalation"],
97-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-6/README.md",
98-
"Lessons": [{
99-
"number": 1,
100-
"name": "",
101-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-6/LESSON-1.md"
102-
}, {
103-
"number": 2,
104-
"name": "",
105-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-6/LESSON-2.md"
106-
}, {
107-
"number": 3,
108-
"name": "",
109-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-6/LESSON-3.md"
110-
}]
111-
}, {
112-
"Week": 7,
113-
"Title": "Rugged Operations",
114-
"Objectives": ["Restacking AWS Accounts", "Forensics in the Cloud", "Incident Response in the Cloud"],
115-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-7/README.md",
116-
"Lessons": [{
117-
"number": 1,
118-
"name": "",
119-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-7/LESSON-1.md"
120-
}, {
121-
"number": 2,
122-
"name": "",
123-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-7/LESSON-2.md"
124-
}, {
125-
"number": 3,
126-
"name": "",
127-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-7/LESSON-3.md"
128-
}]
129-
}, {
130-
"Week": 8,
131-
"Title": "Red Team vs Blue Team (Hack Lab)",
132-
"Objectives": ["Put all your skills together", "Hack all the things", "Don't get caught by the Blue Team"],
133-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-8/README.md",
134-
"Lessons": [{
135-
"number": 1,
136-
"name": "",
137-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-8/LESSON-1.md"
138-
}, {
139-
"number": 2,
140-
"name": "",
141-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-8/LESSON-2.md"
142-
}, {
143-
"number": 3,
144-
"name": "",
145-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-8/LESSON-3.md"
146-
}]
147-
}, {
148-
"Week": 9,
149-
"Title": "Presentations: 5-minute Demos",
150-
"Objectives": ["Problem-sovling", "Contribute to the open-source community", ""],
151-
"url": "https://github.com/devsecops/bootcamp/blob/master/Week-9/README.md",
152-
"Lessons": [{
153-
"number": 1,
154-
"name": "",
155-
"url": ""
156-
}, {
157-
"number": 2,
158-
"name": "",
159-
"url": ""
160-
}, {
161-
"number": 3,
162-
"name": "",
163-
"url": ""
164-
}]
165-
}]
166-
};
1+
var app = angular.module('site', ['ngAnimate','ui.bootstrap', 'ngAria']);
1672

1683
var projectsData = { "All projects": ["awesome-devsecops", "controlplane", "heroes", "raindance", "radar", "assumer", "playbook", "devsecops", "forecast", "firebolt", "weatherman", "foghorn", "experiments", "catv", "science", "aws-policies", "ssl_checks"] };
1694
app.controller('MainCtrl', ['$scope', 'filterFilter', '$anchorScroll',
1705
function($scope, filterFilter, $anchorScroll) {
6+
$scope.tabs = [{title: "Projects"},{title: 'Bootcamp'}];
7+
1718
var self = this;
1729
self.projects = projectsData;
173-
self.bootcamp = bootcampData;
17410

17511
$.ajax({
17612
url: 'https://raw.githubusercontent.com/devsecops/devsecops.github.io/master/data/projects.json',
17713
dataType: 'json',
178-
// jsonpCallback: 'JSON_CALLBACK',
17914
success: function(data) {
18015
var projects = data.AllProjects;
18116
$scope.currentPage = 1; //current page
@@ -199,18 +34,15 @@ app.controller('MainCtrl', ['$scope', 'filterFilter', '$anchorScroll',
19934
});
20035

20136
self.projects = projects;
202-
self.featuredProjects = featuredProjects;
20337
$scope.$apply();
20438
}
20539
});
20640
$.ajax({
207-
url: 'https://popularrepostg.blob.core.windows.net/popularrepos/projectssummary.json',
208-
dataType: 'jsonp',
209-
jsonpCallback: 'JSON_CALLBACK',
210-
success: function(stats) {
211-
if (stats !== null) {
212-
$scope.overAllStats = stats[0];
213-
}
41+
url: 'https://raw.githubusercontent.com/devsecops/devsecops.github.io/master/data/bootcamp.json',
42+
dataType: 'json',
43+
success: function(data) {
44+
$scope.bootcamp = data.Bootcamp;
45+
$scope.$apply();
21446
}
21547
});
21648
}

0 commit comments

Comments
 (0)