thomas.py/pyolingo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design Karten final, "neue Karte" hinzugefügt und Design begonnen

Browse Source
This commit is contained in:
p3t3rp1Lz 2026-04-06 13:22:11 +02:00
parent 6fa0e3ddca
commit 012c5eb36a
8 changed files with 162 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
adjektive.php
View File

@ -1,25 +0,0 @@
<?php
require_once __DIR__ . '/includes/db_connect.php';
$system = getenv('POSTGRES_SYSTEM') ?? 'test';
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h2 class="seitentitel">pyolingo</h2>
</div>
<div class="menue">
<a href="index.php" class="menueLink">
< home >
</a>
<a href="neueKarte.php" class="menueLink">
< zurück >
</a>
</div>
</body>
</html>

43
allgemein.php
View File

@ -13,6 +13,49 @@
<div class="header">
<h2 class="seitentitel">pyolingo</h2>
</div>
<div class="inhalt">
<form id="form_hinzufuegenkarte" action="hinzufuegenKarte" methode="post">
<div class="hinzufuegenKarteElemente">
<label class="kategorie">
<input class="kategorie" type="radio" name="kategorie" value="substantive">Substantive
</label>
<label class="kategorie">
<input class="kategorie" type="radio" name="kategorie" value="adjektive">Adjektive
</label>
<label class="kategorie">
<input class="kategorie" type="radio" name="kategorie" value="allgemein" checked>Allgemein
</label>
<label class="kategorie">
<input class="kategorie" type="radio" name="kategorie" value="eigennamen">Eigennamen
</label>
</div>
<div id="div_deutsch">
<p class="kategorie" id="p_deutsch">deutsch:</p>
<input class="kategorie" id="input_deutsch" type="text" name="deutsch" value="">
</div>
<?php for($i = 0; $i < 7; $i++) { ?>
<div>
<div id="div_italienisch_text">
<input class="kategorie" id="input_italienisch" type="text" name="italienisch_<?= $i ?>" value="">
</div>
<div id="div_italienisch_radio">
<label class="kategorie" id="label_italienisch_schwarz">
<input class="kategorie" type="radio" name="farbe_<?= $i ?>" checked value="black">Standard
</label>
<label class="kategorie" id="label_italienisch_blau">
<input class="kategorie" type="radio" name="farbe_<?= $i ?>" value="blue">Blau
</label>
<label class="kategorie" id="label_italienisch_rot">
<input class="kategorie" type="radio" name="farbe_<?= $i ?>" value="red">Rot
</label>
<label class="kategorie" id="label_italienisch_gruen">
<input class="kategorie" type="radio" name="farbe_<?= $i ?>" value="green">Grün
</label>
</div>
</div>
<?php }; ?>
</form>
</div>
<div class="menue">
<a href="index.php" class="menueLink">
< home >

25
eigennamen.php
View File

@ -1,25 +0,0 @@
<?php
require_once __DIR__ . '/includes/db_connect.php';
$system = getenv('POSTGRES_SYSTEM') ?? 'test';
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h2 class="seitentitel">pyolingo</h2>
</div>
<div class="menue">
<a href="index.php" class="menueLink">
< home >
</a>
<a href="neueKarte.php" class="menueLink">
< zurück >
</a>
</div>
</body>
</html>

0
forms/hinzuefuegenKarte.php Normal file
View File

125
index.php
View File

