Added page for storage device info

assets/coffee/storage.coffee

@@ -0,0 +1,41 @@
+si = require('systeminformation')
+
+window.onload = () ->
+  # Set the option selector to trigger an info grab on element change
+  document.getElementById('diskSelector').addEventListener('change', () ->
+    updateDiskInfo(@value)
+  )
+
+  # Load GPUs into the selector
+  loadDisks()
+
+  # Run the updateGpuInfo function with the default value of 0
+  updateDiskInfo()
+
+loadDisks = () ->
+  si.diskLayout()
+    .then((data) ->
+      console.log(data)
+      i = 0
+      while i < data.length
+        optionElem = document.createElement('option')
+        diskName = data[i].name + '(' + data[i].device + ')'
+        optionElem.innerText = diskName
+        optionElem.setAttribute('value', i)
+        document.getElementById('diskSelector').appendChild(optionElem)
+        i++
+    ).catch((error) ->
+      console.error(error)
+    )
+
+updateDiskInfo = (diskId = 0) ->
+  si.diskLayout()
+    .then((data) ->
+      document.getElementById('diskInfo').innerText = data[diskId].name
+      document.getElementById('diskPath').innerText = data[diskId].device
+      document.getElementById('diskType').innerText = data[diskId].type
+      document.getElementById('diskSize').innerText = formatBytes(data[diskId].size)
+      document.getElementById('diskVendor').innerText = data[diskId].vendor
+    ).catch((error) ->
+      console.error(error)
+    )

assets/twig/index.twig

@@ -32,6 +32,14 @@
       <p class="u-text-center">Memory</p>
     </a>
   </div>
+
+  <!-- Storage devices page link -->
+  <div class="columns six u-text-center">
+    <a href="storage.html" class="pageLink">
+      <i class="fa-solid fa-hard-drive"></i>
+      <p class="u-text-center">Storage devices</p>
+    </a>
+  </div>
 </section>
 
 {% endblock %}

assets/twig/storage.twig

@@ -0,0 +1,46 @@
+{% extends 'layout.twig' %}
+
+{% block scripts %}
+<script src="./js/storage.js" charset="utf-8"></script>
+{% endblock %}
+
+{% block content %}
+
+<header class="row">
+  <div class="columns twelve u-text-center">
+    <h1>Storage Device Info</h1>
+    <select id="diskSelector"></select>
+  </div>
+</header>
+
+<section class="row">
+  <h5>Device Model: <span id="diskInfo">Loading...</span></h5>
+  <table class="hardware-info">
+    <tbody>
+      <tr>
+        <td>Disk Path</td>
+        <td><span id="diskPath">N/a</span></td>
+      </tr>
+      <tr>
+        <td>Device Type</td>
+        <td><span id="diskType">N/a</span></td>
+      </tr>
+      <tr>
+        <td>Capacity</td>
+        <td><span id="diskSize">N/a</span></td>
+      </tr>
+      <tr>
+        <td>Vendor</td>
+        <td><span id="diskVendor">N/a</span></td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+<section class="row">
+  <div class="columns twelve">
+    <a href="index.html">Back</a>
+  </div>
+</section>
+
+{% endblock %}