fix colors

This commit is contained in:
Aron Petau 2025-09-17 20:26:44 +02:00
parent 242d3bd915
commit da5e765d49
13 changed files with 455 additions and 656 deletions

1
.venv Normal file
View file

@ -0,0 +1 @@
124-webapp-sckb

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -1,111 +0,0 @@
<!-- templates/result.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Print Cost Result</title>
<link rel="stylesheet" href="/static/css/style.css">
<style>
body {
font-family: sans-serif;
margin: 2em;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 1em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.5em;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.color {
background-color: #ffdede;
}
.black {
background-color: #e0e0ff;
}
.totals {
font-weight: bold;
}
.container {
max-width: 900px;
margin: auto;
}
h1,
h2 {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Print Cost for {{ result.filename }}</h1>
<table>
<thead>
<tr>
<th>Page</th>
<th>Width (m)</th>
<th>Height (m)</th>
<th>Area (m²)</th>
<th>Ink %</th>
<th>Type</th>
<th>Cost (€)</th>
</tr>
</thead>
<tbody>
{% for page in result.pages %}
<tr class="{{ 'color' if page.is_color else 'black' }}">
<td>{{ page.page }}</td>
<td>{{ "%.3f"|format(page.width_m) }}</td>
<td>{{ "%.3f"|format(page.height_m) }}</td>
<td>{{ "%.4f"|format(page.area_m2) }}</td>
<td>{{ "%.1f"|format(page.ink_pct) if page.ink_pct is not none else '-' }}</td>
<td>{{ 'Color' if page.is_color else 'B&W' }}</td>
<td>{{ "%.2f"|format(page.cost) }}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr class="totals">
<td colspan="3">Total Black Pages</td>
<td>{{ "%.4f"|format(result.total_area_black) }}</td>
<td colspan="2"></td>
<td>{{ "%.2f"|format(result.total_cost_black) }}</td>
</tr>
<tr class="totals">
<td colspan="3">Total Color Pages</td>
<td>{{ "%.4f"|format(result.total_area_color) }}</td>
<td colspan="2"></td>
<td>{{ "%.2f"|format(result.total_cost_color) }}</td>
</tr>
<tr class="totals">
<td colspan="6">Grand Total</td>
<td>{{ "%.2f"|format(result.grand_total) }}</td>
</tr>
</tfoot>
</table>
<p style="text-align:center; margin-top:2em;">
<a href="/">Upload another PDF</a>
</p>
</div>
</body>
</html>

BIN
data/uploads/huk612021p.pdf Normal file

Binary file not shown.

View file

@ -2,170 +2,324 @@
@font-face {
font-family: "SISTEMAS";
src: url("/static/fonts/SISTEMAS FONT BT.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "BauPro";
src: url("/static/fonts/BauPro.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/* === Typography === */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "SISTEMAS", sans-serif;
color: #001F4D;
/* navy blue */
}
body,
p,
input,
button,
label,
a {
font-family: "BauPro", sans-serif;
}
/* === Layout === */
/* === Base Typography & Layout === */
body {
background-color: #F9F9F9;
color: #333333;
font-family: 'BauPro', sans-serif;
background-color: #F5F5F7; /* soft Apple-like neutral */
color: #1C1C1E; /* dark grey text instead of pure black */
margin: 0;
padding: 0;
}
header {
display: flex;
align-items: center;
gap: 1em;
padding: 1em;
background-color: #001f3f;
/* navy */
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
flex-direction: column;
min-height: 100vh;
width: 100%;
}
.logo {
height: 60px;
h1, h2, h3, h4, h5, h6 {
font-family: 'SISTEMAS', sans-serif;
color: #2C3E50; /* muted marine blue for headers */
margin: 0.5em 0;
text-align: center;
}
/* === Header === */
header {
width: 100%;
background-color: #E9EEF5; /* light muted blue */
color: #1C1C1E; /* dark grey instead of white */
padding: 1.5em 0;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
header h1 {
font-size: 2em;
color: #2C3E50; /* dark marine blue */
}
header p {
font-size: 1em;
color: #8E2E75; /* muted magenta accent */
margin: 0.2em 0 0;
}
.logo-link img {
height: 70px;
margin-bottom: 0.5em;
cursor: pointer;
}
nav {
margin-top: 0.5em;
}
nav a {
color: #fff;
color: #2C3E50; /* muted dark blue links */
text-decoration: none;
margin-right: 1em;
margin: 0 0.5em;
font-weight: 600;
}
nav a:hover {
text-decoration: underline;
color: #FFCC00; /* soft yellow hover */
}
/* === Links & Buttons === */
a.link-card {
display: block;
padding: 1.2em 1em;
background-color: #E6007E;
/* magenta */
color: #FFD600;
/* yellow text */
text-decoration: none;
border-radius: 10px;
text-align: center;
transition: all 0.2s ease-in-out;
}
a.link-card:hover {
background-color: #FFD600;
/* yellow hover */
color: #001F4D;
/* navy text on hover */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
button {
padding: 0.7em;
background-color: #E6007E;
/* magenta */
color: #FFD600;
/* yellow text */
border: none;
border-radius: 6px;
font-size: 1em;
cursor: pointer;
}
button:hover {
background-color: #FFD600;
/* yellow hover */
color: #001F4D;
/* navy text */
}
/* === Result Page Table Styles === */
table {
border-collapse: collapse;
/* === Main Container === */
main {
flex: 1;
width: 100%;
margin-top: 1em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.5em;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.color {
background-color: #ffdede;
}
.black {
background-color: #e0e0ff;
}
.totals {
font-weight: bold;
}
.container {
max-width: 900px;
margin: auto;
width: 90%;
margin: 3em auto;
display: flex;
flex-direction: column;
gap: 1.5em;
background: #FFFFFF;
padding: 2em;
border-radius: 12px;
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
h1,
h2 {
/* === Link Cards & Buttons === */
a.link-card, button {
display: block;
padding: 1.2em 1em;
font-size: 1.2em;
text-align: center;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
a.link-card {
background-color: #F9F9F9; /* soft neutral card */
color: #1C1C1E;
border-left: 6px solid #8E2E75; /* muted magenta accent */
text-decoration: none;
}
a.link-card:hover {
background-color: #8E2E75;
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
button {
background-color: #8E2E75; /* muted magenta */
color: #FFFFFF;
border: none;
border-radius: 8px;
}
button:hover {
background-color: #FFCC00; /* soft yellow */
color: #1C1C1E;
}
/* === Forms === */
form {
display: flex;
flex-direction: column;
gap: 1em;
margin-top: 1em;
}
form label {
font-weight: 600;
color: #2C3E50;
}
form input[type="text"],
form textarea,
form input[type="file"] {
width: 100%;
padding: 0.6em;
border: 1px solid #D1D1D6; /* light grey border like Apple forms */
border-radius: 8px;
font-size: 1em;
box-sizing: border-box;
resize: vertical;
background-color: #FAFAFA;
color: #1C1C1E;
}
form textarea {
min-height: 90px;
}
/* === Rate Info & Errors === */
.rate-info {
text-align: center;
color: #2C3E50;
margin-top: 1em;
}
.error {
color: #D93025; /* subtle red */
font-weight: bold;
text-align: center;
margin-top: 1em;
}
/* === Tables === */
table {
width: 100%;
border-collapse: collapse;
margin-top: 2em;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
th, td {
border: 1px solid #E1E1E6;
padding: 0.5em;
text-align: center;
color: #1C1C1E;
}
th {
background-color: #F2F2F7;
font-weight: 600;
}
.color {
background-color: #FDE9F2; /* soft pink */
}
.black {
background-color: #E5E5FF; /* soft blue */
}
.totals {
font-weight: 600;
}
/* === Alerts === */
.alert {
padding: 1em;
border-radius: 6px;
border-radius: 8px;
margin-bottom: 1em;
text-align: center;
font-weight: bold;
font-weight: 600;
}
.alert.success {
background-color: #4CAF50;
/* green */
color: white;
background-color: #2C3E50; /* muted marine blue */
color: #FFFFFF;
}
.alert.error {
background-color: #E6007E;
/* magenta */
color: #FFD600;
/* yellow text */
}
background-color: #8E2E75; /* muted magenta */
color: #FFFFFF;
}
/* === Footer === */
footer {
text-align: center;
padding: 1.5em 1em;
background-color: #F2F2F7; /* soft neutral */
color: #1C1C1E;
width: 100%;
}
footer img.footer-logo {
height: 50px;
margin-bottom: 0.5em;
}
/* === Links under forms === */
.link a {
color: #2C3E50;
text-decoration: underline;
font-weight: 600;
text-align: center;
}
/* === Responsive / Mobile Friendly === */
@media (max-width: 1024px) {
.container {
width: 95%;
margin: 2em auto;
padding: 1.5em;
}
header h1 {
font-size: 1.7em;
}
header p {
font-size: 0.95em;
}
.logo-link img {
height: 60px;
}
nav {
flex-direction: column;
align-items: center;
gap: 0.4em;
}
nav a {
margin: 0;
font-size: 0.95em;
}
a.link-card, button {
font-size: 1em;
padding: 1em 0.8em;
}
form textarea {
min-height: 80px;
}
table {
display: block;
overflow-x: auto;
}
th, td {
padding: 0.45em;
font-size: 0.9em;
}
}
@media (max-width: 768px) {
header h1 {
font-size: 1.5em;
}
header p {
font-size: 0.9em;
}
.logo-link img {
height: 55px;
}
a.link-card, button {
font-size: 0.95em;
padding: 0.9em 0.7em;
}
form textarea {
min-height: 70px;
}
}

BIN
static/images/gvb-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View file

@ -1,103 +1,56 @@
<!-- templates/about.html -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Über uns Studio EinsZwoVier</title>
<link rel="stylesheet" href="/static/css/style.css">
<style>
/* Override colors for this page */
header {
background-color: #001F4D; /* navy */
color: #FFD600; /* yellow */
}
h1, h2, h3 {
color: #001F4D; /* navy headers */
}
a {
color: #E6007E; /* magenta links */
}
a:hover {
color: #FFD600;
}
.container {
max-width: 800px;
margin: 3em auto;
background: #fff;
padding: 2em;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
ul {
list-style-type: disc;
margin-left: 1.5em;
}
footer {
text-align: center;
margin-top: 4em;
color: #555;
padding-bottom: 2em;
}
</style>
</head>
<body>
<header>
<h1>Studio EinsZwoVier Makerspace</h1>
<p>Am Gabriele-von-Bülow-Gymnasium</p>
</header>
{% extends "base.html" %}
<div class="container">
{% block title %}Über uns Studio EinsZwoVier{% endblock %}
{% block content %}
<div class="container">
<section>
<h2>Über den Maker Space</h2>
<p>Seit Dezember 2024 trägt unser Maker Space den Namen <strong>studio einszwovier</strong>. Er ist ein innovativer, digitaler Lernraum, der Kreativität, Technik und Bildungsgerechtigkeit verbindet. Hier wird „Making“ erlebbar: Lernende gestalten ihren Lernprozess aktiv, entdecken individuelle Stärken und erleben durch Selbstwirksamkeit besondere Motivation.</p>
<h2>Über den Maker Space</h2>
<p>Seit Dezember 2024 trägt unser Maker Space den Namen <strong>studio einszwovier</strong>. Er ist ein innovativer, digitaler Lernraum, der Kreativität, Technik und Bildungsgerechtigkeit verbindet. Hier wird „Making“ erlebbar: Lernende gestalten ihren Lernprozess aktiv, entdecken individuelle Stärken und erleben durch Selbstwirksamkeit besondere Motivation.</p>
</section>
<section>
<h2>Ausstattung</h2>
<ul>
<li><strong>3D-Drucker:</strong> Für Modelle und Prototypen.</li>
<li><strong>Lasercutter:</strong> Präzises Schneiden und Gravieren von Materialien.</li>
<li><strong>Microcontroller:</strong> Elektronik und Programmierung.</li>
<li><strong>Holzbearbeitung:</strong> Handwerkliche Projekte.</li>
<li><strong>Textildruckgeräte:</strong> Kreative Designs auf Stoffen.</li>
</ul>
<h2>Ausstattung</h2>
<ul>
<li><strong>3D-Drucker:</strong> Für Modelle und Prototypen.</li>
<li><strong>Lasercutter:</strong> Präzises Schneiden und Gravieren von Materialien.</li>
<li><strong>Microcontroller:</strong> Elektronik und Programmierung.</li>
<li><strong>Holzbearbeitung:</strong> Handwerkliche Projekte.</li>
<li><strong>Textildruckgeräte:</strong> Kreative Designs auf Stoffen.</li>
</ul>
</section>
<section>
<h2>Betreuungsteam</h2>
<p>Betreut wird der Maker Space von <strong>Aron Petau</strong> und <strong>Friedrich Weber</strong>. Sie sind montags bis mittwochs von 11:00 bis 15:00 Uhr vor Ort. Einfach vorbeischauen, Ideen vorstellen und loslegen!</p>
<h2>Betreuungsteam</h2>
<p>Betreut wird der Maker Space von <strong>Aron Petau</strong> und <strong>Friedrich Weber</strong>. Sie sind montags bis mittwochs von 11:00 bis 15:00 Uhr vor Ort. Einfach vorbeischauen, Ideen vorstellen und loslegen!</p>
</section>
<section>
<h2>Öffnungszeiten</h2>
<p>Dienstag bis Donnerstag: 11:00 16:00 Uhr<br>
Raum 124, Gabriele-von-Bülow-Gymnasium</p>
<h2>Öffnungszeiten</h2>
<p>Dienstag bis Donnerstag: 11:00 16:00 Uhr<br>
Raum 124, Gabriele-von-Bülow-Gymnasium</p>
</section>
<section>
<h2>Kontakt</h2>
<p>E-Mail: <a href="mailto:einszwovier@gvb-gymnasium.de">einszwovier@gvb-gymnasium.de</a></p>
<h2>Kontakt</h2>
<p>E-Mail: <a href="mailto:einszwovier@gvb-gymnasium.de">einszwovier@gvb-gymnasium.de</a></p>
</section>
<section>
<h2>Aktuelle Kurse</h2>
<ul>
<li><strong>Löten und Leuchten:</strong> Herstellung von Nachttischleuchten mit 3D-Design und Löttechnik.</li>
<li><strong>Die Vogelvilla:</strong> Bau von Vogelhäusern mit Lasercutter und Holzbearbeitung.</li>
</ul>
<h2>Aktuelle Kurse</h2>
<ul>
<li><strong>Löten und Leuchten:</strong> Herstellung von Nachttischleuchten mit 3D-Design und Löttechnik.</li>
<li><strong>Die Vogelvilla:</strong> Bau von Vogelhäusern mit Lasercutter und Holzbearbeitung.</li>
</ul>
</section>
<section>
<h2>Standort</h2>
<p>Gabriele-von-Bülow-Gymnasium<br>
Tile-Brügge-Weg 63, 13509 Berlin (Tegel)<br>
Telefon: 030 21 00 52 460<br>
E-Mail: <a href="mailto:info@gvb-gymnasium.de">info@gvb-gymnasium.de</a></p>
<h2>Standort</h2>
<p>Gabriele-von-Bülow-Gymnasium<br>
Tile-Brügge-Weg 63, 13509 Berlin (Tegel)<br>
Telefon: 030 21 00 52 460<br>
E-Mail: <a href="mailto:info@gvb-gymnasium.de">info@gvb-gymnasium.de</a></p>
</section>
</div>
<footer>
&copy; 2025 Studio EinsZwoVier Gabriele-von-Bülow-Gymnasium
</footer>
</body>
</html>
</div>
{% endblock %}

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="de">
<head>
<meta charset="UTF-8">
<title>{% block title %}Studio Einszwovier{% endblock %}</title>
@ -11,14 +11,20 @@
<img src="/static/images/logo.png" alt="Studio Einszwovier Logo" class="logo">
</a>
<nav>
<a href="/">Home</a> |
<a href="/about">About</a> |
<a href="/cost">Cost Calculator</a>
<a href="/">Startseite</a> |
<a href="/about">Über uns</a> |
<a href="/cost">Kostenrechner</a> |
<a href="/">Zur Startseite</a>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<img src="/static/images/gvb-logo.png" alt="GVB Logo" class="footer-logo">
&copy; Studio Einszwovier @ GvB Berlin
</footer>
</body>
</html>

View file

@ -1,170 +1,74 @@
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
{% extends "base.html" %}
<head>
<meta charset="UTF-8">
<title>Print Cost Calculator</title>
<link rel="stylesheet" href="/static/css/style.css">
<style>
body {
font-family: sans-serif;
margin: 2em;
background-color: #f9f9f9;
color: #333;
}
{% block title %}Kostenrechner Studio EinsZwoVier{% endblock %}
.container {
max-width: 900px;
margin: auto;
background: #fff;
padding: 2em;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
h1,
h2 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
gap: 1em;
margin-top: 1em;
}
input[type="file"] {
padding: 0.5em;
}
button {
padding: 0.7em;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 6px;
font-size: 1em;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.rate-info {
text-align: center;
color: #555;
margin-top: 1em;
}
.error {
color: red;
font-weight: bold;
text-align: center;
margin-top: 1em;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 2em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.5em;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.color {
background-color: #ffdede;
}
.black {
background-color: #e0e0ff;
}
.totals {
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Print Cost Calculator</h1>
{% block content %}
<div class="container">
<h1>Kostenrechner für Drucke</h1>
{% if error %}
<p class="error">{{ error }}</p>
{% endif %}
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" accept="application/pdf" required />
<button type="submit">Upload & Calculate</button>
<input type="file" name="file" accept="application/pdf" required />
<button type="submit">Hochladen & Berechnen</button>
</form>
<p class="rate-info">
Rates are fixed via environment variables:<br>
B&W: {{ rate_black if rate_black else 'RATE_PER_M2_BLACK' }} € / m²,
Color: {{ rate_color if rate_color else 'RATE_PER_M2_COLOR' }} € / m²
Preise werden über Umgebungsvariablen festgelegt:<br>
S/W: {{ rate_black if rate_black else 'RATE_PER_M2_BLACK' }} € / m²,
Farbe: {{ rate_color if rate_color else 'RATE_PER_M2_COLOR' }} € / m²
</p>
{% if result %}
<h2>Results for {{ result.filename }}</h2>
<h2>Ergebnisse für {{ result.filename }}</h2>
<table>
<thead>
<tr>
<th>Page</th>
<th>Width (m)</th>
<th>Height (m)</th>
<th>Area (m²)</th>
<th>Ink %</th>
<th>Type</th>
<th>Cost (€)</th>
</tr>
</thead>
<tbody>
{% for page in result.pages %}
<tr class="{{ 'color' if page.is_color else 'black' }}">
<td>{{ page.page }}</td>
<td>{{ "%.3f"|format(page.width_m) }}</td>
<td>{{ "%.3f"|format(page.height_m) }}</td>
<td>{{ "%.4f"|format(page.area_m2) }}</td>
<td>{{ "%.1f"|format(page.ink_pct) if page.ink_pct is not none else '-' }}</td>
<td>{{ 'Color' if page.is_color else 'B&W' }}</td>
<td>{{ "%.2f"|format(page.cost) }}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr class="totals">
<td colspan="3">Total Black Pages</td>
<td>{{ "%.4f"|format(result.total_area_black) }}</td>
<td colspan="2"></td>
<td>{{ "%.2f"|format(result.total_cost_black) }}</td>
</tr>
<tr class="totals">
<td colspan="3">Total Color Pages</td>
<td>{{ "%.4f"|format(result.total_area_color) }}</td>
<td colspan="2"></td>
<td>{{ "%.2f"|format(result.total_cost_color) }}</td>
</tr>
<tr class="totals">
<td colspan="6">Grand Total</td>
<td>{{ "%.2f"|format(result.grand_total) }}</td>
</tr>
</tfoot>
<thead>
<tr>
<th>Seite</th>
<th>Breite (m)</th>
<th>Höhe (m)</th>
<th>Fläche (m²)</th>
<th>Tinten %</th>
<th>Typ</th>
<th>Kosten (€)</th>
</tr>
</thead>
<tbody>
{% for page in result.pages %}
<tr class="{{ 'color' if page.is_color else 'black' }}">
<td>{{ page.page }}</td>
<td>{{ "%.3f"|format(page.width_m) }}</td>
<td>{{ "%.3f"|format(page.height_m) }}</td>
<td>{{ "%.4f"|format(page.area_m2) }}</td>
<td>{{ "%.1f"|format(page.ink_pct) if page.ink_pct is not none else '-' }}</td>
<td>{{ 'Farbe' if page.is_color else 'S/W' }}</td>
<td>{{ "%.2f"|format(page.cost) }}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr class="totals">
<td colspan="3">Summe S/W</td>
<td>{{ "%.4f"|format(result.total_area_black) }}</td>
<td colspan="2"></td>
<td>{{ "%.2f"|format(result.total_cost_black) }}</td>
</tr>
<tr class="totals">
<td colspan="3">Summe Farbe</td>
<td>{{ "%.4f"|format(result.total_area_color) }}</td>
<td colspan="2"></td>
<td>{{ "%.2f"|format(result.total_cost_color) }}</td>
</tr>
<tr class="totals">
<td colspan="6">Gesamtsumme</td>
<td>{{ "%.2f"|format(result.grand_total) }}</td>
</tr>
</tfoot>
</table>
{% endif %}
</div>
</body>
</html>
</div>
{% endblock %}

View file

@ -1,122 +1,15 @@
<!-- templates/landing.html -->
<!DOCTYPE html>
<html lang="en">
{% extends "base.html" %}
<head>
<meta charset="UTF-8">
<title>Studio Einszwovier</title>
<link rel="stylesheet" href="/static/css/style.css">
<style>
/* Body & layout */
body {
font-family: 'BauPro', sans-serif;
background-color: #f0f4f8;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
color: #001f3f;
/* navy text */
}
{% block title %}Studio EinsZwoVier{% endblock %}
/* Header with logo */
header {
width: 100%;
background-color: #001f3f;
/* navy */
color: #fff;
padding: 1.5em 0;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
header h1 {
margin: 0.5em 0 0;
font-family: 'SISTEMAS', sans-serif;
font-size: 2em;
}
header p {
margin: 0;
font-size: 1em;
color: #ff00ff;
/* magenta accent for subtitle */
}
.logo-link img {
height: 80px;
margin-bottom: 0.5em;
cursor: pointer;
}
/* Main container with links */
.container {
max-width: 700px;
width: 90%;
margin: 3em auto;
display: flex;
flex-direction: column;
gap: 1.5em;
}
/* Link cards */
a.link-card {
display: block;
padding: 1.2em 1em;
background-color: #fff;
color: #001f3f;
/* navy text */
text-decoration: none;
border-left: 6px solid #ff00ff;
/* magenta accent */
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
font-size: 1.2em;
text-align: center;
transition: all 0.3s ease;
}
a.link-card:hover {
background-color: #ff0;
/* yellow hover */
color: #001f3f;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
}
footer {
margin-top: 4em;
color: #555;
text-align: center;
font-size: 0.9em;
padding-bottom: 2em;
}
</style>
</head>
<body>
<header>
<a href="/" class="logo-link">
<img src="/static/images/logo.png" alt="Studio Einszwovier Logo">
</a>
<h1>Studio Einszwovier</h1>
<p>Welcome to the school makerspace portal at the GvB</p>
</header>
<div class="container">
<a class="link-card" href="/about">About us</a>
<a class="link-card" href="/cost">Print Cost Calculator</a>
<a class="link-card" href="mailto:einszwovier@gvb-gymnasium.de">Contact: einszwovier@gvb-gymnasium.de</a>
<a class="link-card" href="https://gvb-gymnasium.de">Log in to iServ</a>
<a class="link-card" href="https://www.gvb-berlin.de">School website</a>
</div>
<footer>
&copy; Studio Einszwovier @ GvB Berlin
</footer>
</body>
</html>
{% block content %}
<div class="container">
<a class="link-card" href="/about">Über uns</a>
<a class="link-card" href="/cost">Kostenrechner</a>
<a class="link-card" href="mailto:einszwovier@gvb-gymnasium.de">Kontakt: einszwovier@gvb-gymnasium.de</a>
<a class="link-card" href="https://gvb-gymnasium.de">iServ Login</a>
<a class="link-card" href="https://www.gvb-berlin.de">Schulseite</a>
<a class="link-card" href="https://outline.example.com">Wissenssammlung</a>
</div>
{% endblock %}

View file

@ -1,17 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<!-- templates/result.html -->
{% extends "base.html" %}
<head>
<meta charset="UTF-8">
<title>Print Cost Result</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
{% block title %}Druckkosten Ergebnis Studio EinsZwoVier{% endblock %}
<body>
<div class="container">
<h1>Print Cost for {{ result.filename }}</h1>
{% block content %}
<div class="container">
<h1>Druckkosten für {{ result.filename }}</h1>
<!-- Success / Error Banner -->
<!-- Erfolg / Fehler Banner -->
{% if success %}
<div class="alert success">{{ success }}</div>
{% endif %}
@ -19,64 +15,67 @@
<div class="alert error">{{ error }}</div>
{% endif %}
<!-- Ergebnis Tabelle -->
<table>
<thead>
<tr>
<th>Page</th>
<th>Width (m)</th>
<th>Height (m)</th>
<th>Area (m²)</th>
<th>Ink %</th>
<th>Type</th>
<th>Cost (€)</th>
</tr>
</thead>
<tbody>
{% for page in result.pages %}
<tr class="{{ 'color' if page.is_color else 'black' }}">
<td>{{ page.page }}</td>
<td>{{ "%.3f"|format(page.width_m) }}</td>
<td>{{ "%.3f"|format(page.height_m) }}</td>
<td>{{ "%.4f"|format(page.area_m2) }}</td>
<td>{{ "%.1f"|format(page.ink_pct) if page.ink_pct is not none else '-' }}</td>
<td>{{ 'Color' if page.is_color else 'B&W' }}</td>
<td>{{ "%.2f"|format(page.cost) }}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr class="totals">
<td colspan="3">Total Black Pages</td>
<td>{{ "%.4f"|format(result.total_area_black) }}</td>
<td colspan="2"></td>
<td>{{ "%.2f"|format(result.total_cost_black) }}</td>
</tr>
<tr class="totals">
<td colspan="3">Total Color Pages</td>
<td>{{ "%.4f"|format(result.total_area_color) }}</td>
<td colspan="2"></td>
<td>{{ "%.2f"|format(result.total_cost_color) }}</td>
</tr>
<tr class="totals">
<td colspan="6">Grand Total</td>
<td>{{ "%.2f"|format(result.grand_total) }}</td>
</tr>
</tfoot>
<thead>
<tr>
<th>Seite</th>
<th>Breite (m)</th>
<th>Höhe (m)</th>
<th>Fläche (m²)</th>
<th>Tinten %</th>
<th>Typ</th>
<th>Kosten (€)</th>
</tr>
</thead>
<tbody>
{% for page in result.pages %}
<tr class="{{ 'color' if page.is_color else 'black' }}">
<td>{{ page.page }}</td>
<td>{{ "%.3f"|format(page.width_m) }}</td>
<td>{{ "%.3f"|format(page.height_m) }}</td>
<td>{{ "%.4f"|format(page.area_m2) }}</td>
<td>{{ "%.1f"|format(page.ink_pct) if page.ink_pct is not none else '-' }}</td>
<td>{{ 'Farbe' if page.is_color else 'S/W' }}</td>
<td>{{ "%.2f"|format(page.cost) }}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr class="totals">
<td colspan="3">Summe S/W</td>
<td>{{ "%.4f"|format(result.total_area_black) }}</td>
<td colspan="2"></td>
<td>{{ "%.2f"|format(result.total_cost_black) }}</td>
</tr>
<tr class="totals">
<td colspan="3">Summe Farbe</td>
<td>{{ "%.4f"|format(result.total_area_color) }}</td>
<td colspan="2"></td>
<td>{{ "%.2f"|format(result.total_cost_color) }}</td>
</tr>
<tr class="totals">
<td colspan="6">Gesamtsumme</td>
<td>{{ "%.2f"|format(result.grand_total) }}</td>
</tr>
</tfoot>
</table>
<!-- Send order form -->
<!-- Auftrag senden Formular -->
<form action="/send-order" method="post">
<input type="hidden" name="filename" value="{{ result.filename }}">
<label for="comment"><strong>Additional Instructions:</strong></label>
<textarea id="comment" name="comment"
placeholder="e.g. Please print double-sided, staple in top left corner..."></textarea>
<button type="submit">Send Order</button>
<input type="hidden" name="filename" value="{{ result.filename }}">
<label for="name"><strong>Name:</strong></label>
<input type="text" id="name" name="name" required placeholder="Dein Name">
<label for="comment"><strong>Zusätzliche Hinweise:</strong></label>
<textarea id="comment" name="comment" rows="4" placeholder="z. B. doppelseitig oder spezielles Papier"></textarea>
<button type="submit">Auftrag senden</button>
</form>
<div class="link">
<a href="/">Upload another PDF</a>
<div class="link" style="text-align:center; margin-top:1em;">
<a href="/">Neues PDF hochladen</a>
</div>
</div>
</body>
</html>
</div>
{% endblock %}