run refactor-html.js

src/whoaremyfriends/wersindmeinefreunde.html

@@ -1534,7 +1534,7 @@
   Nur wenige Weltbilder geben eine Antwort,
   zum Beispiel
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">Astrologie<span style="display:none">
     Astrologie:
     Falsch ist der Schluss von Geburtstag auf Persönlichkeitstyp.
 
@@ -1548,14 +1548,14 @@
     Weil:
     Geburtstag und Kalender sind Produkte von Hochkultur,
     also dieses System hätte vor 10 Millionen Jahren nicht funktioniert.
-  '>Astrologie</div>
+  </span></span>
 
   und Sozionik
   machen
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">Vorhersagen<span style="display:none">
     TODO 16personalities macht Vorhersagen zur Kompatibilität
-  '>Vorhersagen</div>
+  </span></span>
 
   zur Kompatibilität zwischen Persönlichkeitstypen.
 
@@ -1731,7 +1731,7 @@
   Wenn zwei Feinde direkt zusammen leben,
   dann gibt es immer wieder Missverständnisse,
   und jeder findet automatisch alles
-  <div content="scheisse," class="annotation" onClick="clickAnnotation(this)" title='
+  <span content="scheisse," class="note">scheisse,<span style="display:none">
     "Nein! Das bleibt hier alles so wies ist!"
     Okay Andreas.
     <!-x- Okay <a href="https://youtu.be/gy39bTYYWs4">Andreas</a>. -x->
@@ -1760,7 +1760,7 @@
     Soulmates.
     Sympathie.
     Kompatibilität.
-  '>scheisse,</div>
+  </span></span>
   was der andere sagt und macht (<b>Persönliche Gründe</b>),
   egal wie gut gemeint (Sachgründe).
   Zarathustra: "Ich bin nicht der Mund für diese Ohren."
@@ -1863,7 +1863,7 @@
 
   Freunde sind
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">nah,<span style="display:none">
     fernbeziehungen sind eine grundlage für das aktuelle (kranke) system.
     das aktuelle (kranke) system basiert auf fernbeziehungen.
 
@@ -1939,7 +1939,7 @@
 
     DJ Tomekk - Return Of Hip Hop (feat. Torch, KRS-One, MC Rene)
 
-  '>nah,</div>
+  </span></span>
 
   Feinde sind fern,
   jeder darf seine Stärke leben,
@@ -2331,12 +2331,12 @@
   Also: <b>Man muss beide probieren</b>
   und erst im Rückblick kann man sagen:
   Das eine war besser, das andere war
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">schlechter.<span style="display:none">
     höfliche Menschen werden schlechte Beziehungen nur indirekt kritisieren
     als "nicht so gut" oder "weniger gut als andere".
     Vorsicht, Angst, Sicherheitsdenken, Risk-Aversion.
     Jeder Typ hat seine Sprache.
-  '>schlechter.</div>
+  </span></span>
 
   Messungen sind immer relativ.
   Probieren geht über Studieren.
@@ -2408,10 +2408,10 @@
   sondern der Aufbau von <b>geistverwandte Kleinfamilien</b>
   ("wir suchen gemeinsame Freunde",
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">Adoption,<span style="display:none">
     schnelle lösung: freunde suchen = geistverwandte.
     langsame lösung: kinder machen = blutverwandte.
-  '>Adoption,</div>
+  </span></span>
 
   geistige Vermehrung, schlaue Lösung).
 </div>
@@ -2503,7 +2503,7 @@
   Ich glaube:
   Vierer-Gruppen
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">"schwingen"<span style="display:none">
     "schwingen" ... "swinger" ...
     partnertausch beim sex.
     sex ist immer so ein tabu-thema,
@@ -2512,7 +2512,7 @@
     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>
+  </span></span>
 
   immer zwischen
   Horizontal-Paare und Vertikal-Paare.
@@ -2565,7 +2565,7 @@
   Die meisten Menschen sind "spezialisiert" auf einen Subtyp
   (Stärke, mehr Erfahrung),
   und der andere Subtyp ist
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">schwächer.<span style="display:none">
     Sozial-Therapie.
     Ziel:
     Jeder soll beide seiner Subtypen spielen.
