Enterprise Design System

📋 O tomto manuálu

Praktický design systém vytvořený primárně pro zrychlení práce při zadávání vzhledu aplikací a webů. Slouží jako reference, na kterou lze odkázat AI asistenty nebo vývojáře.

Obsahuje kompletní specifikace barev, komponent a implementační příklady. Významně šetří čas při komunikaci designových požadavků. Stačí poslat URL tohoto manuálu a design je jasně definován.

Hlavní výhody:

Kompletní specifikace designu na jednom místě
Odkaz pro AI asistenty - stačí poslat URL
Zrychlení komunikace designových požadavků
Připravené komponenty a barevné palety
Příklady implementace a migrace
Responzivní design pro všechna zařízení

🎨 Barevná paleta

Neutrální barvy (primární použití)

--gray-900

#212529

--gray-800

#343a40

--gray-700

#495057

--gray-600

#6c757d

--gray-500

#adb5bd

--gray-400

#ced4da

--gray-300

#dee2e6

--gray-200

#e9ecef

--gray-100

#f8f9fa

Akcentové barvy (použít velmi střídmě)

Telefon

#5DBED3

Schůzka

#9C27B0

Poznámka

#FF9800

Úkol

#4CAF50

Nebezpečí

#ef4444

🔘 Tlačítka

Základní tlačítka

Kategorie (s barevným akcentem)

Priority (jediná barevná ikona)

Velikosti

Speciální stavy

<!-- Základní tlačítko -->
<button class="btn">TLAČÍTKO</button>

<!-- Tlačítko s ikonou -->
<button class="btn telefon">
    <span class="icon">📞</span> TELEFON
</button>

<!-- Priorita s barevným kolečkem -->
<button class="btn priority-high">
    <span class="priority-dot"></span>VYSOKÁ
</button>

<!-- Tiny tlačítko pro akce v historii -->
<button class="btn tiny">📋</button>
            

📝 Formulářové prvky

Textové pole

Textarea

Vyhledávání

<!-- Input -->
<input type="text" class="input" placeholder="Zadejte text...">

<!-- Textarea -->
<textarea class="textarea" placeholder="Text..."></textarea>

<!-- Vyhledávání -->
<input type="text" class="input search-input" placeholder="Vyhledat...">
            

🏗️ Komponenty

Status bar

Připraveno k nahrávání

Úspěšně uloženo

Chyba při ukládání

Storage info

Využití úložiště: 1.67 KB (0.5% z ~5 MB)

Toggle sekce

Uložené poznámky (4) ▼

Historie položka

📞 TELEFON • 28.1.2025 10:05 • 45 slov ●

Volal klient ohledně nové zakázky. Potřebuje upravit design webových stránek...

📝 POZNÁMKA • 28.1.2025 09:30 • 23 slov ●

Nezapomenout připravit prezentaci pro zítřejší meeting...

<!-- Status bar -->
<div class="status-bar">Připraveno k nahrávání</div>

<!-- Historie položka -->
<div class="history-item telefon">
    <div class="history-item-header">
        <span><span class="icon">📞</span> TELEFON • 28.1.2025</span>
        <span style="color: var(--red-accent);">●</span>
    </div>
    <div class="history-item-preview">
        Text poznámky...
    </div>
</div>
            

💼 Kompletní ukázka

Takto vypadá kompletní implementace v reálné aplikaci:

Připraveno k nahrávání

Využití úložiště: 1.67 KB (0.5% z ~5 MB)

🎨 Přepínač témat (Theme Switcher)

Systém podporuje snadné přepínání mezi různými barevnými variantami. Přepínač se typicky umísťuje v pravém horním rohu aplikace.

Varianta 1: Inline v hlavičce

Varianta 2: Plovoucí tlačítko

CSS pro přepínač témat

/* Inline varianta */
.theme-switcher {
    display: inline-flex;
    gap: 8px;
    padding: 4px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.theme-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    padding: 4px;
    transition: all 0.2s ease;
    position: relative;
}

.theme-btn:hover {
    transform: scale(1.1);
}

.theme-btn.active::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid var(--gray-400);
    border-radius: 50%;
}

.theme-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Plovoucí varianta */
.theme-switcher-floating {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.theme-toggle-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.theme-toggle-btn .theme-dot {
    width: 8px;
    height: 8px;
}

.theme-dropdown {
    position: absolute;
    top: 60px;
    right: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    padding: 8px;
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.theme-switcher-floating:hover .theme-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.theme-dropdown .theme-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
}

.theme-dropdown .theme-btn:hover {
    background-color: var(--gray-100);
}

.theme-name {
    font-size: 13px;
    color: var(--gray-700);
}
            

JavaScript implementace

// Přepínání témat
document.querySelectorAll('[data-theme]').forEach(btn => {
    btn.addEventListener('click', function() {
        const theme = this.dataset.theme;
        
        // Odstranit všechny theme třídy
        document.body.className = document.body.className
            .replace(/theme-\w+/g, '');
        
        // Přidat novou theme třídu
        document.body.classList.add('theme-' + theme);
        
        // Aktualizovat aktivní tlačítko
        document.querySelectorAll('.theme-btn').forEach(b => 
            b.classList.remove('active'));
        this.classList.add('active');
        
        // Uložit do localStorage
        localStorage.setItem('selectedTheme', theme);
    });
});

// Načíst uložené téma při startu
const savedTheme = localStorage.getItem('selectedTheme') || 'enterprise';
document.body.classList.add('theme-' + savedTheme);
document.querySelector(`[data-theme="${savedTheme}"]`)?.classList.add('active');
            

Příklad barevných variant

Každé téma předefinuje své vlastní CSS proměnné:

/* Enterprise (výchozí) */
.theme-enterprise {
    --primary-color: #343a40;
    --accent-color: #6c757d;
    /* ... */
}

/* Ocean */
.theme-ocean {
    --primary-color: #0077be;
    --accent-color: #00a8cc;
    /* ... */
}

/* Forest */
.theme-forest {
    --primary-color: #2d5a2d;
    --accent-color: #4a7c4e;
    /* ... */
}

/* Sunset */
.theme-sunset {
    --primary-color: #d84315;
    --accent-color: #ff6b35;
    /* ... */
}

/* Midnight */
.theme-midnight {
    --primary-color: #1a237e;
    --accent-color: #3949ab;
    /* ... */
}
            

🚀 Implementace

1. Struktura CSS souborů

⚠️ DŮLEŽITÉ: CSS je rozděleno do dvou souborů!

base.css - obsahuje POUZE strukturu, rozměry a rozložení (žádné barvy!)
enterprise-theme.css - obsahuje VŠECHNY barvy, stíny a vizuální styly

2. HTML struktura - klíčové změny

Kategorie tlačítek: Použijte <div class="category-grid"> místo type-selector
Všechna tlačítka: Vždy začněte třídou btn
Ikony: Vždy obalte do <span class="icon">📞</span>
Priority: Použijte <span class="priority-dot"></span> NE emoji
Režim vkládání: Nahraďte tlačítko checkboxem s class="insert-mode-toggle"
Toggle sekce: Použijte specifické třídy: history-toggle, filters-toggle, options-toggle
Filtry: Obalte do <div class="filter-group">

3. Správná struktura kategorií

<!-- Kategorie s grid layoutem pro stejnou velikost -->
<div class="category-grid">
    <button class="btn category telefon" data-type="telefon">
        <span class="icon">📞</span> TELEFON
    </button>
    <button class="btn category schuzka" data-type="schuzka">
        <span class="icon">📅</span> SCHŮZKA
    </button>
    <button class="btn category poznamka active" data-type="poznamka">
        <span class="icon">📝</span> POZNÁMKA
    </button>
    <button class="btn category ukol" data-type="ukol">
        <span class="icon">✅</span> ÚKOL
    </button>
</div>
            

4. Režim vkládání - nová implementace

<!-- Checkbox místo tlačítka pro režim vkládání -->
<label class="insert-mode-toggle">
    <input type="checkbox" id="insertModeCheck">
    <span class="toggle-label">Vkládat na pozici kurzoru</span>
</label>

<!-- JavaScript -->
// Event handler pro checkbox
const insertModeCheck = document.getElementById('insertModeCheck');
insertAtEnd = !insertModeCheck.checked;

insertModeCheck.addEventListener('change', function() {
    insertAtEnd = !this.checked;
    // ... zbytek logiky
});
            

5. Historie položky - správné třídy

<!-- Historie položka MUSÍ mít třídu typu pro barevný pruh -->
<div class="history-item telefon" data-id="123" data-priority="high">
    <div class="history-item-header">
        <span class="history-item-date">
            <span class="priority-indicator">🔴</span>
            Vytvořeno: 28.1.2025 10:05
            <span class="type-indicator telefon">📞 Telefon</span>
            (45 slov)
        </span>
        <div class="history-item-actions">
            <button class="btn tiny" onclick="loadRecording(123)">⬆️</button>
            <button class="btn tiny" onclick="emailRecording(123)">✉️</button>
            <button class="btn tiny" onclick="copyRecording(123)">📋</button>
            <button class="btn tiny" onclick="deleteRecording(123)">🗑️</button>
        </div>
    </div>
    <div class="history-item-preview">Text náhledu...</div>
</div>
            

6. Filtry - správná struktura

<!-- Filtry musí být v filter-group -->
<div class="filter-group">
    <span class="filter-label">TYP:</span>
    <button class="btn filter active" data-filter="all">VŠE</button>
    <button class="btn filter" data-filter="telefon">
        <span class="icon">📞</span> Telefon
    </button>
    <!-- ... další filtry ... -->
</div>

<div class="filter-group">
    <span class="filter-label">PRIORITA:</span>
    <button class="btn filter active" data-priority-filter="all">Vše</button>
    <button class="btn filter" data-priority-filter="high">
        <span class="priority-dot priority-high"></span>Vysoká
    </button>
    <!-- ... další priority ... -->
</div>
            

7. CSS proměnné

Všechny barvy a hodnoty jsou definovány v CSS proměnných. Můžete je snadno upravit podle potřeby:

:root {
    --gray-900: #212529;
    --gray-800: #343a40;
    --gray-700: #495057;
    /* ... další proměnné ... */
}
            

5. DŮLEŽITÉ: Zjednodušení HTML

Enterprise design systém výrazně zjednodušuje HTML strukturu!

❌ Staré chaotické stylování:

<!-- Různé třídy pro každý typ tlačítka -->
<button class="type-btn active">...</button>
<button class="priority-btn">...</button>
<button class="filter-btn active">...</button>
<button class="page-size-btn">...</button>
<button class="option-btn export">...</button>
<button class="option-btn danger">...</button>
<button class="insert-mode-btn">...</button>
<button class="load-more-btn">...</button>
            

✅ Nový jednotný Enterprise přístup:

<!-- Jedna základní třída 'btn' pro VŠECHNA tlačítka -->
<button class="btn">VÝCHOZÍ</button>
<button class="btn active">AKTIVNÍ</button>
<button class="btn category telefon">TELEFON</button>
<button class="btn priority-high">VYSOKÁ</button>
<button class="btn small">MALÉ</button>
<button class="btn filter active">FILTR</button>
<button class="btn icon-only">🗑️</button>
<button class="btn tiny">📋</button>
            

📝 Pravidla pro HTML:

Vždy začněte s třídou "btn" - základní styling pro všechna tlačítka
Přidejte modifikátory podle potřeby:
- active - pro aktivní stav
- category - pro tlačítka kategorií
- telefon/schuzka/poznamka/ukol - pro barevný akcent vlevo
- priority-high/normal/low - pro prioritní tlačítka
- small/tiny/large - pro velikosti
- icon-only - pro tlačítka pouze s ikonou
- filter - pro filtrační tlačítka
- primary - pro hlavní akce
- recording - pro stav nahrávání
Odstraňte všechny staré specifické třídy jako type-btn, priority-btn, filter-btn atd.
Ikony vložte do <span class="icon"> aby byly automaticky šedé
Priority používejte <span class="priority-dot"> pro barevné kolečko

💡 Výhody tohoto přístupu:

✅ Mnohem čistší a kratší HTML
✅ Snadnější údržba a rozšiřování
✅ Konzistentní styling napříč celou aplikací
✅ Menší CSS soubor (méně duplicit)
✅ Jednodušší pro nové vývojáře

📌 Důležité poznámky pro implementaci

1. Struktura souborů pro MyMEM

base.css - obsahuje pouze strukturu bez barev (layout, rozměry, spacing)
enterprise-theme.css - tento Enterprise styl (nahradí default-theme.css)
ocean-theme.css, forest-theme.css, atd. - další barevné varianty
index.html - nutno upravit HTML strukturu podle tohoto manuálu
app.js - upravit logiku pro checkbox místo tlačítka + správné generování tříd

2. Klíčové změny v app.js

Checkbox místo tlačítka:
// Starý kód s tlačítkem const insertModeBtn = document.getElementById('insertModeBtn'); insertModeBtn.addEventListener('click', function() { insertAtEnd = !insertAtEnd; // ... }); // NOVÝ kód s checkboxem const insertModeCheck = document.getElementById('insertModeCheck'); insertAtEnd = !insertModeCheck.checked; insertModeCheck.addEventListener('change', function() { insertAtEnd = !this.checked; if (insertAtEnd) { status.textContent = 'Režim: Vkládání na konec textu'; } else { status.textContent = 'Režim: Vkládání na pozici kurzoru'; } });
Generování tlačítek v historii:
// Správné použití třídy btn tiny pro akce historyHTML += ` <div class="history-item-actions"> <button class="btn tiny" onclick="loadRecording(${recording.id})">⬆️</button> <button class="btn tiny" onclick="emailRecording(${recording.id})">✉️</button> <button class="btn tiny" onclick="copyRecording(${recording.id})">📋</button> <button class="btn tiny" onclick="deleteRecording(${recording.id})">🗑️</button> </div> `;
Historie položka musí mít třídu typu:
// Přidat typeClass do historie položky pro barevný pruh const typeClass = recording.type || 'poznamka'; historyHTML += ` <div class="history-item ${typeClass} ${isExpanded ? 'expanded' : ''}" data-id="${recording.id}" data-priority="${recording.priority || 'normal'}"> // ... zbytek kódu </div> `;

3. Rozdíl mezi base.css a enterprise-theme.css

⚠️ POZOR: Striktní rozdělení CSS!

base.css obsahuje:

Layout a pozicování (display, flex, grid)
Rozměry (width, height, padding, margin)
Strukturu (position, z-index)
Typografii (font-size, line-height)
NIC co souvisí s barvami!

enterprise-theme.css obsahuje:

Všechny barvy (color, background-color)
Bordery s barvami (border-color)
Stíny (box-shadow)
Hover efekty s barvami
Všechny vizuální styly

4. Vizuální hierarchie

Levý barevný pruh = typ položky (telefon/schůzka/poznámka/úkol)
Prioritní kolečko = priorita (vysoká/normální/nízká)
Všechny ikony šedé = kromě prioritních koleček

5. Speciální CSS opravy

/* Oprava pro rozbalené filtry */
.filters-container.expanded {
    padding: 16px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
}

/* Správné barvy pro priority dots ve filtrech */
.priority-dot.priority-high {
    background-color: var(--red-accent);
}

.priority-dot.priority-normal {
    background-color: var(--orange-accent);
}

.priority-dot.priority-low {
    background-color: var(--green-accent);
}

/* Zajistit že VŠECHNY ikony jsou šedé */
.icon {
    color: var(--gray-600) !important;
    filter: grayscale(100%) !important;
    opacity: 0.8;
}

/* Oprava pro toggle šipky */
.filters-toggle.expanded .toggle-arrow,
.history-toggle.expanded .toggle-arrow,
.options-toggle.expanded .toggle-arrow {
    transform: rotate(180deg);
}
            

2. Migrace z původního HTML

⚠️ POZOR: HTML struktura se musí výrazně změnit!

Nahradit všechny staré třídy:
- type-btn → btn category telefon/schuzka/poznamka/ukol
- priority-btn → btn priority-high/normal/low
- filter-btn → btn filter
- page-size-btn → btn filter
- insert-mode-btn → checkbox s insert-mode-toggle
- option-btn export → btn
- option-btn danger → btn
Všechny emoji/ikony obalit do: <span class="icon">📞</span>
Priority kolečka změnit na: <span class="priority-dot"></span>

3. Klíčové CSS třídy pro komponenty

/* Hlavní kontejner aplikace */
.container

/* Tlačítka - vždy začít s .btn */
.btn                    /* základní tlačítko */
.btn.active            /* aktivní stav */
.btn.primary           /* primární akce */
.btn.recording         /* stav nahrávání */
.btn.small/tiny/large  /* velikosti */
.btn.icon-only         /* pouze ikona */
.btn.filter            /* filtrační tlačítko */
.btn.category          /* tlačítko kategorie */

/* Kategorie (barevný pruh vlevo) */
.btn.telefon
.btn.schuzka
.btn.poznamka
.btn.ukol

/* Priority (barevné kolečko) */
.btn.priority-high
.btn.priority-normal
.btn.priority-low

/* Formulářové prvky */
.input                 /* textový vstup */
.textarea              /* víceřádkový vstup */
.search-input          /* vyhledávací pole */

/* Informační bloky */
.status-bar            /* stavový řádek */
.storage-info          /* info o úložišti */
.toggle-section        /* rozbalovací sekce */

/* Historie */
.history-item          /* položka historie */
.history-item.telefon  /* s barevným akcentem */
.history-item-header   /* hlavička položky */
.history-item-preview  /* náhled textu */

/* Přepínač témat */
.theme-switcher        /* inline varianta */
.theme-switcher-floating /* plovoucí varianta */
.theme-btn             /* tlačítko tématu */
.theme-dot             /* barevné kolečko */

/* Grid layout */
.category-grid         /* grid pro kategorie */

/* Toggle pro režim */
.insert-mode-toggle    /* checkbox wrapper */

/* Filtry */
.filter-group          /* skupina filtrů */
.filter-label          /* popisek filtru */
            

4. Pravidla pro ikony

Všechny ikony jsou šedé - automaticky pomocí CSS filtru
VÝJIMKA: Priority kolečka (🔴🟡🟢) - jediné barevné prvky
Ikony vždy zabalit: <span class="icon">📞</span>
Priority kolečka: <span class="priority-dot"></span> (ne emoji!)

5. Checklist před implementací

☐ Zkopírovat CSS z tohoto manuálu
☐ Upravit HTML - odstranit staré třídy
☐ Přidat třídu btn ke všem tlačítkům
☐ Obalit všechny ikony do <span class="icon">
☐ Nahradit emoji priorit za <span class="priority-dot">
☐ Přidat přepínač témat do HTML
☐ Implementovat JavaScript pro změnu témat
☐ Otestovat všechny stavy tlačítek
☐ Ověřit responsivitu na mobilu

6. Příklad kompletní migrace tlačítka

<!-- STARÉ -->
<button class="type-btn active" data-type="telefon">
    📞 Telefon
</button>

<!-- NOVÉ -->
<button class="btn category telefon active" data-type="telefon">
    <span class="icon">📞</span> TELEFON
</button>

<!-- STARÉ priority -->
<button class="priority-btn" data-priority="high">
    🔴 Vysoká
</button>

<!-- NOVÉ priority -->
<button class="btn priority-high" data-priority="high">
    <span class="priority-dot"></span>VYSOKÁ
</button>
            

📌 Důležité poznámky

Ikony: Všechny emoji/ikony jsou automaticky převedeny na šedou pomocí CSS filtru
Barvy: Jediné barevné prvky jsou prioritní kolečka a levé pruhy kategorií
Hover efekty: Jemné, profesionální - posun o 1px nahoru + lehký stín
Focus stavy: 2px outline s offsetem pro přístupnost
Responzivita: Systém je navržen pro desktop i mobil
Výkon: Minimální použití animací, rychlé transitions (0.15s)

S ❤️ vytvořil Pavel z MELIORO Systems