hippie/source/screens/demo/examples/card.njk

---
title: Card
tags:
  - demoExample
---
{% set pageId = page.fileSlug %}
{% set pageClass = "html_card" %}

{% extends "demo/_default.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}

{% block title %}{{ title }}
{% endblock %}

{% block head %}
	{{ super() }}
{% endblock %}

{% block body %}

	<!-- {{ page.fileSlug }}.page -->
	<div class="card_bkg">
		<div id="dither"></div>
		{{ ph.flag('svg', '', 'flag', '') }}
		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
	</div>
	<div class="card_box">
		<div id="js_content">
			<p>Titel<br/>und Beschreibung</p>
			<h1>{{ ph.name() }}</h1>
			<p>
				{{ ph.email('card_address') }}<br/>
				{{ ph.link('decent', 'site.tld') }}
				&middot;
				{{ ph.address('decent') }}</p>
		</div>
	</div>
{% endblock %}

{% block script %}
	<script>
		const flag = document.getElementById("flag");
		let colors = new Array();
		let iId = undefined;
		let position = 0;

		for (let i = 1; i <= flag.childElementCount; i++) {
			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
		}

		// console.log(colors);

		document
			.getElementById('js_content')
			.addEventListener('mouseenter', () => {
				iId = setInterval(() => {
					for (let i = 1; i <= colors.length; i++) {
						position++;

						if (position >= colors.length) {
							position = 0;
						}

						document
							.getElementById("triangle-" + i)
							.setAttribute("fill", colors[position]);
					}

					position++;

					if (position >= colors.length) {
						position = 0;
					}
				}, 600);
			});

		document
			.getElementById('js_content')
			.addEventListener('mouseleave', () => {
				iId && clearInterval(iId);
			});
	</script>
{% endblock %}