Browse Source

Updated graphs page to be more intuitive and explain how to use the application.

pull/8/head
jrtechs 6 years ago
parent
commit
ec45c6356a
5 changed files with 74 additions and 21 deletions
  1. +74
    -21
      website/graphs.html
  2. BIN
      website/img/banner.png
  3. BIN
      website/img/banner2.png
  4. BIN
      website/img/jrtechs1.png
  5. BIN
      website/img/jrtechs2.png

+ 74
- 21
website/graphs.html View File

@ -47,32 +47,85 @@
</div> </div>
<div class="container"> <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> </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>
</div> </div>
</form>
</div>
</div> </div>
<br>
</div> </div>

BIN
website/img/banner.png View File

Before After
Width: 669  |  Height: 233  |  Size: 153 KiB

BIN
website/img/banner2.png View File

Before After
Width: 1878  |  Height: 556  |  Size: 332 KiB

BIN
website/img/jrtechs1.png View File

Before After
Width: 1251  |  Height: 944  |  Size: 608 KiB

BIN
website/img/jrtechs2.png View File

Before After
Width: 1262  |  Height: 926  |  Size: 466 KiB

Loading…
Cancel
Save