doxa/doxa-notes/web_app/index.html

<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title data-i18n-key="webTitle">DOXA Notes — Workspace</title>
    <meta name="robots" content="noindex, nofollow" />
    <meta name="description" data-i18n-key="webDescription" data-i18n-attr="content" content="DOXA Notes Workspace — Local-first poznámková aplikace s podporou Markdown. Vaše data zůstávají pod vaší kontrolou." />
    <link rel="canonical" href="https://app.doxa-notes.org/" />
    
    <meta property="og:type" content="webapp" />
    <meta property="og:url" content="https://app.doxa-notes.org/" />
    <meta property="og:title" data-i18n-key="ogTitle" data-i18n-attr="content" content="DOXA Notes — Workspace" />
    <meta property="og:description" data-i18n-key="ogDescription" data-i18n-attr="content" content="Local-first poznámková aplikace s podporou Markdown. Vaše data zůstávají pod vaší kontrolou." />
    <meta property="og:image" content="https://doxa-notes.org/assets/img/doxa.png" />
    <meta property="og:image:alt" content="DOXA Notes - Local-First Notes & Sovereignty" />
    <meta property="og:locale" data-i18n-key="ogLocale" data-i18n-attr="content" content="cs_CZ" />
    
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" data-i18n-key="twitterTitle" data-i18n-attr="content" content="DOXA Notes — Workspace" />
    <meta name="twitter:description" data-i18n-key="twitterDescription" data-i18n-attr="content" content="Local-first poznámková aplikace s podporou Markdown." />
    <meta name="twitter:image" content="https://doxa-notes.org/assets/img/doxa.png" />
    <meta name="twitter:image:alt" content="DOXA Notes - Local-First Notes & Sovereignty" />
    
    <link rel="stylesheet" href="assets/style/style.css" />
    <style>
        #notesContainer {
            max-height: 520px; /* Výška pro cca 6 náhledů, aby se stránka neprodlužovala */
            overflow-y: auto;  /* Povolí vertikální rolování, pokud je obsah vyšší */
            border: 1px solid var(--note-border);
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 1rem; /* Malý odstup pod kontejnerem */
            transition: border-color 0.2s ease-in-out; /* Plynulý přechod pro zvýraznění */
        }

        #notesContainer:hover {
            border-color: var(--accent); /* Zvýraznění při najetí myší */
        }
    </style>
    <link rel="shortcut icon" href="assets/img/brain-solid-full.svg" />
    <!-- Markdown and sanitization libraries (used for preview). CDN fallback; if offline, preview will be disabled. -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
</head>