@ -39,7 +39,7 @@
<td colspan="2">
<p class="p-karteikarte_verben" id="italienisch_wortstamm_1" />
<p class="p-karteikarte_verben" id="italienisch_verben_1" />
<p class="p-karteikarte_verben_suffix" id="italienisch_suffix_1" />
<p class="p-karteikarte_verben" id="italienisch_suffix_1" />
</td>
</tr>
<tr>
@ -49,7 +49,7 @@
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_2" />
<p class="p-karteikarte_verben" id="italienisch_verben_2" />
<p class="p-karteikarte_verben_suffix" id="italienisch_suffix_2" />
<p class="p-karteikarte_verben" id="italienisch_suffix_2" />
</td>
</tr>
<tr>
@ -59,7 +59,7 @@
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_3" />
<p class="p-karteikarte_verben" id="italienisch_verben_3" />
<p class="p-karteikarte_verben_suffix" id="italienisch_suffix_3" />
<p class="p-karteikarte_verben" id="italienisch_suffix_3" />
</td>
</tr>
<tr>
@ -69,7 +69,7 @@
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_4" />
<p class="p-karteikarte_verben" id="italienisch_verben_4" />
<p class="p-karteikarte_verben_suffix" id="italienisch_suffix_4" />
<p class="p-karteikarte_verben" id="italienisch_suffix_4" />
</td>
</tr>
<tr>
@ -79,7 +79,7 @@
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_5" />
<p class="p-karteikarte_verben" id="italienisch_verben_5" />
<p class="p-karteikarte_verben_suffix" id="italienisch_suffix_5" />
<p class="p-karteikarte_verben" id="italienisch_suffix_5" />
</td>
</tr>
<tr>
@ -89,7 +89,7 @@
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_6" />
<p class="p-karteikarte_verben" id="italienisch_verben_6" />
<p class="p-karteikarte_verben_suffix" id="italienisch_suffix_6" />
<p class="p-karteikarte_verben" id="italienisch_suffix_6" />
</td>
</tr>
<tr>
@ -99,7 +99,7 @@
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_7" />
<p class="p-karteikarte_verben" id="italienisch_verben_7" />
<p class="p-karteikarte_verben_suffix" id="italienisch_suffix_7" />
<p class="p-karteikarte_verben" id="italienisch_suffix_7" />
</td>
</tr>
</table>
@ -177,126 +177,85 @@
document.getElementById("italienisch_4").style.color = item.farbe_4;
document.getElementById("italienisch_5").textContent = item.italienisch_5;
document.getElementById("italienisch_5").style.color = item.farbe_5;
switch(item.wortart) {
case("Allgemein"): {
document.getElementById("italienisch_1").style.display = "inline-block";
break;
}
case("Eigennamen"): {
document.getElementById("italienisch_1").style.display = "inline-block";
break;
}
case("Substantive"): {
document.getElementById("italienisch_1").style.display = "inline-block";
document.getElementById("italienisch_2").style.display = "inline-block";
break;
}
case("Adjektive"): {
document.getElementById("italienisch_1").style.display = "inline-block";
document.getElementById("italienisch_2").style.display = "inline-block";
document.getElementById("italienisch_3").style.display = "inline-block";
document.getElementById("italienisch_4").style.display = "inline-block";
document.getElementById("italienisch_5").style.display = "inline-block";
document.getElementById("italienisch_1").style.textDecoration = "underline";
break;
}
document.getElementById("italienisch_5").textContent = item.italienisch_6;
document.getElementById("italienisch_5").style.color = item.farbe_6;
document.getElementById("italienisch_5").textContent = item.italienisch_7;
document.getElementById("italienisch_5").style.color = item.farbe_7;
for(var i = 0; i < document.getElementsByClassName("p-karteikarte").length; i++) {
document.getElementsByClassName("p-karteikarte")[i].style.display = "inline-block";
}
if(item.wortart == "Adjektive") document.getElementById("italienisch_1").style.textDecoration = "underline";
} else {
// Grundform
document.getElementById("italienisch_wortstamm_1").style.display = "inline-block";
document.getElementById("italienisch_wortstamm_1").style.textDecoration = "underline";
document.getElementById("italienisch_verben_1").style.display = "inline-block";
document.getElementById("italienisch_verben_1").style.textDecoration = "underline";
document.getElementById("italienisch_suffix_1").style.display = "inline-block";
document.getElementById("italienisch_wortstamm_1").textContent = item.wortstamm_1;
document.getElementById("italienisch_verben_1").textContent = item.italienisch_1;
document.getElementById("italienisch_verben_1").style.color = item.farbe_1;
document.getElementById("italienisch_suffix_1").textContent = item.suffix_1;
if(item.suffix_1 != null) {
document.getElementById("italienisch_suffix_1").textContent = " " + item.suffix_1;
document.getElementById("italienisch_suffix_1").style.textDecoration = "underline";
} else {
document.getElementById("italienisch_suffix_1").textContent = null;
}
// gebeugte Formen
document.getElementById("italienisch_pronomen_2").textContent = item.pronomen_2;
document.getElementById("italienisch_wortstamm_2").style.display = "inline-block";
document.getElementById("italienisch_verben_2").style.display = "inline-block";
document.getElementById("italienisch_suffix_2").style.display = "inline-block";
document.getElementById("italienisch_wortstamm_2").textContent = item.wortstamm_2;
document.getElementById("italienisch_verben_2").textContent = item.italienisch_2;
document.getElementById("italienisch_verben_2").style.color = item.farbe_2;
document.getElementById("italienisch_suffix_2").textContent = item.suffix_2;
if(item.suffix_2 != null) document.getElementById("italienisch_suffix_2").textContent = " " + item.suffix_2;
else document.getElementById("italienisch_suffix_2").textContent = null;
document.getElementById("italienisch_pronomen_3").textContent = item.pronomen_3;
document.getElementById("italienisch_wortstamm_3").style.display = "inline-block";
document.getElementById("italienisch_verben_3").style.display = "inline-block";
document.getElementById("italienisch_suffix_3").style.display = "inline-block";
document.getElementById("italienisch_wortstamm_3").textContent = item.wortstamm_3;
document.getElementById("italienisch_verben_3").textContent = item.italienisch_3;
document.getElementById("italienisch_verben_3").style.color = item.farbe_3;
document.getElementById("italienisch_suffix_3").textContent = item.suffix_3;
if(item.suffix_3 != null) document.getElementById("italienisch_suffix_3").textContent = " " + item.suffix_3;
else document.getElementById("italienisch_suffix_3").textContent = null;
document.getElementById("italienisch_pronomen_4").textContent = item.pronomen_4;
document.getElementById("italienisch_wortstamm_4").style.display = "inline-block";
document.getElementById("italienisch_verben_4").style.display = "inline-block";
document.getElementById("italienisch_suffix_4").style.display = "inline-block";
document.getElementById("italienisch_wortstamm_4").textContent = item.wortstamm_4;
document.getElementById("italienisch_verben_4").textContent = item.italienisch_4;
document.getElementById("italienisch_verben_4").style.color = item.farbe_4;
document.getElementById("italienisch_suffix_4").textContent = item.suffix_4;
if(item.suffix_4 != null) document.getElementById("italienisch_suffix_4").textContent = " " + item.suffix_4;
else document.getElementById("italienisch_suffix_4").textContent = null;
document.getElementById("italienisch_pronomen_5").textContent = item.pronomen_5;
document.getElementById("italienisch_wortstamm_5").style.display = "inline-block";
document.getElementById("italienisch_verben_5").style.display = "inline-block";
document.getElementById("italienisch_suffix_5").style.display = "inline-block";
document.getElementById("italienisch_wortstamm_5").textContent = item.wortstamm_5;
document.getElementById("italienisch_verben_5").textContent = item.italienisch_5;
document.getElementById("italienisch_verben_5").style.color = item.farbe_5;
document.getElementById("italienisch_suffix_5").textContent = item.suffix_5;
if(item.suffix_5 != null) document.getElementById("italienisch_suffix_5").textContent = " " + item.suffix_5;
else document.getElementById("italienisch_suffix_5").textContent = null;
document.getElementById("italienisch_pronomen_6").textContent = item.pronomen_6;
document.getElementById("italienisch_wortstamm_6").style.display = "inline-block";
document.getElementById("italienisch_verben_6").style.display = "inline-block";
document.getElementById("italienisch_suffix_6").style.display = "inline-block";
document.getElementById("italienisch_wortstamm_6").textContent = item.wortstamm_6;
document.getElementById("italienisch_verben_6").textContent = item.italienisch_6;
document.getElementById("italienisch_verben_6").style.color = item.farbe_6;
document.getElementById("italienisch_suffix_6").textContent = item.suffix_6;
if(item.suffix_6 != null) document.getElementById("italienisch_suffix_6").textContent = " " + item.suffix_6;
else document.getElementById("italienisch_suffix_6").textContent = null;
document.getElementById("italienisch_pronomen_7").textContent = item.pronomen_7;
document.getElementById("italienisch_wortstamm_7").style.display = "inline-block";
document.getElementById("italienisch_verben_7").style.display = "inline-block";
document.getElementById("italienisch_suffix_7").style.display = "inline-block";
document.getElementById("italienisch_wortstamm_7").textContent = item.wortstamm_7;
document.getElementById("italienisch_verben_7").textContent = item.italienisch_7;
document.getElementById("italienisch_verben_7").style.color = item.farbe_7;
document.getElementById("italienisch_suffix_7").textContent = item.suffix_7;
if(item.suffix_7 != null) document.getElementById("italienisch_suffix_7").textContent = " " + item.suffix_7;
else document.getElementById("italienisch_suffix_7").textContent = null;
for(var i = 0; i < document.getElementsByClassName("p-karteikarte_verben").length; i++) {
document.getElementsByClassName("p-karteikarte_verben")[i].style.display = "inline-block";
}
}
}
function resetWords() {
/*document.getElementsByClassName("p-karteikarte").textContent = "";
document.getElementsByClassName("p-karteikarte").style.color = "black";
document.getElementsByClassName("p-karteikarte").style.display = "none";*/
document.getElementById("italienisch_1").textContent = "";
document.getElementById("italienisch_1").style.color = "black";
document.getElementById("italienisch_1").style.display = "none";
document.getElementById("italienisch_1").style.textDecoration = "none";
document.getElementById("italienisch_2").textContent = "";
document.getElementById("italienisch_2").style.color = "black";
document.getElementById("italienisch_2").style.display = "none";
document.getElementById("italienisch_3").textContent = "";
document.getElementById("italienisch_3").style.color = "black";
document.getElementById("italienisch_3").style.display = "none";
document.getElementById("italienisch_4").textContent = "";
document.getElementById("italienisch_4").style.color = "black";
document.getElementById("italienisch_4").style.display = "none";
document.getElementById("italienisch_5").textContent = "";
document.getElementById("italienisch_5").style.color = "black";
document.getElementById("italienisch_5").style.display = "none";
document.getElementById("italienisch_6").textContent = "";
document.getElementById("italienisch_6").style.color = "black";
document.getElementById("italienisch_6").style.display = "none";
document.getElementById("italienisch_7").textContent = "";
document.getElementById("italienisch_7").style.color = "black";
document.getElementById("italienisch_7").style.display = "none";
for(var i = 0; i < document.getElementsByClassName("p-karteikarte").length; i++) {
document.getElementsByClassName("p-karteikarte")[i].textContent = "";
document.getElementsByClassName("p-karteikarte")[i].style.color = "black";
document.getElementsByClassName("p-karteikarte")[i].style.display = "none";
document.getElementsByClassName("p-karteikarte")[i].style.textDecoration = "none";
}
}
</script>
</div>

