Problem

Vending operators face costly machine replacement and separate card-reader hardware to offer cashless payments, multi-product transactions, branding, and remote fleet management (index.html:44-96, 409-443).

What it does

A single-page marketing site for 'Myccro Plus', a device that plugs into existing MDB-compatible vending machines to add touchscreen cashless payment (tap/QR/wallet), multi-vend in one tap, brand theming, idle-screen ad revenue, and loyalty points. The page demos each feature with in-browser interactive widgets (multi-vend picker, MDB plug-connect animation, brand swatches, ad carousel, loyalty stamp card) and includes a mock 'Myccro VMS' fleet-management dashboard with tabbed views (index.html:102-280, 283-385; script.js:285-615).

Architecture

[landing-page] Static landing page (index.html) (client)
[feature-widgets] Interactive feature demos (script.js) (client)
[vms-dashboard-mock] Mock VMS dashboard with hardcoded state (client)
[cdn-assets] Webflow CDN logo & mockup images, Google Fonts/Material Symbols (external)

landing-page ──▶ feature-widgets · DOMContentLoaded wires scroll track, tabs, and 7 feature vignettes (script.js:1, 254-283)
feature-widgets ──▶ vms-dashboard-mock · Sidebar tabs render dashboard/inventory/analytics/settings views from a local vmsState object (script.js:6-24, 193-210)
landing-page ──▶ cdn-assets · Loads logo, phone mockup, fonts, and icon font from external CDNs (index.html:8-12, 20-22, 57-59)

Simplified — box-and-arrow sketch of the repo structure, not a system diagram.

Decisions

1. 01

   Zero-dependency vanilla JS/CSS

   No package.json, bundler, or libraries exist — the whole site is three hand-written files, keeping it deployable anywhere as static files.

   Evidence: repo root (only index.html, script.js, style.css present)

2. 02

   Feature storytelling via interactive vignettes instead of static copy

   Each of 7 feature cards (multi-vend, MDB plugin, branding, ads, touchscreen, loyalty) has a working simulation — e.g. selecting products then a 'One Tap' dispense animation — to sell the retrofit concept.

   Evidence: script.js:285-330 (multi-vend), 333-358 (plug connect), 556-615 (loyalty)

3. 03

   Client-side state single source of truth for the mock dashboard

   All revenue, stock, and machine data live in one hardcoded vmsState object; tab views are template functions over that state, mimicking a real VMS UI without a backend.

   Evidence: script.js:6-24 (vmsState), 24-191 (views)

4. 04

   Design tokens lifted from Material 3 naming

   CSS variables use Material 3 token names (surface-container-high, tertiary-fixed, on-primary-container) while styling a custom green/lime brand palette.

   Evidence: style.css:1-52

5. 05

   Asset reuse from an existing Webflow site

   Logo and hero mockup are hot-linked from cdn.prod.website-files.com, indicating this page was rebuilt from (or for) a company site hosted on Webflow.

   Evidence: index.html:21, 58

The hard parts

• +Simulating the MDB hardware integration story credibly in-browser (plug-connect animation with sparks and status text, script.js:340-357)
• +Hand-rolled dashboard theming: dark glassmorphism VMS panel rendered inside a light page with tab fade transitions and animated revenue-contribution bars (style.css:1536-1886, script.js:100-135)

Known limitations

• −No backend: all dashboard numbers, machine statuses, ad revenue, and loyalty points are hardcoded or randomized (script.js:6-22, 517, 585)
• −Marketing copy unverified: claims like '+24% Sales', 'Join thousands of operators', and 'under 15 minutes' setup have no data behind them (index.html:288, 380, 454, 66)
• −Typewriter effect targets #typewriter which doesn't exist in the HTML, so that animation never runs (script.js:213)
• −Several CTAs are non-functional: 'Get Started', 'Watch Demo', 'Book a Demo', and 'Get in Touch' have no href or handler; footer Privacy/Terms/Docs links are '#' (index.html:49-50, 292, 395, 467-470)
• −A '03 / Universal Compat' card is missing from the HTML even though its JS (compatCanvas) and layout slot exist, leaving numbering 01, 02, 04-07 (index.html:110-262; script.js:361-444)