<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <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"> <title>HODOR | Learn</title> </head> <body> <div class="container-fluid"> <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> <a href="learn.html" 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" 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 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"> <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> </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 id="doc-modal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title" style="text-align: center">Documentation & Help</h4> </div> <div class="modal-body"> Visit our gitlab page for documentation and any other help required!<br><br> <div class="gitbutton text-center"> <a href="https://git.amrita.edu/hodorsec/" class="btn btn-info" role="button" style="align-self: center">Go to Gitlab</a> </div> </div> </div> </div> </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>