17
neueKarte.php
View File

@ -16,22 +16,7 @@
<div class="inhalt">
<form action="allgemein.php">
<button class="button-ellipsoid" id="start" type="submit">
Allgemein
</button>
</form>
<form action="eigennamen.php">
<button class="button-ellipsoid" id="start" type="submit">
Eigennamen
</button>
</form>
<form action="substantive.php">
<button class="button-ellipsoid" id="start" type="submit">
Substantive
</button>
</form>
<form action="adjektive.php">
<button class="button-ellipsoid" id="start" type="submit">
Adjektive
Anderes
</button>
</form>
<form action="verben.php">

78
style.css
View File

@ -12,6 +12,10 @@ h2 {
font-size: 2.2rem;
}
p {
white-space: pre-wrap;
}
h2.seitentitel {
width: 100%;
border-style: none;
@ -75,11 +79,6 @@ div.header{
margin: 0px;
}
.p-karteikarte_verben_suffix {
margin: 0px;
margin-left: 15px;
}
#deutsch {
height: 250px;
}
@ -148,3 +147,72 @@ a:visited {
.td-pronomen {
width: 30%;
}
.kategorie {
font-size: 30px;
color: black;
align-items: center;
display: flex;
}
.kategorie input[type="radio"] {
transform: scale(1.5);
margin-right: 10px;
}
#form_hinzufuegenkarte {
width: 95%;
}
#p_deutsch {
display: inline-block;
}
#input_deutsch {
display: inline-block;
width: 700px;
margin-left: 30px;
}
.hinzufuegenKarteElemente {
display: flex;
justify-content: space-between;
}
#label_italienisch_schwarz {
color: black;
}
#label_italienisch_rot {
color: red;
}
#label_italienisch_gruen {
color: green;
}
#label_italienisch_blau {
color: blue;
}
#input_italienisch {
width: 850px;
display: inline-block;
}
#div_deutsch {
margin-top: 40px;
}
#div_italienisch_text {
display: inline-block;
width: 95%;
margin-top: 40px;
}
#div_italienisch_radio {
display: flex;
justify-content: space-between;
width: 65%;
margin-top: 10px;
}

25
substantive.php
View File

@ -1,25 +0,0 @@
<?php
require_once __DIR__ . '/includes/db_connect.php';
$system = getenv('POSTGRES_SYSTEM') ?? 'test';
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h2 class="seitentitel">pyolingo</h2>
</div>
<div class="menue">
<a href="index.php" class="menueLink">
< home >
</a>
<a href="neueKarte.php" class="menueLink">
< zurück >
</a>
</div>
</body>
</html>