<!DOCTYPE html>
<html>
<head>
<h1 style="color: #f1fa8c;">Dashboard</h1>
<title>Home Page</title>
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
</head>
<body style="background-color: #282a36">

<div id="main-text">
  <h3 style="text-align: center"><br>&nbsp;&nbsp;Select an option.</h3>
  <p style="text-align: center; margin-left: auto; margin-right: auto; width: 85%; font-size: 21px;">Select "Graph the data" if you want to see a live graph of the data coming from the headset, or select "Play" to play the "game".</p>
  <div id="row-0">
    <figure>
      <a href="play"><img style="border: 7px solid rgba(235, 235, 255, .3); border-radius: 12px; box-shadow: 10px 5px 5px rgba(0, 0, 0, .3);" height=230px; src="{{url_for('static', filename='images/play.jpeg')}}"/></a>
      <figcaption style="font-size: 19px; font-weight: bold;">Play</figcaption>
    </figure>
      <figure>
      <a href="graph"><img style="border: 7px solid rgba(235, 235, 255, .3); border-radius: 12px; box-shadow: 10px 5px 5px rgba(0, 0, 0, .3);" height=230px; src="{{url_for('static', filename='images/graph.jpg')}}"/></a>
      <figcaption style="font-size: 19px; font-weight: bold;">Graph the data</figcaption>
      </figure>
  </div>
    <div id="row-1">
      <figure>
        <a href="open-sussy"><img style="border: 7px solid rgba(235, 235, 255, .3); border-radius: 12px; box-shadow: 10px 5px 5px rgba(0, 0, 0, .3);" height=230px; src="{{url_for('static', filename='images/OS-LOGO-W-Header.png')}}"/></a>
        <figcaption style="font-size: 19px; font-weight: bold;">Open Sauce Mode</figcaption>
        </figure>
      <!-- <figure style="margin-top: 14px;">
		<p style="position: relative; top: 50%; left: 50%; font-size: 21px; font-weight: bold; color: #f1fa8c; transform: translate(-50%, -50%); z-index: 1; background-color:rgba(68, 71, 90, 0.7);">Not finished yet!</p>
        <img style="opacity: 0.7; filter: alpha(opacity=70); border: 7px solid rgba(235, 235, 255, .3); border-radius: 12px; box-shadow: 10px 5px 5px rgba(0, 0, 0, .3);" height=230px; src="images/research.jpg"/>
        <figcaption style="opacity: 0.7; filter: alpha(opacity=70); font-size: 18px; font-weight: bold;">Research</figcaption>
      </figure>
      <figure>
		<p style="position: relative; top: 50%; left: 50%; font-size: 21px; font-weight: bold; color: #f1fa8c; transform: translate(-50%, -50%); z-index: 1; background-color:rgba(68, 71, 90, 0.7);">Not finished yet!</p>
        <img style="opacity: 0.7; filter: alpha(opacity=70); border: 7px solid rgba(235, 235, 255, .3); border-radius: 12px; box-shadow: 10px 5px 5px rgba(0, 0, 0, .3);" height=230px; src="images/nuclear-symbol.jpg"/>
        <figcaption style="opacity: 0.7; filter: alpha(opacity=70); font-size: 19px; font-weight: bold;">Public Perception/Debate</figcaption>
      </figure>
  </div> -->
</div>
<footer>
<p style="font-family: Arial, Helvetica, sans-serif; color: #f1fa8c; bottom: 0;">Made by James Hoffman</p>
</footer>
</body>