alchi/src/whoaremyfriends/wersindmeinefreunde.html

9434 lines
324 KiB
HTML
Raw Normal View History

<!doctype html>
<!--
based on alchi/src/whoaremyfriends/whoaremyfriends.html
-->
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="schema.dc" href="http://purl.org/dc/elements/1.1/" />
<link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
<title>Wer sind meine Freunde? Gruppenaufbau nach Persönlichkeitstyp</title>
<!-- TODO -->
<meta name="description" content="">
<meta name="author" content="Milan Hauth">
<!-- meta#version -->
<!-- TODO update -->
2022-08-14 21:01:55 +02:00
<meta id="version" name="dcterms.modified" content="2022-08-14">
<!-- document ID for hypothesis annotations -->
<!-- 9c6e723296fc7d8534cd901de0f0dcfd4765ea3c = initial commit of the "alchi" project -->
<link rel="canonical" href="https://milahu.github.io/alchi/src/whoaremyfriends/wersindmeinefreunde.html#/cas/git/commit/9c6e723296fc7d8534cd901de0f0dcfd4765ea3c">
<!--
content starts at <article id="content">
all assets are inlined into this html file
i hope you have a good code editor, with code folding.
folding suggestions: class="foldme"
-->
<meta class="foldme" name="keywords" content="
who are my friends,
team composition,
matchmaking,
offline matchmaking,
interpersonal compatibility,
teamwork,
collaboration,
mate selection,
self organization,
self governance,
bottom up organization,
extended families,
village culture,
ecovillages,
small is beautiful,
small states,
minarchy,
human compatibility chart,
human compatibility algorithm,
human compatibility system,
human relations,
human resource managment,
management,
relationship management,
personality type compatibility chart,
personality type compatibility algorithm,
personality type compatibility system,
personality type,
compatibility algorithm,
compatibility chart,
compatibility system,
compatibility chart without calender astrology,
scientific compatibility chart,
dating algorithm,
dating formula,
love algorithm,
love formula,
dunbar's number,
utopia,
paradise on earth,
real communism,
small communism,
village communism,
all talents are beautiful,
naturalism,
natural order,
bioconservative,
bioconservatism,
natural philosophy,
natural religion,
primitive culture,
simple solutions,
simple and effective,
radical solutions,
dualism,
feedback,
feedback loop,
sociology,
social psychology,
work life balance,
four elements,
four basetypes,
two factor model of personality,
radical,
concept,
intuitive,
intuition,
prediction,
hypothesis,
research proposal,
research idea,
world formula,
theory of everybody,
theory of everything,
idealism,
wild theory,
alternative medicine,
irrational,
irrational world view,
esoteric,
esoteric cosmology,
alternative,
my kingdom is not of this world,
heretic,
dissident,
criminal,
opposition,
fundamental opposition,
subculture,
small groups,
gangs,
gang culture,
alternative culture,
alternative religion,
postcollapse,
post-collapse culture,
postcollapse culture,
postcrash,
post crash,
postmodern culture,
subjectivity,
nietzsche,
friedrich nietzsche,
ayn rand,
individualism,
liberalism,
liberal,
classical liberal,
classic liberal,
liberation ideology,
liberation theology,
abuse of power,
toxic rational,
toxic rationality,
balance,
justice,
natural selection,
utopia,
renaturation,
run your family like a business,
manage family like a business,
rational family management,
efficient family management,
organize your family,
family organization,
family business,
emotional aspects of human resource management,
personality psychology in human resource management,
small business,
managing talent in a family business,
organizational psychology,
industrial psychology,
early education,
talent scouting,
primitive culture,
agile development,
agile development in family,
agile family,
family meeting,
core values,
long-term strategies and short-term tactics,
talent management,
recruiting,
talent scouting,
personnel selection,
job performance,
hybrid theory,
both are right,
">
<!-- files/alchi-pallas-symbol.small.svg -->
<link rel="icon" type="image/svg" href="data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22pallas-symbol%22%3E%0A%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%226%22%2F%3E%0A%3Cpath%20d%3D%22m8%2B10%204-4%20-4-4%20-4%2B4%20z%20m0%200v4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.4%22%2F%3E%0A%3Cpath%20d%3D%22m5%2012h6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- load annotations -->
<!-- hypothesis only works online, so this script is external -->
<script async src="https://hypothes.is/embed.js"></script>
<!-- non-standard tags, human readable -->
<!-- TODO maybe use dc tags -->
<meta name="author.email" content="milahu@gmail.com">
<meta name="author.phone" content="+49 151 7205 9978">
<meta name="author.offline" content='
Milan Hauth
Jägerstraße 10
83308 Trostberg
Germany
'>
<meta name="author.chat.telegram" content="+49 151 7205 9978">
<meta name="author.chat.matrix" content="@milahu:matrix.org">
<meta name="author.social.reddit" content="https://www.reddit.com/user/milahu">
<meta name="author.social.reddit.censored" content="https://www.reveddit.com/y/milahu/">
<meta name="author.social.gab" content="https://gab.com/milahu">
<meta name="author.social.facebook" content="https://www.facebook.com/mila.nautikus"><!-- note: "You must log in to continue" -->
<meta name="author.email.tor" content="milahu@torbox36ijlcevujx7mjb4oiusvwgvmue7jfn2cvutwa6kl6to3uyqad.onion">
<meta name="homepage" content="https://github.com/milahu/alchi">
<meta name="homepage.gitea" content="https://try.gitea.io/milahu/alchi">
<meta name="homepage.gitlab" content="https://gitlab.com/milahu/alchi">
<meta name="homepage.srht" content="https://sr.ht/~milahu/alchi">
<meta name="homepage.tor.darktea" content="http://it7otdanqu7ktntxzm427cba6i53w6wlanlh23v5i3siqmos47pzhvyd.onion/milahu/alchi">
<!-- legal stuff. short: zero limits and zero warranty -->
<meta class="foldme" name="dc.rights" content='
MIT License
Copyright (c) 2022 Milan Hauth
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
'>
<style class="foldme">
/* FIXME width 1105px, zoom 100%, dpi 144? -> horizontal scrollbar in grid view */
body.js-enabled hr {
height: 0;
border: none;
}
2022-08-13 15:30:56 +02:00
.pre-line {
white-space:pre-line;
}
body {
font-family: sans-serif;
font-size: 10pt;
}
h1 {
font-size: 250%;
font-weight:normal;
}
h2 {
font-weight:normal;
}
/* debug
* {
outline: solid 1px red;
}
*/
/* <div class="annotation" */
div.annotation {
display: inline;
background: rgba(255, 255, 0, 0.4); /* transparent yellow */
cursor: pointer;
}
div.annotation:hover {
background: rgba(255, 255, 0, 0.6); /* transparent yellow */
}
@media print {
div.annotation {
background: none;
}
}
.bindery-print-sheet {
height: auto !important; /* workaround https://github.com/evnbr/bindery/issues/109 */
}
/* hide bindery menu on scroll down */
.bindery-controls {
/* position: sticky; */
position: static !important;
}
.bindery-sup {
vertical-align: baseline;
font-size: 100% !important;
}
.center-x {
text-align: center;
}
.center-x > * {
display: inline-block;
}
.box {
border: solid 1px black; /* TODO better for print? */
padding: 0.2em;
display: inline-block;
white-space: pre-line;
white-space: nowrap;
}
/* moved to javascript. when copying text, square braces should be copied too.
.bindery-sup:before {
content: " [";
}
.bindery-sup:after {
content: "]";
}
*/
/*
Hypothesis sidebar appears in PDF export https://github.com/manubot/rootstock/issues/280
probably blame the bindery style
*/
@media only print {
hypothesis-sidebar {
display: none !important;
}
}
.smalltext {
font-size: 80%; /* this has no effect */
/* browsers enforce a minimum font size. default 9px. can be more */
/* https://stackoverflow.com/questions/2421056/how-can-i-override-the-minimum-font-size-in-firefox/12631243 */
}
.smalltext-block {
/* workaround for browser's minimum font size */
--bindery-content-width: calc(var(--bindery-page-width) - var(--bindery-margin-inner) - var(--bindery-margin-outer));
width: calc(1.25 * var(--bindery-content-width));
transform: scale(0.8);
transform-origin: top left;
/*margin-bottom: -5em; TODO calc this with javascript? */
}
div.para {
margin-top: 0.5em;
line-height: 120%;
}
.nowrap {
white-space: nowrap;
}
2022-07-29 12:58:38 +02:00
div.nowrap {
display: inline;
}
.footnote {
white-space: nowrap;
}
/* make urls left-aligned */
.footnote-number {
display: inline-block;
width: 1.8em;
text-align: right;
}
.bindery-running-header {
--bindery-content-width: calc(var(--bindery-page-width) - var(--bindery-margin-inner) - var(--bindery-margin-outer));
width: var(--bindery-content-width);
}
.running-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.running-header-title-left {
float: right;
}
.running-header-title.hover a {
color: orange;
}
/* css parent selector not implemented
https://stackoverflow.com/questions/1014861
.running-header-title-left a:hover ~ .running-header-title-right a {
color: orange;
}
*/
/*
.footnote-number:before {
content: " [";
}
.footnote-number:after {
content: "]";
}
*/
table.four-basetypes td {
border-left: solid 1px black; /* FIXME pixel hinting */
text-align: center;
vertical-align: top;
padding-left: 5px;
}
table.four-basetypes th {
border-right: solid 1px black; /* FIXME pixel hinting */
text-align: left;
vertical-align: top;
padding-right: 5px;
font-weight: normal;
}
table.four-basetypes {
border-spacing: 2px 0;
/*white-space: nowrap;*//* no linebreaks */
font-size: 90%; /* FIXME this has no effect */
/* workaround for smaller font size */
/*
transform: scale(0.86);
margin-bottom: -2.5em;
*/
transform-origin: top left;
}
table.four-basetypes tbody+tbody tr:first-child * {
border-top: solid 1px black;
}
a {
text-decoration: none;
color: blue;
}
a:hover {
color: orange;
}
@media print {
a { color: black; }
}
</style>
<!--
inlined at end of file
<script src="./node_modules/bindery/dist/bindery.umd.js"></script>
-->
<script>
function clickAnnotation(element) {
const text = element.getAttribute("title");
console.log(text);
alert(text); // TODO show pretty modal
}
</script>
<script title="binderyOptions" class="foldme">
const lastPage = 16; // TODO update manually
// called at end of file: Bindery.makeBook(binderyOptions(Bindery))
// FIXME bindery bug: cannot select text in print view = cannot create annotations
function binderyOptions(Bindery) {
return {
content: '#content',
rules: [
Bindery.PageBreak({ selector: '.pagebreak', position: 'after' }),
Bindery.PageBreak({ selector: 'hr', position: 'after' }),
/*
Bindery.PageBreak({ selector: 'h2:not(.nopagebreak)', position: 'before' }),
Bindery.PageBreak({ selector: 'h3:not(.nopagebreak)', position: 'before' }),
*/
// https://github.com/evnbr/bindery/issues/7
Bindery.Footnote({
selector: "a:not(.nofootnote)",
render: (el, number) => {
var hrefPretty = el.href.replace(/https?:\/\//g, '');
//return `<span class="footnote"><span class="footnote-number">${ number }</span> <a href="${ el.href }">${ hrefPretty }</a></span>`;
return `<span class="footnote"><span class="footnote-number">[${ number }]</span> <a href="${ el.href }">${ hrefPretty }</a></span>`;
},
}),
Bindery.RunningHeader({
render: (page) => {
if (page.isEmpty) return "";
//if (page.number <= 2) return "";
//if (page.number <= 3) return "";
if (page.number <= 1) return "";
//if (page.element.querySelector("h1")) return "";
//if (page.isLeft) return `<div class="running-header"><span class="page-number">${ page.number }</span> ${ page.heading.h1 }</div>`;
/*
// show only page number, no link, no version
if (page.number <= 3) {
headerTitle = '<div></div>';
if (page.isLeft) return `<div class="running-header"><div class="page-number">${ page.number }</div>${headerTitle}</div>`;
if (page.isRight) return `<div class="running-header">${headerTitle}<span class="page-number">${ page.number }</span></div>`;
}
*/
var linkList = [
['github.com/milahu/alchi', ''],
['gitlab.com/milahu/alchi', 'Mirror'],
];
var linkOffset = 1; // which link is first in linkList
var linkIdx = (Math.floor(page.number / 2) + linkOffset) % linkList.length;
var link = linkList[linkIdx][0];
var desc = linkList[linkIdx][1];
var href = `https://${link}`;
var linkText = desc ? `${link} (${desc})` : link;
/* pretty effect, but version is missing
var headerTitle = (page.isLeft)
? `<div class="running-header-title running-header-title-left running-header-title-pages-${page.number}-${(page.number + 1)}"><a href="${href}" onmouseover="hoverBothLinksStart(this)" onmouseout="hoverBothLinksEnd(this)">${linkLeft}</a></div>`
: `<div class="running-header-title running-header-title-right running-header-title-pages-${(page.number - 1)}-${page.number}"><a href="${href}" onmouseover="hoverBothLinksStart(this)" onmouseout="hoverBothLinksEnd(this)">${linkRight}</a></div>`
;
*/
// <meta id="version"
var version = document.querySelector('meta#version').content;
var versionString = version;
//versionString = `Entwurf ${versionString}`; // add prefix
var headerTitle = (!page.isLeft)
? `<div class="running-header-title running-header-title-left"><a href="${href}" onmouseover="hoverBothLinksStart(this)" onmouseout="hoverBothLinksEnd(this)">${linkText}</a></div>`
: `<div class="running-header-title running-header-title-right">${versionString}</div>`
;
//const lastPage = 16; // TODO update manually
// FIXME get num pages
/*
// no page number on last page
if (page.number == lastPage) return '';
if (page.number > lastPage) {
console.log(`FIXME increase lastPage`);
alert(`FIXME increase lastPage`);
return '';
}
*/
const pageNumber = page.number;
//const pageNumber = page.number - 1; // workaround: first page left
if (page.isLeft) return `<div class="running-header"><div class="page-number">${ pageNumber }</div>${headerTitle}</div>`;
if (page.isRight) return `<div class="running-header">${headerTitle}<span class="page-number">${ pageNumber }</span></div>`;
},
}),
],
printSetup: {
// https://bindery.info/docs/#printsetup
// setLayout(newVal) -> automatically set paper size from layout https://github.com/evnbr/bindery/issues/112
layout: Bindery.Layout.SPREADS, // PAGES SPREADS BOOKLET
paper: Bindery.Paper.A4_LANDSCAPE, // A5_PORTRAIT A4_LANDSCAPE
marks: Bindery.Marks.NONE, // NONE CROP BLEED BOTH
bleed: '-12pt', // workaround: bleed is biased by +12pt -> padding-top: calc(var(--bindery-bleed) + 12pt);
},
pageSetup: {
size: { width: '148mm', height: '209mm' }, // A5. height -1mm to avoid pagebreak https://github.com/evnbr/bindery/issues/109
margin: {
top: '10mm',
//inner: '10mm',
inner: '20mm',
outer: '10mm',
bottom: '10mm',
},
},
//view: Bindery.View.PREVIEW, // LINEAR PREVIEW PRINT FLIPBOOK // note: cannot select text in PRINT view
// "responsive" layout: set initial view from screen width
view: (window.innerWidth < 960) ? Bindery.View.LINEAR : Bindery.View.PREVIEW,
};
}
function hoverBothLinksStart(a) {
var c = a.parentNode.className.split(' ')[2];
//console.log(`+ hover .${c}`);
Array.from(document.querySelectorAll(`.${c}`)).map(div => div.classList.add('hover'));
}
function hoverBothLinksEnd(a) {
var c = a.parentNode.className.split(' ')[2];
//console.log(`- hover .${c}`);
Array.from(document.querySelectorAll(`.${c}`)).map(div => div.classList.remove('hover'));
}
</script>
</head>
<body>
<!-- note: dont indent body content -->
<script>document.body.classList.add('js-enabled')</script>
<noscript>This page works better with Javascript</noscript>
<article id="content">
<!-- note: dont indent article content -->
<!-- end of article: </article> -->
<!-- page 1 -->
<div style="text-align:center">
<div class="vspace" style="height:7em"></div>
<h1>Pallas</h1>
<div class="vspace" style="height:2em"></div>
<svg class="pallas-symbol" style="width:16em"
viewBox="0 0 220 220"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
>
<!--
svg 2.0 is not yet supported by inkscape :(
svg 1.1: <use xlink:href="#alchi-pallas-symbol" />
svg 2.0: <use href="#alchi-pallas-symbol" />
-->
<defs>
<symbol id="alchi-pallas-symbol">
<path
transform="translate(110, 110)"
fill="none" stroke="black" stroke-width="4"
stroke-linejoin="round" stroke-linecap="round"
d="
M0+0 l50-50 l-50-50 l-50+50 z
M0+0 v100
M-50+50 h100
"
></path>
</symbol>
</defs>
<use xlink:href="#alchi-pallas-symbol"/>
</svg>
<div class="vspace" style="height:2em"></div>
<h2>Wer sind meine Freunde</h2>
<div class="vspace" style="height:1em"></div>
<h2 class="nopagebreak">Gruppenaufbau nach Persönlichkeitstyp</h2>
</div>
<hr>
<!-- page 2 -->
<div class="para">
<b>
<div class="annotation" onClick="clickAnnotation(this)" title='
<div class="para">
Objektiv gesehen gibt es zwei Antworten.
Idealisten sagen:
Meine Freunde sind die Menschen,
die ich mag,
Idealismus oder Realismus.
Fühlen oder Denken.
</div>
<div class="para">
Wer seine Freunde "fühlt" der entscheidet selber
(Selbstwert, Sensor, Führer, liberal, emotional,
Persönliche Gründe, innere Gründe).
</div>
<div class="para">
Wer seine Freunde "denkt" der lässt Andere entscheiden
(Fremdwert, Memor, Folger, konservativ,
rational, Sachgründe, äussere Gründe).
<!-x- spam
Solche "Denker" verteidigen ihre "Führer",
und wenn ich auf Abwehr stoße,
dann fordere ich:
Bring mich zu deinem Führer!
Du hast keinen?
Dann suchen wir deinen Führer : )
-x->
</div>
<div class="para">
Fühlen oder Denken?
Beide sind wichtig,
aber ich als Gefühlsmensch sage:
"erst Fühlen, dann Denken".
Also Fühlen ist Grundlage zum Denken.
Das ist meine <b>subjektive Weltsicht</b>,
und jeder Mensch hat seine subjektive Weltsicht.
Wenn zwei Hypothesen streiten, dann soll man beide testen.
<!-x- spam
Wenn zwei sich streiten, dann soll man wetten.
(Nur tote Menschen sind objektiv, neutral, grau.)
-x->
</div>
'>Wer</div>
sind meine Freunde?
</b>
Die Frage klingt einfach,
aber scheinbar ist die Frage so kompliziert,
dass die Psychologie bis heute
keine Antwort hat.
Stichworte:
<a href="https://en.wikipedia.org/wiki/Interpersonal_compatibility">Interpersonal Compatibility</a>,
<a href="https://en.wikipedia.org/wiki/Team_composition">Team Composition</a>.
2022-07-29 12:58:38 +02:00
</div>
2022-07-29 12:58:38 +02:00
<div class="para">
Nur wenige Weltbilder geben eine Antwort,
zum Beispiel
<div class="annotation" onClick="clickAnnotation(this)" title='
Astrologie:
Falsch ist der Schluss von Geburtstag auf Persönlichkeitstyp.
Weil:
Persönlichkeitstypen sind zufällig verteilt.
Weil:
Wie funktioniert dieses System für Menschen,
wo der Geburtstag nicht bekannt ist?
Weil:
Geburtstag und Kalender sind Produkte von Hochkultur,
also dieses System hätte vor 10 Millionen Jahren nicht funktioniert.
'>Astrologie</div>
und Sozionik
machen
<div class="annotation" onClick="clickAnnotation(this)" title='
TODO 16personalities macht Vorhersagen zur Kompatibilität
'>Vorhersagen</div>
zur Kompatibilität zwischen Persönlichkeitstypen.
Aber das ist mir zu ungenau.
Ich suche ein mathematisch exaktes System,
mit dem ich <b>freiwillige Beziehungen</b>
erklären und vorhersagen kann.
</div>
<div class="para">
TODO ich suche eine "ganzheitliche" theorie zur anwendung in arbeitsleben UND privatleben.
eine schwäche von organisationspsychologie ist die beschränkung aufs arbeitsleben.
</div>
<div class="para">
Also, "Wer sind meine Freunde?",
oder mit anderen Worten:
<b>Wie müssen wir verschiedene Menschen verbinden,
damit alle glücklich sind?</b>
"Verschiedene Menschen" heisst vor allem:
Menschen mit verschiedenem Persönlichkeitstyp.
</div>
2022-07-29 12:58:38 +02:00
<div class="para">
Synonyme:
<b>Persönlichkeitstyp</b>,
Subjektive Weltsicht,
Subjektive Wahrheit,
Innere Werte,
Geschmack,
Humor,
Talent,
Temperament,
Personality Type.
</div>
<div class="para">
Wer sind meine Freunde?
Meine Antwort ist dieses <b>Muster</b>:
</div>
<script class="foldme" title="Compatibility Chart">
if (false) { // generate svg
/*
// variant: four squares, one cross
var grid_input = `
F1 F2 F3 F4
M2 M1 M4 M3
F4 F3 F2 F1
M3 M4 M1 M2
`;
*/
/*
// variant: four squares, one cross
var grid_input = `
F1S F2L F3S F4L
M2S M1L M4S M3L
F4S F3L F2S F1L
M3S M4L M1S M2L
`;
*/
// variant: four squares, one cross
// rotated: parents top, children bottom
var grid_input = `
F1L M2L F4L M3L
F2S M1S F3S M4S
F3L M4L F2L M1L
F4S M3S F1S M2S
`;
// variant: four crosses, one square
// TODO?
/*
var grid_input = `
M1L F3L M4L F2L
M4S F2S M1S F3S
M3L F1L M2L F4L
M2S F4S M3S F1S
`;
*/
// circles
var r = 60;
//var r = 50;
//var d = r / Math.sqrt(2); // exact value
var d = r * 0.7; // rounded value
var G = 200;
var stroke_width = 2;
var grid_circles_and_text = grid_input.trim().split(/\n[ \t]*/).map((line, y) => (
line.split(' ').map((cell, x) => {
return `
<circle cx="${G * x + 100}" cy="${G * y + 100}" r="${r}" stroke-width="2" class="stroke nofill" />
<text x="${G * x + 100}" y="${G * y + 100}" class="fillfg">${cell}</text>`;
}).join('\n')
)).join('\n')
var tpl = `
<!-`+`- start generated svg -`+`->
<!-`+`- variant: four squares, one cross -`+`->
<path class="stroke nofill" d="
M ${500-d} ${500-d} L ${300+d} ${300+d}
M ${500-d} ${300+d} L ${300+d} ${500-d}
M 0 0 L ${100-d} ${100-d}
M 800 800 L ${700+d} ${700+d}
M 0 800 L ${100-d} ${700+d}
M 800 0 L ${700+d} ${100-d}
M 400 0 L ${300+d} ${100-d}
M 400 0 L ${500-d} ${100-d}
M 400 800 L ${300+d} ${700+d}
M 400 800 L ${500-d} ${700+d}
M 0 400 L ${100-d} ${300+d}
M 0 400 L ${100-d} ${500-d}
M 800 400 L ${700+d} ${300+d}
M 800 400 L ${700+d} ${500-d}
M ${100+r} 100 H ${300-r}
M ${100+r} 300 H ${300-r}
M 100 ${100+r} V ${300-r}
M 300 ${100+r} V ${300-r}
M ${100+r+400} 100 H ${(300+400)-r}
M ${100+r+400} 300 H ${(300+400)-r}
M ${100+400} ${100+r} V ${(300)-r}
M ${300+400} ${100+r} V ${(300)-r}
M ${100+r+400} ${100+400} H ${(300+400)-r}
M ${100+r+400} ${300+400} H ${(300+400)-r}
M ${100+400} ${100+r+400} V ${(300+400)-r}
M ${300+400} ${100+r+400} V ${(300+400)-r}
M ${100+r} ${100+400} H ${300-r}
M ${100+r} ${300+400} H ${300-r}
M ${100} ${100+r+400} V ${(300+400)-r}
M ${300} ${100+r+400} V ${(300+400)-r}
"/>
<g dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40">
${grid_circles_and_text}
</g>
<!`+`-- end generated svg --`+`>
`;
console.log(tpl); // print result
// TODO bidirectional svg editor, like https://ravichugh.github.io/sketch-n-sketch/releases/icfp-2018-svg/
} // end: generate svg
</script>
<div class="center-x">
<svg class="foldme" title="Compatibility Chart" style="height:18em;margin:2em"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 800"
>
<style>
svg { --fg: black; --bg: white; } /* light mode */
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: white; --bg: black; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: white; --bg: black; } /* dark mode */
}
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
.fig1 .stroke {
stroke-width: 2;
stroke: black; /* fallback when css variables are not supported */
stroke: var(--fg);
}
.nofill {
fill: none;
}
.fillbg {
fill: white;
fill: var(--bg);
}
.fillfg {
fill: black;
fill: var(--fg);
}
</style>
<g class="fig1">
<!-- start generated svg -->
<!-- variant: four squares, one cross -->
<path class="stroke nofill" d="
M 458 458 L 342 342
M 458 342 L 342 458
M 0 0 L 58 58
M 800 800 L 742 742
M 0 800 L 58 742
M 800 0 L 742 58
M 400 0 L 342 58
M 400 0 L 458 58
M 400 800 L 342 742
M 400 800 L 458 742
M 0 400 L 58 342
M 0 400 L 58 458
M 800 400 L 742 342
M 800 400 L 742 458
M 160 100 H 240
M 160 300 H 240
M 100 160 V 240
M 300 160 V 240
M 560 100 H 640
M 560 300 H 640
M 500 160 V 240
M 700 160 V 240
M 560 500 H 640
M 560 700 H 640
M 500 560 V 640
M 700 560 V 640
M 160 500 H 240
M 160 700 H 240
M 100 560 V 640
M 300 560 V 640
"/>
<g dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40">
<circle cx="100" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="100" class="fillfg">F1L</text>
<circle cx="300" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="100" class="fillfg">M2L</text>
<circle cx="500" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="100" class="fillfg">F4L</text>
<circle cx="700" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="100" class="fillfg">M3L</text>
<circle cx="100" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="300" class="fillfg">F2S</text>
<circle cx="300" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="300" class="fillfg">M1S</text>
<circle cx="500" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="300" class="fillfg">F3S</text>
<circle cx="700" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="300" class="fillfg">M4S</text>
<circle cx="100" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="500" class="fillfg">F3L</text>
<circle cx="300" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="500" class="fillfg">M4L</text>
<circle cx="500" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="500" class="fillfg">F2L</text>
<circle cx="700" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="500" class="fillfg">M1L</text>
<circle cx="100" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="700" class="fillfg">F4S</text>
<circle cx="300" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="700" class="fillfg">M3S</text>
<circle cx="500" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="700" class="fillfg">F1S</text>
<circle cx="700" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="700" class="fillfg">M2S</text>
</g>
<!-- end generated svg -->
</g>
</svg>
</div>
<div class="para">
Das Muster zeigt <b>16 Menschen</b> von oben.
Jeder Kreis ist ein Mensch.
Abkürzungen:
<div class="nowrap">
MF = Mann Frau.
</div>
<div class="nowrap">
SL = Small Large = jung alt.
</div>
<div class="nowrap">
1234 = vier Persönlichkeitstypen.
</div>
(Die vier Typen erkläre ich später.)
</div>
<div class="para">
Ich glaube:
Damit ein bestimmter Persönlichkeitstyp zu mir passt,
muss er im richtigen <b>Körper</b> wohnen,
also der Körper braucht richtiges Geschlecht und Alter.
Auch der Subtyp muss stimmen, aber dazu später mehr.
</div>
<div class="para">
<b>Nähe = Freunde. Distanz = Feinde.</b>
Das Muster zeigt Freunde und Feinde.
2022-08-13 15:30:56 +02:00
Wenn zwei Menschen direkt nebeneinander stehen, dann sind sie Freunde.
Wenn zwei Menschen weiter auseinander stehen, dann sind sie Feinde.
</div>
<div class="para">
Feinde brauchen <b>gemeinsame Freunde</b>
für ein gesundes Zusammenleben (soziale Gesundheit, gesunde Gruppe).
Wenn zwei Feinde direkt zusammen leben,
dann gibt es immer wieder Missverständnisse,
und jeder findet automatisch alles
<div class="annotation" onClick="clickAnnotation(this)" title='
"Nein! Das bleibt hier alles so wies ist!"
Okay Andreas.
<!-x- Okay <a href="https://youtu.be/gy39bTYYWs4">Andreas</a>. -x->
Schön für dich.
Wenn ein Mensch sich wehrt gegen gut-gemeinte Ratschläge,
dann hat das oft <b>Persönliche Gründe</b>.
Dann zählt nicht "Was" einer sagt, sondern "Wer" etwas sagt.
Zarathustra: "Ich bin nicht der Mund für diese Ohren."
Echte Freunde.
Geistige Nähe.
Geistige Freundschaft.
"Freundschaft" klingt zu konkret.
Kompatibilität ist etwas theoretisches,
das "schon da" sein kann,
aber auch "noch nicht da" sein kann.
Auch wenn zwei menschen sich noch nie gesehen haben,
können sie trotzdem kompatibel sein.
Geist-Verwandtschaft.
Soulmates.
Sympathie.
Kompatibilität.
'>scheisse,</div>
was der andere sagt und macht (<b>Persönliche Gründe</b>),
egal wie gut gemeint (Sachgründe).
2022-07-29 12:58:38 +02:00
Zarathustra: "Ich bin nicht der Mund für diese Ohren."
</div>
<div class="para">
2022-07-29 12:58:38 +02:00
Synonyme:
Echte Freunde,
Geistige Nähe,
Geist-Verwandte,
Soulmates,
Attraktion,
Anziehung,
Schönheit,
2022-07-29 12:58:38 +02:00
Sympathie,
Kompatibilität,
...
</div>
<div class="para">
Was passiert am <b>Rand</b> vom Muster?
Das Muster wird einfach wiederholt,
wie ein Stempel, oder wie ein Kachel-Muster.
Zeile 5:
<div class="nowrap">
F1L M2L F4L M3L.
</div>
Spalte 5:
<div class="nowrap">
F1L F2S F3L F4S.
</div>
</div>
2022-07-29 12:58:38 +02:00
<!-- spam? -->
<div class="para">
Namen für das Muster:
Muster für Beziehungen,
Landkarte für Menschen,
Mischkultur für Menschen,
Familienaufstellung,
Kompatibilitäts-Muster nach Persönlichkeitstyp,
Compatibility Chart for Personality Types,
...
</div>
<!-- spam? -->
<div class="para">
<b>Woher</b> kommt das Muster?
Erfahrung und Symmetrie.
Ich habe meinen Persönlichkeitstyp rausgefunden
(Grundtyp 1, Subtyp 4).
Dann habe ich die Persönlichkeitstypen
meiner Familie, Freunde und Bekannten geschätzt,
immer mit der Frage "Wen mag ich? Wen mag ich nicht?"
oder "Wer passt zusammen? Wer hat immer Streit?"
2022-07-29 12:58:38 +02:00
Im Zweifel habe ich die "schönere" Lösung genommen
(Symmetrie, Streifen-Muster und Sechseck-Muster),
und irgendwann ist dieses Muster rausgekommen.
</div>
2022-07-29 12:58:38 +02:00
<div class="para">
Ich hoffe, das Muster stimmt für alle Menschen.
Wenn es stimmt, dann ist das Muster
eine Grundlage für eine <b>bessere Welt</b>:
Freunde sind
2022-07-29 12:58:38 +02:00
<div class="annotation" onClick="clickAnnotation(this)" title='
fernbeziehungen sind eine grundlage für das aktuelle (kranke) system.
das aktuelle (kranke) system basiert auf fernbeziehungen.
was ist mein ziel?
was bringt mein konzept / meine idee?
gerechtigkeit bei der verteilung von persönlichkeitstypen.
also nicht nur eine "frauenquote"
sondern gerechtigkeit in allen 4 dimensionen:
körper-geschlecht körper-alter hirn-geschlecht hirn-alter.
und sowieso:
freiwillige beziehungen, romantik, idealismus,
schüler dürfen ihre lehrer wählen, jeder darf lehrer sein ...
ultimative ketzerei : D
LAPAZ - KRKA (Albumsnippet No.1)
https://www.youtube.com/watch?v=Hu-CGPwk8nQ&list=UUk_9P4OTbU0lVWSoh16BQuw&index=6
gottkomplex, megalomaniac, grandiose narciss, typ 1.
Manchmal fragt ihr euch ob Gott verrückt ist
Aber was wollt ihr tun, wenn Gott zurück ist?
DJ Tomekk - Return Of Hip Hop (feat. Torch, KRS-One, MC Rene)
worst case:
meine theorie ist falsch.
dann haben wir riskiert und verloren.
dann haben wir energie verschwendet (research cost, Research and Development Expense).
best case:
meine theorie ist richtig.
dann haben wir riskiert und gewonnen.
dann haben wir eine wichtige grundlage für eine bessere welt.
https://www.youtube.com/watch?v=G87XDHw2lOE&list=UUk_9P4OTbU0lVWSoh16BQuw&index=19
LAPAZ - HÖCHSTE ZEIT (PROD. BY VINTAGEMAN PRODUKCJA)
> nicht mehr lang bis sich unser aller König zeigt, Jesus Christ dem Teufel geht der Arsch auf Eis
definiere könig, definiere gott, definiere teufel ... für mich nur synonyme für persönlichkeitstypen. (nur was ich auch anfassen kann ist real. pragmatik. results culture.)
nur ... who is who? wer ist welcher typ? mein typ? dein typ? sein typ? kein typ?
eine frage ist ja auch:
abeite ich für tote götter?
oder abeite ich für lebende götter?
hirnfick-fragen, ich weiss schon : D
der schmale grat zwischen genie und wahn.
viele menschen suchen einen schutzherr,
der seine arbeit besser macht als der aktuelle "vater staat".
also ein neues system, ein besseres system.
auch dafür hab ich meine theorie geschrieben:
als anleitung zum aufbau von kleinstaaten.
mein "gott" der für alle gilt heisst naturordnung
(naturgesetze, physik, naturkonstanten, freiwillige beziehungen).
--
Manchmal fragt ihr euch, ob Gott verrückt ist
Aber was wollt ihr tun, wenn Gott zurück ist?
DJ Tomekk - Return Of Hip Hop (feat. Torch, KRS-One, MC Rene)
'>nah,</div>
Feinde sind fern,
jeder darf seine Stärke leben,
jeder darf seine Schwächen delegieren an seine Freunde.
</div>
<div class="para">
<b>Forschung:</b>
Mein Muster ist nur eine Hypothese,
2022-08-14 21:01:55 +02:00
also ein Lösungsvorschlag (Research Proposal).
Ich gebe dir <b>keine Garantie</b> dass es funktioniert.
Ist das Muster richtig oder falsch?
Wie können wir das rausfinden?
Dazu müssen wir ein Experiment machen.
2022-08-14 21:01:55 +02:00
Ergebnisse darf jeder veröffentlichen auf meinen Websites (Github, Gitlab, ...).
(Ja, auch negative Ergebnisse.)
</div>
2022-08-14 21:01:55 +02:00
<div class="para">
<b>Alternativ-Hypothesen:</b>
1. es gibt kein "Muster für Beziehungen" und alle Menschen sind kompatibel,
also zufällige Beziehungen sind genauso gut und belastbar
wie die "kompatiblen" Beziehungen im Muster.
2. dieses Muster ist falsch, aber es gibt ein anderes Muster
(Du darfst gerne ein anderes Muster vorschlagen,
dann können wir verschiedene Muster probieren und vergleichen.)
</div>
<div class="para">
Ich kann leider keine Simulation machen,
oder das Problem "im Kopf lösen",
weil hier suche ich <b>Grundlagen</b> (Axiome, höchste Wahrheiten),
und dahinter gibt es keine rationalen Gründe,
sondern dahinter steht nur mein persönlicher Grund:
2022-07-29 12:58:38 +02:00
"Ich glaube dass meine Hypothese richtig ist".
</div>
<div class="para">
Eine Hypothese ist richtig,
wenn sie viele Phänomene (Realitäten) erklären kann,
und keine Widersprüche erzeugt (<b>Widerspruchsfreiheit</b>).
Deswegen ist negatives Feedback (Widersprüche, "es funktioniert nicht")
genauso wichtig wie positives Feedback ("es funktioniert").
</div>
2022-08-13 15:30:56 +02:00
<div class="para">
Das Experiment muss billig sein,
dann kann jeder Mensch das Experiment reproduzieren (wiederholen).
Es wird immer wieder Menschen geben,
die diese Theorie noch nicht kennen,
2022-08-14 21:01:55 +02:00
und diese Menschen brauchen einen billigen Weg zum Testen der Theorie.
2022-08-13 15:30:56 +02:00
2022-08-14 21:01:55 +02:00
An die Hypothese "glauben" muss man dabei nur so lange,
bis das Experiment vorbei ist (Arbeitshypothese).
2022-08-13 15:30:56 +02:00
</div>
<div class="para">
Wie funktioniert dieses <b>Experiment</b>?
Dazu müssen wir Menschen so verbinden,
wie sie auf dem Muster sind.
Diese Bindungen müssen freiwillig sein.
Ein Matchmaker (Kuppler, Vermittler) kann Vorschläge machen,
aber jeder Mensch darf "Nein" sagen,
oder selber Vorschläge machen (Reden oder Zeigen).
</div>
<div class="para">
Schritt eins
ist das <b>Bilden von Zweier-Gruppen</b> (Paare).<br>
Beispiel:
<div class="nowrap">M1S-F3S</div>.
</div>
<div class="para">
Schritt zwei
ist das <b>Wechseln zwischen Zweier-Gruppen</b> (Vierecke).<br>
Beispiel:
<div class="nowrap">M1S-F3S-F2L-M4L</div>.
</div>
<div class="para">
Zweier-Gruppen sind einfach.
Man hat etwas gemeinsam,
und man kann lästern über "die Anderen".
"Wir zwei gegen den Rest der Welt".
Problem:
Auf Dauer wird jedes Paar einseitig und sucht nach Ausgleich.
Lösung: Vierer-Gruppen.
Aber unser Ziel ist NICHT der Aufbau von blutverwandte Kleinfamilien
("wir machen zwei Kinder"),
sondern der Aufbau von <b>geistverwandte Kleinfamilien</b>
("wir suchen gemeinsame Freunde",
<div class="annotation" onClick="clickAnnotation(this)" title='
schnelle lösung: freunde suchen = geistverwandte.
langsame lösung: kinder machen = blutverwandte.
'>Adoption,</div>
geistige Vermehrung, schlaue Lösung).
</div>
<div class="center-x">
<svg class="foldme" title="pair M1S-F3S" style="height:4.5em;margin:2em"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="200 200 400 200"
>
<style>
svg { --fg: black; --bg: white; } /* light mode */
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: white; --bg: black; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: white; --bg: black; } /* dark mode */
}
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
.fig1 .stroke {
stroke-width: 2;
stroke: black; /* fallback when css variables are not supported */
stroke: var(--fg);
}
.nofill {
fill: none;
}
.fillbg {
fill: white;
fill: var(--bg);
}
.fillfg {
fill: black;
fill: var(--fg);
}
</style>
<g class="fig1">
<!-- start generated svg -->
<!-- variant: four squares, one cross -->
<path class="stroke nofill" d="
M 458 458 L 342 342
M 458 342 L 342 458
M 0 0 L 58 58
M 800 800 L 742 742
M 0 800 L 58 742
M 800 0 L 742 58
M 400 0 L 342 58
M 400 0 L 458 58
M 400 800 L 342 742
M 400 800 L 458 742
M 0 400 L 58 342
M 0 400 L 58 458
M 800 400 L 742 342
M 800 400 L 742 458
M 160 100 H 240
M 160 300 H 240
M 100 160 V 240
M 300 160 V 240
M 560 100 H 640
M 560 300 H 640
M 500 160 V 240
M 700 160 V 240
M 560 500 H 640
M 560 700 H 640
M 500 560 V 640
M 700 560 V 640
M 160 500 H 240
M 160 700 H 240
M 100 560 V 640
M 300 560 V 640
"/>
<g dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40">
<circle cx="100" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="100" class="fillfg">F1L</text>
<circle cx="300" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="100" class="fillfg">M2L</text>
<circle cx="500" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="100" class="fillfg">F4L</text>
<circle cx="700" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="100" class="fillfg">M3L</text>
<circle cx="100" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="300" class="fillfg">F2S</text>
<circle cx="300" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="300" class="fillfg">M1S</text>
<circle cx="500" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="300" class="fillfg">F3S</text>
<circle cx="700" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="300" class="fillfg">M4S</text>
<circle cx="100" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="500" class="fillfg">F3L</text>
<circle cx="300" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="500" class="fillfg">M4L</text>
<circle cx="500" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="500" class="fillfg">F2L</text>
<circle cx="700" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="500" class="fillfg">M1L</text>
<circle cx="100" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="700" class="fillfg">F4S</text>
<circle cx="300" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="700" class="fillfg">M3S</text>
<circle cx="500" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="700" class="fillfg">F1S</text>
<circle cx="700" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="700" class="fillfg">M2S</text>
</g>
<!-- end generated svg -->
</g>
</svg>
</div>
<div class="para">
Vierer-Gruppen sind etwas komplizierter.
Auf dem Muster stehen die vier Menschen
in einem Quadrat (Statik),
aber in der echten Welt gilt:
2022-07-29 12:58:38 +02:00
Die Vierer-Gruppen "zerfallen" immer in zwei Paare,
weil nur "unter vier Augen" kann man frei sein
(sich nicht beobachtet fühlen).
Die Paare wechseln immer,
weil auf Dauer wird jedes Paar einseitig und sucht nach Ausgleich
(Gruppendynamik, Partnertausch).
</div>
<div class="para">
"Partnertausch" klingt nach Sex, aber das meine ich nicht.
Jede Vierer-Gruppe ist
eine geistverwandte Kleinfamilie:
2022-07-29 12:58:38 +02:00
Sohn Mutter Tochter Vater
= MS FL FS ML
= 2 Männer + 2 Frauen
= 2 Junge + 2 Alte.
Es gibt 3 Wege zum Paare bilden:
horizontal vertikal diagonal.
</div>
<div class="center-x">
<svg class="foldme" title="square M1S-F3S-M4L-F2L" style="height:9em;margin:2em"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="200 200 400 400"
>
<style>
svg { --fg: black; --bg: white; } /* light mode */
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: white; --bg: black; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: white; --bg: black; } /* dark mode */
}
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
.fig1 .stroke {
stroke-width: 2;
stroke: black; /* fallback when css variables are not supported */
stroke: var(--fg);
}
.nofill {
fill: none;
}
.fillbg {
fill: white;
fill: var(--bg);
}
.fillfg {
fill: black;
fill: var(--fg);
}
</style>
<g class="fig1">
<!-- start generated svg -->
<!-- variant: four squares, one cross -->
<path class="stroke nofill" d="
M 458 458 L 342 342
M 458 342 L 342 458
M 0 0 L 58 58
M 800 800 L 742 742
M 0 800 L 58 742
M 800 0 L 742 58
M 400 0 L 342 58
M 400 0 L 458 58
M 400 800 L 342 742
M 400 800 L 458 742
M 0 400 L 58 342
M 0 400 L 58 458
M 800 400 L 742 342
M 800 400 L 742 458
M 160 100 H 240
M 160 300 H 240
M 100 160 V 240
M 300 160 V 240
M 560 100 H 640
M 560 300 H 640
M 500 160 V 240
M 700 160 V 240
M 560 500 H 640
M 560 700 H 640
M 500 560 V 640
M 700 560 V 640
M 160 500 H 240
M 160 700 H 240
M 100 560 V 640
M 300 560 V 640
"/>
<g dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40">
<circle cx="100" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="100" class="fillfg">F1L</text>
<circle cx="300" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="100" class="fillfg">M2L</text>
<circle cx="500" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="100" class="fillfg">F4L</text>
<circle cx="700" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="100" class="fillfg">M3L</text>
<circle cx="100" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="300" class="fillfg">F2S</text>
<circle cx="300" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="300" class="fillfg">M1S</text>
<circle cx="500" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="300" class="fillfg">F3S</text>
<circle cx="700" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="300" class="fillfg">M4S</text>
<circle cx="100" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="500" class="fillfg">F3L</text>
<circle cx="300" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="500" class="fillfg">M4L</text>
<circle cx="500" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="500" class="fillfg">F2L</text>
<circle cx="700" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="500" class="fillfg">M1L</text>
<circle cx="100" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="700" class="fillfg">F4S</text>
<circle cx="300" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="700" class="fillfg">M3S</text>
<circle cx="500" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="700" class="fillfg">F1S</text>
<circle cx="700" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="700" class="fillfg">M2S</text>
</g>
<!-- end generated svg -->
</g>
</svg>
</div>
<div class="para">
Beispiel:
Vierer-Gruppe
<div class="nowrap">M1S-F3S-F2L-M4L</div>.
Horizontal-Paare:
M1S-F3S und M4L-F2L =
Sohn-Tochter und Vater-Mutter =
2022-08-14 21:01:55 +02:00
gleiches Alter.
Vertikal-Paare:
M1S-M4L und F3S-F2L =
Sohn-Vater und Tochter-Mutter =
2022-08-14 21:01:55 +02:00
gleiches Geschlecht.
Diagonal-Paare:
M1S-F2L und F3S-M4L =
Sohn-Mutter und Tochter-Vater =
2022-08-14 21:01:55 +02:00
gleiche Diagonale.
</div>
<div class="para">
Wie genau funktioniert der Partnertausch?
Das weiss ich noch nicht,
und das werden wir im Experiment sehen.
Ich glaube:
Vierer-Gruppen
2022-07-29 12:58:38 +02:00
<div class="annotation" onClick="clickAnnotation(this)" title='
"schwingen" ... "swinger" ...
partnertausch beim sex.
sex ist immer so ein tabu-thema,
was immer alles ganz kompliziert macht.
warum ist sex kompliziert?
hygiene: monogamie zum vermeiden von geschlechtskrankheiten.
übervölkerung: sex-tabu zum bremsen der vermehrung.
natürliche hierarchie: es gibt immer einen besten partner -> natürliche monogamie.
'>"schwingen"</div>
immer zwischen
Horizontal-Paare und Vertikal-Paare.
</div>
<div class="para">
TODO
exodus. brain drain.
alle guten laufen weg.
übrig bleibt nur der abschaum.
die karavane zieht weiter.
wertvolle menschen rekrutieren:
schöne, schlaue, starke, high value male, high value female.
arche noah.
</div>
<div class="para">
TODO
schönheit ist subjektiv.
kompatibilität = schönheit = attraktion.
</div>
<div class="center-x">
<svg id="alchi-peer-exchange-partnertausch" style="height:8em; margin-top:1em"
viewBox="-17 -21 296 117"
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs32" />
<g
font-size="14.19px"
font-family="sans-serif"
text-anchor="middle"
dominant-baseline="mathematical"
stroke-width="1"
fill="none"
stroke="#000000"
id="g379"
transform="translate(-76.5,-108.5)">
<g
id="g1171"
transform="translate(197.12646,110)">
<rect
x="43"
y="-3"
width="114"
height="78"
stroke-dasharray="1, 2"
id="rect337" />
<path
transform="translate(118)"
d="M 18,0 14.4,3.6 H 3.6 V 14.4 L 7.2,18 3.6,21.6 V 32.4 H 14.4 L 18,36 21.6,32.4 H 32.4 V 21.6 L 28.8,18 32.4,14.4 V 3.6 H 21.6 Z"
id="path341" />
<path
transform="translate(46)"
d="M 18,7.2 14.4,3.6 H 3.6 V 14.4 L 0,18 3.6,21.6 v 10.8 h 10.8 l 3.6,-3.6 3.6,3.6 H 32.4 V 21.6 L 36,18 32.4,14.4 V 3.6 H 21.6 Z"
id="path343" />
<path
transform="translate(46,36)"
d="M 18,0 14.4,3.6 H 3.6 V 14.4 L 7.2,18 3.6,21.6 V 32.4 H 14.4 L 18,36 21.6,32.4 H 32.4 V 21.6 L 28.8,18 32.4,14.4 V 3.6 H 21.6 Z"
id="path345" />
<path
transform="translate(118,36)"
d="M 18,7.2 14.4,3.6 H 3.6 V 14.4 L 0,18 3.6,21.6 v 10.8 h 10.8 l 3.6,-3.6 3.6,3.6 H 32.4 V 21.6 L 36,18 32.4,14.4 V 3.6 H 21.6 Z"
id="path347" />
<g
id="g1147">
<text
fill="#000000"
y="16"
x="64"
id="text357"
style="stroke:none">MS</text>
<text
fill="#000000"
y="16"
x="136"
id="text359"
style="stroke:none">FS</text>
<text
fill="#000000"
y="52"
x="136"
id="text361"
style="stroke:none">FL</text>
<text
fill="#000000"
y="52"
x="64"
id="text363"
style="stroke:none">ML</text>
</g>
</g>
<g
id="g1159">
<rect
x="61"
y="89"
width="78"
height="114"
stroke-dasharray="1, 2"
id="rect339" />
<path
transform="translate(100,92)"
d="M 18,0 14.4,3.6 H 3.6 V 14.4 L 7.2,18 3.6,21.6 V 32.4 H 14.4 L 18,36 21.6,32.4 H 32.4 V 21.6 L 28.8,18 32.4,14.4 V 3.6 H 21.6 Z"
id="path349" />
<path
transform="translate(64,92)"
d="M 18,7.2 14.4,3.6 H 3.6 V 14.4 L 0,18 3.6,21.6 v 10.8 h 10.8 l 3.6,-3.6 3.6,3.6 H 32.4 V 21.6 L 36,18 32.4,14.4 V 3.6 H 21.6 Z"
id="path351" />
<path
transform="translate(64,164)"
d="M 18,0 14.4,3.6 H 3.6 V 14.4 L 7.2,18 3.6,21.6 V 32.4 H 14.4 L 18,36 21.6,32.4 H 32.4 V 21.6 L 28.8,18 32.4,14.4 V 3.6 H 21.6 Z"
id="path353" />
<path
transform="translate(100,164)"
d="M 18,7.2 14.4,3.6 H 3.6 V 14.4 L 0,18 3.6,21.6 v 10.8 h 10.8 l 3.6,-3.6 3.6,3.6 H 32.4 V 21.6 L 36,18 32.4,14.4 V 3.6 H 21.6 Z"
id="path355" />
<g
id="g1141">
<text
fill="#000000"
y="108"
x="118"
id="text365"
style="stroke:none">FS</text>
<text
fill="#000000"
y="108"
x="82"
id="text367"
style="stroke:none">MS</text>
<text
fill="#000000"
y="180"
x="82"
id="text369"
style="stroke:none">ML</text>
<text
fill="#000000"
y="180"
x="118"
id="text371"
style="stroke:none">FL</text>
</g>
</g>
<g
id="g1057"
transform="translate(-1.663659)">
<g
id="g887"
transform="translate(-21.947936,2.6004907)">
<g
id="g879"
transform="translate(23.189266,-2.6004833)">
<path
d="m 172.3006,136.72979 h 35.36992"
id="path375" />
<path
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:round"
d="m 204.67052,139.72979 3,-3 -3,-3"
id="path7847" />
</g>
<use
x="0"
y="0"
xlink:href="#g879"
id="use881"
transform="matrix(-1,0,0,1,426.34965,18.540421)" />
</g>
</g>
</g>
</svg>
</div>
<div class="para">
Hier zeige ich Menschen als Puzzel-Teile.
<div class="nowrap">Nase nach Innen</div>
= <div class="nowrap">introvertierter Subtyp</div>.
<div class="nowrap">Nase nach Aussen</div>
= <div class="nowrap">extravertierter Subtyp</div>.
Die Bindungen sind "Monolog-Bindungen":
Ein Bindungs-Partner spielt "Seher und Redner" (unsichtbar und taub),
der andere Bindungs-Partner spielt "Hörer und Zeiger" (stumm und blind).
</div>
<div class="para">
Ich glaube:
Es gibt eine Verbindung zwischen Subtyp und Bindungs-Partner.
2022-08-13 15:30:56 +02:00
Diese Verbindung geht in beide Richtungen (bidirektional):
Ein bestimmter Subtyp wirkt als Mating Call
für einen bestimmten Bindungs-Partner.
Und andersrum:
Ein bestimmter Bindungs-Partner (Mate Presence)
aktiviert einen bestimmten Subtyp.
</div>
<div class="para">
Ich glaube:
Nur wenige Menschen haben ein Gleichgewicht
zwischen ihren 2 Subtypen.
Die meisten Menschen sind "spezialisiert" auf einen Subtyp
(Stärke, mehr Erfahrung),
und der andere Subtyp ist
<div class="annotation" onClick="clickAnnotation(this)" title='
Sozial-Therapie.
Ziel:
Jeder soll beide seiner Subtypen spielen.
= mutable modality (wechselhafte Modalität) in der Astrologie.
Anfang der Therapie:
Paare bilden,
Vierer-Gruppen bilden.
'>schwächer.</div>
</div>
<div class="para">
Ob und wie die Diagonal-Paare funktionieren,
weiss ich noch nicht. Diagonal-Paare: MS-FL und FS-ML.
</div>
<div class="para">
Schritt drei ist das <b>Wechseln zwischen Vierer-Gruppen</b>.
Das Muster zeigt 2 verschiedene Vierer-Gruppen:
Kreuze und Quadrate.
Kreuze verbinden alle 4 Typen.
Quadrate verbinden nur 2 Typen (Beispiel: 1-2-1-2).
</div>
<div class="para">
Die Verbindung aus Kreuz und Quadrat heisst "Pallas".
Es ist eine Verbindung von Gegensätzen (conjunctio oppositorum),
so wie "Tag und Nacht".
Das Pallas-Symbol verbindet 7 Punkte
<div class="annotation" onClick="clickAnnotation(this)" title='
Der Anfangs-Buchstabe P von Pallas
ist der 16. Buchstabe im Alphabet
(immer diese Zufälle ...)
G ist der 16. Buchstabe im Hexadezimal-Alphabet (0123 4567 89AB CDEF G)
'>(Glückszahl 7).</div>
</div>
<div class="center-x">
<svg class="foldme" title="Pallas M1S" style="height:13.5em;margin:2em"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 600"
>
<style>
svg { --fg: black; --bg: white; } /* light mode */
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: white; --bg: black; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: white; --bg: black; } /* dark mode */
}
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
.fig1 .stroke {
stroke-width: 2;
stroke: black; /* fallback when css variables are not supported */
stroke: var(--fg);
}
.nofill {
fill: none;
}
.fillbg {
fill: white;
fill: var(--bg);
}
.fillfg {
fill: black;
fill: var(--fg);
}
</style>
<g class="fig1">
<!-- start generated svg -->
<!--
M 458 458 L 342 342 # M1S - F2L
M 458 342 L 342 458 # M4L - F3S
M 0 0 L 58 58 # F1L -
M 800 800 L 742 742 #
M 0 800 L 58 742 #
M 800 0 L 742 58 # M3L -
M 400 0 L 342 58 # M2L -
M 400 0 L 458 58 # F4L -
M 400 800 L 342 742 #
M 400 800 L 458 742 #
M 0 400 L 58 342 # F2S -
M 0 400 L 58 458 # F3L -
M 800 400 L 742 342 # M4S -
M 800 400 L 742 458 # M1L -
M 160 100 H 240 # F1L - M2L
M 160 300 H 240 # F2S - M1S
M 100 160 V 240 # F1L - F2S
M 300 160 V 240 # M2L - M1S
M 560 100 H 640 # F4L - M3L
M 560 300 H 640 # F3S - M4S
M 500 160 V 240 # F4L - F3S
M 700 160 V 240 # M3L - M4S
M 560 500 H 640 # F2L - M1L
M 560 700 H 640
M 500 560 V 640
M 700 560 V 640
M 160 500 H 240 # F3L - M4L
M 160 700 H 240
M 100 560 V 640
M 300 560 V 640
-->
<!-- variant: four squares, one cross -->
<path class="stroke nofill" d="
M 458 458 L 342 342
M 458 342 L 342 458
M 0 0 L 58 58
M 800 800 L 742 742
M 0 800 L 58 742
M 800 0 L 742 58
M 400 0 L 342 58
M 400 0
M 400 800 L 342 742
M 400 800 L 458 742
M 0 400 L 58 342
M 0 400
M 800 400 L 742 342
M 800 400 L 742 458
M 160 100 H 240
M 160 300 H 240
M 100 160 V 240
M 300 160 V 240
M 560 100
M 560 300 H 600
M 500 200 V 240
M 700 160 V 240
M 560 500 H 640
M 560 700 H 640
M 500 560 V 640
M 700 560 V 640
M 200 500 H 240
M 160 700 H 240
M 100 560
M 300 560 V 640
"/>
<g dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40">
<circle cx="100" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="100" class="fillfg">F1L</text>
<circle cx="300" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="100" class="fillfg">M2L</text>
<!-- TODO remove?
<circle cx="500" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="100" class="fillfg">F4L</text>
-->
<circle cx="700" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="100" class="fillfg">M3L</text>
<circle cx="100" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="300" class="fillfg">F2S</text>
<circle cx="300" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="300" class="fillfg">M1S</text>
<circle cx="500" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="300" class="fillfg">F3S</text>
<circle cx="700" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="300" class="fillfg">M4S</text>
<!-- TODO remove?
<circle cx="100" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="500" class="fillfg">F3L</text>
-->
<circle cx="300" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="500" class="fillfg">M4L</text>
<circle cx="500" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="500" class="fillfg">F2L</text>
<circle cx="700" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="500" class="fillfg">M1L</text>
<circle cx="100" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="700" class="fillfg">F4S</text>
<circle cx="300" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="700" class="fillfg">M3S</text>
<circle cx="500" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="700" class="fillfg">F1S</text>
<circle cx="700" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="700" class="fillfg">M2S</text>
</g>
<!-- end generated svg -->
</g>
</svg>
</div>
<div class="para" data-comment='
"F2 ist besser zum Ficken und Schlafen"
"Ficken" klingt grob, dreckig.
aber ich brauche ein tunwort, verb,
als kontrast zu "Reden und Arbeiten".
"meine 2 Frauen sind F2 und F3"
ich glaube:
jeder mensch braucht 2 partner.
beide partner haben gleiches alter und anderes geschlecht.
auch hier können wir vierer-gruppen bauen:
alle vier haben gleiches alter.
2 männer und 2 frauen.
'>
Was ist der Unterschied zwischen Kreuz- und Quadrat-Gruppen?
Das weiss ich noch nicht,
und das werden wir im Experiment sehen.
Ich glaube:
Kreuze sind besser am Tag
(Tagesordnung, Arbeit, Arbeitskollegen,
Teamwork, angezogen, Aktivität).
Quadrate sind besser in der Nacht
(Nachtordnung, Familie, Sex, privat, nackt, Ruhe).
Warum?
Ich selber bin M1
und meine 2 Frauen sind F2 und F3 (gleiches Alter).
Für mich gilt:
F2 ist besser zum Ficken und Schlafen (Nacht),
F3 ist besser zum Reden und Arbeiten (Tag).
</div>
<div class="para">
Diesen Wechsel zwischen Tagesordnung und Nachtordnung
kennen wir schon vom Wechsel
zwischen Schlafplatz (Familie) und Arbeitsplatz (Freunde).
2022-07-29 12:58:38 +02:00
Auch Tiere machen jeden Tag zwei "Wildwechsel"
zwischen Schlafplatz und Fressplatz.
</div>
<div class="para">
Was ist der Unterschied zwischen den zwei Quadrat-Gruppen?
</div>
2022-07-29 12:58:38 +02:00
<div class="center-x">
<svg class="foldme" title="two squares" style="width:18em;margin:2em"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 400"
>
<style>
svg { --fg: black; --bg: white; } /* light mode */
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: white; --bg: black; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: white; --bg: black; } /* dark mode */
}
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
.fig1 .stroke {
stroke-width: 2;
stroke: black; /* fallback when css variables are not supported */
stroke: var(--fg);
}
.nofill {
fill: none;
}
.fillbg {
fill: white;
fill: var(--bg);
}
.fillfg {
fill: black;
fill: var(--fg);
}
</style>
<g class="fig1">
<!-- start generated svg -->
<!-- variant: four squares, one cross -->
<path class="stroke nofill" d="
M 458 458 L 342 342
M 458 342 L 342 458
M 0 0 L 58 58
M 800 800 L 742 742
M 0 800 L 58 742
M 800 0 L 742 58
M 400 0 L 342 58
M 400 0 L 458 58
M 400 800 L 342 742
M 400 800 L 458 742
M 0 400 L 58 342
M 0 400 L 58 458
M 800 400 L 742 342
M 800 400 L 742 458
M 160 100 H 240
M 160 300 H 240
M 100 160 V 240
M 300 160 V 240
M 560 100 H 640
M 560 300 H 640
M 500 160 V 240
M 700 160 V 240
M 560 500 H 640
M 560 700 H 640
M 500 560 V 640
M 700 560 V 640
M 160 500 H 240
M 160 700 H 240
M 100 560 V 640
M 300 560 V 640
"/>
<g dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40">
<circle cx="100" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="100" class="fillfg">F1L</text>
<circle cx="300" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="100" class="fillfg">M2L</text>
<circle cx="500" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="100" class="fillfg">F4L</text>
<circle cx="700" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="100" class="fillfg">M3L</text>
<circle cx="100" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="300" class="fillfg">F2S</text>
<circle cx="300" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="300" class="fillfg">M1S</text>
<circle cx="500" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="300" class="fillfg">F3S</text>
<circle cx="700" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="300" class="fillfg">M4S</text>
<circle cx="100" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="500" class="fillfg">F3L</text>
<circle cx="300" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="500" class="fillfg">M4L</text>
<circle cx="500" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="500" class="fillfg">F2L</text>
<circle cx="700" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="500" class="fillfg">M1L</text>
<circle cx="100" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="700" class="fillfg">F4S</text>
<circle cx="300" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="700" class="fillfg">M3S</text>
<circle cx="500" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="700" class="fillfg">F1S</text>
<circle cx="700" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="700" class="fillfg">M2S</text>
</g>
<!-- end generated svg -->
</g>
</svg>
</div>
<div class="para">
Was haben die Typen 12 gemeinsam?
Beide sind "orthogonal", rechtwinklig.
Typ 1 ist "oben breit, unten lang",
Typ 2 ist "oben lang, unten breit".
Also die "Verbindung von Gegensätzen" in einem Körper.
Ich glaube:
Dadurch haben Typen 12 ein komplexes Weltbild
2022-07-29 12:58:38 +02:00
(zweidimensional, Logik, Egoisten, Individualisten, Narzissten, Low Agreeableness, Streitlust, Einzelkämpfer).
Typen 34 erreichen diese Komplexität nur durch Paarung (Paar aus Typ 3 und Typ 4),
aber "innerer Dialog" von Typen 12
ist immer effizienter als
"äusserer Dialog" zwischen Typ 3 und Typ 4.
</div>
<div class="para">
Was haben die Typen 34 gemeinsam?
Beide sind "parallel".
Typ 3 ist "oben breit, unten breit",
Typ 4 ist "oben lang, unten lang".
Ich glaube:
Dadurch haben Typen 34 ein einfaches Weltbild
2022-07-29 12:58:38 +02:00
(eindimensional, Grafik, Altruisten, Kollektivisten, High Agreeableness, Harmoniesucht, Teamsport).
Typen 34 erreichen ein komplexes Weltbild nur durch Paarung (Paar aus Typ 3 und Typ 4),
2022-07-29 12:58:38 +02:00
oder in den Kreuz-Gruppen (bei Verbindung zu Typen 12),
also "äusserer Dialog" mit anderen Typen.
</div>
<div class="para">
<b>Vier Typen:</b>
Grundlage für mein Muster ist Persönlichkeits-Psychologie.
Also: Menschen in Schubladen stecken.
Dieser Teil von Psychologie ist uralt, locker 2000 Jahre alt,
und schon sehr gut erforscht.
Quasi-Konsens: Es gibt vier Persönlichkeitstypen.
Für diese Vier Typen werden immer wieder neue Namen erfunden,
also jeder Autor hat seinen Namensraum (namespace).
</div>
2022-08-10 17:39:01 +02:00
<hr>
<div class="para">
Vier Typen:
2022-08-13 15:30:56 +02:00
<div class="annotation" onClick="clickAnnotation(this)" title='
TODO layout: keep table on one page
'>Hier</div>
ein paar
<div class="annotation" onClick="clickAnnotation(this)" title='
TODO more text. add a short description to every name.
TODO more translations from
https://milahu.github.io/alchi/src/alchi-tables/alchi-tables.html
ähnlich: true colors: green blue orange gold = owl dolphin fox beaver
<tr>
<th><a class="nofootnote" href="https://tobias-beck.com/wp-content/uploads/2017/09/EV-PT.pdf">Tobias Beck</a></th>
<td>Hai</td>
<td>Wal</td>
<td>Delfin</td>
<td>Eule</td>
</tr>
too broad, breaks layout
<tr>
<th><a class="nofootnote" href="http://bcn.boulder.co.us/~neal/uu/globalization/lerner-5C.html">circular paradigm</a></th>
<td>liberal separatist</td>
<td>conservative separatist</td>
<td>liberal integrationist</td>
<td>conservative integrationist</td>
</tr>
nutzlos
<tr>
<th>Körperteil</th>
<td>Linkes Hirn</td>
<td>Rechte Hand</td>
<td>Linke Hand</td>
<td>Rechtes Hirn</td>
</tr>
2022-07-29 12:58:38 +02:00
https://en.wikipedia.org/wiki/Playing_card_suit#Character_encodings
french suit: Heart Pike Clover Tile
french suit: Heart Spade Club Diamond
german suit: Heart Leaf Bell Acorn
swiss suit: Rose Shield Bell Acorn
latin suit: Cup Sword Coin Club
latin suit: Coppa Spada Denaro Bastone
latin suit: Kelch Schwert Gold Schlagstock
french white: ♡ ♤ ♧ ♢
french black: ♥ ♠ ♣ ♦
nobody wants to be Fascist ...
<tr>
<!-x- Hans Eysenck -x->
<th><a class="nofootnote" href="https://en.wikipedia.org/wiki/Political_spectrum#Hans_Eysenck">Political Spectrum</a></th>
<td>Communist</td>
<td>Capitalist</td>
<td>Socialist</td>
<td>Fascist</td>
</tr>
2022-07-29 12:58:38 +02:00
'>Übersetzungen:</div>
2022-07-29 12:58:38 +02:00
</div>
<table class="four-basetypes nowrap" style="margin-top:1em; margin-bottom:1em">
<tbody>
<tr>
<th>Typ Nummer</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://en.wikipedia.org/wiki/Classical_element">Element</a></th>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
element ist schön weil kurz.
"feuer mann" sagt sicht leichter als
"typ eins mann" oder
"vordenker mann" oder
"handwerker mann" oder
"linkshirn mann" oder
...
'>Feuer</div>
</td>
<td>Erde</td>
<td>Luft</td>
<td>Wasser</td>
</tr>
<tr>
<th>Rolle</th>
<td>Vordenker</td>
<td>Nachmacher</td>
<td>Vormacher</td>
<td>Nachdenker</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://en.wikipedia.org/wiki/Keirsey_Temperament_Sorter">David Keirsey</a></th>
<td>Handwerker</td>
<td>Händler</td>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
TODO better? Redner, Prediger, Idealist, ...
'>Redner</div>
</td>
<td>Denker</td>
</tr>
<tr>
<th>
<div class="annotation" onClick="clickAnnotation(this)" title='
Interesse = hauptberuf = grundtyp
'>Interesse</div>
</th>
<td>Gerechtigkeit</td>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
Gewohnheit, ritual, routine, wiederholung, tradition
'>Gewohnheit</div>
</td>
<td>Philosophie</td>
<td>Technik</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://libgen.rs/search.php?req=Robert+Moore+-+King+Warrior+Magician+Lover">Robert Moore</a></th>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
original: 1234 = Warrior Lover Magician King
'>Kämpfer</div>
</td>
<td>Liebhaber</td>
<td>Magier</td>
<td>König</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://libgen.rs/search.php?req=Carol+Tuttle+-+The+Child+Whisperer">Carol Tuttle</a></th>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
original: 1234 = Determined Sensitive Funny Serious
rilke - panther:
Der weiche Gang geschmeidig starker Schritte,
der sich im allerkleinsten Kreise dreht,
ist wie ein Tanz von Kraft um eine Mitte,
in der betäubt ein großer Wille steht.
-> "wille zur macht" ... "geborener könig" ... "dominant" ... "hausherr"
'>Willensstark</div>
</td>
<td>Sensibel</td>
<td>Lustig</td>
<td>Ernst</td>
</tr>
<tr>
<th>Finger</th>
<td>Mittel</td>
<td>Klein</td>
<td>Ring</td>
<td>Zeige</td>
</tr>
<tr>
<th>Körperform</th>
<td>Herz ♡</td>
<td>Birne ♤</td>
<td>Breit ♧</td>
<td>Lang ♢</td>
</tr>
2022-08-14 21:01:55 +02:00
<!--
<tr>
<th>Kleid oben</th>
<td>Gelb-Schwarz</td>
<td>Blau-Weiss</td>
<td>Rot-Schwarz</td>
<td>Grün-Weiss</td>
</tr>
<tr>
<th>Kleid unten</th>
<td>Blau-Weiss</td>
<td>Gelb-Schwarz</td>
<td>Grün-Schwarz</td>
<td>Rot-Weiss</td>
</tr>
2022-08-14 21:01:55 +02:00
-->
<tr>
<th>Kleid oben</th>
<td>Schwarz-Gelb</td>
<td>Weiss-Blau</td>
<td>Schwarz-Rot</td>
<td>Weiss-Grün</td>
</tr>
<tr>
<th>Kleid unten</th>
<td>Weiss-Blau</td>
<td>Schwarz-Gelb</td>
<td>Schwarz-Grün</td>
<td>Weiss-Rot</td>
</tr>
<tr>
<th>Zylinder-Geometrie</th>
<td>Oben</td>
<td>Unten</td>
<td>Aussen</td>
<td>Innen</td>
</tr>
2022-07-29 12:58:38 +02:00
<tr>
<th>
<div class="annotation" onClick="clickAnnotation(this)" title='
Jahreszeit,
<a class="nofootnote" href="https://en.wikipedia.org/wiki/Baum_test">Baum-Test</a>
'>Jahreszeit</div>
</th>
2022-07-29 12:58:38 +02:00
<td>Herbst</td>
<td>Frühling</td>
<td>Sommer</td>
<td>Winter</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://en.wikipedia.org/wiki/Jungian_cognitive_functions">Carl Jung</a></th>
<td>Ntuition</td>
<td>Sensation</td>
<td>Feeling</td>
<td>Thinking</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://en.wikipedia.org/wiki/MBTI">MBTI</a></th>
<td>INTP</td>
<td>ESFJ</td>
<td>ENFP</td>
<td>ISTJ</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://en.wikipedia.org/wiki/Attachment_theory">Attachment Style</a></th>
<td>Balanced</td>
<td>Disorganized</td>
<td>Coercive</td>
<td>Avoidant</td>
</tr>
<tr>
<th>
<div class="annotation" onClick="clickAnnotation(this)" title='
Stress Response
the strange situation
TODO beschreiben
2022-08-14 21:01:55 +02:00
'>Stress: ↑ Aufregen</div>
</th>
<td>früh</td>
<td>spät</td>
<td>früh</td>
<td>spät</td>
</tr>
<tr>
2022-08-14 21:01:55 +02:00
<th>Stress: ↓ Beruhigen</th>
<td>früh</td>
<td>spät</td>
<td>spät</td>
<td>früh</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://en.wikipedia.org/wiki/Parenting_styles">Parenting Style</a></th>
<td>Authorative</td>
<td>Neglectful</td>
<td>Permissive</td>
2022-08-10 17:22:05 +02:00
<td>Autoritarian</td>
</tr>
<tr>
<th>Erziehungs-Stil</th>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
1 = aktiv = viel fordern + viel helfen
2 = passiv = wenig fordern + wenig helfen
3 = helfen = wenig fordern + viel helfen
4 = fordern = viel fordern + wenig helfen
'>aktiv</div>
</td>
<td>passiv</td>
<td>helfen</td>
<td>fordern</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://en.wikipedia.org/wiki/Somatotype">William Sheldon</a></th>
<td>mesomorph</td>
<td>mesomorph</td>
<td>endomorph</td>
<td>ectomorph</td>
</tr>
<tr>
<th>Gewichtsklasse</th>
<td>Mittelgewicht</td>
<td>Mittelgewicht</td>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
typ 3 kann auch "Mittelgewicht" sein wenn sportlich aktiv, aber nie "Leichtgewicht"
'>Schwergewicht</div>
</td>
<td>Leichtgewicht</td>
</tr>
<tr>
<th>Diät</th>
<td>Zone</td>
<td>Zone</td>
<td>LCHF, Keto</td>
<td>HCLF</td>
</tr>
2022-08-14 21:01:55 +02:00
<tr>
<th>Ayurveda Doshas</th>
<td>Pitta</td>
<td>[Prithvi]</td>
<td>Kapha</td>
<td>Vata</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://flowgenomeproject.com/flow-profile">Flow Profile</a></th>
<td>Hard Charger</td>
<td>Flow Goer</td>
<td>Crowd Pleaser</td>
<td>Deep Thinker</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://healthtype.org/the-healthtypes/">Health Type</a></th>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
Diplomat = types 24
Activator = types 13
'>Crusader</div>
</td>
<td>Guardian</td>
<td>Connector</td>
<td>Sensor</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://bc20questions.deloitte.com/">Business Chemistry</a></th>
<td>Driver</td>
<td>Guardian</td>
<td>Pioneer</td>
<td>Integrator</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://hiresuccess.com/help/understanding-the-4-personality-types">Hire Success</a></th>
<td>Director</td>
<td>Supporter</td>
<td>Socializer</td>
<td>Thinker</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://en.wikipedia.org/wiki/Bartle_taxonomy_of_player_types">Richard Bartle</a></th>
<td>Killer</td>
<td>Explorer</td>
<td>Socializer</td>
<td>Achiever</td>
</tr>
<tr>
<th><a class="nofootnote" href="https://en.wikipedia.org/wiki/The_Satanic_Bible">Anton LaVey</a></th>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
Anton LaVey: interest: 1234 = justice ritual philosophy technique
'>Satan</div>
</td>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
belial, bella, bell, bell-shape, pear-shape
'>Belial</div>
</td>
<td>Lucifer</td>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
technique, algorithm, step-by-step instruction
'>Leviathan</div>
</td>
</tr>
<tr>
<th>Simpsons</th>
<td>Marge</td>
<td>Homer</td>
<td>Bart</td>
<td>Lisa</td>
</tr>
<tr>
<th>South Park</th>
<td>Kenny</td>
<td>Stan</td>
<td>Cartman</td>
<td>Kyle</td>
</tr>
<tr>
<th>
<div class="annotation" onClick="clickAnnotation(this)" title='
American Dad: alternative translation: 1234 = Steve Stan Francine Hayley, weil Hayley: emotional, untreu, schlampig, idealistisch, pazifistisch, "liberal". stan ist mehr realistisch, pragmatisch, "konservativ".
American Dad: alternative translation: 1234 = Steve Hayley Francine Stan, weil Stan = hightech?
https://americandad.fandom.com/wiki/Hayley_Smith
'>American Dad</div>
</th>
<td>Steve</td>
<td>Stan</td>
<td>Francine</td>
<td>Hayley</td>
</tr>
<tr>
<th>Harry Potter</th>
<td>Gryffindor</td>
<td>Hufflepuff</td>
<td>Ravenclaw</td>
<td>Slytherin</td>
</tr>
</tbody>
</table>
2022-07-29 12:58:38 +02:00
<div class="para">
2022-08-13 15:30:56 +02:00
Mehr Übersetzungen in meinen <a href="https://milahu.github.io/alchi/tables">alchi-tables</a>.
2022-07-29 12:58:38 +02:00
</div>
<hr>
<div class="para">
<b>Wer ist wer?</b>
Also: Wer hat welchen Persönlichkeitstyp?
2022-07-29 12:58:38 +02:00
Das ist eine Schwachstelle meiner Theorie.
Meine Theorie funktioniert nur dann,
wenn wir die Typen richtig schätzen.
Also zumindest am Anfang
würde ich solche Menschen bevorzugen,
wo ich den Typ leicht schätzen kann.
</div>
2022-07-29 12:58:38 +02:00
<div class="para">
Also:
Wer ist
<div class="annotation" onClick="clickAnnotation(this)" title='
am liebsten würde ich diese frage delegieren mit
"bitte geh selber psychologie studieren"
aber das dauert zu lange und ist mühsam.
also muss ich hier zumindest einen überblick geben.
typen sind grundlage:
meine theorie funktioniert nur dann
wenn wir die typen richtig schätzen.
'>wer?</div>
2022-08-13 15:30:56 +02:00
Das sehe ich an <b>Körperform und Verhalten</b>.
2022-07-29 12:58:38 +02:00
</div>
<div class="para">
Einfach zu sehen sind "dicke" Menschen (Typ 3)
und
<div class="annotation" onClick="clickAnnotation(this)" title='
(Ja ich weiss schon, ich bin voll oberflächlich.
Du kannst auch 10 Fragebögen ausfüllen,
wenn dir das mehr Spaß macht ...)
'>"dünne"</div>
Menschen (Typ 4).
</div>
<div class="para">
Typ 3 Menschen können schnell Gewicht zunehmen
(Aufbau von Fett und Muskeln),
vor allem wenn sie viele Kohlenhydrate essen,
und können dieses Gewicht nur langsam wieder abnehmen
(LCHF-Diät, Keto-Diät).
2022-08-13 15:30:56 +02:00
Typ 3 Menschen überleben hartes Klima, Landklima, lange kalte Winter,
überleben mehrere Wochen ohne Essen (lange Fastenzeit).
</div>
<div class="para">
Typ 4 Menschen können nur langsam Gewicht zunehmen
2022-07-29 12:58:38 +02:00
(Hard Gainer) (können viele Kohlenhydrate essen aber werden nicht dick)
und verlieren dieses Gewicht schnell wieder.
2022-08-13 15:30:56 +02:00
Typ 4 Menschen brauchen mildes Klima, Seeklima, kurze warme Winter,
müssen jeden Tag essen (kurze Fastenzeit).
</div>
2022-07-29 12:58:38 +02:00
<div class="center-x">
<svg class="foldme" title="four body shapes" style="margin-top:0.5em; height:10em; "
version="1.1"
viewBox="0 0 142.5 82.46"
xmlns="http://www.w3.org/2000/svg"
>
<style>
svg { --fg: black; --bg: white; } /* light mode */
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: white; --bg: black; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: white; --bg: black; } /* dark mode */
}
2022-07-29 12:58:38 +02:00
.fig-four-body-types .stroke {
stroke-width: .5;
stroke: black; /* fallback when css variables are not supported */
stroke: var(--fg);
}
2022-07-29 12:58:38 +02:00
.fig-four-body-types .dotstroke {
stroke-width: 2;
stroke-width: 4;
stroke: black; /* fallback when css variables are not supported */
stroke: var(--fg);
stroke-dasharray: 10, 10;
}
2022-07-29 12:58:38 +02:00
.nofill {
fill: none;
}
2022-07-29 12:58:38 +02:00
.fillbg {
fill: white;
fill: var(--bg);
}
.fillfg {
fill: black;
fill: var(--fg);
}
/* TODO fix xy values
.fig-four-body-types text {
dominant-baseline: middle; /* FIXME unknown css property? */
text-anchor: middle;
font-family: sans;
}
*/
</style>
<!-- based on https://de.wikipedia.org/wiki/Datei:Bodyshapes.svg -->
<!-- TODO bigger heads, bigger numbers -->
<g class="fig-four-body-types" transform="translate(-31.42 -48.2)">
<g class="fillfg" transform="translate(124.8 18.74)">
<g>
<path d="m-5.284 38.41s-0.2631 1.888-0.5905 2.403c-1.931 2.23-4.834 2.679-7.039 4.537-1.801 1.801-5.671 8.828-5.636 8.945 0.0351 0.1169 2.783 3.379 3.929 4.408 1.146 1.029 3.134 2.853 3.227 3.087 0.0935 0.2339 0.3508 3.064 0.3508 3.064s0.1871-2.689 0.1637-2.923c-0.0234-0.2339-2.268-2.76-3.508-3.999-1.239-1.239-4.069-3.531-4.069-3.625 2.342-3.45 4.335-7.622 7.928-9.986 2.651-1.149 5.655-2.524 5.244-5.911z" fill-rule="evenodd"/>
<path d="m-10.08 49.66s-3.286 3.8-3.286 4.128c0 0.3274 3.122 5.601 3.099 5.589 0 0-3.905-5.227-3.905-5.741 0-0.5145 3.976-4.046 4.116-4.046m-0.2222 1.567c0.2253 3.324 2.556 4.916 2.556 7.808 0 3.037-3.433 4.767-3.433 10.77 0 6.408 3.718 14.22 3.718 14.22s-0.0935 8.021 0.421 10.64c0.5145 2.619 1.66 7.577 1.66 8.419s-0.0936 2.572-0.7484 3.601c-0.6548 1.029-1.403 1.777-1.403 1.777s1.777-3.181 1.777-4.303-1.231-7.468-1.871-9.354c-0.8653-2.549-0.1403-10.64-0.1403-10.64s-3.882-7.646-3.882-14.43c0-7.023 3.486-8.566 3.486-10.89 0-2.298-1.875-3.731-2.422-7.512"/>
<path d="m-1.975 38.41s0.2631 1.888 0.5905 2.403c1.931 2.23 4.834 2.679 7.039 4.537 1.801 1.801 5.671 8.828 5.636 8.945-0.0351 0.1169-2.783 3.379-3.929 4.408-1.146 1.029-3.134 2.853-3.227 3.087-0.0936 0.2339-0.3508 3.064-0.3508 3.064s-0.1871-2.689-0.1637-2.923c0.0234-0.2339 2.268-2.76 3.508-3.999 1.239-1.239 4.069-3.531 4.069-3.625-2.342-3.45-4.335-7.622-7.928-9.986-2.651-1.149-5.655-2.524-5.244-5.911z" fill-rule="evenodd"/>
<path d="m2.825 49.66s3.286 3.8 3.286 4.128c0 0.3274-3.122 5.601-3.099 5.589 0 0 3.905-5.227 3.905-5.741 0-0.5145-3.976-4.046-4.116-4.046m0.2222 1.567c-0.2253 3.324-2.556 4.916-2.556 7.808 0 3.037 3.433 4.767 3.433 10.77 0 6.408-3.718 14.22-3.718 14.22s0.0935 8.021-0.421 10.64c-0.5145 2.619-1.66 7.577-1.66 8.419 0 2.314 1.625 4.606 1.625 5.354 0 0.5342-0.7647 2.663-0.7647 2.663s0.9772-1.933 0.9772-2.573c0-1.916-1.463-3.577-1.463-4.369 0-2.082 1.231-7.468 1.871-9.354 0.8653-2.549 0.1403-10.64 0.1403-10.64s3.882-7.646 3.882-14.43c0-7.023-3.486-8.566-3.486-10.89 0-2.298 1.875-3.731 2.422-7.512"/>
<g fill-rule="evenodd">
<path d="m-3.623 109.1c0.4514-12.57 0.525-25.16-0.0525-37.73-0.3044 12.57-0.5393 25.16 0.0525 37.73z"/>
<path d="m-5.068 29.95c-0.9724 0.6639-1.828 1.591-1.828 4.221 0 2.332 1.307 4.918 3.34 4.977 3.237 0.09449 3.007-5.163 3.007-5.163l-0.3471 0.0041s0.0267 0.7507-0.0433 1.266c-0.0892 0.6568-0.1618 3.345-2.567 3.463-1.503 0.07382-3.055-2.105-2.962-4.578 0.081-2.161 0.4294-2.835 0.8856-3.416 1.321-1.685 2.675-1.002 3.284-0.5498 0.4717 0.3507 0.9487 1.165 1.165 1.928 0.2786 0.9841 0.2384 1.887 0.2384 1.887l0.3471-0.0041s0.0808-0.6093-0.3153-2.099c-0.1746-0.6566-0.5754-1.508-1.42-2.001-1.217-0.7098-2.076-0.418-2.783 0.06468z"/>
<path d="m-80.13 38.41s-0.2631 1.888-0.5905 2.403c-1.931 2.23-4.811 1.51-7.039 4.537-1.801 1.801-5.671 8.828-5.636 8.945 0.0351 0.1169 2.783 3.379 3.929 4.408 1.146 1.029 3.134 2.853 3.227 3.087 0.0935 0.2339 0.3508 3.064 0.3508 3.064s0.1871-2.689 0.1637-2.923c-0.0234-0.2339-2.268-2.76-3.508-3.999-1.239-1.239-4.069-3.531-4.069-3.625 2.342-3.45 4.335-7.902 7.928-10.27 3.797-1.617 5.655-2.243 5.244-5.63z"/>
</g>
<path d="m-84.82 49.65s-3.625 3.987-3.625 4.315c0 0.3274 2.923 5.426 2.9 5.414 0 0-3.695-4.934-3.695-5.449 0-0.5145 4.303-4.35 4.443-4.35m-1.193 1.321c0.2253 3.324 0.83 6.431 1.375 9.048 0.3684 1.768 0.7732 3.312 0.7732 4.548 0 1.139-0.4569 4.427-0.4413 5.405 0.0468 2.947 1.637 14.45 1.637 14.45s0.1403 7.624 0.6548 10.24c0.5145 2.619 1.731 8.606 1.731 9.448 0 0.8419-0.0935 2.572-0.7484 3.601-0.6548 1.029-1.403 1.777-1.403 1.777s1.777-3.18 1.777-4.303c0-1.123-1.38-8.466-1.918-10.38-0.5379-1.918-0.1871-10.29-0.1871-10.29s-2.152-11.79-2.152-14.78c0-0.7523 0.3645-3.913 0.3645-4.836-0.1376-1.377-0.2369-2.885-0.4561-4.25-0.4915-3.061-1.185-5.508-1.335-9.289"/>
<path d="m-77.07 38.41s0.2631 1.888 0.5905 2.403c1.931 2.23 4.811 1.51 7.039 4.537 1.801 1.801 5.671 8.828 5.636 8.945-0.0351 0.1169-2.783 3.379-3.929 4.408-1.146 1.029-3.134 2.853-3.227 3.087-0.0935 0.2339-0.3508 3.064-0.3508 3.064s-0.1871-2.689-0.1637-2.923c0.0234-0.2339 2.268-2.76 3.508-3.999 1.239-1.239 4.069-3.531 4.069-3.625-2.342-3.45-4.335-7.902-7.928-10.27-3.797-1.617-5.655-2.243-5.244-5.63z" fill-rule="evenodd"/>
<path d="m-71.99 49.65s3.625 3.987 3.625 4.315c0 0.3274-2.923 5.426-2.9 5.414 0 0 3.695-4.934 3.695-5.449 0-0.5145-4.303-4.35-4.443-4.35m1.193 1.321c-0.2253 3.324-0.83 6.431-1.375 9.048-0.3684 1.768-0.7732 3.312-0.7732 4.548 0 1.139 0.4569 4.427 0.4413 5.405-0.0468 2.947-1.637 14.45-1.637 14.45s-0.1403 7.624-0.6548 10.24c-0.5145 2.619-1.896 7.531-1.896 8.373 0 2.182 1.79 4.786 1.79 5.602 0 1.352-0.4985 3.034-0.4985 3.034s0.8663-1.437 0.8663-2.836c0-1.045-1.486-3.945-1.486-5.486s1.247-6.63 1.785-8.548c0.5379-1.918 0.1871-10.29 0.1871-10.29s2.152-11.79 2.152-14.78c0-0.7523-0.3645-3.913-0.3645-4.836 0.1376-1.377 0.2369-2.885 0.4561-4.25 0.4915-3.061 1.185-5.508 1.335-9.289"/>
<path d="m-78.47 109.1c0.4514-12.57 0.5251-25.16-0.0525-37.73-0.3044 12.57-0.5393 25.16 0.0525 37.73z" fill-rule="evenodd"/>
<path d="m-80.04 29.95c-0.9724 0.6639-1.828 1.591-1.828 4.221 0 2.332 1.307 4.918 3.34 4.977 3.237 0.09449 3.007-5.163 3.007-5.163l-0.3471 0.0041s0.0267 0.7507-0.0433 1.266c-0.0892 0.6568-0.1618 3.345-2.567 3.463-1.503 0.07382-3.055-2.105-2.962-4.578 0.081-2.161 0.4294-2.835 0.8856-3.416 1.321-1.685 2.675-1.002 3.284-0.5498 0.4717 0.3507 0.9487 1.165 1.165 1.928 0.2786 0.9841 0.2384 1.887 0.2384 1.887l0.3471-0.0041s0.0808-0.6093-0.3153-2.099c-0.1746-0.6566-0.5754-1.508-1.42-2.001-1.217-0.7098-2.076-0.418-2.783 0.06468z" fill-rule="evenodd"/>
</g>
<path class="nofill stroke" d="m-78.44 68.36-6.464-21.67 12.93-1e-6z"/>
<g class="fillfg">
<path d="m-42.98 38.41s-0.2631 1.888-0.5905 2.403c-1.931 2.23-4.834 2.679-7.039 4.537-1.801 1.801-5.671 8.828-5.636 8.945 0.0351 0.1169 2.783 3.379 3.929 4.408 1.146 1.029 3.134 2.853 3.227 3.087 0.0935 0.2339 0.3508 3.064 0.3508 3.064s0.1871-2.689 0.1637-2.923c-0.0234-0.2339-2.268-2.76-3.508-3.999-1.239-1.239-4.069-3.531-4.069-3.625 2.342-3.45 4.335-7.622 7.928-9.986 2.651-1.149 5.655-2.524 5.244-5.911z" fill-rule="evenodd"/>
<path d="m-46.36 48.2s-4.747 5.262-4.747 5.589c0 0.3274 3.122 5.601 3.099 5.589 0 0-3.905-5.227-3.905-5.741 0-0.5145 5.437-5.507 5.578-5.507m-0.2806 0.3157c0.2253 3.324 0.662 5.144 0.662 7.762 0 3.49-1.507 6.915-2.033 8.29-0.5184 1.354-0.7375 4.427-0.722 5.405 0.0468 2.947 3.531 14.06 3.531 14.06s-0.0935 8.021 0.421 10.64c0.5145 2.619 1.777 8.396 1.777 9.238s-0.0935 2.572-0.7484 3.601c-0.6548 1.029-1.403 1.777-1.403 1.777s1.777-3.181 1.777-4.303-1.45-8.255-1.988-10.17c-0.5379-1.918-0.2105-10.31-0.2105-10.31s-3.812-11.76-3.812-14.76c0-0.7523 0.3848-3.69 0.6919-4.836 0.3087-1.152 2.187-5.136 2.187-8.577 0-3.108-0.0746-3.52-0.6217-7.301"/>
<path d="m-39.37 38.41s0.2631 1.888 0.5905 2.403c1.931 2.23 4.834 2.679 7.039 4.537 1.801 1.801 5.671 8.828 5.636 8.945-0.0351 0.1169-2.783 3.379-3.929 4.408-1.146 1.029-3.134 2.853-3.227 3.087-0.0935 0.2339-0.3508 3.064-0.3508 3.064s-0.1871-2.689-0.1637-2.923c0.0234-0.2339 2.268-2.76 3.508-3.999 1.239-1.239 4.069-3.531 4.069-3.625-2.342-3.45-4.335-7.622-7.928-9.986-2.651-1.149-5.655-2.524-5.244-5.911z" fill-rule="evenodd"/>
<path d="m-35.98 48.2s4.747 5.262 4.747 5.589c0 0.3274-3.122 5.601-3.099 5.589 0 0 3.905-5.227 3.905-5.741 0-0.5145-5.437-5.507-5.578-5.507m0.2806 0.3157c-0.2253 3.324-0.662 5.144-0.662 7.762 0 3.49 1.507 6.915 2.033 8.29 0.5184 1.354 0.7375 4.427 0.722 5.405-0.0468 2.947-3.531 14.06-3.531 14.06s0.0935 8.021-0.421 10.64c-0.5145 2.619-2.009 7.767-2.009 8.609 0 2.778 1.509 3.936 1.509 5.669 0 0.8011-0.482 2.935-0.482 2.935s1.015-1.758 1.015-2.926c0-1.198-1.585-3.366-1.585-5.495 0-1.123 1.599-6.734 2.137-8.652 0.5379-1.918 0.2105-10.31 0.2105-10.31s3.812-11.76 3.812-14.76c0-0.7523-0.3848-3.69-0.6919-4.836-0.3087-1.152-2.187-5.136-2.187-8.577 0-3.108 0.0746-3.52 0.6217-7.301"/>
<path d="m-41.22 109.1c0.4514-12.57 0.525-25.16-0.0525-37.73-0.3044 12.57-0.5393 25.16 0.0525 37.73z" fill-rule="evenodd"/>
<path d="m-42.72 29.95c-0.9724 0.6639-1.828 1.591-1.828 4.221 0 2.332 1.307 4.918 3.34 4.977 3.237 0.09449 3.007-5.163 3.007-5.163l-0.3471 0.0041s0.0267 0.7507-0.0433 1.266c-0.0892 0.6568-0.1618 3.345-2.567 3.463-1.503 0.07382-3.055-2.105-2.962-4.578 0.081-2.161 0.4294-2.835 0.8856-3.416 1.321-1.685 2.675-1.002 3.284-0.5498 0.4717 0.3507 0.9487 1.165 1.165 1.928 0.2786 0.9841 0.2384 1.887 0.2384 1.887l0.3471-0.0041s0.0808-0.6093-0.3153-2.099c-0.1746-0.6566-0.5754-1.508-1.42-2.001-1.217-0.7098-2.076-0.418-2.783 0.06468z" fill-rule="evenodd"/>
</g>
<path class="nofill stroke" d="m-41.09 46.69-6.464 21.67 12.93 1e-6z"/>
<g class="fillfg" fill-rule="evenodd">
<path d="m32.75 29.95c-0.9724 0.6639-1.828 1.591-1.828 4.221 0 2.332 1.307 4.918 3.34 4.977 3.237 0.09449 3.007-5.163 3.007-5.163l-0.3471 0.0041s0.0267 0.7507-0.0433 1.266c-0.0892 0.6568-0.1618 3.345-2.567 3.463-1.503 0.07382-3.055-2.105-2.962-4.578 0.081-2.161 0.4294-2.835 0.8856-3.416 1.321-1.685 2.675-1.002 3.284-0.5498 0.4717 0.3507 0.9487 1.165 1.165 1.928 0.2786 0.9841 0.2384 1.887 0.2384 1.887l0.3471-0.0041s0.0808-0.6093-0.3153-2.099c-0.1746-0.6566-0.5754-1.508-1.42-2.001-1.217-0.7098-2.076-0.418-2.783 0.06468z"/>
<path d="m32.61 38.41s-0.2631 1.888-0.5905 2.403c-1.931 2.23-4.834 2.679-7.039 4.537-1.801 1.801-5.671 8.828-5.636 8.945 0.0351 0.1169 2.783 3.379 3.929 4.408 1.146 1.029 3.134 2.853 3.227 3.087 0.0935 0.2339 0.3508 3.064 0.3508 3.064s0.1871-2.689 0.1637-2.923c-0.0234-0.2339-2.268-2.76-3.508-3.999-1.239-1.239-4.069-3.531-4.069-3.625 2.342-3.45 4.335-7.622 7.928-9.986 2.651-1.149 5.655-2.524 5.244-5.911z"/>
<path d="m28.34 60.31s-4.794-5.87-4.794-6.384c0-0.5145 4.303-4.35 4.443-4.35s1.497 4.934 1.497 8.115-1.029 6.876-0.9822 9.822c0.0468 2.947 1.637 16.84 1.637 16.84s0.1403 7.624 0.6548 10.24c0.5145 2.619 1.731 8.606 1.731 9.448 0 0.8419-0.0935 2.572-0.7484 3.601-0.6548 1.029-1.403 1.777-1.403 1.777s1.777-3.18 1.777-4.303c0-1.123-1.38-8.466-1.918-10.38-0.5379-1.918-0.1871-10.29-0.1871-10.29s-2.152-14.13-2.152-17.12 1.076-7.671 1.076-9.916-1.006-7.764-1.006-7.764-3.625 3.987-3.625 4.315c0 0.3274 4.022 6.361 3.999 6.349z"/>
<path d="m40.46 60.31s4.794-5.87 4.794-6.384c0-0.5145-4.303-4.35-4.443-4.35-0.1403 0-1.497 4.934-1.497 8.115 0 3.181 1.029 6.876 0.9822 9.822-0.0468 2.947-1.637 16.84-1.637 16.84s-0.1403 7.624-0.6548 10.24c-0.5145 2.619-2.243 7.763-2.243 8.605 0 3.132 1.807 4.614 1.807 5.834 0 0.7514-0.697 2.885-0.697 2.885s1.034-1.604 1.034-2.766c0-1.293-1.373-2.596-1.373-5.72 0-1.123 1.496-6.779 2.033-8.697 0.5379-1.918 0.1871-10.29 0.1871-10.29s2.152-14.13 2.152-17.12-1.076-7.671-1.076-9.916c0-2.245 1.006-7.764 1.006-7.764s3.625 3.987 3.625 4.315c0 0.3274-4.022 6.361-3.999 6.349z"/>
<path d="m35.84 38.41s0.2631 1.888 0.5905 2.403c1.931 2.23 4.834 2.679 7.039 4.537 1.801 1.801 5.671 8.828 5.636 8.945-0.0351 0.1169-2.783 3.379-3.929 4.408-1.146 1.029-3.134 2.853-3.227 3.087-0.0935 0.2339-0.3508 3.064-0.3508 3.064s-0.1871-2.689-0.1637-2.923c0.0234-0.2339 2.268-2.76 3.508-3.999 1.239-1.239 4.069-3.531 4.069-3.625-2.342-3.45-4.335-7.622-7.928-9.986-2.651-1.149-5.655-2.524-5.244-5.911z"/>
<path d="m34.27 109.1c0.4514-12.57 0.5251-25.16-0.0525-37.73-0.3044 12.57-0.5393 25.16 0.0525 37.73z"/>
</g>
<path class="nofill stroke" d="m34.36 46.69-3.238 10.86 3.238 10.86 3.236-10.86z"/>
<path class="nofill stroke" d="m-10.13 46.69 4.234 10.86-4.234 10.78h12.93l-4.231-10.83 4.231-10.81z"/>
</g>
<g class="fillfg" transform="translate(0 0)" font-family="sans-serif" font-size="5.644px">
<text x="44.582211" y="54.929375">1</text>
<text x="81.746994" y="54.929375">2</text>
<text x="119.32879" y="54.929375">3</text>
<text x="157.20084" y="54.929375">4</text>
</g>
</g>
</svg>
</div>
<div class="para">
Typ 1 und Typ 2 haben ähnliche Körper,
beide sind "von Natur aus sportlich",
haben mittleres Gewicht,
können Gewicht zunehmen und abnehmen (mit etwas Mühe),
bevorzugen Übergangsklima (zwischen Seeklima und Landklima).
2022-08-13 15:30:56 +02:00
Typ 1 und Typ 2 unterscheiden sich stärker beim Verhalten
(Streitlust, Dualismus).
2022-07-29 12:58:38 +02:00
</div>
<div class="para">
2022-08-14 21:01:55 +02:00
Typ 1 ist eher herrisch, dominant, grandios (grandiose narciss),
überheblich, "männlich", stolz, frech, arrogant, aggressiv,
starke Meinungen (strong opinions),
Selbstwert, Licht,
neugierig, Risiko, Freiheit.
2022-08-13 15:30:56 +02:00
2022-08-14 21:01:55 +02:00
Typ 2 ist eher unterwürfig, subordiniert,
2022-08-13 15:30:56 +02:00
verletzbar (vulnerable narciss), höflich, ängstlich,
2022-08-14 21:01:55 +02:00
defensiv, angepasst, passiv,
schwache Meinungen (weak opinions),
Selbstzweifel, Fremdwert, Schatten,
Geduld, Sicherheit.
2022-07-29 12:58:38 +02:00
</div>
<div class="para">
Auch über die Körperform kann man Typen schätzen
2022-08-13 15:30:56 +02:00
(Physiognomie, Morpho-Psychologie, Profiling,
erster Eindruck, first impression):
2022-07-29 12:58:38 +02:00
Gesichtsform (breites Gesicht = 3, langes Gesicht = 4),
Handform (breite Gelenke = 3, lange Finger = 4),
Fingernägel (lange Nagelbetten = Typen 14, kurze Nagelbetten = Typen 23),
...
aber hier gibt es immer wieder Widersprüche,
2022-08-13 15:30:56 +02:00
und ich sammle möglichst viele Informationen
für ein "ganzheitliches" Bild.
2022-07-29 12:58:38 +02:00
</div>
2022-08-14 21:01:55 +02:00
<div class="para">
Verhalten zeigt Typ durch <b>typische Stress-Reaktion</b>.
</div>
<table style="width:100%; margin-top:0.5em">
<tr>
<td>
<table style="margin:auto; border:solid 1px black">
<tr>
<td>1. früh</td>
<td></td>
<td>3. früh</td>
</tr>
<tr>
<td></td>
<td>↑ Aufregen</td>
<td></td>
</tr>
<tr>
<td>4. spät</td>
<td></td>
<td>2. spät</td>
</tr>
</table>
</td>
<td>
</td>
<td>
<table style="margin:auto; border:solid 1px black">
<tr>
<td>1. früh</td>
<td></td>
<td>3. spät</td>
</tr>
<tr>
<td></td>
<td>↓ Beruhigen</td>
<td></td>
</tr>
<tr>
<td>4. früh</td>
<td></td>
<td>2. spät</td>
</tr>
</table>
</tr>
</tr>
</table>
<div class="para">
Dieser Test funktioniert schon für Kleinkinder.
Man braucht einen Stress, der zeitlich klar definiert ist.
Also der Stress braucht genauen Anfang und Ende.
</div>
<div class="para">
Beispiel: <b>The Strange Situation</b>:
Mutter verlässt Kind (Anfang vom Stress),
Mutter kommt zurück (Ende vom Stress).
</div>
<div class="para">
Wie geht der Test?
Man beobachtet das Kind am Anfang und Ende vom Stress.
</div>
<div class="para">
Beim Anfang vom Stress fragt man:
Wann tut das Kind anfangen zu Schreien? Früh oder spät?
Die "früh aufregen" Kinder (Typen 13) schreien früher,
die "spät aufregen" Kinder (Typen 24) verdrängen den Stress (Geduld)
und schreien später (die Reaktion wird gehemmt, unterdrückt,
aufgeschoben, gespart, verzögert, prokrastiniert).
</div>
<div class="para">
Beim Ende vom Stress fragt man:
Wann tut das Kind aufhören zu Schreien? Früh oder spät?
Die "früh beruhigen" Kinder (Typen 14) beruhigen sich früher,
die "spät beruhigen" Kinder (Typen 23) halten die Reaktion
(Trägheit, weiter Schreien, weiter Kämpfen)
und beruhigen sich später.
</div>
<div class="para">
Diese typische Stress-Reaktion sieht man auch bei Erwachsenen,
aber das kindische Schreien wird ersetzt durch andere Stress-Reaktionen,
und der Subtyp verschiebt das Verhalten
(aber nie ins Gegenteil, zum Beispiel
ein Typ 3 Mensch wird nie so reagieren wie ein Typ 4 Mensch).
</div>
<div class="para">
Test-Fragen:
Wird die Stress-Reaktion ausgelebt ("früh Aufregen") oder verdrängt ("spät Aufregen")?
Ist die Stress-Reaktion kurz ("früh Beruhigen") oder lang ("spät Beruhigen")?
</div>
<hr>
<div class="para">
<b>Element</b> heisst:
Ich bin ein X und mein Element ist Y.
Diese Namen nutzten Psychologen vor 2000 Jahren in Griechenland (Antike, Klassik).
</div>
<table style="width:100%; margin-top:0.5em">
<tr>
<td>
<table style="margin:auto; border:solid 1px black">
<tr>
<td>1. Tier</td>
<td></td>
<td>3. Vogel</td>
</tr>
<tr>
<td></td>
<td>Ich bin ein</td>
<td></td>
</tr>
<tr>
<td>4. Fisch</td>
<td></td>
<td>2. Pflanze</td>
</tr>
</table>
</td>
<td>
und
</td>
<td>
<table style="margin:auto; border:solid 1px black">
<tr>
<td>1. Feuer</td>
<td></td>
<td>3. Luft</td>
</tr>
<tr>
<td></td>
<td>mein Element ist</td>
<td></td>
</tr>
<tr>
<td>4. Wasser</td>
<td></td>
<td>2. Erde</td>
</tr>
</table>
</tr>
</tr>
</table>
<div class="para">
<b>Zahlen:</b>
Für mich sind die Zahlen wichtig,
weil ich damit die Typen extrem kompakt beschreiben kann,
also mit nur einem Symbol (wichtig für mein Muster).
Die Zahlen 1234 kann ich auch mit meinen 4 Fingern zeigen
(Römische Zahlen: I II III IIII).
Warum diese Zahlen?
einfaches Weltbild:
Radius 1 = Erdkern = Magma, Vulkane, Feuer.
Radius 2 = Erdhülle = Erde, Steine.
Radius 3 = Luft = farblos, durchsichtig.
Radius 4 = Wasser = blauer Himmel.
</div>
<table style="margin:auto; margin-top:0.5em; border:solid 1px black">
<tr>
<td>1. Eins</td>
<td></td>
<td>3. Drei</td>
</tr>
<tr>
<td></td>
<td>0. Null</td>
<td></td>
</tr>
<tr>
<td>4. Vier</td>
<td></td>
<td>2. Zwei</td>
</tr>
</table>
<div class="para">
<b>Farben:</b>
Figur-betonende Kleidfarben.
Natürlicher Dresscode.
</div>
<!-- nutzlos?
<div class="para">
Natürliche Flaggen = Kleid oben.
1 = Schwarz-Gelb = Anarcho-Capitalism = AnCap.
2 = Weiss-Blau = Pacifist-Capitalism?
3 = Schwarz-Rot = Anarcho-Syndicalism.
4 = Weiss-Grün = Pacifist-Syndicalism?
</div>
-->
<table style="width:100%; margin-top:0.5em">
<tr>
<td>
<table style="margin:auto; border:solid 1px black">
<tr>
<td>1. Schwarz</td>
<td></td>
<td>3. Schwarz</td>
</tr>
<tr>
<td></td>
<td>Kleid oben</td>
<td></td>
</tr>
<tr>
<td>4. Weiss</td>
<td></td>
<td>2. Weiss</td>
</tr>
</table>
</td>
<td>
/
</td>
<td>
<table style="margin:auto; border:solid 1px black">
<tr>
<td>1. Weiss</td>
<td></td>
<td>3. Schwarz</td>
</tr>
<tr>
<td></td>
<td>Kleid unten</td>
<td></td>
</tr>
<tr>
<td>4. Weiss</td>
<td></td>
<td>2. Schwarz</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="para">
Warum Schwarz-Weiss?
Zu einer breiten Körperhälfte passen schwarze und enge Kleider (Schwarz macht schlank, Tight Fit),
zu einer langen Körperhälfte passen weisse und weite Kleider (Weiss macht dick, Baggy Style).
Warum?
Kontrast zwischen Körper und Kleid.
Kontrast zwischen Natur und Kunst.
</div>
<div class="para">
Man kann auch "falsche" Farben tragen,
aber das wirkt "geschmacklos" (bad taste)
für sensible Augen.
</div>
<table style="width:100%; margin-top:0.5em">
<tr>
<td>
<table style="margin:auto; border:solid 1px black">
<tr>
<td>1. Gelb</td>
<td></td>
<td>3. Rot</td>
</tr>
<tr>
<td></td>
<td>Kleid oben</td>
<td></td>
</tr>
<tr>
<td>4. Grün</td>
<td></td>
<td>2. Blau</td>
</tr>
</table>
</td>
<td>
/
</td>
<td>
<table style="margin:auto; border:solid 1px black">
<tr>
<td>1. Blau</td>
<td></td>
<td>3. Grün</td>
</tr>
<tr>
<td></td>
<td>Kleid unten</td>
<td></td>
</tr>
<tr>
<td>4. Rot</td>
<td></td>
<td>2. Gelb</td>
</tr>
</table>
</tr>
</tr>
</table>
<div class="para">
Warum diese Farben?
Kleider sind etwas Künstliches,
also ein Kontrast zum Körper (Natur).
</div>
<div class="para">
Für Typen 12 gilt:
Rot-Grün sind natürliche Farben
(Eigenfarben: Rot = Typ 1, Grün = Typ 2),
Gelb-Blau sind künstliche Farben.
Deswegen tragen Typen 12 lieber gelbe oder blaue Kleider,
oder wählen lieber gelbe oder blaue Parteien.
</div>
<div class="para">
Für Typen 34 gilt das Gegenteil:
Gelb-Blau sind natürliche Farben
(Eigenfarben: Gelb = Typ 3, Blau = Typ 4),
Rot-Grün sind künstliche Farben.
Deswegen tragen Typen 34 lieber rote oder grüne Kleider,
oder wählen lieber rote oder grüne Parteien.
</div>
<div class="para">
<b>Eigenfarben:</b>
</div>
<table style="margin:auto; margin-top:0.5em; border:solid 1px black">
<tr>
<td>1. Rot</td>
<td></td>
<td>3. Gelb</td>
</tr>
<tr>
<td></td>
<td>Eigenfarbe</td>
<td></td>
</tr>
<tr>
<td>4. Blau</td>
<td></td>
<td>2. Grün</td>
</tr>
</table>
<div class="para">
Warum diese "Eigenfarben"?
2 = Pflanze = Grün.
4 = Wasser = Blau.
1 ist das Gegenteil von 2,
Rot ist die Gegenfarbe von Grün
(Gegenfarben vermischen sich zu Schwarz oder Weiss).
3 ist das Gegenteil von 4,
Gelb ist die Gegenfarbe von Blau.
</div>
<div class="para">
Warum ist Farbe X oben?
Warum ist Farbe Y unten?
Die obere Kleidfarbe ist die Eigenfarbe vom Typ mit gleichem Oberkörper.
Die untere Kleidfarbe ist die Eigenfarbe vom Typ mit gleichem Unterkörper.
</div>
<div class="para">
Beispiel:
Typen 13 haben breiten Oberkörper.
Typen 14 haben langen Unterkörper.
Also:
Typ 1 hat als obere Kleidfarbe die Eigenfarbe von Typ 3 (gelb),
Typ 1 hat als untere Kleidfarbe die Eigenfarbe von Typ 4 (blau).
</div>
<table style="margin:auto; margin-top:0.5em; border:solid 1px black">
<tr>
<td>1. Schwarz-Gelb</td>
<td></td>
<td>3. Schwarz-Rot</td>
</tr>
<tr>
<td></td>
<td>Kleid oben</td>
<td></td>
</tr>
<tr>
<td>4. Weiss-Grün</td>
<td></td>
<td>2. Weiss-Blau</td>
</tr>
</table>
<table style="margin:auto; margin-top:0.5em; border:solid 1px black">
<tr>
<td>1. Weiss-Blau</td>
<td></td>
<td>3. Schwarz-Grün</td>
</tr>
<tr>
<td></td>
<td>Kleid unten</td>
<td></td>
</tr>
<tr>
<td>4. Weiss-Rot</td>
<td></td>
<td>2. Schwarz-Gelb</td>
</tr>
</table>
<div class="para">
<b>Körperform:</b>
Ich sehe vier Körperformen:
1234 = Herz Birne Breit Lang.
Grundlagen:
William Sheldon:
1234 = meso meso endo ecto-morph.
Elliot Abravanel:
1234 = Thyroid Gonad Adrenal Pituitary.
</div>
<div class="para">
Zu oberflächlich?
Manche Menschen sind überrascht wenn ich behaupte:
Ich kann Innere Werte (Persönlichkeitstyp) ablesen von der Körperform.
"Nur weil ich dick bin muss ich doch nicht Typ 3 sein!"
Hmm. Warum nicht? Warum kompliziert, wenns auch leicht geht?
</div>
<div class="para">
Für meinen Ersten Eindruck muss ich nach Körperform gehen,
weil die Körperform sehe ich sofort.
Aber nur bei manchen Menschen sehe ich den Typ auf den ersten Blick ...
andere Menschen muss ich länger beobachten (Reden, Verhalten, Stress-Reaktion).
</div>
<div class="para">
Ich habe auch eine etwas andere Definition zwischen Körper und Geist
= Grobstruktur und Feinstruktur
= Äussere Werte (Geschlecht und Alter)
und Innere Werte (Persönlichkeitstyp, inneres Geschlecht und inneres Alter).
Also die "inneren" Werte sind nicht komplett versteckt,
sondern nur schwächer sichtbar als die "äusseren" Werte.
</div>
<div class="para">
Das Schließen von Körperform auf Innere Werte
ist bekannt als <b>Physiognomie</b> oder Morpho-Psychologie.
Wer zu viel Zeit hat,
der kann sich ja ein paar Studien dazu durchlesen ...
</div>
<table style="margin:auto; margin-top:0.5em; border:solid 1px black">
<tr>
<td>1. Herz</td>
<td></td>
<td>3. Breit</td>
</tr>
<tr>
<td></td>
<td>Körperform</td>
<td></td>
</tr>
<tr>
<td>4. Lang</td>
<td></td>
<td>2. Birne</td>
</tr>
</table>
<table style="margin:auto; margin-top:0.5em; border:solid 1px black">
<tr>
<td>1. Oben</td>
<td></td>
<td>3. Aussen</td>
</tr>
<tr>
<td></td>
<td>Zylinder</td>
<td></td>
</tr>
<tr>
<td>4. Innen</td>
<td></td>
<td>2. Unten</td>
</tr>
</table>
<div class="para">
Typ 1:
Herz-Form,
starke Arme,
schwache Beine,
Boxer,
TODO
</div>
<div class="para">
Typ 2:
Birnen-Form,
starke Beine,
schwache Arme,
Ringer (griechisches Ringen),
TODO
</div>
<div class="para">
Typ 3:
kurze Knochen,
breite Gelenke,
symmetrisches Gesicht,
symmetrische Fettverteilung,
Kugelstoßer,
Sprinter,
Kickboxer,
MMA,
Easy Gainer + Hard Loser,
Neigung zu Übergewicht,
langsamer Stoffwechsel (low metabolic rate),
</div>
<div class="para">
Typ 4:
lange Knochen,
schmale Gelenke,
kleiner Körper,
großer Kopf,
symmetrisches Gesicht,
symmetrische Fettverteilung,
Marathon-Läufer,
Hard Gainer + Easy Loser,
Neigung zu Untergewicht,
schneller Stoffwechsel (high metabolic rate),
</div>
<!-- template
<div class="para">
TODO
</div>
<table style="margin:auto; margin-top:0.5em; border:solid 1px black">
<tr>
<td>1. TODO</td>
<td></td>
<td>3. TODO</td>
</tr>
<tr>
<td></td>
<td>TODO</td>
<td></td>
</tr>
<tr>
<td>4. TODO</td>
<td></td>
<td>2. TODO</td>
</tr>
</table>
-->
2022-07-29 12:58:38 +02:00
<div class="para">
Wenn ich bei einem Mensch den Typ gar nicht schätzen kann,
dann kann ich auch "rückwärts" gehen:
Ich frage: Wer sind deine Freunde? Wer sind deine Feinde?
Dann schließe ich von Beziehungen auf den Persönlichkeitstyp,
weil mein Muster funktioniert in beide Richtungen.
Sprich: "<b>Zeig mir deine Freunde</b>, und ich sag dir wer du
<div class="annotation" onClick="clickAnnotation(this)" title='
Auch diese Analyse kann man komplett passiv machen,
ohne Einmischen, nur durch Beobachten ... aber so gehts langsamer.
'>bist."</div>
</div>
<div class="para">
<b>Subtypen:</b>
2022-08-13 15:30:56 +02:00
Neben den Vier Typen kennen Psychologen auch Subtypen.
Ich glaube:
Jeder Typ hat 2 Subtypen.
Für diese Subtypen gibt es auch wieder verschiedene Namen.
Carl Jung: extravertiert ambivertiert introvertiert.
Astrologie: cardinal mutable fixed.
Der dritte Subtyp (ambivertiert, mutable) heisst:
die 2 Subtypen sind gleich stark.
2022-07-29 12:58:38 +02:00
</div>
2022-07-29 12:58:38 +02:00
<div class="para">
Die Subtypen beschreibe ich wieder mit den vier Typen 1234,
aber zwischen Grundtyp und Subtyp kommt eine Null.
Beispiel: 104 = Grundtyp 1, Subtyp 4.
</div>
2022-08-13 15:30:56 +02:00
<div class="para">
Übersetzung:
extravertierter Subtyp
= cardinal modality
= Subtyp ist jung (Typen 13)
= fühlt sich jung, stark, aktiv, wach, Frühaufsteher, stolz, hoher Selbstwert,
sichtbar, zeigt sich gerne, mutig, Risiko-freudig,
attention-seeking, steht gerne im Mittelpunkt, ...
</div>
<div class="para">
introvertierter Subtyp
= fixed modality
= Subtyp ist alt (Typen 24)
= fühlt sich alt, schwach, passiv, müde, Langschläfer, Scham, Selbstzweifel,
schüchtern, versteckt, defensiv, meidet Risiko,
meidet den Fokus, meidet den Mittelpunkt, ...
</div>
<div class="para">
</div>
2022-08-11 17:03:42 +02:00
<div class="para">
Die <b>Karavane</b> zieht weiter.
Bestehende Gruppen reparieren ist schwer bis unmöglich,
weil körperliche Sesshaftigkeit hängt zusammen mit geistiger Trägheit
(Gruppenzwang, Imagepflege, Rolle spielen, Erwartungen erfüllen).
Einfacher ist:
Einzelne Menschen rausholen aus ihren Gruppen
("Wen von euch darf ich entführen?"),
2022-08-13 15:30:56 +02:00
mit diesen Menschen rumlaufen ("Die Karavane zieht weiter"),
2022-08-11 17:03:42 +02:00
und Schritt für Schritt eine neue Gruppe bauen.
Das Rumlaufen ist wichtig,
weil "ein bewegter Körper trägt einen bewegten Geist" (Peripathetiker).
2022-08-13 15:30:56 +02:00
Aber auch das "sesshaft werden" ist wichtig,
also einen neuen Platz suchen und besetzen.
2022-08-11 17:03:42 +02:00
</div>
<div class="para">
2022-08-13 15:30:56 +02:00
Bei diesem "Karavane Spiel"
muss ich mich (leider) an meine eigenen Gesetze halten,
2022-08-11 17:03:42 +02:00
das heisst:
Schritt 1:
Ich muss die Menschen finden,
die kompatibel sind zu meinem Typ.
Beispiel:
Mein Typ ist M1,
das heisst:
Ich suche meine 4 Freunde:
F2 und F3 (gleiches Alter, meine Frauen),
M2 und M4 (verschiedenes Alter, jünger oder älter, meine Söhne oder meine Väter).
</div>
<div class="para">
Schritt 2:
Ich muss die Menschen finden,
die kompatibel sind zu meinen 4 Freunden.
Beispiel:
Mein Typ ist M1,
meine Frau ist F3.
Die nächste Vierer-Gruppe ist
M1S-F3S-F2L-M4L
(dann fehlen uns 2 Eltern)
oder
M1L-F3L-F2S-M4S
(dann fehlen uns 2 Kinder).
Also:
Mir (M1) fehlt ein Vater (M4L) oder ein Sohn (M4S).
Meiner Frau (F3) fehlt eine Mutter (F2L) oder eine Tochter (F2S).
</div>
<div class="para">
Schritt 3:
Ich muss die Menschen finden,
die in meine andere Vierer-Gruppe passen.
Beispiel:
Ich habe schon die Vierer-Gruppe M1-F3-F2-M4 (Kreuz im Muster).
Meine andere Vierer-Gruppe ist M1-F2-F1-M2 (Quadrat im Muster).
</div>
2022-08-10 17:39:01 +02:00
<hr>
2022-08-13 15:30:56 +02:00
2022-07-29 12:58:38 +02:00
<table class="four-basetypes" style="margin-top:1em;margin-bottom:1em">
<tbody>
<tr>
<th>
<div class="annotation" onClick="clickAnnotation(this)" title='
TODO fix table borders. css grid?
2022-08-13 15:30:56 +02:00
TODO layout: keep table on one page
'>Alchi</div>
</th>
<td>103</td>
<td>1</td>
<td>104</td>
</tr>
<tr>
<th>Carl Jung</th>
<td>Ne = extravertierte Ntuition</td>
<td>N = Ntuition</td>
<td>Ni = introvertierte Ntuition</td>
</tr>
<tr>
<th>MBTI</th>
<td>
<div class="annotation" onClick="clickAnnotation(this)" title='
https://www.reddit.com/r/mbti/comments/ds3r3o/decoding_mbti_four_elements_alchemy_physiognomy/
translation:
MBTI letters 12 = basetype
MBTI letters 34 = subtype
MBTI letter 1:
I = Introversion = male brain = types 14
E = Extraversion = female brain = types 23
MBTI letter 2:
N = iNtuition = young brain = types 13
S = Sensing = old brain = types 24
MBTI letter 3:
T = Thinking = male brain = types 14
F = Feeling = female brain = types 23
MBTI letter 4:
P = Perceiving = young brain = types 13
J = Judging = old brain = types 24
'>INFP</div>
</td>
2022-08-13 15:30:56 +02:00
<td>INTP<br>ENTJ, ISFP</td>
<td>INTJ</td>
</tr>
<tr>
<th>Sternzeichen</th>
<td>Widder, Aries</td>
<td>Schütze, Sagittarius</td>
<td>Löwe, Leo</td>
</tr>
<tr>
<th>Modalität</th>
<td>cardinal Fire</td>
<td>mutable Fire</td>
<td>fixed Fire</td>
</tr>
<tr>
<th>Feiertag</th>
<td>20.8. (August)</td>
<td>20.9. (September)</td>
<td>20.10. (Oktober)</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Alchi</th>
<td>203</td>
<td>2</td>
<td>204</td>
</tr>
<tr>
<th>Carl Jung</th>
<td>Se = extravertierte Sensation</td>
<td>S = Sensation</td>
<td>Si = introvertierte Sensation</td>
</tr>
<tr>
<th>MBTI</th>
<td>ESFP</td>
2022-08-13 15:30:56 +02:00
<td>ESFJ<br>ENTJ, ISFP</td>
<td>ESTJ</td>
</tr>
<tr>
<th>Sternzeichen</th>
<td>Steinbock, Capricorn</td>
<td>Jungfrau, Virgo</td>
<td>Stier, Taurus</td>
</tr>
<tr>
<th>Modalität</th>
<td>cardinal Earth</td>
<td>mutable Earth</td>
<td>fixed Earth</td>
</tr>
<tr>
<th>Feiertag</th>
<td>20.4. (April)</td>
<td>20.3. (März)</td>
<td>20.2. (Februar)</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Alchi</th>
<td>301</td>
<td>3</td>
<td>302</td>
</tr>
<tr>
<th>Carl Jung</th>
<td>Fe = extravertiertes Fühlen</td>
<td>F = Fühlen</td>
<td>Fi = introvertiertes Fühlen</td>
</tr>
<tr>
<th>MBTI</th>
<td>ENTP</td>
2022-08-13 15:30:56 +02:00
<td>ENFP<br>INFJ, ESTP</td>
<td>ENFJ</td>
</tr>
<tr>
<th>Sternzeichen</th>
<td>Waage, Libra</td>
<td>Zwillinge, Gemini</td>
<td>Wassermann, Aquarius</td>
</tr>
<tr>
<th>Modalität</th>
<td>cardinal Air</td>
<td>mutable Air</td>
<td>fixed Air</td>
</tr>
<tr>
<th>Feiertag</th>
<td>20.7. (Juli)</td>
<td>20.6. (Juni)</td>
<td>20.5. (Mai)</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Alchi</th>
<td>401</td>
<td>4</td>
<td>402</td>
</tr>
<tr>
<th>Carl Jung</th>
<td>Te = extravertiertes Denken</td>
<td>T = Denken</td>
<td>Ti = introvertiertes Denken</td>
</tr>
<tr>
<th>MBTI</th>
<td>ISTP</td>
2022-08-13 15:30:56 +02:00
<td>ISTJ<br>INFJ, ESTP</td>
<td>ISFJ</td>
</tr>
<tr>
<th>Sternzeichen</th>
<td>Krebs, Cancer</td>
<td>Fische, Pisces</td>
<td>Skorpion, Scorpius</td>
</tr>
<tr>
<th>Modalität</th>
<td>cardinal Water</td>
<td>mutable Water</td>
<td>fixed Water</td>
</tr>
<tr>
<th>Feiertag</th>
<td>20.11. (November)</td>
<td>20.12. (Dezember)</td>
<td>20.1. (Januar)</td>
</tr>
</tbody>
</table>
<div class="para">
Beispiel:
2022-07-29 12:58:38 +02:00
Mein Typ ist M104 = Mann, Grundtyp 1, Subtyp 4
= introvertierte Ntuition bei Carl Jung.
Den Subtyp 4 sieht man auch an meinem Körper:
2022-07-29 12:58:38 +02:00
ich bin sportlich, aber eher untergewichtig.
</div>
<div class="para">
<b>Subtypen im Muster:</b>
Die Subtypen sieht man auch in meinem Muster.
Regel: "einen Schritt weiter".
Jeder Mensch hat 4 Freunde (in geraden Richtungen, nicht diagonal).
Wir gehen "einen Schritt weiter" und landen beim Subtyp.
Was heisst das?
Wenn ich zu einem meiner 4 Freunde passen will,
dann muss ich den Subtyp "spielen" der hinter diesem Freund liegt.
</div>
<div class="para">
Beispiel:
2022-07-29 12:58:38 +02:00
Ich bin M1, meine Frau ist F3.
Damit wir zusammen passen, muss ich M104 spielen,
und sie muss F302 spielen.
</div>
<div class="center-x">
<svg class="foldme" title="Line of four" style="width:18em;margin:2em"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 200 800 200"
>
<style>
svg { --fg: black; --bg: white; } /* light mode */
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: white; --bg: black; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: white; --bg: black; } /* dark mode */
}
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
.fig1 .stroke {
stroke-width: 2;
stroke: black; /* fallback when css variables are not supported */
stroke: var(--fg);
}
.nofill {
fill: none;
}
.fillbg {
fill: white;
fill: var(--bg);
}
.fillfg {
fill: black;
fill: var(--fg);
}
</style>
<g class="fig1">
<!-- start generated svg -->
<!-- variant: four squares, one cross -->
<path class="stroke nofill" d="
M 458 458 L 342 342
M 458 342 L 342 458
M 0 0 L 58 58
M 800 800 L 742 742
M 0 800 L 58 742
M 800 0 L 742 58
M 400 0 L 342 58
M 400 0 L 458 58
M 400 800 L 342 742
M 400 800 L 458 742
M 0 400 L 58 342
M 0 400 L 58 458
M 800 400 L 742 342
M 800 400 L 742 458
M 160 100 H 240
M 160 300 H 240
M 100 160 V 240
M 300 160 V 240
M 560 100 H 640
M 560 300 H 640
M 500 160 V 240
M 700 160 V 240
M 560 500 H 640
M 560 700 H 640
M 500 560 V 640
M 700 560 V 640
M 160 500 H 240
M 160 700 H 240
M 100 560 V 640
M 300 560 V 640
"/>
<g dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40">
<circle cx="100" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="100" class="fillfg">F1L</text>
<circle cx="300" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="100" class="fillfg">M2L</text>
<circle cx="500" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="100" class="fillfg">F4L</text>
<circle cx="700" cy="100" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="100" class="fillfg">M3L</text>
<!-- NOTE no age -->
<circle cx="100" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="300" class="fillfg">F2</text>
<circle cx="300" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="300" class="fillfg">M1</text>
<circle cx="500" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="300" class="fillfg">F3</text>
<circle cx="700" cy="300" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="300" class="fillfg">M4</text>
<circle cx="100" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="500" class="fillfg">F3L</text>
<circle cx="300" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="500" class="fillfg">M4L</text>
<circle cx="500" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="500" class="fillfg">F2L</text>
<circle cx="700" cy="500" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="500" class="fillfg">M1L</text>
<circle cx="100" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="100" y="700" class="fillfg">F4S</text>
<circle cx="300" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="300" y="700" class="fillfg">M3S</text>
<circle cx="500" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="500" y="700" class="fillfg">F1S</text>
<circle cx="700" cy="700" r="60" stroke-width="2" class="stroke nofill" />
<text x="700" y="700" class="fillfg">M2S</text>
</g>
<!-- end generated svg -->
</g>
</svg>
</div>
<div class="para">
<b>Kodierung:</b>
Die Null zwischen Grundtyp und Subtyp
ist ein Platzhalter für den Freund,
der mit diesem Subtyp zu mir passt.
Wenn ich schreibe "Typen 14"
(sprich: "Typen Eins Vier")
dann meine ich "Typ 1 oder Typ 4",
und NICHT den Subtyp 104 (sprich: "Subtyp Eins Null Vier").
</div>
<div class="para">
Wenn auf dem Muster zwei Menschen nebeneinander stehen
(Beispiel: M1 und F3 mit gleichem Alter),
und wenn die <b>Subtypen parallel</b> liegen
(Beispiel: M104 und F302 = Pfeile in der Grafik),
dann passen diese zwei Menschen gut zusammen (starke Dialog-Bindung).
2022-07-29 12:58:38 +02:00
Die zwei Menschen "umarmen" einander mit ihren Subtypen,
ähnlich wie im Yin-Yang Symbol
(Yin-Yang = Frau-Mann = passiv-aktiv = Schwarz-Weiss = Schatten-Licht).
</div>
<div class="para">
Schwachstelle:
Die Schwachstelle an meinem System ist
das richtige Schätzen von Persönlichkeitstypen.
Dafür gibt es mehrere Wege:
Selbsteinschätzung (Wer bin ich?),
Fremdeinschätzung (Wer bist du?),
Körperform (Knochen-Proportionen, Fettverteilung, Gewicht),
Verhalten (Stressreaktion, Bindungsverhalten).
</div>
<div class="center-x">
<svg class="foldme" title="Subtypes with arrows" style="width:27em;margin:2em"
version="1.1" viewBox="0 200 1200 200"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
>
<style>svg { --fg: black; --bg: white; } /* light mode */
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: white; --bg: black; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: white; --bg: black; } /* dark mode */
}
@media screen {
@media (prefers-color-scheme: dark) {
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
[data-darkreader-mode="dynamic"]
svg { --fg: #ffffff; --bg: #000000; } /* dark mode */
}
.fig1 .stroke {
stroke-width: 2;
stroke: black; /* fallback when css variables are not supported */
stroke: var(--fg);
}
.nofill {
fill: none;
}
.fillbg {
fill: white;
fill: var(--bg);
}
.fillfg {
fill: black;
fill: var(--fg);
}</style>
<g class="fig1" transform="translate(200)">
<!-- start generated svg -->
<!-- variant: four squares, one cross -->
<g dominant-baseline="middle" font-family="sans" font-size="40px" text-anchor="middle">
<!-- NOTE no age -->
<circle class="stroke nofill" cx="100" cy="300" r="60" fill="none" stroke="#000" stroke-width="2"/>
<text class="fillfg" x="100" y="300">F2</text>
<circle class="stroke nofill" cx="300" cy="300" r="60" fill="none" stroke="#000" stroke-width="2"/>
<text class="fillfg" x="300" y="300">M1</text>
<circle class="stroke nofill" cx="500" cy="300" r="60" fill="none" stroke="#000" stroke-width="2"/>
<text class="fillfg" x="500" y="300">F3</text>
<circle class="stroke nofill" cx="700" cy="300" r="60" fill="none" stroke="#000" stroke-width="2"/>
<text class="fillfg" x="700" y="300">M4</text>
<circle class="stroke nofill" cx="-100" cy="300" r="60" fill="none" stroke="#000" stroke-width="2"/>
<text class="fillfg" x="-100" y="300">M4</text>
<circle class="stroke nofill" cx="900" cy="300" r="60" fill="none" stroke="#000" stroke-width="2"/>
<text class="fillfg" x="900" y="300">F2</text>
<g id="g5966">
<!-- arrow head. workaround for chrome. inkscape arrow head is not working: <path marker-end="url(#Arrow2Mend)"> -->
<path transform="translate(-163 .63606)" d="m804.78 227.38 11.784 25.491-25.491-11.784c7.0239-1.0689 12.543-6.6222 13.707-13.707z" fill-rule="evenodd" fill="#000" stroke="#000" stroke-linejoin="round" stroke-width=".11963"/>
<!-- arrow line -->
<path d="m342.43 257.57c67.307-67.307 241.07-74.076 308.38-6.7697" fill="none" stroke="#000" stroke-width="2"/>
</g>
<use id="use6288" transform="rotate(180 300 300)" width="100%" height="100%" xlink:href="#g5966"/>
<use transform="translate(199.99)" width="100%" height="100%" xlink:href="#g5966"/>
<use transform="translate(200)" width="100%" height="100%" xlink:href="#use6288"/>
</g>
<!-- end generated svg -->
</g>
</svg>
</div>
<div class="para">
Forschungs-Fragen:
Was passiert, wenn die Subtypen orthogonal liegen?
(Beispiel: M104 und F301. schwache Monolog-Bindung?)
Was passiert, wenn die Subtypen mit Abstand parallel liegen?
(Beispiel: M103 und F301)
Wie gut funktioniert
<div class="annotation" onClick="clickAnnotation(this)" title='
Der Begriff Polyamorie beschreibt das
Gegenteil des Konzepts der Monogamie, also der Paarbeziehung.
In polyamoren Beziehungen gehen also
mehrere Personen eine Liebesbeziehung miteinander ein.
Palyamorie ist gekennzeichnet von
Konsens und Gleichberechtigung.
Prinzipiell wird die Zulässigkeit der Polygamie
häufig auf den Koran Vers 4:3 zurückgeführt,
der Männern grundsätzlich mehrere Frauen erlaube,
wenn sie sich um alle kümmern können.
Historikerinnen und Historiker sehen den Ursprung
aber eher im siebten Jahrhundert:
Während der Kriege im arabischen Raum
wurden wohl viele Witwen und Waisen auf diese Art aufgefangen.
Und bis heute sind die polygamen Muslime besonders dort zu finden,
wo vor allem junge Männer keine hohe Lebenserwartung haben.
Koran Sure 4: an-Nisa (Die Frauen)
Vers 3:
Und wenn ihr befürchtet,
nicht gerecht hinsichtlich der Waisen zu handeln,
dann heiratet, was euch an Frauen gut scheint,
zwei, drei oder vier.
Wenn ihr aber befürchtet, nicht gerecht zu handeln,
dann (nur) eine oder was eure rechte Hand besitzt.
Das ist eher geeignet, daß ihr nicht ungerecht seid.
https://www.mdr.de/wissen/polygamie-partnerbeziehungen-mehrere-menschen-weltweit-ausnahme-100.html
Abgrenzung Polyamorie & offene Beziehung
Weil bei Polyamorie immer Gefühle
mit im Spiel sein dürfen und sogar sein sollen,
ist dieser Beziehungstypus keineswegs „unkomplizierter“
als eine monogame Beziehung, sondern in erster Linie „anders“.
Polyamorie: Vorteile und Nachteile
Mehreren engen Bezugspersonen
zärtlich und emotional verbunden zu sein,
kann entlastend wirken.
Sorgen und Nöte werden gemeinsam aufgefangen,
schöne Erlebnisse können sich intensiver anfühlen,
wenn sie mit mehreren Personen geteilt werden.
Polyamorie ist entlastend
Ist ein Partner eher introvertiert
und verbringt die Abende am liebsten kuschelnd auf dem Sofa,
kann ein anderer wiederum der perfekte Begleiter für Abenteuer sein.
Niemand in der Dreier-, Vierer- oder Fünfer-Beziehung steht unter Zugzwang,
in jeder Hinsicht Präsenz zu zeigen und alles leisten zu müssen.
Dadurch kann ein Gefühl großer Gelassenheit und Akzeptanz entstehen,
das die Beziehung, aber auch den Alltag aller Beteiligten ungemein entspannt.
Polyamorie ist abwechslungsreich
Auch der Faktor Abwechslung spielt für Menschen,
die sich für Polyamorie entscheiden, eine große Rolle.
Sie berichten mir in der Paartherapie
in meiner Praxis in München häufig davon,
dass sich zwischen Arbeit und Familie
zu viel Routine in ihre Beziehung eingeschlichen hat.
Es fehlt an Spannung und der Distanz,
die nötig ist, damit wieder Leidenschaft entsteht.
Polyamorie ist herausfordernd
In einer polyamorösen Beziehung
sind demgegenüber naturgemäß
mehr Abwechslung und mehr Freiheit vorhanden
- das geht aber möglicherweise auch
mit einem gewissen Konkurrenzdruck und Eifersucht einher.
Polyamorie braucht Austausch
Um solche Konflikte zu bewältigen,
ist ein offener Austausch
gerade in polyamorösen Konstellationen unerlässlich.
Zu wissen, dass der geliebte Partner
nicht nur mit jemand anderem schläft,
sondern mit dieser Person auch noch tiefe Gefühle
und intimste Momente teilt, ist nicht einfach.
Auch ein noch so liberales Weltbild schützt nicht davor,
in gewissen Situationen
in eine Gedankenspirale und Streit zu geraten.
https://www.praxis-breitenberger.de/ratgeber/partnerschaft/polyamorie-offene-beziehung/
'>Polyamorie</div>
in gleichalten Vierer-Gruppen? (Beispiel: F2-M1-F3-M4)
2022-07-29 12:58:38 +02:00
... müssen dazu alle Subtypen parallel liegen? (Beispiel: F203-M104-F302-M401.
Es kann sein, dass M104-M401 und F203-F302 zu ähnlich sind.)
(Polyamorie könnte so funktionieren: ein Partner für die Nacht, ein Partner für den Tag.)
</div>
<div class="para">
2022-07-29 12:58:38 +02:00
<b>Anwendung:</b>
Was bringt diese Theorie im Hier und Jetzt?
</div>
<div class="para">
2022-07-29 12:58:38 +02:00
<b>Aufbau von Gruppen:</b>
Wir nehmen mehrere Paare,
und wir bauen zwei große Gruppen:
Die "rechte" Gruppe realisiert mein Muster
(4 oder 8 oder 16 Menschen),
und in die "linke" Gruppe ("Kontrollgruppe") kommen alle,
die bei der rechten Gruppe nicht reinpassen,
weil manche Typen zu viel oder zu wenig sind,
oder weil sie nicht wollen
(das Experiment ist freiwillig).
</div>
<div class="para">
2022-07-29 12:58:38 +02:00
<b>Aufbau von Dorfkultur:</b>
Jedes Dorf hat 144 Menschen (Dunbar's Number) = 9 x 16 Menschen.
2022-07-29 12:58:38 +02:00
Jedes Dorf hat Abstand zu den Nachbar-Dörfern (sonst wäre es ein Stadtteil).
Jedes Dorf hat Selbstversorgung und Selbstverteidigung,
also eine Mischung aus Ökodorf und Shaolin-Kloster,
Permakultur und Kampfsport,
Bauern und Soldaten (Symbiose).
</div>
<div class="para">
2022-07-29 12:58:38 +02:00
Gleichgewicht:
Jedes Dorf ist im Gleichgewicht:
2022-08-10 17:22:05 +02:00
72 Männer und
<div class="annotation" onClick="clickAnnotation(this)" title='
vielleicht deswegen die "72 Jungfrauen im Paradies" im Koran
'>72 Frauen</div>.
72 Junge und 72 Alte.
Also Gerechtigkeit bei der Verteilung von Geschlecht und Alter.
Diese Gerechtigkeit kommt nicht von selber (Natur ist Zufall),
sondern muss erarbeitet und gepflegt werden (Kultur).
</div>
<div class="para">
Beispiel:
2022-07-29 12:58:38 +02:00
Dorf A hat 100 Männer und 44 Frauen und Dorf B hat 44 Männer und 100 Frauen.
Der Abstand zum Gleichgewicht ist 72 - 100 = -28 Männer für Dorf A und
72 - 44 = +28 Männer für Dorf B.
2022-07-29 12:58:38 +02:00
Lösung: Dorf A schickt 28 Männer zu Dorf B und Dorf B schickt 28 Frauen zu Dorf A.
Ergebnis: Jedes Dorf hat 72 Männer und 72 Frauen.
</div>
<div class="para">
Das gleiche gilt auch im kleinen Maßstab:
2022-07-29 12:58:38 +02:00
Familie A hat 3 Männer und 1 Frau und Familie B hat 1 Mann und 3 Frauen.
Lösung: Wir nehmen die zwei Kleinfamilien
und bauen eine Großfamilie mit 4 Männer und 4 Frauen.
</div>
<div class="para">
<div class="annotation" onClick="clickAnnotation(this)" title='
politik ist "eigentlich" off-topic,
aber ...
ich will ja eine "ganzheitliche" theorie schreiben,
und ich will die leute erinnern:
wir haben keine zeit
(urgency, dringlichkeit, es ist dringend),
und in den nächsten monaten
können wir uns nochmal nützlich machen,
bevor wir verhungern und erfrieren.
ich arbeite für eine bessere zukunft,
die ich selber nicht erleben werde.
'><b>Politik</b></div>
ist ganz einfach,
2022-07-29 12:58:38 +02:00
wenn man die Grundlagen versteht.
2022-07-29 12:58:38 +02:00
Die Grundlagen unserer Zivilisation
sind Mordverbot und billige Energie.
Die Folge: globale <b>Übervölkerung</b>.
Also weltweit gibt es zu viele Menschen.
2022-08-10 17:22:05 +02:00
</div>
<div class="para">
2022-08-13 15:30:56 +02:00
Der schlimmste Teil von Umweltzerstörung
ist die Abholzung von Urwald.
2022-08-10 17:22:05 +02:00
</div>
<hr>
<div class="para">
Hier die Zahl der Menschen weltweit
über die letzten 10.000 Jahre.
Der
<div class="annotation" onClick="clickAnnotation(this)" title='
TODO keep the two graphs on one page
'><b>Graph</b></div>
hat lineare Hochachse
und man sieht die "Explosion" der Bevölkerung seit 200 Jahren.
</div>
<div class="center-x">
<svg title="world-population-chart.linear-graph" style="width:100%"
version="1.1" viewBox="0 0 182.38 123.17" xmlns="http://www.w3.org/2000/svg"
>
<defs>
<marker id="Arrow1Mstart" overflow="visible" orient="auto">
<path transform="matrix(.4 0 0 .4 4 0)" d="m0 0 5-5-17.5 5 17.5 5z" fill="context-stroke" fill-rule="evenodd" stroke="context-stroke" stroke-width="1pt"/>
</marker>
<marker id="Arrow1Mend" overflow="visible" orient="auto">
<path transform="matrix(-.4 0 0 -.4 -4 0)" d="m0 0 5-5-17.5 5 17.5 5z" fill="context-stroke" fill-rule="evenodd" stroke="context-stroke" stroke-width="1pt"/>
</marker>
</defs>
<g transform="translate(-20.087 54.74)">
<g transform="translate(0 -276.88)">
<rect x="20.087" y="222.14" width="182.38" height="123.17" fill="#fff" fill-rule="evenodd" stroke-width=".22482"/>
<g transform="translate(0 13.717)">
<path d="m27.95 320.32 151.88 8e-3v-110.16" fill="none" marker-end="url(#Arrow1Mend)" marker-start="url(#Arrow1Mstart)" stroke="#000" stroke-width=".26458px"/>
<g transform="translate(.27565 123.17)">
<g transform="matrix(1 0 0 2.5604 0 -307.6)" fill="none" stroke="#000" stroke-width=".26458px">
<path d="m179.55 197.13v0.85321"/>
<path d="m165.77 197.13v0.85321"/>
<path d="m151.99 197.13v0.85321"/>
<path d="m138.21 197.13v0.85321"/>
<path d="m124.43 197.13v0.85321"/>
<path d="m110.64 197.13v0.85321"/>
<path d="m83.079 197.13v0.85321"/>
<path d="m96.861 197.13v0.85321"/>
<path d="m69.297 197.13v0.85321"/>
<path d="m55.514 197.13v0.85321"/>
<path d="m41.732 197.13v0.85321"/>
</g>
<g font-family="sans-serif" font-size="3.5278px" stroke-width=".26458" text-anchor="middle">
<text x="179.55566" y="203.48607" text-align="center"><tspan x="179.55566" y="203.48607" font-size="3.5278px" stroke-width=".26458">0</tspan></text>
<text x="165.77254" y="203.53603" text-align="center"><tspan x="165.77254" y="203.53603" font-size="3.5278px" stroke-width=".26458">1000</tspan></text>
<text x="151.99026" y="203.53603" text-align="center"><tspan x="151.99026" y="203.53603" font-size="3.5278px" stroke-width=".26458">2000</tspan></text>
<text x="138.19594" y="203.53603" text-align="center"><tspan x="138.19594" y="203.53603" font-size="3.5278px" stroke-width=".26458">3000</tspan></text>
<text x="124.40849" y="203.53603" text-align="center"><tspan x="124.40849" y="203.53603" font-size="3.5278px" stroke-width=".26458">4000</tspan></text>
<text x="110.67445" y="203.53603" text-align="center"><tspan x="110.67445" y="203.53603" font-size="3.5278px" stroke-width=".26458">5000</tspan></text>
<text x="96.842216" y="203.53603" text-align="center"><tspan x="96.842216" y="203.53603" font-size="3.5278px" stroke-width=".26458">6000</tspan></text>
<text x="83.072861" y="203.53603" text-align="center"><tspan x="83.072861" y="203.53603" font-size="3.5278px" stroke-width=".26458">7000</tspan></text>
<text x="69.296608" y="203.53603" text-align="center"><tspan x="69.296608" y="203.53603" font-size="3.5278px" stroke-width=".26458">8000</tspan></text>
<text x="55.514324" y="203.53603" text-align="center"><tspan x="55.514324" y="203.53603" font-size="3.5278px" stroke-width=".26458">9000</tspan></text>
<text x="41.738075" y="203.53603" text-align="center"><tspan x="41.738075" y="203.53603" font-size="3.5278px" stroke-width=".26458">10000</tspan></text>
</g>
</g>
</g>
<g transform="matrix(1 0 0 .93213 -.0045534 35.457)">
<g transform="matrix(.013782 0 0 -.013782 152.03 320.3)" fill="none" stroke="#000" stroke-width="25.023">
<path d="m2017 2e3h155.6"/>
<path d="m2017 1e3h155.6"/>
<path d="m2017 3e3h155.6"/>
<path d="m2017 4e3h155.6"/>
<path d="m2017 5e3h155.6"/>
<path d="m2017 6e3h155.6"/>
<path d="m2017 7e3h155.6"/>
<path d="m2017 8e3h155.6"/>
</g>
<!-- graph: global human population, linear scale -->
<path d="m28.957 320.24 12.816-0.0138h41.347l13.782-0.0276 13.782-0.0965 13.782-0.17917 13.782-0.317 3.4456-0.13782 3.4456-0.55129 1.3782-0.82694 2.7565 0.13782 2.7702-0.27565 2.7427-0.27564h4.1347l1.3782-0.13783 2.7565-0.27564 1.3782-0.0827 1.3782-1.1577 1.3782 0.12404 1.3782-0.81316 0.68912-0.55129 0.68912 0.55129 0.55129-1.1439 0.82694 1.2818 1.3782-1.0337 1.3782-1.6539 0.68911 1.0337 0.68912-1.7917 0.68912-2.6186 0.68911-2.6186 0.68912-3.8591 0.68912-5.3751 0.13782-1.3782 0.13782-1.516 0.13783-2.8943 0.13782-3.1699 0.13782-1.3782 0.13783-8.545 0.13782-9.372 0.0551-4.1347 0.0827-5.9264 0.0965-7.8559 0.0413-3.5834 0.13782-11.164 7e-3 -5.9264 3e-3 -3.4111 6e-3 -3.48 0.0955-13.782" fill="none" stroke="#000" stroke-width=".51788"/>
<g id="percentage_numbers" transform="matrix(.34456 0 0 .34456 183.9 234.85)" fill="#000000" font-family="Verdana, Tahoma, sans-serif" font-size="11px">
<text y="250" text-anchor="end"><tspan text-anchor="start">0</tspan></text>
<text y="210">1000</text>
<text y="170" text-anchor="end"><tspan text-anchor="start">2000</tspan></text>
<text y="130" text-anchor="end"><tspan text-anchor="start">3000</tspan></text>
<text y="90">4000</text>
<g text-anchor="end">
<text y="50"><tspan text-anchor="start">5000</tspan></text>
<text y="10"><tspan text-anchor="start">6000</tspan></text>
<text y="-30.000277"><tspan text-anchor="start">7000</tspan></text>
<text y="-70.000557"><tspan text-anchor="start">8000</tspan></text>
</g>
</g>
</g>
<g font-family="sans-serif" stroke-width=".26458" text-anchor="middle">
<text x="27.785782" y="232.70168" font-size="4.9389px" text-align="center"><tspan x="27.785782" y="232.70168" font-size="4.9389px" stroke-width=".26458" text-align="start" text-anchor="start">World Population</tspan></text>
<text x="27.488127" y="245.94724" font-size="4.2333px" text-align="center"><tspan x="27.488127" y="245.94724" font-size="4.2333px" stroke-width=".26458" text-align="start" text-anchor="start">in Million Humans, linear scale</tspan></text>
<text x="27.488127" y="252.43819" font-size="4.2333px" text-align="center"><tspan x="27.488127" y="252.43819" font-size="4.2333px" stroke-width=".26458" text-align="start" text-anchor="start">over the last 10000 years</tspan></text>
<text x="27.949768" y="339.92209" font-size="3.5278px" text-align="center"><tspan x="27.949768" y="339.92209" font-size="3.5278px" stroke-width=".26458">Years</tspan></text>
</g>
<g transform="translate(-2.5318 136.86)">
<text x="135.72267" y="95.351952" font-family="sans-serif" font-size="3.5278px" stroke-width=".26458" text-align="center" text-anchor="middle"><tspan x="135.72267" y="95.351952" font-size="3.5278px" stroke-width=".26458">8000 Million Humans in year 2020</tspan></text>
<path d="m168.3 94.379h8.2931" fill="none" marker-end="url(#Arrow1Mend)" stroke="#000" stroke-width=".26458px"/>
</g>
<text x="27.488127" y="262.63916" font-family="sans-serif" font-size="3.5278px" stroke-width=".26458" text-align="center" text-anchor="middle"><tspan x="27.488127" y="262.63916" font-size="3.5278px" stroke-width=".26458" text-align="start" text-anchor="start">https://en.wikipedia.org/wiki/File:Population_curve.svg</tspan></text>
</g>
</g>
</svg>
</div>
<div class="para">
Hier die gleichen Zahlen,
aber dieser Graph hat logarithmische Hochachse,
das heisst:
Gleicher Abstand sind 10 Mal mehr Menschen.
</div>
<div class="center-x">
<!-- based on http://econosystemics.com/?p=9 -->
<svg title="world-population-chart.bryan-long-2009" style="width:100%"
version="1.1" viewBox="0 0 182.38 123.17" xmlns="http://www.w3.org/2000/svg"
>
<defs>
<marker id="Arrow1Mstart" overflow="visible" orient="auto">
<path transform="matrix(.4 0 0 .4 4 0)" d="m0 0 5-5-17.5 5 17.5 5z" fill="context-stroke" fill-rule="evenodd" stroke="context-stroke" stroke-width="1pt"/>
</marker>
<marker id="Arrow1Mend" overflow="visible" orient="auto">
<path transform="matrix(-.4 0 0 -.4 -4 0)" d="m0 0 5-5-17.5 5 17.5 5z" fill="context-stroke" fill-rule="evenodd" stroke="context-stroke" stroke-width="1pt"/>
</marker>
</defs>
<g transform="translate(-20.087 -85.282)">
<rect x="20.087" y="85.282" width="182.38" height="123.17" fill="#fff" fill-rule="evenodd" stroke-width=".22482"/>
<path d="m27.95 197.15 151.88 8e-3v-108.91" fill="none" marker-end="url(#Arrow1Mend)" marker-start="url(#Arrow1Mstart)" stroke="#000" stroke-width=".26458px"/>
<!-- graph: global human population, log scale -->
<path d="m27.967 179.92c4.6979-0.48077 9.4302-0.94554 12.031-1.1459 6.391-0.49229 31.661 1.3488 41.037 0.35546 9.3767-0.99333 20.433-6.0141 26.023-9.8855 5.5896-3.8715 27.816-13.35 31.601-16.932 3.7852-3.5816 10.042-14.69 10.794-15.455s1.0906 0.27165 2.2671 0.14623c1.1765-0.12543 1.6419-1.9407 2.8587-1.7594 1.2168 0.18132 1.465 1.8066 3.1014 1.8054 1.6364-1e-3 3.3858-0.65495 3.9685-0.53959 0.58265 0.11535 0.54481-1.3118 1.3918-1.3118 0.84694 0 1.4028 0.52057 1.6411-0.19593 0.23834-0.71651-0.15303-3.2821 0.85768-3.5507 1.0107-0.26858 0.6776 0.77154 1.464 0.68183 0.78639-0.0897 0.56411-3.7512 1.5424-3.7301 0.97828 0.0211 1.4138 1.8013 2.3313 1.7948 0.91749-7e-3 1.4274-5.3566 2.547-5.2809 1.1197 0.0757 0.62212 1.2338 1.3256 1.2338s3.1254-11.29 3.6072-14.805c0.48177-3.5153 1.3125-14.903 1.3125-14.903" fill="none" stroke="#000" stroke-width=".51788"/>
<g transform="translate(-1.0876)" fill="none" stroke="#000" stroke-width=".26458px">
<path d="m180.92 189.23h3.7607"/>
<path d="m180.92 184.58h3.7607"/>
<path d="m180.92 181.33h3.7607"/>
<path d="m180.92 178.72h3.7607"/>
<path d="m180.92 176.63h3.7607"/>
<path d="m180.92 174.94h3.7607"/>
<path d="m180.92 173.43h3.7607"/>
<path d="m180.92 172.11h3.7607"/>
<path d="m180.92 170.85h3.7607"/>
<g transform="translate(0 -26.368)">
<path d="m180.92 189.23h3.7607"/>
<path d="m180.92 184.58h3.7607"/>
<path d="m180.92 181.33h3.7607"/>
<path d="m180.92 178.72h3.7607"/>
<path d="m180.92 176.63h3.7607"/>
<path d="m180.92 174.94h3.7607"/>
<path d="m180.92 173.43h3.7607"/>
<path d="m180.92 172.11h3.7607"/>
<path d="m180.92 170.85h3.7607"/>
</g>
<g transform="translate(0 -52.645)">
<path d="m180.92 189.23h3.7607"/>
<path d="m180.92 184.58h3.7607"/>
<path d="m180.92 181.33h3.7607"/>
<path d="m180.92 178.72h3.7607"/>
<path d="m180.92 176.63h3.7607"/>
<path d="m180.92 174.94h3.7607"/>
<path d="m180.92 173.43h3.7607"/>
<path d="m180.92 172.11h3.7607"/>
<path d="m180.92 170.85h3.7607"/>
</g>
<g transform="translate(0 -78.917)">
<path d="m180.92 189.23h3.7607"/>
<path d="m180.92 184.58h3.7607"/>
<path d="m180.92 181.33h3.7607"/>
<path d="m180.92 178.72h3.7607"/>
<path d="m180.92 176.63h3.7607"/>
<path d="m180.92 174.94h3.7607"/>
<path d="m180.92 173.43h3.7607"/>
<path d="m180.92 172.11h3.7607"/>
<path d="m180.92 170.85h3.7607"/>
</g>
</g>
<path d="m173.12 125.03v72.122" fill="none" stroke="#000" stroke-width=".26458px"/>
<path d="m149.43 136.89v60.26" fill="none" stroke="#000" stroke-width=".26458px"/>
<g transform="translate(.27565)">
<g transform="matrix(1 0 0 2.5604 0 -307.6)" fill="none" stroke="#000" stroke-width=".26458px">
<path d="m179.55 197.13v0.85321"/>
<path d="m165.77 197.13v0.85321"/>
<path d="m151.99 197.13v0.85321"/>
<path d="m138.21 197.13v0.85321"/>
<path d="m124.43 197.13v0.85321"/>
<path d="m110.64 197.13v0.85321"/>
<path d="m83.079 197.13v0.85321"/>
<path d="m96.861 197.13v0.85321"/>
<path d="m69.297 197.13v0.85321"/>
<path d="m55.514 197.13v0.85321"/>
<path d="m41.732 197.13v0.85321"/>
</g>
<g font-family="sans-serif" font-size="3.5278px" stroke-width=".26458" text-anchor="middle">
<text x="179.55566" y="203.48607" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="179.55566" y="203.48607" font-size="3.5278px" stroke-width=".26458">0</tspan></text>
<text x="165.77254" y="203.53603" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="165.77254" y="203.53603" font-size="3.5278px" stroke-width=".26458">1000</tspan></text>
<text x="151.99026" y="203.53603" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="151.99026" y="203.53603" font-size="3.5278px" stroke-width=".26458">2000</tspan></text>
<text x="138.19594" y="203.53603" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="138.19594" y="203.53603" font-size="3.5278px" stroke-width=".26458">3000</tspan></text>
<text x="124.40849" y="203.53603" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="124.40849" y="203.53603" font-size="3.5278px" stroke-width=".26458">4000</tspan></text>
<text x="110.67445" y="203.53603" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="110.67445" y="203.53603" font-size="3.5278px" stroke-width=".26458">5000</tspan></text>
<text x="96.842216" y="203.53603" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="96.842216" y="203.53603" font-size="3.5278px" stroke-width=".26458">6000</tspan></text>
<text x="83.072861" y="203.53603" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="83.072861" y="203.53603" font-size="3.5278px" stroke-width=".26458">7000</tspan></text>
<text x="69.296608" y="203.53603" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="69.296608" y="203.53603" font-size="3.5278px" stroke-width=".26458">8000</tspan></text>
<text x="55.514324" y="203.53603" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="55.514324" y="203.53603" font-size="3.5278px" stroke-width=".26458">9000</tspan></text>
<text x="41.738075" y="203.53603" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="41.738075" y="203.53603" font-size="3.5278px" stroke-width=".26458">10000</tspan></text>
</g>
</g>
<g font-family="sans-serif" stroke-width=".26458" text-anchor="middle">
<g font-size="3.5278px">
<text x="188.37381" y="198.43936" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="188.37381" y="198.43936" font-size="3.5278px" stroke-width=".26458" text-align="start" text-anchor="start">1</tspan></text>
<text x="188.37381" y="172.13287" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="188.37381" y="172.13287" font-size="3.5278px" stroke-width=".26458" text-align="start" text-anchor="start">10</tspan></text>
<text x="188.37381" y="145.76482" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="188.37381" y="145.76482" font-size="3.5278px" stroke-width=".26458" text-align="start" text-anchor="start">100</tspan></text>
<text x="188.37381" y="119.48749" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="188.37381" y="119.48749" font-size="3.5278px" stroke-width=".26458" text-align="start" text-anchor="start">1000</tspan></text>
<text x="188.37381" y="93.216339" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="188.37381" y="93.216339" font-size="3.5278px" stroke-width=".26458" text-align="start" text-anchor="start">10000</tspan></text>
<text x="27.949768" y="203.53603" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="27.949768" y="203.53603" font-size="3.5278px" stroke-width=".26458">Years</tspan></text>
</g>
<text x="27.785782" y="97.292755" font-size="4.9389px" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="27.785782" y="97.292755" font-size="4.9389px" stroke-width=".26458" text-align="start" text-anchor="start">World Population</tspan></text>
<text x="27.488127" y="110.53831" font-size="4.2333px" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="27.488127" y="110.53831" font-size="4.2333px" stroke-width=".26458" text-align="start" text-anchor="start">in Million Humans, logarithmic scale</tspan></text>
<text x="27.488127" y="117.02924" font-size="4.2333px" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="27.488127" y="117.02924" font-size="4.2333px" stroke-width=".26458" text-align="start" text-anchor="start">over the last 10000 years</tspan></text>
<text x="27.488127" y="137.44823" font-size="3.5278px" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="27.488127" y="137.44823" font-size="3.5278px" stroke-width=".26458" text-align="start" text-anchor="start">(c) 2009 Bryan K. Long</tspan></text>
<text x="27.488127" y="143.30658" font-size="3.5278px" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="27.488127" y="143.30658" font-size="3.5278px" stroke-width=".26458" text-align="start" text-anchor="start">http://econosystemics.com/?p=9</tspan></text>
</g>
<g transform="translate(-21.936)">
<text x="135.72267" y="95.351952" font-family="sans-serif" font-size="3.5278px" stroke-width=".26458" text-align="center" text-anchor="middle" style="line-height:1.25" xml:space="preserve"><tspan x="135.72267" y="95.351952" font-size="3.5278px" stroke-width=".26458">8000 Million Humans in year 2020</tspan></text>
<path d="m168.3 94.379h8.2931" fill="none" marker-end="url(#Arrow1Mend)" stroke="#000" stroke-width=".26458px"/>
</g>
<g font-family="sans-serif" font-size="4.2333px" stroke-width=".26458" text-anchor="middle">
<text x="51.604794" y="188.05453" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="51.604794" y="188.05453" font-size="4.2333px" stroke-width=".26458">Semi-Nomadic Era</tspan></text>
<text x="119.68132" y="176.08015" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="119.68132" y="176.08015" font-size="4.2333px" stroke-width=".26458">City States</tspan></text>
<text x="159.93082" y="154.6176" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="159.93082" y="154.6176" font-size="4.2333px" stroke-width=".26458">Empires</tspan></text>
<text transform="rotate(-90)" x="-138.52907" y="177.94925" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="-138.52907" y="177.94925" font-size="4.2333px" stroke-width=".26458">Global</tspan></text>
</g>
<path d="m90.08 177.21v19.942" fill="none" stroke="#000" stroke-width=".26458px"/>
<g font-family="sans-serif" font-size="3.5278px" stroke-width=".26458" text-anchor="middle">
<text x="42.339771" y="175.02097" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="42.339771" y="175.02097" font-size="3.5278px" stroke-width=".26458">Early Agriculture</tspan></text>
<text x="64.002998" y="168.44278" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="64.002998" y="168.44278" font-size="3.5278px" stroke-width=".26458">Copper</tspan></text>
<text x="90.966606" y="170.53709" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="90.966606" y="170.53709" font-size="3.5278px" stroke-width=".26458">Wheel</tspan></text>
<text x="101.05252" y="153.35725" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="101.05252" y="153.35725" font-size="3.5278px" stroke-width=".26458">Irrigation</tspan></text>
<text x="100.27689" y="159.16676" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="100.27689" y="159.16676" font-size="3.5278px" stroke-width=".26458">Wood Plow</tspan></text>
<text x="117.46384" y="146.5674" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="117.46384" y="146.5674" font-size="3.5278px" stroke-width=".26458">Bronze</tspan></text>
<text x="127.57859" y="139.46359" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="127.57859" y="139.46359" font-size="3.5278px" stroke-width=".26458">Iron</tspan></text>
<text x="141.02661" y="133.228" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="141.02661" y="133.228" font-size="3.5278px" stroke-width=".26458">Metal Plow</tspan></text>
<text x="154.90468" y="123.79401" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="154.90468" y="123.79401" font-size="3.5278px" stroke-width=".26458">Water Mills</tspan></text>
<text x="154.91161" y="128.19908" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="154.91161" y="128.19908" font-size="3.5278px" stroke-width=".26458">Wind Mills</tspan></text>
<text x="170.3678" y="122.80343" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="170.3678" y="122.80343" font-size="3.5278px" stroke-width=".26458">Coal</tspan></text>
<text x="170.31664" y="115.85435" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="170.31664" y="115.85435" font-size="3.5278px" stroke-width=".26458">Steam</tspan></text>
<text x="169.13686" y="107.78757" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="169.13686" y="107.78757" font-size="3.5278px" stroke-width=".26458">Electricity</tspan></text>
<text x="168.94328" y="101.43417" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="168.94328" y="101.43417" font-size="3.5278px" stroke-width=".26458">Oil + Gas</tspan></text>
<text x="168.90126" y="95.930222" text-align="center" style="line-height:1.25" xml:space="preserve"><tspan x="168.90126" y="95.930222" font-size="3.5278px" stroke-width=".26458">Fertilizer</tspan></text>
</g>
</g>
</svg>
</div>
2022-08-10 17:22:05 +02:00
<div class="para">
Das Problem Übervölkerung ist bekannt seit über 40 Jahren
2022-07-29 12:58:38 +02:00
(Georgia Guidestones: Gebot 1:
Halte die Bevölkerung unter 100 Millionen.)
</div>
<div class="para">
2022-07-29 12:58:38 +02:00
Der einzige Ausweg ist globaler <b>Massenmord</b>
(Depopulation, Agenda 21, Great Reset, Holodomor).
Wie werden Menschen sterben?
Versorgungsausfall.
Kein Strom, kein Wasser,
<div class="annotation" onClick="clickAnnotation(this)" title='
holodomor = tod durch hunger = hungertod = kein Essen
'>kein Essen,</div>
keine Heizung.
2022-07-29 12:58:38 +02:00
Drei Tage später herrscht Anarchie.
Wann? Winter 2022.
2022-08-14 21:01:55 +02:00
(Worst Case: Oktober 2022. Best Case: Jahr 2025.)
</div>
<div class="para">
2022-07-29 12:58:38 +02:00
Und Covid? Haha. <b>Covid</b> ist nur Ablenkung.
Wenn die Leute von heute auf morgen nichts mehr zum Fressen haben,
dann vergessen sie ganz schnell
so Luxusprobleme wie Covid oder Gender-Sternchen.
</div>
<div class="para">
2022-07-29 12:58:38 +02:00
<b>Letzter Wille:</b>
2022-07-29 12:58:38 +02:00
Stell dir vor, du hast noch 5 Monate zum Leben,
und musst dann sterben.
Was machst du in deinen letzten Tagen?
Was willst du in diesem Leben noch schaffen?
2022-07-29 12:58:38 +02:00
Meine Antwort:
Ich will herausfinden:
Ist meine Theorie richtig oder falsch?
2022-07-29 12:58:38 +02:00
Wenn sie richtig ist,
dann ist meine Theorie eine Grundlage
für eine
<div class="annotation" onClick="clickAnnotation(this)" title='
Was ist mein "Paradies auf Erden"?
Dorfkultur,
Stammkultur,
Tribalismus,
150 Menschen pro Dorf,
Abstand zu anderen Dörfern,
Konkurrenz-Kampf zwischen Dörfern
(Stammkriege, Tribe Wars, Serienmord ist besser als Massenmord),
Eugenik und Euthanasie,
Eugenik: schöne Menschen vermehren,
Euthanasie: hässliche Menschen opfern,
'>bessere Welt</div>
nach dem Kollaps.
2022-07-29 12:58:38 +02:00
Ich selber werde diese bessere Welt nicht erleben,
aber das ist mir
<div class="annotation" onClick="clickAnnotation(this)" title='
2022-07-29 12:58:38 +02:00
ich bin voll der held oder?
shut up and test my hypothesis.
es geht hier überhaupt nicht um mich.
ich bin nur der idiot,
der diese theorie zu papier bringt.
ich will mich überflüssig machen.
keiner soll abhängig sein von mir.
ich will andere menschen nicht blockieren oder einsperren.
ich will andere menschen befreien (liberal).
ich arbeite für kinder, für zukunft. (ich hasse alte menschen.)
'>egal.</div>
</div>
2022-08-10 17:22:05 +02:00
<div class="para">
<b>Schwachstellen:</b>
Meine Theorie hat 2 Schwachstellen.
[FIXME deduplicate]
</div>
<div class="para">
Die kleine Schwachstelle ist:
Ich muss Beziehungsqualität messen.
Jede Messung ist relativ,
das heisst,
ich muss kompatible Beziehungen
und nichtkompatible Beziehungen ausprobieren,
und kann im Rückblick sagen:
Waren die kompatiblen Beziehungen besser?
</div>
<div class="para">
Die große Schwachstelle ist:
Ich muss Persönlichkeitstypen richtig schätzen.
Dabei versuche ich möglichst "ganzheitlich" zu schätzen,
also nach Körperform und Verhalten.
Im Zweifel ignoriere ich Ergebnisse
von Fragebogen-Tests (MBTI, Big Five, etc.)
weil dort auch ein "falsches Selbstbild" rauskommen kann
("you are mistyped!")
</div>
<div class="para">
Was mache ich mit Menschen,
wo ich den Persönlichkeitstyp nicht schätzen kann?
Dann gehe ich den "Rückweg"
von Beziehungen zum Typ:
"Zeig mir deine Freunde,
und ich sag dir wer du bist."
Also ich nehme andere Menschen
wo ich mir sicher bin beim Persönlichkeitstyp
("Bilderbuch-Typen"),
und dann tu ich ausprobieren:
Welche Beziehungen sind kompatibel?
</div>
<div class="para">
Was ist der <b>Haken</b>?
Der Preis fürs "Paradies auf Erden" ist Serienmord.
Normalisieren von Serienmord hat 2 positive Wirkungen:
niedrige Quantität und hohe Qualität.
Serienmord ist die billigste Lösung gegen Übervölkerung (hohe Quantität)
und gegen Degeneration (niedrige Qualität, Erbkrankheiten, hässliche Menschen).
Mir ist klar:
Viele Menschen sagen:
Beim Thema "Menschen umbringen"
2022-08-13 15:30:56 +02:00
hört der Spaß auf.
2022-08-10 17:22:05 +02:00
(hier hat die Toleranz ein Ende.)
Aber genau hier fängt mein Spaß erst an (sage ich als Typ 1).
Und genau das ist das Problem mit Persönlichkeitstypen:
Jeder Typ hat seine subjektive Weltsichtt (Subjektivismus):
Mein Spaß ist dein Ernst.
Meine Tugend ist deine Sünde.
Mein Paradies ist deine Hölle.
Und so weiter.
2022-08-13 15:30:56 +02:00
TODO Sublimation von aggressiven Trieben zu produktiver Arbeit,
Spiel mit dem Feuer,
Zivilisation,
Zähmung von Tier zu Mensch
(Sigmund Freud - Unbehagen in der Kultur)
2022-08-10 17:22:05 +02:00
</div>
<div class="para">
2022-08-13 15:30:56 +02:00
Toleranz ist billig wenns leicht geht (Schönwetter-Toleranz).
2022-08-10 17:22:05 +02:00
Aber damit man so "extrem" andere Weltsichten "tolerieren" kann,
müssen diese anderen Weltsichten
in "sympatischen" Körpern wohnen.
Kompatible Beziehungen halten solche "Streit-Themen" aus.
</div>
<div class="para">
Nicht-kompatible Beziehungen produzieren immer Streit,
egal wie groß oder klein das Thema ist,
ausser beide Bindungs-Partner
einigen sich auf Verdrängung (Ignoranz macht glücklich)
und reden nur über kleine Probleme (Einigung auf niedrigem Niveau).
Bei Konfrontation mit großen Problemen
sind solche Beziehungen überfordert
und die geistige Feindschaft (Nicht-Kompatibilität)
kommt wieder hoch.
Ähnlich bei Drogen:
Manche Menschen sind schon vorher gestört,
aber können diese Störung verdrängen.
Drogen überfordern die Verdrängung
und wirken als scheinbarer "Auslöser" für die Störung.
(In vino veritas = Alkohol macht ehrlich.)
(Unterschied: Ursache oder Anlass?)
</div>
<div class="para">
Geht es auch ohne Serienmord?
Also,
gibt es ein "Paradies auf Erden"
ohne die Schattenseiten?
Nein.
Seit ungefähr 10.000 Jahren
rebellieren die Menschen gegen Naturgesetze,
2022-08-13 15:30:56 +02:00
mit so "schönen" Erfindungen wie
<b>Mordverbot</b>, Versicherungen, Sozialstaat.
2022-08-10 17:22:05 +02:00
Aber diese Menschen sind nur Tragische Helden,
die mit gutem Vorsatz ins Verderben laufen
(Übervölkerung, Degeneration, Dekadenz, Kollaps,
Boom-Bust-Cycles),
die einen verlorenen Krieg kämpfen.
Hochmut kommt vor dem Fall.
</div>
2022-08-13 15:30:56 +02:00
<div class="para">
<b>Problemkind</b>: Festhalten oder Loslassen?
Stell dir vor, du bist der größte Pazifist auf der Welt,
aber dein Kind will Menschen töten.
Was machst du?
Dein Kind festhalten und erziehen zu einem Pazifist?
(Passive Gewalt, Festhalten, Einsperren, schicksals-ergeben,
"das muss so sein", "zu spät für Korrektur",
"jetzt haben wir schon angefangen und wir müssen das fertig machen")
...
oder dein Kind loslassen und von "den Anderen" erziehen lassen zu seinem Soldat?
Ich fürchte:
Manche Menschen werden "ihre" Kinder nie freiwillig loslassen,
egal wie fremd diese Kinder sind.
Da hilft nur "liberale Gewalt",
also mit Gewalt diese "gefangenen Kinder" befreien
und zu besseren Eltern bringen.
</div>
<div class="para">
Solche "Kinderräuber" kennen wir als Krampus,
vor dem unsere Kinder Angst haben sollen.
Aber für mich ist Krampus ein Befreier, ein Held.
Ich selber war so ein Problemkind
(fremd zu Vater, Mutter, Bruder),
und unbewusst habe ich immer nach "besseren Eltern" gesucht,
also ältere Freunde als Ersatz-Eltern.
</div>
<div class="para">
Solche "Problemkinder" kennen wir auch als
Wechselbalg, Tauschkind, ungeliebtes Kind, Kuckuckskind, Satansbraten, Teufelskind ...
Wer ist schuld? Beide!
Das Problem ist die nicht-kompatible Beziehung zwischen Eltern und Kind.
Deswegen ist es so schwer, einen Schuldigen zu finden.
Beispiel:
Meine Eltern glauben ich bin verrückt (Hormonstörung im Kopf),
ich glaube meine Eltern sind dumm (falsche Bilder im Kopf).
"Einigkeit in Feindschaft."
Beide Seiten fühlen die Nicht-Kompatibilität,
und die beste Lösung ist: Wir gehen getrennte Wege.
</div>
<div class="para">
Geht diese Kinder-Befreiung auch ohne Gewalt?
Ja.
Dazu muss man den Eltern erst ein besseres Kind geben,
warten bis die Eltern sich an das bessere Kind gewöhnt haben,
und dann können die Eltern das falsche Kind loslassen.
</div>
<div class="para">
<b>Systemgewinner</b>:
Für manche Menschen funktioniert das konventionelle System
(Kleinfamilie, Schule, Arbeit).
Diese "Systemgewinner" werden immer sagen:
"die Anderen" müssen sich einfach mehr Mühe geben,
müssen sich nur mehr anstrengen,
dann haben sie mehr Erfolg in diesem System.
Warum gibt es solche Systemgewinner?
Zufall oder niedrige Ansprüche.
</div>
<div class="para">
Beispiel Kleinfamilie:
Durch Zufall können Kinder kompatibel sein zu ihren Eltern,
dann sagen diese Kinder: Kleinfamilie ist gut.
Genauer gesagt:
"Ich habe gute Erfahrungen gemacht mit Kleinfamilie."
Problematisch ist hier
der Schluss von subjektive Erfahrung zu objektives Weltbild
("von sich auf Andere schließen")
</div>
<div class="para">
Solche Systemgewinner gibt es auch bei der <b>Kalender-Astrologie</b>,
wo man den Geburtstag nimmt, zum Berechnen vom Persönlichkeitstyp.
Durch Zufall stimmt dieses System für 1 von 4 Menschen (25 von 100),
weil Persönlichkeitstypen sind zufällig verteilt,
und es gibt 4 Grundtypen.
Diese Systemgewinner halten das System Kalender-Astrologie am Leben,
weil "für mich stimmt es".
</div>
<div class="para">
Falsche Ergebnisse versucht die Kalender-Astrologie zu "retten"
durch mehr Komplexität: genaue Geburtzeit, Aszendent, bla bla bla.
Aber Kalender-Astrologie ist "broken by design",
weil Geburtstag und Geburtzeit haben Null Einfluss auf den Typ.
Astrologie kann nützlich sein,
wenn man die Beschreibungen der Typen liest,
und überlegt: Was passt zu mir?
Welcher Typ beschreibt mein Verhalten am besten?
</div>
<div class="para">
<b>Wilde Theorie:</b>
Ich bin ein Amateurforscher
und ich schreibe meine Theorie
vor allem für andere Amateure (auch für Kinder),
weil ich glaube:
die meisten Profi-Psychologen sind Versager,
oder zumindest Fachidioten,
aber keine Generalisten,
also schon daher unfähig,
meine "ganzheitliche" Theorie ernst zu nehmen.
Aber wie sagt man so schön:
Ist mir egal : )
</div>
<div class="para">
Und auch jeder "seriöse" Forscher müsste sagen:
"Ist mir egal" woher genau diese Theorie kommt,
alle Hypothesen sind gleichwertig,
und nur Experiment zeigt Wahrheit.
In dem Sinn sage ich:
"Shut up and test my hypothesis!"
</div>
<div class="para">
Meine Theorie ist so allgemein (ganzheitlich, abstrakt, generell),
dass keiner verantwortlich ist (zumindest kein Spezialist) ...
also ist jeder verantwortlich.
Das heisst:
Jeder darf helfen,
jeder kann helfen,
jedes Feedback ist wertvoll.
</div>
<div class="para">
Woher kommt meine Theorie?
Selbststudium Psychologie
für ungefähr 5 Jahre.
Schwerpunkt Persönlichkeits-Psychologie,
also die Kunst des
"alle Menschen in wenige Schubladen stecken" (Abstraktion).
Selbststudium heisst:
Ich lese nur das, was mich interessiert.
Ich entscheide selber: Was ist wichtig? Wo geht es weiter?
Die Abschlussarbeit für mein Selbststudium
ist diese Theorie, die du gerade liest.
</div>
<div class="para">
2022-07-29 12:58:38 +02:00
<b>Hilfe gesucht:</b>
2022-07-29 12:58:38 +02:00
Ich brauche Hilfe bei meinen 2 Zielen:
Veröffentlichen und Experiment.
2022-08-13 15:30:56 +02:00
</div>
2022-08-13 15:30:56 +02:00
<div class="para">
2022-07-29 12:58:38 +02:00
Veröffentlichen heisst:
Flyer drucken (50 EUR / 1000 Flyer)
und verteilen (persönlich, nicht in Briefkästen).
2022-08-13 15:30:56 +02:00
E-Mails, Briefe, Telefonate
2022-08-10 17:22:05 +02:00
(Verleger, Psychologen, Ökodörfer, Demeter-Höfe,
Prepper, Boxclubs, Gangs ...).
2022-08-13 15:30:56 +02:00
Oder Reposten in deinem Social Media Feed.
Oder bei einem Journal fragen,
ob die einen Artikel von mir drucken wollen.
Oder frage deinen Lieblings-"Influencer"
ob der mich featuren will.
</div>
<div class="para">
Wichtig sind auch <b>zufällige Begegnungen</b>
zum neue Menschen treffen
(Park, Badesee, Demo, Einkaufen,
Bahn, Bus, Autostoppen, Wandern ...)
</div>
2022-08-13 15:30:56 +02:00
<div class="para">
2022-07-29 12:58:38 +02:00
Das Experiment habe ich schon beschrieben.
Feedback und Ergebnisse
kann jeder auf meinen Websites veröffentlichen (Github, Gitlab, ...).
</div>
2022-08-13 15:30:56 +02:00
<div class="para">
<b>Freiwilligkeit:</b>
Mein Projekt ist sowas wie "Linux für Erziehung", also:
transparent (Open Source),
kostenlos,
freiwillig.
Vorteil: freiwillige Arbeit produziert bessere Qualität
(Eigenmotivation, freier Wille).
Nachteil: Es dauert länger,
weil man muss sich Zeit nehmen.
</div>
<div class="para">
Meine Theorie kann man beschreiben
als eine "Theorie der Freiwilligkeit":
Das Ziel sind freiwillige Beziehungen:
Beide Bindungs-Partner haben ein Veto-Recht,
also wenn einer "Nein" sagt,
dann ist die Beziehung vorbei.
</div>
<div class="para">
Auch Kleinkinder können "Ja" oder "Nein" sagen
zu ihren biologischen Eltern,
aber Kleinkinder zeigen das durch Körpersprache,
und Kinder müssen verschiedene Eltern "ausprobieren" (Körperkontakt),
damit man vergleichen kann: Wer passt besser?
</div>
<div class="para">
Dagegen:
Wenn Eltern sagen:
"Kinder gehören zu ihren Eltern" und "Keine Experimente",
dann spielen diese Eltern ein Glückspiel:
Manche Kinder passen
(Glück gehabt, Kind und Eltern sind Freunde, beide Seiten gewinnen),
andere Kinder stören
(Pech gehabt, Kind und Eltern sind Feinde, beide Seiten verlieren).
</div>
<div class="para">
Anhang: <b>Zitate und Sprüche</b>
</div>
<div class="para">Ich und du und er und sie und es sind
Besser dran, wenn wir uns selber helfen
&mdash; Samy Deluxe - Weck mich auf
</div>
<div class="para">Es gibt nichts was so fehlt wie verlorene Zeit
&mdash; Fiva MC - Verlorene Zeit
</div>
<div class="para">Knast ist nicht wenn ein Mensch in einer Zelle sitzt
Knast ist wenn die Angst im Kopf deine Zelle ist
&mdash; Danger Dan - Gesiebte Luft
</div>
<div class="para">This town's alright, But it's not enough
I'm looking for a quick exit, like a prisoner on the run
&mdash; Chase & Status - Embrace (feat. White Lies)
</div>
<!--
Big time breakdown, look how the stars come out
Big time breakdown, why didn't you just shout?
I'm lonely, and I'm looking for a place to go
where everything's an embrace [Umarmung], and everybody wants to know
-->
<!--
I have shut the window, already to defend
What is left to die for, What is left to give
All is about to wither, all is about you
Hard to make up your mind, hard to get through to me
You gave away the love I gave, You gave away the love I gave
You gave away the love I gave, You gave away the love I gave
-->
<div class="para">
Funny how everything falls into place once decisions are made
<br>
&mdash; Rawthang - Scorned
</div>
<div class="para">
Why did you have him, then? Nothing uses carbon like a first-world human.
<br>
&mdash; Utopia (UK 2013)
</div>
<div class="para">
What have you done today, to earn your place in this crowded world?
<br>
&mdash; Utopia (US 2020)
</div>
<!--
Utopia | Official Teaser | Prime Video
https://www.youtube.com/watch?v=NUVNDvfY4Ps
-->
<!-- too long
It's a virus called RD9. Or as I like to call it, World Cure.
At the end of the game, everyone in the stadium will be infected.
It should take two to three weeks for symptoms to start showing up.
- By which time 96 000 fans from almost every country in the world
will be back home spreading the disease. Why are you doing this?
- Well, think about it. We have seven billion people
running around on a planet that can only hold five.
I'm just trying to make the world a better place, that's all.
By deleting the surplus.
-->
<div class="para">
"Cure the world." And who exactly do you intend to "delete"?
<br>
- The garbage. The imbeciles who lie around drunk, reproducing like rabbits,
and sitting there with their hand out, expecting the rest of us to pay.
And let's be frank, who's gonna miss them anyway?
&mdash; The Brothers Grimsby (2016)
</div>
<!-- nutzlos
<div class="para">
It's Idiocracy, pure hypocrisy
<br>
Waking these dummies up, it used to mean a lot to me
<br>
but nowadays, I wanna tip their canoes
<br>
and as they drown, tell them, this is what you get when you snooze
<br>
&mdash; ODD TV - They Live, We Sleep
</div>
-->
<div class="para">
Glaubst Du an das Schicksal, Neo?
- Nein.
- Warum nicht?
- Mir missfällt der Gedanke, mein Leben nicht unter Kontrolle zu haben.
- Ich weiß ganz genau, was Du meinst.
Ich will Dir sagen, wieso Du hier bist.
Du bist hier, weil Du etwas weißt.
Etwas, das Du nicht erklären kannst. aber Du fühlst es.
Du fühlst es schon Dein ganzes Leben lang,
dass mit der Welt etwas nicht stimmt.
Du weißt nicht was, aber es ist da.
Wie ein Splitter in Deinem Kopf, der Dich verrückt macht.
Dieses Gefühl hat Dich zu mir geführt.
Weißt Du wovon ich spreche?
- Von der Matrix?
- ... Es ist eine Scheinwelt, die man Dir vorgaukelt,
um Dich von der Wahrheit abzulenken.
- Welche Wahrheit?
- Dass Du ein Sklave bist, Neo.
Du wurdest wie alle in die Sklaverei geboren,
und lebst in einem Gefängnis,
das Du weder anfassen noch riechen kannst.
Ein Gefängnis für Deinen Verstand.
&mdash; Matrix (1999)
</div>
<div class="para">
Das Problem ist: du glaubst, du hast Zeit.
&mdash; Buddha
</div>
<div class="para">
All you can do is warn them.
<br>
If they dont listen, move on, so you can warn others.
[Breitensuche]
</div>
<div class="para">
Be excellent to each other.
&mdash; Linus Torvalds
</div>
<div class="para">
Der moderne Mensch wird in einem Tätigkeitstaumel gehalten,
damit er nicht zum Nachdenken kommt,
über den Sinn seines Lebens und der Welt.
&mdash; Albert Schweitzer
</div>
<div class="para">
Das ist dein Leben, und es endet Minute für Minute ...
Ich bin Jack's vergeudetes Leben ...
Wir sind Konsumenten ...
Durch die Werbung sind wir heiß auf Klamotten und Autos,
machen Jobs die wir hassen,
kaufen dann Scheiße, die wir nicht brauchen ...
wir sind kurz, ganz kurz vorm Ausrasten ...
Wir sind nichts Besonderes ...
Du entscheidest, wie weit du dich beteiligst ...
Vergiss was du weisst, über das Leben, über Freundschaft ...
Was willst du noch machen bevor du stirbst? ...
Hör auf alles kontrollieren zu wollen, lass einfach los. Lass los! ...
Du hast mich in einer seltsamen Phase meines Lebens getroffen
&mdash; Fight Club (1999)
</div>
<div class="para">
We should forget about small efficiencies about 97% of the time.
premature optimization is the root of all evil.
&mdash; Donald Knuth
</div>
<div class="para">
Für die Dinge die wir lieben sind wir gemacht.
&mdash; Rakede - Sonne
</div>
<div class="para">
Ich werd heut nicht schlafen gehen,
ich feile an großen Plänen
<br>
&mdash; Rakede - Schlafen gehen
</div>
<div class="para">
Die Liebe ist ein wildes Tier
...
Amuur Amuur, Alle wollen nur dich zähmen
&mdash; Rammstein - Amour
</div>
<div class="para">
Ich komm nicht mit vor die Tür, wir gehen gleich in den Wald
<br>
Das ist freie Gewalt, ich kämpfe für rohe Liebe
&mdash; K.I.Z - Geld Essen
</div>
<div class="para">
Diese Welt ist voll mit Verrückten.
Ihr dachtet dass es keine Helden mehr gibt.
K.I.Z tragen Richterperücken.
Wir fahren durch deinen Block und üben Selbstjustiz
&mdash; K.I.Z - Selbstjustiz
</div>
<div class="para">
Sie wissen, dass ich ausbrechen werde.
Und tragen mich, damit ich das Laufen nicht lerne
&mdash; K.I.Z - Käfigbett
</div>
<div class="para">
Die Freiheitsstatue ist ne Hure, und ich fick sie
&mdash; Haftbefehl - Lass die Affen aus'm Zoo
</div>
<div class="para">
In die Schule zurück gehen tät ich nie wieder.
Und wenn ichs doch tun würde dann reiss ich sie nieder
&mdash; BBou - Eigentlich
</div>
<div class="para">
Ich glaubte an das Gute, doch die Pille schmeckt so bitter.
Diese Welt geht langsam unter, deshalb will ich keine Kinder.
&mdash; Antifuchs - Mama
</div>
<div class="para">
Ich hab geschrieben ... damit mir der Kopf nicht platzt.
<br>
&mdash; Torch - Ich hab geschrieben
</div>
<div class="para">
Halt du sie dumm, ich halt sie arm.
(sagt der König zum Priester)
</div>
<div class="para">
Die hohe, reich dotierte Geislichkeit
fürchtet nichts mehr
als die Aufklärung der unteren Masse.
&mdash; J. W. Goethe
</div>
<div class="para">
Wir haben geträumt, von einer besseren Welt.
Wir haben sie uns, so einfach vorgestellt.
Wir haben geträumt, es war ne lange Nacht.
Ich wünschte wir wären niemals aufgewacht.
Revolution, wir wollten weg von der Masse.
Kopfüber in die Hölle und zurück.
Heute stehst du, bei Hertie an der Kasse.
Da ist keine Sehnsucht mehr in deinem Blick.
Du sagst man tut halt was man kann.
Und dir gehts gut, du kotzt mich an
&mdash; Terrorgruppe - Kopfüber In Die Hölle
</div>
<div class="para">
Wer in Glaubensfragen den Verstand befragt,
kriegt unchristliche Antworten.
&mdash; Wilhelm Busch
</div>
<div class="para">
Der beste Trick vom Teufel ist:
Den Menschen einreden: es gibt keinen Teufel.
</div>
<div class="para">
Des großen Alexander Reich zerfiel;
das der alten Römer und das Napoleons ging in Trümmer;
sie waren gebaut auf die Gewalt der Waffen.
Aber das Reich von Neu-Rom
besteht schon fast anderthalbtausend Jahre
und wird wer weiß wie lange bestehen,
denn es ruht auf dem solidesten Fundament:
auf der Dummheit der Menschen.
&mdash; Otto von Corvin
</div>
<div class="para">
Wer glaubt etwas zu sein,
der hat aufgehört es zu werden.
</div>
<div class="para">
Glaube denen, die die Wahrheit suchen,
und zweifle an denen, die sie gefunden haben.
&mdash; André Gide
</div>
<div class="para">
Religion ist:
wahr für das Volk,
falsch für die Weisen,
nützlich für die Herrscher.
&mdash; Edward Gibbon
</div>
<div class="para">
Reform, Säkularisierung, Denazifizierung, Wissenschaft, Reset ...
ist der
<div class="annotation" onClick="clickAnnotation(this)" title='
shapeshift, shapeshifters, etikettenwechsel, flaggenwechsel
'>Fassadenwechsel</div>
von alter Staatsreligion zu neuer Staatsreligion.
</div>
<div class="para">
Unter den Talaren, der Muff von tausend Jahren.
</div>
<div class="para">
Ich war gerne in der Schule, es war ne gute Zeit.
Du sagst, dass ich trotzdem keinen Abschluss habe, tut dir leid.
Doch warum? Ich bin nicht dumm, ich will so komisch reden.
Ich hab einfach ein großes Problem mit Autoritäten.
...
Das Schulsystem ist für'n Arsch, ihr kommt nicht an uns ran.
Doch ihr macht einfach die Augen zu und bleibt so arrogant.
Wenn's ein Problem gibt, müsst ihr gerne drüber reden.
Doch in erster Linie müsst ihr lern, uns zu versteh'n.
&mdash; Sido [M1] - Schule
</div>
<div class="para">
Ich war in der Schule und habe nix gelernt.
Doch heute habe ich ein Affen und ein Pferd.
&mdash; K.I.Z - Affe und Pferd
</div>
<div class="para">
Ich komm nicht aus der East Side, komm nicht aus der West Side.
Bruder ich komme aus der Steinzeit, uh!
...
Jeder hier sagt ich bin sympathisch und nett.
Ein Gysi auf der Straße und ein Stalin im Bett, ah!
<br>
&mdash; K.I.Z - VIP in der Psychiatrie
</div>
2022-08-14 21:01:55 +02:00
<div class="para">
Wahrheit ist da wos weh tut.
</div>
2022-08-13 15:30:56 +02:00
<div class="para">
Mein größte Angst ist Zeitverschwendung.
</div>
<div class="para">
A person who is demoralized
is unable to assess true information.
<b>The facts tell nothing to him.</b>
Even if I shower him with information,
with authentic proof, with documents, with pictures.
Even if I take him by force to the Soviet Union
and show him a concentration camp,
<b>he will refuse to believe it</b>,
until he is going to receive a kick in his fat bottom.
When the military boot crushes his balls,
then he will understand, but not before that.
That is the tragedy of the situation of <b>demoralization</b>.
So basically, America is stuck with demoralization.
And even if you start right now, here, this minute,
you start educating a new generation of Americans.
It will still take you fifteen to <b>twenty years</b>
to turn the tide of ideological perception of reality
back to normalcy and patriotism.
&mdash; Yuri Bezmenov (Ex KGB Agent)
</div>
<div class="para">
Ich will hier weg, weg, jeden Tag das Gleiche.
Der Punk in mir versteckt hinter Nadelstreifen.
...
Sie [MDMA] zeigt mir ihre Welt und ich fühl mich wie neu geboren.
Sie dirigiert das Licht, flüstert in mein Ohr.
All die verschwommenen dunklen Bilder werden klar.
Und alles was sie sagt wird wahr.
...
Ich denk nicht mehr nach.
Brauch keinen Schlaf, brauch keinen Plan, ich bin so schön verstrahlt.
...
Ein großer Fisch braucht'n großen Teich.
Sie hat mich befreit, denn mein Aquarium war zu klein.
...
Deine Schönheit ist so gnadenlos, seh' wie alles neben dir verwelkt.
Und alle sind sie gegen uns, doch ich weiß dass du zu mir hältst.
Und wenn wir zusammen sind, wird jede kalte Nacht zum Tag.
Kenn keine Angst mehr, denn ich bin so schön verstrahlt.
&mdash; Marteria [M1] - Verstrahlt
</div>
<div class="para">
Weißt du noch? Als wir in die Tische ritzten in den Schulen,
bitte Herr vergib ihnen nicht denn sie wissen was sie tun.
Unter den Pflastersteinen wartet der Sandstrand,
wenn ich mit Rap dann mit der Pumpgun.
...
Du willst einen rauchen? Dann geh dir was pflücken im Garten,
Doch unser heutiges Leben lässt sich auch nüchtern ertragen.
...
Ein Goldbarren ist für uns das gleiche wie ein Ziegelstein,
der Kamin geht aus, wirf' mal noch 'ne Bibel rein.
Die Kids gruseln sich, denn ich erzähle vom Papst,
dieses Leben ist so schön, wer braucht ein Leben danach?
...
Baby die Zeit mit dir war so wunderschön.
Ja, jetzt ist es wieder aus, aber unsere Kinder weinen nicht,
denn wir ziehen sie alle miteinander auf.
...
Sie dachten echt ihre Scheiße hält ewig
...
Hurra, diese Welt geht unter!
Auf den Trümmern das Paradies
&mdash; K.I.Z - Hurra die Welt geht unter
</div>
<div class="para">
Teacher leave them kids alone.
&mdash; Pink Floyd - Another Brick in the Wall
</div>
<div class="para">
Als die ersten Missionare nach Afrika kommen,
besitzen sie die Bibel und wir das Land.
Sie sagen: Lasst uns beten!
Und wir schließen die Augen.
Als wir die Augen wieder öffnen,
ist die Lage genau umgekehrt:
Wir haben die Bibel und sie haben das Land.
&mdash; Desmond Tutu
</div>
<div class="para">
Gegen Dummheit hilft nur Gewalt.
</div>
<div class="para">
Wegen Bomben die ich baute nannten sie mich Attentäter,
Terrorist Gegenläufer und Verräter.
Aber später werden Menschen die wie ich sind euch regieren,
Und so sage ich mir täglich nur den Glauben nicht verlieren.
...
Untergrund ist Medizin Rap Antidepressiva,
Gegen Hiphop-HIV auch bekannt als Viva.
Wer will Liebeslieder und wer will tighte Raps,
Ich will raus aus diesem Knast, mein Mikro Geld und Sex.
...
Wie kann so etwas Gutes so falsch sein?
Warum ist so etwas Schönes so schlecht?
Weshalb gibt es auf der Welt keine Liebe?
Und weswegen hab ich eigentlich immer recht?
...
Jeden Tag sterben Kinder, es gibt neue Kriege,
Ich sehe Hass und Zerstörung, Berlin-West, keine Liebe.
Zensur und RTL formten mich zum Psychopathen,
die Platten die ich hörte machten mich zum Mic-Soldaten.
Und deshalb ist jetzt KO-Zeit angebrochen für euch Opfer,
die Devise lautet "Hände weg vom Mic oder Kopf ab!"
...
Wonderbras und Silikon sollten Pflicht sein für Gehirne,
denn bis jetzt hat jeder Zweite von euch Scheiße in der Birne.
Hier kommt Anti gegen Alles, ich misstraue auch mir selbst,
Hauptsache ist du stirbst, egal durch wessen Schwert du fällst.
Alle Hippies und Versager kommen ins Hiphop-Arbeitslager.
"Untergrund" zu sein heißt tot sein oder Krieg wie Intifada.
&mdash; Prinz Pi [M1] - Keine Liebe
</div>
<div class="para">
Der Mensch sucht Heldenfiguren, dann muss er selbst nichts mehr tun.
Niemand mehr der etwas bewegt, als wären sie querschnittsgelähmt.
&mdash; Kollegah - Wie ein Boss
</div>
<div class="para">
Was ist mit der Realness? Alle nur noch Wellness.
&mdash; Marsimoto - Wellness
</div>
<div class="para">
Corona Hysterie? Ist doch klar was dahinter steckt!
Genau, Pharma und die Bankendynastien,
Billie G. und die gut bewährten Ablenkungsmanieren.
...
Hiermit will ich Zeichen und zugleich weitere Weichen setzen
weiter als die Zeit in der Parteien deinen Preis berechnen.
...
"Du wählst die AFD" - Nee Man ich bin unpolitisch.
Du kannst es grade sehn, jeder von euch Dumbos sieht es.
Ich glaube ja im Kern, sind wir nicht so unterschiedlich.
Denn nur deine Wahrnehmung bestimmt, ob jemand unbeliebt ist.
&mdash; Der Typ - Corona Brainwash
</div>
2022-08-14 21:01:55 +02:00
<div class="para">
We're sick of your treason, sick of your lies
&mdash; Pennywise - Fuck Authority
</div>
2022-08-13 15:30:56 +02:00
<div class="para">
Nach 10.000 Jahren habe ich sie endlich gefunden:
<br>
die Schriftrolle der Wahrheit!
- "Du bist dumm."
- Nahh!
</div>
<div class="para">
Anhang: <b>Konzepte</b>
</div>
<div class="para">
2022-08-14 21:01:55 +02:00
Konzept: <b>Trauma Releasing Exercises</b> von David Berceli.
2022-08-13 15:30:56 +02:00
Krampfen und Zittern.
Echter Exorzismus.
Befreiung aus Blockaden.
Befreiung aus Angst.
Video:
<a href="https://youtu.be/4lrfdsV4zB8">The Wounded Woman - Chapter 3</a>
</div>
2022-08-14 21:01:55 +02:00
<div class="para">
Konzept: Trauma-based <b>Mind Control</b>.
Provokation und Sublimation.
Ein Kind wird gezwungen in Erzieher-Kind Beziehungen,
unter böse oder dumme Erzieher.
Diese Erzieher traumatisieren das Kind
durch falsche Erziehung:
Verletzen oder Vernachlässigen.
Trauma heisst:
das Kind war zu schwach für Abwehr,
das Kind durfte nicht zurückschlagen,
das Kind durfte immer nur "lieb sein" / "nett sein" / "brav sein",
ungelöster Konflikt,
verdrängte Aggression,
unterschwelliger Hass,
verkrampfte Körperhaltung,
Blockaden,
Tabu-Themen,
Trigger Topics.
Folge:
Ein lebenslanger Rache-Feldzug
gegen alle "Autoritäten",
also gegen jeden,
der das Kind erinnert an seine Erzieher.
</div>
<div class="para">
Also vor allem ein Rache-Feldzug
gegen alle "stolzen" Autoritäten
(Typ 1 Menschen, transactional leadership style, 1 führt und 2 folgt),
die ihre Dominanz offen ausleben.
Solche Typ 1 Menschen wecken Hoffnung in dem Kind,
Hoffnung auf "Erlösung" (Trauma Release),
weil Typ 1 "führt zu Freiheit".
Aber die meisten Typ 1 Menschen
sind nicht vorbereitet für diese Situation,
und wissen nicht (Dummheit),
wie sie reagieren sollen auf diese Hoffnung.
Folge:
Das Kind ist enttäuscht vom Typ 1 Mensch,
der Typ 1 Mensch wirkt wie ein Versager,
das Kind fühlt sich verletzt oder vernachlässigt,
das Kind erinnert sich an sein Trauma
(Verletzungen in der Kindheit) (Re-Traumatisierung),
die verdrängte Aggression kommt wieder hoch,
das Kind wird aggressiv gegen den Typ 1 Mensch.
</div>
<div class="para">
Die Gewinner in diesem Spiel sind Typ 4 Menschen,
die ihre Dominanz unterschwellig ausleben
(Typ 4 Menschen, transformational leadership style, 3 führt und 4 folgt).
Solche Typ 4 Menschen nutzen die verdrängte Aggression
als Motivation zum Arbeiten (Motivation, Antrieb).
Dazu macht der Typ 4 Mensch
unterschwellige Anspielungen auf die Tabu-Themen vom Kind.
Das Kind wird leicht aggressiv,
und der Typ 4 Mensch lenkt diese Aggression in produktive Arbeit
(Sublimation, Spiel mit dem Feuer).
</div>
<div class="para">
Man kann dieses "Spiel" auch so verstehen:
Typ 4 Menschen sind blind für Naturordnung.
Sprich: "Natur ist nichts, Erziehung ist alles."
Also: "Alle Menschen sind gleich geboren,
und alle Unterschiede sind gelernt."
Also: Aggression ist gelernt.
Also: Man zwingt manche Kinder in eine "Erziehung zu Aggression",
damit diese Kinder später eine "Motivation zum Arbeiten" haben.
Diese Menschen glauben auch nicht an Freiwillige Arbeit
(negatives Menschenbild, "alle Menschen sind faul")
</div>
2022-08-13 15:30:56 +02:00
<!-- duplicate
<div class="para">
Ich bin nicht der Mund für diese Ohren.
&mdash; Friedrich Nietzsche
</div>
-->
<hr>
<div class="para">
2022-07-29 12:58:38 +02:00
Ich:
Milan Hauth,
Jägerstraße 10,
83308 Trostberg.
2022-07-29 12:58:38 +02:00
Tel +49 151 7205 9978,
milahu@gmail.com,
milahu@protonmail.com,
@milahu:matrix.org
</div>
<div class="para">
2022-07-29 12:58:38 +02:00
MIT License,
Copyright (c) 2022 Milan Hauth.
Das heisst:
2022-07-29 12:58:38 +02:00
Du darfst alles mit meinem Text machen,
und ich gebe dir keine Garantie.
</div>
2022-08-13 15:30:56 +02:00
<div class="para">
Anhang: Das Muster für 8 x 8 = 64 Menschen
</div>
<pre class="para" style="font-size:90%; margin-top:5em">
M4S F2S M1S F3S M4S F2S M1S F3S
x x x x
M1L F3L M4L F2L M1L F3L M4L F2L
o o o o
M2S F4S M3S F1S M2S F4S M3S F1S
x x x x
M3L F1L M2L F4L M3L F1L M2L F4L
o o o o
M4S F2S M1S F3S M4S F2S M1S F3S
x x x x
M1L F3L M4L F2L M1L F3L M4L F2L
o o o o
M2S F4S M3S F1S M2S F4S M3S F1S
x x x x
M3L F1L M2L F4L M3L F1L M2L F4L
o o o o
</pre>
<!-- end of pamphlet -->
<!-- ######################################################################## -->
</article><!-- end #content -->
<script title="bindery.umd.js" class="foldme">
// based on node_modules/bindery/dist/bindery.umd.js
// source https://github.com/evnbr/bindery
// license MIT License, Copyright (c) 2017 Evan Brooks
/* bindery Bindery v2.3.6 */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Bindery = factory());
}(this, (function () { 'use strict';
const BINDERY_VERSION = 'v2.3.6';
const BINDERY_CLASS_PREFIX = 'bindery-';
function ___$insertStyle(css) {
if (!css) {
return;
}
if (typeof window === 'undefined') {
return;
}
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = css;
document.head.appendChild(style);
return css;
}
const classPrefix = BINDERY_CLASS_PREFIX;
var SheetLayout;
(function (SheetLayout) {
SheetLayout["PAGES"] = "pages";
SheetLayout["SPREADS"] = "spreads";
SheetLayout["BOOKLET"] = "booklet";
})(SheetLayout || (SheetLayout = {}));
var SheetMarks;
(function (SheetMarks) {
SheetMarks[SheetMarks["NONE"] = 0] = "NONE";
SheetMarks[SheetMarks["CROP"] = 1] = "CROP";
SheetMarks[SheetMarks["BLEED"] = 2] = "BLEED";
SheetMarks[SheetMarks["BOTH"] = 3] = "BOTH";
})(SheetMarks || (SheetMarks = {}));
var SheetSize;
(function (SheetSize) {
SheetSize["AUTO"] = "auto";
SheetSize["AUTO_BLEED"] = "auto-bleed";
SheetSize["AUTO_MARKS"] = "auto-marks";
SheetSize["LETTER_PORTRAIT"] = "letter-portrait";
SheetSize["LETTER_LANDSCAPE"] = "letter-landscape";
SheetSize["A4_PORTRAIT"] = "a4-portrait";
SheetSize["A4_LANDSCAPE"] = "a4-landscape";
SheetSize["A5_PORTRAIT"] = "a5-portrait";
SheetSize["A5_LANDSCAPE"] = "a5-landscape";
})(SheetSize || (SheetSize = {}));
var ViewerMode;
(function (ViewerMode) {
ViewerMode["FLIPBOOK"] = "flipbook";
ViewerMode["PREVIEW"] = "preview";
ViewerMode["PRINT"] = "print";
ViewerMode["LINEAR"] = "linear";
})(ViewerMode || (ViewerMode = {}));
//
const prefixer = (str) => {
if (str[0] === '.') {
return `.${classPrefix}${str.substr(1)}`;
}
return `${classPrefix}${str}`;
};
const classes = {
showBleed: 'show-bleed',
showCrop: 'show-crop',
showBleedMarks: 'show-bleed-marks',
isViewing: 'viewing',
viewPreview: 'view-preview',
viewPrint: 'view-print',
viewFlip: 'view-flip',
viewLinear: 'view-linear',
inProgress: 'in-progress',
leftPage: 'left',
rightPage: 'right',
isOverflowing: 'is-overflowing',
printSheet: 'print-sheet',
sheetSpread: 'print-sheet-spread',
sheetLeft: 'print-sheet-left',
sheetRight: 'print-sheet-right',
toNext: 'continues',
fromPrev: 'continuation',
};
Object.keys(classes).forEach(k => {
const key = k;
const val = classes[key];
classes[key] = prefixer(val);
});
const allModeClasses = [
classes.viewPreview,
classes.viewPrint,
classes.viewFlip,
classes.viewLinear,
];
const classForMode = (mode) => {
switch (mode) {
case ViewerMode.PREVIEW:
return classes.viewPreview;
case ViewerMode.PRINT:
return classes.viewPrint;
case ViewerMode.FLIPBOOK:
return classes.viewFlip;
case ViewerMode.LINEAR:
return classes.viewLinear;
default:
throw Error(`Getting class for unknown mode: ${mode}`);
}
};
const isElement = (node) => node.nodeType === Node.ELEMENT_NODE;
const isFunc = (val) => typeof val === 'function';
const isElementWrapper = (val) => (val === null || val === void 0 ? void 0 : val.element) && isElement(val.element);
const h = (tagName, classNames, attrs, ...children) => {
const el = document.createElement(tagName);
if (classNames)
el.className = classNames
.split('.')
.filter(txt => txt !== '')
.map(prefixer)
.join(' ');
if (attrs)
for (const k in attrs) {
// @ts-ignore TODO replace with hyperscript anyways
const v = attrs[k];
// @ts-ignore TODO replace with hyperscript anyways
if (isFunc(v))
el[k] = v;
else
el.setAttribute(k, v);
}
if (children) {
el.append(...children.map(item => {
return isElementWrapper(item) ? item.element : item;
}));
}
return el;
};
const div = (cls, ...children) => {
return h('div', cls, {}, ...children);
};
const button = (cls, attrs, label) => {
return h('button', cls, attrs, label);
};
const select = (cls, attrs, ...optionElements) => {
return h('select', cls, attrs, ...optionElements);
};
const option = (attrs, label) => {
return h('option', null, attrs, label);
};
const safeMeasure = (el, measureCallback) => {
if (el.parentNode)
return measureCallback();
let measureArea = document.querySelector(prefixer('.measure-area'));
if (!measureArea)
measureArea = document.body.appendChild(div('.measure-area'));
if (measureArea.firstElementChild !== el) {
measureArea.innerHTML = '';
measureArea.append(el);
}
const result = measureCallback();
return result;
};
// Create stylesheet with id
const addStylesheet = (id) => {
const style = window.document.createElement('style');
style.id = id;
window.document.head.appendChild(style);
return style;
};
// Fetch or create stylesheet with id
const stylesheet = (id) => {
var _a;
return (_a = window.document.querySelector(`#${id}`)) !== null && _a !== void 0 ? _a : addStylesheet(id);
};
// Parse html from text
const parseHTML = (text, selector) => {
const wrapper = window.document.createElement('div');
wrapper.innerHTML = text;
return selector ? wrapper.querySelector(selector) : wrapper;
};
// https://github.com/moroshko/shallow-equal/blob/master/src/arrays.js
const shallowEqual = (a, b) => {
if (a === b)
return true;
if (!a || !b)
return false;
const len = a.length;
if (b.length !== len) {
return false;
}
for (let i = 0; i < len; i += 1) {
if (a[i] !== b[i])
return false;
}
return true;
};
const throttleFrame = () => {
let wasCalled = false;
let queued;
const inner = (func) => {
if (wasCalled) {
queued = func;
return;
}
wasCalled = true;
func();
requestAnimationFrame(() => {
wasCalled = false;
if (queued) {
const queuedFunc = queued;
queued = undefined;
inner(queuedFunc);
}
});
};
return inner;
};
const throttleTime = (ms) => {
let wasCalled = false;
let queued;
const inner = (func) => {
if (wasCalled) {
queued = func;
return;
}
wasCalled = true;
func();
setTimeout(() => {
wasCalled = false;
if (queued) {
const queuedFunc = queued;
queued = undefined;
inner(queuedFunc);
}
}, ms);
};
return inner;
};
const formatAsRanges = (pageNumbers) => {
let str = '';
let prevNum = pageNumbers[0];
let isInARange = false;
const addFirst = (num) => {
str += `${num}`;
};
const continueRange = () => {
isInARange = true;
};
const endRange = (endNum) => {
isInARange = false;
str += `${endNum}`;
};
const addComma = (num) => {
str += `, ${num}`;
};
const endAndAdd = (endNum, num) => {
endRange(endNum);
addComma(num);
};
const addLast = (num, isAdjacent) => {
if (isAdjacent)
endRange(num);
else if (isInARange && !isAdjacent)
endAndAdd(prevNum, num);
else
addComma(num);
};
pageNumbers.forEach((num, i) => {
const isLast = i === pageNumbers.length - 1;
const isAdjacent = num === prevNum + 1;
if (i === 0)
addFirst(num);
else if (isLast)
addLast(num, isAdjacent);
else if (isAdjacent)
continueRange();
else if (isInARange && !isAdjacent)
endAndAdd(prevNum, num);
else
addComma(num);
prevNum = num;
});
return str;
};
const cssNumberRegEx = /^([+-]?[0-9]+(.?[0-9]+)?)(px|in|cm|mm|pt|pc)$/;
const isLength = (str) => cssNumberRegEx.test(str);
const parseLength = (str) => {
if (!isLength(str))
throw Error(`Cannot parse css length from "${str}"`);
const matches = str.match(cssNumberRegEx);
if (!matches) {
throw Error(`Failed to parse css length from "${str}"`);
}
return {
val: Number(matches[1]),
unit: matches[3],
};
};
var defaultPageSetup = {
bleed: '12pt',
size: { width: '4in', height: '6in' },
margin: {
inner: '24pt',
outer: '24pt',
bottom: '40pt',
top: '48pt',
},
};
const letter = Object.freeze({ width: '8.5in', height: '11in' });
const a4 = Object.freeze({ width: '210mm', height: '297mm' });
const a5 = Object.freeze({ width: '148mm', height: '210mm' }); // TODO 210mm or 209mm? maybe need 209mm to avoid extra pagebreaks
// const a4 = Object.freeze({ width: '200mm', height: '287mm' });
// Not a really reliable way to know this
const supportsCustomPageSize = () => !!window.hasOwnProperty('chrome');
class PageSetup {
constructor(opts = {}, printOpts = {}) {
var _a, _b, _c;
this.size = (_a = opts.size) !== null && _a !== void 0 ? _a : defaultPageSetup.size;
this.margin = (_b = opts.margin) !== null && _b !== void 0 ? _b : defaultPageSetup.margin;
this.markLength = '12pt';
this.paper = supportsCustomPageSize()
? printOpts.paper || SheetSize.AUTO
: SheetSize.AUTO_MARKS;
this.bleed = (_c = printOpts.bleed) !== null && _c !== void 0 ? _c : defaultPageSetup.bleed;
this.printTwoUp =
!!printOpts.layout && printOpts.layout !== SheetLayout.PAGES;
}
get displaySize() {
const width = this.printTwoUp ? this.spreadSize.width : this.size.width;
const height = this.size.height;
const bleed = this.bleed;
return { width, height, bleed };
}
get sheetSize() {
const width = this.printTwoUp ? this.spreadSize.width : this.size.width;
const height = this.size.height;
const doubleBleed = `2 * ${this.bleed}`;
const doubleMarks = `${doubleBleed} + 2 * ${this.markLength}`;
const singleMarks = `${this.bleed} + ${this.markLength}`;
switch (this.paper) {
case SheetSize.AUTO:
return { width, height };
case SheetSize.AUTO_BLEED:
return {
width: `calc(${width} + ${this.printTwoUp ? doubleBleed : this.bleed})`,
height: `calc(${height} + ${doubleBleed})`,
};
case SheetSize.AUTO_MARKS:
return {
width: `calc(${width} + ${this.printTwoUp ? doubleMarks : singleMarks})`,
height: `calc(${height} + ${doubleMarks})`,
};
case SheetSize.LETTER_LANDSCAPE:
return { width: letter.height, height: letter.width };
case SheetSize.LETTER_PORTRAIT:
return letter;
case SheetSize.A4_PORTRAIT:
return a4;
case SheetSize.A4_LANDSCAPE:
return { width: a4.height, height: a4.width };
case SheetSize.A5_PORTRAIT:
return a5;
case SheetSize.A5_LANDSCAPE:
return { width: a5.height, height: a5.width };
default:
throw Error(`Can't get dimensions for unknown paper size: ${this.paper}`);
}
}
get spreadSize() {
const w = parseLength(this.size.width);
console.log(`spreadSize.height = ${this.size.height}`)
return {
height: this.size.height,
width: `${w.val * 2}${w.unit}`,
};
}
updateStyleVars() {
const page = this.size;
const sheet = this.sheetSize;
const cssVariables = {
'spread-width': this.spreadSize.width,
'page-width': page.width,
'page-height': page.height,
'sheet-width': sheet.width,
'sheet-height': sheet.height,
'margin-inner': this.margin.inner,
'margin-outer': this.margin.outer,
'margin-top': this.margin.top,
'margin-bottom': this.margin.bottom,
bleed: this.bleed,
'mark-length': this.markLength,
};
const cssStr = Object.entries(cssVariables)
.map(([k, v]) => {
return `--bindery-${k}: ${v};`;
})
.join('');
const rootRule = `:root { ${cssStr} }`;
const pageRule = `@page { size: ${sheet.width} ${sheet.height}; }`;
stylesheet('binderyPage').innerHTML = `${rootRule} ${pageRule}`;
}
}
class Rule {
constructor(options) {
var _a;
this.name = (_a = options === null || options === void 0 ? void 0 : options.name) !== null && _a !== void 0 ? _a : 'Unnamed Bindery Rule';
this.selector = '';
Object.keys(options).forEach(key => {
this[key] = options[key];
});
}
setup() { }
}
const validateRuntimeOptions = (opts, validOpts) => {
if (!validOpts)
throw Error('Valid options not specified');
Object.keys(opts).forEach(k => {
var _a;
if (!validOpts[k]) {
const setName = (_a = validOpts.name) !== null && _a !== void 0 ? _a : 'This option';
throw Error(`Unknown option in ${setName}: '${k}'`);
}
const val = opts[k];
const type = validOpts[k];
if (!type.check(val)) {
const optName = validOpts.name ? `${validOpts.name}.${k}` : k;
const valName = JSON.stringify(val);
throw Error(`Invalid value for '${optName}': ${valName} is not a ${type.name}.`);
}
});
return true;
};
const isObj = (val) => typeof val === 'object';
const isFunc$1 = (val) => typeof val === 'function';
const isBool = (val) => typeof val === 'boolean';
const isStr = (val) => typeof val === 'string';
const isNum = (val) => typeof val === 'number';
const isArr = (val) => Array.isArray(val);
const hasProp = (obj, k) => Object.prototype.hasOwnProperty.call(obj, k);
const hasSameKeys = (opts, required) => {
const keys = Object.keys(required).filter(k => k !== 'name');
return !keys.some(k => !hasProp(opts, k));
};
const isShape = (template) => {
return (input) => {
return isObj(input) && validateRuntimeOptions(input, template);
};
};
const isShapeExact = (template) => {
return (input) => {
return (isObj(input) &&
hasSameKeys(input, template) &&
validateRuntimeOptions(input, template));
};
};
const isEnum = (cases) => {
return (str) => {
return cases.includes(str);
};
};
const lengthChecker = {
name: 'length (string with absolute units)',
check: isLength,
};
const RuntimeTypes = {
any: {
name: 'any',
check: () => true,
},
enum(...cases) {
return {
name: `(${cases.map(c => `"${c}"`).join(' | ')})`,
check: isEnum(cases),
};
},
shapeExact: (template) => ({
name: `exactly ({${Object.keys(template).join(', ')}})`,
check: isShapeExact(template),
}),
shape: (template) => ({
name: `shape ({${Object.keys(template).join(', ')}})`,
check: isShape(template),
}),
string: {
name: 'string',
check: isStr,
},
length: lengthChecker,
number: {
name: 'number',
check: isNum,
},
bool: {
name: 'bool',
check: isBool,
},
func: {
name: 'func',
check: isFunc$1,
},
obj: {
name: 'object',
check: isObj,
},
array: {
name: 'array',
check: isArr,
},
margin: {
name: 'margin ({ top, inner, outer, bottom })',
check: isShapeExact({
name: 'margin',
top: lengthChecker,
inner: lengthChecker,
outer: lengthChecker,
bottom: lengthChecker,
}),
},
size: {
name: 'size ({ width, height })',
check: isShapeExact({
name: 'size',
width: lengthChecker,
height: lengthChecker,
}),
},
};
class Counter extends Rule {
constructor(options) {
var _a, _b, _c;
super(options);
this.selector = '*';
this.counterValue = 0;
this.incrementEl = (_a = options.incrementEl) !== null && _a !== void 0 ? _a : '';
this.resetEl = (_b = options.resetEl) !== null && _b !== void 0 ? _b : '';
this.replaceEl = (_c = options.replaceEl) !== null && _c !== void 0 ? _c : '';
validateRuntimeOptions(options, {
name: 'Counter',
replaceEl: RuntimeTypes.string,
resetEl: RuntimeTypes.string,
incrementEl: RuntimeTypes.string,
replace: RuntimeTypes.func,
});
}
setup() {
this.counterValue = 0;
}
beforeAdd(el) {
if (this.incrementEl.length && el.matches(this.incrementEl))
this.counterValue += 1;
if (this.resetEl.length && el.matches(this.resetEl))
this.counterValue = 0;
if (this.replaceEl.length && el.matches(this.replaceEl))
return this.createReplacement(el);
return el;
}
createReplacement(element) {
return this.replace(element, this.counterValue);
}
replace(element, counterValue) {
element.textContent = `${counterValue}`;
return element;
}
}
class OutOfFlow extends Rule {
constructor(options) {
super(options);
this.name = 'Out of Flow';
}
createOutOfFlowPages(elmt, book, makeNewPage) {
throw Error('createOutOfFlowPages must be overridden');
}
beforeAdd(elmt) {
// Avoid breaking inside this element. Once it's completely added,
// it will moved onto the background layer.
// TODO: this should be handled inside regionize
elmt.setAttribute('data-ignore-overflow', 'true');
return elmt;
}
afterAdd(elmt, book, continueOnNewPage, makeNewPage) {
this.createOutOfFlowPages(elmt, book, makeNewPage);
// Catches cases when we didn't need to create a new page. but unclear
if (this.continue !== 'same' || book.currentPage.hasOutOfFlowContent) {
continueOnNewPage();
if (this.continue === 'left' || this.continue === 'right') {
book.currentPage.setPreference(this.continue);
}
}
return elmt;
}
}
class FullBleedSpread extends OutOfFlow {
constructor(options) {
var _a, _b;
options.continue = (_a = options.continue) !== null && _a !== void 0 ? _a : 'same';
options.rotate = (_b = options.rotate) !== null && _b !== void 0 ? _b : 'none';
super(options);
validateRuntimeOptions(options, {
name: 'FullBleedSpread',
selector: RuntimeTypes.string,
continue: RuntimeTypes.enum('next', 'same', 'left', 'right'),
rotate: RuntimeTypes.enum('none', 'clockwise', 'counterclockwise'),
});
}
createOutOfFlowPages(elmt, book, makeNewPage) {
if (!!elmt.parentNode) {
elmt.parentNode.removeChild(elmt);
}
let leftPage;
if (book.currentPage.isEmpty) {
leftPage = book.currentPage;
}
else {
leftPage = makeNewPage();
book.addPage(leftPage);
}
const rightPage = makeNewPage();
book.addPage(rightPage);
if (this.rotate !== 'none') {
[leftPage, rightPage].forEach(page => {
const rotateContainer = div(`.rotate-container.spread-size-rotated.rotate-spread-${this.rotate}`);
rotateContainer.append(page.background);
page.element.append(rotateContainer);
});
}
leftPage.background.append(elmt);
leftPage.element.classList.add(prefixer('spread'));
leftPage.setPreference('left');
leftPage.isOutOfFlow = this.continue === 'same';
leftPage.avoidReorder = true;
leftPage.hasOutOfFlowContent = true;
rightPage.background.append(elmt.cloneNode(true));
rightPage.element.classList.add(prefixer('spread'));
rightPage.setPreference('right');
rightPage.isOutOfFlow = this.continue === 'same';
rightPage.avoidReorder = true;
rightPage.hasOutOfFlowContent = true;
}
}
class FullBleedPage extends OutOfFlow {
constructor(options) {
var _a, _b;
options.continue = (_a = options.continue) !== null && _a !== void 0 ? _a : 'same';
options.rotate = (_b = options.rotate) !== null && _b !== void 0 ? _b : 'none';
super(options);
validateRuntimeOptions(options, {
name: 'FullBleedPage',
selector: RuntimeTypes.string,
continue: RuntimeTypes.enum('next', 'same', 'left', 'right'),
rotate: RuntimeTypes.enum('none', 'inward', 'outward', 'clockwise', 'counterclockwise'),
});
}
createOutOfFlowPages(elmt, book, makeNewPage) {
if (elmt.parentNode) {
elmt.parentNode.removeChild(elmt);
}
let newPage;
if (book.currentPage.isEmpty) {
newPage = book.currentPage;
}
else {
newPage = makeNewPage();
book.addPage(newPage);
}
if (this.rotate !== 'none') {
const rotateContainer = div(`.rotate-container.page-size-rotated.rotate-${this.rotate}`);
rotateContainer.appendChild(newPage.background);
newPage.element.appendChild(rotateContainer);
}
newPage.background.appendChild(elmt);
newPage.hasOutOfFlowContent = true;
}
}
class Replace extends Rule {
constructor(options) {
super(options);
this.name = 'Replace';
}
afterAdd(element, book, continueOnNewPage, makeNewPage, overflowCallback) {
const parent = element.parentNode;
if (!parent) {
console.error(element);
throw Error(`Bindery.Replace({ selector: '${this.selector}' }).afterAdd called on element that hasn't been added.`);
}
const defensiveClone = element.cloneNode(true);
const replacement = this.createReplacement(book, defensiveClone);
parent.replaceChild(replacement, element);
if (book.currentPage.hasOverflowed()) {
parent.replaceChild(element, replacement);
return overflowCallback(element);
}
return replacement;
}
createReplacement(book, element) {
return this.replace(element);
}
replace(element, info) {
element.insertAdjacentHTML('beforeend', '<sup class="bindery-sup">Default Replacement</sup>');
return element;
}
}
class Footnote extends Replace {
constructor(options) {
super(options);
validateRuntimeOptions(options, {
name: 'Footnote',
selector: RuntimeTypes.string,
replace: RuntimeTypes.func,
render: RuntimeTypes.func,
});
}
afterAdd(element, book, continueOnNewPage, makeNewPage, overflowCallback) {
const number = book.currentPage.footer.children.length + 1;
const footnote = div('.footnote');
const contents = this.render(element, number);
if (contents instanceof HTMLElement)
footnote.appendChild(contents);
else
footnote.innerHTML = contents;
book.currentPage.footer.appendChild(footnote);
return super.afterAdd(element, book, continueOnNewPage, makeNewPage, (overflowEl) => {
book.currentPage.footer.removeChild(footnote);
return overflowCallback(overflowEl);
});
}
createReplacement(book, element) {
const number = book.currentPage.footer.children.length;
return this.replace(element, number);
}
replace(element, number) {
//element.insertAdjacentHTML('beforeend', `<sup class="bindery-sup">${number}</sup>`);
element.insertAdjacentHTML('beforeend', ` <span class="bindery-sup">[${number}]</span>`);
return element;
}
render(originalElement, number) {
return `<sup>${number}</sup> Default footnote (<a href='/bindery/docs/#footnote'>Learn how to change it</a>)`;
}
}
/* bindery Regionize v0.1.7 */
const div$1 = (cls) => {
const el = document.createElement('div');
el.classList.add(cls);
return el;
};
class Region {
constructor(el) {
this.suppressErrors = false;
this.element = el;
this.content = div$1('region-content');
this.content.style.position = 'relative';
this.element.appendChild(this.content);
this.path = [];
}
setPath(newPath) {
this.path = newPath;
if (newPath.length > 0)
this.content.appendChild(newPath[0]);
}
get currentElement() {
const len = this.path.length;
if (len > 0)
return this.path[len - 1];
return this.content;
}
isEmpty() {
const el = this.content;
if (el.textContent === null)
return true;
return el.textContent.trim() === '' && el.offsetHeight < 2;
}
isReasonableSize() {
const box = this.element.getBoundingClientRect();
return box.height > 100 && box.width > 100; // TODO: Number is arbitrary
}
overflowAmount() {
const contentH = this.content.offsetHeight;
const boxH = this.element.offsetHeight;
if (boxH === 0) {
console.log('overflowAmount: this.element', this.element);
throw Error('Regionizer: Trying to flow into an element with zero height.');
}
return contentH - boxH;
}
hasOverflowed() {
return this.overflowAmount() > -5;
}
}
const isTextNode = (node) => {
return node.nodeType === Node.TEXT_NODE;
};
const isElement$1 = (node) => {
return node.nodeType === Node.ELEMENT_NODE;
};
const isScript = (node) => {
return node.tagName === 'SCRIPT';
};
const isImage = (node) => {
return node.tagName === 'IMG';
};
const isUnloadedImage = (node) => {
return isImage(node) && !node.naturalWidth;
};
const isContentElement = (node) => {
return isElement$1(node) && !isScript(node);
};
const MAX_TIME = 30; // ms
const rAF = () => new Promise(resolve => {
requestAnimationFrame(t => resolve(t));
});
let lastYieldTime = 0;
const shouldYield = () => {
const timeSinceYield = performance.now() - lastYieldTime;
return timeSinceYield > MAX_TIME;
};
const yieldIfNecessary = async () => {
if (shouldYield())
lastYieldTime = await rAF();
};
const overflowAttr = 'data-ignore-overflow';
// Walk up the tree to see if we are within
// an overflow-ignoring node
const ignoreOverflow = (element) => {
if (element.hasAttribute(overflowAttr))
return true;
if (element.parentElement)
return ignoreOverflow(element.parentElement);
return false;
};
const SPACE = ' ';
const nextWordEnd = (text, startIndex) => {
let newIndex = startIndex + 1;
while (newIndex < text.length && text.charAt(newIndex) !== SPACE) {
newIndex += 1;
}
return newIndex;
};
const previousWordEnd = (text, startIndex) => {
let newIndex = startIndex;
if (text.charAt(newIndex) === SPACE) {
newIndex -= 1;
}
while (text.charAt(newIndex) !== SPACE && newIndex > 0) {
newIndex -= 1;
}
return newIndex;
};
const createTextNode = (text) => document.createTextNode(text);
// Try adding a text node in one go.
// Returns true if all the text fits, false if none fits.
const addInOneGo = async (textNode, container, hasOverflowed) => {
container.appendChild(textNode);
const success = !hasOverflowed();
if (!success)
container.removeChild(textNode);
await yieldIfNecessary();
return { completed: success };
};
// Incrementally add words to the container until it just barely doesnt
// overflow. Returns a remainder textNode for remaining text.
const fillWordsUntilOverflow = async (textNode, container, hasOverflowed) => {
const originalText = textNode.nodeValue || '';
container.appendChild(textNode);
if (!hasOverflowed() || ignoreOverflow(container)) {
// The whole thing fits
return { completed: true };
}
// Clear the node
let proposedEnd = 0;
textNode.nodeValue = originalText.substr(0, proposedEnd);
while (!hasOverflowed() && proposedEnd < originalText.length) {
// Reveal the next word
proposedEnd = nextWordEnd(originalText, proposedEnd);
if (proposedEnd < originalText.length) {
textNode.nodeValue = originalText.substr(0, proposedEnd);
await yieldIfNecessary();
}
}
// Back out to word boundary
const wordEnd = previousWordEnd(originalText, proposedEnd);
if (wordEnd < 1) {
// We didn't even add a complete word, don't add node
textNode.nodeValue = originalText;
container.removeChild(textNode);
return { completed: false };
}
// trim text to word
const fittingText = originalText.substr(0, wordEnd);
const overflowingText = originalText.substr(wordEnd);
textNode.nodeValue = fittingText;
// Create a new text node for the next flow box
return {
completed: true,
remainder: createTextNode(overflowingText),
};
};
// Fills text across multiple elements by requesting a continuation
// once the current element overflows
const fillWords = async (textNode, container, getNextContainer, hasOverflowed) => {
const textLayout = await fillWordsUntilOverflow(textNode, container, hasOverflowed);
if (textLayout.remainder) {
const nextContainer = getNextContainer();
return fillWords(textLayout.remainder, nextContainer, getNextContainer, hasOverflowed);
}
return textLayout;
};
// Shifts this element to the next page. If any of its
// ancestors cannot be split across page, it will
// step up the tree to find the first ancestor
// that can be split, and move all of that descendants
// to the next page.
const tryInNextRegion = (region, makeNextRegion, canSplit) => {
if (region.path.length <= 1) {
throw Error('Regionize: Attempting to move the top-level element');
}
const startLength = region.path.length;
// So this node won't get cloned. TODO: this is unclear
const elementToMove = region.path.pop();
// find the nearest splittable parent
let nearestMoveableElement = elementToMove;
const pathToRestore = [];
while (region.path.length > 1 && !canSplit(region.currentElement)) {
nearestMoveableElement = region.path.pop();
pathToRestore.unshift(nearestMoveableElement);
}
// Once a node is moved to a new page, it should no longer trigger another
// move. otherwise tall elements will endlessly get shifted to the next page
nearestMoveableElement.setAttribute('data-regionize-did-move', 'true');
const parent = nearestMoveableElement.parentNode;
parent.removeChild(nearestMoveableElement);
// If the nearest ancestor would be empty without this node,
// move it to the next page too.
if (region.path.length > 1 &&
region.currentElement.textContent.trim() === '') {
parent.appendChild(nearestMoveableElement);
nearestMoveableElement = region.path.pop();
pathToRestore.unshift(nearestMoveableElement);
nearestMoveableElement.parentNode.removeChild(nearestMoveableElement);
}
let nextRegion;
if (!region.isEmpty()) {
if (region.hasOverflowed()) {
// Recovery failed, maybe the box contains a large
// unsplittable element.
region.suppressErrors = true;
}
nextRegion = makeNextRegion();
}
else {
// If the page is empty when this node is removed,
// then it won't help to move it to the next page.
// Instead continue here until the node is done.
nextRegion = region;
}
// append moved node as first in new page
nextRegion.currentElement.appendChild(nearestMoveableElement);
// restore subpath
pathToRestore.forEach(r => nextRegion.path.push(r));
nextRegion.path.push(elementToMove);
if (startLength !== nextRegion.path.length) {
throw Error('Regionize: Restored path depth does not match original path depth');
}
};
// The path is an array of nested elments,
// for example .content > article > p > a).
//
// It's shallowly cloned every time we move to the next page,
// to create the illusion that nodes are continuing from page
// to page.
//
// The transition can be customized by setting a Split rule,
// which lets you add classes to the original and cloned element
// to customize styling.
const clone = (el, withChildren) => {
return el.cloneNode(withChildren);
};
const shallowClone = (el) => clone(el, false);
const deepClone = (el) => clone(el, true);
const clonePath = (oldPath, applyRules) => {
const newPath = [];
const deepCloneWithRules = (el) => {
const clone = deepClone(el); // could be th > h3 > span;
applyRules(el, clone);
return clone;
};
for (let i = oldPath.length - 1; i >= 0; i -= 1) {
const original = oldPath[i];
const clone = shallowClone(original);
const nextChild = oldPath[i + 1];
clone.innerHTML = '';
applyRules(original, clone, nextChild, deepCloneWithRules);
if (i < oldPath.length - 1)
clone.appendChild(newPath[i + 1]);
newPath[i] = clone;
}
return newPath;
};
// Polls every 10ms for image.naturalWidth
// or an error event.
//
// Note: Doesn't ever reject, since missing images
// shouldn't prevent layout from resolving
const wait10 = () => new Promise(resolve => {
setTimeout(() => {
resolve();
}, 10);
});
const ensureImageLoaded = async (image) => {
const imgStart = performance.now();
let failed = false;
image.addEventListener('error', () => {
failed = true;
});
image.src = image.src; // re-trigger error if already failed
while (!image.naturalWidth && !failed) {
await wait10();
}
return performance.now() - imgStart;
};
const preserveNumbering = (original, clone, nextChild) => {
// restart numbering
let prevStart = 1;
if (original.hasAttribute('start')) {
// the OL is also a continuation
prevStart = parseInt(original.getAttribute('start') || '', 10);
}
if (nextChild && nextChild.tagName === 'LI') {
// the first list item is a continuation
prevStart -= 1;
}
const prevCount = original.children.length;
const newStart = prevStart + prevCount;
clone.setAttribute('start', `${newStart}`);
};
const preserveTableColumns = (original, clone, nextChild, deepClone) => {
const columns = [...original.children];
const currentIndex = columns.indexOf(nextChild);
for (let i = 0; i < currentIndex; i += 1) {
const origCol = columns[i];
if (origCol) {
const clonedCol = deepClone(origCol);
clone.appendChild(clonedCol);
}
}
};
const noop = () => { };
const always = () => true;
const never = () => false;
// flow content through FlowBoxes.
// the caller is responsible for managing
// and creating regions.
const flowIntoRegions = async (opts) => {
var _a, _b, _c, _d, _e, _f;
const content = opts.content;
const createRegion = opts.createRegion;
if (!content)
throw Error('content not specified');
if (!createRegion)
throw Error('createRegion not specified');
// optional
const applySplit = (_a = opts.applySplit) !== null && _a !== void 0 ? _a : noop;
const canSplit = (_b = opts.canSplit) !== null && _b !== void 0 ? _b : always;
const beforeAdd = (_c = opts.beforeAdd) !== null && _c !== void 0 ? _c : noop;
const afterAdd = (_d = opts.afterAdd) !== null && _d !== void 0 ? _d : noop;
const didWaitFor = (_e = opts.didWaitFor) !== null && _e !== void 0 ? _e : noop;
const shouldTraverse = (_f = opts.shouldTraverse) !== null && _f !== void 0 ? _f : never;
// currentRegion should hold the only state that persists during traversal.
let currentRegion = createRegion();
const hasOverflowed = () => currentRegion.hasOverflowed();
const canSplitCurrent = () => canSplit(currentRegion.currentElement);
const ignoreCurrentOverflow = () => ignoreOverflow(currentRegion.currentElement);
const splitRules = (original, clone, nextChild, deepClone) => {
if (original.tagName === 'OL') {
preserveNumbering(original, clone, nextChild);
}
if (original.tagName === 'TR' && nextChild && deepClone) {
preserveTableColumns(original, clone, nextChild, deepClone);
}
applySplit(original, clone, nextChild, deepClone);
};
const continueInNextRegion = () => {
const prevRegion = currentRegion;
currentRegion = createRegion();
const newPath = clonePath(prevRegion.path, splitRules);
currentRegion.setPath(newPath);
return currentRegion;
};
const continuedParent = () => {
continueInNextRegion();
return currentRegion.currentElement;
};
const addText = async (textNode, isSplittable) => {
const el = currentRegion.currentElement;
let textLayout;
if (isSplittable) {
// Add the text word by word, adding pages as needed
textLayout = await fillWords(textNode, el, continuedParent, hasOverflowed);
if (!textLayout.completed && currentRegion.path.length > 1) {
tryInNextRegion(currentRegion, continueInNextRegion, canSplit);
textLayout = await fillWords(textNode, el, continuedParent, hasOverflowed);
}
}
else {
// Add the text as a block, trying a new page if needed
textLayout = await addInOneGo(textNode, currentRegion.currentElement, hasOverflowed);
if (!textLayout.completed && !ignoreCurrentOverflow()) {
tryInNextRegion(currentRegion, continueInNextRegion, canSplit);
textLayout = await addInOneGo(textNode, currentRegion.currentElement, hasOverflowed);
}
}
// Something went wrong. Insert the text anyways, ignoring overflow,
// and move onto the next region.
if (!textLayout.completed) {
currentRegion.currentElement.appendChild(textNode);
if (!ignoreCurrentOverflow() && canSplitCurrent()) {
currentRegion.suppressErrors = true;
continueInNextRegion();
}
}
};
const shouldTraverseChildren = (element) => {
if (hasOverflowed())
return true;
if (element.querySelector('img'))
return true;
if (shouldTraverse(element))
return true;
return false;
};
const addElement = async (element) => {
// Ensure images are loaded before testing for overflow
if (isUnloadedImage(element)) {
const waitTime = await ensureImageLoaded(element);
didWaitFor(waitTime);
}
// Transforms before adding
await beforeAdd(element, continueInNextRegion);
// Append element and push onto the the stack
currentRegion.currentElement.appendChild(element);
currentRegion.path.push(element);
if (shouldTraverseChildren(element)) {
// Only if the region overflowed, the content contains
// an image, or the caller has requested a custom traversal.
await clearAndAddChildren(element);
}
// We're done: Pop off the stack and do any cleanup
const addedElement = currentRegion.path.pop();
await afterAdd(addedElement, continueInNextRegion);
};
const clearAndAddChildren = async (element) => {
const childNodes = [...element.childNodes];
element.innerHTML = '';
if (hasOverflowed() && !ignoreCurrentOverflow() && canSplitCurrent()) {
// Overflows when empty
tryInNextRegion(currentRegion, continueInNextRegion, canSplit);
}
const shouldSplit = canSplit(element) && !ignoreOverflow(element);
for (const child of childNodes) {
if (isTextNode(child)) {
await addText(child, shouldSplit);
}
else if (isContentElement(child)) {
await addElement(child);
}
}
};
return addElement(content);
};
class HierarchyToHeadingAdapter {
constructor(getter) {
// console.warn('Deprecated');
this.getHierarchy = getter;
}
textFor(sel) {
var _a, _b;
return (_b = (_a = this.getHierarchy()) === null || _a === void 0 ? void 0 : _a.find(entry => (entry === null || entry === void 0 ? void 0 : entry.selector) === sel)) === null || _b === void 0 ? void 0 : _b.text;
}
get h1() {
return this.textFor('h1');
}
get h2() {
return this.textFor('h2');
}
get h3() {
return this.textFor('h3');
}
get h4() {
return this.textFor('h4');
}
get h5() {
return this.textFor('h5');
}
get h6() {
return this.textFor('h6');
}
}
class Page {
constructor() {
this.hierarchy = [];
this.suppress = false;
this.hasOutOfFlowContent = false;
this.alwaysLeft = false;
this.alwaysRight = false;
this.isOutOfFlow = false; // used by spreads
this.avoidReorder = false; // used by 2-page spreads
this.flow = new Region(div('flow-box'));
this.footer = div('footer');
this.background = div('page-background');
this.element = div('page', this.background, this.flow.element, this.footer);
this.heading = new HierarchyToHeadingAdapter(() => this.hierarchy);
}
static isSizeValid() {
const testPage = new Page();
return safeMeasure(testPage.element, () => testPage.flow.isReasonableSize);
}
setLeftRight(dir) {
this.side = dir;
this.element.classList.toggle(classes.leftPage, this.isLeft);
this.element.classList.toggle(classes.rightPage, !this.isLeft);
}
get isLeft() {
return this.side === 'left';
}
get isRight() {
return this.side === 'right';
}
// TODO(milahu) implement
/* non trivial
get isLast() {
return this.side === 'right';
}
*/
setPreference(dir) {
const preferLeft = dir === 'left';
this.alwaysLeft = preferLeft;
this.alwaysRight = !preferLeft;
}
get suppressErrors() {
var _a;
return (_a = this.suppress) !== null && _a !== void 0 ? _a : false;
}
set suppressErrors(newVal) {
this.suppress = newVal;
this.element.classList.toggle(classes.isOverflowing, newVal);
}
get isEmpty() {
return !this.hasOutOfFlowContent && this.flow.isEmpty();
}
validate() {
if (!this.hasOverflowed())
return;
const suspect = this.flow.currentElement;
if (suspect) {
console.warn('Bindery: Content overflows, probably due to a style set on:', suspect);
if (suspect.parentNode) {
suspect.parentNode.removeChild(suspect);
}
}
else {
console.warn('Bindery: Content overflows.');
}
}
validateEnd(allowOverflow) {
if (!this.hasOverflowed())
return;
console.warn(`Bindery: Page ~${this.number} is overflowing`, this.element);
if (!this.suppressErrors && !this.flow.suppressErrors && !allowOverflow) {
throw Error('Bindery: Moved to new page when last one is still overflowing');
}
}
hasOverflowed() {
return safeMeasure(this.element, () => this.flow.hasOverflowed());
}
}
const indexOfNextReorderablePage = (pages, startIndex) => {
for (let i = startIndex; i < pages.length; i += 1) {
const pg = pages[i];
if (!pg.isOutOfFlow && !pg.avoidReorder)
return i;
}
return null;
};
// Given an array of pages with alwaysLeft, alwaysRight, and isOutOfFlow
// properties, orders them so that alwaysLeft and alwaysRight are true.
const orderPages = (pages, makeNewPage) => {
const orderedPages = pages.slice();
for (let i = 0; i < orderedPages.length; i += 1) {
const page = orderedPages[i];
const isLeft = i % 2 !== 0;
if ((isLeft && page.alwaysRight) || (!isLeft && page.alwaysLeft)) {
if (page.isOutOfFlow) {
// If the page is 'out of flow', we'd prefer not to add a blank page.
// Instead it floats backwards in the book, pulling the next
// in-flow page forward. If several 'out of flow' pages
// are next to each other, they will remain in order, all being pushed
// backward together.
const indexToSwap = indexOfNextReorderablePage(orderedPages, i + 1);
if (!indexToSwap) {
// No larger index to swap with, perhaps because
// we are optimistically rendering before the book is done
break;
}
const pageToMoveUp = orderedPages[indexToSwap];
orderedPages.splice(indexToSwap, 1); // remove pg
orderedPages.splice(i, 0, pageToMoveUp); // insert pg
}
else {
// If the page is 'in flow', order must be respected, so extra blank pages
// are inserted.
orderedPages.splice(i, 0, makeNewPage());
}
}
}
return orderedPages;
};
const MAXIMUM_PAGE_LIMIT = 2000;
class Book {
constructor() {
this.rawPages = [];
this.orderedPages = [];
}
addPage(newPage) {
this.rawPages.push(newPage);
this.updatePageOrder();
}
get pageCount() {
return this.orderedPages.length;
}
get pages() {
return this.orderedPages;
}
updatePageOrder() {
this.orderedPages = orderPages(this.rawPages, () => new Page());
}
validate() {
if (this.pageCount > MAXIMUM_PAGE_LIMIT) {
throw Error('Bindery: Maximum page count exceeded. Suspected runaway layout.');
}
}
}
const annotatePagesNumbers = (pages, offset) => {
{
pages.forEach((page, i) => {
page.number = offset + i + 1;
page.setLeftRight(i % 2 === 0 ? 'right' : 'left');
});
}
};
const annotatePagesHierarchy = (pages, headerSelectorHierarchy) => {
// ———
// RUNNING HEADERS
// Sections to annotate with.
// This should be a hierarchical list of selectors.
// Every time one is selected, it annotates all following pages
// and clears any subselectors.
let currentHierarchy = [];
pages.forEach(page => {
const pageHierarchy = [];
headerSelectorHierarchy.forEach((selector, i) => {
var _a;
const element = page.element.querySelector(selector);
// A new header level starts on this page
if (element) {
currentHierarchy[i] = {
selector: selector,
text: (_a = element.textContent) !== null && _a !== void 0 ? _a : '',
el: element,
};
// Clear any lower headers in the hierarchy
currentHierarchy = currentHierarchy.slice(0, i + 1);
// headerSelectorHierarchy.forEach((lowerSelector, j) => {
// if (j > i) {
// currentHeaders[j] = { selector: lowerSelector, text: '', el: undefined };
// }
// });
}
// Always decorate this page with current header state.
if (currentHierarchy[i]) {
pageHierarchy[i] = currentHierarchy[i];
}
});
page.hierarchy = pageHierarchy;
});
};
const annotatePages = (pages, offset) => {
annotatePagesNumbers(pages, offset);
annotatePagesHierarchy(pages, ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
};
const pageNumbersForTest = (pages, test) => {
return pages
.filter(pg => !!pg.number)
.filter(pg => test(pg.element))
.map(pg => pg.number);
};
// Compatible with ids that start with numbers
const startsWithNumber = (sel) => {
return sel.length > 2 && sel[0] === '#' && /^\d+$/.test(sel[1]);
};
const safeIDSel = (sel) => {
return startsWithNumber(sel) ? `[id="${sel.replace('#', '')}"]` : sel;
};
class PageReference extends Replace {
constructor(options) {
super(options);
validateRuntimeOptions(options, {
name: 'PageReference',
selector: RuntimeTypes.string,
replace: RuntimeTypes.func,
createTest: RuntimeTypes.func,
});
this.references = [];
const throttle = throttleTime(10);
this.throttledUpdate = book => {
throttle(() => this.updatePageReferences(book.pages));
};
}
eachPage(page, book) {
this.throttledUpdate(book);
}
afterAdd(elmt, book) {
const test = this.createTest(elmt);
if (!test)
return elmt;
const ref = this.createReference(book, test, elmt);
return ref.element;
}
createReference(book, testFunction, elmt) {
const ref = {
testFunction,
template: elmt,
element: elmt,
previousMatches: undefined,
};
this.references.push(ref);
const currentResults = pageNumbersForTest(book.pages, testFunction);
this.render(ref, currentResults); // Replace element immediately, to make sure it'll fit
return ref;
}
render(ref, matchingPageNumbers) {
if (ref.previousMatches && shallowEqual(ref.previousMatches, matchingPageNumbers)) {
return;
}
if (!Array.isArray(matchingPageNumbers)) {
throw Error('Page search returned unexpected result');
}
const hasFoundPage = matchingPageNumbers.length > 0;
const pageRanges = hasFoundPage ? formatAsRanges(matchingPageNumbers) : '⌧';
const template = ref.template.cloneNode(true);
const newRender = this.replace(template, pageRanges);
if (!hasFoundPage)
newRender.classList.add(prefixer('placeholder-num'));
ref.element.parentNode.replaceChild(newRender, ref.element);
ref.element = newRender;
ref.previousMatches = matchingPageNumbers;
}
createTest(element) {
const href = element.getAttribute('href');
if (!href)
return null;
const selector = safeIDSel(href);
return (el) => {
return !!el.querySelector(selector);
};
}
updatePageReferences(pages) {
// querySelector first, then rerender
const results = this.references.map(ref => {
return { ref, matchingPageNumbers: pageNumbersForTest(pages, ref.testFunction) };
});
results.forEach(({ ref, matchingPageNumbers }) => this.render(ref, matchingPageNumbers));
}
replace(template, number) {
template.insertAdjacentHTML('beforeend', `, <span>${number}</span>`);
return template;
}
}
class PageBreak extends Rule {
constructor(options) {
var _a, _b;
super(options);
if (options.continue == 'same') {
throw Error("Can't continue on the same pager after a Page Break ");
}
this.continue = (_a = options.continue) !== null && _a !== void 0 ? _a : 'next';
this.position = (_b = options.position) !== null && _b !== void 0 ? _b : 'before';
validateRuntimeOptions(options, {
name: 'PageBreak',
selector: RuntimeTypes.string,
continue: RuntimeTypes.enum('next', 'left', 'right'),
position: RuntimeTypes.enum('before', 'after', 'both', 'avoid'),
});
}
get avoidSplit() {
return this.position === 'avoid';
}
beforeAdd(elmt, book, continueOnNewPage) {
if (this.position === 'before' || this.position === 'both') {
if (!book.currentPage.isEmpty) {
continueOnNewPage();
}
if (this.continue !== 'next') {
book.currentPage.setPreference(this.continue);
}
}
return elmt;
}
afterAdd(elmt, book, continueOnNewPage) {
if (this.position === 'after' || this.position === 'both') {
continueOnNewPage();
if (this.continue !== 'next') {
book.currentPage.setPreference(this.continue);
}
}
return elmt;
}
}
// TODO selectorHierarchy: [ String ], ie [ 'h1', 'h2', 'h3.chapter' ]
class RunningHeader extends Rule {
constructor(options = {}) {
super(options);
validateRuntimeOptions(options, {
name: 'RunningHeader',
render: RuntimeTypes.func,
});
}
eachPage(page) {
if (!page.runningHeader) {
const elmt = div('.running-header');
page.element.appendChild(elmt);
page.runningHeader = elmt;
}
page.runningHeader.innerHTML = this.render(page);
}
render(page) {
return `${page.number}`;
}
}
class Split extends Rule {
constructor(options) {
super(options);
this.toNext = options.toNext;
this.fromPrevious = options.fromPrevious;
validateRuntimeOptions(options, {
name: 'Split',
selector: RuntimeTypes.string,
toNext: RuntimeTypes.string,
fromPrevious: RuntimeTypes.string,
didSplit: RuntimeTypes.func,
});
}
didSplit(original, clone) {
if (this.toNext)
original.classList.add(this.toNext);
if (this.fromPrevious)
clone.classList.add(this.fromPrevious);
}
}
var rules = {
Rule,
Split(options) {
return new Split(options);
},
Counter(options) {
return new Counter(options);
},
FullBleedPage(options) {
return new FullBleedPage(options);
},
Footnote(options) {
return new Footnote(options);
},
RunningHeader(options) {
return new RunningHeader(options);
},
Replace(options) {
return new Replace(options);
},
FullBleedSpread(options) {
return new FullBleedSpread(options);
},
PageBreak(options) {
return new PageBreak(options);
},
PageReference(options) {
return new PageReference(options);
},
createRule(options) {
return new Rule(options);
},
};
const { PageBreak: PageBreak$1, PageReference: PageReference$1, Footnote: Footnote$1, FullBleedPage: FullBleedPage$1, FullBleedSpread: FullBleedSpread$1, } = rules;
const replacer = (element, number) => {
element.textContent = `${number}`;
return element;
};
var attributeRules = [
PageBreak$1({ selector: '[book-page-break="both"]', position: 'both' }),
PageBreak$1({ selector: '[book-page-break="avoid"]', position: 'avoid' }),
PageBreak$1({
selector: '[book-page-break="after"][book-page-continue="right"]',
position: 'after',
continue: 'right',
}),
PageBreak$1({
selector: '[book-page-break="after"][book-page-continue="left"]',
position: 'after',
continue: 'left',
}),
PageBreak$1({
selector: '[book-page-break="after"][book-page-continue="next"]',
position: 'after',
continue: 'next',
}),
PageBreak$1({
selector: '[book-page-break="before"][book-page-continue="right"]',
position: 'before',
continue: 'right',
}),
PageBreak$1({
selector: '[book-page-break="before"][book-page-continue="left"]',
position: 'before',
continue: 'left',
}),
PageBreak$1({
selector: '[book-page-break="before"][book-page-continue="next"]',
position: 'before',
continue: 'next',
}),
FullBleedPage$1({ selector: '[book-full-bleed="page"]' }),
FullBleedSpread$1({ selector: '[book-full-bleed="spread"]' }),
Footnote$1({
selector: '[book-footnote-text]',
render: (element, number) => {
const txt = element.getAttribute('book-footnote-text');
return `<i>${number}</i>${txt}`;
},
}),
PageReference$1({
selector: '[book-pages-with-text]',
replace: replacer,
createTest: (element) => {
var _a;
const text = (_a = element.getAttribute('book-pages-with-text')) !== null && _a !== void 0 ? _a : '';
const term = text.toLowerCase().trim();
return (pageElement) => {
const pageText = pageElement.textContent || '';
return pageText.toLowerCase().includes(term);
};
},
}),
PageReference$1({
selector: '[book-pages-with-selector]',
replace: replacer,
createTest: (element) => {
var _a;
const txt = (_a = element.getAttribute('book-pages-with-selector')) !== null && _a !== void 0 ? _a : '';
const selector = txt.trim();
return (pageElement) => {
return !!pageElement.querySelector(selector);
};
},
}),
PageReference$1({
selector: '[book-pages-with]',
replace: replacer,
createTest: (element) => {
var _a;
const text = (_a = element.textContent) !== null && _a !== void 0 ? _a : '';
const term = text.toLowerCase().trim();
return (pageElement) => {
var _a;
const pageText = (_a = pageElement.textContent) !== null && _a !== void 0 ? _a : '';
return pageText.toLowerCase().includes(term);
};
},
}),
];
const isSpread = (rule) => rule instanceof FullBleedSpread;
const isPage = (rule) => rule instanceof FullBleedPage;
const isBreak = (rule) => rule instanceof PageBreak;
const isFullPageRule = (rule) => isSpread(rule) || isPage(rule) || isBreak(rule);
const dedupe = (inputRules) => {
const conflictRules = inputRules.filter(isFullPageRule);
const output = inputRules.filter(rule => !conflictRules.includes(rule));
const firstSpreadRule = conflictRules.find(isSpread);
const firstPageRule = conflictRules.find(isPage);
// Only apply one fullpage or fullspread
if (firstSpreadRule)
output.push(firstSpreadRule);
else if (firstPageRule)
output.push(firstPageRule);
else
output.push(...conflictRules); // but multiple pagebreaks are ok
return output;
};
// TODO:
// While this does catch overflows, it is pretty hacky to move the entire node to the next page.
// - 1. there is no guarentee it will fit on the new page
// - 2. if it had childNodes, those side effects will not be undone,
// which means footnotes will get left on previous page.
// - 3. if it is a large paragraph, it will leave a large gap. the
// ideal approach would be to only need to invalidate the last line of text.
const recoverFromRule = (el, book, nextRegion) => {
let removed = el;
const parent = el.parentNode;
if (!parent) {
throw Error("Can't recoverFromRule when element is unparented");
}
parent.removeChild(removed);
let popped;
if (book.currentPage.hasOverflowed()) {
parent.appendChild(el);
removed = parent;
if (!removed.parentNode) {
throw Error("Can't recoverFromRule when element is unparented");
}
removed.parentNode.removeChild(removed);
popped = book.currentPage.flow.path.pop();
if (book.currentPage.hasOverflowed()) {
console.error('Trying again didnt fix it');
}
}
const newRegion = nextRegion();
newRegion.currentElement.appendChild(removed);
if (popped)
newRegion.path.push(popped);
};
const giveUp = (rule, el) => {
console.warn(`Couldn't apply ${rule.name}, caused overflows twice when adding: `, el);
};
function isPageRule(rule) {
return rule.eachPage;
}
function isBeforeAddRule(rule) {
return !!rule.selector && rule.beforeAdd;
}
function isAfterAddRule(rule) {
return !!rule.selector && rule.afterAdd;
}
function isOffsetRule(rule) {
return rule.pageNumberOffset;
}
function isDidSplitRule(rule) {
return !!rule.selector && rule.didSplit;
}
function isAvoidSplitRule(rule) {
return !!rule.selector && rule.avoidSplit;
}
class RuleSet {
constructor(rules) {
var _a;
const offsetRule = rules.find(isOffsetRule);
this.pageNumberOffset = (_a = offsetRule === null || offsetRule === void 0 ? void 0 : offsetRule.pageNumberOffset) !== null && _a !== void 0 ? _a : 0;
// Rules for pages
this.pageRules = rules.filter(isPageRule);
// Rules for elements
this.beforeAddRules = rules.filter(isBeforeAddRule);
this.afterAddRules = rules.filter(isAfterAddRule);
// Rules for layout
this.selectorsNotToSplit = rules
.filter(isAvoidSplitRule)
.map(r => r.selector);
this.didSplitRules = rules.filter(isDidSplitRule);
// setup
rules.filter(r => r.setup).forEach(r => r.setup());
this.applySplitRules = this.applySplitRules.bind(this);
const allSelectors = rules
.map(r => r.selector)
.filter(sel => !!sel)
.join(', ');
if (allSelectors) {
const shouldTraverse = (el) => !!el.querySelector(allSelectors);
this.shouldTraverse = shouldTraverse.bind(this);
}
else {
this.shouldTraverse = () => false;
}
}
applySplitRules(original, clone) {
original.classList.add(classes.toNext);
clone.classList.add(classes.fromPrev);
this.didSplitRules
.filter(r => original.matches(r.selector))
.forEach(rule => {
rule.didSplit(original, clone);
});
}
// Rules for pages
applyPageDoneRules(pg, book) {
this.pageRules.forEach(rule => rule.eachPage(pg, book));
}
finishEveryPage(book) {
this.pageRules.forEach(rule => book.pages.forEach(pg => rule.eachPage(pg, book)));
}
// Rules for elements
applyBeforeAddRules(element, book, continueOnNewPage, makeNewPage) {
let addedElement = element;
const matchingRules = this.beforeAddRules.filter(rule => addedElement.matches(rule.selector));
matchingRules.forEach(rule => {
addedElement = rule.beforeAdd(addedElement, book, continueOnNewPage, makeNewPage);
});
return addedElement;
}
applyAfterAddRules(originalElement, book, continueOnNewPage, makeNewPage) {
let addedElement = originalElement;
const attemptRecovery = (el) => recoverFromRule(el, book, continueOnNewPage);
const matchingRules = this.afterAddRules.filter(rule => addedElement.matches(rule.selector));
const uniqueRules = dedupe(matchingRules);
uniqueRules.forEach(rule => {
const retry = (el) => {
attemptRecovery(el);
return rule.afterAdd(el, book, continueOnNewPage, makeNewPage, () => giveUp(rule, el));
};
addedElement = rule.afterAdd(addedElement, book, continueOnNewPage, makeNewPage, retry);
});
return addedElement;
}
}
const sec = (ms) => (ms / 1000).toFixed(2);
const estimateFor = (content) => {
const start = window.performance.now();
const capacity = content.querySelectorAll('*').length;
let timeWaiting = 0;
let completed = 0;
return {
increment: () => {
completed += 1;
},
addWaitTime: (t) => {
timeWaiting += t;
},
get progress() {
return completed / capacity;
},
end: () => {
const end = window.performance.now();
const total = end - start;
const layout = total - timeWaiting;
console.log(`bindery Layout ready in ${sec(layout)}s (plus ${sec(timeWaiting)}s waiting for images)`);
},
};
};
const makeBook = async (content, rules, updateProgress) => {
if (!Page.isSizeValid())
throw Error('Page is too small');
const estimator = estimateFor(content);
const ruleSet = new RuleSet(rules);
const book = new Book();
const pageNumberOffset = ruleSet.pageNumberOffset;
const makeNewPage = () => new Page();
const finishPage = (page, allowOverflow) => {
// finished with this page, can display
book.updatePageOrder();
annotatePages(book.pages, pageNumberOffset);
ruleSet.applyPageDoneRules(page, book);
page.validateEnd(allowOverflow);
book.validate();
};
const addPageToBook = (allowOverflow = false) => {
const oldPage = book.currentPage;
if (oldPage)
finishPage(oldPage, allowOverflow);
const newPage = makeNewPage();
book.currentPage = newPage;
book.addPage(newPage);
updateProgress(book, estimator.progress);
newPage.validate();
return newPage;
};
const makeNextRegion = () => {
const newPage = addPageToBook();
return newPage.flow;
};
const applySplit = ruleSet.applySplitRules;
const dontSplitSel = ruleSet.selectorsNotToSplit;
const canSplit = (element) => {
if (dontSplitSel.some(sel => element.matches(sel))) {
return false;
}
if (element.parentElement)
return canSplit(element.parentElement);
return true;
};
const beforeAdd = async (elementToAdd, continueInNextRegion) => {
ruleSet.applyBeforeAddRules(elementToAdd, book, continueInNextRegion, makeNewPage);
};
const afterAdd = async (addedElement, continueInNextRegion) => {
estimator.increment();
return ruleSet.applyAfterAddRules(addedElement, book, continueInNextRegion, makeNewPage);
};
// init
content.style.margin = '0';
content.style.padding = '0';
await flowIntoRegions({
content,
createRegion: makeNextRegion,
applySplit,
canSplit,
beforeAdd,
afterAdd,
shouldTraverse: ruleSet.shouldTraverse,
didWaitFor: t => estimator.addWaitTime(t),
});
book.updatePageOrder();
annotatePages(book.pages, pageNumberOffset);
ruleSet.finishEveryPage(book);
estimator.end();
return book;
};
const fetchContent = async (url, selector) => {
const response = await fetch(url);
if (response.status !== 200) {
throw Error(`Response ${response.status}: Could not load file at "${url}"`);
}
const fetchedContent = await response.text();
const el = parseHTML(fetchedContent, selector);
if (!(el instanceof HTMLElement)) {
throw Error(`Could not find element that matches selector "${selector}" in response from ${url}`);
}
return el;
};
const getContentAsElement = async (content) => {
if (content instanceof HTMLElement)
return content;
if (typeof content === 'string') {
const el = document.querySelector(content);
if (!(el instanceof HTMLElement)) {
throw Error(`Could not find element that matches selector "${content}"`);
}
return el;
}
if (typeof content === 'object' && content.url) {
return fetchContent(content.url, content.selector);
}
throw Error('Content source must be an element or selector');
};
// TODO: This is not a particularly robust check.
const supportsCustomSheetSize = () => !!window.hasOwnProperty('chrome');
const getSheetSizeLabels = (pageSize) => {
const sizeName = `${pageSize.width} × ${pageSize.height}`;
if (!supportsCustomSheetSize()) {
return [
[SheetSize.LETTER_PORTRAIT, 'Default Page Size *'],
[
SheetSize.LETTER_PORTRAIT,
"Only Chrome supports custom page sizes. Set in your browser's print dialog instead.",
],
];
}
return [
[SheetSize.AUTO, `${sizeName}`],
[SheetSize.AUTO_BLEED, `${sizeName} + Bleed`],
[SheetSize.AUTO_MARKS, `${sizeName} + Marks`],
[SheetSize.LETTER_PORTRAIT, 'Letter Portrait'],
[SheetSize.LETTER_LANDSCAPE, 'Letter Landscape'],
[SheetSize.A4_PORTRAIT, 'A4 Portrait'],
[SheetSize.A4_LANDSCAPE, 'A4 Landscape'],
[SheetSize.A5_PORTRAIT, 'A5 Portrait'],
[SheetSize.A5_LANDSCAPE, 'A5 Landscape'],
];
};
const marksLabels = [
[SheetMarks.NONE, 'No Marks'],
[SheetMarks.CROP, 'Crop Marks'],
[SheetMarks.BLEED, 'Bleed Marks'],
[SheetMarks.BOTH, 'Crop and Bleed'],
];
const modeLabels = [
[ViewerMode.LINEAR, 'Linear'],
[ViewerMode.PREVIEW, 'Grid'],
[ViewerMode.FLIPBOOK, 'Flipbook'],
[ViewerMode.PRINT, 'Print Preview'],
];
const layoutLabels = [
[SheetLayout.PAGES, '1 Page / Sheet'],
[SheetLayout.SPREADS, '1 Spread / Sheet'],
[SheetLayout.BOOKLET, 'Booklet Sheets'],
];
const row = (cls, ...children) => {
return div(`${cls}.row`, ...children);
};
// Button
const btn = (cls, attrs, label) => {
return button(`.control.btn${cls}`, attrs, label);
};
const dropdown = (attrs, options) => {
const selectVal = div('.select-val', 'Value');
const selectEl = select('.select', attrs, ...options);
selectVal.textContent = selectEl.options[selectEl.selectedIndex].text;
return div('.select-wrap.control', selectVal, selectEl);
};
const enumDropdown = (id, entries, initialValue, changeHandler) => {
const eventHandler = (e) => {
const rawVal = e.target.value;
const chosenEntry = entries.filter(entry => entry[0].toString() === rawVal)[0];
if (chosenEntry) {
changeHandler(chosenEntry[0]);
}
else {
throw Error('Selected unknown value');
}
};
return dropdown({ onchange: eventHandler, id }, entries.map(entry => {
const el = option({ value: entry[0] }, entry[1]);
if (entry[0] === initialValue) {
el.selected = true;
}
return el;
}));
};
const renderPrintOptions = (state, actions) => {
const shouldShowMarks = state.paper !== SheetSize.AUTO && state.paper !== SheetSize.AUTO_BLEED;
const sizeLabels = getSheetSizeLabels(state.pageSize);
return (
row(
'.print-options',
row(null, enumDropdown('bindery-choose-layout', layoutLabels, state.layout, actions.setLayout)),
row(null, enumDropdown('bindery-choose-paper', sizeLabels, state.paper, actions.setPaper)),
shouldShowMarks
? row(null, enumDropdown('bindery-choose-marks', marksLabels, state.marks, actions.setMarks))
: ''
)
);
};
function binderyExtraButtons(state, actions) {
return [
//h('a', '.btn-print.btn-main', { href: 'https://github.com/milahu/alchi' }, 'Github'),
h('a', '.btn.control', { href: 'https://github.com/milahu/alchi' }, 'Github'),
];
}
class Controls {
constructor() {
this.element = div('.controls');
}
update(state, actions) {
var _a, _b;
const oldElement = this.element;
const newElement = this.render(state, actions);
const focusedId = document.hasFocus() ? (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.id : undefined;
oldElement.replaceWith(newElement);
if (focusedId)
(_b = document.getElementById(focusedId)) === null || _b === void 0 ? void 0 : _b.focus();
this.element = newElement;
}
render(state, actions) {
const print = () => {
actions.setMode(ViewerMode.PRINT);
setTimeout(window.print, 10);
};
const shouldShowPrint = state.mode === ViewerMode.PRINT;
return (
div(
'.controls',
row('.view-row', enumDropdown('bindery-choose-view', modeLabels, state.mode, actions.setMode)),
shouldShowPrint ? renderPrintOptions(state, actions) : '',
...((binderyExtraButtons && binderyExtraButtons(state, actions)) || []),
//btn('.btn-print.btn-main', { onclick: print }, 'Print')
btn('.btn', { onclick: print }, 'Print')
)
);
}
}
const padPages = (pages, makePage) => {
if (pages.length % 2 !== 0) {
const pg = makePage();
pages.push(pg);
}
const spacerPage = makePage();
const spacerPage2 = makePage();
spacerPage.element.style.visibility = 'hidden';
spacerPage2.element.style.visibility = 'hidden';
pages.unshift(spacerPage);
pages.push(spacerPage2);
return pages;
};
const twoPageSpread = (...children) => {
return div('.spread-wrapper.spread-centered.spread-size', ...children);
};
const onePageSpread = (...children) => {
return div('.spread-wrapper.spread-centered.page-size', ...children);
};
function renderLinearViewer(bookPages) {
const pages = bookPages;
const linearLayout = document.createDocumentFragment();
pages.forEach(pg => {
const wrap = onePageSpread(pg.element);
linearLayout.appendChild(wrap);
});
return {
element: linearLayout,
};
}
const renderGridViewer = (bookPages, isTwoUp) => {
const pages = isTwoUp ? padPages(bookPages, () => new Page()) : bookPages;
const gridLayout = document.createDocumentFragment();
if (isTwoUp) {
for (let i = 0; i < pages.length; i += 2) {
const wrap = twoPageSpread(pages[i].element, pages[i + 1].element);
gridLayout.appendChild(wrap);
}
}
else {
pages.forEach(pg => {
const wrap = onePageSpread(pg.element);
gridLayout.appendChild(wrap);
});
}
return {
element: gridLayout,
};
};
const directions = ['top', 'bottom', 'left', 'right'];
const bleedMarks = () => directions.map(dir => div(`.mark-bleed-${dir}`));
const cropMarks = () => directions.map(dir => div(`.mark-crop-${dir}`));
const pageSheetMarks = () => div('.page-size.print-mark-wrap', ...cropMarks(), ...bleedMarks());
const spreadSheetMarks = () => div('.spread-size.print-mark-wrap', div('.mark-crop-fold'), ...cropMarks(), ...bleedMarks());
const bookletMeta = (i, len) => {
const isFront = i % 4 === 0;
const sheetIndex = Math.round((i + 1) / 4) + 1;
return div('.print-meta', `Sheet ${sheetIndex} of ${len / 4}: ${isFront ? 'Outside' : 'Inside'}`);
};
const orderPagesBooklet = (pages, makePage) => {
while (pages.length % 4 !== 0) {
const spacerPage = makePage();
spacerPage.element.style.visibility = 'hidden';
pages.push(spacerPage);
}
const bookletOrder = [];
const len = pages.length;
for (let i = 0; i < len / 2; i += 2) {
bookletOrder.push(pages[len - 1 - i]);
bookletOrder.push(pages[i]);
bookletOrder.push(pages[i + 1]);
bookletOrder.push(pages[len - 2 - i]);
}
return bookletOrder;
};
const twoPageSpread$1 = (...children) => {
return div('.spread-wrapper', ...children);
};
const onePageSpread$1 = (...children) => {
return div('.spread-wrapper', ...children);
};
const renderSheetViewer = (bookPages, _doubleSided, layout) => {
const isTwoUp = layout !== SheetLayout.PAGES;
const isSpreads = layout === SheetLayout.SPREADS;
const isBooklet = layout === SheetLayout.BOOKLET;
let pages = bookPages;
if (isSpreads)
pages = padPages(pages, () => new Page());
else if (isBooklet)
pages = orderPagesBooklet(pages, () => new Page());
const printLayout = document.createDocumentFragment();
const marks = isTwoUp ? spreadSheetMarks : pageSheetMarks;
const spread = isTwoUp ? twoPageSpread$1 : onePageSpread$1;
const printSheet = (...children) => {
return div('.print-sheet', spread(...children));
};
if (isTwoUp) {
for (let i = 0; i < pages.length; i += 2) {
const spreadMarks = marks();
if (isBooklet) {
const meta = bookletMeta(i, pages.length);
spreadMarks.appendChild(meta);
}
const sheet = printSheet(div('.page-bleed-clip.page-bleed-clip-left', pages[i]), div('.page-bleed-clip.page-bleed-clip-right', pages[i + 1]), spreadMarks);
sheet.classList.add(classes.sheetSpread);
printLayout.appendChild(sheet);
}
}
else {
pages.forEach(p => {
const pg = p;
const sheet = printSheet(pg.element, marks());
sheet.classList.add(pg.isLeft ? classes.sheetLeft : classes.sheetRight);
printLayout.appendChild(sheet);
});
}
return {
element: printLayout,
};
};
const renderFlipbookViewer = (bookPages, doubleSided) => {
const pages = padPages(bookPages, () => new Page());
const flipLayout = document.createDocumentFragment();
const sizer = div('.flipbook-sizer');
const flapHolder = div('.spread-size.flap-holder');
sizer.append(flapHolder);
flipLayout.append(sizer);
const flaps = [];
let currentLeaf = -1;
let leftOffset = 4;
if (pages.length * leftOffset > 60) {
leftOffset = 60 / pages.length;
}
flapHolder.style.width = `${pages.length * leftOffset}px`;
const setLeaf = (unclamped) => {
let n = unclamped;
if (n === currentLeaf)
n += 1;
const newLeaf = Math.min(Math.max(0, n), flaps.length);
let zScale = 4;
if (flaps.length * zScale > 200)
zScale = 200 / flaps.length;
flaps.forEach((flap, i, arr) => {
// + 0.5 so left and right are even
const z = (arr.length - Math.abs(i - newLeaf + 0.5)) * zScale;
flap.style.transform = `translate3d(${i < newLeaf ? 4 : 0}px,0,${z}px) rotateY(${i < newLeaf ? -180 : 0}deg)`;
});
currentLeaf = newLeaf;
};
let leafIndex = 0;
for (let i = 1; i < pages.length - 1; i += doubleSided ? 2 : 1) {
leafIndex += 1;
const li = leafIndex;
const flap = div('.page3d');
flap.addEventListener('click', () => {
const newLeaf = li - 1;
setLeaf(newLeaf);
});
const rightPage = pages[i].element;
let leftPage;
rightPage.classList.add(prefixer('page3d-front'));
flap.append(rightPage);
if (doubleSided) {
flap.classList.add(prefixer('doubleSided'));
leftPage = pages[i + 1].element;
}
else {
leftPage = div('.page');
}
leftPage.classList.add(prefixer('page3d-back'));
flap.append(leftPage);
// TODO: Virtualize stack of pages.
// Putting 1000s of elements onscreen,
// espacially as 3d layers, locks up the browser.
flap.style.left = `${i * leftOffset}px`;
flaps.push(flap);
flapHolder.append(flap);
}
setLeaf(0);
return {
element: flipLayout,
contentSizer: sizer,
next: () => setLeaf(currentLeaf + 1),
previous: () => setLeaf(currentLeaf - 1),
};
};
const getScrollAsPercent = () => {
if (!document || !document.scrollingElement)
return 0;
const el = document.scrollingElement;
return el.scrollTop / el.scrollHeight;
};
const scrollToPercent = (newVal) => {
if (!document.scrollingElement)
return;
const el = document.scrollingElement;
el.scrollTop = el.scrollHeight * newVal;
};
const scrollToBottom = () => {
const scroll = document.scrollingElement;
if (!scroll)
return;
const scrollMax = scroll.scrollHeight - scroll.offsetHeight;
scroll.scrollTop = scrollMax;
};
/* global BINDERY_VERSION */
var errorView = (title, text) => {
return div('.error', div('.error-title', title), div('.error-text', text), div('.error-footer', `Bindery ${BINDERY_VERSION}`));
};
const isCommandP = (e) => {
return (e.ctrlKey || e.metaKey) && e.keyCode === 80;
};
// Automatically switch into print mode
const listenForPrint = (beforePrint) => {
if (window.matchMedia) {
const mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(mql => {
if (mql.matches) {
// before print
beforePrint();
}
});
}
document.body.addEventListener('keydown', e => {
if (isCommandP(e)) {
e.preventDefault();
beforePrint();
setTimeout(() => window.print(), 200);
}
});
};
const throttleProgressBar = throttleFrame();
const throttleRender = throttleTime(100);
const throttleResize = throttleTime(50);
const pageSpread = (...pgs) => {
return div('.spread-wrapper.spread-centered.spread-size', ...pgs);
};
class Viewer {
constructor({ pageSetup, mode, layout, marks }) {
this.hasRendered = false;
this.pageSetup = pageSetup;
this.controls = new Controls();
this.updateControls();
this.progressBar = div('.progress-bar');
this.content = div('.zoom-content');
this.scaler = div('.zoom-scaler', this.content);
this.element = div('.root', this.progressBar, this.controls.element, this.scaler);
this.isDoubleSided = true;
this.sheetLayout = layout;
this.marks = marks;
this.mode = mode;
this.element.classList.add(classes.viewPreview);
this.currentLeaf = 0;
listenForPrint(() => {
this.mode = ViewerMode.PRINT;
this.render();
});
document.body.addEventListener('keydown', (e) => {
var _a, _b;
switch (e.key) {
case 'ArrowLeft':
const prev = (_a = this.currentResult) === null || _a === void 0 ? void 0 : _a.previous;
if (prev)
prev();
break;
case 'ArrowRight':
const next = (_b = this.currentResult) === null || _b === void 0 ? void 0 : _b.next;
if (next)
next();
break;
}
});
window.addEventListener('resize', () => {
throttleResize(() => this.scaleToFit());
});
this.setInProgress(true);
this.setMarks(marks);
this.show();
}
updateControls() {
this.controls.update({
// Initial props
paper: this.pageSetup.paper,
layout: this.sheetLayout,
mode: this.mode,
marks: this.marks,
pageSize: this.pageSetup.displaySize,
}, {
// Actions
setMode: this.setMode.bind(this),
setPaper: this.setSheetSize.bind(this),
setLayout: this.setLayout.bind(this), // actions.setLayout
setMarks: this.setMarks.bind(this),
});
}
setMode(newMode) {
if (newMode === this.mode)
return;
this.mode = newMode;
this.updateControls();
this.render();
}
get isInProgress() {
return this.element.classList.contains(classes.inProgress);
}
setInProgress(newVal) {
this.element.classList.toggle(classes.inProgress, newVal);
}
get isTwoUp() {
return this.sheetLayout !== SheetLayout.PAGES;
}
setShowingCropMarks(newVal) {
this.element.classList.toggle(classes.showCrop, newVal);
}
setShowingBleedMarks(newVal) {
this.element.classList.toggle(classes.showBleedMarks, newVal);
}
setShowingBleed(newVal) {
this.element.classList.toggle(classes.showBleed, newVal);
}
get isViewing() {
return window.document.body.classList.contains(classes.isViewing);
}
set isViewing(newVal) {
window.document.body.classList.toggle(classes.isViewing, newVal);
}
setSheetSize(newVal) {
this.pageSetup.paper = newVal;
this.pageSetup.updateStyleVars();
this.mode = ViewerMode.PRINT;
this.render();
this.scaleToFit();
setTimeout(() => {
this.scaleToFit();
}, 300);
}
setLayout(newVal) { // actions.setLayout
if (newVal === this.sheetLayout)
return;
this.sheetLayout = newVal;
// milahu was here
// copy-paste from setSheetSize(newVal)
var sheetSizeChanged = false;
if (newVal == SheetLayout.PAGES && this.pageSetup.paper != SheetSize.A5_PORTRAIT) {
this.pageSetup.paper = SheetSize.A5_PORTRAIT;
sheetSizeChanged = true;
}
else if ((newVal == SheetLayout.SPREADS || newVal == SheetLayout.BOOKLET) && this.pageSetup.paper != SheetSize.A4_LANDSCAPE) {
this.pageSetup.paper = SheetSize.A4_LANDSCAPE;
sheetSizeChanged = true;
}
this.pageSetup.printTwoUp = this.isTwoUp;
this.pageSetup.updateStyleVars();
this.mode = ViewerMode.PRINT;
this.render();
// milahu was here
// copy-paste from setSheetSize(newVal)
if (sheetSizeChanged) {
this.scaleToFit();
setTimeout(() => {
this.scaleToFit();
}, 300);
}
}
setMarks(newVal) {
this.marks = newVal;
this.updateControls();
this.setShowingCropMarks(newVal === SheetMarks.CROP || newVal === SheetMarks.BOTH);
this.setShowingBleedMarks(newVal === SheetMarks.BLEED || newVal === SheetMarks.BOTH);
}
displayError(title, text) {
this.show();
if (!this.error) {
this.error = errorView(title, text);
this.element.append(this.error);
scrollToBottom();
if (this.book) {
const flow = this.book.currentPage.flow;
if (flow)
flow.currentElement.style.outline = '3px solid red';
}
}
}
clear() {
this.book = undefined;
this.lastSpreadInProgress = undefined; // TODO: Make this clearer, after first render
this.content.innerHTML = '';
}
show() {
if (this.element.parentNode)
return;
window.document.body.appendChild(this.element);
this.isViewing = true;
}
hide() {
var _a;
// TODO this doesn't work if the target is an existing node
(_a = this.element.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
this.isViewing = false;
}
render(newBook) {
if (newBook)
this.book = newBook;
if (!this.book)
return;
this.show();
this.updateControls();
this.element.classList.remove(...allModeClasses);
this.element.classList.add(classForMode(this.mode));
this.setShowingBleed(this.mode === ViewerMode.PRINT);
const prevScroll = getScrollAsPercent();
this.setProgressAmount(1);
window.requestAnimationFrame(() => {
const result = this.renderViewMode();
this.currentResult = result;
this.content.innerHTML = '';
this.content.append(result.element);
if (!this.hasRendered)
this.hasRendered = true;
else
scrollToPercent(prevScroll);
this.scaleToFit();
});
}
renderViewMode() {
if (!this.book)
throw Error('Book missing');
const pages = this.book.pages.slice();
switch (this.mode) {
case ViewerMode.PREVIEW:
return renderGridViewer(pages, this.isDoubleSided);
case ViewerMode.FLIPBOOK:
return renderFlipbookViewer(pages, this.isDoubleSided);
case ViewerMode.PRINT:
return renderSheetViewer(pages, this.isDoubleSided, this.sheetLayout);
case ViewerMode.LINEAR:
return renderLinearViewer(pages);
default:
throw Error(`Invalid layout mode: ${this.mode} (type ${typeof this.mode})`);
}
}
setProgressAmount(newVal) {
if (newVal < 1) {
throttleProgressBar(() => {
this.progressBar.style.transform = `scaleX(${newVal})`;
});
}
else {
this.progressBar.style.transform = '';
}
}
updateProgress(book, estimatedProgress) {
this.book = book;
this.setProgressAmount(estimatedProgress);
if (!window.document.scrollingElement)
return;
const scroller = window.document.scrollingElement;
// don't bother rerendering if preview is out of view
const scrollTop = scroller.scrollTop;
const scrollH = scroller.scrollHeight;
const h = scroller.offsetHeight;
if (scrollH > h * 3 && scrollTop < h)
return;
// don't rerender too often
throttleRender(() => this.renderProgress(book, estimatedProgress));
}
renderProgress(book, estimatedProgress) {
const needsZoomUpdate = !this.content.firstElementChild;
const sideBySide = this.mode === ViewerMode.PREVIEW ||
(this.mode === ViewerMode.PRINT &&
this.sheetLayout !== SheetLayout.PAGES);
const limit = sideBySide ? 2 : 1;
book.pages.forEach((page, i) => {
if (this.content.contains(page.element) &&
page.element.parentNode !== this.content)
return;
if (this.lastSpreadInProgress &&
this.lastSpreadInProgress.children.length < limit) {
this.lastSpreadInProgress.append(page.element);
return;
}
this.lastSpreadInProgress = pageSpread(page.element);
if (i === 0 && sideBySide) {
const spacer = new Page();
spacer.element.style.visibility = 'hidden';
this.lastSpreadInProgress.insertBefore(spacer.element, this.lastSpreadInProgress.firstElementChild);
}
this.content.append(this.lastSpreadInProgress);
});
if (needsZoomUpdate)
this.scaleToFit();
}
scaleToFit() {
if (!this.content.firstElementChild)
return;
const prevScroll = getScrollAsPercent();
const { xScale, yScale } = this.scaleThatFits();
const scale = this.mode === ViewerMode.FLIPBOOK
? Math.min(1, xScale, yScale)
: Math.min(1, xScale);
this.scaler.style.transform = `scale(${scale})`;
scrollToPercent(prevScroll);
}
scaleThatFits() {
var _a, _b;
const contentEl = (_b = (_a = this.currentResult) === null || _a === void 0 ? void 0 : _a.contentSizer) !== null && _b !== void 0 ? _b : this.content;
const availableSize = {
width: window.innerWidth,
height: window.innerHeight - 40,
};
// Note use of offsetWidth rather than getBoundingClientRect
// so we can calculate using untransformed/unscaled dimensions
const contentSize = {
width: contentEl.offsetWidth,
height: contentEl.offsetHeight,
};
const xScale = availableSize.width / contentSize.width;
const yScale = availableSize.height / contentSize.height;
return { xScale, yScale };
}
}
/* global BINDERY_VERSION */
const vals = (obj) => {
return Object.keys(obj).map(k => obj[k]);
};
const nextFrame = () => new Promise(resolve => {
requestAnimationFrame(t => resolve(t));
});
class Bindery {
constructor(opts) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
console.log(`bindery Bindery ${BINDERY_VERSION}`);
validateRuntimeOptions(opts, {
name: 'makeBook',
autorun: RuntimeTypes.bool,
content: RuntimeTypes.any,
view: RuntimeTypes.enum(...vals(ViewerMode)),
pageNumberOffset: RuntimeTypes.number,
pageSetup: RuntimeTypes.shape({
name: 'pageSetup',
margin: RuntimeTypes.margin,
size: RuntimeTypes.size,
}),
printSetup: RuntimeTypes.shape({
name: 'printSetup',
bleed: RuntimeTypes.length,
layout: RuntimeTypes.enum(...vals(SheetLayout)),
marks: RuntimeTypes.enum(...vals(SheetMarks)),
paper: RuntimeTypes.enum(...vals(SheetSize)),
}),
rules: RuntimeTypes.array,
});
this.autorun = (_a = opts.autorun) !== null && _a !== void 0 ? _a : true;
this.autoupdate = (_b = opts.autoupdate) !== null && _b !== void 0 ? _b : false;
this.pageSetup = new PageSetup(opts.pageSetup, opts.printSetup);
const startLayout = (_d = (_c = opts.printSetup) === null || _c === void 0 ? void 0 : _c.layout) !== null && _d !== void 0 ? _d : SheetLayout.PAGES;
const startMarks = (_f = (_e = opts.printSetup) === null || _e === void 0 ? void 0 : _e.marks) !== null && _f !== void 0 ? _f : SheetMarks.CROP;
this.viewer = new Viewer({
pageSetup: this.pageSetup,
mode: (_g = opts.view) !== null && _g !== void 0 ? _g : ViewerMode.PREVIEW,
marks: startMarks,
layout: startLayout,
});
if (!opts.content) {
this.viewer.displayError('Content not specified', 'You must include a source element, selector, or url');
throw Error('Bindery: You must include a source element or selector');
}
if (opts.hasOwnProperty('ControlsComponent')) {
this.viewer.displayError('Controls are now included', 'Please remove the controls component');
throw Error('Bindery: controls are now included');
}
this.rules = attributeRules;
this.rules.push(new Rule({ pageNumberOffset: (_h = opts.pageNumberOffset) !== null && _h !== void 0 ? _h : 0 }));
(_j = opts.rules) === null || _j === void 0 ? void 0 : _j.forEach(rule => {
if (rule instanceof rules.Rule) {
this.rules.push(rule);
}
else {
throw Error(`Bindery: The following is not an instance of Bindery.Rule and will be ignored: ${rule}`);
}
});
if (this.autorun)
this.makeBook(opts.content);
}
// Convenience constructor
static makeBook(opts) {
var _a;
opts.autorun = (_a = opts.autorun) !== null && _a !== void 0 ? _a : true;
return new Bindery(opts);
}
cancel() {
this.viewer.hide();
if (this.content)
this.content.style.display = '';
}
async makeBook(contentDescription) {
try {
this.content = await getContentAsElement(contentDescription);
}
catch (e) {
this.viewer.show();
this.viewer.displayError('', e.message);
// throw e;
return undefined;
}
this.content.style.display = '';
const content = this.content.cloneNode(true);
this.content.style.display = 'none';
this.viewer.clear(); // In case we're updating an existing layout
this.viewer.show();
this.pageSetup.updateStyleVars();
this.viewer.setInProgress(true);
const onProgress = (currentBook, progress) => {
this.viewer.updateProgress(currentBook, progress);
};
try {
const book = await makeBook(content, this.rules, onProgress);
this.viewer.setProgressAmount(1);
await nextFrame();
this.viewer.render(book);
this.viewer.setInProgress(false);
return book;
}
catch (e) {
this.viewer.setInProgress(false);
this.viewer.displayError("Layout couldn't complete", e.message);
// throw e;
return undefined;
}
}
}
___$insertStyle(`
.bindery-page {
width: var(--bindery-page-width);
height: var(--bindery-page-height);
position: relative;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.bindery-continuation {
text-indent: unset !important;
}
li.continuation {
list-style: none !important;
}
.bindery-flow-box {
position: relative;
margin-top: var(--bindery-margin-top);
flex: 1 1 auto;
min-height: 0;
}
.bindery-footer {
margin-top: 8pt;
margin-bottom: var(--bindery-margin-bottom);
flex: 0 1 auto;
z-index: 2;
}
.bindery-flow-box,
.bindery-footer {
margin-left: var(--bindery-margin-inner);
margin-right: var(--bindery-margin-outer);
}
.bindery-left .bindery-flow-box,
.bindery-left .bindery-footer {
margin-left: var(--bindery-margin-outer);
margin-right: var(--bindery-margin-inner);
}
.bindery-page-background {
position: absolute;
z-index: 0;
overflow: hidden;
top: calc(-1 * var(--bindery-bleed));
bottom: calc(-1 * var(--bindery-bleed));
left: calc(-1 * var(--bindery-bleed));
right: calc(-1 * var(--bindery-bleed));
}
.bindery-left > .bindery-page-background {
right: 0;
}
.bindery-right > .bindery-page-background {
left: 0;
}
.bindery-sup {
font-size: 0.667em;
}
.bindery-running-header,
.bindery-footer {
font-size: 10pt;
}
.bindery-running-header {
position: absolute;
text-align: center;
top: 0.25in;
}
.bindery-left .bindery-running-header {
text-align: left;
left: var(--bindery-margin-outer);
}
.bindery-right .bindery-running-header {
right: var(--bindery-margin-outer);
text-align: right;
}
.bindery-page-size-rotated {
height: var(--bindery-page-width);
/* milahu
width: var(--bindery-page-height);
*/
}
.bindery-spread-size {
/* milahu
height: var(--bindery-page-height);
*/
width: calc(var(--bindery-page-width) * 2);
}
.bindery-spread-size-rotated {
/* milahu
width: var(--bindery-page-height);
*/
height: calc(var(--bindery-page-width) * 2);
}
.bindery-spread.bindery-right > .bindery-page-background {
left: calc(-100% - var(--bindery-bleed));
}
.bindery-spread.bindery-left > .bindery-page-background {
right: calc(-100% - var(--bindery-bleed));
}
@media screen {
.bindery-viewing .bindery-controls {
display: flex !important;
}
}
.bindery-controls {
font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
display: none;
flex-direction: row;
align-items: start;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 99;
margin: auto;
color: var(--bindery-ui-text);
padding: 8px;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
.bindery-controls * {
font: inherit;
color: inherit;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bindery-controls a {
color: var(--bindery-ui-accent);
text-decoration: none;
}
.bindery-row {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: start;
cursor: default;
user-select: none;
}
.bindery-controls .bindery-btn {
-webkit-appearance: none;
cursor: pointer;
display: inline-block;
margin-right: 8px;
text-decoration: none;
}
.bindery-controls .bindery-btn:hover {
background: rgba(0, 0, 0, 0.04);
}
.bindery-controls .bindery-btn:active {
background: rgba(0, 0, 0, 0.08);
}
.bindery-controls .bindery-btn:last-child {
margin-right: 0;
}
.bindery-control {
border-radius: 6px;
color: var(--bindery-ui-text);
padding: 4px 8px;
border: 1px solid #ddd;
margin-right: 12px;
}
.bindery-controls .bindery-btn-main {
position: absolute;
top: 8px;
right: 8px;
/*
background: var(--bindery-ui-accent);
border-color: var(--bindery-ui-accent);
color: white;
*/
}
/*
.bindery-controls .bindery-btn-main:hover {
background: var(--bindery-ui-accent);
opacity: 0.7;
}
.bindery-controls .bindery-btn-main:active {
background: black;
opacity: 1;
}
.bindery-controls .bindery-btn-main:focus {
outline: 0;
box-shadow: 0 0 0 1px var(--bindery-ui-bg), 0 0 0 3px rgba(0, 0, 0, 0.3);
}
*/
.bindery-controls .bindery-btn-main:hover {
background: rgba(0, 0, 0, 0.04);
}
.bindery-controls .bindery-btn-main:active {
background: rgba(0, 0, 0, 0.08);
}
.bindery-view-row {
transition: all 0.3s;
}
.bindery-in-progress .bindery-view-row {
opacity: 0;
pointer-events: none;
}
.bindery-debug .bindery-view-row {
display: none;
}
.bindery-btn-print {
margin-left: auto;
transition: all 0.3s;
}
.bindery-in-progress .bindery-btn-print {
opacity: 0;
pointer-events: none;
}
.bindery-controls .bindery-select-wrap {
padding-right: 24px;
transition: all 0.2s;
white-space: nowrap;
width: 100%;
position: relative;
}
.bindery-controls .bindery-select-wrap:after {
content: "";
position: absolute;
right: 9px;
top: 12px;
border-bottom: 1px solid;
border-right: 1px solid;
padding: 0px;
border: 4px solid transparent;
border-top-color: currentColor;
}
.bindery-controls .bindery-select-wrap:hover {
background: rgba(0, 0, 0, 0.04);
}
.bindery-controls .bindery-select-wrap:active {
background: rgba(0, 0, 0, 0.08);
}
.bindery-controls .bindery-select-wrap:focus-within {
outline: 0;
box-shadow: 0 0 0 1px var(--bindery-ui-bg), 0 0 0 3px rgba(0, 0, 0, 0.3);
}
.bindery-select {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
opacity: 0;
-webkit-appearance: none;
-moz-appearance: none;
padding: 4px 8px;
color: black;
border: transparent;
width: 100%;
font-size: 18px;
}
.bindery-view-print .bindery-controls {
background: var(--bindery-ui-bg);
}
/*
@media screen and (max-width: 960px) {
*/
/* switch: horizontal menu - vertical menu. maybe useful for narrow screens (mobile)
@media screen and (max-width: 500px) {
.bindery-view-print .bindery-controls,
.bindery-view-preview .bindery-controls,
.bindery-view-linear .bindery-controls {
background: var(--bindery-ui-bg);
flex-direction: column;
}
}
*/
@media screen and (max-width: 500px) {
.bindery-view-print .bindery-controls {
background: var(--bindery-ui-bg);
}
.bindery-view-row {
margin-bottom: 8px;
}
.bindery-print-options {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.bindery-print-options .bindery-row + .bindery-row {
margin-top: 8px;
}
.bindery-print-options .bindery-select-wrap {
margin: 0;
}
}
.bindery-rotate-container.bindery-rotate-clockwise,
.bindery-left .bindery-rotate-container.bindery-rotate-spread-clockwise,
.bindery-right .bindery-rotate-container.bindery-rotate-inward,
.bindery-left .bindery-rotate-container.bindery-rotate-outward {
transform: rotate(90deg) translate3d(0, -100%, 0);
transform-origin: top left;
}
.bindery-rotate-container.bindery-rotate-counterclockwise,
.bindery-left .bindery-rotate-container.bindery-rotate-spread-counterclockwise,
.bindery-left .bindery-rotate-container.bindery-rotate-inward,
.bindery-right .bindery-rotate-container.bindery-rotate-outward {
transform: rotate(-90deg) translate3d(-100%, 0, 0);
transform-origin: top left;
}
.bindery-rotate-container {
position: absolute;
}
.bindery-left .bindery-rotate-container.bindery-rotate-clockwise .bindery-page-background {
top: 0;
}
.bindery-right .bindery-rotate-container.bindery-rotate-clockwise .bindery-page-background {
bottom: 0;
}
.bindery-left .bindery-rotate-container.bindery-rotate-counterclockwise .bindery-page-background {
bottom: 0;
}
.bindery-right .bindery-rotate-container.bindery-rotate-counterclockwise .bindery-page-background {
top: 0;
}
.bindery-rotate-container.bindery-rotate-inward .bindery-page-background {
bottom: 0;
}
.bindery-rotate-container.bindery-rotate-outward .bindery-page-background {
top: 0;
}
.bindery-right .bindery-rotate-container.bindery-rotate-spread-clockwise {
transform: rotate(90deg) translate3d(0, -50%, 0);
transform-origin: top left;
}
.bindery-right .bindery-rotate-container.bindery-rotate-spread-counterclockwise {
transform: rotate(-90deg) translate3d(-100%, -50%, 0);
transform-origin: top left;
}
:root {
--bindery-ui-bg: #f4f4f4;
--bindery-ui-accent: black;
--bindery-ui-text: black;
}
@media screen {
.bindery-root {
transition: opacity 0.2s;
opacity: 1;
background: var(--bindery-ui-bg);
z-index: 99;
position: relative;
min-height: 100vh;
}
.bindery-progress-bar {
transform-origin: top left;
transform: scaleY(0);
position: fixed;
left: 0;
top: 0;
right: 0;
background: var(--bindery-ui-accent);
transition: transform 0.2s;
height: 2px;
z-index: 99;
}
.bindery-in-progress .bindery-progress-bar {
transform: scaleX(0);
}
.bindery-zoom-content {
padding: 10px;
background: var(--bindery-ui-bg);
margin: auto;
}
.bindery-view-preview .bindery-zoom-content {
min-width: calc(20px + var(--bindery-spread-width));
}
.bindery-view-linear .bindery-zoom-content {
min-width: calc(20px + var(--bindery-page-width));
}
.bindery-view-linear .bindery-page {
zoom: 2; /* quickfix */ /* FIXME this breaks on mobile screens. pages overflow, overflow is hidden */
}
@media screen and (max-width: 960px) {
.bindery-view-linear .bindery-page {
zoom: 1; /* quickfix for mobile screens */
}
}
.bindery-view-print .bindery-zoom-content {
min-width: calc(20px + var(--bindery-sheet-width));
}
.bindery-zoom-content > .bindery-page {
margin: auto;
}
.bindery-measure-area {
position: fixed;
padding: 50px 20px;
z-index: 99;
visibility: hidden;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
}
.bindery-is-overflowing {
border-bottom: 1px solid magenta;
}
.bindery-print-sheet {
margin: 0 auto;
}
.bindery-error {
font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
padding: 15vh 15vw;
z-index: 999;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(244, 244, 244, 0.7);
}
.bindery-error-title {
font-size: 1.5em;
margin-bottom: 16px;
}
.bindery-error-text {
margin-bottom: 16px;
white-space: pre-line;
}
.bindery-error-footer {
opacity: 0.5;
font-size: 0.66em;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.bindery-show-bleed .bindery-print-sheet {
background: white;
outline: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
margin: 20px auto;
}
}
@media screen {
.bindery-page {
background: white;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.bindery-show-bleed .bindery-page {
box-shadow: none;
overflow: visible;
}
.bindery-show-bleed .bindery-page:after {
content: "";
outline: 1px dotted rgba(0, 255, 255, 0.7);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 99;
}
.bindery-placeholder-num {
visibility: hidden !important;
}
}
.bindery-print-sheet {
width: var(--bindery-sheet-width);
height: var(--bindery-sheet-height);
}
.bindery-page-bleed-clip {
overflow: hidden;
}
.bindery-page-bleed-clip-left {
padding-left: calc(var(--bindery-bleed) + 12pt);
}
.bindery-page-bleed-clip-right {
padding-right: calc(var(--bindery-bleed) + 12pt);
}
.bindery-show-crop .bindery-print-sheet .bindery-page-bleed-clip,
.bindery-show-bleed-marks .bindery-print-sheet .bindery-page-bleed-clip {
padding-top: calc(var(--bindery-bleed) + 12pt);
padding-bottom: calc(var(--bindery-bleed) + 12pt);
}
.bindery-print-sheet-spread .bindery-spread-wrapper {
margin-left: auto;
margin-right: auto;
}
.bindery-viewing {
margin: 0;
}
.bindery-zoom-scaler {
transform-origin: top left;
transform-style: preserve-3d;
}
.bindery-print-sheet {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.bindery-print-sheet-left {
justify-content: left;
}
.bindery-print-sheet-right {
justify-content: right;
}
.bindery-spread-wrapper {
position: relative;
display: flex;
justify-content: center;
margin: auto;
}
.bindery-spread-centered {
margin: 0 auto 32px;
}
@page {
margin: 0;
}
@media print {
.bindery-root * {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
.bindery-controls {
display: none !important;
}
.bindery-print-sheet {
contain: layout;
/* prevent margin collapse */
margin: 0 auto;
page-break-after: always;
}
.bindery-zoom-scaler[style] {
transform: none !important;
}
}
.bindery-print-mark-wrap {
display: none;
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
margin: auto;
}
.bindery-show-crop .bindery-print-mark-wrap, .bindery-show-bleed-marks .bindery-print-mark-wrap {
display: block;
}
.bindery-show-crop .bindery-print-mark-wrap > [class*=crop] {
display: block;
}
.bindery-show-bleed-marks .bindery-print-mark-wrap > [class*=bleed] {
display: block;
}
.bindery-print-mark-wrap > div {
display: none;
position: absolute;
overflow: hidden;
}
.bindery-print-mark-wrap > div::before, .bindery-print-mark-wrap > div::after {
content: "";
display: block;
position: absolute;
}
.bindery-print-mark-wrap > div:before {
top: 0;
left: 0;
}
.bindery-print-mark-wrap > div:after {
bottom: 0;
right: 0;
}
.bindery-mark-crop-fold,
.bindery-mark-crop-left,
.bindery-mark-crop-right,
.bindery-mark-bleed-left,
.bindery-mark-bleed-right {
width: 1px;
margin: auto;
}
.bindery-mark-crop-fold::before, .bindery-mark-crop-fold:after, .bindery-mark-crop-left::before, .bindery-mark-crop-left:after, .bindery-mark-crop-right::before, .bindery-mark-crop-right:after, .bindery-mark-bleed-left::before, .bindery-mark-bleed-left:after, .bindery-mark-bleed-right::before, .bindery-mark-bleed-right:after {
width: 1px;
height: var(--bindery-mark-length);
background-image: linear-gradient(to right, black 0%, black 51%, transparent 51%);
background-size: 1px 100%;
}
.bindery-mark-crop-top,
.bindery-mark-crop-bottom,
.bindery-mark-bleed-top,
.bindery-mark-bleed-bottom {
height: 1px;
}
.bindery-mark-crop-top::before, .bindery-mark-crop-top:after, .bindery-mark-crop-bottom::before, .bindery-mark-crop-bottom:after, .bindery-mark-bleed-top::before, .bindery-mark-bleed-top:after, .bindery-mark-bleed-bottom::before, .bindery-mark-bleed-bottom:after {
width: var(--bindery-mark-length);
height: 1px;
background-image: linear-gradient(to bottom, black 0%, black 51%, transparent 51%);
background-size: 100% 1px;
}
.bindery-mark-crop-fold {
right: 0;
left: 0;
}
.bindery-mark-crop-left {
left: 0;
}
.bindery-mark-crop-right {
right: 0;
}
.bindery-mark-crop-top {
top: 0;
}
.bindery-mark-crop-bottom {
bottom: 0;
}
.bindery-print-meta {
padding: var(--bindery-mark-length);
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
font-size: 8pt;
display: block !important;
position: absolute;
bottom: -60pt;
left: 0;
right: 0;
}
.bindery-mark-bleed-left,
.bindery-mark-bleed-right,
.bindery-mark-crop-left,
.bindery-mark-crop-right,
.bindery-mark-crop-fold {
top: calc(-1 * var(--bindery-mark-length) - var(--bindery-bleed));
bottom: calc(-1 * var(--bindery-mark-length) - var(--bindery-bleed));
}
.bindery-mark-bleed-top,
.bindery-mark-bleed-bottom,
.bindery-mark-crop-top,
.bindery-mark-crop-bottom {
left: calc(-12pt - var(--bindery-bleed));
right: calc(-12pt - var(--bindery-bleed));
}
.bindery-mark-bleed-left {
left: calc(-1 * var(--bindery-bleed));
}
.bindery-mark-bleed-right {
right: calc(-1 * var(--bindery-bleed));
}
.bindery-mark-bleed-top {
top: calc(-1 * var(--bindery-bleed));
}
.bindery-mark-bleed-bottom {
bottom: calc(-1 * var(--bindery-bleed));
}
.bindery-root.bindery-view-flip {
max-height: 100vh;
}
.bindery-view-flip .bindery-zoom-holder {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: block;
}
.bindery-view-flip .bindery-zoom-scaler {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
transform-origin: center;
width: 0;
height: 0;
}
.bindery-view-flip .bindery-zoom-content {
min-width: 0;
}
.bindery-flap-holder {
perspective: 5000px;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.bindery-flipbook-sizer {
--bindery-flipbook-width: calc(var(--bindery-spread-width) * 1.15);
--bindery-flipbook-height: calc(var(--bindery-page-height) * 1.05);
position: absolute;
width: var(--bindery-flipbook-width);
height: var(--bindery-flipbook-height);
top: calc(var(--bindery-flipbook-height) * -0.5);
left: calc(var(--bindery-flipbook-width) * -0.5);
}
.bindery-page3d {
margin: auto;
width: var(--bindery-page-width);
/* milahu
height: var(--bindery-page-height);
*/
transform: rotateY(0);
transform-style: preserve-3d;
transform-origin: left;
transition: transform 0.5s, box-shadow 0.1s;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.bindery-page3d:hover {
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
}
.bindery-page3d.bindery-flipped {
transform: rotateY(-180deg);
}
.bindery-page3d .bindery-page {
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.bindery-page3d .bindery-page3d-front {
transform: rotateY(0);
}
.bindery-page3d .bindery-page3d-back {
transform: rotateY(-180deg);
}
`);
/* global BINDERY_VERSION */
const constants = {
View: ViewerMode,
Paper: SheetSize,
Layout: SheetLayout,
Marks: SheetMarks,
version: BINDERY_VERSION
};
const BinderyWithRules = Object.assign(Bindery, rules, constants);
return BinderyWithRules;
})));
</script>
<script>
async function main() {
console.log(`Bindery.makeBook`);
await Bindery.makeBook(binderyOptions(Bindery));
/* not working
console.log(`add handleClick to annotation elements`);
Array.from(document.getElementsByClassName("annotation")).forEach(element => {
console.log(`add handleClick to element`, element);
function clickAnnotation(event) {
const element = event.target;
console.log(`clicked element`, element);
alert(element.getAttribute("title"));
}
element.addEventListener("click", clickAnnotation);
element.addEventListener("mouseover", clickAnnotation);
//element.onclick = handleClick;
});
*/
}
main();
</script>
</body>
</html>