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>
		<svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
			{# <defs>
			<filter id="turb3">
				<feColorMatrix type="saturate" values="1" />
				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
			</filter>
			<symbol id="triangle-5">
				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
			</symbol>
		</defs>
		<g>
			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
		</g> #}
			<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
			<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
			<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
			<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
			<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
			<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
			<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
			<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
			<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
		</svg>
		{# <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 %}