RUUAENSK (vybraný)
Napísať (otvorí sa na novej karte)

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 (otvorí sa na novej karte) 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
360R2467
Obr. 1. Hlavná obrazovka Mini App „Barbershop na Príkladnej“. Vľavo náčrt, vpravo hotová obrazovka — potiahnite deliacu čiaru.

List 02 Práce

Práce

Štyri projekty. 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.

PlatformaTelegram Mini App a bot
Obrazovky8: domov, moje rezervácie, kontakty, tri kroky rezervácie, kontrola, lístok
Témysvetlá a tmavá, podľa Telegramu; 4 palety
Skloblur 16 px len na navigácii — na iPhone to nespomaľuje
Prechody110–190 ms
Jazykyslovenčina, angličtina, ukrajinčina, ruština — s menou €, $, ₴
StackHTML, CSS, JS · Python, aiogram 3, aiohttp · SQLite
Otvoriť demo (otvorí sa na novej karte) barbershop.anorrodev.tech

Priebeh rezervácie

5 obrazoviek, 3 kroky

  1. 1Služba

  2. 2Barber

  3. 3Čas

  4. 4Kontrola

  5. 5Hotovo

  1. Priebeh „krok 1 z 3“ je stále na očiach.

  2. „Ktorýkoľvek barber“ ukáže hneď všetky voľné termíny.

  3. Príplatok za top barbera vidno pred výberom, nie až na bločku.

  4. Bodka pod dátumom — sú voľné termíny; prečiarknutý — všetko obsadené.

  5. Časy sú rozdelené na ráno, popoludnie a večer.

  6. 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ý.

Platformaweb: telefón a desktop
Vykresľovaniecanvas 2D, zotrvačnosť a dorovnanie na voľný termín
PísmoRoboto Flex: šírka číslic podľa rýchlosti otáčania
Prístupnosťkaždé gesto má tlačidlo aj ovládanie klávesnicou
StackJavaScript, Canvas 2D, View Transitions
Otvoriť demo (otvorí sa na novej karte) …/pole

  1. Horná čiapka — výber služby.

  2. Lupa zväčší termín oproti času.

  3. Špirála je rozvrh: otáčka je jeden pracovný deň, segment 30 minút. Červené je voľné.

  4. Dolná čiapka — výber barbera.

  5. Potiahnite retiazku — rozsvieti sa lampa a lístok odletí do „Moje“.

  6. Číslice sa naťahujú, keď sa stĺp točí.

  7. 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ň „Zerno“

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.

PlatformaTelegram Mini App pre hosťa a webová obrazovka baristu pre tablet
Prepojenieobjednávka je hneď na tablete, „hotovo“ ide späť hosťovi; v deme bez servera
Skladanierez pohára z receptu: vrstvy v mililitroch, veľkosť mení pohár
TelegramMainButton, BackButton, vibrácie, téma a farba hlavičky
Jazykyslovenčina, angličtina, ukrajinčina, ruština — s menou €, $, ₴
StackHTML, CSS, JS bez frameworkov · SVG · Telegram Mini Apps API
Otvoriť demo (otvorí sa na novej karte) coffee.anorrodev.tech

  1. Nová objednávka sa „vytlačí“ na lište ako lístok v kuchyni.

  2. Modrý pruh a štítok — objednávka prišla z Mini App hosťa.

  3. Časovač sčervenie, keď objednávka čaká dlhšie ako tri minúty.

  4. „Hotovo“ — a hosť hneď dostane upozornenie.

  5. 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.

  1. Pokladničná páska — Z-uzávierka za obdobie; rast a pokles sú označené znamienkom, nielen farbou.

  2. Prerušovaná čiara — predchádzajúce obdobie, krúžky — udalosti ako „minulo sa ovsené mlieko“ s odhadom straty.

  3. Prevádzka a obdobie sú uložené v adrese: report sa dá zdieľať odkazom.

  4. 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.

Platformawebový panel pre notebook aj telefón, otvorí sa aj v Telegrame
Grafyvlastné, v SVG, bez knižníc: stĺpce, tepelná mapa, histogram
Údajepredaje troch prevádzok za dva roky po hodinách, export do CSV
Otvoriť panel (otvorí sa na novej karte) 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
Platformalanding page: telefón a desktop
Verzietri dizajny na rovnakom obsahu: „Cesta“, „Prémium“, „Pit stop“
Jazykyslovenčina, ukrajinčina, angličtina, ruština — každý jazyk má vlastnú menu (€, ₴, $), adresu a formát ŠPZ
Vnútrirezervácia voľného termínu, cena podľa veľkosti disku, odpočet do sezóny, pneuhotel
Fotkyvygenerované neurónovou sieťou pre každý dizajn, žiadne fotobanky
StackHTML, 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.
  1. Telefón: kód pneumatiky 205/55 R16 91V rozobratý odkazmi na bočnici

    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)
  2. Telefón: sprievodca rezerváciou, krok 1 — výber služby s cenou

    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)
  3. Telefón: limetkový lístok rezervácie s kódom boxu

    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 Voľný list

Tu bude váš projekt

Web, e-shop alebo rezervácie v Telegrame, bot pre tím — alebo nápad, ktorý ešte nemá meno. Povedzte, čo máte v pláne: nakreslím, postavím a pošlem odkaz.

Prebrať projekt (otvorí sa na novej karte)

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.

Mám rád Telegram Mini Apps a rozhrania s charakterom: sklo, svetlo, zotrvačnosť. A rovnako starostlivo robím aj neviditeľnú časť — bota, databázu, server.

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ťObsahNa čo
1Dizajnrozhrania, dizajn systémy, prototypyako produkt vyzerá a pôsobí
2FrontendHTML, CSS, JavaScript, TypeScriptweby a Mini Apps
3FrameworkyReact, Next.js, Tailwindkeď projekt rastie
4PohybCSS, Canvas 2D, GSAP, View Transitionsanimácia, ktorá vysvetľuje
5TelegramBot API, Mini Appsboty a mini aplikácie
6ServerPython, aiogram 3, aiohttp, SQLitelogika bota a dáta
7NasadenieGit, GitHub, Cloudflare Pages, Azurespustenie a aktualizácie

Technické požiadavky

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

List 04 Recenzie

Recenzie

Pripomienky klientov
Č.PripomienkaKlientDátum
1Zatiaľ prázdne: portfólio sa práve otvorilo. Prvý riadok môže byť váš.
2
3
Byť prvým klientom (otvorí sa na novej karte)

List 05 Kontakt

Porozprávame sa?

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

Napísať na Telegram (otvorí sa na novej karte)
NavrholanorroDev
Telegram @anorroDev (otvorí sa na novej karte)
E-mail [email protected]
GitHubgithub.com/anorroDev (otvorí sa na novej karte)
Klientvy
List05 Listov05
Mierka1:1 Dátum2026

Skúšobňa Pneuservis „Dezén“

Na novej karte