From 4b607fb8cbd1cee67e73c5bb0c60c1adddf51211 Mon Sep 17 00:00:00 2001 From: Anne-Victoria <Anne-Victoria@users.noreply.github.com> Date: Mon, 13 Dec 2021 18:13:24 +0100 Subject: [PATCH] Update guide for speakers for 2021 --- public/index.html | 6 +- public/speakersdesk.html | 648 +++++++++++++++++++-------------------- 2 files changed, 323 insertions(+), 331 deletions(-) diff --git a/public/index.html b/public/index.html index d9ec7f1..351a2f6 100644 --- a/public/index.html +++ b/public/index.html @@ -154,8 +154,7 @@ <li> Wir haben eine <a href="speakersdesk.html" - >Checkliste mit Accessibility-relevanten Punkten für den - Speakersdesk</a + >Checkliste mit Accessibility-relevanten Punkten für Vortragende</a > gemacht </li> @@ -231,8 +230,7 @@ <li> We made a <a href="speakersdesk.html#english" - >checklist with things that are relevant for accessibility for - the Speakers Desk</a + >checklist with things that are relevant for accessibility of talks</a > </li> diff --git a/public/speakersdesk.html b/public/speakersdesk.html index ba3032c..e95dd7f 100644 --- a/public/speakersdesk.html +++ b/public/speakersdesk.html @@ -1,340 +1,334 @@ <!DOCTYPE html> <html lang="de"> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>C3 Inclusion Operation Center</title> - <link rel="stylesheet" href="styles/style.css" /> - <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> - <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> - <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> - <link rel="manifest" href="/site.webmanifest" /> - <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#c31fba" /> - <meta name="msapplication-TileColor" content="#da532c" /> - <meta name="theme-color" content="#ffffff" /> - </head> - <body class="font-Ubuntu"> - <header> - <div class="js no-print" lang="en" id="accessibility-options"> - <button class="no-print" type="button"> - Accessibility Options - </button> - <fieldset class="display-none" id="font-selection"> - <legend class="font-Ubuntu">Font</legend> - <ul> - <li> - <label - for="font-AtkinsonHyperlegible" - class="font-AtkinsonHyperlegible" - > - <input - type="radio" - name="font" - id="font-AtkinsonHyperlegible" - value="AtkinsonHyperlegible" - />Atkinson Hyperlegible</label - > - </li> - <li> - <label - for="font-OpenDyslexicThree" - class="font-OpenDyslexicThree" - > - <input - type="radio" - name="font" - id="font-OpenDyslexicThree" - value="OpenDyslexicThree" - />Open Dyslexic</label - > - </li> - <li> - <label for="font-SylexiadSans" class="font-SylexiadSans"> - <input - type="radio" - name="font" - id="font-SylexiadSans" - value="SylexiadSans" - />Sylexiad Sans</label - > - </li> - <li> - <label for="font-Ubuntu" class="font-Ubuntu"> - <input - type="radio" - name="font" - id="font-Ubuntu" - value="Ubuntu" - checked - />Ubuntu</label - > - </li> - <li> - <label for="font-serif" class="font-serif" - ><input - type="radio" - name="font" - id="font-serif" - value="serif" - />serif</label - > - </li> - <li> - <label for="font-sans" class="font-sans"> - <input - type="radio" - name="font" - id="font-sans" - value="sans" - checked - />sans-serif</label - > - </li> - </ul> - </fieldset> - </div> - <h1><a href="index.html"> C3 Inclusion Operation Center</a></h1> - <a href="#english" lang="en" class="skiplink no-print" - >Go to English content</a - > - </header> - <label class="no-js no-print" for="toggle">OpenDyslexic Font</label> - <input class="no-js no-print" type="checkbox" id="toggle" /> - <div class="fontchange"> - <main> - <section lang="de" id="deutsch"> - <p class="lang">Deutsch</p> - <h2>Accessibility-Tipps für den Speakersdesk</h2> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>C3 Inclusion Operation Center</title> + <link rel="stylesheet" href="styles/style.css" /> + <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> + <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> + <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> + <link rel="manifest" href="/site.webmanifest" /> + <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#c31fba" /> + <meta name="msapplication-TileColor" content="#da532c" /> + <meta name="theme-color" content="#ffffff" /> +</head> - <b>Hallo lieber Speakersdesk</b> - <p> - Das Team c3 Inklusion Operations Center möchte andere Teams dabei - unterstützten, den Congress barrierefreier gestalten. Daher würden - wir es freuen, wenn ihr die Punkte unten an die Vortragenden - kommuniziert. - </p> - <p> - Das sind zum einen Punkte, die spezifisch für Barrierefreiheit - wichtig sind. Diese könnten extra Erwähnung in den Informationen für - Vortragende finden. ZUm andern sind es Punkte, die sowieso wichtig - sind, aber bei Barrierefreiheit helfen. - </p> - <p> - Eine kleine Anmerkung noch zu den allgemeinen Punkten: Uns ist klar, - dass zum Beispiel kaum wer rechtzeitig die Folien einreicht. Wir - hoffen aber, dass die Erwähnung von Barrierefreiheit die - Vortragenden zusätzlich motiviert. - </p> - <h3>Spezifische Informationen für Vortragende</h3> +<body class="font-Ubuntu"> + <header> + <div class="js no-print" lang="en" id="accessibility-options"> + <button class="no-print" type="button"> + Accessibility Options + </button> + <fieldset class="display-none" id="font-selection"> + <legend class="font-Ubuntu">Font</legend> - Du verwendest in deinem Vortrag - <b>visuelles Flackern, Audioglitching, laute Geräusche</b> oder - ähnliches? - <ul> - <li> - Gib eine Warnung, bevor es losgeht. Gib eine Entwarnung wenn es - vorbei ist. - </li> - <li> - Sag vorher beim Speakersdesk bescheid: das VOC kann dich für die - Warnung mit Bauchbinden, Glöckchen usw unterstützen. - </li> - </ul> - <p> - <b>Bitte nutze Content Notes</b>, wenn du wirklich über bestimmte - Themen sprechen möchtest, mit denen nicht jede:r unerwartet - konfrontiert werden möchte. - </p> - <p> - <i - >Content Note: Hier folgt eine Liste an Themen bei denen eine - Kennzeichnung gut ist. - </i> - </p> + <ul> + <li> + <label for="font-AtkinsonHyperlegible" + class="font-AtkinsonHyperlegible"> + <input type="radio" name="font" id="font-AtkinsonHyperlegible" + value="AtkinsonHyperlegible" />Atkinson Hyperlegible</label> + </li> + <li> + <label for="font-OpenDyslexicThree" class="font-OpenDyslexicThree"> + <input type="radio" name="font" id="font-OpenDyslexicThree" + value="OpenDyslexicThree" />Open Dyslexic</label> + </li> + <li> + <label for="font-SylexiadSans" class="font-SylexiadSans"> + <input type="radio" name="font" id="font-SylexiadSans" + value="SylexiadSans" />Sylexiad Sans</label> + </li> + <li> + <label for="font-Ubuntu" class="font-Ubuntu"> + <input type="radio" name="font" id="font-Ubuntu" value="Ubuntu" + checked />Ubuntu</label> + </li> + <li> + <label for="font-serif" class="font-serif"><input type="radio" + name="font" id="font-serif" value="serif" />serif</label> + </li> + <li> + <label for="font-sans" class="font-sans"> + <input type="radio" name="font" id="font-sans" value="sans" + checked />sans-serif</label> + </li> + </ul> + </fieldset> + </div> + <h1><a href="index.html"> C3 Inclusion Operation Center</a></h1> + <a href="#english" lang="en" class="skiplink no-print">Go to English + content</a> + </header> + <label class="no-js no-print" for="toggle">OpenDyslexic Font</label> + <input class="no-js no-print" type="checkbox" id="toggle" /> + <div class="fontchange"> + <main> + <section lang="de" id="deutsch"> + <p class="lang">Deutsch</p> + <h2>Barrierereduzierung bei Vorträgen</h2> + <p>In diesem Guide haben wir ein paar Tips zusammengetragen, wie + Vortragende Barrieren bei ihren Voträgen + reduzieren können.</p> + + <h3>Content Notes</h3> + <h4>Wieso Content Notes?</h4> + + <ul> + <li>Content Notes ermöglichen Zuschauenden im Vorhinein zu wissen, was + sie erwartet.</li> + <li>Content Notes ermöglicht Teilnahme an Talks und “Aussetzen” an den + Stellen, die Personen sich nicht zumuten wollen.</li> + <li>Content Notes ermöglicht es, informierte Entscheidung für Personen + mit Phobien oder Traumata etc., ob sie sich dem Content aussetzen + möchten.</li> + <li>Die Verwendung von Content Notes trägt dazu bei, zu verhindern, + ungewollt an traumatische/ verletzende Situationen erinnert zu + werden und sie erneut zu durchleben</li> + <li>Es geht nicht darum, Themen zu verbieten, sondern um eine + Ankündigung der Themen.</li> + <li>Content Notes ermöglichen den Einsatz von audio-visuellen + Effekten, ohne Menschen ungewollten Reizen auszusetzen.</li> + <li>Content Notes vermitteln, dass Menschen sich Gedanken gemacht + haben und tragen zum Vertrauensaufbau bei.</li> + </ul> + <h4>Umsetzung in der Praxis</h4> + <ul> + <li>Am Anfang des Vortrags Content Notes benennen und einblenden.</li> + <li>Auf Content Notes sollte sowohl gesprochen als auch visuell + hingewiesen werden, damit jede*r diese mit bekommt.</li> + <li>Vor der entsprechenden Stelle Content Notes benennen und + einblenden.</li> + <li>In der Ankündigung im Fahrplan Content Notes bereits in der + Beschreibung benennen (idealerweise kriegt der Fahrplan + perspektivisch ein Feld zum Ankreuzen, dann werden alle daran + erinnert, darüber nachzudenken, ob Content Notes für ihren Talk + nötig sind).</li> + </ul> + <h4>Liste von Inhalten</h4> + <p> + Diese Liste dient zur Orientierung. Überlege, ob welche dieser Themen + in + deinem Vortrag vorkommen. Wenn dies zutrifft, ist eine Content Note + sinnvoll. Diese Liste erhebt jedoch keinen Anspruch auf + Vollständigkeit. + </p> + <p>Allgemein bekannte Themen sind auf der Liste eher weiter unten.</p> + <p> + <i>Content Note: Hier folgt eine Liste an Themen bei denen eine + Kennzeichnung gut ist. + </i> + </p> - <ul> - <li> - Thematisierung von Essen, Essstörungen und negativen Körperbildern - </li> - <li>sozial- und Beziehungskonflikte</li> - <li>verbreitete Phobien (z.Bsp: Spinnen)</li> - <li> - Diskriminierung (z.Bsp: Sexismus, Rassismus, Queerfeindlichkeit, - Antisemitismus, Ableismus, Klassismus) - </li> - <li>Alkohol, Drogen und Sucht</li> - <li> - Schwangerschaften, Geburten sowie insbesondere Abtreibungen und - Fehlgeburten - </li> - <li>Sexualität, Erotik</li> - <li>Krankheiten, Verletzungen, Blut</li> - <li> - psychische Störungen, Probleme bezüglich mentaler Gesundheit - </li> - <li>Selbstverletzendes Verhalten </li> - <li>Gewalt, Krieg, schwere Verbrechen</li> - <li>Tod, Sterben, Suizid</li> - </ul> - <p> - Überlege, ob dein Vortrag auch verständlich ist, wenn Menschen die + <ul> + <li> + Thematisierung von Essen, Essstörungen und negativen Körperbildern + </li> + <li>soziale und Beziehungskonflikte</li> + <li>verbreitete Phobien (z.Bsp: Spinnen, Nadeln)</li> + <li> + Diskriminierung (z.Bsp: Sexismus, Rassismus, Queerphobie, + Antisemitismus, Ableismus, Klassismus) + </li> + <li>Drogen, Sucht und Alkohol</li> + <li> + Schwangerschaften, Geburten sowie insbesondere Abtreibungen und + Fehlgeburten + </li> + <li>Sexualität, Erotik</li> + <li>Krankheiten inklusive COVID-19 (Corona), Verletzungen, Blut</li> + <li> + psychische Störungen, Probleme bezüglich mentaler Gesundheit + </li> + <li>selbstverletzendes Verhalten </li> + <li>Gewalt, Krieg, schwere Verbrechen</li> + <li>Tod, Sterben, Suizid</li> + <li>Erschrecken produzierende Töne oder Effekte</li> + </ul> + <h4>Einsatz von audiovisuellen Effekten</h4> + <p> + Du möchtest in deinem Vortrag visuelles Flackern, Audioglitching, + laute Geräusche oder ähnliches verwenden? + </p> + <ul> + <li>Bitte nutze Content Notes.</li> + <li>Gib eine Warnung, bevor es losgeht und eine Entwarnung wenn es + vorbei ist.</li> + <li>Das VOC kann dich dabei mit Bauchbinden, Glöckchen usw + unterstützen.</li> + </ul> + <h3> + Empfehlungen zu Ton und Bild + </h3> + <ul> + <li>Bitte verwende eine gut leserliche Schriftart in angemessener + Schriftgröße mit genug Helligkeitskontrast zum Hintergrund. Dies + macht deine Präsentation für alle besser lesbar.</li> + <li>Überlege, ob dein Vortrag auch verständlich ist, wenn Menschen die Präsentation nicht sehen können. Und egal, ob es ein Diagramm ist - oder ein Meme: versuche, rein visuelle Inhalte zusätzlich treffend - zu kommentieren. (Das darf bei Memes auch gern sehr albern sein) - </p> - <b>Tl;dr von den spezifischen Informationen</b> - <ul> - <li>Bei Flackern, Audioglitching usw bitte Vor- und Entwarnen.</li> - <li>Bitte nutzt Content Notes bei sensiblen Themen.</li> - <li> - Rein visuelles Inhalte wenn's geht passend beschreiben. - </li> - </ul> - <h3> - Punkte, die für alle wichtig sind, aber auch bei Barrierefreiheit - helfen: - </h3> - <ul> - <li> - Eine gut leserliche Schriftart in angemessener Schriftgröße hilft - allen, ebenso wie genug Helligkeitskontrast zum Hintergrund. - </li> - <li> - Wenn ihr Folien vorher einreicht, hat euch nicht nur der - Speakersdesk ganz doll lieb. Ihr macht damit auch eure Vorträge - barrierefreier, für Wesen, die die Folien im Stream ggf. nicht gut - genug erkennen können. Sie können dann nämlich zusätzlich als - Präsentation bereitgestellt werden. - </li> - <li> - Bitte gebt wirklich auf gute Audioqualität acht. - </li> - </ul> - Es wäre super, wenn das in die Informationen an die Vortragenden - aufgenommen werden könnte.<br />Bei Rückfragen könnt ihr uns per Mail - (<a href="mailto:kontakt@c3ioc.de?subject=Speakersdesk" - >kontakt@c3ioc.de</a - >) oder im Rocketchat erreichen.<br /><br />Liebe Grüße,<br />das c3 - Inclusion Operation Center - </section> + oder ein Meme: versuche rein visuelle Inhalte nochmal treffend zu + kommentieren. (Das darf bei Memes auch gern sehr albern sein)</li> + <li>Wenn Folein einreichen möglich: Wenn ihr Folien vorher einreicht, + hat euch nicht nur + der Channel ganz doll lieb, sondern ihr macht damit auch eure + Vorträge barrierefreier, für Leute, die die Folien im Stream ggf. + nicht gut genug erkennen können.</li> + <li>Bitte achtet auf gute Audioqualität. Auch dies ist wichtig für den + Abbau von Barrieren.</li> + </ul> + <h3>Zusammenfassung</h3> + <ul> + <li>Bei Flackern, Audioglitching usw bitte Vor- und Entwarnen.</li> + <li>Bitte nutzt Content Notes bei sensiblen Themen.</li> + <li> + Rein visuelles Inhalte wenn's geht bitte passend beschreiben. + </li> + </ul> + + <h3>Kontakt</h3> + Bei Rückfragen könnt ihr uns per Mail + (<a + href="mailto:kontakt@c3ioc.de?subject=Speakersdesk">kontakt@c3ioc.de</a>) + oder im Rocketchat + erreichen.<br /><br />Liebe Grüße,<br />das c3 + Inclusion Operation Center + </section> + + <section lang="en" id="english"> + <p class="lang">English</p> + <h2>Accessibility tips for speakers</h2> + <p>This is a collection of tips on improving the accessibility and + reducing barriers in your talks.</p> - <section lang="en" id="english"> - <p class="lang">English</p> - <h2>Accessibility tips for the Speakers Desk</h2> - <b>Hello dear speakers desk,</b> - <p> - The team c3 Inclusion Operations Center would like to support other - teams in making the congress more accessible and therefore we would - be happy if you could communicate the points below to the speakers. - </p> - <p> - On the one hand, there are points that are specifically important - for accessibility and can probably be mentioned separately in the - information for lecturers, but there are also general points that - are important anyway, but help with accessibility. - </p> - <p> - A small note on the general points: We understand that, for example, - nobody will submit the slides in good time, but we hope that the - mention of accessibility could possibly motivate the speakers - additionally. - </p> - <h3>Specific information for lecturers</h3> + <h3>Content notes</h3> + <h4>Why content notes?</h4> + + <ul> + <li>Content notes enable viewers to know what they can expect.</li> + <li>Content notes allow viewers to participate and to take a break at + topics they do not want to expose themselves to.</li> + <li>Content notes give viewers that have e.g. phobias or trauma the + opportunity to make an informed decision whether they want to expose + themselves to this content.</li> + <li>The use of content notes can help prevent that viewers are + reminded of or have to relive traumatic events.</li> + <li>This is not about preventing you from speaking about certain + topics, we just want you to inform the audience ahead of time.</li> + <li>Content notes enable you to use audio-visual effects without + exposing viewers to unwanted stimuli.</li> + <li>Content notes show that you are mindful of your audience and help + build trust.</li> + </ul> + <h4>Content notes in practice</h4> + <ul> + <li>Give content notes at the start of your talk.</li> + <li>Make sure to give content notes visually (e.g. on a slide) and + spoken so that no one misses them.</li> + <li>State and dispay content notes right before section that contain + this type of content.</li> + <li>Give content notes already in the description of your talk in the + schedule (Ideally the scheduling software would have a field to + remind speakers to do this).</li> + </ul> + <h4>List of types of content</h4> + <p> + This list can help you identify content in your presentation that + might need a content note. If any of these are part of your + presentation, a content note would make sense. However, this is not a + complete list, only a guide. + </p> + <p>More well-known topics are further down the list.</p> + <p> + <i>Content note: There is a list of concrete topics that need content + notes here. + </i> + </p> + + <ul> + <li> + addressing food, eating disorders and negative body images + </li> + <li>social and relationship conflicts</li> + <li>common phobias (e.g. spiders, needles)</li> + <li> + discrimination (e.g. sexism, racism, queer phobia, anti-semitism, + ableism, classism) + </li> + <li>drugs, addiction and alcohol</li> + <li> + pregnancies, births and especially abortions and miscarriages + </li> + <li>sexuality, eroticism</li> + <li>illnesses including COVID-19 (Corona), injuries, blood</li> + <li> + mental disorders, mental health problems + </li> + <li>mental disorders, mental health problems</li> + <li>violence, war, serious crimes</li> + <li>death, dying, suicide</li> + <li>startling noises or effects</li> + </ul> + <h4>Using audio-visual effects</h4> + <p> Would you like to use visual flickering, audio glitching, loud noises or the like in your presentation? - <ul> - <li> - give a warning before it starts and an all-clear when it is over - </li> - <li> - tell the speaker desk beforehand: the VOC can support you with - belly bands, bells, etc. - </li> - </ul> - <p> - <b>Please use content notes </b> if you really want to talk about - specific topics that not everyone wants to be confronted with - unexpectedly. - </p> - <p> - <i - >Content Note: Here is a list of topics to be identified. Commonly - known topics are closer to the bottom of the list.</i - > - </p> - - <ul> - <li>Addressing food, eating disorders and negative body images</li> - <li>social and relationship conflicts</li> - <li>common phobias (e.g. spiders)</li> - <li> - Discrimination (e.g. sexism, racism, queer phobia, anti-semitism, - ableism, classism) - </li> - <li>Drugs, addiction and alcohol</li> - <li> - Pregnancies, births and especially abortions and miscarriages - </li> - <li>Sexuality, eroticism</li> - <li>Illnesses, injuries, blood</li> - <li>mental disorders, mental health problems</li> - <li>Self-harming behaviour</li> - <li>Violence, war, serious crimes</li> - <li>Death, dying, suicide</li> - </ul> - <p> - Think about whether your presentation is understandable even if + </p> + <ul> + <li>Please use content notes.</li> + <li>Give a warning before it starts and an all-clear when it is over . + </li> + <li>Tell the speaker desk beforehand: the VOC can support you with + belly bands, bells, etc. </li> + </ul> + <h3> + Recommendations regarding visuals and sound + </h3> + <ul> + <li>Please use a legible font and an + appropriate font size with enough brightness contrast to the + background. This makes your presentation more legible to everyone. + </li> + <li>Think about whether your presentation is understandable even if people cannot see the presentation. And no matter whether it's a diagram or a meme: try to comment on purely visual content again. - (That can also be very silly with memes) - </p> - <b>Tl;dr from the specific information</b> - <ul> - <li> - In the event of flickering, audio glitching, etc., please give the - all-clear - </li> - <li>Please use content notes for sensitive topics</li> - <li>Describe purely visual content appropriately if possible</li> - </ul> + (That can also be very silly with memes).</li> + <li>If you submit slides beforehand, the speakers desk will not only + love you very much, but you will also make your presentations more + accessible for people who may not be able to recognize the slides in + the stream well enough.</li> + <li>Please make sure your audio has high quality. This, too, is + important to reduce barriers.</li> + </ul> + <h3>Summary</h3> + <ul> + <li>In the event of flickering, audio glitching etc., please give the + all-clear </li> + <li>Please use content notes for sensitive topics.</li> + <li> + Describe purely visual content appropriately if possible. + </li> + </ul> - <h3> - Things that are important for everyone, but also help with - accessibility: - </h3> - <ul> - <li> - It helps everyone if a legible font is used in presentations in an - appropriate font size with enough brightness contrast to the - background. - </li> - <li> - If you submit slides beforehand, the speakers desk will not only - love you very much, but you will also make your presentations more - accessible for people who may not be able to recognize the slides - in the stream well enough. - </li> - <li>Please really pay attention to good audio quality.</li> - </ul> - If that could be included in the information to the speakers, that - would be great.<br />If you have any questions, you can write to us by - email (<a href="mailto:kontakt@c3ioc.de?subject=Speakersdesk" - >kontakt@c3ioc.de</a - >) or reach us in Rocket.<br /><br />best regards<br />the c3 - Inclusion Operation Center - </section> - </main> - <footer class="no-print"> - <a lang="de" href="index.html">Zurück zur Hauptseite</a> / - <a lang="en" href="index.html#english">back to main page</a> - <br /> - <a lang="en" href="https://help.ccc.de">help.ccc.de</a> <br /> - <a lang="de" href="https://legal.cccv.de" - >Impressum/<wbr />Datenschutzerklärung</a - > - </footer> - </div> - <script src="main.js"></script> - </body> -</html> + <h3>Contact</h3> + If you have any questions, you can write to us by email + (<a + href="mailto:kontakt@c3ioc.de?subject=Speakersdesk">kontakt@c3ioc.de</a>) + or reach us in Rocket.<br /><br />Best regards,<br />the c3 Inclusion + Operation Center + </section> + </main> + <footer class="no-print"> + <a lang="de" href="index.html">Zurück zur Hauptseite</a> / + <a lang="en" href="index.html#english">back to main page</a> + <br /> + <a lang="en" href="https://help.ccc.de">help.ccc.de</a> <br /> + <a lang="de" + href="https://legal.cccv.de">Impressum/<wbr />Datenschutzerklärung</a> + </footer> + </div> + <script src="main.js"></script> +</body> + +</html> \ No newline at end of file -- GitLab