grundgerüst der neuen homepage, rekonstrukt der alten neuen homepage

2023-01-26 21:58:13 +01:00 · 2023-01-26 21:58:13 +01:00 · 18278ebdfa
commit 18278ebdfa
31 changed files with 891 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1 @@
+# Readme
--- a/file.go
+++ b/file.go
@ -0,0 +1,16 @@
+package main
+
+import (
+	"io/ioutil"
+	"log"
+)
+
+func file_read(src string) string {
+	content, err := ioutil.ReadFile(src)
+
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	return string(content)
+}
--- a/func.go
+++ b/func.go
@ -0,0 +1,104 @@
+package main
+
+import (
+	"io"
+	"net/http"
+	"strconv"
+	"strings"
+	"time"
+)
+
+func handler() {
+	//Pages
+	http_HandleFunc("home", "./web/pages/home.html", true, "text/html")
+	http_HandleFunc("treff", "./web/pages/treff.html", false, "text/html")
+	http_HandleFunc("events", "./web/pages/events.html", false, "text/html")
+	http_HandleFunc("about", "./web/pages/about.html", false, "text/html")
+
+	http_HandleFunc("kontakt", "./web/pages/kontakt.html", false, "text/html")
+	http_HandleFunc("kontakt/adresse", "./web/pages/kontakt/adresse.html", false, "text/html")
+	http_HandleFunc("kontakt/irc", "./web/pages/kontakt/irc.html", false, "text/html")
+	http_HandleFunc("kontakt/mail", "./web/pages/kontakt/mail.html", false, "text/html")
+	http_HandleFunc("kontakt/tel", "./web/pages/kontakt/tel.html", false, "text/html")
+
+	http_HandleFunc("verein", "./web/pages/verein.html", false, "text/html")
+	http_HandleFunc("support", "./web/pages/support.html", false, "text/html")
+
+	http_HandleFunc("impressum", "./web/pages/impressum.html", false, "text/html")
+	http_HandleFunc("datenschutz", "./web/pages/datenschutz.html", false, "text/html")
+
+	//Styles
+	http_HandleFunc("style/main.css", "./web/styles/main.css", false, "text/css")
+	http_HandleFunc("style/kontakt.css", "./web/styles/kontakt.css", false, "text/css")
+	http_HandleFunc("style/home.css", "./web/styles/home.css", false, "text/css")
+
+	//Images
+	http_HandleFunc("image/logo_ctdo.svg", "./web/images/logo_ctdo.svg", false, "image/svg+xml")
+	http_HandleFunc("image/header.jpg", "./web/images/header.jpg", false, "image/jpeg")
+	http_HandleFunc("image/adresse_knopf.webp", "./web/images/adresse_knopf.webp", false, "image/webp")
+	http_HandleFunc("image/chat_knopf.webp", "./web/images/chat_knopf.webp", false, "image/webp")
+	http_HandleFunc("image/mail_knopf.webp", "./web/images/mail_knopf.webp", false, "image/webp")
+	http_HandleFunc("image/tel_knopf.webp", "./web/images/tel_knopf.webp", false, "image/webp")
+}
+
+func getPages() [][]string {
+	output := [][]string{}
+
+	output = append(output, []string{"home", "/home"})
+	output = append(output, []string{"zeiten & location", "/treff"})
+	output = append(output, []string{"events", "/events"})
+	output = append(output, []string{"über uns", "/about"})
+	output = append(output, []string{"kontakt", "/kontakt"})
+	output = append(output, []string{"verein", "/verein"})
+	output = append(output, []string{"unterstützung", "/support"})
+
+	return output
+}
+
+func getFooterPages() [][]string {
+	output := [][]string{}
+
+	output = append(output, []string{"impressum", "/impressum"})
+	output = append(output, []string{"datenschutzerklärung", "/datenschutz"})
+
+	return output
+}
+
+func getRoomState() status {
+	c := &http.Client{Timeout: 10 * time.Second}
+	r, err := c.Get("https://status.ctdo.de/api/simple/v2")
+	if err != nil {
+		panic(err)
+	}
+	defer r.Body.Close()
+
+	body, _err := io.ReadAll(r.Body)
+	if _err != nil {
+		panic(_err)
+	}
+
+	bodyString := string(body)
+
+	temp := []string{}
+
+	bodyString = strings.ReplaceAll(bodyString, "{", "")
+	bodyString = strings.ReplaceAll(bodyString, "}", "")
+
+	_temp := strings.Split(bodyString, ",")
+
+	for _, element := range _temp {
+		__temp := strings.Split(element, ":")
+		temp = append(temp, __temp[1])
+	}
+
+	roomState := new(status)
+
+	roomState.state = temp[0] == "true"
+	var __err error
+	roomState.power, __err = strconv.ParseInt(temp[2], 0, 64)
+	if __err != nil {
+		panic(__err)
+	}
+
+	return *roomState
+}
--- a/go.mod
+++ b/go.mod
@ -0,0 +1,3 @@
+module xoy.dev/ctdo
+
+go 1.19
--- a/html.go
+++ b/html.go
@ -0,0 +1,44 @@
+package main
+
+import "strings"
+
+func html_Element(tag string, innerHTML string, args string) string {
+	return "<" + tag + " " + args + ">" + innerHTML + "</" + tag + ">"
+}
+
+func html_LinkElement(innerHTML string, destination string, blank bool, args string) string {
+	b := ""
+	if blank {
+		b = "target=\"_blank\""
+	}
+
+	return html_Element("a", innerHTML, " href=\""+destination+"\" "+b)
+}
+
+func html_InputElement(name string, _type string, value string, args string) string {
+	return "<input name=\"" + name + "\" type=\"" + _type + "\" value=\"" + value + "\" " + args + ">"
+}
+
+func html_Nav(pages [][]string) string {
+	output := ""
+
+	for _, page := range pages {
+		output += html_Element("li", html_LinkElement(page[0], page[1], false, ""), "")
+	}
+
+	return html_Element("nav", html_Element("ul", output, ""), "")
+}
+
+func html_replacer(input string) string {
+	output := strings.ReplaceAll(input, "!NAV", html_Nav(getPages()))
+
+	if getRoomState().state {
+		output = strings.ReplaceAll(output, "!RAUMSTATUS", "<p>Raumstatus: <b class=\"green-text\">offen</b></p>")
+	} else {
+		output = strings.ReplaceAll(output, "!RAUMSTATUS", "<p>Raumstatus: <b class=\"red-text\">geschlossen</b></p>")
+	}
+
+	output = strings.ReplaceAll(output, "!FOOTERNAV", html_Nav(getFooterPages()))
+
+	return output
+}
--- a/http.go
+++ b/http.go
@ -0,0 +1,46 @@
+package main
+
+import (
+	"errors"
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+)
+
+func http_HandleFunc(url_path string, filepath string, is_mainpage bool, content_type string) {
+	if is_mainpage {
+		http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+			w.Header().Add("Content-Type", content_type)
+			io.WriteString(w, html_replacer(file_read(filepath)))
+		})
+	} else {
+		s := new(submit)
+		s.data = "null"
+		http.HandleFunc("/"+url_path, func(w http.ResponseWriter, r *http.Request) {
+			if r.Method == "POST" {
+				if err := r.ParseForm(); err != nil {
+					fmt.Fprintf(w, "ParseForm() err: %v", err)
+					return
+				}
+			}
+
+			w.Header().Add("Content-Type", content_type)
+
+			io.WriteString(w, html_replacer(file_read(filepath)))
+		})
+	}
+}
+
+func http_start(address string) { // address could be = ":8080"
+	handler()
+
+	err := http.ListenAndServe(address, nil)
+
+	if errors.Is(err, http.ErrServerClosed) {
+		fmt.Printf("server closed\n")
+	} else if err != nil {
+		fmt.Printf("error starting server: %s\n", err)
+		os.Exit(1)
+	}
+}
--- a/main.go
+++ b/main.go
@ -0,0 +1,5 @@
+package main
+
+func main() {
+	http_start(":80")
+}
--- a/structs.go
+++ b/structs.go
@ -0,0 +1,11 @@
+package main
+
+type submit struct {
+	data string
+}
+
+type status struct {
+	state      bool
+	lastchange int64
+	power      int64
+}
--- a/web/.DS_Store
+++ b/web/.DS_Store
--- a/web/images/adresse_knopf.webp
+++ b/web/images/adresse_knopf.webp
--- a/web/images/chat_knopf.webp
+++ b/web/images/chat_knopf.webp
--- a/web/images/header.jpg
+++ b/web/images/header.jpg
--- a/web/images/logo_ctdo.svg
+++ b/web/images/logo_ctdo.svg
--- a/web/images/mail_knopf.webp
+++ b/web/images/mail_knopf.webp
--- a/web/images/tel_knopf.webp
+++ b/web/images/tel_knopf.webp
--- a/web/pages/about.html
+++ b/web/pages/about.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - über uns</title>
+        <link rel="stylesheet" href="/style/main.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            !RAUMSTATUS
+            
+            <h1>Wer wir sind</h1>
+            <p>
+                Der Chaostreff Dortmund e.V. ist ein Erfa-Kreis des CCC* und eine bunt gemischte Gruppe aus computer-, technikbegeisterten und kreativen Menschen. Wir sind nicht finanziell orientiert und betreiben den Chaostreff aus Spaß an der Sache und um interessierten Menschen eine Plattform zu bieten, über die man sich austauschen kann. Unser Ziel ist es den Chaostreff fortwährend aus Spenden der einzelnen Teilnehmenden bzw. Mitglieder zu finanzieren. Wenn du dir angucken möchtest, wie das so bei uns in den Räumen aussieht, dann komm doch einfach vorbei.
+                <br>
+                Wir schließen niemanden aufgrund körperlicher Disposition, Religion, Alter, Weltanschauung, sexueller Ausrichtung oder sonstigen nichtigen Gründen aus! Alle, die interessiert sind, sind auch bei uns willkommen.
+                <br>
+                *Wir sind ein Teil des Chaos Computer Club (CCC), ein s. g. Erfa Kreis (Erfahrungsaustausch Kreis), da wir seit 2017-04-16¹ den Erfa Status vom Regiotreff zuerkannt bekommen haben.
+            </p>
+
+            <h1>Unsere Ziele</h1>
+            <ul><li>Schaffung einer Plattform für technikbegeisterte Menschen</li><li>Bereitstellung einer technischen Infrastruktur</li><li>Gemütliche Räumlichkeiten mit Getränken etc.</li><li>Die Möglichkeit, gemeinsam kreativ mit Technik umzugehen</li><li>Nützliches Mitglied des Nordstadtquartiers zu sein</li><li>Sich und andere weiterzubilden</li><li>Weltherrschaft natürlich!²</li></ul>
+
+            <h1>Unsere Zielgruppe</h1>
+            <p>
+                Alle, die sich für Technik, Kunst, Kreativität, OpenSource, Netzpolitik, den Geist in der Maschine oder ähnliches begeistern können; wie bereits oben erwähnt schließen wir niemanden aus irgendwelchen dämlichen/rassistischen/vorurteilsbehafteten Gründen aus.
+                <br>
+                Wir freuen uns schon auf deinen ersten Besuch bei uns.
+            </p>
+
+            <h1>Wir bieten dir</h1>
+            <ul><li>Viel Platz für eigene Projekte</li><li>Chillout Platz mit Sofas und gemütlicher Atmosphäre</li><li>Eine Küche zum gemeinsamen Kochen</li><li>Einen Raum für Siebdruck und Platinenherstellung</li><li>Maschinen wie Lasercutter, Stickmaschine, 3D Drucker</li><li>Werkzeuge, sowie Lötarbeitsplätze und Messgeräte</li><li>PC-Arbeitsplätze</li><li>Email/Shell Konten und Webspace oder VServer</li><li>Kisten/Regale damit du dein Zeug verstauen kannst</li><li>Freundliche Leute mit denen man sich austauschen kann</li><li>u.v.m</li></ul>
+
+            <h1>Du gehörst nicht zu uns, wenn…</h1>
+            <ul><li>…du einen 24/7 kostenlosen PC-Hilfe Notdienst suchst.</li><li>…deine Festplatte kaputt ist, und du vergessen hast, ein Backup zu machen. (Ausnahmen bestätigen die Regel)</li><li>…du der Meinung bist, wir wären dein kostenloses Internetcafé</li><li>…du der irrigen Annahme verfallen bist, wir würden für dich irgendeinen FTP-/WebServer/eMail-Account-deiner-ExFreundin hacken, geschweige denn dir dabei helfen</li></ul>
+
+            <p>
+                ¹ <a href="https://en.wikipedia.org/wiki/ISO_8601">https://en.wikipedia.org/wiki/ISO_8601</a>
+                ² Dies ist eine witzige Bemerkung ein s.g. “Running Gag” und ist als sarkastische Bemerkung zu verstehen!
+            </p>
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/pages/datenschutz.html
+++ b/web/pages/datenschutz.html
--- a/web/pages/events.html
+++ b/web/pages/events.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - events</title>
+        <link rel="stylesheet" href="/style/main.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            !RAUMSTATUS
+            
+            <h1>Events</h1>
+            !TOPICTREFF
+            !EVENTS
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/pages/home.html
+++ b/web/pages/home.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - home</title>
+        <link rel="stylesheet" href="/style/main.css">
+        <link rel="stylesheet" href="/style/home.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            <img src="/image/header.jpg" alt="Raum 2 mit gemütlichen Sofas">
+            !RAUMSTATUS
+
+            <h2>Hi</h2>
+            <p>
+                Wir sind eine bunt gemischte Gruppe aus computer-, technikbegeisterten und kreativen Menschen. Wir betreiben den Chaostreff aus Spaß an der Sache und um interessierten Menschen eine Plattform zu bieten, über die man sich austauschen kann.
+                <br>
+                Wenn du Lust hast dir das mal anzuschauen, dann komm gerne vorbei. <a href="/treff">zeiten & location</a>
+                <br>
+                Egal wer du bist, egal was du machst bei uns sind alle Menschen willkommen. Leider sind unsere Räume aktuell nicht barrierefrei.
+                Falls du Fragen hast schreibe uns an. <a href="/kontakt">kontakt</a>
+                <br>
+                Wenn du mehr über uns wissen möchtest, schau hier: <a href="/about">über uns</a>
+            </p>
+
+            <h2>Die nächsten Events</h2>
+            <p>Es sind gerade keine besonderen Veranstaltungen geplant.</p>
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/pages/impressum.html
+++ b/web/pages/impressum.html
@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - impressum</title>
+        <link rel="stylesheet" href="/style/main.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            <h2>Impressum</h2>
+            <h3>Postanschrift</h3>
+            <p>
+                Chaostreff Dortmund e.V. <br>
+                Braunschweiger Str. 22 <br>
+                44145 Dortmund <br>
+                Deutschland <br>
+                <br>
+                Vertretungsberechtigter Vorstand <br>
+                <ul><li>Tim Windelschmidt (1. Vorsitzender)</li><li>Stefan Hausschild (2. Vorsitzender)</li><li>Jan Münch (Kassenwart)</li></ul>
+            </p>
+
+            <h3>E-Mail</h3>
+            <ul><li>Presseanfragen bitte per E-Mail an unsere Pressestelle <a href="mailto:presse@chaostreff-dortmund.de">presse@chaostreff-dortmund.de</a></li><li>Netz-Missbrauch Meldungen an die abuse-addresse <a href="mailto:abuse@chaostreff-dortmund.de">abuse@chaostreff-dortmund.de</a></li><li>Anfragen bezüglich inhaltlicher Gestaltung bitte per E-Mail an den Webmaster <a href="mailto:webmaster@chaostreff-dortmund.de">webmaster@chaostreff-dortmund.de</a></li><li>Technischer Kontakt: <a href="mailto:postmaster@chaostreff-dortmund.de">postmaster@chaostreff-dortmund.de</a></li></ul>
+            
+            <h3>Telefon</h3>
+            <ul><li>Chaos-Raum (Di+Do ab ca 19Uhr): <a href="tel:+492318404777">+49 (0)231 8 404 777</a></li><li>Fax: +49 (0)231 8 404 779</li></ul>
+
+            <h3>Kontodaten</h3>
+            <p>
+                Empfänger: Chaostreff Dortmund e.V. <br>
+                IBAN: DE19 4306 0967 4009 3686 00 <br>
+                BIC: GENODEM1GLS
+            </p>
+
+            <h3>Logo</h3>
+            <p>Unser Logo für die Verarbeitung in redaktionellen Inhalten und sonstigen Presse-Erzeugnissen findet Ihr <a href="https://www.chaostreff-dortmund.de/presse/logo">hier</a></p>
+
+            <h3>Flyer</h3>
+            <p>Unseren Aktuellen Fyler als PDF gibt es <a href="https://www.chaostreff-dortmund.de/presse/flyer/">hier</a></p>
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/pages/kontakt.html
+++ b/web/pages/kontakt.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - home</title>
+        <link rel="stylesheet" href="/style/main.css">
+        <link rel="stylesheet" href="/style/kontakt.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            <a href="/kontakt/irc">
+                <img src="/image/chat_knopf.webp" alt="irc">
+            </a>
+            <a href="/kontakt/mail">
+                <img src="/image/mail_knopf.webp" alt="email">
+            </a>
+            <br>
+            <a href="/kontakt/tel">
+                <img src="/image/tel_knopf.webp" alt="tel">
+            </a>
+            <a href="/kontakt/adresse">
+                <img src="/image/adresse_knopf.webp" alt="adresse">
+            </a>
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/pages/kontakt/adresse.html
+++ b/web/pages/kontakt/adresse.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - adresse</title>
+        <link rel="stylesheet" href="/style/main.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            <a href="/kontakt">Zurück</a>
+
+            <h2>Adresse</h2>
+            <p>
+                Chaostreff Dortmund e.V. <br>
+                Braunschweiger Str. 22 <br>
+                44145 Dortmund <br>
+                Deutschland
+            </p>
+
+            <iframe scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=7.463200986385346%2C51.52693021432671%2C7.4667415022850046%2C51.52841869497588&amp;layer=mapnik&amp;marker=51.52767446073405%2C7.464971244335175" style="border: 1px solid black;" width="425" height="350" frameborder="0"></iframe>
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/pages/kontakt/irc.html
+++ b/web/pages/kontakt/irc.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - irc</title>
+        <link rel="stylesheet" href="/style/main.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            <a href="/kontakt">Zurück</a>
+
+            <h2>IRC</h2>
+            <p>
+                Wir sind im Hackint IRC-Netzwerk erreichbar, der Server ist <b>irc.hackint.org</b> (SSL Port <b>6697</b>), Channel <b>#ccc.do</b>.
+                <br>
+                Um Missverständnisse und böses Blut zu vermeiden, hier mal reinschauen:
+                <br>
+                <a href="https://tools.ietf.org/html/rfc1855">RFC-1855</a>, <a href="https://tools.ietf.org/html/rfc2811">RFC-2811</a>
+            </p>
+
+            <h3>Warum Hackint</h3>
+            <p>Das Hackint-Netzwerk wurde unter anderem vom Chaostreff Dortmund ins Leben gerufen, um eine einfache und trotzdem sichere Kommunikation zu ermöglichen. Um das zu gewährleisten sind alle Server-Verbindungen verschlüsselt und alle Server ermöglichen den Benutzern eine verschlüsselte Verbindung via SSL aufzubauen. Eines der Ziele des Hackints ist es, eine Heimat für Hacker, Haecksen und ähnliche Leute auf der ganzen Welt zu schaffen und einfache Verbindungen zwischen einzelnen Gruppen zu ermöglichen. Damit das klappt, müssen sich möglichst viele chaosnahe Gruppen in diesem Netz anfinden.</p>
+
+            <h3>Anleitung für des IRCens Unkundige</h3>
+            <h4>Einen IRC-Client suchen</h4>
+            <p>
+                Unix/Linux-nutzende können <a href="https://hexchat.github.io/">HexChat</a> benutzen, oder, für das CLI-Feeling weechat oder irssi.
+                <br>
+                Windows-nutzenden ist ebenfalls <a href="https://hexchat.github.io/">HexChat</a> zu empfehlen.
+                <br>
+                todo: Macs
+            </p>
+
+            <h4>Konfiguration von HexChat</h4>
+            <p>
+                Als erstes muss du dir einen Nick-(Spitz-)namen ausdenken. Jede Person hat einen einzigartigen Nick, daher nicht wundern wenn gängige Namen schon vergeben sind. Ein Nick darf maximal 15 Buchstaben/Zahlen lang sein. Sonderzeichen funktionieren zwar, sehen aber komisch aus.
+                <br>
+                Wenn du einen Nick gefunden hast, klick bei den Netzwerken aufs Plus. Dort vergibst du den Namen "hackint" und klickst direkt weiter auf bearbeiten. Statt dem voreingetragenen Server schreib dort irc.hackint.org/6697 hin. Dann wähle den Haken um SSL für alle Server des Netzwerks zu verwenden an. Nur noch die Netzwerkkonfiguration schließen und auf verbinden klicken.
+                <br>
+                Nach dem Verbinden sollte HexChat fragen welchem Channel du joinen möchtest. Gib dort #ccc.do ein und drücke ok.
+                <br>
+                \o/ du kannst uns jetzt Nachrichten schreiben.
+            </p>
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/pages/kontakt/mail.html
+++ b/web/pages/kontakt/mail.html
@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - email</title>
+        <link rel="stylesheet" href="/style/main.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            <a href="/kontakt">Zurück</a>
+
+            <h2>eMail</h2>
+            <p>
+                Wenn du eine einfache Anfrage hast, schreib einfach an unsere Mailingliste (aber schreib bitte dabei, dass du nicht auf der Liste eingetragen bist. Sonst erreichen dich die Antworten möglicherweise nicht). Wenn du dich zum Chaostreff gesellen möchtest, trägst du dich am besten auf der Liste ein.
+                <br>
+                Unsere Mailinglist ist unter <a href="mailto:discuss@lists.chaostreff-dortmund.de">discuss@lists.chaostreff-dortmund.de</a>, diese ist auch unsere öffentliche Mailingliste.
+                <br>
+                Presse: <a href="mailto:presse@chaostreff-dortmund.de">presse@chaostreff-dortmund.de</a> <br>
+                Spenden: <a href="mailto:spenden@chaostreff-dortmund.de"></a>
+            </p>
+
+            <h3>Subscriben/Unsubscriben auf die Mailingliste</h3>
+            <p>Die Mailingliste wird von Mailman gemanaged und ist offen für alle. Subscriben kann man sich auf der Mailingliste, indem man auf die <a href="https://lists.chaostreff-dortmund.de/cgi-bin/mailman/listinfo/discuss">Mailman</a> Seite geht und sich dort einträgt.</p>
+
+            <h3>Was ist so auf der Mailingliste</h3>
+            <p>
+                Alle Chaostreff-Aktivitäten werden (sollten zumindest) über die Mailingliste geplant oder zumindest angekündigt. Wenn man nur wissen möchte, was der Chaostreff gerade so macht, kann man natürlich auch regelmässig auf unsere Webseite gucken. Wenn man wirklich wissen möchte was gerade geht, sollte man sich auf die Mailingliste eintragen. Hier können und werden aktuelle Weltherrschaftspläne geschmiedet¹, Kontakte geschlossen, und auch sonstige, den Chaostreff betreffende, Themen besprochen.
+                <br>
+                ¹ liebes Finanzamt, das ist nur Spaß :)
+                <br>
+                Außerdem findet man alles was für den Chaostreff von Interesse sein könnte und mit dem ein entfernter Bezug zum Chaostreff hergestellt werden kann. Also von Diskussionen zu aktueller Hardware und dem kreativen Umgang damit, über die neuesten Fort- und Rückschritte in aktuellen Gesetzgebungsverfahren und anderen Zeitgeschehen.
+                <br>
+                Grundsätzlich gilt: Die Mailingliste ist nicht readonly und lebt durch eure Postings. Also postet!
+            </p>
+
+            <h3>FAQ</h3>
+
+            <h4>Wer kann die Subscriptions lesen?</h4>
+            <p>Jeder der auf der Liste subscribed ist kann sich die Subscriber-Liste ansehen.</p>
+
+            <h4>Warum kommt meine Mail nicht auf der Mailingliste an?</h4>
+            <p>Damit die Mailingliste nicht als Spam-Multiplexer fungiert, ist sie so konfiguriert, dass alle Mails, die nicht eine auf der Liste eingetragene Mailaddresse im From: Header stehen haben, erstmal zur Moderator Mailingliste weitergeleitet werden. Da auch Moderatoren noch ein anderes Leben haben, kann das dann etwas dauern.</p>
+
+            <h4>Wer sind diese Moderatoren?</h4>
+            <p>Zur Zeit: tarja, fisch und claas</p>
+
+            <h4>Ich habe technische Probleme</h4>
+            <p>Bei technischen Problemen (subscription passt nicht) kann dem Listen-Owner geschrieben werden. Diese/r wird versuchen, dich innerhalb ihrer/seiner Möglichkeiten, nach bestem Wissen und Gewissen, zu unterstützen.</p>
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/pages/kontakt/tel.html
+++ b/web/pages/kontakt/tel.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - telefon</title>
+        <link rel="stylesheet" href="/style/main.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            <a href="/kontakt">Zurück</a>
+
+            <h2>Telefon</h2>
+            <p>Wenn du eher auf Voice-Communication stehst (oder einfach wissen willst, ob jemand im Raum ist), kannst du uns auch anrufen: Es klingelt im Raum, wenn man <a href="tel:+492318404777">+49 (0)231 8 404 777</a> wählt.</p>
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/pages/support.html
+++ b/web/pages/support.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - unterstützung</title>
+        <link rel="stylesheet" href="/style/main.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            <h2>Spenden</h2>
+            <p>Der Chaostreff Dortmund finanziert sich vollkommen aus sich selbst: Das bedeutet aus dem Portemonnaie seiner Mitglieder und oder derer, die den Treff für sinnvoll halten.</p>
+
+            <h2>Wieso und wofür?</h2>
+            <p>Wir haben gewisse Kosten zu decken, dazu gehören die Miete, Kosten für Heizung, Strom und Internet. Letztere Punkte werden durch das positive Klima im Langen August für uns sehr angenehm gehalten. Damit ist jedoch gerade einmal die grundsätzliche Infrastruktur geschaffen. Für Projekte fehlt es dem Treff schon wieder an Geld. Allein die Finanzierung der gemeinsamen Räume basiert Gerüchten zufolge eher auf einer raffinierten Mate-Wiederverkaufsstrategie in Kombination mit einer Ausnutzung der suchterregenden Auswirkungen dieses Getränks. Als groben Richtwert kann man sagen, dass der Spendendurchschnitt irgendwo zwischen 23 und 42 Euro monatlich liegt. An diesem Punkt sei erwähnt dass wir über jede Spende sehr erfreut sind, am liebsten natürlich wenn sie regelmäßig ist. ;)</p>
+
+            <h2>Gerne, wo soll ich unterschreiben?</h2>
+            <p>
+                Empfänger: Chaostreff Dortmund e.V. <br>
+                IBAN: DE19 4306 0967 4009 3686 00 <br>
+                BIC: GENODEM1GLS <br>
+                <br>
+                Der Chaostreff Dortmund ist vom Finanzamt als gemeinnützig anerkannt und deshalb dürfen wir Spendenbescheinigungen ausstellen.
+                <br>
+                <b>Der Chaostreff sagt in jedem Fall schon mal Danke!</b>
+            </p>
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/pages/treff.html
+++ b/web/pages/treff.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - zeiten & location</title>
+        <link rel="stylesheet" href="/style/main.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            !RAUMSTATUS
+
+            <h1>Zeiten</h1>
+            <p>Wir sind für gewöhnlich <b>Dienstags und Donnerstag ab 19:00</b> (±1hr Chaos-Verspätung) im Treff. Bevor du kommst schau einmal nach ob jemand da ist. Das kannst du oben beim Raumstatus sehen.</p>
+
+            <h1>Location</h1>
+            <p>Die Räume sind im <b>Langen August</b>. Wenn du den Langen August gefunden hast, geh durch das erste Tor, dann findest du auf der rechten Seite eine Tür in das Treppenhaus. Da noch zwei Stockwerke hoch, die rechte Tür führt zu uns. Wenn die Türen verschlossen sind, einfach (beim Chaostreff) klingeln.</p>
+        
+            <iframe title="OpenStreetMap zum Langen August" src="https://www.openstreetmap.org/export/embed.html?bbox=7.4632975459098825%2C51.52693355178172%2C7.466703951358796%2C51.5284370503752&amp;layer=mapnik&amp;marker=51.527685307284564%2C7.465000748634338"></iframe>
+
+            <h1>Was wir tun</h1>
+            <p>
+                Von dem gemütlichen Beisammensitzen, über das Fachsimpeln von technischen Themen und das Diskutieren von aktuellen politischen Themen ist eigentlich alles dabei. Bei uns ist viel Raum für eigene Ideen und Projekte. Alle sind dazu eingeladen uns zu besuchen und sich einzubringen.
+                <br>
+                Wir freuen uns sehr über neue Gesichter, egal welchen Alters oder Geschlechts ihr seid. Spezielles Vorwissen über Computer und Technik ist nicht erforderlich.
+                <br>
+                Wir sind bemüht unsere Interessen in Projekten zu organisieren. Du bist herzlich eingeladen mal einen Blick auf diese zu werfen.
+                <br>
+                Einmal im Monat halten Leute im Chaostreff Vorträge über verschiedene Themen technischer und auch nichttechnischer Natur. Informationen darüber findest du unter Events.
+                <br>
+                Jeden ersten Donnerstag und jeden dritten Dienstag im Monat treffen wir uns zum „Topic Treff“ um verschiedene Themen rund um den Chaostreff zu besprechen. Alle sind herzlich eingeladen, Start ist um 20:00 Uhr.
+            </p>
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/pages/verein.html
+++ b/web/pages/verein.html
@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ctdo - verein</title>
+        <link rel="stylesheet" href="/style/main.css">
+    </head>
+    <body>
+        <header>
+            <img src="/image/logo_ctdo.svg" alt="ctdo logo">
+            !NAV
+        </header>
+        <main>
+            <h2>Mitglied werden</h2>
+            <p>
+                Durch deine Mitgliedschaft kannst du dem CTDO direkt deine Unterstützung zukommen lassen. Wenn du uns zu deiner Mitgliedschaft einen freiwilligen Betrag spendest, wird dieser für neue Projekte und die Umsetzung von tollen Ideen verwendet.
+                <br>
+                Du kannst den Mitgliedsantrag <a href="https://www.chaostreff-dortmund.de/wp-content/uploads/2011/07/mitgliedsantrag-2017.pdf">hier</a> herunterladen, ausfüllen, und zum Chaostreff mitbringen.
+                <br>
+                Selbstverständlich kannst du auch im Chaostreff-Dortmund aktiv sein, ohne Mitglied in unserem Verein zu sein. Es erfolgt keine Bestätigung über die Annahme des Mitgliedsantrages. Im Falle einer Ablehnung erfolgt eine Mitteilung.
+            </p>
+
+            <h2>Satzung</h2>
+            <p>
+                Die aktuelle Satzung des Vereins Chaostreff Dortmund e.V. kann stets hier auf unserer Webseite heruntergeladen werden. Darin eventuell referenzierte Anhänge oder Zusatzvereinbarungen, die nicht notwendigerweise Teil der Satzung selbst sind, sind jeweils der Einfachheit halber als ein PDF-Dokument direkt der aktuellen Satzung anhängig.
+                <br>
+                <a href="https://www.chaostreff-dortmund.de/presse/satzung/aktuelle_satzung.pdf">Aktuelle Satzung</a><br>
+                <a href="https://www.chaostreff-dortmund.de/presse/satzung/">Alle Satzungen</a>
+            </p>
+
+            <h2>Gründungsgeschichte</h2>
+            <p>
+                Der Verein wurde als „Trägerverein“ des Chaostreffs im Jahre 2009 gegründet um dem Chaostreff als losen Verbund von Menschen gleicher Interessen eine (solide) rechtliche Grundlage zu geben.
+                <br>
+                Der Wechsel zur Rechtsform des eingetragenen Vereins sollte verschiedene Haftungsprobleme, vor allem finanzieller und mietrechtlicher Natur, aus der Welt schaffen. So lief der Mietvertrag für die Räume des Chaostreffs ursprünglich über eine Einzelperson, ebenso wie die jeweilige Kassenverwaltung die Finanzen über ein privates Konto führte.
+                <br>
+                Erste Diskussionen über den Sinn der Gründung eines Vereins gab es bereits im Jahre 2007, der Prozess kam aber immer wieder zum Stillstand und wurde erst 2009 wieder aufgenommen.
+                <br>
+                Die Gründung gestaltete sich auch deswegen so schwierig, weil unter den Mitgliedern/Besuchenden des Chaostreffs verschiedene Strömungen existierten, deren Standpunkte zur Vereinsgründung unterschiedlicher nicht sein konnten, woraufhin sich manch eine Person gar vollständig aus dem Chaostreff zurückzog.
+                <br>
+                Der Chaostreff teilte sich grob in zwei Lager, von denen das eine die Gründung eines Vereins (u.a. in Furcht vor Vereinsmeierei) vollständig ablehnte. Wohl auch teilweise zu Recht, weil es die Befürchtung gab, dass der Verein unerwünschten Einfluss auf das Konstrukt „Chaostreff“ ausüben könnte, der bis dahin selbstverwaltet, oder etwas überspitzt ausgedrückt, „anarchisch“ daherkam. Das andere Lager betrachtete die Vereinsgründung hingegen als „notwendiges Übel“, weil sich in Sachen Rechtssicherheit keine Alternative offenbarte.
+                <br>
+                Nach der Gründungsversammlung existierte der CTDO längere Zeit als eingetragener Verein „iG“ (in Gründung). Es folgte eine mehrfache Überarbeitung der Satzung, was im wesentlichen der Zusammenarbeit mit dem Finanzamt geschuldet war, in dem Bemühen, als gemeinnützig anerkannt zu werden. 2011-08-05 lag die Satzung schließlich dem Notar vor.
+                <br>
+                Doch durch Umzüge von einigen Gründungsmitgliedern verzögerte sich die Eintragung weiterhin, da noch Unterschriften (u.a. aus dem Ausland) von eben diesen Mitgliedern organisiert werden mussten.
+                <br>
+                Schließlich haben wir es aber geschafft: 2012-02-09 kann als Datum gesehen werden, ab dem sich der Chaostreff Dortmund als eingetragener Verein bezeichnen darf. Einen weiteren Meilenstein erreichten wir etwas später: Das Finanzamt stellte uns die Anerkennung der Gemeinnützigkeit in Aussicht, zu der es noch einer Änderung in der Satzung bedurfte.
+            </p>
+        </main>
+        <footer>
+            !FOOTERNAV
+        </footer>
+    </body>
+</html>
--- a/web/styles/home.css
+++ b/web/styles/home.css
@ -0,0 +1,4 @@
+main img {
+    max-width: 950px;
+    width: 100%;
+}
--- a/web/styles/kontakt.css
+++ b/web/styles/kontakt.css
@ -0,0 +1,16 @@
+main {
+    text-align: center;
+}
+
+main a {
+    display: inline-block;
+    padding: 20px;
+}
+
+main a:hover {
+    text-decoration: none;
+}
+
+main a img {
+    width: 200px;
+}
--- a/web/styles/main.css
+++ b/web/styles/main.css
@ -0,0 +1,105 @@
+:root {
+    --background-color: #193360;
+    --nav-background-color: #14284c;
+    --logo-background-color: #0e1e38;
+
+}
+
+html, body {
+    padding: 0;
+    margin: 0;
+    background-color: var(--background-color);
+    color: white;
+    font-family: sans-serif;
+    line-height: 150%;
+}
+
+a {
+    color: #22bb22 !important;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a:visited {
+    color: #bb66ff !important;
+}
+
+header {
+    background-color: var(--logo-background-color);
+}
+
+nav {
+    background-color: var(--nav-background-color);
+}
+
+nav li a {
+    color: white !important;
+    text-decoration: none;
+}
+
+nav li a.active {
+    text-decoration: underline;
+}
+
+nav li a:visited {
+    color: white !important;
+}
+
+.red-text {
+    color: #DD0000 !important;
+}
+
+.green-text {
+    color: #00DD00 !important;
+}
+
+header {
+    text-align: center;
+    padding: 10px 0 0 0;
+}
+
+header img {
+    max-width: 200px;
+    max-height: 200px;
+    width: 90vw;
+    margin-bottom: 10px;
+}
+
+nav {
+    padding: 10px 0 10px 0;
+}
+
+nav ul {
+    list-style: none;
+    text-align: center;
+}
+
+nav ul li {
+    display: inline-block;
+    padding: 0 2vw 0 2vw;
+    font-size: 125%;
+}
+
+main {
+    max-width: 950px;
+    min-height: 100vh;
+    height: auto;
+    width: 90%;
+    margin: auto;
+}
+
+footer {
+    background-color: var(--nav-background-color);
+    height: 100px;
+}
+
+@media only screen and (max-width: 885px) {
+    nav ul li {
+        display: block;
+        font-size: 200%;
+        padding: 20px 0 20px 0;
+    }
+}