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.

83 lines
3.5 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. </head>
  12. <body>
  13. <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
  14. <div id="header-title">
  15. <a href="./index.html">
  16. <img id="logo" src="./logo.svg" />
  17. </a>
  18. </div>
  19. <div id="navigation">
  20. <ul class="nav">
  21. <li class="nav-item">
  22. <a href="./graphgenerator.html">
  23. Generate graphs
  24. </a>
  25. </li>
  26. <div class="nav-sep"></div>
  27. <li class="nav-item">
  28. <a href="https://github.com/jrtechs/github-graphs">
  29. View on GitHub
  30. </a>
  31. </li>
  32. <div class="nav-sep"></div>
  33. <li class="nav-item">
  34. <a href="./about.html">
  35. About
  36. </a>
  37. </li>
  38. </ul>
  39. </div>
  40. </div>
  41. <div class="main container">
  42. <div id="search-bar">
  43. <div class="row align-items-center text-center">
  44. <div class="search-title">
  45. <h1 id="search" class="m-title">Search GitHub:</h1>
  46. </div>
  47. <div class="col search-col">
  48. <form class="search-form">
  49. <input class="rounder form-control mr-sm-1" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search">
  50. </form>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="card-deck text-center">
  55. <div class="card rounder">
  56. <div class="card-header">
  57. <h1 class="m-title">Interactive Friends Chart</h1>
  58. </div>
  59. <div class="card-body">
  60. <p>
  61. Creates a web chart of the selected user and
  62. both their followers and anyone they are following
  63. themselves.
  64. </p>
  65. <button class="btn btn-outline-success rounder my-2 my-sm-0" onclick='fetchUserInput()' type='button'>Generate</button>
  66. </div>
  67. </div>
  68. <div class="card rounder">
  69. <div class="card-header">
  70. <h1 class="m-title">Repo Timeline</h1>
  71. </div>
  72. <div class="card-body">
  73. <p>
  74. Displays a timeline of every repo belonging
  75. to the selected user in chronological order,
  76. along with information pertaining to each repo.
  77. </p>
  78. <button class="btn btn-outline-success rounder my-2 my-sm-0" onclick='fetchUserInput()' type='button'>Generate</button>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. </body>
  84. </html>