<body>
    <div class="container">
        <nav class="top-nav">
            <a href="https://doxa-notes.org/index.html" target="_blank" data-i18n-key="navLink">Web DOXA Notes, Návody, Manifest</a>
            <button id="langToggle" class="theme-toggle" title="Přepnout jazyk / Switch language">
                🇬🇧 / 🇨🇿            </button>
            <button id="themeToggle" class="theme-toggle" data-i18n-key="themeToggleLabel" data-i18n-attr="aria-label" aria-label="Přepnout motiv">
                🌙
            </button>
        </nav>
        <h1 data-i18n-key="mainTitle">DOXA Notes 🦅</h1>
        <p style="color: var(--muted); margin-bottom: 30px;margin-top: 2px; font-size: 0.95rem;" data-i18n-key="mainSubtitle">Local-First Notes &
            Sovereignty</p>
        <div id="slashCommandMenu" class="hidden"></div>
        <input id="noteTitle" data-i18n-key="noteTitlePlaceholder" data-i18n-attr="placeholder" placeholder="Název poznámky" />
        <div class="meta-row">
            <input id="noteTags" data-i18n-key="noteTagsPlaceholder" data-i18n-attr="placeholder" placeholder="Tagy (oddělujte čárkou, např: práce, citaty)" autocomplete="off" />
            <div style="position:relative; display:inline-block;">
                <input id="noteFolder" data-i18n-key="noteFolderPlaceholder" data-i18n-attr="placeholder" placeholder="Složka (nepovinné)" list="foldersList" autocomplete="off" />
                <datalist id="foldersList"></datalist>
            </div>
        </div>
        <div class="editor-toolbar" id="editorToolbar">
            <button type="button" data-action="h1" data-i18n-key="toolbarH1" data-i18n-attr="title" title="Nadpis H1">
                H1
            </button>
            <button type="button" data-action="h2" data-i18n-key="toolbarH2" data-i18n-attr="title" title="Nadpis H2">
                H2
            </button>
            <button type="button" data-action="h3" data-i18n-key="toolbarH3" data-i18n-attr="title" title="Nadpis H3">
                H3
            </button>

            <button type="button" data-action="bold" data-i18n-key="toolbarBold" data-i18n-attr="title" title="Tučné (Ctrl+B)">
                <strong>B</strong>
            </button>
            <button type="button" data-action="italic" data-i18n-key="toolbarItalic" data-i18n-attr="title" title="Kurzíva (Ctrl+I)">
                <em>I</em>
            </button>
            <button type="button" data-action="strike" data-i18n-key="toolbarStrike" data-i18n-attr="title" title="Přeškrtnutí">
                S
            </button>

            <button type="button" data-action="ul" data-i18n-key="toolbarUl" data-i18n-attr="title" title="Odrážkový seznam">
                •
            </button>
            <button type="button" data-action="ol" data-i18n-key="toolbarOl" data-i18n-attr="title" title="Číslovaný seznam">
                1.
            </button>
            <button type="button" data-action="task" data-i18n-key="toolbarTask" data-i18n-attr="title" title="Úkol (checkbox)">
                ☐
            </button>

            <button type="button" data-action="quote" data-i18n-key="toolbarQuote" data-i18n-attr="title" title="Citace">
                ❝
            </button>
            <button type="button" data-action="hr" data-i18n-key="toolbarHr" data-i18n-attr="title" title="Vodorovná čára">
                —
            </button>

            <button type="button" data-action="code" data-i18n-key="toolbarCode" data-i18n-attr="title" title="Inline kód">
                `kód`
            </button>
            <button type="button" data-action="codeblock" data-i18n-key="toolbarCodeblock" data-i18n-attr="title" title="Blok kódu">
                &lt;/&gt;
            </button>

            <button type="button" data-action="link" data-i18n-key="toolbarLink" data-i18n-attr="title" title="Vložit odkaz">
                🔗
            </button>
            <button type="button" data-action="image" data-i18n-key="toolbarImage" data-i18n-attr="title" title="Vložit obrázek">
                🖼
            </button>
            <button type="button" data-action="table" data-i18n-key="toolbarTable" data-i18n-attr="title" title="Vložit tabulku">
                ▦
            </button>

            <button type="button" id="togglePreviewMain" data-i18n-key="toolbarPreview" data-i18n-attr="title" title="Náhled">
                Náhled
            </button>
        </div>

        <div class="editor-wrap">
            <textarea id="noteInput" data-i18n-key="noteInputPlaceholder" data-i18n-attr="placeholder" placeholder="Zapiš poznámku... Použij / pro rychlé vyhledávání příkazů"></textarea>
            <div id="notePreview" class="preview hidden" aria-hidden="true"></div>
        </div>

        <div class="editor-actions">
            <button onclick="saveCurrentNote()" data-i18n-key="saveNowButton">
                Uložit nyní
            </button>
            <button onclick="saveNotesToFile(true)" data-i18n-key="exportJsonButton">Exportovat JSON</button>
            <button onclick="exportToMarkdown()" data-i18n-key="exportMarkdownButton">Exportovat do Markdown</button>
            <button onclick="importujPoznamky()" data-i18n-key="importJsonButton">Importovat JSON</button>
            <button id="newNoteButton" data-i18n-key="newNoteButton">➕ Nová poznámka</button>
            <span id="saveStatus" class="save-status" aria-live="polite"></span>
        </div>
        <div class="filter-row">
            <select id="folderFilter" aria-label="Filtrovat podle složky">
                <option value="all" data-i18n-key="filterAllFolders">📁 Všechny složky</option>
            </select>
            <input id="searchTagInput" data-i18n-key="searchInputPlaceholder" data-i18n-attr="placeholder" placeholder="🔍 Vyhledat podle názvu, obsahu, tagu nebo složky..." />
        </div>
        <div id="notesContainer"></div>
        <div id="notesHint" class="notes-hint" data-i18n-key="dragHint">
            Přetáhněte poznámky pro změnu pořadí nebo použijte šipky vedle
            položek.
        </div>
    </div>
    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/script.js"></script>
</body>

</html>