interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Combine start and tile screens

Browse source 
- Combine start and tile content to start screen
- Remove tile screen
- Remove new css module
- Integrate style to start module
This commit is contained in:
sthag 2026-03-21 17:49:48 +01:00
parent ebed5a2d42
commit 2387e08ad0
10 changed files with 247 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

94
source/code/hippie/app.js
View file

@ -540,6 +540,15 @@ function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp =
return mapped;
}
function zeroFill(number, width) {
width -= number.toString().length;
if (width > 0) {
return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
}
return number + ''; // always return a string
}
// Source - https://stackoverflow.com/a/47480429
// Posted by Etienne Martin, modified by community. See post 'Timeline' for change history
// Retrieved 2026-03-08, License - CC BY-SA 4.0
@ -603,91 +612,6 @@ Clock.prototype.formatDigits = function (val) {
return val;
};
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', 'MaiOktober', '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);
var travelWidth = document.body.clientWidth;
var travelHeight = document.body.clientHeight;
var sunPosX = 0;
var sunPosY = 0;
var moonPosX = 0;
var moonPosY = 0;
var sun = $('#sun').css({
'left': (s / 60) * travelWidth,
'top': (m / 60) * travelHeight
});
$('#day').text(D[w]);
$('#dayNumb').text(DNumb);
$('#month').text(M[MNumb]);
$('#year').text(y);
$('#time').text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
$('#julian').text(jd.toFixed(6));
//$('#star').text(stH + ':' + stM + ':' + stS);
$('#star').text(stH + ':' + stM);
$('#star1').text(stGMT);
$('#star2').text(stGMT2);
}
function zeroFill(number, width) {
width -= number.toString().length;
if (width > 0) {
return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
}
return number + ''; // always return a string
}
//Länge der Balken im Diagram berechnen
function barwidth(size, G, W) {
var s = size;

8
source/screens/demo/basics.liquid
View file

@ -801,7 +801,7 @@ order: 2
<code>&lt;fieldset&gt;</code>
realisiert.</p>
<fieldset>
<div class="grid grid_column_2">
<div class="dis_grid grid_column_2">
<label for="demo__input">Input:</label><input class="input_io" type="text" value="love"
readonly="readonly" id="demo__input">
<label for="demo__output">Output:</label><input class="input_io" type="text" value="happiness"
@ -813,7 +813,7 @@ order: 2
auch eine eigene Beschriftung erhalten.</p>
<fieldset>
<legend>Einfache Eingabeelemente</legend>
<div class="grid grid_column_2">
<div class="dis_grid grid_column_2">
<label>Schaltflächen:</label>
<div>
<button>Senden</button>
@ -846,7 +846,7 @@ order: 2
</fieldset>
<fieldset>
<legend>Einfache Eingabeelemente mit Stil</legend>
<div class="grid grid_column_2">
<div class="dis_grid grid_column_2">
<label>Schaltflächen:</label>
<div class="flex inline">
<button class="button_io">Senden</button>
@ -883,7 +883,7 @@ order: 2
Information oder lockern das Erscheinungsbild auf.</p>
<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
<form action="">
<div class="grid grid_column_2">
<div class="dis_grid grid_column_2">
<label class="">Farbauswahl<br>
<code>&lt;input[type="color"]&gt;</code>
</label>

13
source/screens/demo/components.liquid
View file

@ -286,12 +286,17 @@ order: 3
<td style="width: 50%">Zelle mit Angabe der Breite.</td>
</tr>
</table>
<pre class="pre_code"><code>table.flexible>tr>td+td.truncate.ellipsis+td</code></pre>
<table class="flexible">
<pre class="pre_code"><code>table.grid>(tr>td+td.ellipsis+td)*2</code></pre>
<table class="grid">
<tr>
<td>Index</td>
<td class="truncate ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
<td>Zelle mit Angabe der Breite.</td>
<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
<td>Inhalt bestimmt die Breite</td>
</tr>
<tr>
<td>101</td>
<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
<td>Zelle</td>
</tr>
</table>
</article>

2
source/screens/demo/examples/game/index.liquid
View file

@ -6,8 +6,6 @@ tags:
---
{% layout 'hippie/simple.liquid' %}
{% block title %}{{ title }}{% endblock %}
{% block body %}
<div class="sec_main_center">
<nav role="doc-toc">

152
source/screens/demo/examples/start.liquid
View file

@ -8,34 +8,44 @@ tags:
{% layout 'hippie/simple.liquid' %}
{% block body %}
{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
<main>
<form id="www_search" class="flex inline" 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>
<div class="blocks">
<article>
<section>
<h2><a href="">Name</a></h2>
<ul>
<li>
<a href=""><img src="/art/bullet.gif" width="16" height="16"/>Link</a>
</li>
</ul>
</section>
</article>
<article>
<section>
<h2><a href="">Name</a></h2>
</section>
</article>
<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>
// Page 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',
@ -65,8 +75,26 @@ tags:
return base + '?' + params.toString();
}
document.getElementById('www_search').addEventListener('submit', function (e) {
e.preventDefault();
// 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;
@ -76,7 +104,81 @@ tags:
window.open(url, '_blank', 'noopener');
});
// Example of setting options programmatically:
// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
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 %}

