public/features.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/jmu.ico" type="image/x-icon">
  <title>Praxly: Features</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      display: flex;
      flex-wrap: wrap;
    }

    h2 {
      color: #333;
      flex: 1 100%;
    }

    h5 {
      color: #666;
      flex: 1 100%;
    }

    table {
      border-collapse: collapse;
      width: 100%;
    }

    th {
      background-color: #f2f2f2;
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }

    td {
      border: 1px solid #dddddd;
      padding: 8px;
    }

    .completed {
      color: white;
      background-color: purple;
      border-radius: 5px;
      padding: 3px 6px;
    }

    .upgraded {
      color: white;
      background-color: blue;
      border-radius: 5px;
      padding: 3px 6px;
    }

    .unlikely-change {
      color: white;
      background-color: green;
      border-radius: 5px;
      padding: 3px 6px;
    }

    .active-development {
      color: white;
      background-color: rgb(160, 160, 3);
      border-radius: 5px;
      padding: 3px 6px;
    }

    .near-future {
      color: white;
      background-color: orange;
      border-radius: 5px;
      padding: 3px 6px;
    }

    .uncertain {
      color: white;
      background-color: red;
      border-radius: 5px;
      padding: 3px 6px;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 20px;
      padding: 10px;
      background-color: #c2c2c2;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 100%;
    }

    .legend-item {
      display: inline-block;
      margin-right: 20px;
    }
  </style>
</head>
<body>

  <div>
    <h2>Completed Features</h2>
    <h5>The following are features that are considered to be working:</h5>
    <div class="legend">
      <div class="legend-item">
        <span class="completed">Purple</span> - Stable but unfinished
      </div>
      <div class="legend-item">
        <span class="upgraded">Blue</span> - Finished but will be upgraded soon
      </div>
      <div class="legend-item">
        <span class="unlikely-change">Green</span> - Finished and unlikely to change
      </div>
    </div>
  </div>

  <table>
    <tr>
      <th>Feature Name</th>
      <th>Feature Description</th>
    </tr>
    <tr>
      <td><span class="unlikely-change">Arrays</span></td>
      <td>1d arrays are here!</td>
    </tr>
    <tr>
      <td><span class="unlikely-change">Example Code</span></td>
      <td>have links to example code with explanations of how it works</td>
    </tr>
    <tr>
      <td><span class="unlikely-change">Manual</span></td>
      <td>button for referencing the documentation</td>
    </tr>
    <tr>
      <td><span class="upgraded">Error Messages</span></td>
      <td>These are taking much longer than I thought they would. the Highlighting seems a bit inconsistent.</td>
    </tr>
    <tr>
      <td><span class="completed">Live Updates block generation</span></td>
      <td>Whenever you text in the code editor, the blocks will be built in real time.
          If the text is not enough to generate a valid block, Praxly will take it's best guess.</td>
    </tr>
    <tr>
      <td><span class="completed">Text Generation from blocks</span></td>
      <td>When blocks are dragged onto the blockly section, the corresponding text is generated.</td>
    </tr>
    <tr>
      <td><span class="unlikely-change">Share URL</span></td>
      <td>There is a share button that can be used to copy the URL that can load the blocks/text to anyone with the link.</td>
    </tr>
    <tr>
      <td><span class="completed">Running basic code</span></td>
      <td>all of the blocks in the current build that you can see <i>should</i> be in full working order.</td>
    </tr>
    <tr>
      <td><span class="unlikely-change">Dark Mode</span></td>
      <td>Dark mode button for ease on the eyes at night.</td>
    </tr>
    <tr>
      <td><span class="unlikely-change">if statements</span></td>
      <td>supports all blocks in the logic category</td>
    </tr>
    <tr>
      <td><span class="upgraded">Scope</span></td>
      <td>Different Scopes supported for functions and parameters not being global.</td>
    </tr>
    <tr>
      <td><span class="upgraded">Functions</span></td>
      <td>User-defined functions (called procedures) that can be called</td>
    </tr>
    <tr>
      <td><span class="upgraded">Feedback Link</span></td>
      <td>user feedback place to communicate anonymously about any issues with the platform</td>
    </tr>
  </table>

  <div>
    <h2>Future Features</h2>
    <h5>The following are features that are planned for the future:</h5>
    <div class="legend">
      <div class="legend-item">
        <span class="active-development">Yellow</span> - In active development
      </div>
      <div class="legend-item">
        <span class="near-future">Orange</span> - Planned to be added in the near future
      </div>
      <div class="legend-item">
        <span class="uncertain">Red</span> - Feature may or may not happen
      </div>
    </div>
  </div>

  <table>
    <tr>
      <th>Feature Name</th>
      <th>Feature Description</th>
    </tr>
    <tr>
      <td><span class="near-future">Classes</span></td>
      <td>Object oriented programming will be quite difficult. Inheritance will also be tricky.</td>
    </tr>
    <tr>
      <td><span class="active-development">Help Menu</span></td>
      <td>A tutorial on what Praxly is and how to use it.</td>
    </tr>
    <tr>
      <td><span class="near-future">Save Drafts</span></td>
      <td>This have drafts of the last thing you typed that day stored on the browser's localStorage.</td>
    </tr>
    <tr>
      <td><span class="uncertain">Debugger</span></td>
      <td>Some sort of slower step execution in order to help visualize the running process.</td>
    </tr>
  </table>

</body>
</html>