From f93a10db1794f8401391693a4b9d7f9fad37a33c Mon Sep 17 00:00:00 2001
From: Sabhariesh <sabbhy1996@gmail.com>
Date: Wed, 8 Nov 2017 01:53:21 +0530
Subject: [PATCH] Added cards structure and navbar to learn page, modified logo
and color scheme
---
css/style.css | 115 ++++++++++++++++++--
dashboard.html | 7 +-
home.html | 13 +--
img/hodor-logo6.png | Bin 0 -> 3033 bytes
img/hodor-logo7.png | Bin 0 -> 2892 bytes
learn.html | 244 ++++++++++++++++++++++++++++++++++++++-----
timelinechartdata.js | 3 +
7 files changed, 333 insertions(+), 49 deletions(-)
create mode 100644 img/hodor-logo6.png
create mode 100644 img/hodor-logo7.png
diff --git a/css/style.css b/css/style.css
index fa5f718..d970718 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,10 +1,9 @@
-.container-fluid{
- background-color: #e2e2e2;
-}
-
html {
background-color: #e2e2e2;
}
+.container-fluid{
+ background-color: #e2e2e2;
+}
#hodor-logo {
position: absolute;
@@ -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;}
-}
\ No newline at end of file
+
+.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;
+}
diff --git a/dashboard.html b/dashboard.html
index 022aa4f..b8a57e7 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -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>
diff --git a/home.html b/home.html
index 0d3b912..423e93f 100644
--- a/home.html
+++ b/home.html
@@ -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>
diff --git a/img/hodor-logo6.png b/img/hodor-logo6.png
new file mode 100644
index 0000000000000000000000000000000000000000..481897ee8574ad2f4dc304c3c3bc553ed0bf58a6
GIT binary patch
literal 3033
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
literal 0
HcmV?d00001
diff --git a/img/hodor-logo7.png b/img/hodor-logo7.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c81a83f70c7683744de211afe9b638d2a2183a5
GIT binary patch
literal 2892
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
literal 0
HcmV?d00001
diff --git a/learn.html b/learn.html
index 54689a8..325cfbb 100644
--- a/learn.html
+++ b/learn.html
@@ -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,10 +20,9 @@
<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 <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 id="profile-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -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>
- <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>
- <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 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>
+ <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>
+ </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
diff --git a/timelinechartdata.js b/timelinechartdata.js
index a4ea69a..8ddb116 100644
--- a/timelinechartdata.js
+++ b/timelinechartdata.js
@@ -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"
}
--
GitLab