forikolo-template/Beispiel in HTML/index.html

490 lines
14 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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.7V → 7.4V)</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 18V → total 36V (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 (18V), current adds (3×5A=15A)</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 → 36V. 3 strings parallel → 15A total.</p>
</div>
</article>
</div>
<deepl-input-controller translate="no"></deepl-input-controller></body></html>