pridana ikonka, screenshot a popis do README.md
@ -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>
|
||||
|
||||
BIN
frontend/public/apple-touch-icon.png
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
frontend/public/favicon-16x16.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
frontend/public/favicon-32x32.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
15
frontend/public/favicon.svg
Normal 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 |
BIN
frontend/public/icon-192.png
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
frontend/public/icon-512.png
Normal file
|
After Width: | Height: | Size: 41 KiB |
15
frontend/src/assets/mozaic-logo.svg
Normal 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 |
@ -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; } }
|
||||
|
||||