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

Modified Dashboard UI

parent a393465a
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
css/la.css
+ 0
− 4
View file @ 585997ac
......@@ -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;
......
css/style.css
+ 24
− 7
View file @ 585997ac
......@@ -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 {
......
dashboard.html
+ 99
− 6
View file @ 585997ac
......@@ -10,15 +10,18 @@
<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="dashboard.html" id="dashboard">Dashboard<i class="fa fa-home fa-lg"></i></a>
......@@ -26,11 +29,101 @@
<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 &nbsp;&nbsp;&nbsp;<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">&times;</button>
<div class="modalhead" style="text-align: center">
<img src="img/img_avatar.png" alt="Avatar" style="border-radius: 50%;width: 75px;">&nbsp;&nbsp;&nbsp;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">&times;</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>
......
home.html
+ 36
− 7
View file @ 585997ac
......@@ -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 &nbsp;&nbsp;&nbsp;<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;">&nbsp;&nbsp;&nbsp;Name</div>
<button type="button" class="close" data-dismiss="modal">&times;</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">&times;</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>
img/hodor-logo5.png 0 → 100644
+ 0
− 0
View file @ 585997ac
img/hodor-logo5.png

3.05 KiB

land.html
+ 1
− 2
View file @ 585997ac
......@@ -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">&times;</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">
......
piechartdata.js 0 → 100644
+ 39
− 0
View file @ 585997ac
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"
}
]
}
);
chartdata.js → timelinechartdata.js
+ 3
− 3
View file @ 585997ac
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"
}
],
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment