This commit is contained in:
harald.mueller@tbz.ch 2021-07-20 15:58:23 +02:00
parent 061e4db777
commit 701847622a
54 changed files with 0 additions and 1106 deletions

View File

@ -1,23 +0,0 @@
# M152 - Multimedia-Inhalte in Webauftritt integrieren
[> **Modulidentifikation** ](https://cf.ict-berufsbildung.ch/modules.php?name=Mbk&a=20101&cmodnr=152&noheader=1)
[> **Bewertungsraster** ](https://docs.google.com/spreadsheets/d/10biUbNsA-Uf0LPIsZng3Tjh104b-ZDa7TDFd2m1Ph3Q/edit#gid=0 )
- [Ressourcen](./auftraege/x_gitressourcen)
- [Buecher_Skripts_Praesentationen](./auftraege/x_gitressourcen/Buecher_Skripts_Praesentationen)
- [Buecher_Skripts_Praesentationen/Skript](./auftraege/x_gitressourcen/Buecher_Skripts_Praesentationen/Modul_152_Script_3.pdf)
## Aufträge & Übungen
| Tag | Komp. | Nr. | Auftrag, Übung, Thema |
| ---- | ------ | ------ | -------------- |
| 1 | K1 | M152-a | [Webspace buchen und erste Website erstellen](https://gitlab.com/harald.mueller/aktuelle.kurse/-/tree/master/m152/auftraege/a) |
| 2 | K1 | M152-b | [Storytelling, Wireframes, Mockups](https://gitlab.com/harald.mueller/aktuelle.kurse/-/tree/master/m152/auftraege/b) |
| 3 | K1 | M152-c | [Eigener Styleguide definieren/bestimmen und dokumentieren](https://gitlab.com/harald.mueller/aktuelle.kurse/-/tree/master/m152/auftraege/c) |
| 4 | K2 | M152-d | [Urheberrecht](https://gitlab.com/harald.mueller/aktuelle.kurse/-/tree/master/m152/auftraege/d) |
| 4 | K2 | M152-e | [Copyrights und Lizenzen im Internet](https://gitlab.com/harald.mueller/aktuelle.kurse/-/tree/master/m152/auftraege/e) |
| 5 | K2 | M152-f | [DSGVO, Cookie-Warnung, Impressum](https://gitlab.com/harald.mueller/aktuelle.kurse/-/tree/master/m152/auftraege/f) |
| 6 | K3 | M152-g | [Bildformate, Videoformate, Soundformate erstellen und vergleichen](https://gitlab.com/harald.mueller/aktuelle.kurse/-/tree/master/m152/auftraege/g) |
| 7 | K4 | M152-h | [Animationen erstellen (anim-CSS, anim-GIF, SVG, Keyframes, Transitions, Canvas)](https://gitlab.com/harald.mueller/aktuelle.kurse/-/tree/master/m152/auftraege/h) |
| 8 | K5, K6 | M152-i | [Testen / Automatisierung & autom. Formulare ausfüllen](https://gitlab.com/harald.mueller/aktuelle.kurse/-/tree/master/m152/auftraege/i) |
| 9 | K6 | M152-j | [Optimierung, Page speed](https://gitlab.com/harald.mueller/aktuelle.kurse/-/tree/master/m152/auftraege/j) |

View File

@ -1,35 +0,0 @@
# Aufgabe M152-a: Webspace buchen und erste Website erstellen
_**Beginn Ihrer am ende des Moduls abzugebenden Webseite**_
_**Sie können einander helfen, am Schluss haben alle ihre eigene Webseite**_
Zeitbedarf: für 1.) - 5.) ca. 45 min (wenn alles gut geht), sonst vielleicht 90 min. Für den Rest mindestens 120 min (zieht sich über die ganze Dauer des Modules)
1.) Buchen Sie bei (z.B.) https://www.bplaced.net/freestyle, oder bei einem ähnlichen Gratis-Proider, Ihre eigene Subdomain (Angebot "freestyle" bei bplaced.net für EUR 0.--) und nennen Sie Ihr Account "*vornamenachname*", damit Ihr Webspace dann nachher http://vornamenachname.bplaced.net heisst
2.) Erstellen Sie / kontrollieren Sie Ihren automatisch dazugehörigen FTP-Account. (Das Passwort ist bei bplaced.net dasselbe, wie Sie für den Space-Account eingegeben hatten)
3.) Erstellen Sie eine erste HTML-Seite. mit dem Namen "index.html" und auf der oberen linken Ecke steht Ihr Vorname und Ihr Nachname (minimalste Anforderung für heute)
4.) Laden Sie die Seite index.html auf Ihren neuen WebSpace.
5.) Schreiben Sie ins BSCW den endgültigen URL.
----
6.) Holen Sie sich ein HTML5-Template
- https://freehtml5.co
- https://html5up.net
- https://webflow.com/free-website-templates
- https://nicepage.com/html5-template
- https://speckyboy.com/free-responsive-html5-web-templates
und beginnen Sie sie zu **individualisieren** mit *eigenen Farben* (im CSS), *_eigenen_ Texten* (im HTML), *_eigenen_ Fotos* und *_eigenen_ Logos*.
_**Dieser Teilauftrag Nr. 6 wird sich übers ganze Modul ziehen. Arbeiten Sie immer wieder daran**_

View File

@ -1,64 +0,0 @@
# Aufgabe M152-b: Storytelling, Wireframes, Mockups
Zeitbedarf:
ca. 2-3 Modul-Halbtage (8-12 Lektionen) plus die eigentliche Umsetzung bis zum Modulende
## Planen Sie Ihre Webseite
### Inhalt Ihrer Webseite
Auf Ihrer Webseite müssen Sie folgendes mindestens erklären (=Inhalte -> überlegen Sie die "gute" Reihenfolge selber):
- Ihr Styleguide
- Ihr Webseitenkonzept (inkl. Sitemap)
- Ihre Galerie
- Ihr Impressum
- Ihre Erklärungen bezüglich Urheberrecht
- Ihr Minifilmprojekt und die Einbindung des Filmes in eine Webseite
- Seite wie man Animationen mit CSS macht (mehrere)
- Seite wie man Animationen mit "Multi-Gifs" macht und die in die Webseite einbindet
- Seite was die Unterschiede der Bildformate sind
- Seite was die Unterschiede zu den Videoformaten & Audioformate sind
- Ihre Reflexion (in der man sieht, welche "learnings" und welche Erfahrungen Sie gemacht haben)
--> Upload auf Ihre Webseite im Internet.
Gehört zum Modul-Bewertungsraster (K1) M152_Bewertungsraster
### Storytelling
1.) ca. 30-40 min
Lesen Sie Kap. 3 im Buch (S. 40-90 , aber bitte nicht jeden Buchstaben -> überflugsmässig)
- [SaewertRiempp2019_Digital-Storytelling-im-Web](../x_gitressourcen/Buecher_Skripts_Praesentationen/SaewertRiempp2019_Digital-Storytelling-im-Web_9783658230555.pdf)
und lassen Sie sich davon inspirieren,
### Mockup, Wireframes
2.) ca. 30-40 min
Studieren Sie, was Mockups und Wireframes sind und schreiben Sie mit eigenen Worten in 3-4 Sätzen, was der Unterschied ist und wozu man das braucht. (Abgabe in txt-File hier im Auftrag)
- [https://app.moqups.com](https://app.moqups.com)
- [https://thedigitalprojectmanager.com/de/die-10-besten-wireframe-tools](https://thedigitalprojectmanager.com/de/die-10-besten-wireframe-tools)
- [https://www.iqual.ch/de/internet-glossar/mockups](https://www.iqual.ch/de/internet-glossar/mockups)
- [https://www.webschmoeker.de/webdesign/unterschied-wireframe-und-mockup](https://www.webschmoeker.de/webdesign/unterschied-wireframe-und-mockup)
- [https://www.lucidchart.com/pages/de/was-sind-website-wireframes](https://www.lucidchart.com/pages/de/was-sind-website-wireframes)
- [https://www.iqual.ch/de/internet-glossar/wireframes](https://www.iqual.ch/de/internet-glossar/wireframes)
### Wireframe anwenden
3.) ca. 60-80 min
Erstellen Sie eine Planung Ihrer Webseite mit einem Wireframe-Tool (oder skizzieren Sie von Hand / dann scannen oder fotografieren) und stellen Sie die entstanden Bilder/Grafiken/Scans in Ihrer neuen Webseite dar.
- wieviele und welche Seiten
- was ist in Etwa drauf (Wichtig: keine Details!!)
https://www.elmastudio.de/eine-neue-webseite-entsteht-teil-2-die-layout-vorlage-mockup/
Und machen Sie es so, wie diese Firma es für ihre Kunden anbietet.
https://www.snowflake.ch/ux-design/

View File

@ -1,32 +0,0 @@
# Aufgabe M152-c: Eigener Styleguide definieren/bestimmen und dokumentieren
Zeitbedarf: ca. 100-120 min
1.) Erstellen und verlinken Sie eine HTML-Seite namens "styleguide.html" (oder "styleguide.php") und definieren Sie Ihren eigenen Styleguide für Ihre Webseite. Das heisst, Sie bestimmen:
- Schriftart und -grösse
- Farben-Set
- Logo und evtl. andere Erkennungsmerkmale
- Icons & Schaltflächen (Form, Grösse, Verhalten (z.B. hover-Verhalten)
- Abstände (bei Absätzen, bei Tabellen, um Grafiken herum, ... , ... )
- Definieren Sie Header und Footer Ihrer Webseite.
2.) Erstellen und verlinken Sie eine Beispielseite "styleguide_examle.html", die alles was definiert wurde, "richtig" verwenden.
**Bemerkung 1**: Wenn Sie Bootstrap verwenden, machen Sie eine eigene CSS-Datei und überschreiben Sie dort die Defaultfarben der Schaltflächen (die Defaultfarben sind ja langweilig und benutzen alle)
**Bemerkung 2**: Wenn Sie ein vorgefertigtes Template benutzen, machen Sie entsprechend eine Nach-Analyse dieser oben beschriebenen Punkte samt Ihren Ergänzungen, Erweiterungen und Nach-Justierungen. Sie können auch die oftmals im Template angegebenen Styleguide-Seite benutzen und für Ihre Zwecke anwenden und/oder umbauen und nachdefinieren. Benützen Sie dafür das kaskadierende Konzept der CSS (überschreiben mit dem zuletzt Definiertem).
**Bemerkung 3**: Wenn Sie schlau sind, werden Sie dann immer die gleichen Header und Footer via PHP (inlude) immer in der gleichen Form einbinden.
Lassen Sie sich anleiten von diesen Dateien
- [Beispiele für einen perfekten Styleguide](https://t3n.de/news/styleguide-beispiele-794708/)
- [den-perfekten-styleguide-fuer-eine-website-erstellen](https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen)
- [Style Guide erstellen leicht gemacht](https://99designs.ch/blog/design-kreativitaet/style-guierstellen)
- [Tools für Styleguides zu erstellen](https://t3n.de/news/styleguide-erstellen-tools-800688)
- [snowflake.ch/ux-design](https://www.snowflake.ch/ux-design)

View File

@ -1,33 +0,0 @@
# Aufgabe M152-d: Urheberrecht
Zeitbedarf: ca. 45-60 min
**Lernziel**: Neben dem eigentlichen Aufarbeiten und lernen, was Urheberrecht ist und wie es sich in der Praxis auswirkt, werden Sie in dieser Aufgabe als Nebenkompezenz (und als methodisch-didaktische Variation) das hineinversetzen in eine andere Rollen üben können umd gleichzeitig lernen, die wichtigen Fragen zu stellen. -->
_Lese- und Verständnisaufgabe über Urheberrecht_
**Ausgangslage**:
Stellen Sie sich vor, in einer Schweizer Sekundarschule oder in einem Gymnasium haben die 14-/15-jährigen Schüler in den letzten 2 Wochen wärend 6-8 Stunden "alles" über das Urheberrecht, Urhebergesetz, geistiges Eigentum gelernt. Sie sind Sachverständige/r für das Urheberrecht und müssen einen Test für diese Schüler bereitstellen, um zu sehen, ob sie die wichtigsten "Dinge" über diese Themen kennen.
**Vorgehen**:
Lesen/studieren Sie im unten angegebenen Link die Dokumente. Finden Sie aus möglichst allen Bereichen je 1-3 Fragen und geben Sie die richtigen Antworten dazu an. Dokumentieren Sie das in einer Seite in Ihrer WebSite gemäss und entsprechend im Stile Ihrer WebSite und Ihrem WebSite-Konzept.
**Erwartet werden**:
10-12 Fragen (und Antworten)
- aus den verschiedenen Bereichen des Urheberrechts und des Urheberrechtsgesetzes (siehe Wikipedia),
- des geistigen Eigentums und wie man etwas schützen kann (IGE-Website)
- und die Vorgaben für das schweizerische Impressum (WEKA-Artikel)
**Es ist eine Einzelaufgabe**:
Die Abgabe hat nicht 2x die gleichen Fragen & Antworten in der Klasse!
[Referenzmaterial](../x_gitressourcen/Urheberrecht)

View File

@ -1,11 +0,0 @@
# Aufgabe M152-e: Copyrights und Lizenzen im Internet
Zeitbedarf: ca. 45-60 min
Ergänzen Sie Ihre Urheberrechts-oder Ihre Impressum-Seite in Ihrem Internetauftritt mit den Erklärungen über:
- was sind und bedeuten Copyrights im Internet und wer hat welche Copyrights auf Ihrem Internetauftritt
- was sind und bedeuten Lizenzen im Internet
- was ist "public domain" und "fair use"
Alle Informationen, die Sie hier zusammentragen auf einer/der entsprechenden Seite aufführen und allenfalls mit eigenen Kommentaren oder Feststellungen ergänzen.
[Referenzmaterial](../x_gitressourcen/Urheberrecht) (und weiteres aus dem Internet)

View File

@ -1,34 +0,0 @@
# Aufgabe M152-f: DSGVO, Cookie-Warnung, Impressum
Zeitbedarf: ca. 120-140 min plus 20 min Pause
1.) Lesen Sie zuerst die rechtlichen Grundlagen über die EU-Cookies-Richtlinie und die "DSGVO".
https://www.e-recht24.de/artikel/datenschutz/8451-hinweispflicht-fuer-cookies.html
https://www.k-webs.ch/news-cookiehinweis-auf-websites-in-der-schweiz
2.) Erstellen Sie auf ihrer "index.html" eine Cookie-Warnung inkl. der erwarteten Funktionalität (*). Es steht Ihnen frei, einen Generator dafür zu benutzen. Im Internet finden Sie mehrere. Hier mal ein Anfang:
https://www.ithelps-digital.com/de/blog/webseiten/cookie-website-browser
https://www.cookiebot.com/de/cookie-warnung/
3.) Erstellen und verlinken Sie eine HTML-Seite, wo Sie die wichtigsten und/oder zentralen Elemente der DSGVO erklären (eigene Zusammenfassung).
4.) Erstellen und verlinken Sie eine HTML-Seite, wo Sie die entwickelten Fragen und Antworten zum Urheberrecht präsentieren.
5.) Erstellen und verlinken Sie eine HTML-Impressum-Seite (oder PHP-Seite) mit allen "notwendigen" Angaben (Diese müssen aber stimmen, keine Fake-Angaben! Denn Ihre WebSite ist ja auch im Internet).
6.) Laden Sie das alles auf Schultag-Ende auf Ihren WebSpace hoch.
Bemerkung (*): Wenn der User die Cookie-Warnung nicht quittiert, kann er auf der Webseite auch nicht alles (oder gar nichts?) sehen. Ausserdem darf die Cookie-Warnung beim zweiten Besuch der Webseite nicht nochmals aufpoppen. Also nur 1x pro User, bzw. 1x pro Browser.
[Auftrag und Links zu DSGVO_und_Cookies](../x_gitressourcen/DSGVO_und_Cookies)

View File

@ -1,66 +0,0 @@
# Aufgabe M152-g: Bildformate, Videoformate, Soundformate erstellen und vergleichen
Zeitbedarf: ca. 60-90 min.
## 1.) Fotos/Bilder
Machen Sie zwei Fotos mit Ihrem Smartphone. Ein Foto hat möglichst wenige Details darauf (eine eintönige Wand, Fussboden, Fläche oder sowas).
Ein Foto hat viele Elemente darauf (z.B ein Bild aus Ihrem Fenster, ein Baum, ein Blumenbeet oder ähnliches)
- transferieren Sie die beiden Fotos auf Ihren Rechner.
- Speichern Sie neben dem originalen JPEG (unverändert) auch noch in die Dateiformate BMP, PNG-8, GIF sowie ein JPEG mit geringer Auflösung (kann man in den Softwaretools einstellen). *Wie weit kann man gehen?*
- Erstellen Sie eine HTML- oder PHP-Dokument und integrieren Sie die Fotos auf die WebSite in den verschiedenen Formaten und fügen Sie untenstehende Beschreibung(en) hinzu.
- Notieren Sie zu den Fotos die Dateigrössen der Dateiformate JPEG (beide), BMP, PNG-8, GIF
- Erklären Sie mit eigenen Worten zu jedem Dateiformat, warum die Datei so gross oder klein ist.
- Erklären Sie auch Unterformate, falls es welche gibt (z.B. Interlaced, Transparenz, ...)
- Beschreiben Sie zu jedem Bildformat deren Vorteile und Nachteile sowie deren optimalen Einsatzzweck
Softwareempfehlung: https://www.irfanview.com/
Andere wären z.B. auch Gimp, Photoshp, ...
<br />https://onlinegiftools.com
## 2.) Videos
Erstellen Sie Mit Ihrem Smartphone ein Kurzvideo (ca. 10 Sekunden) transferieren Sie es auf Ihren Rechner und speichern Sie es in 3-4 verschiedenen "gängigen" Formaten ab.
- Binden Sie das/die Video/s in 2-3 unterschiedlichen Arten in Ihre WebSite ein (Video-Tag in HTML5, oder mittels "embed" u.ä.)
- Erklären Sie mit eigenen Worten zu jedem Dateiformat, warum die Datei so gross oder klein ist.
- Erklären Sie auch Unterformate, falls es welche gibt und was sie bewirken.
- Beschreiben Sie zu jedem Video-Format deren Vorteile und Nachteile sowie deren optimalen Einsatzzweck
Softwareempfehlung: https://openshot.org
<br />https://mediaboom.com/
<br />https://www.softguide.de/software-tipps/videoformate
<br />https://www.nrwision.de/mitmachen/wissen/videoformate-vergleich
<br />https://www.netzsieger.de/ratgeber/videoformate
<br />https://blog.mynd.com/de/wichtigsten-videoformate
## 3.) Sounds/Töne/Musik/Jingle
Suchen Sie sich im Internet frei verfügbare Musik, Sounds oder Jingles und speichern Sie sie in 2-4 unterschiedlichen "gängigen" Formaten ab.
- Binden Sie die Audio-Dateien in Ihre Webseite auf 2-3 Arten (automatisches Losspielen) und als manuell startbares Audio entsprechend ein.
- Erklären Sie mit eigenen Worten zu jedem Dateiformat, warum die Datei so gross oder klein ist.
- Erklären Sie auch Unterformate, falls es welche gibt.
- Beschreiben Sie zu jedem Audioformat deren Vorteile und Nachteile sowie deren optimalen Einsatzzweck
<br />https://www.audible.de
<br />https://de.wikipedia.org/wiki/Web_Audio_API
<br />https://googlechromelabs.github.io/web-audio-samples
<br />https://umaar.com/dev-tips/203-web-audio-inspector
<br />https://www.nrwision.de/mitmachen/wissen/audioformate-vergleich
**Hinweis:**
- erinnern Sie sich ans Modul 114 (1. Lehrjahr) und/oder holen sie sich dessen Unterlagen hervor
- lesen Sie sich im Internet schlau

View File

@ -1,58 +0,0 @@
# Aufgabe M152-h: Animationen erstellen (anim-CSS, anim-GIF, SVG, Keyframes, Transitions, Canvas)
Zeitbedarf: minimal 180 min, eher das Doppelte oder Dreifache
Übersicht über Techniken
- https://yalantis.com/blog/web-animation-technologies-and-tools
## 1.) Animationen mit CSS
1a.) Lesen Sie Kapitel 4 aus dem Buch (S. 98-121)
- [SaewertRiempp2019_Digital-Storytelling-im-Web](../x_gitressourcen/Buecher_Skripts_Praesentationen/SaewertRiempp2019_Digital-Storytelling-im-Web_9783658230555.pdf)
1b.) Schauen Sie sich das Video dieses Web-Entwicklers an
- https://www.youtube.com/watch?v=AAsybyVjXss (11 min)
1c.) Und zeigen Sie auf **3 separaten** HTML-Seiten (oder .php) **je eine** der gezeigten Animationsarten und erklären Sie auf der selben Seite, wie diese funktionieren.
(machen Sie zunächst dafür mal eine eigene Seite z.B. "cssanimation.html" und verlinken Sie diese aus "index.html" her über ein Menü-Punkt)
## 2.) Animietes GIF
Nehmen Sie eine Bilderserie (ca 8-12 kleine aufeinanderfolgende Bilder / vorher mit Irfanview herunterrechnen damit es nicht zu gross wird) und erstellen Sie ein animirtes Gif. Es gibt verschiedene Tools dafür. Es gibt auch Videosoftware, die ein Video auf ein animiertes GIG herunterrechnen können.
- https://gif-erstellen.com
- https://gif-erstellen.online-umwandeln.de
- https://www.netzwelt.de/download/foto-grafik/animierte-gifs/index.html
*_Binden Sie alles in Ihre Webseite ein und beschreiben Sie kurz, wie Sie das gemacht/erstellt haben._*
## 3.) SVG
Studieren Sie die Links und versuchen Sie SVG für sich anzuwenden und zu dokumentieren auf Ihrer WebSite.
- https://inkscape.org/de/release/inkscape-1.0
- [Scalable Vector Graphics SVG](../x_gitressourcen/Animationen/SVG)
- [Vergleich PNG - SVG](../x_gitressourcen/Animationen/SVG/Vergleich-PNG-SVG)
- https://www.youtube.com/watch?v=ttwUKpzKYLw&list=PL055Epbe6d5bQubu5EWf_kUNA3ef_qbmL&index=6
- https://wiki.selfhtml.org/wiki/SVG/Elemente/Grundformen
- https://greensock.com/ https://greensock.com/cheatsheet
## 4.) Keyframes und Transitions
- https://developer.mozilla.org/de/docs/Web/CSS/@keyframes
## 5.) Canvas
- [HTML5 Canvas Bsp](../x_gitressourcen/Animationen/HTML5_Canvas)
- https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial/Basic_animations
- https://james-priest.github.io/100-days-of-code-log-r2/CH12-Canvas.html
- https://wiki.selfhtml.org/wiki/JavaScript/Canvas
## 6.) Scroll-Animations
- [SaewertRiempp2019_Digital-Storytelling-im-Web S. 175 ff](../x_gitressourcen/Buecher_Skripts_Praesentationen/SaewertRiempp2019_Digital-Storytelling-im-Web_9783658230555.pdf)
- [Scroll-Animated Animation](../x_gitressourcen/Animationen/Scroll-Animated Animations)

View File

@ -1,24 +0,0 @@
# Aufgabe M152-i: Testen / Automatisierung & autom. Formulare ausfüllen
Zeitbedarf:
## Automatisierung
Für das Automatische Testen ist "Selenium" als (Firefox-)Plugin entwickelt worden. Das PlugIn geht jetzt auch für andere Browser. Damit kann man nicht nur testen, sondern automatisch Formulare befüllen, bzw. automatsch selbständig Internet-Webseiten bedienen lassen. Auch für Massen- und Speedtests anwendbar.
- https://www.selenium.dev
- https://de.wikipedia.org/wiki/Selenium
10 JavaScript Projects in 1 Hour - Coding Challenge
- https://www.youtube.com/watch?v=8GPPJpiLqHk&t=2250s
## Testen
Siehe Folien über Testen
- https://docs.google.com/presentation/d/162nRB0JJJ0Z-nZZ9JI7KretpL8K4rwBsKabXmiIvrzY/edit#slide=id.gc7f2a33041_0_52
Responsive Test (Übersicht)
- https://www.ionos.de/digitalguide/websites/webdesign/tools-fuer-den-responsive-test-ihrer-website
Gute Ressourcen über GUI-Testen (Ranorex)
- https://www.ranorex.com/resources

View File

@ -1,14 +0,0 @@
# Aufgabe M152-j: Optimierung, Page speed
## Geschwindigkeit und Performanz
- Browser-Entwicklertools ('Inspector' in FireFox, Chrome und Edge --> Ctrl Shift I)
- Google Page Speed Insights (https://developers.google.com/speed/pagespeed/insights/?hl=de)
- Apache JMeter (https://jmeter.apache.org)
## Klickverhalten und Benutzerfokus
- https://www.hotjar.com
- https://crazyegg.com
## Publikums-Test
- https://www.intellizoom.com

View File

@ -1,5 +0,0 @@
## Animierte GIF
[Animierte GIFs erstellen - Tool-Uebersicht](https://www.netzwelt.de/download/foto-grafik/animierte-gifs/index.html)
[https://gif-erstellen.com/](https://gif-erstellen.com/)
[https://gif-erstellen.online-umwandeln.de/](https://gif-erstellen.online-umwandeln.de/)

View File

@ -1,36 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<h1>HTML5 Canvas</h1>
<canvas id="myCanvas" width="300" height="500"/>
<script>
function zeichne()
{
let ctx = cv.getContext("2d");
ctx.fillStyle = "red";
/* Linie zeichnen vom Punkt 0,0 zu 50,50 */
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(50, 50);
ctx.stroke();
/* Rechteck zeichnen mit x=50, y=50, breite=200, höhe=300 */
ctx.fillRect(50, 50, 200, 300);
}
let cv = document.getElementById("myCanvas");
if (cv.getContext){
zeichne();
} else {
alert("Der Browser unterstützt das <canvas>-Element nicht :-(");
}
</script>
</body>
</html>

View File

@ -1,51 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<h1>HTML5 Canvas</h1>
<canvas id="myCanvas" width="300" height="500"/>
<script>
const rectSize = 200;
const callIntervalMs = 10;
let x;
let ctx;
let strokeColor = "black";
function zeichneLinie()
{
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(rectSize-x, rectSize);
ctx.stroke();
x++;
if (x > rectSize){
x = 0;
if (strokeColor == "black") { strokeColor = "yellow"; } else { strokeColor = "black"; }
ctx.strokeStyle = strokeColor;
}
}
function zeichne()
{
ctx.fillStyle = "red";
ctx.fillRect(0, 0, rectSize, rectSize);
x = 0;
strokeColor = "black";
window.setInterval(zeichneLinie, callIntervalMs);
}
let cv = document.getElementById("myCanvas");
if (cv.getContext){
ctx = cv.getContext("2d");
zeichne();
} else {
alert("Der Browser unterstützt das <canvas>-Element nicht :-(");
}
</script>
</body>
</html>

View File

@ -1,53 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<h1>HTML5 Canvas</h1>
<canvas id="myCanvas" width="300" height="500"/>
<script>
const rectSize = 200;
const callIntervalMs = 10;
let x = 0;
let change = 1;
let ctx;
let strokeStyle = "black";
function zeichneLinie()
{
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(rectSize-x, rectSize);
ctx.stroke();
}
function zeichne()
{
ctx = document.getElementById("myCanvas").getContext("2d");
ctx.clearRect(0, 0, rectSize, rectSize);
ctx.fillStyle = "green";
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.save();
ctx.fillRect(0, 0, rectSize, rectSize);
x += change;
if (x > rectSize || x < 0){
change = -change;
if (strokeStyle == "black") { strokeStyle = "yellow"; } else { strokeStyle = "black"; }
ctx.strokeStyle = strokeStyle;
}
zeichneLinie();
window.requestAnimationFrame(zeichne);
}
zeichne();
</script>
</body>
</html>

View File

@ -1,34 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<h1>HTML5 Canvas (Sinuskurve)</h1>
<canvas id="myCanvas" width="1000" height="1000"/>
<script>
const rectSize = 500;
let x = 0;
function zeichne()
{
let ctx = document.getElementById("myCanvas").getContext("2d");
x+=1;
if (x > rectSize){
ctx.clearRect(0, 0, rectSize, rectSize);
x = 0;
}
let y = (Math.sin(x/10) + 1); // + 1 => dadurch immer positive Werte
ctx.fillRect(x, y*50, 1, 1);
window.requestAnimationFrame(zeichne);
}
zeichne();
</script>
</body>
</html>

View File

@ -1,10 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="210mm" height="297mm"
viewBox="10 0 210 297">
<g id="groupId" style="{background-color: #FF00FF}">
<circle cx="-25" cy="125" r="65" fill="#FF00FF"/>
<circle cx="115" cy="115" r="25" fill="#0000FF"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 314 B

View File

@ -1,32 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Klöppel</h1>
<svg width=1000 height=1000>
<rect id="myRect" width="40" height="80" x="50" y="100" fill="red">
<animateTransform id="tf1"
attributeName="transform"
type="rotate"
from="0 85 55"
to="-19 85 55"
begin="0;tf2.begin+0.5s"
dur="1s"
repeatCount="indefinite"
/>
<animateTransform id="tf2"
attributeName="transform"
type="rotate"
from="-19 85 55"
to="0 85 55"
begin="1s;tf1.begin+1s"
dur="0.5s"
repeatCount="indefinite"
/>
</rect>
</svg>
</body>
</html>

View File

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Karussell fahren</h1>
<svg>
<rect id="myRect" width="40" height="80" x="50" y="100" fill="red" />
</svg>
<script>
let y = 0;
let x = document.getElementById("myRect");
window.setInterval(function(){
y+=1;
x.setAttribute('transform','rotate(' + y + ', 50,80)');
}, 5);
</script>
</body>
</html>

View File

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>Greensock-Test</title>
<meta charset="UTF-8">
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1000" height="1000"
viewBox="0 0 1000 1000">
<g id="myGroup">
<rect id="myRect" width="400" height="40" fill="#FF00FF" />
<circle id="myCircle" cx="500" cy="200" r="50" fill="#FF00DD" />
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/CSSRulePlugin.min.js"></script>
<script>
// siehe https://greensock.com/cheatsheet/
gsap.to("#myCircle", {duration: 3, cx:440, cy:400, ease:"bounce", fill: "#00FF00"});
gsap.to("#myRect", {rotation: 25, width:1000, cy:400, duration: 3, ease:"bounce", fill: "#00FF00"});
// gsap.to("#myGroup", {rotation: -25, duration:4});
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 60 KiB

View File

@ -1,246 +0,0 @@
<svg id="ewghbn0ncza81"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-500 0 3816 1328.480000"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision">
<style>
#ewghbn0ncza84_to {
animation: ewghbn0ncza84_to__to 10000ms linear infinite normal forwards
}
@keyframes ewghbn0ncza84_to__to {
0% { offset-distance: 0% }
6% {offset-distance: 0%}
26% {offset-distance: 100%}
100% {offset-distance: 100%}
}
#ewghbn0ncza84_tr {
animation: ewghbn0ncza84_tr__tr 10000ms linear infinite normal forwards
}
@keyframes ewghbn0ncza84_tr__tr {
0% {transform: rotate(0deg)}
6% {transform: rotate(0deg)}
26% {transform: rotate(-22.740802deg)}
100% {transform: rotate(-22.740802deg)}
}
#ewghbn0ncza827_to {
animation: ewghbn0ncza827_to__to 10000ms linear infinite normal forwards
}
@keyframes ewghbn0ncza827_to__to {
0% {transform: translate(3370.360046px,990.734985px)}
26% {transform: translate(-1083.342501px,986.448214px)}
100% {transform: translate(-1083.342501px,986.448214px)}
}
#ewghbn0ncza898_tr {
animation: ewghbn0ncza898_tr__tr 10000ms linear infinite normal forwards
}
@keyframes ewghbn0ncza898_tr__tr {
0% {transform: translate(2514.973677px,178.605523px) rotate(0deg)}
100% {transform: translate(2514.973677px,178.605523px) rotate(2160deg)}
}
#ewghbn0ncza8119_tr {
animation: ewghbn0ncza8119_tr__tr 10000ms linear infinite normal forwards
}
@keyframes ewghbn0ncza8119_tr__tr {
0% {transform: translate(3120.360083px,306.520061px) rotate(0deg)}
100% {transform: translate(3120.360083px,306.520061px) rotate(1080deg)}
}
#ewghbn0ncza8125_tr {
animation: ewghbn0ncza8125_tr__tr 10000ms linear infinite normal forwards
}
@keyframes ewghbn0ncza8125_tr__tr {
0% {transform: translate(2848.990000px,373.870189px) rotate(0deg)}
100% {transform: translate(2848.990000px,373.870189px) rotate(2160deg)}
}
#ewghbn0ncza8131_tr {
animation: ewghbn0ncza8131_tr__tr 10000ms linear infinite normal forwards
}
@keyframes ewghbn0ncza8131_tr__tr {
0% {transform: translate(2978.509871px,138.280129px) rotate(0deg)}
100% {transform: translate(2978.509871px,138.280129px) rotate(2160deg)}
}
#ewghbn0ncza8137_tr {
animation: ewghbn0ncza8137_tr__tr 10000ms linear infinite normal forwards
}
@keyframes ewghbn0ncza8137_tr__tr {
0% {transform: translate(2685.835000px,247.105491px) rotate(0deg)}
100% {transform: translate(2685.835000px,247.105491px) rotate(2160deg)}
}
</style>
<g id="ewghbn0ncza82">
<g id="ewghbn0ncza83">
<g id="ewghbn0ncza84_to" style="offset-path:path('M2763.147207,676.130000C2022.383978,174.888643,-672.470910,104.006349,-672.470910,104.006349');offset-rotate:0deg">
<g id="ewghbn0ncza84_tr" transform="rotate(0)">
<g id="ewghbn0ncza84" transform="translate(-2028.575039,-84.921786)">
<line id="ewghbn0ncza85" x1="1908.910000" y1="28.200000" x2="1886.040000" y2="20.390000" fill="none" stroke="rgb(138,148,156)" stroke-width="1.890000" stroke-linecap="round" stroke-miterlimit="10"/>
<rect id="ewghbn0ncza86" width="9.810000" height="27.930000" rx="0" ry="0" transform="matrix(0.32325700000000 -0.94631100000000 0.94631100000000 0.32325700000000 2081.21278717999985 61.91174735999971)" fill="rgb(128,128,128)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza87" width="9.810000" height="27.930000" rx="0" ry="0" transform="matrix(0.32325700000000 -0.94631100000000 0.94631100000000 0.32325700000000 2062.41535625999995 116.91529861999993)" fill="rgb(128,128,128)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza88" d="M2088.270000,101.050000L1937.520000,49.550000L1904.650000,30.670000C1903.247169,29.855447,1902.615156,28.163324,1903.140519,26.628585C1903.665881,25.093845,1905.202277,24.143999,1906.810000,24.360000L1944.360000,29.540000L2095.110000,81Z" fill="rgb(208,211,214)" stroke="none" stroke-width="1"/>
<polygon id="ewghbn0ncza89" points="2079.990000,10.860000 2048.190000,0 1983.290000,42.850000 2049.020000,65.300000 2079.990000,10.860000" fill="rgb(173,180,186)" stroke="none" stroke-width="1"/>
<polygon id="ewghbn0ncza810" points="2033.360000,147.320000 2001.570000,136.460000 1976.460000,62.850000 2042.180000,85.310000 2033.360000,147.320000" fill="rgb(173,180,186)" stroke="none" stroke-width="1"/>
<polygon id="ewghbn0ncza811" points="2106.750000,52.720000 2090.940000,47.310000 2058.660000,68.630000 2091.350000,79.800000 2106.750000,52.720000" fill="rgb(173,180,186)" stroke="none" stroke-width="1"/>
<polygon id="ewghbn0ncza812" points="2080.140000,130.590000 2064.330000,125.190000 2051.840000,88.580000 2084.530000,99.750000 2080.140000,130.590000" fill="rgb(173,180,186)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza813" d="M1963.260000,54.750000L1936,43.440000C1934.862158,43.053378,1933.925118,42.229558,1933.395959,41.150599C1932.866800,40.071641,1932.789089,38.826376,1933.180000,37.690000L1933.910000,35.550000C1934.296622,34.412158,1935.120442,33.475118,1936.199401,32.945959C1937.278359,32.416800,1938.523624,32.339089,1939.660000,32.730000L1968.130000,40.460000C1969.267842,40.846622,1970.204882,41.670442,1970.734041,42.749401C1971.263200,43.828359,1971.340911,45.073624,1970.950000,46.210000L1968.950000,51.930000C1968.144348,54.268471,1965.608768,55.525120,1963.260000,54.750000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza814" width="26.420000" height="6.610000" rx="0" ry="0" transform="matrix(0.32325700000000 -0.94631100000000 0.94631100000000 0.32325700000000 2031.12815200999989 44.82496887000002)" fill="rgb(255,255,255)" stroke="none" stroke-width="1"/>
<circle id="ewghbn0ncza815" r="8.810000" transform="matrix(1 0 0 1 2038.63000000000011 33.43000000000000)" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<line id="ewghbn0ncza816" x1="2031.240000" y1="44.870000" x2="2039.780000" y2="19.860000" fill="none" stroke="rgb(138,148,156)" stroke-width="1.100000" stroke-miterlimit="10"/>
<line id="ewghbn0ncza817" x1="2034.490000" y1="45.980000" x2="2043.030000" y2="20.970000" fill="none" stroke="rgb(138,148,156)" stroke-width="1.100000" stroke-miterlimit="10"/>
<line id="ewghbn0ncza818" x1="2037.750000" y1="47.090000" x2="2046.290000" y2="22.090000" fill="none" stroke="rgb(138,148,156)" stroke-width="1.100000" stroke-miterlimit="10"/>
<polygon id="ewghbn0ncza819" points="2032.410000,31.310000 2037.590000,31.380000 2039.260000,26.490000 2040.790000,31.430000 2045.960000,31.510000 2041.730000,34.490000 2043.260000,39.440000 2039.110000,36.330000 2034.880000,39.310000 2036.550000,34.410000 2032.410000,31.310000" fill="rgb(255,255,255)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza820" width="2.260000" height="61.910000" rx="0" ry="0" transform="matrix(0.32325700000000 -0.94631100000000 0.94631100000000 0.32325700000000 2048.51962228999992 77.05402812999978)" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<polygon id="ewghbn0ncza821" points="2095.320000,100.270000 2088.270000,101.050000 2095.100000,81.050000 2100.200000,85.980000 2095.320000,100.270000" fill="rgb(128,128,128)" stroke="none" stroke-width="1"/>
</g>
</g>
</g>
<path id="ewghbn0ncza822" d="M3316,497.520000C3262.306514,491.903254,3208.356464,489.092765,3154.370000,489.100000C2218.700000,489.100000,1901.630000,872.010000,1476.370000,1328.100000L3316,1328.100000Z" transform="matrix(1 0 0 1 0 3)" fill="rgb(185,213,69)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza823" d="M2035.510000,1041.790000L0,1041.790000L0,1196.790000C5.255618,1212.408847,7.927391,1228.780631,7.910000,1245.260000L7.910000,1327.820000L83.910000,1327.820000L83.910000,1245.260000C83.923025,1173.540930,134.140762,1111.621796,204.312102,1096.802614C274.483443,1081.983431,345.449332,1118.310318,374.460000,1183.900000L374.460000,1327.820000L486.460000,1327.820000L486.460000,1181.220000C516.503328,1116.716367,587.329575,1081.748244,656.807126,1097.116727C726.284676,1112.485211,775.754900,1174.062997,775.790000,1245.220000L775.790000,1327.780000L851.790000,1327.780000L851.790000,1245.220000C851.790000,1161.416312,919.726312,1093.480000,1003.530000,1093.480000C1087.333688,1093.480000,1155.270000,1161.416312,1155.270000,1245.220000L1155.270000,1327.780000L1254.390000,1327.780000L1254.390000,1227.210000C1263.910079,1147.469776,1333.911259,1088.954827,1414.075888,1093.726374C1494.240516,1098.497920,1556.806198,1164.903492,1556.800000,1245.210000L1556.800000,1327.770000L1632.800000,1327.770000L1632.800000,1245.210000C1632.800000,1161.406312,1700.736312,1093.470000,1784.540000,1093.470000C1868.343688,1093.470000,1936.280000,1161.406312,1936.280000,1245.210000L1936.280000,1327.770000L2065.900000,1327.770000L2065.900000,1245.210000C2065.900000,1161.406312,2133.836312,1093.470000,2217.640000,1093.470000C2301.443688,1093.470000,2369.380000,1161.406312,2369.380000,1245.210000L2369.380000,1327.770000L2445.380000,1327.770000L2445.380000,1245.210000C2445.380000,1161.406312,2513.316312,1093.470000,2597.120000,1093.470000C2680.923688,1093.470000,2748.860000,1161.406312,2748.860000,1245.210000L2748.860000,1327.770000L2848,1327.770000L2848,1041.770000Z" transform="matrix(1 0 0 1 0 1)" fill="rgb(128,128,128)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza824" d="M-325.526676,1044.892545L-2361.036676,1044.892545L-2361.036676,1199.892545C-2355.781058,1215.511392,-2353.109285,1231.883176,-2353.126676,1248.362545L-2353.126676,1330.922545L-2277.126676,1330.922545L-2277.126676,1248.362545C-2277.113651,1176.643475,-2226.895914,1114.724341,-2156.724574,1099.905159C-2086.553233,1085.085976,-2015.587344,1121.412863,-1986.576676,1187.002545L-1986.576676,1330.922545L-1874.576676,1330.922545L-1874.576676,1184.322545C-1844.533348,1119.818912,-1773.707101,1084.850789,-1704.229550,1100.219272C-1634.752000,1115.587756,-1585.281776,1177.165542,-1585.246676,1248.322545L-1585.246676,1330.882545L-1509.246676,1330.882545L-1509.246676,1248.322545C-1509.246676,1164.518857,-1441.310364,1096.582545,-1357.506676,1096.582545C-1273.702988,1096.582545,-1205.766676,1164.518857,-1205.766676,1248.322545L-1205.766676,1330.882545L-1106.646676,1330.882545L-1106.646676,1230.312545C-1097.126597,1150.572321,-1027.125417,1092.057372,-946.960788,1096.828919C-866.796160,1101.600465,-804.230478,1168.006037,-804.236676,1248.312545L-804.236676,1330.872545L-728.236676,1330.872545L-728.236676,1248.312545C-728.236676,1164.508857,-660.300364,1096.572545,-576.496676,1096.572545C-492.692988,1096.572545,-424.756676,1164.508857,-424.756676,1248.312545L-424.756676,1330.872545L-295.136676,1330.872545L-295.136676,1248.312545C-295.136676,1164.508857,-227.200364,1096.572545,-143.396676,1096.572545C-59.592988,1096.572545,8.343324,1164.508857,8.343324,1248.312545L8.343324,1330.872545L84.343324,1330.872545L84.343324,1248.312545C84.343324,1164.508857,152.279636,1096.572545,236.083324,1096.572545C319.887012,1096.572545,387.823324,1164.508857,387.823324,1248.312545L387.823324,1330.872545L486.963324,1330.872545L486.963324,1044.872545Z" transform="matrix(1 0 0 1 -0.43332400000008 -1.88754499500033)" fill="rgb(128,128,128)" stroke="none" stroke-width="1"/>
<circle id="ewghbn0ncza825" r="34.550000" transform="matrix(1 0 0 1 2456.44000000000005 691.08000000000004)" fill="rgb(169,195,61)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza826" d="M3316,666L2965,656.560000L2562.290000,656.560000C2549.808173,656.347626,2538.182524,662.885023,2531.879498,673.660596C2525.576472,684.436168,2525.576472,697.773832,2531.879498,708.549404C2538.182524,719.324977,2549.808173,725.862374,2562.290000,725.650000L2707.780000,725.650000C2720.261827,725.437626,2731.887476,731.975023,2738.190502,742.750596C2744.493528,753.526168,2744.493528,766.863832,2738.190502,777.639404C2731.887476,788.414977,2720.261827,794.952374,2707.780000,794.740000L2401.900000,794.740000C2383.050438,795.060719,2367.937771,810.432710,2367.937771,829.285000C2367.937771,848.137290,2383.050438,863.509281,2401.900000,863.830000L2607.690000,863.830000C2626.539562,864.150719,2641.652229,879.522710,2641.652229,898.375000C2641.652229,917.227290,2626.539562,932.599281,2607.690000,932.920000L2562.300000,932.920000C2549.818173,932.707626,2538.192524,939.245023,2531.889498,950.020596C2525.586472,960.796168,2525.586472,974.133832,2531.889498,984.909404C2538.192524,995.684977,2549.818173,1002.222374,2562.300000,1002.010000L3316,1002.010000Z" fill="rgb(169,195,61)" stroke="none" stroke-width="1"/>
<g id="ewghbn0ncza827_to" transform="translate(3370.360046,990.734985)">
<g id="ewghbn0ncza827" transform="translate(-2560.360046,-981.734985)">
<rect id="ewghbn0ncza828" width="244.290000" height="9.040000" rx="0" ry="0" transform="matrix(1 0 0 1 2107.34999999999991 1020.84000000000003)" fill="rgb(41,49,52)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza829" d="M2426.280000,1020.840000L2038.100000,1020.840000C2032.735233,1020.845719,2028.369417,1016.524542,2028.320000,1011.160000L2028.320000,1011.160000C2028.451796,966.811012,2064.371012,930.891796,2108.720000,930.760000L2426.280000,930.760000Z" fill="rgb(190,96,0)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza830" d="M2426.280000,1020.840000L2038.100000,1020.840000C2032.735233,1020.845719,2028.369417,1016.524542,2028.320000,1011.160000L2028.320000,1011.160000C2028.389299,981.688740,2044.542131,954.606285,2070.440000,940.540000C2072.910000,940.360000,2075.370000,940.270000,2077.930000,940.270000L2426.280000,940.270000L2426.280000,1020.840000Z" fill="rgb(230,230,230)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza831" d="M2426.280000,1020.840000L2038.100000,1020.840000C2033.440096,1020.836251,2029.428652,1017.548457,2028.510000,1012.980000L2426.290000,1012.980000L2426.290000,1020.840000Z" fill="rgb(190,96,0)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza832" d="M2090.360000,1020.840000L2038.100000,1020.840000C2032.735233,1020.845719,2028.369417,1016.524542,2028.320000,1011.160000L2028.320000,1011.160000C2028.332546,1008.487100,2028.486093,1005.816722,2028.780000,1003.160000L2078.210000,1003.160000C2084.908878,1003.187399,2090.332601,1008.611122,2090.360000,1015.310000L2090.360000,1020.880000Z" fill="rgb(26,35,37)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza833" d="M2035.540000,978C2040.772560,966.506808,2048.625880,956.399896,2058.470000,948.490000L2077.380000,948.490000C2085.523228,948.528560,2092.101111,955.146688,2092.090000,963.290000L2092.090000,963.290000C2092.092655,967.192148,2090.543709,970.935237,2087.784473,973.694473C2085.025237,976.453709,2081.282148,978.002655,2077.380000,978Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza834" d="M2403.630000,949.580000L2381.630000,949.580000C2378.339747,949.612904,2375.689835,952.289582,2375.690000,955.580000L2375.690000,1020.810000L2409.580000,1020.810000L2409.580000,955.610000C2409.580224,952.323437,2406.936340,949.648343,2403.650000,949.610000Z" fill="rgb(190,96,0)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza835" d="M2403.260000,953.690000L2382,953.690000C2381.297176,953.690000,2380.623138,953.969196,2380.126167,954.466167C2379.629196,954.963138,2379.350000,955.637176,2379.350000,956.340000L2379.350000,966.660000C2379.350000,967.362824,2379.629196,968.036862,2380.126167,968.533833C2380.623138,969.030804,2381.297176,969.310000,2382,969.310000L2403.290000,969.310000C2403.992824,969.310000,2404.666862,969.030804,2405.163833,968.533833C2405.660804,968.036862,2405.940000,967.362824,2405.940000,966.660000L2405.940000,956.340000C2405.940000,955.637176,2405.660804,954.963138,2405.163833,954.466167C2404.666862,953.969196,2403.992824,953.690000,2403.290000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza836" width="8.040000" height="89.990000" rx="0" ry="0" transform="matrix(1 0 0 1 2426.28000000000020 930.75999999999999)" fill="rgb(64,73,76)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza837" d="M2334.380000,953.690000L2313.090000,953.690000C2311.609080,953.683940,2310.393385,954.859703,2310.350000,956.340000L2310.350000,966.660000C2310.393385,968.140297,2311.609080,969.316060,2313.090000,969.310000L2334.380000,969.310000C2335.082824,969.310000,2335.756862,969.030804,2336.253833,968.533833C2336.750804,968.036862,2337.030000,967.362824,2337.030000,966.660000L2337.030000,956.340000C2337.024517,954.878723,2335.841277,953.695483,2334.380000,953.690000ZM2300.210000,953.690000L2279,953.690000C2278.284055,953.673924,2277.591456,953.945052,2277.076696,954.442904C2276.561935,954.940757,2276.267836,955.623918,2276.260000,956.340000L2276.260000,966.660000C2276.267836,967.376082,2276.561935,968.059243,2277.076696,968.557096C2277.591456,969.054948,2278.284055,969.326076,2279,969.310000L2300.200000,969.310000C2301.680920,969.316060,2302.896615,968.140297,2302.940000,966.660000L2302.940000,956.340000C2302.896615,954.859703,2301.680920,953.683940,2300.200000,953.690000ZM2266.130000,953.690000L2244.840000,953.690000C2244.137176,953.690000,2243.463138,953.969196,2242.966167,954.466167C2242.469196,954.963138,2242.190000,955.637176,2242.190000,956.340000L2242.190000,966.660000C2242.190000,967.362824,2242.469196,968.036862,2242.966167,968.533833C2243.463138,969.030804,2244.137176,969.310000,2244.840000,969.310000L2266.130000,969.310000C2266.832824,969.310000,2267.506862,969.030804,2268.003833,968.533833C2268.500804,968.036862,2268.780000,967.362824,2268.780000,966.660000L2268.780000,956.340000C2268.780000,955.637176,2268.500804,954.963138,2268.003833,954.466167C2267.506862,953.969196,2266.832824,953.690000,2266.130000,953.690000ZM2232.050000,953.690000L2210.760000,953.690000C2209.279080,953.683940,2208.063385,954.859703,2208.020000,956.340000L2208.020000,966.660000C2208.063385,968.140297,2209.279080,969.316060,2210.760000,969.310000L2232.050000,969.310000C2232.752824,969.310000,2233.426862,969.030804,2233.923833,968.533833C2234.420804,968.036862,2234.700000,967.362824,2234.700000,966.660000L2234.700000,956.340000C2234.700000,955.637176,2234.420804,954.963138,2233.923833,954.466167C2233.426862,953.969196,2232.752824,953.690000,2232.050000,953.690000ZM2197.880000,953.690000L2176.590000,953.690000C2175.887176,953.690000,2175.213138,953.969196,2174.716167,954.466167C2174.219196,954.963138,2173.940000,955.637176,2173.940000,956.340000L2173.940000,966.660000C2173.940000,967.362824,2174.219196,968.036862,2174.716167,968.533833C2175.213138,969.030804,2175.887176,969.310000,2176.590000,969.310000L2197.880000,969.310000C2199.360920,969.316060,2200.576615,968.140297,2200.620000,966.660000L2200.620000,956.340000C2200.581876,954.857387,2199.363060,953.678605,2197.880000,953.690000ZM2163.810000,953.690000L2142.520000,953.690000C2141.817176,953.690000,2141.143138,953.969196,2140.646167,954.466167C2140.149196,954.963138,2139.870000,955.637176,2139.870000,956.340000L2139.870000,966.660000C2139.870000,967.362824,2140.149196,968.036862,2140.646167,968.533833C2141.143138,969.030804,2141.817176,969.310000,2142.520000,969.310000L2163.810000,969.310000C2164.512824,969.310000,2165.186862,969.030804,2165.683833,968.533833C2166.180804,968.036862,2166.460000,967.362824,2166.460000,966.660000L2166.460000,956.340000C2166.460000,955.637176,2166.180804,954.963138,2165.683833,954.466167C2165.186862,953.969196,2164.512824,953.690000,2163.810000,953.690000ZM2129.640000,953.690000L2108.440000,953.690000C2106.959080,953.683940,2105.743385,954.859703,2105.700000,956.340000L2105.700000,966.660000C2105.743385,968.140297,2106.959080,969.316060,2108.440000,969.310000L2129.640000,969.310000C2130.355945,969.326076,2131.048544,969.054948,2131.563304,968.557096C2132.078065,968.059243,2132.372164,967.376082,2132.380000,966.660000L2132.380000,956.340000C2132.372164,955.623918,2132.078065,954.940757,2131.563304,954.442904C2131.048544,953.945052,2130.355945,953.673924,2129.640000,953.690000ZM2368.450000,953.690000L2347.160000,953.690000C2346.457176,953.690000,2345.783138,953.969196,2345.286167,954.466167C2344.789196,954.963138,2344.510000,955.637176,2344.510000,956.340000L2344.510000,966.660000C2344.510000,967.362824,2344.789196,968.036862,2345.286167,968.533833C2345.783138,969.030804,2346.457176,969.310000,2347.160000,969.310000L2368.450000,969.310000C2369.152824,969.310000,2369.826862,969.030804,2370.323833,968.533833C2370.820804,968.036862,2371.100000,967.362824,2371.100000,966.660000L2371.100000,956.340000C2371.100000,955.637176,2370.820804,954.963138,2370.323833,954.466167C2369.826862,953.969196,2369.152824,953.690000,2368.450000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza838" d="M2341,1020.840000L2343.280000,1029.240000C2343.784896,1031.181564,2345.478050,1032.580432,2347.480000,1032.710000L2403.670000,1032.710000C2405.661277,1032.553787,2407.340951,1031.166057,2407.870000,1029.240000L2410.060000,1020.840000Z" fill="rgb(26,35,37)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza839" d="M2047.510000,1020.840000L2049.790000,1029.240000C2050.294896,1031.181564,2051.988050,1032.580432,2053.990000,1032.710000L2110.180000,1032.710000C2112.171277,1032.553787,2113.850951,1031.166057,2114.380000,1029.240000L2116.570000,1020.840000Z" fill="rgb(26,35,37)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza840" d="M2366.720000,982.380000L2103.720000,982.380000L2103.720000,988.500000L2366.720000,988.500000ZM2366.720000,995.990000L2103.720000,995.990000L2103.720000,1002.110000L2366.720000,1002.110000Z" fill="rgb(153,153,153)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza841" width="306.850000" height="90.080000" rx="0" ry="0" transform="matrix(1 0 0 1 2449.46999999999980 930.75999999999999)" fill="rgb(190,96,0)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza842" width="306.850000" height="80.580000" rx="0" ry="0" transform="matrix(1 0 0 1 2449.46999999999980 940.25999999999999)" fill="rgb(230,230,230)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza843" width="153.210000" height="4.950000" rx="0" ry="0" transform="matrix(1 0 0 1 2524.11000000000013 1020.84000000000003)" fill="rgb(41,49,52)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza844" d="M2472.130000,949.580000L2494.130000,949.580000C2497.420253,949.612904,2500.070165,952.289582,2500.070000,955.580000L2500.070000,1020.810000L2466.200000,1020.810000L2466.200000,955.610000C2466.199776,952.323437,2468.843660,949.648343,2472.130000,949.610000Z" fill="rgb(190,96,0)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza845" d="M2472.490000,953.690000L2493.780000,953.690000C2494.482824,953.690000,2495.156862,953.969196,2495.653833,954.466167C2496.150804,954.963138,2496.430000,955.637176,2496.430000,956.340000L2496.430000,966.660000C2496.430000,967.362824,2496.150804,968.036862,2495.653833,968.533833C2495.156862,969.030804,2494.482824,969.310000,2493.780000,969.310000L2472.490000,969.310000C2471.787176,969.310000,2471.113138,969.030804,2470.616167,968.533833C2470.119196,968.036862,2469.840000,967.362824,2469.840000,966.660000L2469.840000,956.340000C2469.840000,955.637176,2470.119196,954.963138,2470.616167,954.466167C2471.113138,953.969196,2471.787176,953.690000,2472.490000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza846" width="8.040000" height="89.990000" rx="0" ry="0" transform="matrix(1 0 0 1 2441.42999999999984 930.75999999999999)" fill="rgb(64,73,76)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza847" width="8.040000" height="89.990000" rx="0" ry="0" transform="matrix(1 0 0 1 2756.42999999999984 930.75999999999999)" fill="rgb(64,73,76)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza848" d="M2541.380000,953.690000L2562.670000,953.690000C2564.150920,953.683940,2565.366615,954.859703,2565.410000,956.340000L2565.410000,966.660000C2565.366615,968.140297,2564.150920,969.316060,2562.670000,969.310000L2541.380000,969.310000C2540.677176,969.310000,2540.003138,969.030804,2539.506167,968.533833C2539.009196,968.036862,2538.730000,967.362824,2538.730000,966.660000L2538.730000,956.340000C2538.730000,955.637176,2539.009196,954.963138,2539.506167,954.466167C2540.003138,953.969196,2540.677176,953.690000,2541.380000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza849" d="M2575.550000,953.690000L2596.750000,953.690000C2597.465945,953.673924,2598.158544,953.945052,2598.673304,954.442904C2599.188065,954.940757,2599.482164,955.623918,2599.490000,956.340000L2599.490000,966.660000C2599.482164,967.376082,2599.188065,968.059243,2598.673304,968.557096C2598.158544,969.054948,2597.465945,969.326076,2596.750000,969.310000L2575.550000,969.310000C2574.069080,969.316060,2572.853385,968.140297,2572.810000,966.660000L2572.810000,956.340000C2572.853385,954.859703,2574.069080,953.683940,2575.550000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza850" d="M2609.620000,953.690000L2630.910000,953.690000C2631.612824,953.690000,2632.286862,953.969196,2632.783833,954.466167C2633.280804,954.963138,2633.560000,955.637176,2633.560000,956.340000L2633.560000,966.660000C2633.560000,967.362824,2633.280804,968.036862,2632.783833,968.533833C2632.286862,969.030804,2631.612824,969.310000,2630.910000,969.310000L2609.620000,969.310000C2608.917176,969.310000,2608.243138,969.030804,2607.746167,968.533833C2607.249196,968.036862,2606.970000,967.362824,2606.970000,966.660000L2606.970000,956.340000C2606.970000,955.637176,2607.249196,954.963138,2607.746167,954.466167C2608.243138,953.969196,2608.917176,953.690000,2609.620000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza851" d="M2643.700000,953.690000L2665,953.690000C2666.480920,953.683940,2667.696615,954.859703,2667.740000,956.340000L2667.740000,966.660000C2667.696615,968.140297,2666.480920,969.316060,2665,969.310000L2643.700000,969.310000C2642.997176,969.310000,2642.323138,969.030804,2641.826167,968.533833C2641.329196,968.036862,2641.050000,967.362824,2641.050000,966.660000L2641.050000,956.340000C2641.050000,955.637176,2641.329196,954.963138,2641.826167,954.466167C2642.323138,953.969196,2642.997176,953.690000,2643.700000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza852" d="M2677.870000,953.690000L2699.160000,953.690000C2699.862824,953.690000,2700.536862,953.969196,2701.033833,954.466167C2701.530804,954.963138,2701.810000,955.637176,2701.810000,956.340000L2701.810000,966.660000C2701.810000,967.362824,2701.530804,968.036862,2701.033833,968.533833C2700.536862,969.030804,2699.862824,969.310000,2699.160000,969.310000L2677.870000,969.310000C2676.389080,969.316060,2675.173385,968.140297,2675.130000,966.660000L2675.130000,956.340000C2675.173385,954.859703,2676.389080,953.683940,2677.870000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza853" d="M2712,953.690000L2733.290000,953.690000C2733.992824,953.690000,2734.666862,953.969196,2735.163833,954.466167C2735.660804,954.963138,2735.940000,955.637176,2735.940000,956.340000L2735.940000,966.660000C2735.940000,967.362824,2735.660804,968.036862,2735.163833,968.533833C2734.666862,969.030804,2733.992824,969.310000,2733.290000,969.310000L2712,969.310000C2711.297176,969.310000,2710.623138,969.030804,2710.126167,968.533833C2709.629196,968.036862,2709.350000,967.362824,2709.350000,966.660000L2709.350000,956.340000C2709.350000,955.637176,2709.629196,954.963138,2710.126167,954.466167C2710.623138,953.969196,2711.297176,953.690000,2712,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza854" d="M2507.300000,953.690000L2528.590000,953.690000C2529.292824,953.690000,2529.966862,953.969196,2530.463833,954.466167C2530.960804,954.963138,2531.240000,955.637176,2531.240000,956.340000L2531.240000,966.660000C2531.240000,967.362824,2530.960804,968.036862,2530.463833,968.533833C2529.966862,969.030804,2529.292824,969.310000,2528.590000,969.310000L2507.300000,969.310000C2506.597176,969.310000,2505.923138,969.030804,2505.426167,968.533833C2504.929196,968.036862,2504.650000,967.362824,2504.650000,966.660000L2504.650000,956.340000C2504.650000,955.637176,2504.929196,954.963138,2505.426167,954.466167C2505.923138,953.969196,2506.597176,953.690000,2507.300000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza855" d="M2534.710000,1020.840000L2532.430000,1029.240000C2531.925104,1031.181564,2530.231950,1032.580432,2528.230000,1032.710000L2472,1032.710000C2470.008723,1032.553787,2468.329049,1031.166057,2467.800000,1029.240000L2465.610000,1020.840000Z" fill="rgb(26,35,37)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza856" d="M2740.250000,1020.840000L2737.970000,1029.240000C2737.465104,1031.181564,2735.771950,1032.580432,2733.770000,1032.710000L2677.580000,1032.710000C2675.588723,1032.553787,2673.909049,1031.166057,2673.380000,1029.240000L2671.190000,1020.840000Z" fill="rgb(26,35,37)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza857" d="M2509,982.380000L2746.280000,982.380000L2746.280000,988.500000L2509,988.500000ZM2509,995.990000L2746.280000,995.990000L2746.280000,1002.110000L2509,1002.110000Z" fill="rgb(153,153,153)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza858" width="306.850000" height="7.860000" rx="0" ry="0" transform="matrix(1 0 0 1 2449.46999999999980 1012.98000000000002)" fill="rgb(190,96,0)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza859" width="7.110000" height="86.960000" rx="0" ry="0" transform="matrix(1 0 0 1 2434.32000000000016 932.63000000000000)" fill="rgb(41,49,52)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza860" width="306.850000" height="90.080000" rx="0" ry="0" transform="matrix(1 0 0 1 2777.40000000000009 930.75999999999999)" fill="rgb(190,96,0)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza861" width="306.850000" height="80.580000" rx="0" ry="0" transform="matrix(1 0 0 1 2777.40000000000009 940.25999999999999)" fill="rgb(230,230,230)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza862" width="153.210000" height="4.950000" rx="0" ry="0" transform="matrix(1 0 0 1 2852.03999999999996 1020.84000000000003)" fill="rgb(41,49,52)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza863" d="M2800.060000,949.580000L2822.060000,949.580000C2825.350253,949.612904,2828.000165,952.289582,2828,955.580000L2828,1020.810000L2794.110000,1020.810000L2794.110000,955.610000C2794.109776,952.323437,2796.753660,949.648343,2800.040000,949.610000Z" fill="rgb(190,96,0)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza864" d="M2800.430000,953.690000L2821.720000,953.690000C2822.422824,953.690000,2823.096862,953.969196,2823.593833,954.466167C2824.090804,954.963138,2824.370000,955.637176,2824.370000,956.340000L2824.370000,966.660000C2824.370000,967.362824,2824.090804,968.036862,2823.593833,968.533833C2823.096862,969.030804,2822.422824,969.310000,2821.720000,969.310000L2800.430000,969.310000C2799.727176,969.310000,2799.053138,969.030804,2798.556167,968.533833C2798.059196,968.036862,2797.780000,967.362824,2797.780000,966.660000L2797.780000,956.340000C2797.780000,955.637176,2798.059196,954.963138,2798.556167,954.466167C2799.053138,953.969196,2799.727176,953.690000,2800.430000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza865" width="8.040000" height="89.990000" rx="0" ry="0" transform="matrix(1 0 0 1 2769.36000000000013 930.75999999999999)" fill="rgb(64,73,76)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza866" width="8.040000" height="89.990000" rx="0" ry="0" transform="matrix(1 0 0 1 3084.36000000000013 930.75999999999999)" fill="rgb(64,73,76)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza867" d="M2869.310000,953.690000L2890.600000,953.690000C2892.080920,953.683940,2893.296615,954.859703,2893.340000,956.340000L2893.340000,966.660000C2893.296615,968.140297,2892.080920,969.316060,2890.600000,969.310000L2869.310000,969.310000C2868.607176,969.310000,2867.933138,969.030804,2867.436167,968.533833C2866.939196,968.036862,2866.660000,967.362824,2866.660000,966.660000L2866.660000,956.340000C2866.660000,955.637176,2866.939196,954.963138,2867.436167,954.466167C2867.933138,953.969196,2868.607176,953.690000,2869.310000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza868" d="M2903.480000,953.690000L2924.680000,953.690000C2925.395945,953.673924,2926.088544,953.945052,2926.603304,954.442904C2927.118065,954.940757,2927.412164,955.623918,2927.420000,956.340000L2927.420000,966.660000C2927.412164,967.376082,2927.118065,968.059243,2926.603304,968.557096C2926.088544,969.054948,2925.395945,969.326076,2924.680000,969.310000L2903.480000,969.310000C2901.999080,969.316060,2900.783385,968.140297,2900.740000,966.660000L2900.740000,956.340000C2900.783385,954.859703,2901.999080,953.683940,2903.480000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza869" d="M2937.560000,953.690000L2958.850000,953.690000C2959.552824,953.690000,2960.226862,953.969196,2960.723833,954.466167C2961.220804,954.963138,2961.500000,955.637176,2961.500000,956.340000L2961.500000,966.660000C2961.500000,967.362824,2961.220804,968.036862,2960.723833,968.533833C2960.226862,969.030804,2959.552824,969.310000,2958.850000,969.310000L2937.560000,969.310000C2936.857176,969.310000,2936.183138,969.030804,2935.686167,968.533833C2935.189196,968.036862,2934.910000,967.362824,2934.910000,966.660000L2934.910000,956.340000C2934.910000,955.637176,2935.189196,954.963138,2935.686167,954.466167C2936.183138,953.969196,2936.857176,953.690000,2937.560000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza870" d="M2971.630000,953.690000L2992.920000,953.690000C2994.400920,953.683940,2995.616615,954.859703,2995.660000,956.340000L2995.660000,966.660000C2995.616615,968.140297,2994.400920,969.316060,2992.920000,969.310000L2971.630000,969.310000C2970.927176,969.310000,2970.253138,969.030804,2969.756167,968.533833C2969.259196,968.036862,2968.980000,967.362824,2968.980000,966.660000L2968.980000,956.340000C2968.980000,955.637176,2969.259196,954.963138,2969.756167,954.466167C2970.253138,953.969196,2970.927176,953.690000,2971.630000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza871" d="M3005.800000,953.690000L3027.090000,953.690000C3027.792824,953.690000,3028.466862,953.969196,3028.963833,954.466167C3029.460804,954.963138,3029.740000,955.637176,3029.740000,956.340000L3029.740000,966.660000C3029.740000,967.362824,3029.460804,968.036862,3028.963833,968.533833C3028.466862,969.030804,3027.792824,969.310000,3027.090000,969.310000L3005.800000,969.310000C3004.319080,969.316060,3003.103385,968.140297,3003.060000,966.660000L3003.060000,956.340000C3003.103385,954.859703,3004.319080,953.683940,3005.800000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza872" d="M3039.880000,953.690000L3061.170000,953.690000C3061.872824,953.690000,3062.546862,953.969196,3063.043833,954.466167C3063.540804,954.963138,3063.820000,955.637176,3063.820000,956.340000L3063.820000,966.660000C3063.820000,967.362824,3063.540804,968.036862,3063.043833,968.533833C3062.546862,969.030804,3061.872824,969.310000,3061.170000,969.310000L3039.880000,969.310000C3039.177176,969.310000,3038.503138,969.030804,3038.006167,968.533833C3037.509196,968.036862,3037.230000,967.362824,3037.230000,966.660000L3037.230000,956.340000C3037.230000,955.637176,3037.509196,954.963138,3038.006167,954.466167C3038.503138,953.969196,3039.177176,953.690000,3039.880000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza873" d="M2835.230000,953.690000L2856.520000,953.690000C2857.222824,953.690000,2857.896862,953.969196,2858.393833,954.466167C2858.890804,954.963138,2859.170000,955.637176,2859.170000,956.340000L2859.170000,966.660000C2859.170000,967.362824,2858.890804,968.036862,2858.393833,968.533833C2857.896862,969.030804,2857.222824,969.310000,2856.520000,969.310000L2835.230000,969.310000C2834.527176,969.310000,2833.853138,969.030804,2833.356167,968.533833C2832.859196,968.036862,2832.580000,967.362824,2832.580000,966.660000L2832.580000,956.340000C2832.580000,955.637176,2832.859196,954.963138,2833.356167,954.466167C2833.853138,953.969196,2834.527176,953.690000,2835.230000,953.690000Z" fill="rgb(41,49,52)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza874" d="M2862.640000,1020.840000L2860.360000,1029.240000C2859.855104,1031.181564,2858.161950,1032.580432,2856.160000,1032.710000L2800,1032.710000C2798.008723,1032.553787,2796.329049,1031.166057,2795.800000,1029.240000L2793.610000,1020.840000Z" fill="rgb(26,35,37)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza875" d="M3068.180000,1020.840000L3065.900000,1029.240000C3065.395104,1031.181564,3063.701950,1032.580432,3061.700000,1032.710000L3005.510000,1032.710000C3003.518723,1032.553787,3001.839049,1031.166057,3001.310000,1029.240000L2999.120000,1020.840000Z" fill="rgb(26,35,37)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza876" d="M2837,982.380000L3074.280000,982.380000L3074.280000,988.500000L2837,988.500000ZM2837,995.990000L3074.280000,995.990000L3074.280000,1002.110000L2837,1002.110000Z" fill="rgb(153,153,153)" fill-rule="evenodd" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza877" width="306.850000" height="7.860000" rx="0" ry="0" transform="matrix(1 0 0 1 2777.40000000000009 1012.98000000000002)" fill="rgb(190,96,0)" stroke="none" stroke-width="1"/>
<rect id="ewghbn0ncza878" width="7.110000" height="86.960000" rx="0" ry="0" transform="matrix(1 0 0 1 2762.25000000000000 932.63000000000000)" fill="rgb(41,49,52)" stroke="none" stroke-width="1"/>
</g>
</g>
<circle id="ewghbn0ncza879" r="53.650000" transform="matrix(0.91899800000000 -0.39426300000000 0.39426300000000 0.91899800000000 2298.56609651999952 653.22148674000016)" fill="rgb(139,197,63)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza880" d="M2352.290000,653.410000C2352.290000,639.181135,2346.637606,625.535048,2336.576279,615.473721C2326.514952,605.412394,2312.868865,599.760000,2298.640000,599.760000L2298.640000,707.050000C2328.266172,707.050001,2352.284478,683.036172,2352.290000,653.410000Z" fill="rgb(108,168,57)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza881" d="M2298.640000,738.140000C2297.629319,738.140000,2296.810000,737.320681,2296.810000,736.310000L2296.810000,661.130000C2296.810000,660.476204,2297.158796,659.872071,2297.725000,659.545173C2298.291204,659.218275,2298.988796,659.218275,2299.555000,659.545173C2300.121204,659.872071,2300.470000,660.476204,2300.470000,661.130000L2300.470000,736.310000C2300.470000,737.320681,2299.650681,738.140000,2298.640000,738.140000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza882" d="M2298.640000,690.390000C2298.154566,690.392367,2297.688988,690.197474,2297.350000,689.850000C2296.639500,689.132847,2296.639500,687.977153,2297.350000,687.260000L2308.520000,676.090000C2309.235209,675.374791,2310.394791,675.374791,2311.110000,676.090000C2311.825209,676.805209,2311.825209,677.964791,2311.110000,678.680000L2299.930000,689.860000C2299.587431,690.200945,2299.123316,690.391627,2298.640000,690.390000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza883" d="M2298.640000,680.640000C2298.154566,680.642367,2297.688988,680.447474,2297.350000,680.100000L2282.510000,665.260000C2281.794791,664.544791,2281.794791,663.385209,2282.510000,662.670000C2283.225209,661.954791,2284.384791,661.954791,2285.100000,662.670000L2299.940000,677.510000C2300.458257,678.037088,2300.610775,678.823146,2300.327243,679.505804C2300.043711,680.188461,2299.379181,680.635171,2298.640000,680.640000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza884" d="M3316,847.290000C3275.357380,839.575771,3234.078236,835.708676,3192.710000,835.740000C2893.400000,835.740000,2650.760000,1034.530000,2650.760000,1279.740000C2650.760288,1295.791306,2651.809188,1311.825449,2653.900000,1327.740000L3316,1327.740000Z" transform="matrix(1 0 0 1 0 6)" fill="rgb(108,168,67)" stroke="none" stroke-width="1"/>
<circle id="ewghbn0ncza885" r="60" transform="matrix(0.91899800000000 -0.39426300000000 0.39426300000000 0.91899800000000 3169.89021504999982 768.84486298000002)" fill="rgb(168,211,111)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza886" d="M3230,769.100000C3230,735.962915,3203.137085,709.100000,3170,709.100000L3170,829.100000C3203.137085,829.100000,3230,802.237085,3230,769.100000Z" fill="rgb(108,168,57)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza887" d="M3170,863.870000C3168.887058,863.870331,3167.977145,862.982610,3167.950000,861.870000L3167.950000,777.740000C3167.950000,776.607816,3168.867816,775.690000,3170,775.690000C3171.132184,775.690000,3172.050000,776.607816,3172.050000,777.740000L3172.050000,861.830000C3172.022855,862.942610,3171.112942,863.830331,3170,863.830000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza888" d="M3170,810.460000C3169.149524,810.511078,3168.360060,810.017751,3168.033165,809.230949C3167.706270,808.444146,3167.913721,807.536628,3168.550000,806.970000L3181.050000,794.470000C3181.848051,793.671949,3183.141949,793.671949,3183.940000,794.470000C3184.738051,795.268051,3184.738051,796.561949,3183.940000,797.360000L3171.440000,809.860000C3171.061003,810.246672,3170.541428,810.463162,3170,810.460000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza889" d="M3170,799.550000C3169.456219,799.550229,3168.934626,799.334397,3168.550000,798.950000L3152,782.360000C3151.483751,781.843751,3151.282133,781.091302,3151.471093,780.386093C3151.660053,779.680884,3152.210884,779.130053,3152.916093,778.941093C3153.621302,778.752133,3154.373751,778.953751,3154.890000,779.470000L3171.480000,796.060000C3171.874273,796.437285,3172.097258,796.959294,3172.097258,797.505000C3172.097258,798.050706,3171.874273,798.572715,3171.480000,798.950000C3171.101003,799.336672,3170.581428,799.553162,3170.040000,799.550000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza890" d="M3048.710000,1088.280000C3048.710000,1028.960000,3031.890000,960.330000,2997.640000,960.330000C2963.390000,960.330000,2946.580000,1028.960000,2946.580000,1088.280000C2946.580000,1110.010000,2963.400000,1127.640000,2997.640000,1127.640000C3031.880000,1127.640000,3048.710000,1110,3048.710000,1088.280000Z" fill="rgb(190,210,109)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza891" d="M3048.710000,1088.280000C3048.710000,1028.960000,3031.890000,960.330000,2997.640000,960.330000L2997.640000,1127.640000C3031.890000,1127.640000,3048.710000,1110,3048.710000,1088.280000Z" fill="rgb(160,186,60)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza892" d="M2997.650000,1189.360000C2995.043216,1189.360000,2992.930000,1187.246784,2992.930000,1184.640000L2992.930000,1038.190000C2992.930000,1035.583216,2995.043216,1033.470000,2997.650000,1033.470000C3000.256784,1033.470000,3002.370000,1035.583216,3002.370000,1038.190000L3002.370000,1184.640000C3002.364499,1187.244502,3000.254502,1189.354499,2997.650000,1189.360000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza893" d="M2997.650000,1096.350000C2996.397462,1096.352405,2995.195552,1095.855808,2994.310000,1094.970000L2972.550000,1073.200000C2970.705369,1071.355369,2970.705369,1068.364631,2972.550000,1066.520000C2974.394631,1064.675369,2977.385369,1064.675369,2979.230000,1066.520000L3001,1088.290000C3001.889139,1089.174059,3002.389081,1090.376154,3002.389081,1091.630000C3002.389081,1092.883846,3001.889139,1094.085941,3001,1094.970000C3000.107082,1095.850864,2998.904277,1096.346348,2997.650000,1096.350000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza894" d="M2997.650000,1077.350000C2995.739411,1077.351990,2994.016067,1076.201976,2993.284647,1074.436933C2992.553228,1072.671889,2992.958014,1070.639995,2994.310000,1069.290000L3023.210000,1040.390000C3025.054631,1038.545369,3028.045369,1038.545369,3029.890000,1040.390000C3031.734631,1042.234631,3031.734631,1045.225369,3029.890000,1047.070000L3001,1076C3000.114448,1076.885808,2998.912538,1077.382405,2997.660000,1077.380000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza895" d="M2124.630000,1328.480000Q2124.990000,1320.590000,2125,1312.600000C2125,1122.890000,1971.210000,969.100000,1781.500000,969.100000C1591.790000,969.100000,1438,1122.890000,1438,1312.600000Q1438,1320.600000,1438.370000,1328.480000Z" transform="matrix(1 0 0 1 0 3)" fill="rgb(141,197,64)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza896" d="M887.260000,1328.480000Q887.620000,1320.590000,887.630000,1312.600000C887.630000,1122.890000,733.840000,969.100000,544.130000,969.100000C354.420000,969.100000,200.630000,1122.890000,200.630000,1312.600000Q200.630000,1320.600000,201,1328.480000Z" transform="matrix(1 0 0 1 0 2)" fill="rgb(108,168,67)" stroke="none" stroke-width="1"/>
<polygon id="ewghbn0ncza897" points="2512.140000,177.220000 2514.080000,177.220000 2514.730000,177.220000 2516.680000,177.220000 2522.510000,668.950000 2514.730000,668.950000 2514.080000,668.950000 2506.300000,668.950000 2512.140000,177.220000" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<g id="ewghbn0ncza898_tr" transform="translate(2514.973677,178.605523) rotate(0)">
<g id="ewghbn0ncza898" transform="translate(-2514.973677,-178.605523)">
<path id="ewghbn0ncza899" d="M2518.820000,185.060000L2545.820000,298.180000C2545.820000,298.180000,2541.570000,300.040000,2540.240000,295.740000C2537.830000,287.920000,2509.380000,200.030000,2509.380000,200.030000L2515.850000,191.900000L2515,185.580000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8100" d="M2508.090000,180.090000L2396.240000,148.220000C2396.240000,148.220000,2396.700000,143.600000,2401.100000,144.550000C2409.100000,146.270000,2499.660000,164.550000,2499.660000,164.550000L2503.580000,174.180000L2509.500000,176.530000Z" transform="matrix(1 0 0 1 -0.05499999999984 -1.48447731000002)" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8101" d="M2517.550000,172.690000L2601.260000,91.940000C2601.260000,91.940000,2605.020000,94.660000,2601.990000,97.940000C2596.490000,103.990000,2535.230000,173.150000,2535.230000,173.150000L2524.930000,171.710000L2519.930000,175.650000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
</g>
</g>
<path id="ewghbn0ncza8102" d="M2521,172C2518.327469,169.562605,2514.449551,168.975789,2511.175522,170.513337C2507.901493,172.050884,2505.876564,175.409792,2506.045482,179.022933C2506.214401,182.636074,2508.543879,185.791408,2511.947078,187.016787C2515.350277,188.242167,2519.156531,187.296107,2521.590000,184.620000C2524.902706,180.968817,2524.638907,175.326187,2521,172Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8103" d="M486.530000,1016.550000C486.530000,957.230000,469.710000,888.600000,435.460000,888.600000C401.210000,888.600000,384.400000,957.230000,384.400000,1016.550000C384.400000,1038.280000,401.220000,1055.910000,435.460000,1055.910000C469.700000,1055.910000,486.530000,1038.290000,486.530000,1016.550000Z" fill="rgb(190,210,109)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8104" d="M486.530000,1016.550000C486.530000,957.230000,469.710000,888.600000,435.460000,888.600000L435.460000,1055.910000C469.710000,1055.910000,486.530000,1038.290000,486.530000,1016.550000Z" fill="rgb(160,186,60)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8105" d="M435.470000,1117.630000C434.218178,1117.630000,433.017628,1117.132716,432.132456,1116.247544C431.247284,1115.362372,430.750000,1114.161822,430.750000,1112.910000L430.750000,966.460000C430.750000,964.773706,431.649627,963.215507,433.110000,962.372360C434.570373,961.529213,436.369627,961.529213,437.830000,962.372360C439.290373,963.215507,440.190000,964.773706,440.190000,966.460000L440.190000,1112.910000C440.190000,1114.161822,439.692716,1115.362372,438.807544,1116.247544C437.922372,1117.132716,436.721822,1117.630000,435.470000,1117.630000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8106" d="M435.470000,1024.620000C434.217462,1024.622405,433.015552,1024.125808,432.130000,1023.240000L410.370000,1001.470000C408.525369,999.625369,408.525369,996.634631,410.370000,994.790000C412.214631,992.945369,415.205369,992.945369,417.050000,994.790000L438.820000,1016.560000C440.173289,1017.911279,440.577449,1019.945610,439.843459,1021.711568C439.109469,1023.477526,437.382410,1024.626052,435.470000,1024.620000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8107" d="M435.470000,1005.620000C433.559411,1005.621990,431.836067,1004.471976,431.104647,1002.706933C430.373228,1000.941889,430.778014,998.909995,432.130000,997.560000L461.030000,968.660000C462.223267,967.466733,463.962492,967.000709,465.592525,967.437475C467.222558,967.874241,468.495759,969.147442,468.932525,970.777475C469.369291,972.407508,468.903267,974.146733,467.710000,975.340000L438.810000,1004.240000C437.924448,1005.125808,436.722538,1005.622405,435.470000,1005.620000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<circle id="ewghbn0ncza8108" r="60" transform="matrix(1 0 0 1 1738.25000000000000 913.33000000000004)" fill="rgb(168,211,111)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8109" d="M1798.290000,913.380000C1798.290000,880.242915,1771.427085,853.380000,1738.290000,853.380000L1738.290000,973.380000C1771.427085,973.380000,1798.290000,946.517085,1798.290000,913.380000Z" fill="rgb(108,168,57)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8110" d="M1738.290000,1008.150000C1737.196535,1008.123640,1736.316360,1007.243465,1736.290000,1006.150000L1736.290000,922C1736.290000,920.867816,1737.207816,919.950000,1738.340000,919.950000C1739.472184,919.950000,1740.390000,920.867816,1740.390000,922L1740.390000,1006.090000C1740.358651,1007.181321,1739.481321,1008.058651,1738.390000,1008.090000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8111" d="M1738.290000,954.740000C1737.439524,954.791078,1736.650060,954.297751,1736.323165,953.510949C1735.996270,952.724146,1736.203721,951.816628,1736.840000,951.250000L1749.340000,938.750000C1750.138051,937.951949,1751.431949,937.951949,1752.230000,938.750000C1753.028051,939.548051,1753.028051,940.841949,1752.230000,941.640000L1739.730000,954.140000C1739.351003,954.526672,1738.831428,954.743162,1738.290000,954.740000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8112" d="M1738.290000,943.830000C1737.746219,943.830229,1737.224626,943.614397,1736.840000,943.230000L1720.250000,926.640000C1719.451949,925.841949,1719.451949,924.548051,1720.250000,923.750000C1721.048051,922.951949,1722.341949,922.951949,1723.140000,923.750000L1739.730000,940.340000C1740.124273,940.717285,1740.347258,941.239294,1740.347258,941.785000C1740.347258,942.330706,1740.124273,942.852715,1739.730000,943.230000C1739.351003,943.616672,1738.831428,943.833162,1738.290000,943.830000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8113" d="M722.470000,1136.130000C722.470000,1098.650000,711.840000,1055.280000,690.200000,1055.280000C668.560000,1055.280000,657.940000,1098.640000,657.940000,1136.130000C657.940000,1149.860000,668.570000,1161,690.200000,1161C711.830000,1161,722.470000,1149.860000,722.470000,1136.130000Z" fill="rgb(190,210,109)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8114" d="M722.470000,1136.130000C722.470000,1098.650000,711.840000,1055.280000,690.200000,1055.280000L690.200000,1161C711.840000,1161,722.470000,1149.860000,722.470000,1136.130000Z" fill="rgb(160,186,60)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8115" d="M690.200000,1200C688.543146,1200,687.200000,1198.656854,687.200000,1197L687.200000,1104.470000C687.200000,1102.813146,688.543146,1101.470000,690.200000,1101.470000C691.856854,1101.470000,693.200000,1102.813146,693.200000,1104.470000L693.200000,1197C693.200000,1198.656854,691.856854,1200,690.200000,1200Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8116" d="M690.200000,1141.220000C689.409514,1141.219313,688.651245,1140.906662,688.090000,1140.350000L674.340000,1126.590000C673.371093,1125.396831,673.460702,1123.664378,674.547540,1122.577540C675.634378,1121.490702,677.366831,1121.401093,678.560000,1122.370000L692.310000,1136.130000C693.144618,1136.989217,693.388123,1138.262571,692.929420,1139.369111C692.470716,1140.475651,691.397731,1141.203270,690.200000,1141.220000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8117" d="M690.200000,1129.220000C689.002269,1129.203270,687.929284,1128.475651,687.470580,1127.369111C687.011877,1126.262571,687.255382,1124.989217,688.090000,1124.130000L706.350000,1105.870000C707.543169,1104.901093,709.275622,1104.990702,710.362460,1106.077540C711.449298,1107.164378,711.538907,1108.896831,710.570000,1110.090000L692.310000,1128.350000C691.748755,1128.906662,690.990486,1129.219313,690.200000,1129.220000Z" fill="rgb(49,49,49)" stroke="none" stroke-width="1"/>
<polygon id="ewghbn0ncza8118" points="3120.110000,305.780000 3121.570000,305.780000 3122.060000,305.780000 3123.510000,305.780000 3127.900000,674.950000 3122.060000,674.950000 3121.570000,674.950000 3115.720000,674.950000 3120.110000,305.780000" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<g id="ewghbn0ncza8119_tr" transform="translate(3120.360083,306.520061) rotate(0)">
<g id="ewghbn0ncza8119" transform="translate(-3120.360083,-306.520061)">
<path id="ewghbn0ncza8120" d="M3125,305L3212.090000,311.300000C3212.090000,311.300000,3212.460000,314.760000,3209.090000,314.740000C3202.950000,314.740000,3133.590000,315.140000,3133.590000,315.140000L3129.230000,308.660000L3124.520000,307.840000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8121" d="M3116.110000,303.410000L3077.840000,224.930000C3077.840000,224.930000,3080.650000,222.870000,3082.330000,225.810000C3085.380000,231.140000,3120.570000,290.910000,3120.570000,290.910000L3117.150000,297.910000L3118.800000,302.400000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8122" d="M3118.700000,311.900000L3069,383.720000C3069,383.720000,3065.830000,382.280000,3067.570000,379.380000C3070.730000,374.110000,3105.570000,314.150000,3105.570000,314.150000L3113.360000,313.690000L3116.460000,310.050000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
</g>
</g>
<path id="ewghbn0ncza8123" d="M3127.070000,306.570000C3127.090181,303.855251,3125.472531,301.395835,3122.971771,300.339204C3120.471011,299.282573,3117.579959,299.836954,3115.647449,301.743698C3113.714938,303.650442,3113.121803,306.533792,3114.144773,309.048509C3115.167743,311.563226,3117.605225,313.213741,3120.320000,313.230000C3122.098686,313.243306,3123.809662,312.548779,3125.075832,311.299492C3126.342001,310.050205,3127.059430,308.348705,3127.070000,306.570000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<polygon id="ewghbn0ncza8124" points="2849.430000,373.140000 2848,373.140000 2847.520000,373.140000 2846.090000,373.140000 2841.790000,676.130000 2847.520000,676.130000 2848,676.130000 2853.740000,676.130000 2849.430000,373.140000" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<g id="ewghbn0ncza8125_tr" transform="translate(2848.990000,373.870189) rotate(0)">
<g id="ewghbn0ncza8125" transform="translate(-2848.990000,-373.870189)">
<path id="ewghbn0ncza8126" d="M2850.810000,379.140000L2899.530000,449.590000C2899.530000,449.590000,2902.640000,448.170000,2900.930000,445.330000C2897.830000,440.160000,2863.640000,381.330000,2863.640000,381.330000L2856,380.880000L2853,377.310000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8127" d="M2844.650000,372.360000L2759.220000,378.540000C2759.220000,378.540000,2758.860000,381.940000,2762.220000,381.910000C2768.220000,381.910000,2836.280000,382.300000,2836.280000,382.300000L2840.550000,375.940000L2845.180000,375.140000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8128" d="M2853.360000,370.810000L2890.900000,293.810000C2890.900000,293.810000,2888.140000,291.810000,2886.500000,294.670000C2883.500000,299.900000,2848.990000,358.530000,2848.990000,358.530000L2852.340000,365.420000L2850.720000,369.820000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
</g>
</g>
<path id="ewghbn0ncza8129" d="M2842.610000,373.920000C2842.582492,370.280597,2845.510474,367.307958,2849.149876,367.280380C2852.789279,367.252802,2855.761974,370.180727,2855.789622,373.820129C2855.817270,377.459531,2852.889402,380.432282,2849.250000,380.460000C2847.502208,380.473311,2845.820719,379.791744,2844.575467,378.565245C2843.330214,377.338746,2842.623211,375.667792,2842.610000,373.920000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<polygon id="ewghbn0ncza8130" points="2981.090000,143.990000 2979.170000,143.990000 2978.520000,143.990000 2976.600000,143.990000 2970.830000,631.740000 2978.520000,631.740000 2979.170000,631.740000 2986.850000,631.740000 2981.090000,143.990000" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<g id="ewghbn0ncza8131_tr" transform="translate(2978.509871,138.280129) rotate(0)">
<g id="ewghbn0ncza8131" transform="translate(-2978.509871,-138.280129)">
<path id="ewghbn0ncza8132" d="M2984.580000,140.350000L3099.280000,132.900000C3099.280000,132.900000,3099.800000,128.340000,3095.350000,128.340000C3087.270000,128.340000,2995.970000,127.100000,2995.970000,127.100000L2990.170000,135.590000L2983.960000,136.590000Z" transform="matrix(1 0 0 1 -0.09366059000013 -0.09500000000000)" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8133" d="M2976.380000,131.190000L2911.700000,36.190000C2911.700000,36.190000,2907.510000,38.060000,2909.770000,41.890000C2913.880000,48.890000,2959.180000,128.120000,2959.180000,128.120000L2969.430000,128.800000L2973.480000,133.630000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8134" d="M2972.890000,142.350000L2921.760000,245.290000C2921.760000,245.290000,2925.440000,248.030000,2927.670000,244.180000C2931.730000,237.180000,2978.670000,158.860000,2978.670000,158.860000L2974.240000,149.580000L2976.460000,143.690000Z" transform="matrix(1 0 0 1 0.17000000000007 -0.19525371000000)" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
</g>
</g>
<path id="ewghbn0ncza8135" d="M2987.340000,138.280000C2987.340000,141.851402,2985.188640,145.071140,2981.889095,146.437856C2978.589550,147.804573,2974.791609,147.049115,2972.266247,144.523753C2969.740885,141.998391,2968.985427,138.200450,2970.352144,134.900905C2971.718860,131.601360,2974.938598,129.450000,2978.510000,129.450000C2983.386674,129.450000,2987.340000,133.403326,2987.340000,138.280000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<polygon id="ewghbn0ncza8136" points="2684.130000,246.040000 2685.590000,246.040000 2686.080000,246.040000 2687.530000,246.040000 2691.920000,615.210000 2686.080000,615.210000 2685.590000,615.210000 2679.750000,615.210000 2684.130000,246.040000" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<g id="ewghbn0ncza8137_tr" transform="translate(2685.835000,247.105491) rotate(0)">
<g id="ewghbn0ncza8137" transform="translate(-2685.835000,-247.105491)">
<path id="ewghbn0ncza8138" d="M2689.150000,251.930000L2709.440000,336.860000C2709.440000,336.860000,2706.250000,338.260000,2705.250000,335.020000C2703.440000,329.150000,2682.080000,263.160000,2682.080000,263.160000L2686.940000,257.050000L2686.300000,252.310000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8139" d="M2681.090000,248.190000L2597.090000,224.270000C2597.090000,224.270000,2597.440000,220.800000,2600.740000,221.520000C2606.740000,222.810000,2674.740000,236.520000,2674.740000,236.520000L2677.680000,243.750000L2682.130000,245.520000Z" transform="matrix(1 0 0 1 0 -0.08629099999999)" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
<path id="ewghbn0ncza8140" d="M2688.190000,242.640000L2751,182C2751,182,2753.820000,184,2751.540000,186.540000C2747.410000,191.080000,2701.420000,243,2701.420000,243L2693.690000,241.920000L2689.930000,244.920000Z" transform="matrix(1 0 0 1 0 -0.08629099999999)" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
</g>
</g>
<path id="ewghbn0ncza8141" d="M2690.770000,242.150000C2688.764848,240.319361,2685.854099,239.877527,2683.396027,241.030677C2680.937954,242.183826,2679.417073,244.704659,2679.543088,247.416852C2679.669104,250.129046,2681.417176,252.497995,2683.971584,253.418252C2686.525993,254.338508,2689.383232,253.628680,2691.210000,251.620000C2693.699931,248.882119,2693.503073,244.645208,2690.770000,242.150000Z" fill="rgb(138,148,156)" stroke="none" stroke-width="1"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 61 KiB

