feat: tüit logo in header, clean transcript item layout with grouped action buttons
This commit is contained in:
+6
-2
@@ -122,7 +122,8 @@ async function loadTranscripts() {
|
||||
div.className = 'transcript-item';
|
||||
|
||||
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');
|
||||
meta.className = 'meta';
|
||||
@@ -155,7 +156,10 @@ async function 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;
|
||||
})
|
||||
);
|
||||
|
||||
+10
-7
@@ -33,9 +33,9 @@
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.logo-dot { width: 12px; height: 12px; background: var(--red); border-radius: 50%; }
|
||||
header h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.04em; }
|
||||
header h1 span { color: var(--red); }
|
||||
.header-logo { height: 28px; width: auto; display: block; }
|
||||
.header-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
|
||||
.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; }
|
||||
.status-badge {
|
||||
font-size: 0.75rem;
|
||||
@@ -112,11 +112,13 @@
|
||||
.transcript-item {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
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;
|
||||
}
|
||||
.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.hidden { display: none; }
|
||||
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
|
||||
@@ -163,8 +165,9 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo-dot"></div>
|
||||
<h1>tüit <span>Transkriptor</span></h1>
|
||||
<img src="/logo.svg" class="header-logo" alt="tüit">
|
||||
<div class="header-divider"></div>
|
||||
<span class="header-appname">Transkriptor</span>
|
||||
<div class="header-right">
|
||||
<span class="status-badge" id="header-status">Bereit</span>
|
||||
<span class="user-chip" id="user-chip"></span>
|
||||
|
||||
Executable
+112
@@ -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>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
Reference in New Issue
Block a user