@@ -0,0 +1,142 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<title>Helpdesk Search</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/" aria-label="Zur Startseite">
|
||||
<span class="brand-mark">H</span>
|
||||
<span class="brand-copy">
|
||||
<strong id="brandTitle">Helpdesk Search</strong>
|
||||
<small id="brandSubtitle">Interne Wissenssuche für den Helpdesk</small>
|
||||
</span>
|
||||
</a>
|
||||
<div class="top-meta">
|
||||
<span class="mode-badge">Nur lesen</span>
|
||||
<span id="countBadge" class="count-badge">Wissensbasis lädt …</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="hero" class="hero">
|
||||
<div class="hero-orb orb-one"></div>
|
||||
<div class="hero-orb orb-two"></div>
|
||||
<div class="hero-content">
|
||||
<div class="eyebrow">INTERNES HELPDESK-WISSEN</div>
|
||||
<h1>Was möchtest du lösen?</h1>
|
||||
<p>Durchsuche Fehlercodes, Symptome, Produkte, Keywords und dokumentierte Lösungen in einer zentralen Wissensbasis.</p>
|
||||
<form id="heroSearchForm" class="search-box hero-search" role="search">
|
||||
<span class="search-icon" aria-hidden="true">⌕</span>
|
||||
<input id="heroSearch" type="search" placeholder="z. B. 0x80070005, Outlook startet nicht, BitLocker …" autocomplete="off" autofocus>
|
||||
<kbd>/</kbd>
|
||||
<button type="submit">Suchen</button>
|
||||
</form>
|
||||
<div id="quickLinks" class="quick-links" aria-label="Häufige Kategorien"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="resultsView" class="results-view hidden">
|
||||
<div class="results-header">
|
||||
<form id="topSearchForm" class="search-box top-search" role="search">
|
||||
<span class="search-icon" aria-hidden="true">⌕</span>
|
||||
<input id="topSearch" type="search" autocomplete="off" aria-label="Wissensbasis durchsuchen">
|
||||
<button type="submit">Suchen</button>
|
||||
</form>
|
||||
<div class="results-summary">
|
||||
<div>
|
||||
<strong id="resultCount">0 Treffer</strong>
|
||||
<span id="resultHint"></span>
|
||||
</div>
|
||||
<button id="clearSearch" class="text-btn" type="button">Neue Suche</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results-layout">
|
||||
<aside class="side-panel">
|
||||
<div class="side-card">
|
||||
<span class="side-label">Schnellzugriff</span>
|
||||
<div id="sideFacets" class="facet-list"></div>
|
||||
</div>
|
||||
<div class="side-card help-card">
|
||||
<span class="help-icon">?</span>
|
||||
<strong>Such-Tipp</strong>
|
||||
<p>Fehlercodes wie <code>0x80070005</code> oder konkrete Meldungsteile liefern meist die präzisesten Treffer.</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="results-column">
|
||||
<div id="loading" class="loading hidden"><span></span><span></span><span></span></div>
|
||||
<div id="noResults" class="no-results hidden">
|
||||
<div class="no-results-icon">⌕</div>
|
||||
<h2>Keine passenden Einträge gefunden</h2>
|
||||
<p>Versuche einen kürzeren Fehlercode, einen Produktnamen oder einzelne Wörter aus der Fehlermeldung.</p>
|
||||
</div>
|
||||
<div id="resultList" class="result-list" aria-live="polite"></div>
|
||||
<nav id="pagination" class="pagination hidden" aria-label="Suchergebnisse"></nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<dialog id="articleDialog" class="article-dialog">
|
||||
<article class="article-shell">
|
||||
<header class="article-head">
|
||||
<div>
|
||||
<div id="articleEyebrow" class="article-eyebrow"></div>
|
||||
<h2 id="articleTitle"></h2>
|
||||
</div>
|
||||
<button id="closeArticle" class="close-btn" type="button" aria-label="Artikel schließen">×</button>
|
||||
</header>
|
||||
|
||||
<div class="article-body">
|
||||
<div id="articleMeta" class="meta-row"></div>
|
||||
|
||||
<section id="problemSection" class="article-section">
|
||||
<div class="section-kicker">PROBLEM / ERKENNUNG</div>
|
||||
<div id="articleProblem" class="article-text"></div>
|
||||
</section>
|
||||
|
||||
<section id="answerSection" class="article-section answer-section">
|
||||
<div class="answer-head">
|
||||
<div>
|
||||
<div class="section-kicker">LÖSUNG / ANTWORT</div>
|
||||
<strong>Empfohlene Vorgehensweise</strong>
|
||||
</div>
|
||||
<button id="copyAnswer" class="copy-btn" type="button">Antwort kopieren</button>
|
||||
</div>
|
||||
<div id="articleAnswer" class="article-text answer-text"></div>
|
||||
</section>
|
||||
|
||||
<section id="tagsSection" class="article-section compact-section">
|
||||
<div class="section-kicker">EINORDNUNG</div>
|
||||
<div id="articleTags" class="tag-list"></div>
|
||||
</section>
|
||||
|
||||
<section id="sourceSection" class="article-section source-section hidden">
|
||||
<div class="section-kicker">QUELLE</div>
|
||||
<div class="source-line">
|
||||
<div>
|
||||
<strong id="articleSource"></strong>
|
||||
<span id="articleSourceUri"></span>
|
||||
</div>
|
||||
<a id="sourceLink" class="source-link" href="#" target="_blank" rel="noopener noreferrer">Quelle öffnen ↗</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="article-foot">
|
||||
<span id="articlePath"></span>
|
||||
<button id="copyLink" class="text-btn" type="button">Link zu diesem Artikel kopieren</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
|
||||
<div id="toastHost" class="toast-host" aria-live="polite"></div>
|
||||
<script src="/app.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user