View File

@ -1,16 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>TBZ-Logo</title>
</head>
<body>
<h1>Sehen Sie einen Unterschied?</h1>
<object data="tbz_logo.png" ></object>
<br>
<object data="tbz_logo.svg" ></object>
<br>
<object data="tbz_logo_Blink.svg" ></object>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -1,25 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="230pt" height="180pt" viewBox="0 0 300 200"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M10 1270 l0 -90 100 0 100 0 0 -270 0 -270 115 0 115 0 0 270 0 270
100 0 100 0 0 90 0 90 -315 0 -315 0 0 -90z"/>
<path d="M690 1000 l0 -361 253 3 c238 3 254 4 294 25 105 57 148 183 97 284
-13 26 -63 74 -85 81 -6 2 4 19 24 39 78 78 53 213 -48 264 -36 18 -64 20
-287 23 l-248 3 0 -361z m398 174 c29 -20 29 -59 -2 -79 -17 -12 -43 -15 -96
-13 l-73 3 1 48 c0 26 1 49 1 52 1 3 34 5 74 5 49 0 80 -5 95 -16z m-9 -234
c41 -12 51 -24 51 -67 0 -50 -30 -64 -130 -61 l-82 3 0 63 c1 34 1 64 1 67 1
9 125 5 160 -5z"/>
<path d="M1400 1270 l0 -90 155 0 c85 0 155 -3 155 -6 0 -3 -74 -85 -165 -182
l-164 -177 -1 -87 0 -88 325 0 325 0 0 90 0 90 -176 0 c-107 0 -174 4 -172 10
2 5 76 90 166 189 l162 180 0 81 0 80 -305 0 -305 0 0 -90z"/>
<path d="M2790 1297 l0 -63 -37 -13 c-142 -50 -293 -200 -349 -347 l-17 -44
-63 0 -64 0 0 -95 0 -95 365 0 365 0 0 360 0 360 -100 0 -100 0 0 -63z m0
-377 l0 -90 -90 0 c-49 0 -90 4 -90 9 0 30 142 171 172 171 4 0 8 -40 8 -90z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -1,60 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="230pt" height="180pt" viewBox="0 0 300 200"
preserveAspectRatio="xMidYMid meet">
<g id="TBZ-Logo" transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M10 1270 l0 -90 100 0 100 0 0 -270 0 -270 115 0 115 0 0 270 0 270
100 0 100 0 0 90 0 90 -315 0 -315 0 0 -90z"/>
<path d="M690 1000 l0 -361 253 3 c238 3 254 4 294 25 105 57 148 183 97 284
-13 26 -63 74 -85 81 -6 2 4 19 24 39 78 78 53 213 -48 264 -36 18 -64 20
-287 23 l-248 3 0 -361z m398 174 c29 -20 29 -59 -2 -79 -17 -12 -43 -15 -96
-13 l-73 3 1 48 c0 26 1 49 1 52 1 3 34 5 74 5 49 0 80 -5 95 -16z m-9 -234
c41 -12 51 -24 51 -67 0 -50 -30 -64 -130 -61 l-82 3 0 63 c1 34 1 64 1 67 1
9 125 5 160 -5z"/>
<path d="M1400 1270 l0 -90 155 0 c85 0 155 -3 155 -6 0 -3 -74 -85 -165 -182
l-164 -177 -1 -87 0 -88 325 0 325 0 0 90 0 90 -176 0 c-107 0 -174 4 -172 10
2 5 76 90 166 189 l162 180 0 81 0 80 -305 0 -305 0 0 -90z"/>
<path d="M2790 1297 l0 -63 -37 -13 c-142 -50 -293 -200 -349 -347 l-17 -44
-63 0 -64 0 0 -95 0 -95 365 0 365 0 0 360 0 360 -100 0 -100 0 0 -63z m0
-377 l0 -90 -90 0 c-49 0 -90 4 -90 9 0 30 142 171 172 171 4 0 8 -40 8 -90z"/>
</g>
<script>
var blinkFunction = null;
var blinking = false;
var logoElement;
function SwitchBlinker()
{
if (blinkFunction){
clearInterval(blinkFunction);
blinkFunction = null;
} else {
blinkFunction = window.setInterval(blink, 100);
}
}
function blink()
{
if (blinking !== true) {
logoElement.setAttribute("fill", "blue");
logoElement.setAttribute("stroke", "#0000FF");
logoElement.setAttribute("stroke-width", "30");
} else {
logoElement.setAttribute("fill", "black");
logoElement.setAttribute("stroke", "#000000");
logoElement.setAttribute("stroke-width", "0");
}
blinking = !blinking;
}
logoElement = document.getElementById("TBZ-Logo");
logoElement.addEventListener("click", SwitchBlinker);
</script>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -1,44 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<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>Scroll-Activated Animations</title>
</head>
<body>
<div>
<h1>Titel</h1>
<div id="hier"></div>
</div>
<script>
let generatedCount = 0;
let divElement = document.getElementById("hier");
document.addEventListener("scroll", doOnScroll);
function fillDocument() {
for (let index = 0; index < 100; index++) {
generatedCount++;
let newElement = document.createElement("h2");
newElement.innerHTML = `hallo ${generatedCount}`
divElement.appendChild(newElement);
}
}
function doOnScroll() {
if (window.innerHeight + window.scrollY + 500 > document.body.clientHeight) {
//console.log(`scrolled ${window.innerHeight} / ${window.scrollY} / ${document.body.clientHeight}`)
fillDocument();
}
}
fillDocument();
</script>
</body>
</html>

