From 84a8873eff00195aa9bfe1fbb3df5544c56a522f Mon Sep 17 00:00:00 2001
From: Christian Neubauer <christian.neubauer@dielinke-chemnitz.de>
Date: Fri, 21 Nov 2025 22:35:08 +0100
Subject: [PATCH] =?UTF-8?q?Beispiel=20in=20HTML=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/cropped-forikolo_logo_t-w.png      | Bin 0 -> 5300 bytes
 .../assets/cropped-forikolo_logo_t.png        | Bin 0 -> 5544 bytes
 Beispiel in HTML/assets/forikolo-colors.css   |   7 +
 Beispiel in HTML/assets/forikolo-svg.css      |  10 +
 Beispiel in HTML/assets/forikolo.css          | 146 ++++++
 Beispiel in HTML/index.html                   | 490 ++++++++++++++++++
 6 files changed, 653 insertions(+)
 create mode 100644 Beispiel in HTML/assets/cropped-forikolo_logo_t-w.png
 create mode 100644 Beispiel in HTML/assets/cropped-forikolo_logo_t.png
 create mode 100644 Beispiel in HTML/assets/forikolo-colors.css
 create mode 100644 Beispiel in HTML/assets/forikolo-svg.css
 create mode 100644 Beispiel in HTML/assets/forikolo.css
 create mode 100644 Beispiel in HTML/index.html

diff --git a/Beispiel in HTML/assets/cropped-forikolo_logo_t-w.png b/Beispiel in HTML/assets/cropped-forikolo_logo_t-w.png
new file mode 100644
index 0000000000000000000000000000000000000000..22318b19e894d4e65e6eec238f8db6c2dd869e40
GIT binary patch
literal 5300
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

literal 0
HcmV?d00001

