1395 lines
62 KiB
HTML
1395 lines
62 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Git Manager Explorer Pro – Benutzerhandbuch</title>
|
||
<style>
|
||
/* ============================================================
|
||
ALLGEMEIN
|
||
============================================================ */
|
||
:root {
|
||
--accent: #58d5ff;
|
||
--accent2: #67e8f9;
|
||
--blue: #3b82f6;
|
||
--green: #22c55e;
|
||
--yellow: #eab308;
|
||
--red: #ef4444;
|
||
--purple: #a855f7;
|
||
--bg-dark: #0d1520;
|
||
--bg-mid: #0f1e30;
|
||
--bg-card: #1a2b3c;
|
||
--border: rgba(88,213,255,0.18);
|
||
--text: #e2eaf5;
|
||
--text-muted: #7a8fab;
|
||
--radius: 12px;
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||
background: var(--bg-dark);
|
||
color: var(--text);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* ============================================================
|
||
COVER PAGE
|
||
============================================================ */
|
||
.cover {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 100vh;
|
||
text-align: center;
|
||
padding: 60px 40px;
|
||
background: linear-gradient(160deg, #060e1c 0%, #0d1a2e 40%, #0a1625 100%);
|
||
border-bottom: 2px solid var(--border);
|
||
page-break-after: always;
|
||
}
|
||
.cover-logo {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 28px;
|
||
background: linear-gradient(135deg, #1d3150 0%, #0d1e33 100%);
|
||
border: 2px solid rgba(88,213,255,0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 52px;
|
||
margin-bottom: 32px;
|
||
box-shadow: 0 0 40px rgba(88,213,255,0.15);
|
||
}
|
||
.cover h1 {
|
||
font-size: 38px;
|
||
font-weight: 800;
|
||
letter-spacing: -0.5px;
|
||
background: linear-gradient(135deg, #67e8f9 0%, #58a6ff 60%, #a78bfa 100%);
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 10px;
|
||
}
|
||
.cover .subtitle {
|
||
font-size: 18px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 32px;
|
||
}
|
||
.cover .meta-row {
|
||
display: flex; gap: 32px; flex-wrap: wrap; justify-content: center;
|
||
margin-bottom: 48px;
|
||
}
|
||
.cover .meta-item {
|
||
display: flex; flex-direction: column; align-items: center; gap: 4px;
|
||
}
|
||
.cover .meta-item .label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
|
||
.cover .meta-item .value { font-size: 15px; font-weight: 700; color: var(--accent2); }
|
||
|
||
.cover .toc-preview {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 780px; width: 100%;
|
||
}
|
||
.cover .toc-item {
|
||
background: rgba(255,255,255,0.03);
|
||
border: 1px solid rgba(88,213,255,0.1);
|
||
border-radius: var(--radius);
|
||
padding: 14px 16px;
|
||
text-align: left;
|
||
font-size: 12.5px;
|
||
}
|
||
.cover .toc-item .num { font-size: 10px; font-weight: 700; color: var(--accent); letter-spacing: .1em; margin-bottom: 4px; }
|
||
.cover .toc-item .title { font-weight: 600; color: var(--text); }
|
||
|
||
/* ============================================================
|
||
LAYOUT
|
||
============================================================ */
|
||
.content {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
padding: 48px 40px 80px;
|
||
}
|
||
|
||
/* Part dividers */
|
||
.part-break {
|
||
page-break-before: always;
|
||
padding-top: 60px;
|
||
margin-bottom: 40px;
|
||
border-top: 2px solid var(--border);
|
||
}
|
||
.part-break.first { border-top: none; padding-top: 20px; }
|
||
|
||
.part-label {
|
||
font-size: 11px; font-weight: 800; letter-spacing: .14em;
|
||
text-transform: uppercase; color: var(--accent);
|
||
margin-bottom: 8px;
|
||
}
|
||
.part-title {
|
||
font-size: 28px; font-weight: 800;
|
||
color: #fff;
|
||
margin-bottom: 6px;
|
||
}
|
||
.part-desc {
|
||
color: var(--text-muted); font-size: 14px; max-width: 560px;
|
||
}
|
||
|
||
/* Chapter */
|
||
.chapter {
|
||
margin-bottom: 48px;
|
||
}
|
||
h2.chapter-heading {
|
||
font-size: 20px; font-weight: 700;
|
||
color: var(--accent2);
|
||
margin-bottom: 14px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
h2.chapter-heading .num {
|
||
font-size: 12px; font-weight: 400; color: var(--text-muted); margin-right: 8px;
|
||
}
|
||
|
||
p { margin-bottom: 12px; }
|
||
p + ul, p + ol { margin-top: -4px; }
|
||
ul, ol { padding-left: 22px; margin-bottom: 12px; }
|
||
li { margin-bottom: 4px; }
|
||
|
||
strong { color: #c9dff5; }
|
||
a { color: var(--accent); text-decoration: none; }
|
||
|
||
/* ============================================================
|
||
SECTION CARD (feature block)
|
||
============================================================ */
|
||
.card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 22px 24px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.card-title {
|
||
font-size: 15px; font-weight: 700; color: #fff;
|
||
margin-bottom: 10px;
|
||
display: flex; align-items: center; gap: 10px;
|
||
}
|
||
.card-title .badge {
|
||
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
|
||
padding: 2px 8px; border-radius: 4px;
|
||
}
|
||
.badge-new { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
|
||
.badge-tip { background: rgba(234,179,8,.12); color: #fde047; border: 1px solid rgba(234,179,8,.22); }
|
||
.badge-warn { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.22); }
|
||
|
||
/* ============================================================
|
||
SCREEN MOCKUP
|
||
============================================================ */
|
||
.mockup {
|
||
border: 1px solid rgba(88,213,255,0.22);
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
margin: 20px 0;
|
||
background: #0b1625;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
|
||
}
|
||
.mockup-titlebar {
|
||
background: #0d1a28;
|
||
padding: 8px 14px;
|
||
display: flex; align-items: center; gap: 8px;
|
||
border-bottom: 1px solid rgba(88,213,255,0.1);
|
||
}
|
||
.mockup-dot { width: 11px; height: 11px; border-radius: 50%; }
|
||
.mockup-dot-red { background: #ef4444; }
|
||
.mockup-dot-yellow{ background: #eab308; }
|
||
.mockup-dot-green { background: #22c55e; }
|
||
.mockup-titlebar-label {
|
||
margin-left: 8px; flex: 1; text-align: center;
|
||
font-size: 11px; color: var(--text-muted); font-weight: 600;
|
||
}
|
||
.mockup-body {
|
||
padding: 16px 20px;
|
||
font-size: 12.5px;
|
||
}
|
||
|
||
/* Toolbar mockup */
|
||
.toolbar-row-mock {
|
||
display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px;
|
||
}
|
||
.btn-mock {
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
padding: 6px 12px; border-radius: 8px;
|
||
font-size: 12px; font-weight: 600;
|
||
cursor: default;
|
||
}
|
||
.btn-accent { background: linear-gradient(135deg, #1e4b7a 0%, #0f2e50 100%); color: #67e8f9; border: 1px solid rgba(88,213,255,0.3); }
|
||
.btn-default { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.1); }
|
||
.btn-highlight { background: rgba(88,213,255,0.1); color: var(--accent); border: 1px solid rgba(88,213,255,0.3); }
|
||
|
||
/* Repo card mockup */
|
||
.repo-grid-mock {
|
||
display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 10px;
|
||
}
|
||
.repo-card-mock {
|
||
background: rgba(255,255,255,0.03);
|
||
border: 1px solid rgba(151,181,255,0.1);
|
||
border-radius: 10px; padding: 14px;
|
||
}
|
||
.repo-card-mock .rname { font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
|
||
.repo-card-mock .rmeta { font-size: 10.5px; color: var(--text-muted); }
|
||
.repo-card-mock .rprivate {
|
||
display: inline-block; font-size: 9.5px;
|
||
padding: 1px 6px; border-radius: 3px;
|
||
background: rgba(168,85,247,.15); color: #c084fc;
|
||
border: 1px solid rgba(168,85,247,.22);
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* Owner tabs mockup */
|
||
.owner-tabs-mock {
|
||
display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
|
||
}
|
||
.owner-tab-mock {
|
||
padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
|
||
cursor: default;
|
||
}
|
||
.owner-tab-mock.active {
|
||
background: linear-gradient(135deg, #67e8f9 0%, #58a6ff 100%);
|
||
color: #03131a;
|
||
}
|
||
.owner-tab-mock:not(.active) {
|
||
background: rgba(255,255,255,0.04);
|
||
color: var(--text-muted);
|
||
border: 1px solid rgba(151,181,255,0.14);
|
||
}
|
||
.owner-tab-mock span { font-size: 10px; margin-left: 4px; opacity: .75; }
|
||
|
||
/* Search bar mockup */
|
||
.search-mock {
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 10px; padding: 10px 14px;
|
||
margin-bottom: 12px;
|
||
color: var(--text-muted); font-size: 12.5px;
|
||
}
|
||
|
||
/* Context menu mockup */
|
||
.ctxmenu-mock {
|
||
display: inline-flex; flex-direction: column;
|
||
background: #0e1d2e;
|
||
border: 1px solid rgba(88,213,255,0.2);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
min-width: 200px;
|
||
box-shadow: 0 12px 32px rgba(0,0,0,0.5);
|
||
font-size: 12.5px;
|
||
}
|
||
.ctxmenu-item {
|
||
padding: 8px 16px;
|
||
color: var(--text);
|
||
display: flex; align-items: center; gap: 10px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||
}
|
||
.ctxmenu-item:last-child { border-bottom: none; }
|
||
.ctxmenu-item.divider { border-top: 1px solid rgba(88,213,255,0.12); }
|
||
|
||
/* Sidebar mockup */
|
||
.sidebar-mock {
|
||
display: flex; gap: 16px;
|
||
}
|
||
.sidebar-panel-mock {
|
||
width: 200px; flex-shrink: 0;
|
||
background: rgba(8,18,35,0.9);
|
||
border: 1px solid rgba(88,213,255,0.18);
|
||
border-radius: 14px; padding: 12px;
|
||
}
|
||
.sidebar-tabs-mock {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px;
|
||
}
|
||
.sidebar-tab-mock {
|
||
height: 26px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
|
||
display: flex; align-items: center; justify-content: center; cursor: default;
|
||
}
|
||
.sidebar-tab-mock.active { background: linear-gradient(135deg,#67e8f9,#58a6ff); color: #03131a; }
|
||
.sidebar-tab-mock:not(.active) { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid rgba(151,181,255,0.1); }
|
||
.sidebar-item-mock {
|
||
background: rgba(16,28,48,0.72);
|
||
border: 1px solid rgba(151,181,255,0.08);
|
||
border-radius: 8px; padding: 8px 9px; margin-bottom: 6px;
|
||
font-size: 11px;
|
||
}
|
||
.sidebar-item-mock .sin { font-weight: 700; }
|
||
.sidebar-item-mock .smeta { color: var(--text-muted); font-size: 9.5px; }
|
||
|
||
/* Settings mockup fields */
|
||
.settings-field-mock {
|
||
display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
|
||
}
|
||
.settings-field-mock label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
|
||
.settings-field-mock input-mock {
|
||
background: rgba(255,255,255,0.05);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 8px; padding: 9px 13px;
|
||
display: block; font-size: 12.5px; color: var(--text);
|
||
font-family: inherit; width: 100%;
|
||
}
|
||
|
||
/* Info blocks */
|
||
.info-box {
|
||
background: rgba(88,213,255,0.06);
|
||
border: 1px solid rgba(88,213,255,0.18);
|
||
border-left: 3px solid var(--accent);
|
||
border-radius: 8px; padding: 12px 16px;
|
||
margin: 14px 0;
|
||
font-size: 13px;
|
||
}
|
||
.warn-box {
|
||
background: rgba(234,179,8,0.07);
|
||
border: 1px solid rgba(234,179,8,0.2);
|
||
border-left: 3px solid var(--yellow);
|
||
border-radius: 8px; padding: 12px 16px;
|
||
margin: 14px 0; font-size: 13px;
|
||
}
|
||
.success-box {
|
||
background: rgba(34,197,94,0.07);
|
||
border: 1px solid rgba(34,197,94,0.2);
|
||
border-left: 3px solid var(--green);
|
||
border-radius: 8px; padding: 12px 16px;
|
||
margin: 14px 0; font-size: 13px;
|
||
}
|
||
|
||
/* Steps list */
|
||
.steps { list-style: none; padding: 0; margin: 12px 0; counter-reset: step; }
|
||
.steps li {
|
||
counter-increment: step;
|
||
display: flex; gap: 12px; align-items: flex-start;
|
||
padding: 10px 14px; margin-bottom: 8px;
|
||
background: rgba(255,255,255,0.025);
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
border-radius: 9px;
|
||
}
|
||
.steps li::before {
|
||
content: counter(step);
|
||
display: flex; align-items: center; justify-content: center;
|
||
min-width: 24px; height: 24px; border-radius: 50%;
|
||
background: rgba(88,213,255,0.12);
|
||
border: 1px solid rgba(88,213,255,0.25);
|
||
color: var(--accent); font-weight: 700; font-size: 12px;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
/* Key badge */
|
||
kbd {
|
||
display: inline-block;
|
||
padding: 2px 7px; border-radius: 5px;
|
||
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
|
||
font-family: monospace; font-size: 11.5px;
|
||
color: #c9dff5;
|
||
}
|
||
|
||
/* Two-col feature grid */
|
||
.feature-grid {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0;
|
||
}
|
||
.feature-cell {
|
||
background: rgba(255,255,255,0.02);
|
||
border: 1px solid rgba(255,255,255,0.07);
|
||
border-radius: 10px; padding: 14px 16px;
|
||
}
|
||
.feature-cell .icon { font-size: 20px; margin-bottom: 6px; }
|
||
.feature-cell h4 { font-size: 13px; font-weight: 700; color: #c9dff5; margin-bottom: 4px; }
|
||
.feature-cell p { font-size: 12.5px; color: var(--text-muted); margin: 0; }
|
||
|
||
/* Table */
|
||
table {
|
||
width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px;
|
||
}
|
||
th {
|
||
text-align: left; padding: 9px 13px;
|
||
background: rgba(88,213,255,0.08);
|
||
color: var(--accent2); font-size: 11px;
|
||
text-transform: uppercase; letter-spacing: .07em;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
td {
|
||
padding: 9px 13px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||
color: var(--text);
|
||
}
|
||
tr:last-child td { border-bottom: none; }
|
||
|
||
/* ============================================================
|
||
FOOTER / PAGE NUMBERS
|
||
============================================================ */
|
||
.page-footer {
|
||
margin-top: 64px; padding-top: 20px;
|
||
border-top: 1px solid var(--border);
|
||
text-align: center; color: var(--text-muted); font-size: 12px;
|
||
}
|
||
|
||
/* ============================================================
|
||
PRINT STYLES
|
||
============================================================ */
|
||
@media print {
|
||
body {
|
||
background: #fff !important;
|
||
color: #1a1a1a !important;
|
||
font-size: 11pt;
|
||
}
|
||
:root {
|
||
--text: #1a1a1a;
|
||
--text-muted: #555;
|
||
--bg-card: #f5f8fc;
|
||
--border: #c0d0e8;
|
||
--bg-dark: #fff;
|
||
--bg-mid: #f8fafd;
|
||
--accent: #1a56c5;
|
||
--accent2: #1a56c5;
|
||
}
|
||
.cover {
|
||
background: #fff !important;
|
||
color: #1a1a1a !important;
|
||
border-bottom: 2px solid #c0d0e8;
|
||
}
|
||
.cover h1 {
|
||
background: none !important;
|
||
-webkit-text-fill-color: #1a3a6e !important;
|
||
color: #1a3a6e !important;
|
||
}
|
||
.cover .subtitle, .cover .meta-item .label { color: #555 !important; }
|
||
.cover .meta-item .value { color: #1a56c5 !important; }
|
||
.cover .toc-item { border-color: #c0d0e8 !important; background: #f5f8fc !important; }
|
||
.mockup, .mockup-titlebar, .mockup-body { background: #f5f8ff !important; border-color: #c0d0e8 !important; }
|
||
.card { background: #f5f8fc !important; border-color: #c0d0e8 !important; }
|
||
.info-box { background: #eff7ff !important; border-color: #90c4f5 !important; }
|
||
.warn-box { background: #fffbe8 !important; border-color: #f0cc55 !important; }
|
||
.success-box { background: #edfff5 !important; border-color: #6ee7b7 !important; }
|
||
.btn-mock, .owner-tab-mock.active, .sidebar-tab-mock.active {
|
||
background: #dbeafe !important; color: #1e3a8a !important;
|
||
}
|
||
.ctxmenu-mock, .sidebar-panel-mock {
|
||
background: #f0f4fa !important; border-color: #c0d0e8 !important;
|
||
}
|
||
.steps li { background: #f5f8fc !important; border-color: #c0d0e8 !important; }
|
||
.steps li::before { background: #dbeafe !important; border-color: #93c5fd !important; color: #1e3a8a !important; }
|
||
.repo-card-mock { background: #f5f8fc !important; border-color: #c0d0e8 !important; }
|
||
kbd { background: #f0f0f0 !important; border-color: #c0c0c0 !important; color: #333 !important; }
|
||
.part-break { page-break-before: always !important; }
|
||
h2.chapter-heading { color: #1a3a6e !important; border-color: #c0d0e8 !important; }
|
||
.part-label { color: #1a56c5 !important; }
|
||
.part-title { color: #1a3a6e !important; }
|
||
.page-footer { color: #999 !important; border-color: #c0d0e8 !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============================================================
|
||
COVER PAGE
|
||
============================================================ -->
|
||
<div class="cover">
|
||
<div class="cover-logo">🛠</div>
|
||
<h1>Git Manager Explorer Pro</h1>
|
||
<p class="subtitle">Vollständiges Benutzerhandbuch · Version 2.1.3</p>
|
||
|
||
<div class="meta-row">
|
||
<div class="meta-item"><span class="label">Version</span><span class="value">2.1.3</span></div>
|
||
<div class="meta-item"><span class="label">Plattform</span><span class="value">Windows (Electron)</span></div>
|
||
<div class="meta-item"><span class="label">Ersteller</span><span class="value">M_Viper</span></div>
|
||
<div class="meta-item"><span class="label">Stand</span><span class="value">Mai 2026</span></div>
|
||
</div>
|
||
|
||
<div class="toc-preview">
|
||
<div class="toc-item"><div class="num">01</div><div class="title">Erste Schritte & Einrichtung</div></div>
|
||
<div class="toc-item"><div class="num">02</div><div class="title">Gitea-Verbindung konfigurieren</div></div>
|
||
<div class="toc-item"><div class="num">03</div><div class="title">Repositories laden & filtern</div></div>
|
||
<div class="toc-item"><div class="num">04</div><div class="title">Favoriten & Verlauf</div></div>
|
||
<div class="toc-item"><div class="num">05</div><div class="title">Repository-Aktionen (Rechtsklick)</div></div>
|
||
<div class="toc-item"><div class="num">06</div><div class="title">Datei-Explorer & Editor</div></div>
|
||
<div class="toc-item"><div class="num">07</div><div class="title">Repository erstellen</div></div>
|
||
<div class="toc-item"><div class="num">08</div><div class="title">Migration (GitHub → Gitea)</div></div>
|
||
<div class="toc-item"><div class="num">09</div><div class="title">Batch-Aktionen</div></div>
|
||
<div class="toc-item"><div class="num">10</div><div class="title">Commit-History & Diffs</div></div>
|
||
<div class="toc-item"><div class="num">11</div><div class="title">Releases verwalten</div></div>
|
||
<div class="toc-item"><div class="num">12</div><div class="title">Retry-Queue & Activity-Log</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
CONTENT
|
||
============================================================ -->
|
||
<div class="content">
|
||
|
||
<!-- ──────────────────────────────────────────── -->
|
||
<div class="part-break first">
|
||
<div class="part-label">TEIL A</div>
|
||
<div class="part-title">Einrichtung & erste Schritte</div>
|
||
<div class="part-desc">App starten, Gitea verbinden und mit der Übersicht vertraut machen.</div>
|
||
</div>
|
||
|
||
<!-- KAPITEL 1 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">01</span> Erste Schritte</h2>
|
||
|
||
<p>
|
||
<strong>Git Manager Explorer Pro</strong> ist eine Desktop-Anwendung auf Basis von Electron,
|
||
die dir eine grafische Oberfläche für deine <b>Gitea</b>- und <b>GitHub</b>-Repositories gibt.
|
||
Du kannst Dateien direkt im integrierten Editor bearbeiten, Commits einsehen, Releases anlegen,
|
||
Repositories migrieren und vieles mehr – alles ohne Kommandozeile.
|
||
</p>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-titlebar">
|
||
<div class="mockup-dot mockup-dot-red"></div>
|
||
<div class="mockup-dot mockup-dot-yellow"></div>
|
||
<div class="mockup-dot mockup-dot-green"></div>
|
||
<span class="mockup-titlebar-label">Git Manager Explorer Pro — Hauptfenster</span>
|
||
</div>
|
||
<div class="mockup-body">
|
||
<div class="toolbar-row-mock" style="background:rgba(255,255,255,0.02);border-radius:8px;padding:10px 12px;margin-bottom:8px;">
|
||
<span style="font-weight:700;font-size:13px;color:var(--accent2)">🛠 Git Manager Explorer Pro</span>
|
||
<span style="flex:1"></span>
|
||
<div class="btn-mock btn-highlight">🚀 New Repo</div>
|
||
<div class="btn-mock btn-highlight">📥 Migrieren</div>
|
||
<div class="btn-mock btn-default">⬆️ Push</div>
|
||
<div class="btn-mock btn-default">⚙️ Settings</div>
|
||
<div class="btn-mock btn-default">🧩 Batch</div>
|
||
</div>
|
||
<div class="toolbar-row-mock" style="padding:6px 12px;background:rgba(255,255,255,0.015);border-radius:8px;margin-bottom:12px;">
|
||
<div class="btn-mock btn-accent">📂 Open Local</div>
|
||
<div class="btn-mock btn-accent">🌐 Load Gitea</div>
|
||
<div class="btn-mock btn-default" style="padding:4px 10px;border-radius:6px">Gitea ●</div>
|
||
<div class="btn-mock btn-default" style="padding:4px 10px;border-radius:6px">GitHub</div>
|
||
</div>
|
||
<div class="owner-tabs-mock">
|
||
<div class="owner-tab-mock active">Meine <span>8</span></div>
|
||
<div class="owner-tab-mock">Alle <span>24</span></div>
|
||
<div class="owner-tab-mock">W-Web <span>12</span></div>
|
||
<div class="owner-tab-mock">rusher2510 <span>4</span></div>
|
||
</div>
|
||
<div class="search-mock">🔍 Fuzzy-Suche: Name, Owner, Sprache, Topics…</div>
|
||
<div class="repo-grid-mock">
|
||
<div class="repo-card-mock"><div class="rname">📦 git-manager-gui</div><div class="rmeta">JavaScript • 3,2 MB</div></div>
|
||
<div class="repo-card-mock"><div class="rname">📦 streamflix<span class="rprivate">Privat</span></div><div class="rmeta">Kotlin • 8,1 MB</div></div>
|
||
<div class="repo-card-mock"><div class="rname">📦 yt-coockie-adblock</div><div class="rmeta">JavaScript • 0,4 MB</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">🖥 Systemvoraussetzungen</div>
|
||
<table>
|
||
<tr><th>Voraussetzung</th><th>Mindest</th><th>Empfohlen</th></tr>
|
||
<tr><td>Windows</td><td>Windows 10 (64-bit)</td><td>Windows 11</td></tr>
|
||
<tr><td>RAM</td><td>4 GB</td><td>8 GB</td></tr>
|
||
<tr><td>Netzwerk</td><td>Zugang zu Gitea/GitHub-URL</td><td>Stabile Verbindung</td></tr>
|
||
<tr><td>Gitea API</td><td>≥ 1.17</td><td>1.21+</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<p>Die App startet mit <kbd>npm start</kbd> im Projektordner oder über die bereitgestellte <code>.exe</code>-Datei.
|
||
Beim ersten Start sind noch keine Credentials gespeichert — öffne zuerst die <strong>Settings</strong>.</p>
|
||
</div>
|
||
|
||
<!-- KAPITEL 2 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">02</span> Gitea-Verbindung konfigurieren</h2>
|
||
|
||
<p>Alle Verbindungsdaten werden verschlüsselt (AES-256) lokal gespeichert. Öffne die Settings über
|
||
<kbd>⚙️ Settings</kbd> in der Toolbar.</p>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-titlebar">
|
||
<div class="mockup-dot mockup-dot-red"></div>
|
||
<div class="mockup-dot mockup-dot-yellow"></div>
|
||
<div class="mockup-dot mockup-dot-green"></div>
|
||
<span class="mockup-titlebar-label">⚙️ Einstellungen — Zugangsdaten</span>
|
||
</div>
|
||
<div class="mockup-body">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
|
||
<div>
|
||
<div class="settings-field-mock">
|
||
<label>GitHub Token</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text-muted);">ghp_••••••••••••••••</div>
|
||
</div>
|
||
<div class="settings-field-mock">
|
||
<label>Gitea Token</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(88,213,255,0.2);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text-muted);">••••••••••••••••••</div>
|
||
</div>
|
||
<div class="settings-field-mock" style="margin-bottom:0">
|
||
<label>Gitea URL</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text);">https://git.example.com</div>
|
||
</div>
|
||
<div style="margin-top:8px;display:flex;gap:8px;">
|
||
<div class="btn-mock btn-default" style="font-size:11px;">🔌 Verbindung testen</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="background:rgba(88,213,255,0.05);border:1px solid rgba(88,213,255,0.15);border-radius:10px;padding:12px;">
|
||
<div style="font-size:11px;font-weight:700;color:var(--accent2);margin-bottom:8px;">Verbindungsstatus</div>
|
||
<div style="display:flex;flex-direction:column;gap:5px;font-size:11.5px;">
|
||
<div style="display:flex;justify-content:space-between;"><span style="color:var(--text-muted)">URL</span><strong style="color:#4ade80">Gültig</strong></div>
|
||
<div style="display:flex;justify-content:space-between;"><span style="color:var(--text-muted)">API</span><strong style="color:#4ade80">Erreichbar</strong></div>
|
||
<div style="display:flex;justify-content:space-between;"><span style="color:var(--text-muted)">Auth</span><strong style="color:#4ade80">OK</strong></div>
|
||
<div style="display:flex;justify-content:space-between;"><span style="color:var(--text-muted)">Latenz</span><strong>32 ms</strong></div>
|
||
<div style="display:flex;justify-content:space-between;"><span style="color:var(--text-muted)">Server</span><strong>1.22.0</strong></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ol class="steps">
|
||
<li><strong>GitHub Token</strong> – Optional. Nur benötigt wenn du auch GitHub-Repos laden willst. Erstelle ihn unter <em>github.com → Settings → Developer settings → Personal access tokens</em>.</li>
|
||
<li><strong>Gitea Token</strong> – Pflichtfeld. Erstelle unter <em>Gitea → Einstellungen → Anwendungen → Token generieren</em>. Berechtigungen: <code>repository</code>, <code>user</code>, <code>issue</code>.</li>
|
||
<li><strong>Gitea URL</strong> – Die Basis-URL deines Servers (z. B. <code>https://git.example.com</code>). IPv6 mit Klammern: <code>http://[::1]:3000</code>.</li>
|
||
<li><strong>Verbindung testen</strong> drücken — der Verbindungsstatus zeigt grüne Haken wenn alles stimmt.</li>
|
||
<li><strong>Speichern</strong> — beim nächsten App-Start werden die Repos automatisch geladen.</li>
|
||
</ol>
|
||
|
||
<div class="info-box">
|
||
<strong>Auto-Login:</strong> Sind Credentials gespeichert wird beim Start automatisch <em>Load Gitea</em> ausgeführt. Die letzten Projekte erscheinen sofort ohne manuellen Klick.
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">🎯 Projektname in der Übersicht</div>
|
||
<p>Wenn du ein Repository öffnest, wird der Projektname in der <strong>Gravy-Leiste</strong> (unter der Toolbar) angezeigt.
|
||
Beim Wechsel zurück zur Repository-Übersicht wird der Name automatisch ausgeblendet.
|
||
Das gilt für beide Navigationswege:</p>
|
||
<ul style="margin-top:8px;">
|
||
<li><strong>⬅️ Zurück</strong>-Button klicken</li>
|
||
<li><strong>🌐 Load Gitea</strong> / <strong>📂 Open Local</strong> klicken</li>
|
||
</ul>
|
||
<div class="success-box" style="margin-top:8px;">
|
||
✓ Projektname wird immer korrekt synchronisiert und verschwindet in der Übersicht.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ──────────────────────────────────────────── -->
|
||
<div class="part-break">
|
||
<div class="part-label">TEIL B</div>
|
||
<div class="part-title">Repository-Übersicht</div>
|
||
<div class="part-desc">Repositories laden, filtern, suchen und mit Tabs nach Besitzern sortieren.</div>
|
||
</div>
|
||
|
||
<!-- KAPITEL 3 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">03</span> Repositories laden & filtern</h2>
|
||
|
||
<p>Klicke auf <strong>🌐 Load Gitea</strong> um alle Repositories deines Tokens zu laden — inklusive privater Repos.</p>
|
||
|
||
<div class="card">
|
||
<div class="card-title">📂 Owner-Tabs</div>
|
||
<p>Die Tabs über dem Repository-Grid sortieren nach Besitzer. Der aktive Tab wird hervorgehoben. Beim App-Start ist immer <strong>Meine</strong> vorausgewählt.</p>
|
||
<div class="mockup" style="margin-top:8px;">
|
||
<div class="mockup-body">
|
||
<div class="owner-tabs-mock">
|
||
<div class="owner-tab-mock active">Meine <span>8</span></div>
|
||
<div class="owner-tab-mock">Alle <span>24</span></div>
|
||
<div class="owner-tab-mock">W-Web <span>12</span></div>
|
||
<div class="owner-tab-mock">rusher2510 <span>4</span></div>
|
||
</div>
|
||
<div style="font-size:11.5px;color:var(--text-muted);padding:4px 2px">
|
||
→ Klick auf "Alle" zeigt sämtliche geladenen Repositories unabhängig vom Besitzer.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<table style="margin-top:12px;">
|
||
<tr><th>Tab</th><th>Beschreibung</th></tr>
|
||
<tr><td><strong>Meine</strong></td><td>Nur Repositories deren Owner-Login mit deinem Gitea-Konto übereinstimmt</td></tr>
|
||
<tr><td><strong>Alle</strong></td><td>Alle geladenen Repositories ohne Einschränkung</td></tr>
|
||
<tr><td><em>Gruppenname</em></td><td>Nur Repositories dieser Organisation / dieses Nutzers</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">🔍 Fuzzy-Suche <span class="badge badge-tip">TIPP</span></div>
|
||
<p>Das Suchfeld über dem Grid filtert in Echtzeit nach <strong>Name, Owner, Sprache und Topics</strong>.
|
||
Mehrere Wörter werden als AND-Verknüpfung behandelt.</p>
|
||
<div class="info-box">
|
||
Shortcut: <kbd>Ctrl</kbd> + <kbd>K</kbd> fokussiert das Suchfeld von überall in der Repository-Ansicht.
|
||
</div>
|
||
<p>Beispiele:</p>
|
||
<ul>
|
||
<li><code>stream kotlin</code> → zeigt alle Kotlin-Repos mit "stream" im Namen</li>
|
||
<li><code>telegram javascript</code> → Telegram-Repos in JavaScript</li>
|
||
<li><code>privat</code> → Repos mit "privat" in Beschreibung oder Name</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">📋 Repository-Karte</div>
|
||
<div class="mockup" style="margin-top:6px;">
|
||
<div class="mockup-body">
|
||
<div class="repo-grid-mock">
|
||
<div class="repo-card-mock">
|
||
<div style="position:relative">
|
||
<span style="position:absolute;right:0;top:0;font-size:11px;color:#fbbf24">⭐</span>
|
||
<div class="rname">📦 streamflix<span class="rprivate">Privat</span></div>
|
||
<div class="rmeta">Kotlin • 8,1 MB</div>
|
||
<div class="rmeta" style="margin-top:3px;color:#67e8f9;opacity:.7;font-size:9.5px">
|
||
android · kotlin · leanback · streaming
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="repo-card-mock" style="border-color:rgba(88,213,255,0.28)">
|
||
<div class="rname">📦 git-manager-gui</div>
|
||
<div class="rmeta">JavaScript • 3,2 MB</div>
|
||
</div>
|
||
<div class="repo-card-mock">
|
||
<div class="rname">📦 tg-group-moderation</div>
|
||
<div class="rmeta">kein Sprachmarker</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ul style="margin-top:12px;">
|
||
<li><strong>⭐ Stern-Button</strong> (oben rechts auf Karte) — Favorit hinzufügen/entfernen</li>
|
||
<li><strong>🔒 Privat-Badge</strong> — Repo ist als private markiert</li>
|
||
<li><strong>Projekt-Bild</strong> — wird angezeigt wenn ein Repo-Avatar hinterlegt ist</li>
|
||
<li><strong>Drag & Drop</strong> — Karte rausziehen zum Herunterladen; Datei reinklicken zum Hochladen</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KAPITEL 4 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">04</span> Favoriten & Verlauf</h2>
|
||
|
||
<p>Die linke Seitenleiste zeigt deine Favoriten und deinen Verlauf als durchsuchbare Schnell-Navigation.</p>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-titlebar">
|
||
<div class="mockup-dot mockup-dot-red"></div>
|
||
<div class="mockup-dot mockup-dot-yellow"></div>
|
||
<div class="mockup-dot mockup-dot-green"></div>
|
||
<span class="mockup-titlebar-label">Favoriten & Verlauf — Sidebar</span>
|
||
</div>
|
||
<div class="mockup-body">
|
||
<div class="sidebar-mock">
|
||
<div class="sidebar-panel-mock">
|
||
<div class="sidebar-tabs-mock">
|
||
<div class="sidebar-tab-mock active">⭐ Favoriten (3)</div>
|
||
<div class="sidebar-tab-mock">🕐 Verlauf (8)</div>
|
||
</div>
|
||
<div class="sidebar-item-mock"><div class="sin">streamflix</div><div class="smeta">rusher2510</div></div>
|
||
<div class="sidebar-item-mock"><div class="sin">git-manager-gui</div><div class="smeta">M_Viper</div></div>
|
||
<div class="sidebar-item-mock"><div class="sin">awesome-german-piracy</div><div class="smeta">rusher2510</div></div>
|
||
</div>
|
||
<div style="flex:1;padding:4px;">
|
||
<div class="repo-grid-mock">
|
||
<div class="repo-card-mock"><div class="rname">📦 git-manager-gui</div><div class="rmeta">JavaScript</div></div>
|
||
<div class="repo-card-mock"><div class="rname">📦 streamflix</div><div class="rmeta">Kotlin</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-cell">
|
||
<div class="icon">⭐</div>
|
||
<h4>Favoriten</h4>
|
||
<p>Klicke den Stern auf einer Karte oder im Rechtsklick-Menü. Favoriten bleiben auch nach App-Neustart erhalten. Reihenfolge per Drag & Drop anpassbar.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">🕐</div>
|
||
<h4>Verlauf</h4>
|
||
<p>Jedes geöffnete Repository wird automatisch im Verlauf gespeichert (max. 20). Zeit seit dem letzten Öffnen wird als "vor X Minuten/Stunden" angezeigt.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">🖱️</div>
|
||
<h4>Rechtsklick in Sidebar</h4>
|
||
<p>Rechtsklick auf einen Sidebar-Eintrag öffnet ein Kontextmenü mit Öffnen, Favorit entfernen, Sichtbarkeit umschalten und Tags bearbeiten.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">🔀</div>
|
||
<h4>Drag & Drop Sortierung</h4>
|
||
<p>Favoriten können per Drag & Drop innerhalb der Sidebar umsortiert werden. Die neue Reihenfolge wird automatisch gespeichert.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<strong>Sidebar ein-/ausblenden:</strong> Du kannst Favoriten und Verlauf einzeln in den Settings (Darstellung) deaktivieren.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ──────────────────────────────────────────── -->
|
||
<div class="part-break">
|
||
<div class="part-label">TEIL C</div>
|
||
<div class="part-title">Repository-Aktionen</div>
|
||
<div class="part-desc">Kontextmenü, Datei-Explorer, Editor und alle Repo-Verwaltungsfunktionen.</div>
|
||
</div>
|
||
|
||
<!-- KAPITEL 5 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">05</span> Repository-Aktionen (Rechtsklick)</h2>
|
||
|
||
<p>Rechtsklick auf eine Repository-Karte öffnet ein vollständiges Kontextmenü mit allen Aktionen.</p>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-body" style="display:flex;gap:24px;flex-wrap:wrap;">
|
||
<div>
|
||
<div style="font-size:11px;color:var(--text-muted);margin-bottom:8px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;">Kontextmenü — Repository</div>
|
||
<div class="ctxmenu-mock">
|
||
<div class="ctxmenu-item">📂 Öffnen</div>
|
||
<div class="ctxmenu-item">🌐 Im Browser öffnen</div>
|
||
<div class="ctxmenu-item">📋 Clone-URL kopieren</div>
|
||
<div class="ctxmenu-item divider">⭐ Zu Favoriten hinzufügen</div>
|
||
<div class="ctxmenu-item">🔒 Auf Privat schalten</div>
|
||
<div class="ctxmenu-item">🖼️ Projektbild hochladen</div>
|
||
<div class="ctxmenu-item">🏷️ Tags bearbeiten</div>
|
||
<div class="ctxmenu-item divider" style="color:#fca5a5">🗑️ Löschen</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-size:11px;color:var(--text-muted);margin-bottom:8px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;">Kontextmenü — Favorit/Verlauf</div>
|
||
<div class="ctxmenu-mock">
|
||
<div class="ctxmenu-item">📂 Öffnen</div>
|
||
<div class="ctxmenu-item">⭐ Aus Favoriten entfernen</div>
|
||
<div class="ctxmenu-item">🔒 Auf Privat schalten</div>
|
||
<div class="ctxmenu-item">🏷️ Tags bearbeiten</div>
|
||
<div class="ctxmenu-item divider" style="color:#fca5a5">🗑️ Aus Verlauf entfernen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table>
|
||
<tr><th>Aktion</th><th>Beschreibung</th></tr>
|
||
<tr><td>📂 Öffnen</td><td>Wechselt in den Datei-Explorer des Repositories</td></tr>
|
||
<tr><td>🌐 Im Browser öffnen</td><td>Öffnet das Repository auf der Gitea-Webseite</td></tr>
|
||
<tr><td>📋 Clone-URL kopieren</td><td>Kopiert die HTTPS-Clone-URL in die Zwischenablage</td></tr>
|
||
<tr><td>⭐ Favorit</td><td>Fügt zu Favoriten hinzu oder entfernt es</td></tr>
|
||
<tr><td>🔒 Privat/Öffentlich</td><td>Schaltet Sichtbarkeit des Repos auf Gitea um — benötigt Token mit Schreibrecht</td></tr>
|
||
<tr><td>🖼️ Projektbild</td><td>Lädt ein eigenes Logo/Bild für das Repository hoch (max. empfohlen 512 × 512 px)</td></tr>
|
||
<tr><td>🏷️ Tags bearbeiten</td><td>Öffnet den Tag-Editor (s. unten)</td></tr>
|
||
<tr><td>🗑️ Löschen</td><td>Löscht das Repository permanent auf Gitea — es erscheint eine Bestätigungsabfrage</td></tr>
|
||
</table>
|
||
|
||
<div class="card">
|
||
<div class="card-title">🏷️ Tags (Topics) bearbeiten</div>
|
||
<p>
|
||
Tags helfen Repositories zu kategorisieren. Der Editor zeigt vorhandene Tags als Chips und
|
||
lädt automatisch alle bereits genutzten Topics von deiner Gitea-Instanz als Vorschläge.
|
||
</p>
|
||
<ol class="steps">
|
||
<li>Rechtsklick auf Repo → <strong>🏷️ Tags bearbeiten</strong></li>
|
||
<li>Im Eingabefeld beginnen zu tippen — Vorschläge aus Gitea erscheinen automatisch</li>
|
||
<li>Vorschlag anklicken oder eigenen Tag mit <kbd>Enter</kbd> bestätigen</li>
|
||
<li>Bestehende Tags durch Klick auf <strong>✕</strong> entfernen</li>
|
||
<li><strong>Speichern</strong> drücken</li>
|
||
</ol>
|
||
<div class="warn-box">
|
||
Tags müssen Gitea-kompatibel sein: nur Kleinbuchstaben, Zahlen und Bindestriche. Leerzeichen werden automatisch durch Bindestriche ersetzt.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">🖼️ Projektbild (Repo-Avatar) hochladen</div>
|
||
<ol class="steps">
|
||
<li>Rechtsklick auf Repo → <strong>🖼️ Projektbild hochladen</strong></li>
|
||
<li>Bilddatei auswählen (JPG, PNG, GIF — empfohlen quadratisch)</li>
|
||
<li>Das Bild wird sofort über die Gitea API hochgeladen</li>
|
||
<li>Nach Reload erscheint das Bild auf der Repository-Karte</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KAPITEL 6 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">06</span> Datei-Explorer & Editor</h2>
|
||
|
||
<p>Klicke auf eine Repository-Karte um den Datei-Explorer zu öffnen. Hier navigierst du durch Ordner,
|
||
öffnest Dateien und bearbeitest Code direkt in der App.</p>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-cell">
|
||
<div class="icon">📁</div>
|
||
<h4>Ordner-Navigation</h4>
|
||
<p>Klick auf Ordner navigiert in die Tiefe. Der <strong>⬅️ Zurück</strong>-Button erscheint automatisch in der Toolbar. Breadcrumb-Pfad oben sichtbar.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">✏️</div>
|
||
<h4>Datei-Editor</h4>
|
||
<p>Klick auf eine Textdatei öffnet den integrierten Editor mit Syntax-Highlighting, Suchen & Ersetzen und Auto-Save-Funktion.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">📤</div>
|
||
<h4>Drag & Drop Upload</h4>
|
||
<p>Dateien oder Ordner aus dem Windows Explorer direkt in das Grid ziehen um sie hochzuladen. Fortschritt wird als Progressbar angezeigt.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">📥</div>
|
||
<h4>Download per Drag</h4>
|
||
<p>Eine Datei/Ordner-Karte aus dem Grid herausziehen lädt das Element auf den lokalen Rechner. Temporäre Dateien werden nach 20 s bereinigt.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">🔤</div>
|
||
<h4>Umbenennen & Verschieben</h4>
|
||
<p>Rechtsklick auf eine Datei → Umbenennen. Ziel-Pfad eingeben um Dateien gleichzeitig zu verschieben.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">🗑️</div>
|
||
<h4>Löschen</h4>
|
||
<p>Einzelne Dateien oder ganze Ordner löschen. Der Explorer zeigt eine Bestätigungsabfrage als Toast inklusive Zähler der betroffenen Dateien.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">✏️ Editor-Funktionen</div>
|
||
<div class="mockup" style="margin-top:6px;">
|
||
<div class="mockup-titlebar">
|
||
<div class="mockup-dot mockup-dot-red"></div>
|
||
<div class="mockup-dot mockup-dot-yellow"></div>
|
||
<div class="mockup-dot mockup-dot-green"></div>
|
||
<span class="mockup-titlebar-label">Editor — README.md</span>
|
||
</div>
|
||
<div class="mockup-body">
|
||
<div style="display:flex;gap:8px;margin-bottom:10px;padding:6px 8px;background:rgba(255,255,255,.03);border-radius:8px;">
|
||
<div class="btn-mock btn-default" style="font-size:11px;padding:4px 9px">🔍 Suchen (Ctrl+F)</div>
|
||
<div class="btn-mock btn-accent" style="font-size:11px;padding:4px 9px">💾 Speichern</div>
|
||
<div class="btn-mock btn-default" style="font-size:11px;padding:4px 9px">✕ Schließen</div>
|
||
<span style="flex:1"></span>
|
||
<span style="font-size:11px;color:var(--text-muted)">README.md · Zeile 12</span>
|
||
</div>
|
||
<div style="font-family:monospace;font-size:12px;line-height:1.8;padding:4px;">
|
||
<span style="color:#7c9cbf">1</span> <span style="color:#4ade80"># Git Manager Explorer Pro</span><br>
|
||
<span style="color:#7c9cbf">2</span> <br>
|
||
<span style="color:#7c9cbf">3</span> <span style="color:#a5b4fc">A powerful Electron-based Git management GUI</span><br>
|
||
<span style="color:#7c9cbf">4</span> supported by **Gitea** and **GitHub** APIs.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<table style="margin-top:12px;">
|
||
<tr><th>Shortcut</th><th>Aktion</th></tr>
|
||
<tr><td><kbd>Ctrl</kbd>+<kbd>S</kbd></td><td>Datei speichern (pusht auf Gitea)</td></tr>
|
||
<tr><td><kbd>Ctrl</kbd>+<kbd>F</kbd></td><td>Suchleiste öffnen</td></tr>
|
||
<tr><td><kbd>Escape</kbd></td><td>Suche schließen</td></tr>
|
||
</table>
|
||
<div class="info-box" style="margin-top:12px;">
|
||
<strong>Mehrere Tabs:</strong> Der Editor unterstützt mehrere geöffnete Dateien gleichzeitig. Ungespeicherte Dateien werden mit einem Punkt im Tab-Namen markiert.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ──────────────────────────────────────────── -->
|
||
<div class="part-break">
|
||
<div class="part-label">TEIL D</div>
|
||
<div class="part-title">Repository-Verwaltung</div>
|
||
<div class="part-desc">Erstellen, migrieren, pushen und Batch-Aktionen auf vielen Repos gleichzeitig.</div>
|
||
</div>
|
||
|
||
<!-- KAPITEL 7 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">07</span> Repository erstellen</h2>
|
||
|
||
<p>Klicke auf <strong>🚀 New Repo</strong> in der Toolbar um ein neues Repository direkt auf Gitea anzulegen.</p>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-titlebar">
|
||
<div class="mockup-dot mockup-dot-red"></div>
|
||
<div class="mockup-dot mockup-dot-yellow"></div>
|
||
<div class="mockup-dot mockup-dot-green"></div>
|
||
<span class="mockup-titlebar-label">🚀 Neues Repository erstellen</span>
|
||
</div>
|
||
<div class="mockup-body">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
|
||
<div>
|
||
<div class="settings-field-mock">
|
||
<label>Repository-Name *</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(88,213,255,0.2);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text);">mein-neues-projekt</div>
|
||
</div>
|
||
<div class="settings-field-mock">
|
||
<label>Ziel-Branch</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text);">main</div>
|
||
</div>
|
||
<div class="settings-field-mock">
|
||
<label>Beschreibung</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text-muted);">Optionale Beschreibung…</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="settings-field-mock">
|
||
<label>Plattform</label>
|
||
<div style="display:flex;gap:8px;margin-top:4px;">
|
||
<div class="btn-mock btn-accent" style="font-size:11px">Gitea ✓</div>
|
||
<div class="btn-mock btn-default" style="font-size:11px">GitHub</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:8px;align-items:center;margin:12px 0;font-size:12px;">
|
||
<div style="width:18px;height:18px;border-radius:4px;background:rgba(88,213,255,.15);border:1px solid rgba(88,213,255,.3);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--accent);">✓</div>
|
||
Auto-init mit README.md
|
||
</div>
|
||
<div style="display:flex;gap:8px;align-items:center;font-size:12px;">
|
||
<div style="width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);"></div>
|
||
Privates Repository
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:10px;margin-top:16px;">
|
||
<div class="btn-mock btn-accent">Erstellen</div>
|
||
<div class="btn-mock btn-default">Abbrechen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ol class="steps">
|
||
<li>Repository-Name wählen (nur Buchstaben, Zahlen, Bindestriche — der Name wird live on the fly validiert).</li>
|
||
<li>Optionale Beschreibung eintragen und Branch-Name bestätigen.</li>
|
||
<li>Plattform: <strong>Gitea</strong> oder <strong>GitHub</strong> auswählen (je nach Aktiv-Auswahl in der Toolbar).</li>
|
||
<li>"Auto-init mit README" ist standardmäßig aktiv — dadurch hat das Repo sofort einen initialen Commit.</li>
|
||
<li><strong>Erstellen</strong> drücken – bei Erfolg erscheint eine Erfolgsmeldung und die Repo-Liste wird aktualisiert.</li>
|
||
</ol>
|
||
|
||
<div class="warn-box">
|
||
Repository-Namen müssen eindeutig sein. Der Validator prüft direkt gegen Gitea und meldet Konflikte schon während der Eingabe.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KAPITEL 8 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">08</span> Migration (GitHub → Gitea)</h2>
|
||
|
||
<p>Klicke auf <strong>📥 Migrieren</strong> um ein Repository vollständig von GitHub, GitLab oder einer
|
||
anderen Quelle auf deine Gitea-Instanz zu migrieren (inkl. Commit-History).</p>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-titlebar">
|
||
<div class="mockup-dot mockup-dot-red"></div>
|
||
<div class="mockup-dot mockup-dot-yellow"></div>
|
||
<div class="mockup-dot mockup-dot-green"></div>
|
||
<span class="mockup-titlebar-label">📥 Repository migrieren</span>
|
||
</div>
|
||
<div class="mockup-body">
|
||
<div class="settings-field-mock">
|
||
<label>Quell-URL (Clone-URL) *</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(88,213,255,0.2);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text);">https://github.com/benutzer/mein-repo.git</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
|
||
<div class="settings-field-mock">
|
||
<label>Repository-Name auf Gitea *</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text);">mein-repo</div>
|
||
</div>
|
||
<div class="settings-field-mock">
|
||
<label>Beschreibung (optional)</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text-muted);">Migriertes Repo von GitHub</div>
|
||
</div>
|
||
<div class="settings-field-mock">
|
||
<label>Auth Username (optional)</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text-muted);">github-username</div>
|
||
</div>
|
||
<div class="settings-field-mock">
|
||
<label>Auth Token (optional)</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text-muted);">ghp_••••••••</div>
|
||
</div>
|
||
</div>
|
||
<div class="success-box" style="margin-top:12px;font-size:12px;">
|
||
✅ "mein-repo" wurde erfolgreich migriert!
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ol class="steps">
|
||
<li><strong>Quell-URL</strong> eingeben – unterstützt HTTPS und SSH-Clone-URLs von GitHub, GitLab, BitBucket und anderen Git-Diensten.</li>
|
||
<li>Repository-Name wird aus der URL automatisch vorausgefüllt (anpassbar).</li>
|
||
<li>Falls das Quell-Repo privat ist: Auth Username und Token des Quell-Dienstes eintragen.</li>
|
||
<li>"Privates Repository" anhaken wenn das migrierte Repo auf Gitea ebenfalls privat bleiben soll.</li>
|
||
<li><strong>📥 Migration starten</strong> drücken. Der Fortschritt wird als Status angezeigt.</li>
|
||
</ol>
|
||
|
||
<div class="info-box">
|
||
Gitea klont das Repo inklusive aller Branches, Tags und Commit-Historie direkt auf dem Server.
|
||
Die Migration kann je nach Repo-Größe einige Sekunden bis Minuten dauern.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KAPITEL 9 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">09</span> Batch-Aktionen</h2>
|
||
|
||
<p>Klicke auf <strong>🧩 Batch</strong> um dieselbe Aktion gleichzeitig auf eine Liste von Repositories anzuwenden.</p>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-titlebar">
|
||
<div class="mockup-dot mockup-dot-red"></div>
|
||
<div class="mockup-dot mockup-dot-yellow"></div>
|
||
<div class="mockup-dot mockup-dot-green"></div>
|
||
<span class="mockup-titlebar-label">🧩 Batch-Aktionen</span>
|
||
</div>
|
||
<div class="mockup-body">
|
||
<div style="display:flex;gap:14px;flex-wrap:wrap;">
|
||
<div style="flex:1;min-width:200px;">
|
||
<div class="settings-field-mock">
|
||
<label>Aktion auswählen</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(88,213,255,0.2);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--accent2);">🔄 Aktualisieren (refresh)</div>
|
||
</div>
|
||
<div class="settings-field-mock">
|
||
<label>Repositories (owner/repo)</label>
|
||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--text);min-height:80px;">
|
||
rusher2510/streamflix<br>
|
||
M_Viper/git-manager-gui<br>
|
||
W-Web/website
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1;min-width:200px;">
|
||
<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:14px;font-size:12px;">
|
||
<div style="font-weight:700;margin-bottom:10px;color:#c9dff5">Verfügbare Aktionen</div>
|
||
<div style="display:flex;flex-direction:column;gap:5px;color:var(--text-muted);">
|
||
<span>🔄 Aktualisieren</span>
|
||
<span>📥 Klonen (lokal)</span>
|
||
<span>🏷️ Tag erstellen</span>
|
||
<span>📦 Release erstellen</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table>
|
||
<tr><th>Aktion</th><th>Was passiert</th></tr>
|
||
<tr><td>🔄 Aktualisieren</td><td>Lädt Metadaten aller eingetragenen Repos neu (kein Code-Push)</td></tr>
|
||
<tr><td>📥 Klonen</td><td>Klont alle Repos in einen gewählten lokalen Zielordner</td></tr>
|
||
<tr><td>🏷️ Tag erstellen</td><td>Erstellt auf allen angegebenen Repos denselben Git-Tag</td></tr>
|
||
<tr><td>📦 Release erstellen</td><td>Legt auf allen Repos ein Release mit Tag, Name und Beschreibung an</td></tr>
|
||
</table>
|
||
|
||
<div class="info-box">
|
||
Repos werden im Format <code>owner/repo</code> eingetragen, eines pro Zeile. Beim Klonen wird auf doppelte Zielordner geprüft und gewarnt.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ──────────────────────────────────────────── -->
|
||
<div class="part-break">
|
||
<div class="part-label">TEIL E</div>
|
||
<div class="part-title">Commits, Releases & Protokoll</div>
|
||
<div class="part-desc">Commit-History einsehen, Releases verwalten und die Activity-Log nutzen.</div>
|
||
</div>
|
||
|
||
<!-- KAPITEL 10 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">10</span> Commit-History & Diffs</h2>
|
||
|
||
<p>Wenn du ein Repository geöffnet hast, erscheint in der Toolbar der Button <strong>📊 Commits</strong>.
|
||
Klicke ihn um die vollständige Commit-History zu laden.</p>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-cell">
|
||
<div class="icon">📊</div>
|
||
<h4>Commit-Liste</h4>
|
||
<p>Zeigt Commits mit Message, Autor, Datum und verkürztem SHA. Branch-Selector oben wechselt den Branch.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">🔍</div>
|
||
<h4>Commit-Suche</h4>
|
||
<p>Filtert die Commit-Liste nach Message oder Autor in Echtzeit ohne neue API-Anfrage.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">📄</div>
|
||
<h4>Diff-Ansicht</h4>
|
||
<p>Klick auf einen Commit zeigt das vollständige Diff (Added/Removed/Changed) aller betroffenen Dateien.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">📈</div>
|
||
<h4>Aktivitäts-Heatmap</h4>
|
||
<p>Zeigt deine Gitea-Commit-Aktivität der letzten 20 Monate als farbige Kacheln — ähnlich GitHub.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<strong>Lokale Commits:</strong> Auch für lokal geöffnete Ordner (Open Local) kann die Commit-History des lokalen Git-Repos angezeigt werden.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KAPITEL 11 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">11</span> Releases verwalten</h2>
|
||
|
||
<p>In der Repo-Ansicht erscheint der Button <strong>📦 Releases</strong>. Damit öffnest du die Release-Verwaltung.</p>
|
||
|
||
<table>
|
||
<tr><th>Funktion</th><th>Beschreibung</th></tr>
|
||
<tr><td>Release-Liste</td><td>Alle vorhandenen Releases mit Datum, Tag und Beschreibung</td></tr>
|
||
<tr><td>Release erstellen</td><td>Tag, Name, Beschreibung und Pre-Release-Flag wählbar</td></tr>
|
||
<tr><td>Release bearbeiten</td><td>Name und Beschreibung nachträglich anpassen</td></tr>
|
||
<tr><td>Release löschen</td><td>Release permanent entfernen (mit Bestätigung)</td></tr>
|
||
<tr><td>Asset hochladen</td><td>Binärdateien (z. B. <code>.zip</code>, <code>.exe</code>) an ein Release anhängen</td></tr>
|
||
<tr><td>Asset löschen</td><td>Einzelne Anhänge aus einem Release entfernen</td></tr>
|
||
<tr><td>Release-Archiv herunterladen</td><td>Den Quellcode-Snapshot als ZIP/TAR herunterladen</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- KAPITEL 12 -->
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">12</span> Retry-Queue & Activity-Log</h2>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-cell">
|
||
<div class="icon">🔁</div>
|
||
<h4>Retry-Queue</h4>
|
||
<p>Fehlgeschlagene Schreiboperationen (z. B. Datei-Upload bei Netzwerkausfall) werden automatisch in die Queue eingereiht und alle 15 Sekunden erneut versucht. Die Queue-Größe steht im Toolbar-Button <kbd>🔁 Queue (0)</kbd>.</p>
|
||
</div>
|
||
<div class="feature-cell">
|
||
<div class="icon">📝</div>
|
||
<h4>Activity-Log</h4>
|
||
<p>Öffne über <kbd>📝 Activity</kbd> das vollständige Protokoll aller App-Aktionen gefiltert nach Info/Warn/Fehler. Der Log kann komplett geleert werden.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="warn-box">
|
||
<strong>Retry-Limit:</strong> Nach 8 erfolglosen Versuchen wird ein Queue-Eintrag verworfen und als Fehler im Activity-Log eingetragen. Dann bitte Verbindung und Token prüfen.
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">🔁 Queue manuell verarbeiten</div>
|
||
<ol class="steps">
|
||
<li>Klicke auf <strong>🔁 Queue (N)</strong> in der Toolbar um alle ausstehenden Aufgaben sofort zu verarbeiten.</li>
|
||
<li>Im Activity-Log siehst du das Ergebnis: X erfolgreich, Y verworfen.</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ──────────────────────────────────────────── -->
|
||
<div class="part-break">
|
||
<div class="part-label">TEIL F</div>
|
||
<div class="part-title">Einstellungen & System</div>
|
||
<div class="part-desc">Alle Settings, Profilbild, Darstellung und Auto-Update.</div>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading"><span class="num">13</span> Einstellungen im Detail</h2>
|
||
|
||
<div class="card">
|
||
<div class="card-title">👤 Profilbild / Avatar</div>
|
||
<p>In den Settings kannst du ein Profilbild hinterlegen, das auf Gitea gesetzt wird.</p>
|
||
<ol class="steps">
|
||
<li>In den Settings auf das Avatar-Kreisfeld klicken → Bild aus Datei wählen.</li>
|
||
<li>Das Bild wird lokal gespeichert und beim nächsten Speichern automatisch auf Gitea hochgeladen.</li>
|
||
<li>Alternativ: <strong>📤 Auf Gitea aktualisieren</strong> sofort ohne Speichern auslösen.</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<table>
|
||
<tr><th>Einstellung</th><th>Standard</th><th>Beschreibung</th></tr>
|
||
<tr><td>⭐ Favoriten anzeigen</td><td>An</td><td>Zeigt/versteckt die Favoriten-Sidebar und Stern-Buttons</td></tr>
|
||
<tr><td>🕐 Zuletzt geöffnet</td><td>An</td><td>Verlaufs-Sidebar ein-/ausblenden</td></tr>
|
||
<tr><td>⊞ Kompakt-Modus</td><td>Aus</td><td>Verdichtete Darstellung für kleinere Bildschirme</td></tr>
|
||
<tr><td>🎨 Farbige Datei-Icons</td><td>An</td><td>Unterschiedliche Farben je Dateityp im Explorer</td></tr>
|
||
<tr><td>🚀 Mit Windows starten</td><td>Aus</td><td>App miniert im System-Tray beim Windows-Login starten</td></tr>
|
||
</table>
|
||
|
||
<div class="card">
|
||
<div class="card-title">🔄 App-Update</div>
|
||
<p>Klicke auf <strong>🔄 Nach Updates suchen</strong> in den Settings. Die App vergleicht die lokale Version
|
||
mit dem GitHub-Release-Server und lädt eine neue Version direkt herunter falls verfügbar.</p>
|
||
<div class="success-box">
|
||
Die App prüft beim Start automatisch auf Updates im Hintergrund und meldet sich ohne Unterbrechung.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ──────────────────────────────────────────── -->
|
||
<div class="part-break">
|
||
<div class="part-label">ANHANG</div>
|
||
<div class="part-title">Referenz & Problemlösung</div>
|
||
<div class="part-desc">Shortcuts, häufige Fehler und Token-Einrichtung auf einen Blick.</div>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading">Tastenkürzel-Übersicht</h2>
|
||
<table>
|
||
<tr><th>Shortcut</th><th>Funktion</th></tr>
|
||
<tr><td><kbd>Ctrl</kbd>+<kbd>K</kbd></td><td>Fuzzy-Suche im Repository-Grid fokussieren</td></tr>
|
||
<tr><td><kbd>Ctrl</kbd>+<kbd>S</kbd></td><td>Aktive Datei im Editor speichern</td></tr>
|
||
<tr><td><kbd>Ctrl</kbd>+<kbd>F</kbd></td><td>Suchleiste im Editor öffnen</td></tr>
|
||
<tr><td><kbd>Escape</kbd></td><td>Suchleiste im Editor schließen</td></tr>
|
||
<tr><td><kbd>Rechtsklick</kbd></td><td>Kontextmenü auf Repository-Karte oder Sidebar-Eintrag</td></tr>
|
||
<tr><td><kbd>Drag</kbd> raus</td><td>Datei/Ordner/Repo herunterladen</td></tr>
|
||
<tr><td><kbd>Drag</kbd> rein</td><td>Datei/Ordner in aktuelles Verzeichnis hochladen</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading">Häufige Fehler & Lösungen</h2>
|
||
<table>
|
||
<tr><th>Fehlermeldung</th><th>Ursache</th><th>Lösung</th></tr>
|
||
<tr>
|
||
<td>"missing-token-or-url"</td>
|
||
<td>Kein Token oder keine URL eingetragen</td>
|
||
<td>Settings öffnen und Gitea Token + URL eintragen</td>
|
||
</tr>
|
||
<tr>
|
||
<td>"401 Unauthorized"</td>
|
||
<td>Token ungültig oder abgelaufen</td>
|
||
<td>Neues Token auf Gitea generieren und in Settings eintragen</td>
|
||
</tr>
|
||
<tr>
|
||
<td>"403 Forbidden"</td>
|
||
<td>Token hat nicht die benötigten Rechte</td>
|
||
<td>Token-Berechtigungen prüfen: <code>repository</code>, <code>user</code> sind Pflicht</td>
|
||
</tr>
|
||
<tr>
|
||
<td>"ECONNREFUSED"</td>
|
||
<td>Gitea-Server nicht erreichbar</td>
|
||
<td>URL prüfen; bei IPv6 eckige Klammern: <code>http://[::1]:3000</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>"Timeout"</td>
|
||
<td>Netzwerkproblem oder Server überlastet</td>
|
||
<td>Netzwerkverbindung prüfen; ggf. VPN deaktivieren</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Repo erscheint nicht</td>
|
||
<td>Owner-Tab auf "Meine" filtert fremde Repos raus</td>
|
||
<td>"Alle" Tab wählen oder nach Name suchen</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Bilder werden nicht geladen</td>
|
||
<td>Gitea CORS-Policy oder ungültige Avatar-URL</td>
|
||
<td>Gitea-Server-Einstellungen prüfen; Repo-Avatar neu hochladen</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<h2 class="chapter-heading">Gitea-Token einrichten (Schritt für Schritt)</h2>
|
||
<ol class="steps">
|
||
<li>Anmelden auf deiner Gitea-Instanz.</li>
|
||
<li>Rechts oben Avatar-Icon → <strong>Einstellungen</strong>.</li>
|
||
<li>Links in der Navigation: <strong>Anwendungen</strong>.</li>
|
||
<li>Unter "Token generieren" einen Namen eingeben (z. B. "Git Manager GUI").</li>
|
||
<li>Berechtigungen aktivieren: <code>Repositories (Read & Write)</code>, <code>User (Read)</code>, <code>Issue (optional)</code>.</li>
|
||
<li>Token generieren und <strong>sofort kopieren</strong> — er wird nur einmal angezeigt!</li>
|
||
<li>Token in die Settings der App unter <strong>Gitea Token</strong> einfügen.</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="page-footer">
|
||
Git Manager Explorer Pro · Version 2.1.3 · Erstellt von M_Viper (admin@m-viper.de) · m-viper.de · Mai 2026
|
||
</div>
|
||
|
||
</div><!-- /content -->
|
||
|
||
<script>
|
||
// Hint for user on how to print
|
||
if (window.location.protocol !== 'file:' || true) {
|
||
const hint = document.createElement('div');
|
||
hint.style.cssText = `
|
||
position:fixed; bottom:24px; right:24px; z-index:9999;
|
||
background: rgba(88,213,255,0.12); border: 1px solid rgba(88,213,255,0.35);
|
||
border-radius: 10px; padding: 12px 18px; font-size: 13px; color: #e2eaf5;
|
||
font-family: 'Segoe UI', sans-serif; max-width: 280px; line-height: 1.5;
|
||
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
|
||
`;
|
||
hint.innerHTML = `
|
||
<strong style="color:#67e8f9">📄 Als PDF speichern</strong><br>
|
||
<span style="color:#7a8fab;font-size:12px">Drücke <kbd style="background:rgba(255,255,255,0.1);padding:1px 6px;border-radius:4px;border:1px solid rgba(255,255,255,0.15)">Ctrl+P</kbd> → "Als PDF speichern" wählen.<br>Randgröße: <em>Minimal</em>, Hintergrundgrafiken: <em>Ein</em>.</span>
|
||
<button onclick="this.parentNode.remove()" style="position:absolute;top:8px;right:10px;background:none;border:none;color:#7a8fab;cursor:pointer;font-size:14px;">✕</button>
|
||
`;
|
||
document.body.appendChild(hint);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|