tueit_GmbH/tueit_Transkriptor
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: tüit logo in header, clean transcript item layout with grouped action buttons

Browse Source
This commit is contained in:
Thomas Kopp
2026-04-01 14:37:03 +02:00
parent 2ab6e7d73b
commit b74147967b
4 changed files with 133 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app.js
+6 -2
View File
@@ -122,7 +122,8 @@ async function loadTranscripts() {
div.className = 'transcript-item'; div.className = 'transcript-item';
const name = document.createElement('span'); const name = document.createElement('span');
name.textContent = t.filename.replace('.md', ''); name.className = 'name';
name.textContent = t.filename.replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-\d{4}-/, '');
const meta = document.createElement('span'); const meta = document.createElement('span');
meta.className = 'meta'; meta.className = 'meta';
@@ -155,7 +156,10 @@ async function loadTranscripts() {
loadTranscripts(); loadTranscripts();
}); });
div.append(name, meta, reprocessBtn, delBtn); const actions = document.createElement('div');
actions.className = 'item-actions';
actions.append(reprocessBtn, delBtn);
div.append(name, meta, actions);
return div; return div;
}) })
); );
frontend/index.html
+10 -7
View File
@@ -33,9 +33,9 @@
padding: 16px 24px; padding: 16px 24px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
.logo-dot { width: 12px; height: 12px; background: var(--red); border-radius: 50%; } .header-logo { height: 28px; width: auto; display: block; }
header h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.04em; } .header-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
header h1 span { color: var(--red); } .header-appname { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.status-badge { .status-badge {
font-size: 0.75rem; font-size: 0.75rem;
@@ -112,11 +112,13 @@
.transcript-item { .transcript-item {
background: var(--surface); border: 1px solid var(--border); background: var(--surface); border: 1px solid var(--border);
border-radius: 6px; padding: 10px 14px; border-radius: 6px; padding: 10px 14px;
display: flex; align-items: center; justify-content: space-between; display: flex; align-items: center; gap: 10px;
font-size: 0.82rem; cursor: pointer; transition: border-color 0.1s; font-size: 0.82rem; cursor: pointer; transition: border-color 0.1s;
} }
.transcript-item:hover { border-color: var(--red); } .transcript-item:hover { border-color: var(--red); }
.transcript-item .meta { color: var(--muted); font-size: 0.75rem; } .transcript-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transcript-item .meta { color: var(--muted); font-size: 0.75rem; flex-shrink: 0; }
.item-actions { display: flex; gap: 2px; flex-shrink: 0; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; } .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; } .modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); } .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
@@ -163,8 +165,9 @@
</head> </head>
<body> <body>
<header> <header>
<div class="logo-dot"></div> <img src="/logo.svg" class="header-logo" alt="tüit">
<h1>tüit <span>Transkriptor</span></h1> <div class="header-divider"></div>
<span class="header-appname">Transkriptor</span>
<div class="header-right"> <div class="header-right">
<span class="status-badge" id="header-status">Bereit</span> <span class="status-badge" id="header-status">Bereit</span>
<span class="user-chip" id="user-chip"></span> <span class="user-chip" id="user-chip"></span>
frontend/logo.svg
Executable
+112
View File
@@ -0,0 +1,112 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="297mm"
height="210mm"
viewBox="0 0 1052.3622 744.09448"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="tüit Logo tü original Farben ohne Rand.svg"
enable-background="new">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8"
inkscape:cx="441.15795"
inkscape:cy="487.31844"
inkscape:document-units="px"
inkscape:current-layer="layer3"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="994"
inkscape:window-x="0"
inkscape:window-y="34"
inkscape:window-maximized="1">
<inkscape:grid
type="xygrid"
id="grid3344" />
</sodipodi:namedview>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-308.26772)"
style="display:none">
<g
id="g3388">
<flowRoot
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="flowRoot3336"
xml:space="preserve"><flowRegion
id="flowRegion3338"><rect
y="158.07649"
x="74.285713"
height="137.14285"
width="577.14288"
id="rect3340" /></flowRegion><flowPara
id="flowPara3342" /></flowRoot> </g>
</g>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="Ebene 2"
style="display:inline">
<path
style="opacity:1;fill:#da251c;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.0452675"
d="m 571.71573,376.46706 0,95 c 0,50 40,50 40,50 l 0,100 -390,0 c -50,0 -150.000001,0 -150.000001,-150 l 0,-150 -45,0 c -3,0 -5,-2 -5,-5 l 0,-90 c 0,-3 2,-5 5,-5 l 45,0 0,-95 c 0,-3 2,-5 5,-5 l 90.000001,0 c 3,0 5,2 5,5 l 0,95 45,0 c 3,0 5,2 5,5 l 0,90 c 0,3 -2,5 -5,5 l -45,0 0,150 c 0,0 0,50 50,50 50,0 50,-50 50,-50 l 0,-95 c 0,-3 2,-5 5,-5 l 90,0 c 3,0 5,2 5,5 l 0,95 c 0,0 0,50 50,50 50,0 50,-50 50,-50 l 0,-95 c 0,-3 2,-5 5,-5 l 90,0 c 3,0 5,2 5,5 z"
id="path9932"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccczcccccczccccc" />
<path
style="fill:#da251c;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0"
d="m 371.71573,226.46706 0,90 c 0,3 -2,5 -5,5 l -90,0 c -3,0 -5,-2 -5,-5 l 0,-90 c 0,-3 2,-5 5,-5 l 90,0 c 3,0 4.875,2 5,5 z"
id="path9934"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<path
style="fill:#da251c;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0"
d="m 571.71573,226.46706 0,90 c 0,3 -2,5 -5,5 l -90,0 c -3,0 -5,-2 -5,-5 l 0,-90 c 0,-3 2,-5 5,-5 l 90,0 c 3,0 5,2 5,5 z"
id="path9944"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<path
style="fill:#ffd802;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0"
d="m 766.71573,321.46706 -90,0 c -3,0 -5,-2 -5,-5 l 0,-90 c 0,-3 2,-5 5,-5 l 90,0 c 3,0 5,2 5,5 l 0,90 c 0,3 -2,5 -5,5 z"
id="path9946"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<path
style="fill:#ffd802;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0"
d="m 1016.7157,321.46706 -44.99997,10e-6 0,150 c 0,150 -100,150 -150,150 l -190,0 0,-100 c 0,0 40,0 40,-50 l 0,-95 c 0,-3 2,-5 5,-5 l 90,0 c 3,0 5,2 5,5 l 0,95 c 0,0 0,50 50,50 50,0 50,-50 50,-50 l 0,-150 -45,0 c -3,0 -5,-2 -5,-5 l 0,-90 c 0,-3.00001 2,-5.00001 5,-5.00001 l 45,1e-5 0,-95.00001 c 0,-3 2,-5 5,-5 l 90,0 c 3,0 5,2 5,5 l 0,95 44.99997,0 c 3,0 5,2 5,5 l 0,90 c 0,3 -2,5 -5,5 z"
id="path9948"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccczcccccccccccccccc" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

main.py
+5
View File
@@ -39,6 +39,11 @@ async def appjs():
return FileResponse(str(FRONTEND_DIR / "app.js")) return FileResponse(str(FRONTEND_DIR / "app.js"))
@app.get("/logo.svg")
async def logo():
return FileResponse(str(FRONTEND_DIR / "logo.svg"), media_type="image/svg+xml")
# ── PID file ─────────────────────────────────────────────────────────────────── # ── PID file ───────────────────────────────────────────────────────────────────
def write_pid(pid_path: str): def write_pid(pid_path: str):