Initial commit
This commit is contained in:
commit
82005f45cd
28 changed files with 595 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
bilder
|
||||||
12
README.md
Normal file
12
README.md
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
# Kleines Büro Graz
|
||||||
|
|
||||||
|
Website des Kulturvereins "Kleines Büro Graz"
|
||||||
|
|
||||||
|
## Farben
|
||||||
|
|
||||||
|
see https://colorhunt.co/palette/78b3cec9e6f0fbf8eff96e2a
|
||||||
|
|
||||||
|
* #78B3CE
|
||||||
|
* #C9E6F0
|
||||||
|
* #FBF8EF
|
||||||
|
* #F96E2A
|
||||||
81
htdocs/alfabeth.js
Normal file
81
htdocs/alfabeth.js
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
// [[], []],
|
||||||
|
const alphabet = {
|
||||||
|
" ": [],
|
||||||
|
"A": [
|
||||||
|
[[1.5, 1], [1, 2]],
|
||||||
|
[[1.5, 1], [2, 2]],
|
||||||
|
[[1, 2], [2, 2]],
|
||||||
|
[[1, 2], [1, 3]],
|
||||||
|
[[2, 2], [2, 3]],
|
||||||
|
],
|
||||||
|
"B": [
|
||||||
|
[[1, 1], [1, 3]],
|
||||||
|
[[1, 1], [2, 1.2]],
|
||||||
|
[[1, 2], [2, 2]],
|
||||||
|
[[1, 3], [2, 2.8]],
|
||||||
|
[[2, 1.2], [2, 2.8]],
|
||||||
|
|
||||||
|
],
|
||||||
|
"C": [
|
||||||
|
[[1, 1], [2, 1]],
|
||||||
|
[[1, 1], [1, 3]],
|
||||||
|
[[1, 3], [2, 3]],
|
||||||
|
],
|
||||||
|
"D": [
|
||||||
|
[[1, 1], [1, 3]],
|
||||||
|
[[1, 1], [1.5, 1]],
|
||||||
|
[[1, 3], [1.5, 3]],
|
||||||
|
[[1.5, 1], [2, 1.5]],
|
||||||
|
[[1.5, 3], [2, 2.5]],
|
||||||
|
[[2, 1.5], [2, 2.5]],
|
||||||
|
],
|
||||||
|
"F": [
|
||||||
|
[[1, 1], [1, 3]],
|
||||||
|
[[1, 1], [2, 1]],
|
||||||
|
[[1, 2], [1.5, 2]],
|
||||||
|
],
|
||||||
|
"E": [
|
||||||
|
[[1, 1], [1, 3]],
|
||||||
|
[[1, 1], [2, 1]],
|
||||||
|
[[1, 2], [2, 2]],
|
||||||
|
[[1, 3], [2, 3]]],
|
||||||
|
"K": [
|
||||||
|
[[1, 1], [1, 3]],
|
||||||
|
[[1, 2], [2, 1]],
|
||||||
|
[[1, 2], [2, 3]]],
|
||||||
|
|
||||||
|
"L": [
|
||||||
|
[[1, 1], [1, 3]],
|
||||||
|
[[1, 3], [2, 3]]],
|
||||||
|
|
||||||
|
"I": [
|
||||||
|
[[1, 1], [1, 3]]
|
||||||
|
],
|
||||||
|
"N": [
|
||||||
|
[[1, 1], [1, 3]],
|
||||||
|
[[1, 1], [2, 3]],
|
||||||
|
[[2, 1], [2, 3]]],
|
||||||
|
"S": [
|
||||||
|
[[1, 1], [2, 1]],
|
||||||
|
[[1, 1], [1, 2]],
|
||||||
|
[[1, 2], [2, 2]],
|
||||||
|
[[2, 2], [2, 3]],
|
||||||
|
[[2, 3], [1, 3]]],
|
||||||
|
"Ü": [
|
||||||
|
[[1, 1], [1, 3]],
|
||||||
|
[[1, 3], [2, 3]],
|
||||||
|
[[2, 3], [2, 1]],
|
||||||
|
[[1, 0.5], [1, 0.8]],
|
||||||
|
[[2, 0.5], [2, 0.8]]],
|
||||||
|
"R": [
|
||||||
|
[[1, 1], [1, 3]],
|
||||||
|
[[1, 1], [2, 1]],
|
||||||
|
[[2, 1], [2, 2]],
|
||||||
|
[[2, 2], [1, 2]],
|
||||||
|
[[1, 2], [2, 3]]],
|
||||||
|
"O": [
|
||||||
|
[[1, 1], [1, 3]],
|
||||||
|
[[1, 1], [2, 1]],
|
||||||
|
[[1, 3], [2, 3]],
|
||||||
|
[[2, 1], [2, 3]]],
|
||||||
|
}
|
||||||
BIN
htdocs/favicon.png
Normal file
BIN
htdocs/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 B |
BIN
htdocs/img/waszaehltbistdu/1.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
htdocs/img/waszaehltbistdu/10.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
htdocs/img/waszaehltbistdu/11.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/11.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
BIN
htdocs/img/waszaehltbistdu/12.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/12.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
BIN
htdocs/img/waszaehltbistdu/13.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/13.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
htdocs/img/waszaehltbistdu/14.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/14.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
htdocs/img/waszaehltbistdu/15.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/15.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
htdocs/img/waszaehltbistdu/2.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
htdocs/img/waszaehltbistdu/3.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
htdocs/img/waszaehltbistdu/4.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
htdocs/img/waszaehltbistdu/5.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
htdocs/img/waszaehltbistdu/6.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
htdocs/img/waszaehltbistdu/7.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
BIN
htdocs/img/waszaehltbistdu/8.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
htdocs/img/waszaehltbistdu/9.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
Binary file not shown.
BIN
htdocs/img/waszaehltbistdu/book-1.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/book-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
BIN
htdocs/img/waszaehltbistdu/book-2.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/book-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
BIN
htdocs/img/waszaehltbistdu/book-3.jpg
Normal file
BIN
htdocs/img/waszaehltbistdu/book-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
89
htdocs/impressum.html
Normal file
89
htdocs/impressum.html
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>kleines • büro | graz | kunst • verein</title>
|
||||||
|
<script src="alfabeth.js" type="text/javascript"></script>
|
||||||
|
<script src="kleinesbuero.js" type="text/javascript"></script>
|
||||||
|
<link href="kleinesbuero.css" rel="stylesheet">
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div style="background-color: var(--contrast);">
|
||||||
|
<div class="content">
|
||||||
|
<canvas id="header" width="400" height="100" alt="Kleines Büro"></canvas>
|
||||||
|
<nav>
|
||||||
|
<a href="/index.html">Zurück zur Hauptseite</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="impressum">
|
||||||
|
<div class="content">
|
||||||
|
<h2>Impressum, Offenlegung</h2>
|
||||||
|
<p>
|
||||||
|
Medieninhaber:<br>
|
||||||
|
Kulturverein Kleines Büro<br>
|
||||||
|
Körösistraße 5/2<br>
|
||||||
|
8010 Graz<br>
|
||||||
|
<a href="mailto:kleinesbuerograz@gmail.com">kleinesbuerograz@gmail.com</a><br>
|
||||||
|
kleinesburero.at; kleinesbuero.org
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Rechtsform: Verein (ZVR: 1992767384)</p>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Zweck des Vereins:<br>
|
||||||
|
Der Verein ist nicht auf Gewinn ausgerichtet und verfolgt ausschließlich und unmittelbar gemeinnützige
|
||||||
|
Zwecke im Sinne der §§ 34ff BAO: Förderung von Kunst und Kultur für alle Menschen (europaweit)<br>
|
||||||
|
-Durchführung kultureller Veranstaltungen: Theater, Lesungen, Konzerte, Ausstellungen<br>
|
||||||
|
-Vorträge und Versammlungen, Exkursionen, Diskussionsabende<br>
|
||||||
|
-Herausgabe von (periodischen) Publikationen: Produktion, Herausgabe, Verlag und Vertrieb von
|
||||||
|
Publikationen, Medien und Medieninhalten<br>
|
||||||
|
-Produktion von Tonträgern, Katalogen und Infomaterial über Künstler:innen<br>
|
||||||
|
-Veranstaltung von Workshop und Seminaren<br>
|
||||||
|
-Öffentlichkeitsarbeit und Dokumentation<br>
|
||||||
|
Der Verein ist berechtigt, sich weisungsgebundener Erfüllungsgehilf:innen zu bedienen, sofern auf diese
|
||||||
|
Weise der Vereinszweck besser erreicht werden kann. Der Verein kann auch für andere als
|
||||||
|
Erfüllungsgehilfe tätig werden, sofern dadurch der Vereinszweck besser erreicht werden kann.</p>
|
||||||
|
|
||||||
|
<p>Jedes Mitglied des Leitungsorgans ist berechtigt, den Verein nach außen zu vertreten (Einzelvertretung).
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Erklärung über die grundlegende Richtung:<br>
|
||||||
|
Diese Website dient der Information und Servicierung der Vereinsmitglieder sowie der interessierten
|
||||||
|
Öffentlichkeit</p>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Disclaimer und Offenlegung lt. § 25 Mediengesetz:<br>
|
||||||
|
Eine Haftung oder Garantie für die Aktualität, Richtigkeit und Vollständigkeit der zur Verfügung
|
||||||
|
gestellten Informationen kann nicht übernommen werden. Für Schäden materieller oder ideeller Art, die
|
||||||
|
durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter
|
||||||
|
und unvollständiger Informationen verursacht wurden, übernimmt der Kulturverein Kleines Büro keine
|
||||||
|
Haftung, außer bei nachweislich vorsätzlichem oder grob fahrlässigem Verschulden. Der Kulturverein
|
||||||
|
Kleines Büro behält es sich vor, Teile des Webangebots oder das gesamte Angebot ohne gesonderte
|
||||||
|
Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig
|
||||||
|
einzustellen. Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte
|
||||||
|
externer Links, die grafisch extra gekennzeichnet sind. Für den Inhalt dieser Seiten sind ausschließlich
|
||||||
|
deren Betreiber*innen verantwortlich. Namentlich gekennzeichnete Artikel und Beiträge müssen nicht
|
||||||
|
unbedingt die Meinung der Betreiber*innen widerspiegeln.</p>
|
||||||
|
|
||||||
|
<p>Vereinsbehörde:<br>
|
||||||
|
Landespolizeidirektion Steiermark, SVA 3</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="content" id="contact">
|
||||||
|
<h2>Kontakt</h2>
|
||||||
|
<div>Kulturverein Kleines Büro • <a
|
||||||
|
href="mailto:kleinesbuerograz@gmail.com">kleinesbuerograz@gmail.com</a> • <a
|
||||||
|
href="/impressum.html">Impressum</a> • © 2024
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
115
htdocs/index.html
Normal file
115
htdocs/index.html
Normal file
|
|
@ -0,0 +1,115 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>kleines • büro | graz | kunst • verein</title>
|
||||||
|
<script src="alfabeth.js" type="text/javascript"></script>
|
||||||
|
<script src="kleinesbuero.js" type="text/javascript"></script>
|
||||||
|
<link href="kleinesbuero.css" rel="stylesheet">
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png" />
|
||||||
|
<script src=" https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js "></script>
|
||||||
|
<link href=" https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css " rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div style="background-color: var(--contrast);">
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<canvas id="header" width="400" height="100" alt="Kleines Büro"></canvas>
|
||||||
|
<nav>
|
||||||
|
<a href="#waszaehltbistdu">Was zählt, bist du</a> | <a href="#werwirsind">Wer wir sind</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="waszaehltbistdu">
|
||||||
|
<div class="content">
|
||||||
|
<h2>Was zählt, bist du</h2>
|
||||||
|
|
||||||
|
<div id="waszaehltbistdu_images">
|
||||||
|
<section class="splide" aria-label="Was zählt bist du - Bilder und Video">
|
||||||
|
<div class="splide__track">
|
||||||
|
<ul class="splide__list">
|
||||||
|
<li class="splide__slide"><iframe width="100%" height="512"
|
||||||
|
src="https://www.youtube.com/embed/7tvy22OOifo"
|
||||||
|
title="WAS ZÄHLT, BIST DU Erzähl-/Musik-/Tanz-Theater für alle ab 3 Jahren"
|
||||||
|
frameborder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/1.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/2.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/3.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/4.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/5.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/6.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/7.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/8.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/9.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/10.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/11.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/12.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/13.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/14.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/15.jpg"></li>
|
||||||
|
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/book-1.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/book-2.jpg"></li>
|
||||||
|
<li class="splide__slide"><img src="/img/waszaehltbistdu/book-3.jpg"></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p><b>Was zählt, bist du</b></h2>
|
||||||
|
|
||||||
|
<p>Erzähl-/Musik-/Tanz-Theater für alle ab 3 Jahren</p>
|
||||||
|
<p>nach dem gleichnamigen Bilderbuch von Magda Hassan und Raffaela Schöbitz</p>
|
||||||
|
<p>Spür mal, hinter den Bäumen, zwischen den Blättern wartet ein Tier. Es ist groß und stark und
|
||||||
|
ungeheuerlich – ich glaube: Es ist wie ich. Schau mal, ich möchte dir von uns erzählen. Von tanzenden
|
||||||
|
Tatzen. Vom Ausruhen in weichem Fell. Von springenden Punkten. Von dem, wie ich zähle. Und wie ich 1, 2,
|
||||||
|
3, 249 selbst groß und stark und alles sein kann – und du auch.</p>
|
||||||
|
<p>Ein Kind, eine Tänzerin und ein Musiker begegnen auf einer Bühne einem Gepard. Spielerisch, musikalisch,
|
||||||
|
in poetischen Bildern und Sprachen und immer mit Unterstützung der (jungen) Zuschauer:innen erwecken sie
|
||||||
|
Punkt für Punkt das einfühlsame und kunstvoll illustrierte Bilderbuch WAS ZÄHLT, BIST DU von Magda
|
||||||
|
Hassan und Raffaela Schöbitz zum Leben, das 2022 von einer Fachjury als „Eines der schönsten Bücher
|
||||||
|
Österreichs“ ausgezeichnet wurde.</p>
|
||||||
|
|
||||||
|
<p>Regie: Anna Spitzbart<br>
|
||||||
|
Musik und Spiel: Alexander Lainer<br>
|
||||||
|
Tanz/Performance: Anna und Frida Spitzbart<br>
|
||||||
|
Bühnen- und Kostümbild: Lena Winkler-Hermaden<br>
|
||||||
|
Dramaturgische Begleitung: Dagmar Stehring<br>
|
||||||
|
Foto/Technik: Patricia Messina<br>
|
||||||
|
Video: Tobias Pichler<br>
|
||||||
|
Uraufführung am 19. September 2024 im Tanzsaal des Salon Stolz in Graz</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="werwirsind">
|
||||||
|
<div class="content">
|
||||||
|
<h2>Wer wir sind</h2>
|
||||||
|
<p>«Kleines Büro» besteht aus Alexander Lainer (Musik und Schauspiel), Anna Spitzbart (Regie, Tanz- und
|
||||||
|
Theaterpädagogik) und Lena Winkler-Hermaden (Bühnen-, Kostümbild und Organisation).</p>
|
||||||
|
<p>Der im April 2024 gegründete Grazer Kulturverein hat sich die Durchführung von «kleinen», niederschwellig
|
||||||
|
zugänglichen Kulturveranstaltungen groß auf die Fahnen geschrieben. Dazu gehören neben
|
||||||
|
Theateraufführungen für die Kleinsten, Diskussionsveranstaltungen und Workshops in Kindergärten, Schulen
|
||||||
|
oder anderen Einrichtungen.</p>
|
||||||
|
<p>«Kleines Büro» bemüht sich um Publikumsschichten, die von bestehenden Kultureinrichtungen nicht erreicht
|
||||||
|
werden. Die Arbeit der drei Kulturschaffenden mit Bildern, Musik und Tanz machen Theater zugänglich für
|
||||||
|
alle - egal welcher Generation oder aus welchem Sprachraum das Publikum entstammt.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="content" id="contact">
|
||||||
|
<h2>Kontakt</h2>
|
||||||
|
<div>Kulturverein Kleines Büro • <a
|
||||||
|
href="mailto:kleinesbuerograz@gmail.com">kleinesbuerograz@gmail.com</a> • <a
|
||||||
|
href="/impressum.html">Impressum</a> • © 2024
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
82
htdocs/kleinesbuero.css
Normal file
82
htdocs/kleinesbuero.css
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
/**
|
||||||
|
https://colorhunt.co/palette/364f6b3fc1c9f5f5f5fc5185
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #364F6B;
|
||||||
|
--secondary-color: #C9E6F0;
|
||||||
|
--contrast: #F96E2A;
|
||||||
|
--background: #FBF8EF;
|
||||||
|
--text-color: rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
#werwirsind {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
BODY {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
line-height: 150%;
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: var(--background);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
H1, H2, H3, H4, H5, H6 {
|
||||||
|
font-family: Haettenschweiler, 'Arial Narrow Bold', sans-serif;
|
||||||
|
color: var(--contrast);
|
||||||
|
}
|
||||||
|
|
||||||
|
A {
|
||||||
|
color: #364F6B;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px dotted var(--primary-color);
|
||||||
|
border-width: 0px 0px 1px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
FOOTER {
|
||||||
|
/* position: fixed;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
height: 100px;
|
||||||
|
*/
|
||||||
|
height: 100px;
|
||||||
|
background-color: var(--contrast);
|
||||||
|
}
|
||||||
|
|
||||||
|
FOOTER H2 {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 1024px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
NAV {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--secondary-color)
|
||||||
|
}
|
||||||
|
NAV A {
|
||||||
|
color: var(--secondary-color)
|
||||||
|
}
|
||||||
|
|
||||||
|
.splide__slide IMG {
|
||||||
|
max-height: 512px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splide__slide {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#waszaehltbistdu_images {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
padding: 16px 0px;
|
||||||
|
}
|
||||||
215
htdocs/kleinesbuero.js
Normal file
215
htdocs/kleinesbuero.js
Normal file
|
|
@ -0,0 +1,215 @@
|
||||||
|
// import Glide, { Controls, Breakpoints } from '/js/glide.modular.esm'
|
||||||
|
|
||||||
|
class Wiggler {
|
||||||
|
constructor(canvas, target) {
|
||||||
|
console.log("start init")
|
||||||
|
|
||||||
|
this.canvas = canvas;
|
||||||
|
this.ctx = canvas.getContext("2d");
|
||||||
|
this.target = target;
|
||||||
|
|
||||||
|
this.width = this.canvas.width;
|
||||||
|
this.height = this.canvas.height;
|
||||||
|
|
||||||
|
|
||||||
|
// this.initRandom();
|
||||||
|
// this.initCorners();
|
||||||
|
this.current = this.initEdges();
|
||||||
|
}
|
||||||
|
|
||||||
|
initRandom() {
|
||||||
|
return this.target.map(l => {
|
||||||
|
const px = Math.random() * this.width;
|
||||||
|
const py = Math.random() * this.height;
|
||||||
|
const r = Math.PI * 2;
|
||||||
|
const tx = px + Math.cos(r) * 10;
|
||||||
|
const ty = py + Math.sin(r) * 10;
|
||||||
|
|
||||||
|
return [[px, py], [tx, ty]];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
initCorners() {
|
||||||
|
return this.target.map(l => {
|
||||||
|
const px = Math.random() < .5 ? 0 : this.width;
|
||||||
|
const py = Math.random() < .5 ? 0 : this.height;
|
||||||
|
const r = Math.PI * 2;
|
||||||
|
const tx = px + Math.cos(r) * 10;
|
||||||
|
const ty = py + Math.sin(r) * 10;
|
||||||
|
|
||||||
|
return [[px, py], [tx, ty]];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
initEdges() {
|
||||||
|
return this.target.map(() => {
|
||||||
|
var px, py;
|
||||||
|
if (Math.random() < .5) {
|
||||||
|
px = Math.random() < .5 ? 0 : this.width;
|
||||||
|
py = Math.random() * this.height;
|
||||||
|
} else {
|
||||||
|
px = Math.random() * this.width;
|
||||||
|
py = Math.random() < .5 ? 0 : this.height;
|
||||||
|
}
|
||||||
|
return [[px, py], [px, py]];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
start() {
|
||||||
|
console.log("start");
|
||||||
|
if (!this.running) {
|
||||||
|
this.running = true;
|
||||||
|
this.animate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stop() {
|
||||||
|
console.log("stop");
|
||||||
|
if (this.running) {
|
||||||
|
this.running = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
this.running = !this.running;
|
||||||
|
if (this.running) {
|
||||||
|
this.animate();
|
||||||
|
} else {
|
||||||
|
console.log("stop");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
animate() {
|
||||||
|
if (this.running) {
|
||||||
|
this.update();
|
||||||
|
this.draw();
|
||||||
|
window.requestAnimationFrame(() => { this.animate(); })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dist(p1, p2) {
|
||||||
|
const dx = p1[0] - p2[0];
|
||||||
|
const dy = p1[1] - p2[1];
|
||||||
|
return Math.sqrt(dx * dx + dy * dy);
|
||||||
|
}
|
||||||
|
|
||||||
|
mv(d) { return Math.random() * d - (d / 2.0); }
|
||||||
|
|
||||||
|
update() {
|
||||||
|
var changed = false;
|
||||||
|
|
||||||
|
for (var l = 0; l < this.current.length; l++) {
|
||||||
|
for (var p = 0; p < 2; p++) {
|
||||||
|
const cp = this.current[l][p];
|
||||||
|
const tp = this.target[l][p];
|
||||||
|
|
||||||
|
if (this.dist(cp, tp) > .5) {
|
||||||
|
changed = true;
|
||||||
|
const dist = this.dist(cp, tp);
|
||||||
|
var np;
|
||||||
|
var ndist;
|
||||||
|
|
||||||
|
do {
|
||||||
|
const dx = this.mv(Math.sqrt(dist) + 2);
|
||||||
|
const dy = this.mv(Math.sqrt(dist) + 2);
|
||||||
|
np = [cp[0] + dx, cp[1] + dy];
|
||||||
|
ndist = this.dist(np, tp);
|
||||||
|
} while (ndist > dist);
|
||||||
|
|
||||||
|
this.current[l][p] = np;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!changed) {
|
||||||
|
this.running = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
this.fillStyle = "white";
|
||||||
|
this.ctx.clearRect(0, 0, 800, 600);
|
||||||
|
|
||||||
|
this.ctx.strokeStyle = "black";
|
||||||
|
|
||||||
|
this.current.forEach(l => {
|
||||||
|
this.ctx.beginPath();
|
||||||
|
this.ctx.moveTo(l[0][0], l[0][1]);
|
||||||
|
this.ctx.lineTo(l[1][0], l[1][1]);
|
||||||
|
this.ctx.stroke();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
mash() {
|
||||||
|
// randomize completely
|
||||||
|
// this.current = this.current.map(l => l.map(p => [p[0] + Math.random() * 300 - 150, p[1] + Math.random() * 300 - 150]));
|
||||||
|
|
||||||
|
this.current = this.current.map(l => {
|
||||||
|
const px = l[0][0] + this.mv(this.width / 5);
|
||||||
|
const py = l[0][1] + this.mv(this.height / 5);
|
||||||
|
const r = Math.PI * 2;
|
||||||
|
const tx = px + Math.cos(r) * 10;
|
||||||
|
const ty = py + Math.sin(r) * 10;
|
||||||
|
|
||||||
|
return [[px, py], [px, py]];
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!this.running) {
|
||||||
|
this.running = true;
|
||||||
|
this.animate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Array.__prototype
|
||||||
|
|
||||||
|
const textToCoords = (text, scale, alphabet) => {
|
||||||
|
var base = 0;
|
||||||
|
|
||||||
|
var output = Array.from(text).flatMap(c => {
|
||||||
|
const g = alphabet[c].map(l =>
|
||||||
|
l.map(p => [p[0] * scale + base, p[1] * scale])
|
||||||
|
);
|
||||||
|
|
||||||
|
const maxx = alphabet[c].map(l => Math.max(l[0][0], l[1][0]));
|
||||||
|
|
||||||
|
// width of character plus
|
||||||
|
const inc = (Math.max(1, Math.max(...maxx)) + 0.2) * scale;
|
||||||
|
base += inc;
|
||||||
|
|
||||||
|
return g;
|
||||||
|
});
|
||||||
|
|
||||||
|
return output;
|
||||||
|
|
||||||
|
/*
|
||||||
|
for (var i = 0; i < text.length; i++) {
|
||||||
|
const char = text[i];
|
||||||
|
const co = alphabet[char];
|
||||||
|
co.forEach(l => output.push(l.map(p => p.map())));
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
console.log("kleines büro ready ...");
|
||||||
|
|
||||||
|
const canvas = document.getElementById("header");
|
||||||
|
const target = textToCoords("KLEINES BÜRO", 10, alphabet);
|
||||||
|
const wiggler = new Wiggler(canvas, target);
|
||||||
|
|
||||||
|
wiggler.start();
|
||||||
|
|
||||||
|
canvas.addEventListener("click", () => { wiggler.mash(); });
|
||||||
|
|
||||||
|
// document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
// new Glide('.glide').mount({Controls});
|
||||||
|
// new Glide('.glide').mount();
|
||||||
|
// });
|
||||||
|
|
||||||
|
new Splide('.splide', {
|
||||||
|
padding: '5rem',
|
||||||
|
}).mount();
|
||||||
|
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue