diff --git a/app/static/images/parallax_hq/canvas.png b/app/static/images/parallax_hq/canvas.png new file mode 100644 index 0000000000000000000000000000000000000000..2bdbf0b60343234f0442914709806e56bafc838f Binary files /dev/null and b/app/static/images/parallax_hq/canvas.png differ diff --git a/app/templates/corpora/corpora.html.j2 b/app/templates/corpora/corpora.html.j2 index ee184a482bb4d372ace36d18ce5931d3fe4a859f..1a8766ab18d6e913a7654f484a88dfb5b23b7612 100644 --- a/app/templates/corpora/corpora.html.j2 +++ b/app/templates/corpora/corpora.html.j2 @@ -1,12 +1,28 @@ {% 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"> diff --git a/app/templates/main/news.html.j2 b/app/templates/main/news.html.j2 index cab57fa737daf80fc732a14b6427630054bdd7d7..b7204f0746a7ac23288cd0d0d25be611141aafe1 100644 --- a/app/templates/main/news.html.j2 +++ b/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 %}