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 0000000..22318b1 Binary files /dev/null and b/Beispiel in HTML/assets/cropped-forikolo_logo_t-w.png differ 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 0000000..29615dd Binary files /dev/null and b/Beispiel in HTML/assets/cropped-forikolo_logo_t.png differ 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 @@ + + + + + + Understanding "2S3P" — Batteries & Solar (Posters) + + + + +
+ +
+

Understanding "2S3P" notations for batteries

+ +
+
1. Basic Meaning
+

S = Series → batteriy cells connected end to end → higher voltage
⚡ Voltage adds up • Capacity stays the same

+

P = Parallel → batteriy cells connected side by side → higher capacity
⚡ Voltage stays the same • Capacity adds up

+
+ +
+
2. Example: 2S (Series)
+
+ + + + + + + + + + + + - + + + +
+

Voltage doubles, capacity stays the same (e.g. 3.7 V → 7.4 V)

+
+ +
+
3. Example: 3P (Parallel)
+
+ + + + + + + + + + +
+

Voltage stays the same, capacity = 3 × cell capacity (e.g. 200.0Ah → 600.0Ah)

+
+ +
+
4. Combined: 2S3P
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Each 3P group adds capacity. Two such groups in series double voltage.

+

Calculate the Voltage and the Capacity. One cell has 3.7V and 200Ah.

+
+
+ +
+

Understanding "2S3P" for Solar Panels

+
Same principle — voltage adds in series, current adds in parallel
+ +
+
1. What it means
+

Series (S) → increases voltage
Parallel (P) → increases current

+
+ +
+
2. Example: 2S
+
+ + + + + + + + + + + + + - + + + +
+

Each panel 18 V → total 36 V (current stays same)

+
+ +
+
3. Example: 3P
+
+ + + + + + + + + +
+

Voltage same (18 V), current adds (3 × 5 A = 15 A)

+
+ +
+
4. Combined: 2S3P
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

2 panels in series per string → 36 V. 3 strings parallel → 15 A total.

+
+
+
+ + +