hippie/source/screens/demo/examples/start.liquid

---
title: Start
tags:
- demoExample
---
{% assign pageId = page.fileSlug -%}
{% assign bodyClass = 'body_start' -%}
{% layout 'hippie/simple.liquid' %}

{% block body %}
{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
<main>
	<header class="io">
		<form id="wwwForm" class="group-input" action="https://duckduckgo.com/">
			<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
			<input class="button_io" value="Suchen" type="submit"/>
		</form>
		<nav>
			<hr class="vertical">
			<ul>
				<li>
					<a href="" class="a_button">A</a>
				</li>
				<li>
					<a href="" class="a_button">B</a>
				</li>
			</ul>
		</nav>
	</header>
	<div class="area">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
</main>
{% endblock %}

{% block assets %}
<script src="/vendor/hippie-script.js"></script>
<script src="/js/globals.js"></script>
<script src="/js/app.js"></script>
{% endblock %}

{% block script %}
<script>
	const timeElement = document.getElementById('time');
	const dateElement = document.getElementById('date');
	// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
	const defaultOptions = {
		kl: 'de-de',
		kp: '-2',
		kz: '-1',
		// kae: 't',
		k1: '-1'
	};
	let options = Object.assign({}, defaultOptions);

	function setOptions(jsonOptions) {
		if (!jsonOptions || typeof jsonOptions !== 'object') return;

		options = Object.assign({}, options, jsonOptions);
	}

	function buildSearchUrl(query) {
		const base = 'https://duckduckgo.com/';
		const params = new URLSearchParams({q: query});

		for (const [k, v] of Object.entries(options)) {
			if (v === undefined || v === null || v === '') continue;

			params.set(k, String(v));
		}

		return base + '?' + params.toString();
	}

	// Example of setting options programmatically:
	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });

	new TimeDisplay(timeElement, {hour: '2-digit', minute: '2-digit'});
	new DateDisplay(dateElement, {
		weekday: "long",
		year: "numeric",
		month: "long",
		day: "numeric",
	});
	// ongoing();

	document.addEventListener('mousemove', (event) => {
		document
			.getElementById('log')
			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
	});

	document.getElementById('wwwForm').addEventListener('submit', function (event) {
		event.preventDefault();
		const query = document.getElementById('qrySearch').value.trim();

		if (!query) return;

		const url = buildSearchUrl(query);

		window.open(url, '_blank', 'noopener');
	});

	function ongoing() {
		var now = new Date();
		var w = Math.floor(now.getDay());
		var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
		var DNumb = Math.floor(now.getDate());
		var MNumb = Math.floor(now.getMonth());
		var M = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
		var y = Math.floor(now.getYear());
		if (y < 999) y += 1900;

		var ms = Math.floor(now.getMilliseconds());
		var s = Math.floor(now.getSeconds());
		var m = Math.floor(now.getMinutes() + s / 60);
		var h = Math.floor(now.getHours() + m / 60);

		var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
		j2000.setUTCFullYear(2000, 0, 1);
		j2000.setUTCHours(0, 0, 0, 0);

		var utc = new Date();
		utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
		utc.setUTCHours(h, m, s, ms);

		var utc0 = new Date();
		utc0.setUTCFullYear(y, MNumb, DNumb);
		utc0.setUTCHours(0, 0, 0, 0);

		var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
		var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;

		var N = jd - 2451545.0;
		var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
		var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
		var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g);
		var e = 23.439 - 0.0000004 * N;
		var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el));

		var T = (jdUTC0 - 2451545.0) / 36525;
		var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600;

		var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
		var hWGMT = stGMT2 * 15;
		var hW = hWGMT + 11.9566185772;

		var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden
		var st24 = Math.abs(st - (Math.round(st / 24) * 24));
		var stH = Math.floor(st24);
		var stM = Math.floor((st24 % 1) * 60);
		var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);

		const travelWidth = document.body.clientWidth;
		const travelHeight = document.body.clientHeight;
		var sunPosX = 0;
		var sunPosY = 0;
		var moonPosX = 0;
		var moonPosY = 0;

		const sun = document.getElementById('sun');

		if (sun) {
			sun.style.left = (s / 60) * travelWidth;
			sun.style.top = (m / 60) * travelHeight;
		}

		/*document.getElementById('time').textContent = '' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2);
		document.getElementById('day').textContent = D[w];
		document.getElementById('dayNumb').textContent = DNumb;
		document.getElementById('month').textContent = M[MNumb];
		document.getElementById('year').textContent = y;

		document.getElementById('julian').textContent = jd.toFixed(6);
		document.getElementById('star').textContent = stH + ':' + stM + ':' + stS;
		document.getElementById('star').textContent = stH + ':' + stM;
		document.getElementById('star1').textContent = stGMT;
		document.getElementById('star2').textContent = stGMT2;*/
	}
</script>
{% endblock %}