Add first work for masto news and update public coropora page

app/templates/corpora/corpora.html.j2

 {% extends "base.html.j2" %}
 
 {% block page_content %}
-<div class="container">
-  <div class="row">
-    <div class="col s12">
-      <h1 id="title">{{ title }}</h1>
+<div class="parallax-container">
+  <div class="parallax"><img src="{{ url_for('static', filename='images/parallax_hq/canvas.png') }}"></div>
+  <div style="position: absolute; bottom: 0; width: 100%;">
+    <div class="container">
+      <div class="white-text">
+        <h1 id="title"><i class="nopaque-icons" style="font-size: inherit;">I</i>Corpora</h1>
+      </div>
+      <div class="white" style="padding: 0 15px; border-radius: 20px;">
+        <form>
+          <div class="input-field">
+            <i class="material-icons prefix">search</i>
+            <input id="search" placeholder="Find public corpora" type="text">
+          </div>
+        </form>
+      </div>
     </div>
+  </div>
+</div>
+
 
+<div class="container">
+  <div class="row">
     <div class="col s12" id="corpora">
       <div class="card">
         <div class="card-content">

app/templates/main/news.html.j2

@@ -9,6 +9,8 @@
     </div>
 
     <div class="col s12">
+      <div id="mastodon"></div>
+
       <div class="card" id="april-2022-update">
         <div class="card-content">
           <span class="card-title">April 2022 update</span>
@@ -126,3 +128,33 @@
   </div>
 </div>
 {% endblock page_content %}
+
+{% block scripts %}
+{{ super() }}
+<script>
+  let mastodonElement = document.querySelector('#mastodon');
+  fetch(`https://fedihum.org/api/v1/accounts/109386364241901080/statuses`, {method: 'GET', headers: {Accept: 'application/json'}})
+    .then((response) => {return response.json();})
+    .then((statuses) => {
+      for (let status of statuses) {
+        console.log(status);
+        let contentHtml = `<div>${status.content}</div>`
+        let tagsHtml = '<p>';
+        for (let tag of status.tags) {
+          tagsHtml += `<a href="${tag.url}" class="chip">${tag.name}</a>`;
+        }
+        tagsHtml += '</p>';
+        let statusHtml = `
+          <div id="${status.id}" class="card">
+            <div class="card-content">
+              <span class="card-title">Mastodon News</span>
+              ${contentHtml}
+              ${tagsHtml}
+            </div>
+          </div>
+        `;
+        mastodonElement.insertAdjacentHTML('beforeend', statusHtml);
+      }
+    });
+</script>
+{% endblock scripts %}