Protobot Automation
0
Protobot Automation
Protobot Automation
A dark luxury fine-dining template and a warm artisan café template — both handcrafted with pure HTML, CSS & JavaScript. No frameworks. No compromises.
The Collection
At Protobot Automation, we believe every hospitality brand deserves a website that feels as considered as the food it serves. These two templates represent our standard — premium craft, zero compromise, built entirely without frameworks or third-party dependencies.
Both templates share the same architecture: a shared CSS token system, shared vanilla JavaScript, and page-specific styles inline. Six pages each, fully responsive, keyboard accessible, and performance-optimised from the first line of code.
"A Fine French Restaurant, Reimagined for the Modern Web."
Built for the upper end of the hospitality market. Deep obsidian backgrounds, 22-karat gold accents, Playfair Display headlines, and a custom cursor that signals craft from the first second. The dark theme conveys luxury, exclusivity, and culinary artistry.
"Specialty Coffee & Patisserie — Shoreditch, London."
Warm cream backgrounds, terracotta accents, and honest, unpretentious typography. Designed for specialty coffee bars, artisan bakeries, and neighbourhood restaurants that lead with personality over prestige. The light theme communicates openness, warmth, and daily ritual.
No external libraries. No Bootstrap. No jQuery. Every interaction — from the cursor to the lightbox to the form validation — is handwritten JavaScript optimised for the specific use case.
A CSS dot + rAF-animated trailing ring that responds to hover states, links, and interactive elements. Colour-matched to each brand.
Micro-interactionPercentage-counting loader with animated progress bar. Hides with an opacity fade after window.load fires.
Transparent on load, transitions to backdrop-filter: blur(20px) on scroll. Separate .solid class for inner pages.
rAF-throttled translateY parallax on hero and mid-page image bands. Smooth, jank-free, no layout thrash.
Three reveal classes — .rv, .rvl, .rvr — driven by a single shared IO instance with configurable per-element delays.
Full keyboard navigation (Arrow keys + Escape), fade-on-image-change, and caption display. Works across three different CSS grid layouts.
Interaction4-category tab navigation with staggered per-item reveal animation on tab switch. Active state managed via pure JS class toggling.
ComponentDate picker with auto-set tomorrow minimum, loading state on submit with animated spinner, and smooth success state transition. No backend required.
Form UXBreakpoints at 600 / 900 / 1100px. CSS custom properties for all spacing, type, and colour tokens. clip-path animated mobile menu.
ResponsiveNo React. No Vue. No Tailwind. These templates prove that the platform is enough — when you know how to use it.
Both templates share the same level of craft — different visual identities for different brand personalities.
Fine French Cuisine · Paris, 1st Arr.
Specialty Café & Patisserie · Shoreditch
Ready to Explore?
Both templates are running locally. Click below to open each in a new tab and experience every page, every animation, every interaction.
Both templates are production-ready & live · Deploy to any host in under a minute · 12 pages · Zero build step
Have a project in mind? Chat directly on WhatsApp →