45
source/screens/demo/examples/ui/tile.liquid
View file

@ -1,45 +0,0 @@
---
title: Tile
tags:
- ui
---
{% assign bodyClass = 'body_new' -%}
{% layout 'hippie/app.liquid' %}
{% block body %}
{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
<header class="area menu io">
<nav>
<ul>
<li>
<a href="" class="a_button">Func 1</a>
</li>
<li>
<a href="" class="a_button">Func 2</a>
</li>
</ul>
</nav>
</header>
<div class="area grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
{% endblock %}
{%- block script %}
{{ block.super -}}
<script>
const timeElement = document.getElementById('time');
const timeDisplay = new TimeDisplay(timeElement);
ongoing();
document.addEventListener('mousemove', (event) => {
document
.getElementById('log')
.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
});
</script>
{% endblock %}

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit 5b5944e22912d8c4c9bf7b7747a45fb80fea262a
Subproject commit 2ae30754f0ce21e0de1c229992f4ea1ae82730ba

98
source/style/modules/_start.scss
View file

@ -1,15 +1,111 @@
@use "sass:color";
@use "../hippie-style/hippie";
$module_top_height: 32px;
$body_top_space: $module_top_height + hippie.$space_basic;
.body_start {
@extend .h_full_view;
padding: $body_top_space hippie.$space_basic hippie.$space_basic;
main {
@extend .sec_main_center;
@extend %flex_column;
height: 100%;
}
#www_search {
form {
flex: 1;
input[type="text"] {
flex: 1;
padding: hippie.$padding_basic;
line-height: hippie.$line_text_basic;
}
}
.area {
display: grid;
grid-gap: hippie.$space_basic;
flex: 1;
// grid-template-rows: repeat(2, 1fr);
// grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a a";
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;
transition: hippie.$transition_best;
&:hover {
background-color: #999;
}
& > div {
// height: unset;
border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
border-style: dotted;
border-width: hippie.$width_border_8;
border-radius: hippie.$width_border_8;
padding: hippie.$space_basic;
background-color: rgb(hippie.$color_back_basic, .5);
// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
// background-color: gold;
}
}
}
#top {
position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
height: $module_top_height;
background-color: rgb(0, 0, 0, .8);
z-index: hippie.$z_top;
div:last-child {
flex: 1;
}
p,
li {
color: #fff;
}
h1 a {
color: #000;
}
p,
li {
margin-top: 8px;
margin-bottom: 7px;
padding: 0 4px;
font-size: 12px;
line-height: 17px;
}
nav ul {
display: flex;
margin: 0 0 0 16px;
}
.brand {
height: 36px;
background-color: #fff;
margin: 0 0 0 128px;
padding: 7px 24px;
font-size: 16px;
line-height: 22px;
font-weight: bold;
text-align: center;
}
.state {
margin-right: 16px;
text-align: right;
}
}

99
source/style/modules/ui/_new_module.scss
View file

@ -1,99 +0,0 @@
@use "sass:color";
@use "../../hippie-style/hippie";
$module_top_height: 32px;
$body_top_space: $module_top_height + hippie.$space_basic;
.body_new {
@extend %flex_column;
padding: $body_top_space hippie.$space_basic hippie.$space_basic;
}
.area {
transition: hippie.$transition_best;
&:hover {
background-color: #999;
}
}
.grid {
display: grid;
flex: 1;
// grid-template-rows: repeat(2, 1fr);
// grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a a";
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;
}
.item {
// height: unset;
border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
border-style: dotted;
border-width: hippie.$width_border_8;
border-radius: hippie.$width_border_8;
padding: hippie.$space_basic;
background-color: rgb(hippie.$color_back_basic, .5);
// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
// background-color: gold;
}
.float {
min-height: 50%;
}
#top {
position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
height: $module_top_height;
background-color: rgb(0, 0, 0, .8);
z-index: hippie.$z_top;
div:last-child {
flex: 1;
}
p,
li {
color: #fff;
}
h1 a {
color: #000;
}
p,
li {
margin-top: 8px;
margin-bottom: 7px;
padding: 0 4px;
font-size: 12px;
line-height: 17px;
}
nav ul {
display: flex;
margin: 0 0 0 16px;
}
.brand {
height: 36px;
background-color: #fff;
margin: 0 0 0 128px;
padding: 7px 24px;
font-size: 16px;
line-height: 22px;
font-weight: bold;
text-align: center;
}
.state {
margin-right: 16px;
text-align: right;
}
}

1
source/style/ui.scss
View file

@ -4,7 +4,6 @@
@use "hippie-style/hippie";
@use "modules/ui/frame_module";
@use "modules/ui/new_module";
@use "modules/ui/drag_module";
@use "modules/ui/form_module";
@use "modules/ui/gallery_module";