Skip to content
Snippets Groups Projects
Commit f93a10db authored by Sabhariesh's avatar Sabhariesh
Browse files

Added cards structure and navbar to learn page, modified logo and color scheme

parent bfde960a
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
css/style.css
+ 105
− 10
View file @ f93a10db
.container-fluid{
html {
background-color: #e2e2e2;
}
html {
.container-fluid{
background-color: #e2e2e2;
}
......@@ -15,7 +14,7 @@ html {
}
#sidenavbar a {
position: absolute;
position: fixed;
left: -245px;
transition: 0.3s;
padding: 15px;
......@@ -57,7 +56,9 @@ html {
#sidenavbar a:hover {
left: 0;
background-color: #03a9f4;
/* #background-color: #03a9f4; */ /*blue*/
background-color: #e53935; /*red*/
/*background-color: #43A047;*/ /*green*/
z-index: 99 !important;
}
......@@ -66,7 +67,7 @@ html {
}
#profile>i {
top: 10%;
top: 5px;
}
#profile {
......@@ -152,6 +153,100 @@ html {
margin-left:15%;
}
@media print {
div {page-break-before: always;}
.navbar-inverse {
background-color: #000000!important;
position: absolute;
top: 20%;
left:5%;
right: 2%
}
.navbar-inverse .navbar-brand {
color: #ffffff;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
color: #ffffff;
}
.navbar-inverse .navbar-text {
color: #ffffff;
}
.navbar-inverse .navbar-nav > li > a {
color: #ffffff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #ffffff;
background-color: darkred;
}
.navbar-inverse .navbar-nav > li > .dropdown-menu {
background-color: #000000;
}
.navbar-inverse .navbar-nav > li > .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-inverse .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: #e53935;
}
.navbar-inverse .navbar-nav > li > .dropdown-menu > li.divider {
background-color: #e53935;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #e53935;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #e53935;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #e53935;
}
.navbar-inverse .navbar-toggle {
border-color: #e53935;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
background-color: #e53935;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: #ffffff;
}
.navbar-inverse .navbar-link {
color: #ffffff;
}
.navbar-inverse .navbar-link:hover {
color: #ffffff;
}
@media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #e53935;
}
}
.navbar-inverse>.container-fluid{
background-color: black;
}
dashboard.html
+ 4
− 3
View file @ f93a10db
......@@ -3,24 +3,25 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<script src="amcharts/amcharts/amcharts.js"></script>
<script src="amcharts/amcharts/serial.js"></script>
<script src="amcharts/amcharts/pie.js"></script>
<script src="amcharts/amcharts/themes/black.js"></script>
<script src="amcharts/amcharts/themes/ligth.js"></script>
<script src="amcharts/amcharts/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="amcharts/amcharts/plugins/export/export.css" type="text/css" media="all" />
<script src="timelinechartdata.js"></script>
<script src="piechartdata.js"></script>
<script src="piechartdata.js"></script>ript>
<title>HODOR | Dashboard</title>
</head>
<body>
<div class="container-fluid">
<img src="img/hodor-logo5.png" id="hodor-logo">
<a href="home.html"><img src="img/hodor-logo7.png" id="hodor-logo"></a>
<div id="sidenavbar" class="sidenavbar">
<a href="#" id="profile" data-toggle="modal" data-target="#profile-modal"><img src="img/img_avatar.png" alt="Avatar"><br>Sabhariesh<i class="fa fa-user fa-2x"></i></a><br><br>
<a href="dashboard.html" id="dashboard">Dashboard<i class="fa fa-home fa-lg"></i></a>
......
home.html
+ 2
− 11
View file @ f93a10db
......@@ -3,25 +3,16 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/black.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="timelinechartdata.js"></script>
<script src="piechartdata.js"></script>
<title>HODOR</title>
</head>
<body>
<div class="container-fluid">
<img src="img/hodor-logo5.png" id="hodor-logo">
<a href="home.html"><img src="img/hodor-logo7.png" id="hodor-logo"></a>
<div id="sidenavbar" class="sidenavbar">
<a href="#" id="profile" data-toggle="modal" data-target="#profile-modal"><img src="img/img_avatar.png" alt="Avatar"><br>Sabhariesh<i class="fa fa-user fa-2x"></i></a><br><br>
<a href="dashboard.html" id="dashboard">Dashboard<i class="fa fa-home fa-lg"></i></a>
......
img/hodor-logo6.png 0 → 100644
+ 0
− 0
View file @ f93a10db
img/hodor-logo6.png

