List 01 Úvod

Sám kreslím. Sám staviam.

Dizajn a vývoj webov, Telegram botov a Mini Apps — jeden človek. Návrh nejde „inému vývojárovi“, takže produkt vyzerá presne ako náčrt.

Napísať na Telegram Pozrieť práce

Robím: Weby a landingy; Telegram boty; Mini Apps; Animácie rozhraní

Hotová hlavná obrazovka Mini App barbershopu v tmavej téme — **Obr. 1.** Hlavná obrazovka Mini App „Barbershop na Príkladnej“. Vľavo náčrt, vpravo hotová obrazovka — potiahnite deliacu čiaru. K práci ↓

List 02 Práce

Práce

Päť projektov. Všetky sa otvárajú cez odkaz a fungujú bez Telegramu a registrácie.

List 02.1. Záznam obrazovky

02.1 Telegram Mini App a bot

Barbershop na Príkladnej

Rezervácia u barbera v troch krokoch priamo v Telegrame. Mini aplikácia aj bot pracujú s jednou databázou: rezervácia z chatu je vidno v aplikácii a naopak.

Platforma	Telegram Mini App a bot
Obrazovky	8: domov, moje rezervácie, kontakty, tri kroky rezervácie, kontrola, lístok
Témy	svetlá a tmavá, podľa Telegramu; 4 palety
Sklo	blur 16 px len na navigácii — na iPhone to nespomaľuje
Prechody	110–190 ms
Jazyky	slovenčina, angličtina, ukrajinčina, ruština — s menou €, $, ₴
Stack	HTML, CSS, JS · Python, aiogram 3, aiohttp · SQLite

Otvoriť demo barbershop.anorrodev.tech

Priebeh rezervácie

5 obrazoviek, 3 kroky

1Služba
2Barber
3Čas
4Kontrola
5Hotovo

Priebeh „krok 1 z 3“ je stále na očiach.
„Ktorýkoľvek barber“ ukáže hneď všetky voľné termíny.
Príplatok za top barbera vidno pred výberom, nie až na bločku.
Bodka pod dátumom — sú voľné termíny; prečiarknutý — všetko obsadené.
Časy sú rozdelené na ráno, popoludnie a večer.
Po rezervácii sa „vytlačí“ lístok — ako bloček z tlačiarne.

02.2 Webový koncept tej istej rezervácie

„Stĺp“

Žiadne obrazovky ani karty: celý rozvrh je navinutý na 3D holičskom stĺpe. Točte špirálou, čiapkami vyberte službu a barbera, potiahnite retiazku — a ste objednaný.

Platforma	web: telefón a desktop
Vykresľovanie	canvas 2D, zotrvačnosť a dorovnanie na voľný termín
Písmo	Roboto Flex: šírka číslic podľa rýchlosti otáčania
Prístupnosť	každé gesto má tlačidlo aj ovládanie klávesnicou
Stack	JavaScript, Canvas 2D, View Transitions

Otvoriť demo …/pole

Horná čiapka — výber služby.
Lupa zväčší termín oproti času.
Špirála je rozvrh: otáčka je jeden pracovný deň, segment 30 minút. Červené je voľné.
Dolná čiapka — výber barbera.
Potiahnite retiazku — rozsvieti sa lampa a lístok odletí do „Moje“.
Číslice sa naťahujú, keď sa stĺp točí.
To isté aj tlačidlami a klávesnicou.

Desktopová verzia „Stĺpa“: čas 10:00 a stĺp s rozvrhom

List 02.2. Tá istá rezervácia v telefóne: stĺpom točíte prstom.

02.3 Objednávka so sebou a obrazovka baristu

Kaviareň „Zrnko“

Dve strany jedného systému. Hosť si v Telegrame poskladá nápoj — rez pohára sa prekresľuje pred očami — vyberie čas a zaplatí na pokladni. Objednávka sa hneď vytlačí u baristu a „hotovo“ z tabletu sa hosťovi vráti ako upozornenie.