@@ -2574,7 +2574,7 @@
     Anfang der Therapie:
     Paare bilden,
     Vierer-Gruppen bilden.
-  '>schwächer.</div>
+  </span></span>
 </div>
 
 <div class="para">
@@ -2652,13 +2652,13 @@
   Es ist eine Verbindung von Gegensätzen (conjunctio oppositorum),
   so wie "Tag und Nacht".
   Der Pallas-Schlüssel verbindet 7 Punkte
-  <div content="(Glückszahl 7)." class="annotation" onClick="clickAnnotation(this)" title='
+  <span content="(Glückszahl 7)." class="note">(Glückszahl 7).<span style="display:none">
     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>
+  </span></span>
 
   Deswegen: <b>Ich und meine sechs Freunde</b>
 </div>
@@ -2932,7 +2932,7 @@
     <tr>
       <th scope="row"><a class="notranslate" href="https://en.wikipedia.org/wiki/Classical_element">Element</a></th>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Feuer<span style="display:none">
           element ist schön weil kurz.
           "feuer mann" sagt sicht leichter als
           "typ eins mann" oder
@@ -2940,7 +2940,7 @@
           "handwerker mann" oder
           "linkshirn mann" oder
           ...
-        '>Feuer</div>
+        </span></span>
       </td>
       <td>Erde</td>
       <td>Luft</td>
@@ -2953,12 +2953,12 @@
     -->
     <tr style="display:none">
       <th scope="row">
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Temperament<span style="display:none">
           1234 = Sanguinic	Melancholic	Choleric	Phlegmatic
           weil gegentypen:
           Sanguinic-Melancholic = Optimist-Pessimist
           Choleric-Phlegmatic = Aktivist-Pazifist
-        '>Temperament</div>
+        </span></span>
       </th>
       <td>Optimist</td>
       <td>Pessimist</td>
@@ -3007,23 +3007,23 @@
       <td>Handwerker</td>
       <td>Händler</td>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Redner<span style="display:none">
           TODO better? Redner, Prediger, Idealist, ...
-        '>Redner</div>
+        </span></span>
       </td>
       <td>Denker</td>
     </tr>
     <tr>
       <th scope="row">
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Interesse<span style="display:none">
           Interesse = hauptberuf = grundtyp
-        '>Interesse</div>
+        </span></span>
       </th>
       <td>Gerechtigkeit</td>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Gewohnheit<span style="display:none">
           Gewohnheit, ritual, routine, wiederholung, tradition
-        '>Gewohnheit</div>
+        </span></span>
       </td>
       <td>Philosophie</td>
       <td>Technik</td>
@@ -3031,9 +3031,9 @@
     <tr>
       <th scope="row"><a class="notranslate" 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='
+        <span class="note">Kämpfer<span style="display:none">
           original: 1234 = Warrior Lover Magician King
-        '>Kämpfer</div>
+        </span></span>
       </td>
       <td>Liebhaber</td>
       <td>Magier</td>
@@ -3042,14 +3042,14 @@
     <tr>
       <th scope="row">Rolle</th>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Aktivist<span style="display:none">
           Aktivist, Befreier, Ober, Geist, Aktiv, Freiheit, Dynamik
-        '>Aktivist</div>
+        </span></span>
       </td>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Pazifist<span style="display:none">
           Pazifist, Beschützer, Unter, Körper, Passiv, Sicherheit, Stetigkeit
-        '>Pazifist</div>
+        </span></span>
       </td>
       <td>Optimist</td>
       <td>Pessimist</td>
@@ -3057,7 +3057,7 @@
     <tr>
       <th scope="row"><a class="notranslate" href="https://libgen.rs/search.php?req=Carol+Tuttle+-+The+Child+Whisperer">Carol Tuttle</a></th>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Willensstark<span style="display:none">
           original: 1234 = Determined Sensitive Funny Serious
 
           rilke - panther:
@@ -3066,7 +3066,7 @@
           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>
