homepage/homepage/home/templates/mastodon.html

34 lines
1.4 KiB
HTML

{% load static %}
<div class="flex flex-col">
<div class="grow min-h-[50vh] grid grid-cols-1 gap-4 place-content-center text-center p-10 text-slate-800 dark:text-white dark:bg-mastodon-dark-bg bg-white">
<p class="text-base">Über den Service <a href="https://www.mastofeed.com">www.mastofeed.com</a> wird mein Mastodon-Profil eingebunden.</p>
<button id="btnMastodonAktiv" class="bg-petrol-500 text-white py-2 px-6 hover:scale-105 transition hover:bg-main-icon">Mastodon einbinden</button>
</div>
<iframe id="mastodonIfram" class="grow min-h-[50vh] hidden" allowfullscreen sandbox="allow-top-navigation allow-scripts"
src=""></iframe>
<div
class="py-2 text-center text-sm font-bold bg-white border-t border-solid border-slate-500 text-slate-800 dark:text-white dark:bg-mastodon-dark-bg">
<a rel="me" href="https://ruhr.social/@average" target="_blank">
./09_MASTODON PROFIL
</a>
</div>
</div>
<script>
document.getElementById('btnMastodonAktiv').addEventListener("click", activateMastodon)
function activateMastodon(ev) {
ev.target.parentElement.classList.add('hidden')
let box = document.getElementById('mastodonIfram');
box.src = 'https://www.mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fruhr.social%2Fusers%2Faverage&theme=auto&size=100&header=false&replies=true&boosts=true';
box.classList.remove('hidden')
}
</script>