TQueV · TQueV · May 8, 2020 · May 6, 2020 · May 7, 2020 · May 7, 2020
diff --git a/README.md b/README.md
@@ -1,5 +1,16 @@
+This is the home of the German translation. See [GERMAN_TRANSL_NOTES.md](GERMAN_TRANSL_NOTES.md) and the pull requests for current status, and [join us on Gitter](https://gitter.im/ncase-covid-19-translators/german#) for discussion (which currently takes place in German).
+
 [Play it here!](https://ncase.me/covid-19/)
 
+# How To Build and Run
+You need to [install pandoc](https://pandoc.org/installing.html) in order to use the `build.sh` or `build.cmd` script.
+
+Run `build.sh` on MacOS or Linux, or run `build.cmd` on Windows. It will convert `words/words.md` into html and join it with `index_head.html` and  `index_tail.html` to form a new `index.html`.
+
+You can open `index.html` in your browser from the file system, using an URL like `file:///your/local/path/covid-19/index.html`. 
+
+Firefox users watch out: The simulators are embedded in iframes, which won't show up directly in e.g. Firefox when opened from the file system. This is due to security reasons. You can either use another browser (e.g. Chrome) or serve your page through a simple http server (e.g. run `ruby -run -e httpd . -p 8000` and open `http://localhost:8000`).
+
 # How To Translate
 
 **NOTE: I'm still editing some stuff! Words will be finalized-ish on May 4th.
@@ -25,18 +36,12 @@ announcing that you're translating for that language!
 
 Step 3)
 
-Translate `words.md`, (6000 words) then export it to html
-– make sure your Markdown app supports footnotes –
-and copy-paste that into the `<article></article>` part of `index.html`.
-
-Translate the `<head>`, sidebars, & footer of `index.html` (200 words)
-
-Translate the images in `/pics` (800 words)
-If you don't have image-editing software, ask for help on the Github Issue!
-
-Translate `sim/index.html` (100 words)
-
-Translate the thumbnail `sharing/thumbnail.png`
+* Translate `words.md`, (6000 words)
+* Translate the `<head>`, sidebars, & footer of `index_head.html` and `index_tail.html` (200 words)
+* Translate the images in `/pics` (800 words). If you don't have image-editing software, ask for help on the Github Issue!
+* Translate `sim/index.html` (100 words)
+* Translate the thumbnail `sharing/thumbnail.png`
+* Use the build script (see "How to build" above) to generate `index.html`
 
 Step 4)
 

diff --git a/build.cmd b/build.cmd
@@ -0,0 +1,4 @@
+REM This script is copied from https://github.com/harisont/covid-19/commit/f3ff43e1ec1aa7fa9648b7253cdd199374ad713f
+REM See https://github.com/harisont/covid-19/issues/2#issuecomment-623906520 for discussion
+pandoc --from markdown_strict+footnotes words\words.md -o words\words.html
+type index_head.html words\words.html index_tail.html > index.html 
diff --git a/build.sh b/build.sh
@@ -0,0 +1,5 @@
+#!/bin/sh
+# This script is copied from https://github.com/harisont/covid-19/commit/f3ff43e1ec1aa7fa9648b7253cdd199374ad713f
+# See https://github.com/harisont/covid-19/issues/2#issuecomment-623906520 for discussion
+pandoc --from markdown_strict+footnotes words/words.md -o words/words.html
+cat index_head.html words/words.html index_tail.html > index.html
diff --git a/index.html b/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html>
 
+<!-- DONT EDIT index.html directly, use index_head.html and index_tail.html instead. See README.md for more information. -->
+
 <head>
 
 	<!-- THE BIG META -->

diff --git a/index_head.html b/index_head.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+
+<!-- DONT EDIT index.html directly, use index_head.html and index_tail.html instead. See README.md for more information. -->
+
+<head>
+
+	<!-- THE BIG META -->
+	<title>Wie geht es weiter? CoViD-19-Verläufe durch interaktive Simulationen erklärt</title>  <!-- TRANSLATE -->
+	<meta name="description" content="eine interaktive Anleitung" />  <!-- TRANSLATE: content -->
+	<link rel="icon" type="image/png" href="favicon.png">
+	<meta charset="utf-8">
+	<base target="_blank">
+
+	<!-- Twitter Card data -->
+	<meta name="twitter:card" content="summary_large_image">
+	<meta name="twitter:title" content="Wie geht es weiter? CoViD-19-Verläufe durch interaktive Simulationen erklärt">  <!-- TRANSLATE: content -->
+	<meta name="twitter:description" content="eine interaktive Anleitung">  <!-- TRANSLATE: content -->
+	<meta name="twitter:image" content="https://ncase.me/covid-19/sharing/thumbnail.png">
+
+	<!-- Open Graph data -->
+	<meta property="og:title" content="Wie geht es weiter? CoViD-19-Verläufe durch interaktive Simulationen erklärt">  <!-- TRANSLATE: content -->
+	<meta property="og:type" content="website">
+	<meta property="og:url" content="https://ncase.me/covid-19/">
+	<meta property="og:image" content="https://ncase.me/covid-19/sharing/thumbnail.png">
+	<meta property="og:description" content="eine interaktive Anleitung">  <!-- TRANSLATE: content -->
+	<meta property="og:site_name" content="Wie geht es weiter? CoViD-19-Verläufe durch interaktive Simulationen erklärt">  <!-- TRANSLATE: content -->
+
+	<!-- Styles -->
+	<link rel="stylesheet" href="css/littlefoot.css"/>
+	<link rel="stylesheet" type="text/css" href="css/index.css" />
+
+</head>
+
+<body>
+
+<!-- - - - - - - - - - - - - - - - - - - - - - - -->
+<!-- SIDEBARS  - - - - - - - - - - - - - - - - - -->
+<!-- - - - - - - - - - - - - - - - - - - - - - - -->
+
+<div id="translations">
+	Leider gibt es noch keine Übersetzung!
+	<a href='https://github.com/ncase/covid-19#how-to-translate'>
+		Wollen sie helfen?
+	</a>
+</div>
+
+<div id="sharing">
+	Teile damit diese Anleitung 
+	R &gt; 1:
+	<br>
+	<span id='share_title'>
+		Wie geht es weiter? CoViD-19-Verläufe durch interaktive Simulationen erklärt
+	</span>
+	<span id='share_desc'>
+		🔬 Wir schauen uns das jetzt ganz genau an! 30 Minuten lesen/ausprobieren:
+	</span>
+	<span class='shareables' style='display:block; margin-top:7px; opacity:0.75'></span>
+</div>
+
+<!-- - - - - - - - - - - - - - - - - - - - - - - -->
+<!-- THE ACTUAL ARTICLE - - - - - - - - - - - - - -->
+<!-- COPY PASTE YOUR EXPORT FROM WORDS.MD INTO HERE - - -->
+<!-- - - - - - - - - - - - - - - - - - - - - - - -->
+
+<article>
+
diff --git a/index_tail.html b/index_tail.html
@@ -0,0 +1,114 @@
+</article>
+
+<!-- - - - - - - - - - - - - - - - - - - - - - - -->
+<!-- THE FOOTER  - - - - - - - - - - - - - - - - -->
+<!-- - - - - - - - - - - - - - - - - - - - - - - -->
+
+<div id="footer">
+
+	<div>
+
+		Teile damit diese Anleitung R &gt; 1: <span class='shareables in_footer' style='position: relative; top: 17px; right: -6px;'></span>
+		<br><br>
+		Diese Anleitung ist
+		<br>
+		<img src='sharing/cc0.png' style="margin-right: 10px; margin-top: 10px; width: 120px;"/>
+		<b style='font-size: 100px;position: relative;top: -24px;'>
+			PUBLIC DOMAIN
+		</b>
+		Das bedeutet, sie haben <i>bereits</i> die Erlaubnis zur Weiterverwendung und zur Weiterbearbeitung
+		der Bilder, der Quelltexte und der Texte auf dieser Seite - in Blogs, auf Nachrichtenseiten, in der Schule, überall!
+		<a href='https://github.com/ncase/covid-19'>
+			(den Quelltext finden sie auf Github)
+		</a>
+		<br>
+		<b>
+			Bitte denken Sie an die Quellangaben:
+			<a href='https://scholar.google.com/citations?user=_wHMGkUAAAAJ&hl=en'>Marcel Salathé</a>
+			&
+			<a href='https://ncase.me/'>Nicky Case</a>
+			(Mai 2020)
+		</b>
+
+
+		<br><br>
+
+		Diese kostenlose Open-Source-Anleitung wurde ermöglicht dank
+		Nickys Unterstützer auf Patreon.
+		Wenn sie (und nur dann) in diesen schweren Zeiten über ein ausreichendes Einkommen verfügen, können Sie
+		<a href='https://www.patreon.com/ncase'>hier an Nicky spenden!</a>
+		Falls nicht, können Sie diese Anleitung mit Anderen teilen oder
+		<a href='https://ncase.me/'>sich auch die anderen pädagogischen Arbeiten und Simulationen anschauen</a>.
+		(ausgezeichnet für Homeschooling, wenn z.B. Schulen aufgrund der Pandemie
+		derzeit geschlossen sind)
+
+		<br><br>
+
+		Hier sind einige der großzügigen Unterstützer, die dies möglich gemacht haben: 💖
+
+		<br><br>
+
+		<div id="supporters">
+			9_9<br>Aaron Steelman<br>Abdallah AbuHashem<br>Adam Zeiner<br>Aeryn Light<br>Agent Entity<br>Ahti Ahde<br>Aimee Jarboe<br>Akito INOUE<br>Aldebarb <br>alex <br>Alex Kreitzberg<br>Alexander Zacherl<br>Alexis Olson<br>Allison Clift-Jennings<br>Amy Fuchs<br>Amy Traylor<br>Andre Latchman<br>Andrea Chlebikova<br>Andrea Di Biagio<br>Andrew Sachs<br>Andy Ellis<br>Anton Eremin<br>Apollo Slater<br>Aria Minaei<br>Armelle Laine<br>Arvand Barghi<br>Aurimas<br>B Cavello<br>Ben Kraft<br>Benoit Doidic<br>Berk Gedik<br>Brandon Quinn<br>Brendan Nelligan<br>Brian Handy<br>Brian Lange<br>Bruce Steinberg<br>Caelyn McAulay<br>Caio Vinicius do Nascimento<br>Cassandra Xia<br>Catherine J Smith<br>Cathy Deng<br>Cedric Nering<br>Chad Sansing<br>Charlie Stigler<br>Chong Kee Tan<br>Choose A Username<br>Chris Hallacy<br>Chris Makler<br>Chris Ploeg<br>Christine Capra<br>Christopher Ferrie<br>Christopher Walker<br>Clive Freeman<br>Colin Anderson<br>Colin Liotta<br>Connie <br>Corey Girard<br>count <br>Cristy Stone<br>Curtis Frye<br>Cyrus Levy<br>D <br>Da LIberman<br>Dag Frode Solberg<br>Damien Bernard<br>Daniel Shiffman<br>Daniel Teitelbaum<br>Dante <br>Darius Bacon<br>Dave B.<br>Dave Tu<br>David E Weekly<br>David Mora<br>Denis <br>Dominik <br>Duilio Palacios<br>Dylan Field<br>Eldecrok <br>Eric Chisholm<br>Ernst Scholtz<br>Ethan Muller<br>Eugene Eric Kim<br>Evan Rocha<br>Evan Shulman<br>Fanboat <br>Fiona Nielsen<br>Florencia Herra Vega<br>FlyingRat <br>Gabriel Barbosa Nunes<br>Gargi Sharma<br>Gary Coulter<br>Gauthier Muguerza<br>Glen E. Ivey<br>Grävling <br>Green <br>Greg <br>Guy Chapman<br>Harry Brisson<br>HI <br>Hilary Fried<br>Hildegard von Bigass<br>Idahosa Ness<br>ikrima <br>IndustrialRobot <br>Ivar Troost<br>Ivo Murrell<br>J C<br>Jacob Christian Munch-Andersen<br>James <br>James Horton<br>Jan Kölling<br>Jared Cosulich<br>Jason Crawford<br>Jay Mitchell<br>Jay Treat<br>jc <br>Jean-Eudes Denis<br>Jesse Bradley<br>Jing Wang<br>Jingfeng Chen<br>Joe Sevits<br>Jonne Harja<br>Joost Gadellaa<br>Joseph Rocca<br>Josh 'Cheeseness' Bush<br>Josh Koenig<br>Joshua Horowitz<br>Joy Buolamwini<br>k3taminee<br>Kailys <br>Kalu <br>Karen Cooper<br>Kate Fractal<br>Kelly Reed<br>Kelvin Nishikawa<br>Kendra Lockman<br>Kevin Richardson<br>Kevin Simler<br>Kevin Zollman<br>KevinDeLand <br>Kien <br>Kimberly Lammi<br>Kwame Thomison<br>Kyle Buswell<br>Kyle Studstill<br>labratross <br>Landy Manderson<br>Laura <br>Laura Baldwin<br>Laurent COOPER<br>Lee Berman<br>Leopard Dan<br>Liyi Zhang<br>Lucas Garron<br>Lukas Peyer<br>Lydia Choy<br>M <br>Malte <br>Manuel Kueblboeck<br>Marc Cohen<br>Marc Marasco<br>Marguerite Dibble<br>Mark Guzdial<br>marko <br>Mary Bush<br>Mary C.<br>Matt Hughes<br>Matthew Campbell<br>Maura Dawes<br>Maxim Sidorov<br>Mercury Legba<br>Michael Donatz<br>Michael Handler<br>Michael Huff<br>Michael Slade<br>Michal Takáč<br>Mikayla <br>Mikey <br>Mikkel Snyder<br>Naomi Alderman<br>Nat Alison<br>Natalie Rothfels<br>Natalie Sun<br>Nelson Crespo<br>Nguyet Vuong<br>Nigel Kerr<br>Nikhil Harithas<br>Nikita Vasilyev<br>Nimrod Kimhi<br>Noah Richards<br>Orb Li<br>Pablo Molins<br>Patrick Henderson<br>Paul d'Aoust<br>Paul Sztajer<br>Phil Dougherty<br>Philip White<br>Pierre Thierry<br>Pixl Pixl<br>postmillenial <br>Przemek Piotrowski<br>Rachél Bazelais<br>Rae McIntosh<br>Rafael F.Font<br>Ralph Pantozzi<br>raspbeguy <br>Raymond Keller<br>Rebecca Thomas<br>Reed Copperstrand<br>Ridima Ramesh<br>Rob Howard<br>Rob McKaughan<br>Robert Aran<br>Robert Cobb<br>Robert Duncan<br>Rohit Bhat<br>Ruby Moore<br>S Smith<br>saianne <br>Sara Ness<br>Sasha Fenn<br>Scott Reynolds<br>Sean Riley<br>Sergey Dolgov<br>Shreeya Goel<br>Simon <br>Simon Morrow<br>slow.danger<br>Smarter Every Day<br>Sofia Razón<br>Soraya Een Hajji<br>Sorden <br>Srini Kadamati<br>Steve Cha<br>Steve Ryman<br>Steve Waldman<br>Stewart Burrows Brand<br>Stian Soltvedt<br>Stuart <br>Sylvain Francis<br>T <br>Tal Rotbart<br>Tamir Bahar<br>Thais Weiller<br>Thember <br>Tobias Rose-Stockwell<br>toby schachman<br>Todd Siegel<br>Tom Lieber<br>Tommy Maranges<br>Toph Tucker<br>Tyler Coleman<br>Victor Debrus<br>Vlad Dziuba<br>Vladimir <br>Wait But Why<br>Wesley Gardner<br>what's for dinner<br>Will Dayble<br>William B Everett<br>Wouter <br>Yan Naung Oak<br>Yohan Dash<br>Yu-Han Kuo<br>Zach Smith<br>Zan Armstrong<br>Zener <br>zubr kabbi<br>김슬<br>🐸
+		</div>
+
+		<br><br>
+
+		Und ein <i>riesiges</i> Dankeschön an diese Menschen für das Ausprobieren und Korrekturlesen:
+		Alex Kreitzberg,
+		Amit Patel,
+		EmilyKate McDonough,
+		Emma Hodcroft,
+		Evan Rocha,
+		Gillian Tarr,
+		Grävling,
+		Kayle Sawyer,
+		Michael Huff,
+		Phil Dougherty,
+		Philipp Wacker,
+		Ridima Ramesh,
+		Sofia Razón,
+		Srini Kadamati,
+		Vi Hart
+
+		<br><br>
+
+		Alle noch vorhandenen Fehler sind wahrscheinlich Nickys Schuld.
+
+	</div>
+
+</div>
+
+<div id="footnotes_container">
+	<h2 id='show_feetnotes_button'>(klicken Sie hier, um alle Quellen anzuzeigen)</h2>
+	<h2 id='shown_feetnotes'>Quellenangaben:</h2-->
+</div>
+
+<div id="wash">
+	Waschen Sie Ihre Hände! 👏
+</div>
+
+
+</body>
+
+<script src="js/blerp.js"></script>
+<script src="js/littlefoot.js"></script>
+<script>
+littlefoot.littlefoot({
+	buttonTemplate:`
+	<button
+	  aria-controls="fncontent:<% id %>"
+	  aria-expanded="false"
+	  aria-label="Quelle <% number %>"
+	  class="littlefoot-footnote__button"
+	  id="<% reference %>"
+	  rel="footnote"
+	  title="siehe Quelle <% number %>"
+	/>
+	  <% number %>
+	</button>
+	`
+});
+</script>
+
+</html>