Personal blog written from scratch using Node.js, Bootstrap, and MySQL. https://jrtechs.net
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.

223 lines
10 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Jrtechs Steam Friend Graph Project</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8. <link rel="stylesheet" href="css/bootstrap.css" media="screen">
  9. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  10. <link rel="apple-touch-icon" sizes="180x180" href="./img/favicon/apple-touch-icon.png">
  11. <link rel="icon" type="image/png" sizes="32x32" href="./img/favicon/favicon-32x32.png">
  12. <link rel="icon" type="image/png" sizes="16x16" href="./img/favicon/favicon-16x16.png">
  13. <link rel="manifest" href="./img/favicon/site.webmanifest">
  14. <link rel="mask-icon" href="./img/favicon/safari-pinned-tab.svg" color="#5bbad5">
  15. <meta name="msapplication-TileColor" content="#da532c">
  16. <meta name="theme-color" content="#498FBE">
  17. </head>
  18. <body>
  19. <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
  20. <div class="container">
  21. <a class="navbar-brand" href="#">Steam Graph Project</a>
  22. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  23. <span class="navbar-toggler-icon"></span>
  24. </button>
  25. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  26. <ul class="navbar-nav mr-auto">
  27. <li class="nav-item">
  28. <a class="nav-link" href="index.html">Home</a>
  29. </li>
  30. <li class="nav-item active">
  31. <a class="nav-link" href="graphs.html">Graphs<span class="sr-only">(current)</span></a>
  32. </li>
  33. <!--<li class="nav-item">-->
  34. <!--<a class="nav-link" href="profile.html">Profile Look-Up</a>-->
  35. <!--</li>-->
  36. <li class="nav-item">
  37. <a class="nav-link" href="faq.html">FAQ</a>
  38. </li>
  39. </ul>
  40. <ul class="nav navbar-nav navbar-right">
  41. <li>
  42. <a class="nav-link" href="https://jrtechs.net">Blog</a>
  43. </li>
  44. <li>
  45. <a class="nav-link" href="https://jrtechs.me">Resume</a>
  46. </li>
  47. <li>
  48. <a class="nav-link" href="https://github.com/jrtechs">Github</a>
  49. </li>
  50. </ul>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="container">
  55. <br><br><br>
  56. <div class="row">
  57. <div class="col-8">
  58. <div class="card mb-3">
  59. <div class="card-header"><h2>How To Make a Graph</h2></div>
  60. <div class="card-body">
  61. <h4>Overview</h4>
  62. <p class="card-text">Using the form on this page, you enter your steamID and select the
  63. graph type you wish to use and then press generate. This will take you to a
  64. new page where your graph will render. Rendering will take between 1-4 minutes depending
  65. on how many friends you have on your graph. Once all the friends are on the graph, it will
  66. shake bringing it to its "final form".</p>
  67. <h4>SteamID</h4>
  68. <p>
  69. Every steam user has an unique ID. This is NOT your username.
  70. If you have steam open, simply click on the profile which you would like to view
  71. from your friends list. The steam ID will be in the url that appears in the steam
  72. browser.
  73. <br>
  74. <img src="img/faq/steamIdOption2.png" alt="Steam id in steam browser">
  75. </p>
  76. <h4>Graph Types</h4>
  77. <ul>
  78. <li>
  79. <h5>Friends of Friends Graph</h5>
  80. <p>
  81. This graph will display all of your friends in addition to all of their friends.
  82. <br>ex:<br>
  83. <img src="img/jrtechs1.png" alt="friends of friends steam graph" width="100%">
  84. </p>
  85. </li>
  86. <li>
  87. <h5>Common Friends Graph</h5>
  88. <p>
  89. This graph will only display your friends, however, it will draw edges between your friends
  90. if they are friends with each other.
  91. <br>ex:<br>
  92. <img src="img/jrtechs2.png" alt="Common friends steam graph" width="100%">
  93. </p>
  94. </li>
  95. </ul>
  96. </div>
  97. </div>
  98. </div>
  99. <div class="col-4">
  100. <div class="card w-100" style="width: 18rem; background-color:#455660;">
  101. <img class="card-img-top" src="img/banner2.png">
  102. <div class="card-body">
  103. <form action="graph.html" method="get">
  104. <div class="form-group row">
  105. <!--<label for="idID" class="col-sm-2 col-form-label">Steam ID</label>-->
  106. <div class="col">
  107. <input type="text" class="form-control" id="idID" placeholder="Steam ID" name="id">
  108. </div>
  109. </div>
  110. <div class="form-group row">
  111. <!--<label for="graphId" class="col-sm-2 col-form-label">Graph Type</label>-->
  112. <div class="col">
  113. <select class="custom-select mb-3" id="graphId" name="graph">
  114. <option value="1">Friends of Friends Graph</option>
  115. <option value="2">Common Friends Graph</option>
  116. </select>
  117. </div>
  118. </div>
  119. <div class="form-group row w-100">
  120. <div class="col text-center">
  121. <button type="submit" class="btn btn-light btn-lg">Generate Steam Graph</button>
  122. </div>
  123. </div>
  124. </form>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. <br>
  130. </div>
  131. <!-
  132. ┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
  133. ┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
  134. ╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
  135. ▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
  136. ▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
  137. ╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
  138. ┈╲┈┈▏╭━━━━╯▕▕┈┈┈
  139. ┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
  140. ┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
  141. ┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
  142. ┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
  143. ┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
  144. ┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
  145. ┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
  146. ┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
  147. ┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
  148. If you are seeing this monkey that means that you are interested in my
  149. code. Yay!! If you are not here to hack me ... you should really consider
  150. contributing to some of my public projects on github.
  151. https://github.com/jrtechs
  152. -->
  153. <!-- Footer -->
  154. <footer class="text-center">
  155. <div class="footer-above">
  156. <div class="container">
  157. <div class="row">
  158. <div class="footer-col col-md-4">
  159. <h3>Location</h3>
  160. <p>Rochester Institute of Technology
  161. <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
  162. </div>
  163. <div class="footer-col col-md-4">
  164. <h3>Around the Web</h3>
  165. <ul class="list-inline">
  166. <li class="list-inline-item">
  167. <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
  168. <i class="fa fa-fw fa-youtube"></i>
  169. </a>
  170. </li>
  171. <li class="list-inline-item">
  172. <a class="btn-social btn-outline" href="https://github.com/jrtechs">
  173. <i class="fa fa-fw fa-github"></i>
  174. </a>
  175. </li>
  176. <li class="list-inline-item">
  177. <a class="btn-social btn-outline" href="http://jrtechs.net">
  178. <i class="fa fa-fw fa-wordpress"></i>
  179. </a>
  180. </li>
  181. </ul>
  182. </div>
  183. <div class="footer-col col-md-4">
  184. <h3>About This Website</h3>
  185. <p>Check out the source code for this website on my
  186. <a href="https://github.com/jrtechs">github</a>.</p>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. <div class="footer-below">
  192. <div class="container">
  193. <div class="row">
  194. <div class="col-lg-12">
  195. <p class="m-0 text-center text-white"><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA 4.0</a> <script type="text/javascript">
  196. document.write(new Date().getFullYear());
  197. </script> Jrtechs</p>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. </footer>
  203. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  204. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  205. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  206. </body>
  207. </html>