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

grundlegendes Design und Funktionalität

Browse Source
This commit is contained in:
p3t3rp1Lz 2026-04-03 16:45:46 +02:00
parent e6a0acfde0
commit 07036380bb
4 changed files with 180 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
data.php Normal file
View File

@ -0,0 +1,15 @@
<?php
require_once __DIR__ . '/includes/db_connect.php';
header('Content-Type: application/json');
$stmt = $pdo->query("SELECT kk.id,
vorderseite,
rueckseite,
farbe,
name
FROM karteikarte kk
JOIN kategorie k ON k.id = kk.kategorie_id;");
$karteikarten = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($karteikarten);

BIN
favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

82
index.php
View File

@ -2,9 +2,11 @@
require_once __DIR__ . '/includes/db_connect.php'; require_once __DIR__ . '/includes/db_connect.php';
$system = getenv('POSTGRES_SYSTEM') ?? 'test'; $system = getenv('POSTGRES_SYSTEM') ?? 'test';
$stmt = $pdo->query("SELECT vorderseite $stmt = $pdo -> query("SELECT COUNT(*) AS gesamtanzahl
FROM karteikarte;"); FROM karteikarte;");
$karteikarten = $stmt->fetchAll(PDO::FETCH_ASSOC); $row = $stmt->fetch(PDO::FETCH_ASSOC);
$gesamtanzahl = $row ? $row['gesamtanzahl'] : 0;
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@ -13,8 +15,78 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<?php foreach ($karteikarten as $y): ?> <div class="header">
<p>Vorderseite: <?= $y['vorderseite'] ?></p> <h2 class="seitentitel">pyolingo</h2>
<?php endforeach; ?> <h2 id="wortZaehler"><?= $gesamtanzahl ?></h2>
</div>
<div class="inhalt">
<button class="button-ellipsoid" id="start">
Leg´ los
</button>
<button class="button-karteikarte" id="deutsch" />
<button class="button-karteikarte" id="italienisch" />
<script>
let items = [];
let index = 0;
fetch("data.php")
.then(r => r.json())
.then(data => items = data);
document.getElementById("start").onclick = function() {
if(document.getElementById("start").innerText != "Neustart") {
changeBackground()
document.getElementById("deutsch").style.display = "inline-block";
document.getElementById("start").innerText = "Neustart";
showVorderseite();
} else {
items.sort(() => Math.random() - 0.5);
index = 0;
changeBackground();
showVorderseite();
document.getElementById("italienisch").style.display = "none";
}
};
document.getElementById("deutsch").onclick = function() {
document.getElementById("italienisch").style.display = "inline-block";
document.getElementById("deutsch").classList.add("disabled");
showRueckseite();
changeBackground()
};
document.getElementById("italienisch").onclick = function() {
document.getElementById("italienisch").style.display = "none";
document.getElementById("deutsch").classList.remove("disabled");
index++;
if(index >= items.length) index = 0;
showVorderseite();
changeBackground()
};
function showVorderseite() {
let item = items[index];
document.getElementById("deutsch").innerText = item.vorderseite;
document.getElementById("wortZaehler").innerText = (index + 1) + " / " + items.length;
}
function showRueckseite() {
let item = items[index];
document.getElementById("italienisch").innerText = item.rueckseite;
}
function changeBackground() {
let item = items[index];
if(item.farbe != "default") {
document.getElementById("italienisch").style.color = item.farbe;
} else {
document.getElementById("italienisch").style.color = "black";
}
}
</script>
</div>
</body> </body>
</html> </html>

89
style.css
View File

@ -1,8 +1,95 @@
html { html {
font-size: 16px; font-size: 26px;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
body { body {
background-color: rgb(122, 122, 122); background-color: rgb(122, 122, 122);
color: #14748A;
}
h2 {
font-size: 2.2rem;
}
h2.seitentitel {
width: 100%;
border-style: none;
margin-left: 100px;
}
div.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
background-color: rgb(210, 210, 210);
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
padding-top: 20px;
padding-bottom: 20px;
}
.button-ellipsoid:hover {
background: linear-gradient(#169ab7, #14748A);
}
.button-ellipsoid {
font-size: 26px;
font-family: Arial, Helvetica, sans-serif;
height: 100px;
width: 300px;
margin-top: 25px;
padding: 25px 40px;
color: black;
background: radial-gradient(ellipse at center, #14748A 0%, #169ab7 70%);
border: none;
border-radius: 180px / 130px;
box-shadow: inset 0 3px 6px rgba(255,255,255,0.4),
0 4px 8px rgba(0,0,0,0.3);
}
.button-karteikarte {
display: none;
font-size: 96px;
font-family: Arial, Helvetica, sans-serif;
width: 75%;
margin-top: 25px;
padding: 25px 40px;
color: black;
background: rgb(210, 210, 210);;
border: none;
box-shadow: inset 0 3px 6px rgba(255,255,255,0.4),
0 4px 8px rgba(0,0,0,0.3);
}
#deutsch {
height: 250px;
}
#deutsch.disabled {
pointer-events: none;
opacity: 1;
}
#italienisch {
height: 750px;
}
div.inhalt {
margin-top: 150px;
height: calc(100vh - 80px);
display: flex;
flex-direction:column;
align-items: center;
}
#wortZaehler {
width: 300px;
margin-right: 100px;
text-align: right;
margin-left: 0px;
} }