Platforma	Telegram Mini App pre hosťa a webová obrazovka baristu pre tablet
Prepojenie	objednávka je hneď na tablete, „hotovo“ ide späť hosťovi; v deme bez servera
Skladanie	rez pohára z receptu: vrstvy v mililitroch, veľkosť mení pohár
Telegram	MainButton, BackButton, vibrácie, téma a farba hlavičky
Jazyky	slovenčina, angličtina, ukrajinčina, ruština — s menou €, $, ₴
Stack	HTML, CSS, JS bez frameworkov · SVG · Telegram Mini Apps API

Otvoriť demo coffee.anorrodev.tech

Nová objednávka sa „vytlačí“ na lište ako lístok v kuchyni.
Modrý pruh a štítok — objednávka prišla z Mini App hosťa.
Časovač sčervenie, keď objednávka čaká dlhšie ako tri minúty.
„Hotovo“ — a hosť hneď dostane upozornenie.
Zmena: pauza príjmu a stop-list — vypredané hosťovi hneď zmizne.

Obrazovka baristu: lístky v stĺpcoch Nové, Pripravujeme a Hotovo

Mini App hosťa: latte v reze — pena, ovsené mlieko, espresso a sirup v mililitroch — **List 02.3.** Mini App hosťa: veľkosť, mlieko a sirup prekreslia rez pohára.

Panel majiteľa na obrazovke notebooku: Z-uzávierka na pokladničnej páske, tržby po dňoch a špičky — **List 02.3/2.** Obrazovka 1440 × 900 ako na 14-palcovom notebooku. Na telefóne sa panel poskladá do jedného stĺpca.

Pokladničná páska — Z-uzávierka za obdobie; rast a pokles sú označené znamienkom, nielen farbou.
Prerušovaná čiara — predchádzajúce obdobie, krúžky — udalosti ako „minulo sa ovsené mlieko“ s odhadom straty.
Prevádzka a obdobie sú uložené v adrese: report sa dá zdieľať odkazom.
Doplnkový predaj pri pokladni a v Mini App vedľa seba — vidno, koľko zarába skladanie nápoja.

02.3/2 Doplnkový list · pohľad majiteľa

Panel majiteľa

Tá istá kaviareň očami majiteľa: tržby troch prevádzok, špičky, doplnkový predaj cez Mini App a rýchlosť baru. Údaje sú vymyslené, ale živé — objednávka z demo Mini App sa hneď objaví v časti „Dnes“ aj v Z-uzávierke.

Platforma	webový panel pre notebook aj telefón, otvorí sa aj v Telegrame
Grafy	vlastné, v SVG, bez knižníc: stĺpce, tepelná mapa, histogram
Údaje	predaje troch prevádzok za dva roky po hodinách, export do CSV

Otvoriť panel coffee.anorrodev.tech/owner

02.4 Landing pneuservisu · tri verzie

Pneuservis „Dezén“

Jedno zadanie, tri rôzne weby. Pneuservis potrebuje, aby zákazník hneď videl cenu a objednal sa bez telefonátu. Postavil som to v troch verziách s rôznym charakterom: klient si vyberá náladu, nie farbu tlačidla.

Vyskúšať všetky tri dezen.anorrodev.tech

Platforma	landing page: telefón a desktop
Verzie	tri dizajny na rovnakom obsahu: „Cesta“, „Prémium“, „Pit stop“
Jazyky	slovenčina, ukrajinčina, angličtina, ruština — každý jazyk má vlastnú menu (€, ₴, $), adresu a formát ŠPZ
Vnútri	rezervácia voľného termínu, cena podľa veľkosti disku, odpočet do sezóny, pneuhotel
Fotky	vygenerované neurónovou sieťou pre každý dizajn, žiadne fotobanky
Stack	HTML, CSS, JS bez frameworkov · SVG · build v Pythone

**List 02.4.** Jedna prvá obrazovka — tri verzie. Kliknite na ktorúkoľvek a vyskúšajte ju naživo; na počítači sa verzia roztvorí pod kurzorom.

Verzia 1

„Cesta“

Dopravné značenie a dezén. V lete svetlý betón, v zime nočný asfalt — sezóna prepína tému. Kód z bočnice pneumatiky sa rozoberie priamo na výkrese.

