diff --git a/css/la.css b/css/la.css
index 78dbb6a86f498aa43a82ff596e4bd32062de206f..7196c31b2696288a7b75f5b95bf8e4c132cd7151 100644
--- a/css/la.css
+++ b/css/la.css
@@ -67,10 +67,6 @@ body :-ms-input-placeholder {
transition-timing-function: ease-in-out;
font-weight: 200;
}
-.modal-header h2{
- color: black;
- align-self: center;
-}
.loginform {
padding: 20px 0;
position: relative;
diff --git a/css/style.css b/css/style.css
index 8ed8ab025f34169c58e29d07c409b62478ad4e49..bc8d749a6e95b2ccb30907242d57d17e861f1a0f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -9,11 +9,11 @@ html {
#hodor-logo {
position: absolute;
top: 5px;
- left: 43%;
+ left: 45%;
background-color: #000000;
opacity: 0.5;
height:auto;
- width: 250px;
+ width: 15%;
}
#sidenavbar a {
@@ -58,6 +58,7 @@ html {
#sidenavbar a:hover {
left: 0;
background-color: grey;
+ z-index: 99 !important;
}
#sidenavbar a:hover i {
@@ -114,12 +115,28 @@ html {
}
<!------------------------------Dashboard------------------------------------ -->
-#chartdiv {
- width: 96%;
- height: 475px;
- margin-left: auto;
- margin-right: auto;
+
+.level-label, .progress, .questionbuttons{
+ position: relative;
+ clear: both;
+ margin-left: 5px;
+ margin-right: 5px;
+ margin-top: 15px;
+ padding-top: 5px;
+ padding-right: 5px;
+ padding-bottom: 5px;
+ padding-left: 5px;
+}
+
+#timelinechartdata, #piechartdata {
+ margin-left: 5px;
+ margin-right: 5px;
margin-top: 15px;
+ clear: both;
+ padding-top: 5px;
+ padding-right: 5px;
+ padding-bottom: 5px;
+ padding-left: 5px;
}
.amcharts-graph-g1 .amcharts-graph-fill {
diff --git a/dashboard.html b/dashboard.html
index 2e7aa49d6015198f493ce106c966fe7fea4f8a0e..e1eccc998e8aaaff81fc718ac7bb3abc0fad4209 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -10,28 +10,121 @@
<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="chartdata.js"></script>
+ <script src="timelinechartdata.js"></script>
+ <script src="piechartdata.js"></script>
<title>HODOR | Dashboard</title>
</head>
<body>
<div class="container-fluid">
- <img src="img/hodor-logo4.png" id="hodor-logo">
+ <img src="img/hodor-logo5.png" id="hodor-logo">
<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-lg"></i></a><br><br>
+ <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-lg"></i></a><br><br>
<a href="dashboard.html" id="dashboard">Dashboard<i class="fa fa-home fa-lg"></i></a>
<a href="#" id="learn">Learn<i class="fa fa-laptop fa-lg"></i></a>
<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">Documentation & help <i class="fa fa-info fa-lg"></i></a><br>
- <a href="#" id="logout">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 style="color:#d9534f !important;" class="fa fa-power-off fa-lg"></i></a>
</div>
- <div id="chartdiv" style="width: 50%; height: 300px; background-color: #FFFFFF; position: absolute; left: 10%; top: 15%;">
+ <div class="dashboard">
+ <div id="timelinechart" style="width: 40%; height: 40%; background-color: black; position: absolute; left: 10%; top: 15%;">
+ </div>
+ <div id="piechart" style="width: 30%; height: 40%; background-color: black; position:absolute; right: 10%; top: 15%;">
+ </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+ <div class="level-label" style="position:relative; left:10%">
+ <h2 style="position:absolute; left:35%;">Level <span class="label label-primary">Padawan</span></h2><br><br><br><br>
+ <div class="progress" style="position:absolute; width:80%; left:40">
+ <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70% ">
+ 70%
+ </div>
+ </div>
+ </div>
+ <br><br><br>
+ <div class="questionbuttons" style="position:absolute; left:40%;">
+ <button type="button" class="btn btn-info btn-lg">Previous Question</button>
+ <button type="button" class="btn btn-info btn-lg">Next Question</button>
</div>
+ </div>
+ <div id="profile-modal" class="modal fade" role="dialog">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">×</button>
+ <div class="modalhead" style="text-align: center">
+ <img src="img/img_avatar.png" alt="Avatar" style="border-radius: 50%;width: 75px;"> Name</div>
+ </div>
+ <div class="modal-body">
+ <ul class="nav nav-pills nav-justified">
+ <li class="active"><a data-toggle="pill" href="#home">View Profile</a></li>
+ <li><a data-toggle="pill" href="#menu2">Edit Profile</a></li>
+ </ul>
+
+ <div class="tab-content">
+ <div id="home" class="tab-pane fade in active">
+ <h3>Name</h3>
+ <p>Sabhariesh</p>
+ <h3>Username</h3>
+ <p>frozenfire</p>
+ <h3>Email-ID</h3>
+ <p>sabbhy1996@gmail.com</p>
+ <h3>Github</h3>
+ <p>@shariharasudan</p>
+ <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
+ </div>
+ <div id="menu2" class="tab-pane fade">
+ <form>
+ <div class="form-group">
+ <label for="name">Name</label>
+ <input type="text" class="form-control" id="name">
+ </div>
+ <div class="form-group">
+ <label for="uname">Username</label>
+ <input type="text" class="form-control" id="uname">
+ </div> <div class="form-group">
+ <label for="email">Email address:</label>
+ <input type="email" class="form-control" id="email">
+ </div>
+ <div class="form-group">
+ <label for="pwd">Current Password:</label>
+ <input type="password" class="form-control" id="pwd">
+ <label for="pwd">New Password:</label>
+ <input type="password" class="form-control" id="npwd">
+ <label for="rnpwd"> Re-enter new Password:</label>
+ <input type="password" class="form-control" id="rnpwd">
+ </div>
+ <button type="submit" class="btn btn-success" style="align-self: center">Submit</button>
+ <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal fade" id="logout-modal" role="dialog">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">×</button>
+ <h4 class="modal-title">Modal Header</h4>
+ </div>
+ <div class="modal-body">
+ <p>Are you sure you want to logout?</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-success" data-dismiss="modal">Yes</button>
+ <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/home.html b/home.html
index b71959bbeac80d3df9879aa98dc70c9faff957c3..c42a06e03a663b43f2459e47747f5074c85f9ce8 100644
--- a/home.html
+++ b/home.html
@@ -8,19 +8,28 @@
<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" href="font-awesome-4.7.0/css/font-awesome.min.css">
- <title>HODOR | Home</title>
+ <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-logo4.png" id="hodor-logo">
+<img src="img/hodor-logo5.png" id="hodor-logo">
<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-lg"></i></a><br><br>
- <a href="dashboard.html" id="dashboard">Dashboard<i class="fa fa-home fa-lg"></i></a>
+ <a href="dashboard.html" id="dashboard" onclick="loadDashboard()">Dashboard<i class="fa fa-home fa-lg"></i></a>
<a href="#" id="learn">Learn<i class="fa fa-laptop fa-lg"></i></a>
<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">Documentation & help <i class="fa fa-info fa-lg"></i></a><br>
- <a href="#" id="logout">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 style="color:#d9534f !important;" class="fa fa-power-off fa-lg"></i></a>
</div>
<div id="profile-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
@@ -28,6 +37,7 @@
<div class="modal-header">
<div class="modalhead" style="text-align: center">
<img src="img/img_avatar.png" alt="Avatar" style="border-radius: 50%;width: 75px;"> Name</div>
+ <button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<ul class="nav nav-pills nav-justified">
@@ -61,10 +71,12 @@
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
- <label for="pwd">Password:</label>
+ <label for="pwd">Current Password:</label>
<input type="password" class="form-control" id="pwd">
- <label for="rpwd"> Re-enter Password:</label>
- <input type="password" class="form-control" id="rpwd">
+ <label for="pwd">New Password:</label>
+ <input type="password" class="form-control" id="npwd">
+ <label for="rnpwd"> Re-enter new Password:</label>
+ <input type="password" class="form-control" id="rnpwd">
</div>
<button type="submit" class="btn btn-success" style="align-self: center">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
@@ -75,6 +87,23 @@
</div>
</div>
</div>
+<div class="modal fade" id="logout-modal" role="dialog">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">×</button>
+ <h4 class="modal-title">Modal Header</h4>
+ </div>
+ <div class="modal-body">
+ <p>Are you sure you want to logout?</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-success" data-dismiss="modal">Yes</button>
+ <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
+ </div>
+ </div>
+ </div>
+</div>
</div>
</body>
</html>
diff --git a/img/hodor-logo5.png b/img/hodor-logo5.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a755e601eac0f945dca7bc9c01d01d4c3e31e1c
Binary files /dev/null and b/img/hodor-logo5.png differ
diff --git a/land.html b/land.html
index 9e70eb2e098998df04d6c0cc1e6a72c75eb5c28e..ee2299b6bb2881b2e40220f7aa6e0235f1e2af91 100644
--- a/land.html
+++ b/land.html
@@ -43,7 +43,7 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
- <h2>Login</h2>
+ <button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form1">
@@ -75,7 +75,6 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
- <!--<h2>Register</h2>-->
</div>
<div class="modal-body">
<form class="form2">
diff --git a/piechartdata.js b/piechartdata.js
new file mode 100644
index 0000000000000000000000000000000000000000..7e93e5036aa649ea4eeab84b24bfdc6d9c6bbc30
--- /dev/null
+++ b/piechartdata.js
@@ -0,0 +1,39 @@
+AmCharts.makeChart("piechart",
+ {
+ "type": "pie",
+ "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
+ "titleField": "category",
+ "valueField": "column-1",
+ "allLabels": [],
+ "balloon": {},
+ "theme": "black",
+ "legend": {
+ "enabled": true,
+ "align": "center",
+ "markerType": "circle"
+ },
+ "titles": [],
+ "dataProvider": [
+ {
+ "category": "Web",
+ "column-1": 8
+ },
+ {
+ "category": "Forensics",
+ "column-1": "3"
+ },
+ {
+ "category": "Steg",
+ "column-1": 2
+ },
+ {
+ "category": "Cryptography",
+ "column-1": "6"
+ },
+ {
+ "category": "Misc.",
+ "column-1": "2"
+ }
+ ]
+ }
+);
diff --git a/chartdata.js b/timelinechartdata.js
similarity index 93%
rename from chartdata.js
rename to timelinechartdata.js
index b90a1a8ef10171d7f45d45883b0207604f44420b..81ddc100cfa515ba0ca201f7e8ed8a9866213c88 100644
--- a/chartdata.js
+++ b/timelinechartdata.js
@@ -1,4 +1,4 @@
-AmCharts.makeChart("chartdiv",
+AmCharts.makeChart("timelinechart",
{
"type": "serial",
"categoryField": "Month",
@@ -10,10 +10,10 @@ AmCharts.makeChart("chartdiv",
"trendLines": [],
"graphs": [
{
- "balloonText": "[[title]] of [[Month]]:[[value]]",
+ "balloonText": "[[title]] in [[Month]]:[[value]]",
"bullet": "round",
"id": "AmGraph-1",
- "title": "graph 1",
+ "title": "Challenges Solved",
"valueField": "Solved"
}
],