Beispiel in HTML hinzugefügt
This commit is contained in:
parent
b94b10a4b7
commit
84a8873eff
6 changed files with 653 additions and 0 deletions
BIN
Beispiel in HTML/assets/cropped-forikolo_logo_t-w.png
Normal file
BIN
Beispiel in HTML/assets/cropped-forikolo_logo_t-w.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
Beispiel in HTML/assets/cropped-forikolo_logo_t.png
Normal file
BIN
Beispiel in HTML/assets/cropped-forikolo_logo_t.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
7
Beispiel in HTML/assets/forikolo-colors.css
Normal file
7
Beispiel in HTML/assets/forikolo-colors.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
:root{
|
||||
--bg : #2f3740;
|
||||
--chalk : #f8f8f4;
|
||||
--accent : #ffd166;
|
||||
--muted : #aab0b6;
|
||||
--panel : #13303a
|
||||
}
|
||||
10
Beispiel in HTML/assets/forikolo-svg.css
Normal file
10
Beispiel in HTML/assets/forikolo-svg.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
146
Beispiel in HTML/assets/forikolo.css
Normal file
146
Beispiel in HTML/assets/forikolo.css
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
490
Beispiel in HTML/index.html
Normal file
490
Beispiel in HTML/index.html
Normal file
|
|
@ -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 & 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>
|
||||
Loading…
Add table
Reference in a new issue