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

website/graphs.html

@@ -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>