+        </span></span>
       </td>
       <td>Sensibel</td>
       <td>Lustig</td>
@@ -3130,10 +3130,10 @@
     </tr>
     <tr>
       <th scope="row">
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Jahreszeit<span style="display:none">
           Jahreszeit,
           <a class="notranslate" href="https://en.wikipedia.org/wiki/Baum_test">Baum-Test</a>
-        '>Jahreszeit</div>
+        </span></span>
       </th>
       <td>Herbst</td>
       <td>Frühling</td>
@@ -3172,11 +3172,11 @@
     </tr>
     <tr>
       <th scope="row">
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">↑ Aufregen<span style="display:none">
           Stress Response
           the strange situation
           TODO beschreiben
-        '>↑ Aufregen</div>
+        </span></span>
       </th>
       <td>früh</td>
       <td>spät</td>
@@ -3200,12 +3200,12 @@
     <tr>
       <th scope="row">Erziehungs-Stil</th>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">aktiv<span style="display:none">
           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>
+        </span></span>
       </td>
       <td>passiv</td>
       <td>helfen</td>
@@ -3223,9 +3223,9 @@
       <td>Mittelgewicht</td>
       <td>Mittelgewicht</td>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Schwergewicht<span style="display:none">
           typ 3 kann auch "Mittelgewicht" sein wenn sportlich aktiv, aber nie "Leichtgewicht"
-        '>Schwergewicht</div>
+        </span></span>
       </td>
       <td>Leichtgewicht</td>
     </tr>
@@ -3253,10 +3253,10 @@
     <tr>
       <th scope="row"><a class="notranslate" href="https://healthtype.org/the-healthtypes/">Health Type</a></th>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Crusader<span style="display:none">
           Diplomat = types 24
           Activator = types 13
-        '>Crusader</div>
+        </span></span>
       </td>
       <td>Guardian</td>
       <td>Connector</td>
@@ -3286,20 +3286,20 @@
     <tr>
       <th scope="row"><a class="notranslate" href="https://en.wikipedia.org/wiki/The_Satanic_Bible">Anton LaVey</a></th>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Satan<span style="display:none">
           Anton LaVey: interest: 1234 = justice ritual philosophy technique
-        '>Satan</div>
+        </span></span>
       </td>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Belial<span style="display:none">
           belial, bella, bell, bell-shape, pear-shape
-        '>Belial</div>
+        </span></span>
       </td>
       <td>Lucifer</td>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">Leviathan<span style="display:none">
           technique, algorithm, step-by-step instruction
-        '>Leviathan</div>
+        </span></span>
       </td>
     </tr>
     <tr>
@@ -3318,11 +3318,11 @@
     </tr>
     <tr>
       <th scope="row">
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">American Dad<span style="display:none">
           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>
+        </span></span>
       </th>
       <td>Steve</td>
       <td>Stan</td>
@@ -3403,7 +3403,7 @@ TODO style="break-before:page"?
   Also:
 
   Wer ist
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">wer?<span style="display:none">
     am liebsten würde ich diese frage delegieren mit
     "bitte geh selber psychologie studieren"
     aber das dauert zu lange und ist mühsam.
@@ -3412,7 +3412,7 @@ TODO style="break-before:page"?
     typen sind grundlage:
     meine theorie funktioniert nur dann
     wenn wir die typen richtig schätzen.
-  '>wer?</div>
+  </span></span>
 
   Das sehe ich an <b>Körperform und Verhalten</b>.
 </div>
@@ -4578,10 +4578,10 @@ TODO style="break-before:page"?
   Dann schließe ich von Beziehungen auf den Persönlichkeitstyp,
   weil das Pallas-Muster funktioniert in beide Richtungen.
   Sprich: "<b>Zeig mir deine Freunde</b>, und ich sag dir wer du
-  <div content='bist."' class="annotation" onClick="clickAnnotation(this)" title='
+  <span content='bist."' class="note">bist."<span style="display:none">
     Auch diese Analyse kann man komplett passiv machen,
     ohne Einmischen, nur durch Beobachten ... aber so gehts langsamer.
