TechDay-Bruchsal-2026-Seite ergänzt
- public/techday.html: Eventseite im Landingpage-Stil mit Hero, Event-Beschreibung, Vortrag (Speaker David Bertram), mITapp-Abschnitt mit Platzhaltern, GameJam-Verweis und Event-Infos - styles.css: Styles für TechDay-Seite (Hero, Talk-Split, Speaker-Karte, Screenshot-Platzhalter) - index.html: Navigations-Verweis "TechDay" in Header, Mobilmenü und Footer; GameJam zusätzlich im Footer Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
ToolCTRLandClaude Opus 4.7 committed
1 parent
b629bbc90a
commit
a0c306374f
4 files changed
+388
-5
No files matched your search
@@ -21,6 +21,7 @@
|
||||
<a href="#leistungen">Leistungen</a>
|
||||
<a href="#vorgehen">Vorgehen</a>
|
||||
<a href="#arbeit">Organisation</a>
|
||||
<a href="/techday.html">TechDay</a>
|
||||
<a href="/gamejam.html">GameJam</a>
|
||||
<a class="btn btn-solid btn-sm" href="#kontakt">Kontakt aufnehmen</a>
|
||||
</nav>
|
||||
@@ -32,6 +33,7 @@
|
||||
<a href="#leistungen">Leistungen</a>
|
||||
<a href="#vorgehen">Vorgehen</a>
|
||||
<a href="#arbeit">Organisation</a>
|
||||
<a href="/techday.html">TechDay</a>
|
||||
<a href="/gamejam.html">GameJam</a>
|
||||
<a class="btn btn-solid" href="#kontakt">Kontakt aufnehmen</a>
|
||||
</div>
|
||||
@@ -361,6 +363,8 @@
|
||||
<a href="#leistungen">Leistungen</a>
|
||||
<a href="#vorgehen">Vorgehen</a>
|
||||
<a href="#arbeit">Organisation</a>
|
||||
<a href="/techday.html">TechDay</a>
|
||||
<a href="/gamejam.html">GameJam</a>
|
||||
<a href="#kontakt">Kontakt</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
|
||||
@@ -728,6 +728,117 @@ a { color: inherit; text-decoration: none; }
|
||||
html { scroll-behavior: auto; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
TECHDAY-SEITE
|
||||
============================================================ */
|
||||
.td-hero { padding: 88px 0; border-bottom: 1px solid var(--line); }
|
||||
.td-hero .eyebrow { margin-bottom: 22px; }
|
||||
.td-title {
|
||||
font-size: clamp(34px, 4.6vw, 60px);
|
||||
line-height: 1.06;
|
||||
letter-spacing: -.022em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 22px;
|
||||
max-width: 15em;
|
||||
}
|
||||
.td-lead {
|
||||
font-size: 17px;
|
||||
color: var(--gray-1);
|
||||
max-width: 40em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.td-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1.45fr 1fr;
|
||||
gap: 56px;
|
||||
align-items: start;
|
||||
}
|
||||
.td-talk-kicker {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gray-2);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.td-talk-title {
|
||||
font-size: clamp(24px, 3vw, 34px);
|
||||
font-weight: 700;
|
||||
letter-spacing: -.02em;
|
||||
line-height: 1.12;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.td-talk-sub {
|
||||
font-size: 16px;
|
||||
color: var(--gray-1);
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.td-talk-body p {
|
||||
font-size: 15px;
|
||||
color: var(--gray-1);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.speaker-card {
|
||||
border: 1px solid var(--line-strong);
|
||||
background: var(--paper);
|
||||
padding: 28px 26px;
|
||||
}
|
||||
.speaker-card .sp-label {
|
||||
font-size: 11px;
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: var(--gray-2);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.speaker-card .sp-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
.speaker-card .sp-role {
|
||||
font-size: 14px;
|
||||
color: var(--gray-1);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.speaker-card .sp-bio {
|
||||
font-size: 14px;
|
||||
color: var(--gray-1);
|
||||
}
|
||||
|
||||
/* Platzhalter für mITapp-Screenshots (folgen vom Betreiber) */
|
||||
.placeholder-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.placeholder-img {
|
||||
border: 1.5px dashed var(--line-strong);
|
||||
background: var(--paper-2);
|
||||
aspect-ratio: 4 / 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
font-size: 11px;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: var(--gray-2);
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.td-split { grid-template-columns: 1fr; gap: 36px; }
|
||||
.placeholder-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.placeholder-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
RECHTLICHE SEITEN (Impressum / Datenschutz)
|
||||
============================================================ */
|
||||
|
||||
@@ -0,0 +1,250 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>TechDay Bruchsal 2026 — ToolCTRL</title>
|
||||
<meta name="description" content="ToolCTRL beim Bruchsaler TechDay 2026: Vortrag, AI GameJam und die mITapp. Am 27. Mai 2026 im HubWerk01 Bruchsal." />
|
||||
<link rel="icon" type="image/png" href="/assets/favicon.png" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ============ HEADER ============ -->
|
||||
<header class="site-header" id="top">
|
||||
<div class="wrap header-inner">
|
||||
<a class="brand" href="/" aria-label="ToolCTRL Startseite">
|
||||
<img src="/assets/logo-black.svg" alt="ToolCTRL" class="brand-logo" />
|
||||
</a>
|
||||
<nav class="nav" aria-label="Hauptnavigation">
|
||||
<a href="/#leistungen">Leistungen</a>
|
||||
<a href="/#vorgehen">Vorgehen</a>
|
||||
<a href="/#arbeit">Organisation</a>
|
||||
<a href="/techday.html">TechDay</a>
|
||||
<a href="/gamejam.html">GameJam</a>
|
||||
<a class="btn btn-solid btn-sm" href="/#kontakt">Kontakt aufnehmen</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Menü" aria-expanded="false">
|
||||
<span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-nav" hidden>
|
||||
<a href="/#leistungen">Leistungen</a>
|
||||
<a href="/#vorgehen">Vorgehen</a>
|
||||
<a href="/#arbeit">Organisation</a>
|
||||
<a href="/techday.html">TechDay</a>
|
||||
<a href="/gamejam.html">GameJam</a>
|
||||
<a class="btn btn-solid" href="/#kontakt">Kontakt aufnehmen</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- ============ HERO ============ -->
|
||||
<section class="td-hero">
|
||||
<div class="wrap">
|
||||
<span class="eyebrow">Bruchsaler TechDay · 27. Mai 2026</span>
|
||||
<h1 class="td-title">ToolCTRL beim TechDay Bruchsal 2026.</h1>
|
||||
<p class="td-lead">
|
||||
Der Bruchsaler TechDay ist die erste Tech-Konferenz der Stadt: ein Tag
|
||||
voller Talks, Workshops und Austausch im HubWerk01. Als aktiver Teil des
|
||||
mITup e. V. sind wir mittendrin: mit einem Vortrag, der AI GameJam
|
||||
und der App, die das Event zusammenhält.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-solid" href="https://techday-bruchsal-2026.eventbrite.de"
|
||||
target="_blank" rel="noopener">Tickets sichern</a>
|
||||
<a class="btn btn-ghost" href="https://mitapp.mitup.de/event/techday-bruchsal-2026"
|
||||
target="_blank" rel="noopener">Programm ansehen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ DER TECHDAY ============ -->
|
||||
<section class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">Der TechDay</span>
|
||||
<h2 class="section-title">Ein Tag für Bruchsals Tech-Szene.</h2>
|
||||
<p class="section-intro">
|
||||
Der TechDay Bruchsal 2026 will die Stadt als regionalen Knotenpunkt
|
||||
für Technologie und Vernetzung etablieren. Auf dem Programm stehen
|
||||
Vorträge, Workshops und Formate zum Mitmachen. Veranstaltet vom
|
||||
gemeinnützigen mITup e. V., dessen Vereinsarbeit wir als
|
||||
ToolCTRL aktiv mittragen. Wir bringen uns an gleich drei Stellen ein:
|
||||
mit einem eigenen Vortrag, mit der AI GameJam als Rahmenprogramm und
|
||||
mit der mITapp als digitalem Zuhause des Events.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ UNSER VORTRAG ============ -->
|
||||
<section class="section section-alt" id="vortrag">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">Vortrag</span>
|
||||
<h2 class="section-title">Unser Beitrag zum Programm.</h2>
|
||||
</div>
|
||||
|
||||
<div class="td-split">
|
||||
<div class="td-talk">
|
||||
<div class="td-talk-kicker">Vortrag von ToolCTRL</div>
|
||||
<h3 class="td-talk-title">Ein Designer, mehrere Produkte</h3>
|
||||
<p class="td-talk-sub">
|
||||
Wie wir große Software mit kleinem Team bauen. Was funktioniert,
|
||||
was Müll ist, und wie man heute wirklich shippt.
|
||||
</p>
|
||||
<div class="td-talk-body">
|
||||
<p>
|
||||
Wie baut man eine UI-Infrastruktur, die mehrere Produkte trägt und
|
||||
nicht nach zwei Jahren auseinanderfällt? Was unterscheidet ein
|
||||
wirklich skalierbares Designsystem, das in der Codebase lebt, von
|
||||
einer Komponenten-Sammlung, die nur danach aussieht?
|
||||
</p>
|
||||
<p>
|
||||
An einem konkreten Beispiel zeigt David, was wir gebaut haben und
|
||||
welche Inspirationen, Referenzen und Entscheidungen das Fundament
|
||||
gelegt haben. Dazu: wo die Fehler lauern, die später teuer werden,
|
||||
und ehrliche Worte zum aktuellen Tool-Stack. Was wirklich hilft und
|
||||
was nur lautes Marketing ist, gerade im KI-Bereich.
|
||||
</p>
|
||||
<p>
|
||||
Für alle, die selbst Software in den Markt bringen, als Developer
|
||||
weniger Reibung mit Design wollen oder als Designer enger am Code
|
||||
arbeiten möchten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="speaker-card">
|
||||
<div class="sp-label">Speaker</div>
|
||||
<div class="sp-name">David Bertram</div>
|
||||
<div class="sp-role">Co-Founder, ToolCTRL · Heidelberg</div>
|
||||
<p class="sp-bio">
|
||||
Seit knapp zehn Jahren in Design und Marketing aktiv. Sein Ziel mit
|
||||
ToolCTRL: Software, die einfacher, intuitiver und angenehmer zu
|
||||
benutzen ist, gerade für Mitarbeitende ohne technischen Hintergrund.
|
||||
Gute UI und UX sollen kein teurer Sonderfall sein, sondern Standard.
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ MITAPP ============ -->
|
||||
<section class="section" id="mitapp">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">mITapp</span>
|
||||
<h2 class="section-title">Die App, die das Event zusammenhält.</h2>
|
||||
<p class="section-intro">
|
||||
Damit der TechDay rund läuft, haben wir die mITapp gebaut: die
|
||||
Community-Plattform für das Event und die Meetups dahinter.
|
||||
Teilnehmende finden Programm und Referenten an einem Ort, vernetzen
|
||||
sich vor Ort per QR-Code und sammeln dabei Punkte, Level und Badges.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Platzhalter — Screenshots & Mockups werden noch ergänzt -->
|
||||
<div class="placeholder-grid">
|
||||
<div class="placeholder-img">Screenshot folgt</div>
|
||||
<div class="placeholder-img">Screenshot folgt</div>
|
||||
<div class="placeholder-img">Mockup folgt</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-actions" style="margin-top:32px;">
|
||||
<a class="btn btn-solid" href="https://mitapp.mitup.de"
|
||||
target="_blank" rel="noopener">mITapp öffnen</a>
|
||||
<a class="btn btn-ghost" href="https://mitapp.mitup.de/event/techday-bruchsal-2026"
|
||||
target="_blank" rel="noopener">Programm zum TechDay</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ GAMEJAM ============ -->
|
||||
<section class="section section-alt" id="gamejam">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">Rahmenprogramm</span>
|
||||
<h2 class="section-title">AI GameJam: Human in the Loop.</h2>
|
||||
<p class="section-intro">
|
||||
Teil des TechDay ist unsere AI GameJam: in zwei Stunden ein Spiel
|
||||
bauen, der Mensch steuert die KI. Mit Live-Countdown, Ablaufplan und
|
||||
Upload für die fertigen Spiele. Die GameJam hat ihre eigene Seite.
|
||||
</p>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-solid" href="/gamejam.html">Zur GameJam-Seite</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ EVENT-INFOS ============ -->
|
||||
<section class="section section-dark" id="infos">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow eyebrow-light">Auf einen Blick</span>
|
||||
<h2 class="section-title">Event-Infos.</h2>
|
||||
</div>
|
||||
<dl class="contact-list">
|
||||
<div>
|
||||
<dt>Datum</dt>
|
||||
<dd>27. Mai 2026</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Ort</dt>
|
||||
<dd>HubWerk01, Werner-von-Siemens-Str. 2–6, 76646 Bruchsal</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Veranstalter</dt>
|
||||
<dd>mITup e. V.</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Tickets</dt>
|
||||
<dd><a href="https://techday-bruchsal-2026.eventbrite.de" target="_blank" rel="noopener">techday-bruchsal-2026.eventbrite.de</a></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Programm</dt>
|
||||
<dd><a href="https://mitapp.mitup.de/event/techday-bruchsal-2026" target="_blank" rel="noopener">in der mITapp</a></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ============ FOOTER ============ -->
|
||||
<footer class="site-footer">
|
||||
<div class="wrap footer-inner">
|
||||
<div class="footer-brand">
|
||||
<img src="/assets/logo-white.svg" alt="ToolCTRL" class="footer-logo" />
|
||||
<p>from vision to version.</p>
|
||||
</div>
|
||||
<div class="footer-cols">
|
||||
<div class="footer-col">
|
||||
<span class="footer-h">Navigation</span>
|
||||
<a href="/#leistungen">Leistungen</a>
|
||||
<a href="/#vorgehen">Vorgehen</a>
|
||||
<a href="/#arbeit">Organisation</a>
|
||||
<a href="/techday.html">TechDay</a>
|
||||
<a href="/gamejam.html">GameJam</a>
|
||||
<a href="/#kontakt">Kontakt</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<span class="footer-h">Kontakt</span>
|
||||
<a href="mailto:admin@tool-ctrl.de">admin@tool-ctrl.de</a>
|
||||
<a href="https://tool-ctrl.de">tool-ctrl.de</a>
|
||||
<a href="https://www.linkedin.com/company/toolctrl/" target="_blank" rel="noopener">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap footer-base">
|
||||
<span>© <span id="year">2026</span> ToolCTRL</span>
|
||||
<span><a href="/impressum.html">Impressum</a> · <a href="/datenschutz.html">Datenschutz</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -13,6 +13,7 @@ const http = require("http");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const crypto = require("crypto");
|
||||
const os = require("os");
|
||||
|
||||
const ROOT = __dirname;
|
||||
const PUBLIC_DIR = path.join(ROOT, "public");
|
||||
@@ -28,7 +29,20 @@ const MAX_UPLOAD = 5 * 1024 * 1024; /* 5 MB pro eingereichtem Spiel */
|
||||
|
||||
/* Bevorzugte Ports — der erste freie wird genutzt. */
|
||||
const PORT_CANDIDATES = [4317, 4318, 4417, 5317, 8317, 0];
|
||||
const HOST = "127.0.0.1";
|
||||
/* 0.0.0.0 = auf allen Schnittstellen erreichbar, auch für andere
|
||||
Geräte im selben WLAN (z. B. Handys, die den QR-Code scannen). */
|
||||
const HOST = "0.0.0.0";
|
||||
|
||||
/* Erste IPv4-LAN-Adresse dieses Rechners ermitteln. */
|
||||
function getLanIP() {
|
||||
const ifaces = os.networkInterfaces();
|
||||
for (const name of Object.keys(ifaces)) {
|
||||
for (const net of ifaces[name] || []) {
|
||||
if (net.family === "IPv4" && !net.internal) return net.address;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const MIME = {
|
||||
".html": "text/html; charset=utf-8",
|
||||
@@ -383,14 +397,18 @@ function listen(candidates) {
|
||||
const actual = server.address().port;
|
||||
ensureLeadStore();
|
||||
ensureGamejamStore();
|
||||
const lan = getLanIP();
|
||||
console.log("");
|
||||
console.log(" ToolCTRL — Landing Page läuft");
|
||||
console.log(" ----------------------------------------");
|
||||
console.log(" URL: http://" + HOST + ":" + actual);
|
||||
console.log(" GameJam: http://" + HOST + ":" + actual + "/gamejam.html");
|
||||
console.log(" Leads: " + LEADS_CSV);
|
||||
console.log(" Lokal: http://127.0.0.1:" + actual);
|
||||
if (lan) {
|
||||
console.log(" Netzwerk: http://" + lan + ":" + actual +
|
||||
" (andere Geräte im selben WLAN / QR-Code)");
|
||||
}
|
||||
console.log(" Leads: " + LEADS_CSV);
|
||||
console.log(" GameJam-Einreichungen: " + SUBMISSIONS_JSON);
|
||||
console.log(" Stop: Strg + C");
|
||||
console.log(" Stop: Strg + C");
|
||||
console.log("");
|
||||
});
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user