2.96 KiB

img/hodor-logo7.png 0 → 100644
+ 0
− 0
View file @ f93a10db
img/hodor-logo7.png

2.82 KiB

learn.html
+ 219
− 25
View file @ f93a10db
......@@ -3,25 +3,16 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<script src="amcharts/amcharts/amcharts.js"></script>
<script src="amcharts/amcharts/serial.js"></script>
<script src="amcharts/amcharts/pie.js"></script>
<script src="amcharts/amcharts/themes/black.js"></script>
<script src="amcharts/amcharts/themes/ligth.js"></script>
<script src="amcharts/amcharts/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="amcharts/amcharts/plugins/export/export.css" type="text/css" media="all" />
<script src="timelinechartdata.js"></script>
<script src="piechartdata.js"></script>
<title>HODOR | Learn</title>
</head>
<body>
<div class="container-fluid">
<img src="img/hodor-logo3.png" id="hodor-logo">
<a href="home.html"><img src="img/hodor-logo7.png" id="hodor-logo"></a>
<div id="sidenavbar" class="sidenavbar">
<a href="#" id="profile" data-toggle="modal" data-target="#profile-modal"><img src="img/img_avatar.png" alt="Avatar"><br>Sabhariesh<i class="fa fa-user fa-2x"></i></a><br><br>
<a href="dashboard.html" id="dashboard">Dashboard<i class="fa fa-home fa-lg"></i></a>
......@@ -29,9 +20,8 @@
<a href="#" id="leaderboard">Leaderboard<i class="fa fa-bar-chart fa-lg"></i></a>
<a href="#" id="ctf">Capture the Flag<i class="fa fa-flag fa-lg"></i></a>
<a href="#" id="docs" data-toggle="modal" data-target="#doc-modal">Documentation & help &nbsp;&nbsp;&nbsp;<i class="fa fa-info fa-lg"></i></a><br>
<a href="#" id="logout" data-toggle="modal" data-target="#logout-modal">Logout<i style="color:#d9534f !important;" class="fa fa-power-off fa-lg"></i></a>
<a href="#" id="logout" data-toggle="modal" data-target="#logout-modal">Logout<i class="fa fa-power-off fa-lg"></i></a>
</div>
<div id="profile-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
......@@ -123,15 +113,219 @@
</div>
</div>
<div class="questions" style="position: absolute;left: 10%;right: 2%; color: black;">
<br><br><br><h3>Challenge Name</h3><br>
<p>x points --- Category</p>
<hr>
<div class="learnpage">
<nav class="navbar navbar-inverse" >
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Web-based</a></li>
<li><a href="#">Cryptography</a></li>
<li><a href="#">Reverse-Engineering</a></li>
<li><a href="#">Forensics</a></li>
<li><a href="#">Steganography</a></li>
<li><a href="#">Linux-based</a></li>
</ul>
</div>
</nav>
<div class="questions" style="overflow:auto; height:40px;">
<div class="panel-group" style="position: absolute;top: 35%;left: 5%;right: 2%; color: black;">
<div class="panel panel-defaul" data-toggle="collapse" href="#collapse1" style="background-color: lightcoral">
<div class="panel-heading">
<h3>Challenge Name</h3>
<span class="badge">x points</span>
<span class="label label-info">Category</span>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" role="tab" href="#que" data-parent="#collapse1">Question</a></li>
<li><a data-toggle="tab" href="#res" role="tab" data-parent="#collapse1">Resources</a></li>
<li><a data-toggle="tab" href="#hint" role="tab" data-parent="#collapse1">Hints</a></li>
</ul>
<div class="tab-content">
<div id="que" class="tab-pane fade in active">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter the Flag here..." id="flag">
<span class="input-group-btn">
<button class="btn btn-success" type="button">Submit</button>
</span>
</div>
</div>
<div id="res" class="tab-pane fade">
<p> All materials to be uploaded and links will be provided here.</p>
<hr>
<input type="text" name="flag" placeholder="Enter the flag here."><input type="submit" value="Submit"><br><hr>
</div>
<div id="hint" class="tab-pane fade">
<p>Hints and Documentation of the question.</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-defaul" data-toggle="collapse" href="#collapse2" style="background-color: lightskyblue">
<div class="panel-heading">
<h3>Challenge Name</h3>
<span class="badge">x points</span>
<span class="label label-info">Category</span>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#que">Question</a></li>
<li><a data-toggle="tab" href="#res">Resources</a></li>
<li><a data-toggle="tab" href="#hint">Hints</a></li>
</ul>
<div class="tab-content">
<div id="que" class="tab-pane fade in active">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="res" class="tab-pane fade">
<p> All materials to be uploaded and links will be provided here.</p>
</div>
<div id="hint" class="tab-pane fade">
<p>Hints and Documentation of the question.</p>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter the Flag here..." id="flag">
<span class="input-group-btn">
<button class="btn btn-success" type="button" disabled>Submit</button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-defaul" data-toggle="collapse" href="#collapse3" style="background-color: lightcoral">
<div class="panel-heading">
<h3>Challenge Name</h3>
<span class="badge">x points</span>
<span class="label label-info">Category</span>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#que">Question</a></li>
<li><a data-toggle="tab" href="#res">Resources</a></li>
<li><a data-toggle="tab" href="#hint">Hints</a></li>
</ul>
<div class="tab-content">
<div id="que" class="tab-pane fade in active">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="res" class="tab-pane fade">
<p> All materials to be uploaded and links will be provided here.</p>
</div>
<div id="hint" class="tab-pane fade">
<p>Hints and Documentation of the question.</p>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter the Flag here..." id="flag">
<span class="input-group-btn">
<button class="btn btn-success" type="button" disabled>Submit</button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-defaul" data-toggle="collapse" href="#collapse4" style="background-color: lightskyblue">
<div class="panel-heading">
<h3>Challenge Name</h3>
<span class="badge">x points</span>
<span class="label label-info">Category</span>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#que">Question</a></li>
<li><a data-toggle="tab" href="#res">Resources</a></li>
<li><a data-toggle="tab" href="#hint">Hints</a></li>
</ul>
<div class="tab-content">
<div id="que" class="tab-pane fade in active">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="res" class="tab-pane fade">
<p> All materials to be uploaded and links will be provided here.</p>
</div>
<div id="hint" class="tab-pane fade">
<p>Hints and Documentation of the question.</p>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter the Flag here..." id="flag">
<span class="input-group-btn">
<button class="btn btn-success" type="button" disabled>Submit</button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-defaul" data-toggle="collapse" href="#collapse5" style="background-color: lightcoral">
<div class="panel-heading">
<h3>Challenge Name</h3>
<span class="badge">x points</span>
<span class="label label-info">Category</span>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#que">Question</a></li>
<li><a data-toggle="tab" href="#res">Resources</a></li>
<li><a data-toggle="tab" href="#hint">Hints</a></li>
</ul>
<div class="tab-content">
<div id="que" class="tab-pane fade in active">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="res" class="tab-pane fade">
<p> All materials to be uploaded and links will be provided here.</p>
</div>
<div id="hint" class="tab-pane fade">
<p>Hints and Documentation of the question.</p>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter the Flag here..." id="flag">
<span class="input-group-btn">
<button class="btn btn-success" type="button" disabled>Submit</button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-defaul" data-toggle="collapse" href="#collapse6" style="background-color: lightskyblue">
<div class="panel-heading">
<h3>Challenge Name</h3>
<span class="badge">x points</span>
<span class="label label-info">Category</span>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#que">Question</a></li>
<li><a data-toggle="tab" href="#res">Resources</a></li>
<li><a data-toggle="tab" href="#hint">Hints</a></li>
</ul>
<div class="tab-content">
<div id="que" class="tab-pane fade in active">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="res" class="tab-pane fade">
<p> All materials to be uploaded and links will be provided here.</p>
</div>
<div id="hint" class="tab-pane fade">
<p>Hints and Documentation of the question.</p>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter the Flag here..." id="flag">
<span class="input-group-btn">
<button class="btn btn-success" type="button" disabled>Submit</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
timelinechartdata.js
+ 3
− 0
View file @ f93a10db
......@@ -13,6 +13,9 @@ AmCharts.makeChart("timelinechart",
"balloonText": "[[title]] in [[Month]]:[[value]]",
"bullet": "round",
"id": "AmGraph-1",
/*"lineColor":"03a9f4",*//*blue*/
"lineColor": "#e53935",/*red*/
/*"lineColor":"#43A047",*//*green*/
"title": "Challenges Solved",
"valueField": "Solved"
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment