pridana ikonka, screenshot a popis do README.md

This commit is contained in:
2026-08-01 10:12:27 +02:00
parent a5973a5168
commit fc877c99ce
14 changed files with 400 additions and 4 deletions

View File

@ -2,11 +2,14 @@
<html lang="sk">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f8fafc">
<meta name="description" content="Lokálna analýza farebných plôch a palety mozaiky.">
<title>Mozaic analýza farebných plôch</title>
<title>Mozaic</title>
</head>
<body>
<div id="app"></div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Mozaic">
<defs>
<clipPath id="tile-frame">
<rect x="36" y="36" width="440" height="440" rx="88"/>
</clipPath>
</defs>
<rect x="16" y="16" width="480" height="480" rx="112" fill="#172033"/>
<g clip-path="url(#tile-frame)" stroke="#172033" stroke-width="24" stroke-linejoin="round">
<path d="M24 24h226l-24 210L24 202Z" fill="#F16C5B"/>
<path d="M250 24h238v184L226 234Z" fill="#36A99A"/>
<path d="M24 202l202 32-24 254H24Z" fill="#4386D8"/>
<path d="M226 234l104-34 70 126-142 80-56-92Z" fill="#F2C14E"/>
<path d="M330 200l158 8v280H202l56-82 142-80Z" fill="#8A6FBC"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 709 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Mozaic">
<defs>
<clipPath id="tile-frame">
<rect x="36" y="36" width="440" height="440" rx="88"/>
</clipPath>
</defs>
<rect x="16" y="16" width="480" height="480" rx="112" fill="#172033"/>
<g clip-path="url(#tile-frame)" stroke="#172033" stroke-width="24" stroke-linejoin="round">
<path d="M24 24h226l-24 210L24 202Z" fill="#F16C5B"/>
<path d="M250 24h238v184L226 234Z" fill="#36A99A"/>
<path d="M24 202l202 32-24 254H24Z" fill="#4386D8"/>
<path d="M226 234l104-34 70 126-142 80-56-92Z" fill="#F2C14E"/>
<path d="M330 200l158 8v280H202l56-82 142-80Z" fill="#8A6FBC"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 709 B

View File

@ -2,6 +2,7 @@
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMosaicStore } from '@/stores/mosaic'
import mozaicLogo from '@/assets/mozaic-logo.svg'
defineEmits<{ resetViewport: [] }>()
const store = useMosaicStore()
@ -22,7 +23,7 @@ function importProject(files: FileList | null): void {
<template>
<header class="toolbar">
<div class="brand"><span class="brand-mark">M</span><span>Mozaic</span></div>
<div class="brand"><img class="brand-mark" :src="mozaicLogo" alt="" width="32" height="32" /><span>Mozaic</span></div>
<div class="toolbar-actions">
<button class="button primary" type="button" @click="imageInput?.click()">Načítať obrázok</button>
<button class="icon-button" type="button" :disabled="!canUndo" title="Späť (Ctrl+Z)" @click="store.undo"></button>
@ -40,7 +41,7 @@ function importProject(files: FileList | null): void {
<style scoped>
.toolbar { position: sticky; top: 0; z-index: 10; display: flex; min-height: 58px; align-items: center; gap: 24px; padding: 8px 16px; border-bottom: 1px solid #dbe1e8; background: rgba(255,255,255,.96); }
.brand { display: flex; align-items: center; gap: 9px; color: #172033; font-weight: 760; letter-spacing: -.02em; }
.brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #1e293b; color: white; }
.brand-mark { display: block; width: 32px; height: 32px; flex: 0 0 32px; }
.toolbar-actions { display: flex; min-width: 0; align-items: center; gap: 7px; overflow-x: auto; }
.divider { width: 1px; height: 26px; margin: 0 2px; background: #dbe1e8; }
@media (max-width: 700px) { .toolbar { align-items: flex-start; gap: 10px; padding: 8px 10px; } .brand span:last-child { display: none; } }