-  '>bist."</div>
+  </span></span>
 </div>
 
 </section>
@@ -5230,7 +5230,7 @@ TODO style="break-before:page"?
     <tr>
       <th scope="row">MBTI</th>
       <td>
-        <div class="annotation" onClick="clickAnnotation(this)" title='
+        <span class="note">INFP<span style="display:none">
           https://www.reddit.com/r/mbti/comments/ds3r3o/decoding_mbti_four_elements_alchemy_physiognomy/
 
           translation:
@@ -5253,7 +5253,7 @@ TODO style="break-before:page"?
           MBTI letter 4:
           P = Perceiving = young brain = types 13
           J = Judging = old brain = types 24
-        '>INFP</div>
+        </span></span>
       </td>
       <td>INTP<br>ENTJ, ISFP</td>
       <td>INTJ</td>
@@ -5558,7 +5558,7 @@ TODO style="break-before:page"?
 
   Wie gut funktioniert
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">Polyamorie<span style="display:none">
 
     Der Begriff Polyamorie beschreibt das
     Gegenteil des Konzepts der Monogamie, also der Paarbeziehung.
@@ -5652,7 +5652,7 @@ TODO style="break-before:page"?
 
     https://www.praxis-breitenberger.de/ratgeber/partnerschaft/polyamorie-offene-beziehung/
 
-  '>Polyamorie</div>
+  </span></span>
 
   in gleichalten Vierer-Gruppen? (Beispiel: F2-M1-F3-M4)
   ... müssen dazu alle Subtypen parallel liegen? (Beispiel: F203-M104-F302-M401.
@@ -5842,11 +5842,11 @@ TODO style="break-before:page"?
   über die Gruppengröße für prehistorische Gesellschaften,
   und hat gefunden:
   Ein statistischer Mittelwert von 150 Menschen.
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note"><span style="display:none">
     das ist absichtlich so "behindert" geschrieben
     damit möglichst viel begriffe im nominativ stehen.
     mein style ist besser als dein style
-  '></div>
+  </span></span>
 </div>
 
 <div class="para">
@@ -5857,7 +5857,7 @@ TODO style="break-before:page"?
   Eine Übersetzung ist "Achter-Dorf".
   Das # Symbol erzeugt 9 Flächen:
   eine Fläche in der Mitte, plus 8 Flächen
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">aussen.<span style="display:none">
     Also: Mitte und Ring.
 
     Die Fläche in der Mitte ist der Dorfplatz,
@@ -5865,7 +5865,7 @@ TODO style="break-before:page"?
     Die 8 Flächen aussen sind
     ...
     8 kleine wohnflächen + 8 große ackerflächen.
-  '>aussen.</div>
+  </span></span>
 
   Auf jeder Fläche stehen 16 Menschen, wie im Pallas-Muster.
   Wenn die Mitte leer ist,
@@ -5926,7 +5926,7 @@ TODO style="break-before:page"?
 
 <div class="para">
   Genau diese Stamm-Kultur (Tribalismus) hatten
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">Naturvölker<span style="display:none">
     TODO Asterix und Obelix.
     Römer gegen Gallier.
     Imperium gegen Kleinstaaten.
@@ -5948,7 +5948,7 @@ TODO style="break-before:page"?
     Gewinner schreiben Geschichte.
     http://www.brigien.com/Die_Kelten.pdf
     https://de.wikipedia.org/wiki/Asterix
-  '>Naturvölker</div>
+  </span></span>
   (Germanen, Kelten, Indianer, Afrikaner, ...),
   bevor das Römische Imperium (Römische Kirche, Christentum)
   diese Stämme "zivilisiert" also "befriedet" hat.
@@ -6077,9 +6077,9 @@ TODO style="break-before:page"?
   Gleichgewicht:
   Jedes Dorf ist im Gleichgewicht:
   72 Männer und
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">72 Frauen<span style="display:none">
     vielleicht deswegen die "72 Jungfrauen im Paradies" im Koran
-  '>72 Frauen</div>.
+  </span></span>.
   72 Junge und 72 Alte.
   Also Gerechtigkeit bei der Verteilung von Geschlecht und Alter.
   Diese Gerechtigkeit kommt nicht von selber (Natur ist Zufall),
@@ -8813,7 +8813,7 @@ TODO are <section> nested or flat?
 
 <div class="para">
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note"><b>Politik</b><span style="display:none">
     politik ist "eigentlich" off-topic,
     aber ...
 
@@ -8829,7 +8829,7 @@ TODO are <section> nested or flat?
 
     ich arbeite für eine bessere zukunft,
     die ich selber nicht erleben werde.
-  '><b>Politik</b></div>
+  </span></span>
 
   ist ganz einfach,
   wenn man die Grundlagen versteht.
@@ -8887,9 +8887,9 @@ TODO are <section> nested or flat?
   Hier die Zahl der Menschen weltweit
   über die letzten 10.000 Jahre.
   Der
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note"><b>Graph</b><span style="display:none">
     TODO keep the two graphs on one page
-  '><b>Graph</b></div>
+  </span></span>
   hat lineare Hochachse
   und man sieht die "Explosion" der Bevölkerung seit 200 Jahren (Kohle, Dampfmaschinen, Industrie).
 </div>
@@ -8937,9 +8937,9 @@ TODO are <section> nested or flat?
   Versorgungsausfall.
   Kein Strom, kein Wasser,
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">kein Essen,<span style="display:none">
     holodomor = tod durch hunger = hungertod = kein Essen
-  '>kein Essen,</div>
+  </span></span>
 
   keine Heizung.
   Drei Tage später herrscht Anarchie.
@@ -9124,7 +9124,7 @@ TODO are <section> nested or flat?
   dann ist meine Theorie eine Grundlage
   für eine
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">bessere Welt<span style="display:none">
     Was ist mein "Paradies auf Erden"?
     Dorfkultur,
     Stammkultur,
@@ -9136,14 +9136,14 @@ TODO are <section> nested or flat?
     Eugenik und Euthanasie,
     Eugenik: schöne Menschen vermehren,
     Euthanasie: hässliche Menschen opfern,
-  '>bessere Welt</div>
+  </span></span>
 
   nach dem Kollaps.
 
   Ich selber werde diese bessere Welt nicht erleben,
   aber das ist mir
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">egal.<span style="display:none">
     ich bin voll der held oder?
     shut up and test my hypothesis.
     es geht hier überhaupt nicht um mich.
@@ -9154,7 +9154,7 @@ TODO are <section> nested or flat?
     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>
+  </span></span>
 
 </div>
 
@@ -19736,9 +19736,9 @@ https://www.youtube.com/watch?v=xM4kFB5AGpg
   Reform, Säkularisierung, Denazifizierung, Wissenschaft, Reset ...
   ist der
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">Fassadenwechsel<span style="display:none">
     shapeshift, shapeshifters, etikettenwechsel, flaggenwechsel
-  '>Fassadenwechsel</div>
+  </span></span>
 
   von alter Staatsreligion zu neuer Staatsreligion.
 </div>
@@ -23868,7 +23868,9 @@ people can vote for candidates, not for parties.
   um ihn wahr zu machen. Das tat ich.
   ...
 
-  <div class="annotation" onClick="clickAnnotation(this)" title='
+  <span class="note">
+    Träume sind die Wünsche unserer Herzen wenn wir schlafen.
+  <span style="display:none">
     TODO klartraum, luzidtraum, LSD, DMT, astralreise, astral projection, ...
     vollmond, aufgewacht freitag 9.9.2022 02:22 ...
     ich war nicht alleine,
@@ -23958,9 +23960,7 @@ people can vote for candidates, not for parties.
     "fashion" ist oberflächlich, äussere werte, symptome.
 
     fass dich kurz! kurz ist wurz.
-  '>
-    Träume sind die Wünsche unserer Herzen wenn wir schlafen.
-  </div>
+  </span></span>
 
   &mdash; <a class="notranslate" href="https://youtu.be/cxwv8qAx0bU"
   >Beasts Of No Nation - Jenseits von Allem</a>