10 years later #1
10 changed files with 660 additions and 0 deletions
192
source/code/app.js
Normal file
192
source/code/app.js
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
//NEW
|
||||
|
||||
function Clock(id){
|
||||
this.id = id;
|
||||
|
||||
var that = this;
|
||||
setInterval(function(){that.updateClock();}, 1000);
|
||||
this.updateClock();
|
||||
}
|
||||
|
||||
Clock.prototype.updateClock = function(){
|
||||
var date = new Date();
|
||||
var clock = document.getElementById(this.id);
|
||||
//console.log(this);
|
||||
clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
|
||||
};
|
||||
|
||||
Clock.prototype.formatDigits = function(val){
|
||||
if(val<10) val = "0" + val;
|
||||
|
||||
return val;
|
||||
}
|
||||
|
||||
//OLD
|
||||
|
||||
var floor = Math.floor;
|
||||
|
||||
function ongoing() {
|
||||
|
||||
var now = new Date();
|
||||
|
||||
var w = Math.floor(now.getDay());
|
||||
var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
|
||||
var DNumb = Math.floor(now.getDate());
|
||||
var MNumb = Math.floor(now.getMonth());
|
||||
var M = new Array("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);
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
// create emails
|
||||
function composeMail(tag, name, prov, suffix, text, topic) {
|
||||
var trigger = tag.indexOf(".");
|
||||
var mailString = name + '@' + prov + '.' + suffix;
|
||||
var textString = mailString.replace(/@/g, "(at)");
|
||||
var descString = "Nachricht an " + mailString;
|
||||
if (trigger == -1) {
|
||||
if (!text) {
|
||||
text = mailString;
|
||||
} else if (text == "at") {
|
||||
text = textString;
|
||||
} else if (text == "to") {
|
||||
text = descString;
|
||||
}
|
||||
if (!topic) {
|
||||
topic = "";
|
||||
} else {
|
||||
topic = "?subject=" + topic;
|
||||
}
|
||||
var old = $('#'+tag).html();
|
||||
$('#'+tag).html(old + text);
|
||||
$('#'+tag).attr("href", "mailto:" + mailString + topic);
|
||||
} else {
|
||||
$(tag).each(function() {
|
||||
if (!text) {
|
||||
text = mailString;
|
||||
} else if (text == "at") {
|
||||
text = textString;
|
||||
} else if (text == "to") {
|
||||
text = descString;
|
||||
}
|
||||
if (!topic) {
|
||||
topic = "";
|
||||
} else {
|
||||
topic = "?subject=" + topic;
|
||||
}
|
||||
var old = $(this).html();
|
||||
$(this).html(old + text);
|
||||
$(this).attr("href", "mailto:" + mailString + topic);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//Länge der Balken im Diagram berechnen
|
||||
function barwidth(size, G, W) {
|
||||
var s = size;
|
||||
var g = G;
|
||||
var w = W;
|
||||
var p = ( w / g ) * 100;
|
||||
var newW = s * ( p /100 );
|
||||
|
||||
return newW;
|
||||
}
|
||||
//String Element erweitern
|
||||
String.prototype.transform = function() {
|
||||
return parseFloat(this.replace(',', '.'));
|
||||
}
|
||||
//Array Element erweitern
|
||||
Array.prototype.arrayAdd = function() {
|
||||
return eval(this.join("+"));
|
||||
}
|
||||
//Speicherplatz in Prozent berechnen
|
||||
function percentage(total, gigs, round) {
|
||||
var totalSpace = total;
|
||||
var singleSpace = gigs;
|
||||
var z = round;
|
||||
var p = singleSpace / ( totalSpace / 100 );
|
||||
|
||||
return p;
|
||||
}
|
||||
//Speicherplatz in GB berechnen
|
||||
function gigabytes(percent, total, round) {
|
||||
var occupiedPercent = percent;
|
||||
var singleSpace = total;
|
||||
var z = round;
|
||||
var g = (singleSpace / 100 ) * occupiedPercent;
|
||||
|
||||
return g;
|
||||
}
|
||||
14
source/data/new.json
Normal file
14
source/data/new.json
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
[
|
||||
{
|
||||
"text": "Index",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Basics",
|
||||
"href": "./demo/basics.html"
|
||||
},
|
||||
{
|
||||
"text": "Drag",
|
||||
"href": "./demo/examples/ui/drag.html"
|
||||
}
|
||||
]
|
||||
109
source/screens/demo/examples/ui/drag.njk
Executable file
109
source/screens/demo/examples/ui/drag.njk
Executable file
|
|
@ -0,0 +1,109 @@
|
|||
---
|
||||
title: Drag
|
||||
tags:
|
||||
- demoExample
|
||||
---
|
||||
{% set pageId = page.fileSlug %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
{% set bodyClass = "body_drag" %}
|
||||
|
||||
{% extends "demo/_app.njk" %}
|
||||
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block links %}
|
||||
{{ super() }}
|
||||
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div id="space"></div>
|
||||
{% endblock %}
|
||||
|
||||
{%- block script %}
|
||||
<script>
|
||||
// Get the space element
|
||||
const space = document.getElementById('space');
|
||||
|
||||
// Create a new div element
|
||||
const newDiv = document.createElement('div');
|
||||
newDiv.style.position = 'absolute';
|
||||
newDiv.style.width = '100px';
|
||||
newDiv.style.height = '100px';
|
||||
newDiv.style.background = 'cyan';
|
||||
newDiv.style.cursor = 'move';
|
||||
|
||||
// Add event listeners for dragging
|
||||
let isDown = false;
|
||||
let offset = [0, 0];
|
||||
|
||||
newDiv.addEventListener('mousedown', (event) => {
|
||||
if (event.button === 0) { // Left mouse button
|
||||
isDown = true;
|
||||
offset = [
|
||||
newDiv.offsetLeft - event.clientX,
|
||||
newDiv.offsetTop - event.clientY
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
isDown = false;
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (event) => {
|
||||
if (isDown) {
|
||||
const maxX = window.innerWidth - newDiv.offsetWidth;
|
||||
const maxY = window.innerHeight - newDiv.offsetHeight;
|
||||
let x = event.clientX + offset[0];
|
||||
let y = event.clientY + offset[1];
|
||||
|
||||
// Boundary checks
|
||||
if (x < 0) x = 0;
|
||||
if (y < 0) y = 0;
|
||||
if (x > maxX) x = maxX;
|
||||
if (y > maxY) y = maxY;
|
||||
|
||||
newDiv.style.left = `${x}px`;
|
||||
newDiv.style.top = `${y}px`;
|
||||
}
|
||||
});
|
||||
|
||||
// Save position and size
|
||||
const saveData = () => {
|
||||
const data = {
|
||||
x: newDiv.offsetLeft,
|
||||
y: newDiv.offsetTop,
|
||||
width: newDiv.offsetWidth,
|
||||
height: newDiv.offsetHeight
|
||||
};
|
||||
// Save data to local storage or a database
|
||||
localStorage.setItem('divData', JSON.stringify(data));
|
||||
};
|
||||
|
||||
// Load saved data
|
||||
const loadData = () => {
|
||||
const data = localStorage.getItem('divData');
|
||||
if (data) {
|
||||
const parsedData = JSON.parse(data);
|
||||
newDiv.style.left = `${parsedData.x}px`;
|
||||
newDiv.style.top = `${parsedData.y}px`;
|
||||
newDiv.style.width = `${parsedData.width}px`;
|
||||
newDiv.style.height = `${parsedData.height}px`;
|
||||
}
|
||||
};
|
||||
|
||||
// Add the new div to the space
|
||||
space.appendChild(newDiv);
|
||||
|
||||
// Call the save function when the user stops dragging
|
||||
document.addEventListener('mouseup', saveData);
|
||||
|
||||
// Load saved data on page load
|
||||
loadData();
|
||||
</script>
|
||||
{% endblock %}
|
||||
81
source/screens/demo/examples/ui/new.njk
Executable file
81
source/screens/demo/examples/ui/new.njk
Executable file
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
title: New
|
||||
tags:
|
||||
- demoExample
|
||||
---
|
||||
{% set pageId = page.fileSlug %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
{% set bodyClass = "body_new" %}
|
||||
|
||||
{% extends "demo/_app.njk" %}
|
||||
{% import "demo/macros/_states.njk" as state %}
|
||||
|
||||
{% block title %}{{ title }}
|
||||
{% endblock %}
|
||||
|
||||
{% block links %}
|
||||
{{ super() }}
|
||||
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div id="top">
|
||||
<h1 class="brand">
|
||||
<a href="#">{{ hippie.brand | upper }}</a>
|
||||
</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
{% for link in new %}
|
||||
<li>
|
||||
<a href="{{ link.href }}">{{ link.text }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="state">
|
||||
<p>{{ state.coord("log")}}
|
||||
/
|
||||
{{ state.date("date")}}
|
||||
/
|
||||
{{ state.time("time")}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="area menu">
|
||||
<nav class="nav_horizontal">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="" class="a_button">Func 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">Func 2</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{%- block script %}
|
||||
{{ super() }}
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
<script src="{{ pageBase }}js/app.js"></script>
|
||||
<script>
|
||||
let clock = new Clock('time');
|
||||
|
||||
document.addEventListener('mousemove', (event) => {
|
||||
document.getElementById('log')
|
||||
.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
50
source/screens/demo/examples/ui/settings.njk
Executable file
50
source/screens/demo/examples/ui/settings.njk
Executable file
|
|
@ -0,0 +1,50 @@
|
|||
---
|
||||
title: Settings
|
||||
tags:
|
||||
- demoExample
|
||||
- ui
|
||||
---
|
||||
{% set pageId = page.fileSlug %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
{% set bodyClass = "body_ui" %}
|
||||
|
||||
{% extends "demo/_app.njk" %}
|
||||
|
||||
{% block title %}{{ title }}
|
||||
{% endblock %}
|
||||
|
||||
{% block links %}
|
||||
{{ super() }}
|
||||
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div id="frame" class="frame-flex">
|
||||
<div class="title-bar">
|
||||
<div>title-bar<button class="io_button">menu</button class="io_button"><button class="io_button">search</button class="io_button"></div>
|
||||
<div><button class="io_button">minimize</button class="io_button"><button class="io_button">maximize</button class="io_button"><button class="io_button">close</button class="io_button"></div>
|
||||
</div>
|
||||
<main>
|
||||
<aside class="left">aside
|
||||
<nav>
|
||||
<ul>
|
||||
<li>setting</li>
|
||||
<li>setting</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<section class="bside">section</section>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{%- block script %}
|
||||
{{ super() }}
|
||||
<script src="{{ pageBase }}js/app.js"></script>
|
||||
<script>
|
||||
</script>
|
||||
{% endblock %}
|
||||
121
source/style/modules/ui/_new_module.scss
Executable file
121
source/style/modules/ui/_new_module.scss
Executable file
|
|
@ -0,0 +1,121 @@
|
|||
$module_top_height: 32px;
|
||||
|
||||
.body_new {
|
||||
height: 100vh;
|
||||
padding: $module_top_height + $space_basic $space_basic $space_basic;
|
||||
}
|
||||
|
||||
.body_drag {
|
||||
height: 100vh;
|
||||
// padding: $space_basic;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
// margin: $space_basic;
|
||||
// grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: $space_basic;
|
||||
}
|
||||
|
||||
.area {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: $transition_best;
|
||||
|
||||
&:hover {
|
||||
background-color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.menu, #top {
|
||||
nav ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
// 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: darken($color_back_basic, $color_diff_tiny);
|
||||
border-style: dotted;
|
||||
border-width: $width_border_8;
|
||||
border-radius: $width_border_8;
|
||||
padding: $space_basic;
|
||||
background-color: rgb($color_back_basic, .5);
|
||||
// background-color: lighten($color_back_basic, $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: $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-left: 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;
|
||||
}
|
||||
}
|
||||
|
||||
#space {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-color: $color-dark;
|
||||
}
|
||||
44
source/style/modules/ui/_settings_module.scss
Executable file
44
source/style/modules/ui/_settings_module.scss
Executable file
|
|
@ -0,0 +1,44 @@
|
|||
$module_top_height: 32px;
|
||||
|
||||
.body_ui {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#frame {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-color: $color-dark;
|
||||
|
||||
.title-bar {
|
||||
button {
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
aside {
|
||||
background-color: $color_brighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.frame-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title-bar {
|
||||
display: flex;
|
||||
|
||||
div:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
|
||||
aside, section {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
5
source/style/ui.scss
Normal file
5
source/style/ui.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import "demo_config";
|
||||
@import "hippie-style/hippie";
|
||||
|
||||
@import "modules/ui/new_module";
|
||||
@import "modules/ui/settings_module";
|
||||
29
source/templates/demo/_app.njk
Executable file
29
source/templates/demo/_app.njk
Executable file
|
|
@ -0,0 +1,29 @@
|
|||
<!-- demo.app.template -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
{% block head %}
|
||||
<title>{{ hippie.titlePrefix }}
|
||||
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
||||
|
||||
{% block meta %}
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
<base href="/">
|
||||
{% endblock %}
|
||||
|
||||
{% block links %}
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="{{ bodyClass }}">
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
15
source/templates/demo/macros/_states.njk
Normal file
15
source/templates/demo/macros/_states.njk
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!-- states.macro -->
|
||||
{% macro coord(id, text='X: #, Y: ##') %}
|
||||
<span id="{{ id }}">{{ text }}</span>
|
||||
{% endmacro %}
|
||||
{% macro time(id, text='00:00:00', postfix=' Uhr') %}
|
||||
<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
|
||||
{% endmacro %}
|
||||
{% macro date() %}
|
||||
<span id="{{ id }}">
|
||||
<span id="day">Wochentag</span>,
|
||||
<span id="dayNumb">##</span>.
|
||||
<span id="month">Monat</span>
|
||||
<span id="year">####</span>
|
||||
</span>
|
||||
{% endmacro %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue