Website for visualizing a persons github network.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

122 lines
4.7 KiB

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  7. <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  8. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  9. <link rel="stylesheet" href="./style.css" />
  10. <link rel="stylesheet" href="./search.css" />
  11. <script src="https://code.jquery.com/jquery-3.3.1.min.js"
  12. integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  13. crossorigin="anonymous">
  14. </script>
  15. </head>
  16. <body>
  17. <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
  18. <div id="header-title">
  19. <a href="./index.html">
  20. <img id="logo" src="./logo.svg" />
  21. </a>
  22. </div>
  23. <div id="navigation">
  24. <ul class="nav">
  25. <li class="nav-item">
  26. <a href="./graphgenerator.html">
  27. Generate graphs
  28. </a>
  29. </li>
  30. <div class="nav-sep"></div>
  31. <li class="nav-item">
  32. <a href="https://github.com/jrtechs/github-graphs">
  33. View on GitHub
  34. </a>
  35. </li>
  36. <div class="nav-sep"></div>
  37. <li class="nav-item">
  38. <a href="./about.html">
  39. About
  40. </a>
  41. </li>
  42. </ul>
  43. </div>
  44. </div>
  45. <div class="main container">
  46. <div id="search-bar">
  47. <div class="row align-items-center text-center">
  48. <div class="search-title">
  49. <h1 id="search" class="m-title">Search GitHub:</h1>
  50. </div>
  51. <div class="col search-col">
  52. <form class="search-form">
  53. <input class="rounder form-control mr-sm-1" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search">
  54. </form>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="card-deck text-center">
  59. <div class="card rounder">
  60. <div class="card-header">
  61. <h1 class="m-title">Interactive Friends Chart</h1>
  62. </div>
  63. <div class="card-body">
  64. <p>
  65. Creates an web chart of the selected user and
  66. both their followers and anyone they are following
  67. themselves.
  68. </p>
  69. <button class="btn btn-outline-success rounder" onclick='toFriends()' type='button'>Generate</button>
  70. </div>
  71. <p></p>
  72. </div>
  73. <div class="card rounder">
  74. <div class="card-header">
  75. <h1 class="m-title">Repo Timeline</h1>
  76. </div>
  77. <div class="card-body">
  78. <p>
  79. Displays a timeline of every repo belonging
  80. to the selected user in chronological order,
  81. along with information pertaining to each repo.
  82. </p>
  83. <button class="btn btn-outline-success rounder" onclick='toTimeline()' type='button'>Generate</button>
  84. </div>
  85. <p></p>
  86. </div>
  87. <div class="card rounder">
  88. <div class="card-header">
  89. <h1 class="m-title">Interactive Organization Chart</h1>
  90. </div>
  91. <div class="card-body">
  92. <p>
  93. Creates a web chart of the specified organization
  94. and all associated repos.
  95. </p>
  96. <button class="btn btn-outline-success rounder" onclick='toOrganization()' type='button'>Generate</button>
  97. </div>
  98. <p></p>
  99. </div>
  100. </div>
  101. </div>
  102. </body>
  103. </html>
  104. <script>
  105. function fetchUserInput() {
  106. const inputedName = $("#txtUsername").val();
  107. return inputedName;
  108. }
  109. function toFriends() {
  110. var uname = fetchUserInput();
  111. window.location.href = "./FriendsGraph.html?name=" + uname;
  112. }
  113. function toTimeline() {
  114. var uname = fetchUserInput();
  115. window.location.href = "./TimeLineGraph.html?name=" + uname;
  116. }
  117. if (findGetParameter("name") !== null) {
  118. createGraphs(findGetParameter("name"))
  119. }
  120. </script>