Added text article component and

separate sicherheitshinweise haarspange
Noxmox6 · Dec 28, 2024 · d9f6c24 · d9f6c24
1 parent 277cca3
commit d9f6c24
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 1 deletion.
diff --git a/docs/haarspange_sicherheit.html b/docs/haarspange_sicherheit.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      http-equiv="Cache-Control"
+      content="no-cache, no-store, must-revalidate"
+    />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Seifenfräulein Sicherheitshinweise</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <section class="section">
+      <div class="container">
+        <section class="columns is-mobile">
+          <div class="column is-1"></div>
+          <div class="column">
+            <h1 class="title is-3">Seifenfräulein</h1>
+            <h2 class="title is-4">Sicherheitshinweise Haarspangen</h2>
+          </div>
+        </section>
+
+        <script type="module">
+          import { h, render } from "https://esm.sh/preact";
+          import htm from "https://esm.sh/htm";
+          import TextArticle from "./scripts/text-article.js";
+
+          const html = htm.bind(h);
+
+          const data = [
+            {
+              strongText: 'Für Kinder unter 3 Jahren ungeeignet',
+              description: 'Kleine Teile können verschluckt werden. Erstickungsgefahr!'
+            }, 
+            {
+              strongText: 'Hautkontakt vermeiden',
+              description: 'UV-Resin kann bei empfindlicher Haut Irritationen auslösen. Direkten und längeren Kontakt mit der Haut möglichst vermeiden.'
+            },
+            {
+              strongText: 'Bruchgefahr',
+              description: 'UV-Resin kann bei zu starkem Druck brechen und scharfe Kanten bilden. Bitte vorsichtig handhaben, um Verletzungen zu vermeiden.'
+            },
+            {
+              strongText: 'Nicht bei offensichtlichen Schäden verwenden',
+              description: 'Haarspangen mit Rissen, Splittern oder scharfen Kanten sofort entsorgen, um Verletzungen zu verhindern.'
+            },
+            {
+              strongText: 'Von starker Hitze oder direkter Sonneneinstrahlung fernhalten',
+              description: 'UV-Resin kann bei hohen Temperaturen verformen, schmelzen oder seine Festigkeit verlieren.'
+            },
+            {
+              strongText: 'Nicht während des Schlafens tragen',
+              description: 'Sie Verletzungen oder Beschädigungen der Spange durch unkontrollierte Bewegungen.'
+            },
+            {
+              strongText: 'Kein Kontakt mit Chemikalien oder Lösemitteln',
+              description: 'UV-Resin kann durch Chemikalien angegriffen oder beschädigt werden.'
+            },
+            {
+              strongText: 'Umweltfreundliche Entsorgung',
+              description: 'Beschädigte Haarspangen oder überschüssiges UV-Resin nicht im Hausmüll entsorgen. Entsorgung gemäß lokalen Vorschriften für Kunststoffe oder Harze.'
+            }
+          ];
+
+          const Content = () => {
+            return html`
+              ${data.map(
+                (entry) => html`
+                  <${TextArticle}
+                    strongText="${entry.strongText}"
+                    description="${entry.description}"
+                  />
+                `
+              )}
+            `;
+          };
+
+          render(html`<${Content} />`, document.getElementById("content"));
+        </script>
+
+        <section id="content">
+        </section>
+      </div>
+    </section>
+    <footer class="footer">
+      <div class="content has-text-centered">
+        <div class="columns is-mobile">
+          <div class="column has-text-right">Impressum:</div>
+          <div class="column has-text-left">
+            <div>Julia Albrecht</div>
+            <div>Augustastraße 12</div>
+            <div>02826 Görlitz</div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/docs/scripts/text-article.js b/docs/scripts/text-article.js
@@ -0,0 +1,21 @@
+import { h } from 'https://esm.sh/preact';
+import htm from 'https://esm.sh/htm';
+
+const html = htm.bind(h);
+
+export const TextArticle = (probs) => {
+  return html`
+    <article class="columns is-mobile">
+      <div class="column is-1 has-text-right">
+        <span class="counter"></span>
+      </div>
+      <div class="column">
+        <p class="has-text-justified">
+          <strong>${probs.strongText}</strong>: <span>${probs.description}</span>
+        </p>
+      </div>
+    </article>
+  `;
+};
+
+export default TextArticle;
diff --git a/docs/style.css b/docs/style.css
@@ -1,4 +1,4 @@
-.haarspangen-content, .schluesselanhaenger-content {
+#content {
   counter-reset: section-counter;
 }