diff --git a/Beispiel in HTML/assets/cropped-forikolo_logo_t.png b/Beispiel in HTML/assets/cropped-forikolo_logo_t.png
new file mode 100644
index 0000000000000000000000000000000000000000..29615dd1132d4de3157c942ff2feb69edca8db35
GIT binary patch
literal 5544
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
W`YI@)>hNy@OQ)}6q+Rm>5&b{GVai_s

literal 0
HcmV?d00001

diff --git a/Beispiel in HTML/assets/forikolo-colors.css b/Beispiel in HTML/assets/forikolo-colors.css
new file mode 100644
index 0000000..b440e88
--- /dev/null
+++ b/Beispiel in HTML/assets/forikolo-colors.css	
@@ -0,0 +1,7 @@
+:root{
+     --bg : #2f3740;
+     --chalk : #f8f8f4;
+     --accent : #ffd166;
+     --muted : #aab0b6;
+     --panel : #13303a
+}
diff --git a/Beispiel in HTML/assets/forikolo-svg.css b/Beispiel in HTML/assets/forikolo-svg.css
new file mode 100644
index 0000000..30751f2
--- /dev/null
+++ b/Beispiel in HTML/assets/forikolo-svg.css	
@@ -0,0 +1,10 @@
+.svg rect, .svg text {
+    stroke: var(--chalk);
+    stroke-width: 5;
+    fill: none;
+}
+
+.svg line.connection {
+    stroke: var(--accent);
+    stroke-width: 10;
+}
diff --git a/Beispiel in HTML/assets/forikolo.css b/Beispiel in HTML/assets/forikolo.css
new file mode 100644
index 0000000..1a3e1c7
--- /dev/null
+++ b/Beispiel in HTML/assets/forikolo.css	
@@ -0,0 +1,146 @@
+
+@import "forikolo-colors.css";
+
+
+
+html, body {
+     height: 100 % ;
+     margin: 0;
+     font-family : system-ui, Roboto, Arial;
+     background: var(--bg);
+     color: var(--chalk)
+}
+.logo {
+  background-image: url(cropped-forikolo_logo_t-w.png);
+
+  background-repeat: no-repeat;
+  background-position: center;
+  min-height: 66px;
+}
+
+.container {
+     max-width : 1100px;
+     margin: 24px auto;
+     padding: 40px;
+     display: grid;
+     gap: 48px
+}
+ .poster {
+     background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.08)), #0b1220;
+     border-radius : 14px;
+     padding: 40px;
+     box-shadow : 0 8px 28px rgba(0, 0, 0, 0.6);
+}
+ h1 {
+     font-size : 2.4rem;
+     margin: 0 0 16px;
+     color: var(--chalk)
+}
+ .subtitle {
+     color: var(--muted);
+     margin-bottom : 28px;
+     font-size : 1.2rem
+}
+ .row {
+     display: flex;
+     gap: 24px;
+     align-items : flex-start
+}
+ .col{
+    flex : 1
+}
+.section {
+     padding: 18px 0;
+     border-top : 1px dashed rgba(255, 255, 255, 0.1)
+}
+ .big {
+     font-weight : 700;
+     font-size : 1.5rem;
+     margin-bottom : 8px
+}
+ .kbd {
+     background: rgba(255, 255, 255, 0.04);
+     padding: 6px 10px;
+     border-radius : 8px;
+     font-weight : 600;
+     font-size : 1.1rem
+}
+ .diagram {
+     background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.02));
+     border-radius : 10px;
+     padding: 20px;
+     margin-top : 12px;
+     text-align : center
+}
+.example {
+     margin-top : 10px;
+     color: var(--muted);
+     font-size : 1.1rem
+}
+.example::before {
+  content: "📚";
+  margin-left: -1em;
+}
+.task {
+  margin-top : 9px;
+  color: var(--accent);
+  font-size : 1.1rem
+}
+.task::before {
+  content: "📝";
+  margin-left: -1em;
+  display: inline-block;
+}
+ table {
+     width: 100 % ;
+     border-collapse : collapse;
+     margin-top : 12px;
+     font-size : 1.1rem
+}
+ td, th {
+     padding: 10px 12px;
+     border-bottom : 1px dashed rgba(255, 255, 255, 0.1);
+     text-align : left
+}
+ th {
+     color: var(--accent);
+     font-weight : 700
+}
+ .tip {
+     background: linear-gradient(90deg, rgba(255, 209, 102, 0.1), rgba(255, 209, 102, 0.06));
+     padding: 16px;
+     border-radius : 10px;
+     color: var(--chalk);
+     margin-top : 12px;
+     font-size : 1.1rem
+}
+ .svg {
+     width: 100 % ;
+     height: 280px
+}
+ .small-svg{
+    height : 160px
+}
+ g {
+  stroke: #f8f8f4;
+}
+
+@media print {
+     body {
+         background: white;
+         color: black
+    }
+     .poster {
+         background: white;
+         color: black;
+         box-shadow : none
+    }
+     .tip {
+         background: #fff3cc
+    }
+}
+ @media(max-width : 900px) {
+     .row {
+         flex-direction : column
+    }
+}
diff --git a/Beispiel in HTML/index.html b/Beispiel in HTML/index.html
new file mode 100644
index 0000000..c942080
--- /dev/null
+++ b/Beispiel in HTML/index.html	
@@ -0,0 +1,490 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Understanding "2S3P" — Batteries &amp; Solar (Posters)</title>
+  <link rel="stylesheet" href="assets/forikolo.css" />
+  <link rel="stylesheet" href="assets/forikolo-svg.css" />
+</head>
+<body>
+  <div class="container">
+    <div class='logo'>
+    </div>
+    <article class="poster" id="batteries">
+      <h1>Understanding "2S3P" notations for batteries</h1>
+
+      <div class="section" style="border-top:none;">
+        <div class="big">1. Basic Meaning</div>
+        <p><strong>S = Series</strong> → batteriy cells connected <em>end to end</em> → higher voltage<br>⚡ Voltage adds up • Capacity stays the same</p>
+        <p><strong>P = Parallel</strong> → batteriy cells connected <em>side by side</em> → higher capacity<br>⚡ Voltage stays the same • Capacity adds up</p>
+      </div>
+
+      <div class="section">
+        <div class="big">2. Example: 2S (Series)</div>
+        <div class="diagram">
+          <svg class="svg"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 399 214"
+            >
+            <g
+              transform="translate(20,20)"
+              >
+                <line class="connection"
+                      x1="120"
+                      y1="80"
+                      x2="160"
+                      y2="80">
+                </line>
+                <rect
+                      class="battery"
+                      x="0"
+                      y="20"
+                      width="120"
+                      height="120"
+                      rx="10">
+                </rect>
+                <rect
+                      class="battery"
+                      x="160"
+                      y="20"
+                      width="120"
+                      height="120"
+                      rx="10">
+                </rect>
+                <text
+                    x="50"
+                    y="160"
+                    font-size="24"
+                    >+
+                </text>
+                <text
+                    x="250"
+                    y="160"
+                    font-size="24"
+                    >-
+                </text>
+            </g>
+          </svg>
+        </div>
+          <p class="example">Voltage doubles, capacity stays the same (e.g. 3.7 V → 7.4 V)</p>
+        </div>
+
+            <div class="section">
+        <div class="big">3. Example: 3P (Parallel)</div>
+        <div class="diagram">
+          <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566 200">
+          <g
+            fill="none"
+            transform="translate(20,40)"
+          >
+              <line
+                class="connection"
+                x1="0"
+                y1="-20"
+                x2="520"
+                y2="-20"
+              ></line>
+              <line
+                class="connection"
+                x1="0"
+                y1="140"
+                x2="520"
+                y2="140"
+              ></line>
+              <rect
+                class="battery"
+                x="0"
+                y="0"
+                width="120"
+                height="120"
+                rx="10"
+              ></rect>
+              <rect
+                class="battery"
+                x="200"
+                y="0"
+                width="120"
+                height="120"
+                rx="10"
+              ></rect>
+              <rect
+                class="battery"
+                x="400"
+                y="0"
+                width="120"
+                height="120"
+                rx="10"
+              ></rect>
+          </g>
+          </svg>
+
+        </div>
+        <p class="example">Voltage stays the same, capacity = 3 × cell capacity (e.g. 200.0Ah → 600.0Ah)</p>
+      </div>
+
+      <div class="section">
+        <div class="big">4. Combined: 2S3P</div>
+        <div class="diagram">
+          <svg
+            class="svg"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 500 340"
+          >
+            <g
+              transform="translate(40,40)">
+                <g>
+                  <line
+                    class="connection"
+                    x1="100"
+                    y1="50"
+                    x2="160"
+                    y2="50"
+                    >
+                  </line>
+                  <line
+                    class="connection"
+                    x1="260"
+                    y1="50"
+                    x2="320"
+                    y2="50"
+                    >
+                  </line>
+                  <rect
+                    class="battery"
+                    x="0"
+                    y="0"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                  <rect
+                    class="battery"
+                    x="160"
+                    y="0"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                  <rect
+                    class="battery"
+                    x="320"
+                    y="0"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                </g>
+                <g>
+                  <line
+                    class="connection"
+                    x1="100"
+                    y1="210"
+                    x2="160"
+                    y2="210"
+                    >
+                  </line>
+                  <line
+                    class="connection"
+                    x1="260"
+                    y1="210"
+                    x2="320"
+                    y2="210"
+                    >
+                  </line>
+                  <rect
+                    class="battery"
+                    x="0"
+                    y="160"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                  <rect
+                    class="battery"
+                    x="160"
+                    y="160"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                  <rect
+                    x="320"
+                    y="160"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                </g>
+
+
+
+                <line
+                  class="connection"
+                  x1="0"
+                  y1="-20"
+                  x2="420"
+                  y2="-20"
+                  >
+                </line>
+                <line
+                  class="connection"
+                  x1="0"
+                  y1="280"
+                  x2="420"
+                  y2="280"
+                  >
+                </line>
+            </g>
+        </svg>
+
+        </div>
+        <p class="example">Each 3P group adds capacity. Two such groups in series double voltage.</p>
+        <p class="task">Calculate the Voltage and the Capacity. One cell has 3.7V and 200Ah.</p>
+      </div>
+    </article>
+
+    <article class="poster" id="solar">
+      <h1>Understanding "2S3P" for Solar Panels</h1>
+      <div class="subtitle">Same principle — voltage adds in series, current adds in parallel</div>
+
+      <div class="section" style="border-top:none;">
+        <div class="big">1. What it means</div>
+        <p><strong>Series (S)</strong> → increases voltage<br><strong>Parallel (P)</strong> → increases current</p>
+      </div>
+
+      <div class="section">
+        <div class="big">2. Example: 2S</div>
+        <div class="diagram">
+
+        <svg class="svg"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 399 214"
+            >
+            <g
+              transform="translate(20,20)"
+              >
+                <line class="connection"
+                      x1="120"
+                      y1="80"
+                      x2="160"
+                      y2="80">
+                </line>
+                <rect
+                      class="battery"
+                      x="0"
+                      y="20"
+                      width="120"
+                      height="120"
+                      rx="10">
+                </rect>
+                <rect
+                      class="battery"
+                      x="160"
+                      y="20"
+                      width="120"
+                      height="120"
+                      rx="10">
+                </rect>
+                <text
+                    x="50"
+                    y="160"
+                    font-size="24"
+                    >+
+                </text>
+                <text
+                    x="250"
+                    y="160"
+                    font-size="24"
+                    >-
+                </text>
+            </g>
+          </svg>
+        </div>
+        <p class="example">Each panel 18 V → total 36 V (current stays same)</p>
+      </div>
+
+      <div class="section">
+        <div class="big">3. Example: 3P</div>
+        <div class="diagram">
+          <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566 200">
+          <g
+            fill="none"
+            transform="translate(20,40)"
+          >
+              <line
+                class="connection"
+                x1="0"
+                y1="-20"
+                x2="520"
+                y2="-20"
+              ></line>
+              <line
+                class="connection"
+                x1="0"
+                y1="140"
+                x2="520"
+                y2="140"
+              ></line>
+              <rect
+                class="battery"
+                x="0"
+                y="0"
+                width="120"
+                height="120"
+                rx="10"
+              ></rect>
+              <rect
+                class="battery"
+                x="200"
+                y="0"
+                width="120"
+                height="120"
+                rx="10"
+              ></rect>
+              <rect
+                class="battery"
+                x="400"
+                y="0"
+                width="120"
+                height="120"
+                rx="10"
+              ></rect>
+          </g>
+          </svg>
+        </div>
+        <p class="example">Voltage same (18 V), current adds (3 × 5 A = 15 A)</p>
+      </div>
+
+      <div class="section">
+        <div class="big">4. Combined: 2S3P</div>
+        <div class="diagram">
+          <svg
+            class="svg"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 500 340"
+          >
+            <g
+              transform="translate(40,40)">
+                <g>
+                  <line
+                    class="connection"
+                    x1="100"
+                    y1="50"
+                    x2="160"
+                    y2="50"
+                    >
+                  </line>
+                  <line
+                    class="connection"
+                    x1="260"
+                    y1="50"
+                    x2="320"
+                    y2="50"
+                    >
+                  </line>
+                  <rect
+                    class="battery"
+                    x="0"
+                    y="0"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                  <rect
+                    class="battery"
+                    x="160"
+                    y="0"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                  <rect
+                    class="battery"
+                    x="320"
+                    y="0"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                </g>
+                <g>
+                  <line
+                    class="connection"
+                    x1="100"
+                    y1="210"
+                    x2="160"
+                    y2="210"
+                    >
+                  </line>
+                  <line
+                    class="connection"
+                    x1="260"
+                    y1="210"
+                    x2="320"
+                    y2="210"
+                    >
+                  </line>
+                  <rect
+                    class="battery"
+                    x="0"
+                    y="160"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                  <rect
+                    class="battery"
+                    x="160"
+                    y="160"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                  <rect
+                    x="320"
+                    y="160"
+                    width="100"
+                    height="100"
+                    rx="8"
+                    >
+                  </rect>
+                </g>
+
+                <line
+                  class="connection"
+                  x1="0"
+                  y1="-20"
+                  x2="420"
+                  y2="-20"
+                  >
+                </line>
+                <line
+                  class="connection"
+                  x1="0"
+                  y1="280"
+                  x2="420"
+                  y2="280"
+                  >
+                </line>
+            </g>
+        </svg>
+        </div>
+        <p class="example">2 panels in series per string → 36 V. 3 strings parallel → 15 A total.</p>
+      </div>
+    </article>
+  </div>
+
+
+<deepl-input-controller translate="no"></deepl-input-controller></body></html>