|
|
|
@ -47,32 +47,85 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="container"> |
|
|
|
<div class="jumbotron"> |
|
|
|
<h1 class="text-center">Generate a graph</h1><br> |
|
|
|
<form action="graph.html" method="get"> |
|
|
|
<div class="form-group row"> |
|
|
|
<label for="idID" class="col-sm-2 col-form-label">Steam ID</label> |
|
|
|
<div class="col-sm-10"> |
|
|
|
<input type="text" class="form-control" id="idID" placeholder="Steam ID" name="id"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="form-group row"> |
|
|
|
<label for="graphId" class="col-sm-2 col-form-label">Graph Type</label> |
|
|
|
<div class="col-sm-10"> |
|
|
|
<select class="custom-select mb-3" id="graphId" name="graph"> |
|
|
|
<option value="1">Friends of Friends</option> |
|
|
|
<option value="2">Friends with Friends</option> |
|
|
|
</select> |
|
|
|
<br><br><br> |
|
|
|
|
|
|
|
<div class="row"> |
|
|
|
|
|
|
|
<div class="col-8"> |
|
|
|
<div class="card mb-3"> |
|
|
|
<div class="card-header"><h2>How To Make a Graph</h2></div> |
|
|
|
<div class="card-body"> |
|
|
|
<h4>Overview</h4> |
|
|
|
<p class="card-text">Using the form on this page, you enter your steamID and select the |
|
|
|
graph type you wish to use and then press generate. This will take you to a |
|
|
|
new page where your graph will render. Rendering will take between 1-4 minutes depending |
|
|
|
on how many friends you have on your graph. Once all the friends are on the graph, it will |
|
|
|
shake bringing it to its "final form".</p> |
|
|
|
<h4>SteamID</h4> |
|
|
|
<p> |
|
|
|
Every steam user has an unique ID. This is NOT your username. |
|
|
|
If you have steam open, simply click on the profile which you would like to view |
|
|
|
from your friends list. The steam ID will be in the url that appears in the steam |
|
|
|
browser. |
|
|
|
<br> |
|
|
|
<img src="img/faq/steamIdOption2.png" alt="Steam id in steam browser"> |
|
|
|
</p> |
|
|
|
<h4>Graph Types</h4> |
|
|
|
<ul> |
|
|
|
<li> |
|
|
|
<h5>Friends of Friends Graph</h5> |
|
|
|
<p> |
|
|
|
This graph will display all of your friends in addition to all of their friends. |
|
|
|
<br>ex:<br> |
|
|
|
<img src="img/jrtechs1.png" alt="friends of friends steam graph" width="100%"> |
|
|
|
</p> |
|
|
|
|
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<h5>Common Friends Graph</h5> |
|
|
|
<p> |
|
|
|
This graph will only display your friends, however, it will draw edges between your friends |
|
|
|
if they are friends with each other. |
|
|
|
<br>ex:<br> |
|
|
|
<img src="img/jrtechs2.png" alt="Common friends steam graph" width="100%"> |
|
|
|
</p> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="form-group row"> |
|
|
|
<div class="col-sm-10"> |
|
|
|
<button type="submit" class="btn btn-primary">Graph!</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="col-4"> |
|
|
|
<div class="card w-100" style="width: 18rem; background-color:#455660;"> |
|
|
|
<img class="card-img-top" src="img/banner2.png"> |
|
|
|
<div class="card-body"> |
|
|
|
<form action="graph.html" method="get"> |
|
|
|
<div class="form-group row"> |
|
|
|
<!--<label for="idID" class="col-sm-2 col-form-label">Steam ID</label>--> |
|
|
|
<div class="col"> |
|
|
|
<input type="text" class="form-control" id="idID" placeholder="Steam ID" name="id"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="form-group row"> |
|
|
|
<!--<label for="graphId" class="col-sm-2 col-form-label">Graph Type</label>--> |
|
|
|
<div class="col"> |
|
|
|
<select class="custom-select mb-3" id="graphId" name="graph"> |
|
|
|
<option value="1">Friends of Friends Graph</option> |
|
|
|
<option value="2">Common Friends Graph</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="form-group row w-100"> |
|
|
|
<div class="col text-center"> |
|
|
|
<button type="submit" class="btn btn-light btn-lg">Generate Steam Graph</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<br> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