View File

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title></title>
</head>
<body>
<p><a href="https://www.nrwision.de/mitmachen/wissen/videoformate-vergleich">https://www.nrwision.de/mitmachen/wissen/videoformate-vergleich</a></p>
<p><a href="https://www.magix.com/de/videos-bearbeiten/video-formate/">https://www.magix.com/de/videos-bearbeiten/video-formate</a></p>
<p><a href="https://www.netzsieger.de/ratgeber/videoformate">https://www.netzsieger.de/ratgeber/videoformate</a></p>
<p><a href="https://blog.mynd.com/de/wichtigsten-videoformate">https://blog.mynd.com/de/wichtigsten-videoformate</a></p>
<p><a href="https://lehrerfortbildung-bw.de/st_digital/medienwerkstatt/multimedia/video/formate/">https://lehrerfortbildung-bw.de/st_digital/medienwerkstatt/multimedia/video/formate</a></p>
<p><a href="https://computerwelt.at/news/die-wichtigsten-videoformate-im-vergleich/">https://computerwelt.at/news/die-wichtigsten-videoformate-im-vergleich</a></p>
<p><a href="https://www.softguide.de/software-tipps/videoformate">https://www.softguide.de/software-tipps/videoformate</a></p>
</body>
</html>

View File

@ -1,3 +0,0 @@
## CSS
[CSS img positionieren und zentrieren](https://www.mediaevent.de/css/img.html)

View File

@ -1,5 +0,0 @@
## Templates
[free-responsive-html5-web-templates](https://speckyboy.com/free-responsive-html5-web-templates)
Es gibt im Internet noch viele weitere solche Seiten

View File

@ -1,12 +0,0 @@
## Urheberrecht
[Bundesgesetz über das Urheberrecht und verwandte Schutzrechte](https://www.admin.ch/opc/de/classified-compilation/19920251/)
[Eidgenössisches Institut für Geistiges Eigentum (IGE)](https://www.ige.ch/de.html)
[Impressumspflicht Schweiz (WEKA-Artikel 2018)](https://www.weka.ch/themen/marketing-verkauf/online-marketing/e-commerce/article/impressumspflicht-schweiz-so-erstellen-sie-rechtssichere-websites)
[Urheberrecht (Schweiz)](https://de.wikipedia.org/wiki/Urheberrecht_(Schweiz))
[Urheberrechtsgesetz (Schweiz)](https://de.wikipedia.org/wiki/Urheberrechtsgesetz_(Schweiz))

View File

@ -1,8 +0,0 @@
## Wireframes, Mockups
- [https://app.moqups.com](https://app.moqups.com)
- [https://thedigitalprojectmanager.com/de/die-10-besten-wireframe-tools](https://thedigitalprojectmanager.com/de/die-10-besten-wireframe-tools)
- [https://www.iqual.ch/de/internet-glossar/mockups](https://www.iqual.ch/de/internet-glossar/mockups)
- [https://www.webschmoeker.de/webdesign/unterschied-wireframe-und-mockup](https://www.webschmoeker.de/webdesign/unterschied-wireframe-und-mockup)
- [https://www.lucidchart.com/pages/de/was-sind-website-wireframes](https://www.lucidchart.com/pages/de/was-sind-website-wireframes)
- [https://www.iqual.ch/de/internet-glossar/wireframes](https://www.iqual.ch/de/internet-glossar/wireframes)