Farby
#F2B705 #ECE9E2 #151515 #8FD0F7

Písma
Fira Sans Extra Condensed · Fira Mono

Vyskúšať tu Otvoriť web (otvorí sa na novej karte)
Verzia 2

„Prémium“

Fotky, hodnotenie a rýchla rezervácia hneď na prvej obrazovke. Pokojná grafitová a červené tlačidlo — pre tých, čo si servis vyberajú podľa dôvery. Rezervácia v troch krokoch.

Farby
#0F172A #DC2626 #F4F5F7 #FFFFFF

Písma
Inter Tight · Inter

Vyskúšať tu Otvoriť web (otvorí sa na novej karte)
Verzia 3

„Pit stop“

Čierna, limetková a obrie písmo. Stopky na prvej obrazovke, bežiaci pás, rezervácia na jednej obrazovke — a limetkový lístok s kódom.

Farby
#0A0A0A #CCFF00 #EDEDED #6B6B6B

Písma
Dela Gothic One · Rubik

Vyskúšať tu Otvoriť web (otvorí sa na novej karte)

02.5 Landing page cukrárne · dve verzie

Torty „Vrstva“

Domácim cukrárkam ľudia píšu do správ a na cenu čakajú hodiny. Tu je torta vidieť hneď: poskladáte ju, uvidíte ju v reze, zistíte cenu a objednáte si voľný deň so zálohou. Dve verzie — pre svadobnú cukráreň a pre bento torty na zajtra.

Vyskúšať obe vrstva.anorrodev.tech

Platforma	landing page: telefón aj desktop
Verzie	„Vitrína“ a „Bento“ na rovnakom obsahu
Jazyky	slovenčina, ukrajinčina, angličtina, ruština — každá so svojou menou (€, ₴, $) a adresou
Vo vnútri	konfigurátor torty s rezom, nápis krémom na bente, rozvrh cukrárky, záloha 50 %
Fotky	vygenerované neurónovou sieťou: deväť tort a päť bent, bez fotobánk
Stack	HTML, CSS, JS bez frameworkov · SVG · zostavenie v Pythone

**List 02.5.** Jedna prvá obrazovka — dve verzie. Kliknite na ktorúkoľvek a vyskúšajte ju naživo; na počítači sa verzia pod kurzorom rozšíri.

Verzia 1

„Vitrína“

Prémiová cukráreň na fotkách. Príležitosť, hostia a dátum hneď na prvej obrazovke; v konfigurátore je torta napoly zvonka a napoly v reze, so všetkými vrstvami.

Farby
#FAF6EF #33261F #7D2A3F #E8DFD1

Písma
Cormorant Garamond · Jost

Vyskúšať tu Otvoriť web (otvorí sa na novej karte)
Verzia 2

„Bento“

Žltá, ružová, hrubé obrysy a nálepky. Napíšete nápis a hneď ho vidíte krémom na torte; farba krému mení fotku, objednávka na zajtra do 18:00.

Farby
#FFD23F #FF9EC0 #86E3C3 #1C1A17

Písma
M PLUS Rounded 1c · Pangolin

Vyskúšať tu Otvoriť web (otvorí sa na novej karte)

02.6 Voľný list

Nenašli ste tu to svoje?

Tým lepšie — váš projekt bude prvý svojho druhu. Šablóny tu nie sú: každý list sa kreslí od nuly pre konkrétnu úlohu. Vpíšte názov do popisového poľa a pošlite mi ho.

Názov Objednávateľvy List02.6 NavrholanorroDev

Prebrať projekt

Otvorí sa Telegram s pripravenou správou — stačí stlačiť Odoslať.

List 03 O mne

O mne

Som anorroDev — dizajnér, ktorý píše kód. Projekt vediem od prvého náčrtu po spustenie: vymyslím, ako vyzerá a ako sa ovláda, postavím ho a zverejním.

Robím weby, Telegram boty a Mini Apps pre malé podniky — ako v prácach vyššie: barbershop, kaviareň, pneuservis, cukráreň. Dbám na to, aby si zákazník bez zbytočných krokov rezervoval termín alebo niečo objednal a majiteľ videl, čo sa deje. Preto popri rozhraní staviam aj neviditeľnú časť — bota, databázu, server, panel pre majiteľa. Hneď vo viacerých jazykoch a s cenami v správnej mene.

Legenda

Plná čiara — to, čo ľudia vidia: rozhranie, pohyb, texty na tlačidlách.
Čiarkovaná čiara — to, čo je pod kapotou: bot, databáza, server, nasadenie.
Bodkočiarkovaná — os — cesta človeka od prvej obrazovky k rezervácii či nákupu.
Červená čiara — opravy. Robím ich sám, kým si ich niekto všimne.

Kusovník

Pol.	Oblasť	Obsah	Na čo
1	Dizajn	rozhrania, dizajn systémy, prototypy	ako produkt vyzerá a pôsobí
2	Frontend	HTML, CSS, JavaScript, TypeScript	weby a Mini Apps
3	Frameworky	React, Next.js, Tailwind	keď projekt rastie
4	Pohyb	CSS, Canvas 2D, GSAP, View Transitions	animácia, ktorá vysvetľuje
5	Telegram	Bot API, Mini Apps	boty a mini aplikácie
6	Server	Python, aiogram 3, aiohttp, SQLite	logika bota a dáta
7	Nasadenie	Git, GitHub, Cloudflare Pages, Azure	spustenie a aktualizácie

Technické požiadavky

Rozhranie musí pôsobiť živo — a na telefóne sa nesekať.
Animácia vysvetľuje, čo sa stalo. Ak nevysvetľuje, nie je tam.
Demo sa otvára cez odkaz, bez registrácie.
Čo je nakreslené, to je postavené. Žiadne „opravíme neskôr“.

List 04 Postupová karta

Ako prebieha práca

Päť operácií ako v postupovej karte. Po každej máte čo otvoriť cez odkaz — nič sa nedeje „potichu“.

Op. 005

Zadanie

V Telegrame prejdeme, čo treba, pre koho a ako to bude fungovať. Ak je nápad ešte surový, navrhnem, kde začať.

Výsledok
krátke zadanie: obrazovky, funkcie, cena a termín

Od vás
pár viet o úlohe a weby, ktoré sa vám páčia
Op. 010

Náčrt

Kreslím hlavné obrazovky presne tak, ako ich postavím — nie „obrázok na prezentáciu“.

Výsledok
náčrty cez odkaz; úpravy ešte pred kódom

Od vás
pripomienky k náčrtom
Op. 015

Stavba

Staviam rozhranie aj to, čo je pod ním: bota, databázu, server. Ukazujem priebežne, nie až na konci.

Výsledok
živé demo — dá sa preklikať v telefóne

Od vás
texty, fotky, ceny
Op. 020

Spustenie

Pripojím doménu, notifikácie a platby, ak ich potrebujete, a zverejním.

Výsledok
funkčný web, bot alebo Mini App a prístupy k nim

Od vás
doména alebo prístup k nej
Op. 025

Podpora

Opravím, ak sa niečo pokazí, a doplním, keď firma bude potrebovať viac.

Výsledok
produkt, ktorý rastie s firmou

Od vás
správa, keď niečo budete potrebovať

List 05 Kontakt

Porozprávame sa?

Napíšte pár viet o projekte — odpoviem a navrhnem, kde začať.

Napísať na Telegram

Navrhol	anorroDev
Telegram	@anorroDev (otvorí sa na novej karte)
E-mail	[email protected]
GitHub	github.com/anorroDev (otvorí sa na novej karte)
Klient	vy
List	05	Listov	05
Mierka	1:1	Dátum	2026

Sám kreslím. Sám staviam.

Barbershop na Príkladnej

Priebeh rezervácie

„Stĺp“

Kaviareň „Zrnko“

Panel majiteľa

Pneuservis „Dezén“

„Cesta“

„Prémium“

„Pit stop“

Torty „Vrstva“

„Vitrína“

„Bento“

Nenašli ste tu to svoje?

Legenda

Kusovník

Technické požiadavky

Zadanie

Náčrt

Stavba

Spustenie

Podpora

Porozprávame sa?