Add ANU SII demo apps

apps.html

@@ -33,8 +33,10 @@ <h2 id="app_launcher" property="name">App Launcher</h2>
         <select id="category-filter">
           <option value="all">All Categories</option>
           <option value="Cooking">Cooking</option>
+          <option value="Health">Health</option>
           <option value="Movies">Movies</option>
           <option value="Content, Notes, Blogging and Publishing">Content, Notes, Blogging and Publishing</option>
+          <option value="Productivity">Productivity</option>
           <option value="Pod Management">Pod Management</option>
           <option value="TODO List">TODO List</option>
         </select>
@@ -47,6 +49,23 @@ <h2 id="app_launcher" property="name">App Launcher</h2>
         </label>
       </div>
     </div>
+    <style>
+      /* Keep inline links inside app descriptions on the same line */
+      #apps-list li p a {
+        display: inline !important;
+        vertical-align: baseline;
+      }
+      /* Style for inline external link replacement inside tiles */
+      #apps-list .external-link {
+        text-decoration: underline;
+        cursor: pointer;
+        color: var(--link-color, #1a73e8);
+      }
+      #apps-list .external-link:focus {
+        outline: 2px solid #1a73e8;
+        outline-offset: 2px;
+      }
+    </style>
     <ul class="tiles tile-links" id="apps-list">
       <li data-name="Media Kraken" data-category="Movies">
         <a href="https://noeldemartin.github.io/media-kraken/">
@@ -135,6 +154,33 @@ <h3>Solidflix</h3>
           <p>A movie tracking and sharing app with personalised recommendations by Oxford Human Centred Computing Group.</p>
         </a>
       </li>
+      <li data-name="NotePod" data-category="Productivity">
+        <a href="https://notepod.solidcommunity.au">
+          <div class="tile-header">
+            <img alt="NotePod logo" src="/assets/img/logo/notepod.png"/>
+            <h3>NotePod</h3>
+          </div>
+        <p>Private and shareable note taking app with encryption. Built by the Software Innovation Institute, ANU. Desktop build available <span class="external-link" role="link" tabindex="0" aria-label="Open desktop build on GitHub" onclick="event.preventDefault(); event.stopPropagation(); window.location.assign('https://github.com/anusii/notepod'); return false;" onkeydown="if(event.key==='Enter'||event.key===' '){ event.preventDefault(); event.stopPropagation(); window.location.assign('https://github.com/anusii/notepod'); }">here</span>.</p>
+        </a>
+      </li>
+      <li data-name="HealthPod" data-category="Health">
+        <a href="https://healthpod.solidcommunity.au">
+          <div class="tile-header">
+            <img alt="HealthPod logo" src="/assets/img/logo/healthpod.svg"/>
+            <h3>HealthPod</h3>
+          </div>
+        <p>Manage your health data, with support for encrypted data. Built by the Software Innovation Institute, ANU. Desktop build available <span class="external-link" role="link" tabindex="0" aria-label="Open HealthPod desktop build on GitHub" onclick="event.preventDefault(); event.stopPropagation(); window.location.assign('https://github.com/anusii/healthpod'); return false;" onkeydown="if(event.key==='Enter'||event.key===' '){ event.preventDefault(); event.stopPropagation(); window.location.assign('https://github.com/anusii/healthpod'); }">here</span>.</p>
+        </a>
+      <li data-name="MovieStar" data-category="Movies">
+        <a href="https://moviestar.solidcommunity.au">
+          <div class="tile-header">
+            <img alt="MovieStar logo" src="/assets/img/logo/moviestar.png"/>
+            <h3>MovieStar</h3>
+          </div>
+          <p>Track your movie and TV watching and ranking, share with
+          others, and receive recommendations, with support for encrypted data. Built by the Software Innovation Institute, ANU. Desktop build available <span class="external-link" role="link" tabindex="0" aria-label="Open MovieStar desktop build on GitHub" onclick="event.preventDefault(); event.stopPropagation(); window.location.assign('https://github.com/anusii/moviestar'); return false;" onkeydown="if(event.key==='Enter'||event.key===' '){ event.preventDefault(); event.stopPropagation(); window.location.assign('https://github.com/anusii/moviestar'); }">here</span>.</p>
+        </a>
+      </li>
     </ul>
 
     <details class="details-box">

get_a_pod.html

@@ -91,6 +91,26 @@ <h3 id="solidcommunity_net">solidcommunity.net</h3>
         </dd>
       </dl>
     </li>
+    <li>
+      <div class="tile-header">
+        <img src="/assets/img/logo/solidcommunity-au.svg" alt="solidcommunity.au logo" />
+        <h3 id="solidcommunity_au">solidcommunity.au</h3>
+      </div>
+      <dl>
+        <dt>Get a Pod</dt>
+        <dd>
+          <a href="https://pods.solidcommunity.au/">https://pods.solidcommunity.au/</a>
+        </dd>
+        <dt>Organization</dt>
+        <dd>
+          <a href="https://solidcommunity.au/">Solid Community AU</a>
+        </dd>
+        <dt>Hosting Location</dt>
+        <dd>
+          <a href="https://en.wikipedia.org/wiki/Australia">Australia</a>
+        </dd>
+      </dl>
+    </li>
     <li>
       <div class="tile-header">
         <img alt="me is data logo" src="/assets/img/logo/me-is-data.jpg" />