================================================================================ MACKENZIE CRAFT BREWING CO. — OPERATIONS SUITE INDEX NOTES Companion document to: index.html Last updated: May 2026 ================================================================================ ABOUT THIS DOCUMENT ------------------- Companion notes for the operations suite landing page. Read alongside: - MCB_POS_Notes.txt - MCB_BrewLog_Notes.txt - MCB_Dist_Notes.txt (to be created) - MCB_Bookkeeper_Guide.txt - MackenzieCraftBrewery_BusinessContext.docx -------------------------------------------------------------------------------- 1. WHAT THE INDEX PAGE IS -------------------------------------------------------------------------------- A simple branded landing page hosted at your subdomain that: - Provides a single entry point to all three operational tools - Shows which device each tool is intended for - Displays standing reminders about DSWR deadlines, PIN, and backup habits - Includes the LDB compliance notice as a permanent reminder - Links directly to each tool by filename - Links to the Index Notes and Bookkeeper Guide reference documents It is static HTML — no JavaScript, no data, no localStorage. It is purely a navigation and reference page. Updating it requires only editing the HTML file and re-uploading to Hostgator. -------------------------------------------------------------------------------- 2. HOSTGATOR DEPLOYMENT -------------------------------------------------------------------------------- Intended subdomain: ops.probookkeeping.net (confirmed active as of May 2026) Hosting: Hostgator shared hosting — static file serving only File structure on the server (all files in the same folder): index.html ← landing page pos.html ← Mackenzie_Craft_POS_v5.html (renamed) brewlog.html ← Mackenzie_Craft___Brewing_Log_v2.html (renamed) distribution.html ← Mackenzie_Craft___Distribution_v3.html (renamed) Mcb_index_notes.txt ← this file (linked from index page) MCB_Bookkeeper_Guide.txt ← bookkeeper reference (linked from index page) Rename files on upload: Mackenzie_Craft_POS_v5.html → pos.html Mackenzie_Craft___Brewing_Log_v2.html → brewlog.html Mackenzie_Craft___Distribution_v3.html → distribution.html The index.html links are already set to these filenames. If you choose different filenames, update the href attributes in the tool card anchor tags and document link anchor tags in index.html. Upload method: Hostgator File Manager or FTP (FileZilla etc.) No database, no PHP, no server-side configuration required. -------------------------------------------------------------------------------- 3. ADDING TOOLS TO IPAD / PHONE HOME SCREEN -------------------------------------------------------------------------------- For each tool on its intended device: 1. Open Safari (must be Safari on iOS — Chrome does not support Add to Home Screen with full-screen mode) 2. Navigate to the tool URL: ops.probookkeeping.net/pos.html ops.probookkeeping.net/brewlog.html ops.probookkeeping.net/distribution.html 3. Tap the Share button (box with arrow pointing up) 4. Scroll down and tap "Add to Home Screen" 5. Give it a short name (e.g. "MCB POS", "Brew Log", "Distribution") 6. Tap Add The tool now appears on the home screen as an icon and opens full-screen (no Safari browser chrome) — behaves like a native app. IMPORTANT: Once added to home screen, the tool runs from the browser's cached version. To get an updated version after you upload a new file to Hostgator: 1. Open the tool from its direct URL in Safari (not from home screen icon) 2. Hard refresh: hold the reload button → tap "Reload Without Content Blockers" OR clear Safari cache in Settings → Safari → Clear History and Website Data (note: clearing cache does NOT clear localStorage/tool data) 3. Once the new version loads from the URL, re-add to home screen (or the existing home screen icon will use the refreshed cache) -------------------------------------------------------------------------------- 4. DEVICE ASSIGNMENT -------------------------------------------------------------------------------- Recommended device per tool: POS (pos.html) Device: iPad at the bar Reason: Tablet layout optimised for table/seat selection and quick item entry during service. Full-screen Safari mode works well here. Also responsive for phone portrait (stacked layout) and phone landscape (tablet-equivalent side-by-side layout). Brewing Log (brewlog.html) Device: Phone in the brewery (or tablet) Reason: Mobile-first layout. You're moving around the brewery during a brew day — phone in your pocket is more practical than a tablet. Distribution (distribution.html) Device: Laptop or desktop in the office Reason: Order entry, Form 60 generation, and CSV exports are admin tasks done at a desk. Wider screen helps with the order line grid. Each device has its own localStorage — data does not sync between devices. This is intentional. Each tool lives on the device that generates its data. -------------------------------------------------------------------------------- 5. DATA FLOW BETWEEN TOOLS (SAME DEVICE ONLY) -------------------------------------------------------------------------------- When multiple tools are on the same device and browser, they share data via localStorage keys: mcb_config Written by: POS Setup (primary), also writable by Brew Log and Distribution setup screens Read by: all three tools Contains: company profile (bizName, address, city, province, postal, phone, email, GST, vendorId, storeNo, licenceNo), beer SKUs (drinks) mcb_brew_config Written by: Brew Log Setup Read by: Brew Log only Contains: SKU register, spoilage threshold, warnAt % mcb_dist_config Written by: Distribution Setup Read by: Distribution only Contains: customers, containers, pricing, invoice seq., preparedBy signatory mcb_pin Written by: any tool's Setup Read by: all three tools Contains: 4-digit PIN (shared across tools) NOTE: As of the May 2026 update, all three tools can now read AND write the shared company profile fields (address, city, province, postal, phone) back to mcb_config. Previously only the POS could update the profile. POS is still the recommended first-setup tool as it has the most complete profile form. If tools are on different devices (the recommended setup), each device manages its own config. You will need to set up company profile and SKUs separately in each tool's Setup on first use. Shortcut: Set up the POS first (most complete profile fields), then open the other tools on the same device/browser to inherit the shared config, then move the files to their intended devices. -------------------------------------------------------------------------------- 6. SETUP SCREEN DESIGN — FIRST-RUN GUIDANCE -------------------------------------------------------------------------------- All three tool setup screens now include a first-run notice in the Company Profile section: POS: "Set up here first. Business name, address, and LDB registration numbers are shared with the Brew Log and Distribution tools on this device." Brew Log: "Set up POS first if all tools are on the same device — the fields below will auto-populate from that setup. If this is a standalone device, fill them in here." Distribution: Same guidance as Brew Log. The Company Profile section now contains identical fields across all three tools: - Business name - LDB Vendor ID - LDB Store No. - LCLB Licence No. - GST Number - Street Address - City - Province - Postal Code - Phone Distribution additionally has: Prepared By (signatory), Next Invoice No. Brew Log additionally has: Spoilage threshold %, Warning threshold % -------------------------------------------------------------------------------- 7. NAVIGATION — HOME LINK FROM SUB-PAGES -------------------------------------------------------------------------------- All three sub-pages (pos.html, brewlog.html, distribution.html) have the company name in the top-left bar hyperlinked back to index.html. The link uses the existing amber styling and has a subtle hover highlight. It appears as: [Mackenzie Craft] [badge] in the topbar. This is the standard navigation pattern — tap/click the name to return to the index page. -------------------------------------------------------------------------------- 8. POS RESPONSIVE LAYOUT -------------------------------------------------------------------------------- The POS is designed to be used across multiple screen sizes: Phone portrait (width ≤ 600px, orientation: portrait): - Table sidebar collapses to a horizontal scrolling strip at the top - Menu panel and order panel stack vertically (menu above, order below) - Usable with one hand Phone landscape (width ≤ 900px, orientation: landscape): - Switches to tablet-equivalent layout automatically - Side-by-side menu and order panels, slightly narrower than desktop - Tilting the phone triggers this switch instantly via CSS orientation query Tablet / desktop (width > 600px): - Full side-by-side layout: sidebar + menu panel + order panel -------------------------------------------------------------------------------- 9. DISTRIBUTION — DSWR EXPORT (PACKAGED SALES CSV) -------------------------------------------------------------------------------- The Distribution tool's DSWR export produces a file that is upload-ready for the LDB DSWR system, matching the exact 14-column specification: Store_Number, Transaction_Type, Transaction_Date, Invoice_Reference_Number, Original_Invoice_Number, Customer_Number, Customer_Type, Payment_Method, SKU, Quantity, Price, Container_Deposit, Total_Doc_Amount, Return_Reason_Code Key details: - Transaction_Date formatted as mm/dd/yyyy (as required by DSWR) - Payment_Method blank = Cash (spec rule 8.1); HOC for HO-debit returns - Total_Doc_Amount repeats on every line of the same invoice (spec rule 13.5) - Returns are included in the same file as sales (Return rows) - Return_Reason_Code populated from the return record (blank for sales) - Filename auto-generated to LDB recommended format: Store_[storeNo]_[mmddyyyy].csv (max 30 characters) NOTE: Pipeline sales (tap sales) cannot be uploaded via CSV per LDB rules. The POS DSWR export is a manual-entry reference document only — use it to read litres-by-SKU while entering data into DSWR manually. -------------------------------------------------------------------------------- 10. DISTRIBUTION — REPORTS TAB (DSWR MANUAL ENTRY VIEW) -------------------------------------------------------------------------------- The Reports tab DSWR section now displays one document card per invoice, showing exactly what to type into DSWR: - Store No. and Vendor ID reference header - Per invoice: date, customer name, customer type code, LCLB licence number (= Customer Number in DSWR), payment method - Per line: beer name, LDB SKU, container, qty, unit price, deposit, line total - Footer: subtotal, GST (5%), deposits, Total Doc Amount NIL REPORT NOTICE: When there are no non-MOS packaged deliveries for the selected week, the section displays a prominent warning: "No packaged deliveries this week. You must still submit a batch — log into DSWR and submit a nil batch to confirm zero sales for this reporting period. A nil report is required even in zero-sales weeks." -------------------------------------------------------------------------------- 11. UPDATING THE INDEX PAGE -------------------------------------------------------------------------------- Common updates you may need to make: Changing tool filenames: Edit the href attribute on each .tool-card anchor tag. Three tool cards: pos.html, brewlog.html, distribution.html. Changing document link filenames: Edit the href attributes on the two document link cards in the "Reference Documents" section: Mcb_index_notes.txt → href="Mcb_index_notes.txt" MCB_Bookkeeper_Guide.txt → href="MCB_Bookkeeper_Guide.txt" Updating version numbers in the footer: Find the footer element near the bottom. Edit the .footer-meta div. Updating the subdomain or adding a new tool: Add a new .tool-card div following the same pattern as the existing three cards. Copy an existing card and update: icon, eyebrow, title, description, features list, badge, and href. Changing the DSWR contact details: Find the info-box containing "wpdr@bcldb.com" and update as needed. Updating the compliance notice: Find the .compliance-bar div and edit the .compliance-text content. -------------------------------------------------------------------------------- 12. TECHNOLOGY NOTES -------------------------------------------------------------------------------- The index page uses: - Google Fonts (Playfair Display, DM Mono, DM Sans) via CDN import - Pure CSS animations (no JavaScript) - CSS custom properties (variables) for theming - No JavaScript at all — fully static - SVG noise texture embedded as a data URI for the grain overlay effect Browser compatibility: All modern browsers. The grain overlay and CSS animations degrade gracefully on older browsers. The page is intentionally lightweight — no frameworks, no build step, no dependencies beyond Google Fonts. If Google Fonts are unavailable (offline), the page falls back to: Playfair Display → Georgia → serif DM Mono → Courier New → monospace DM Sans → Helvetica Neue → sans-serif -------------------------------------------------------------------------------- 13. DESIGN NOTES -------------------------------------------------------------------------------- Aesthetic direction: Dark brewery / craft industrial - Dark background (#0F0A04) evokes the brewery environment - Amber (#D4820A) as the primary accent — references the colour of ale - Playfair Display serif for headings — refined, not generic - DM Mono for data/labels — technical precision - Subtle grain texture overlay via SVG — tactile, craft feel - Card hover effects: lift + amber border + bottom accent line - Staggered card animations on load Colour assignments by tool match their badge colours across all tools: POS → Blue (#1B4F72) — calm, service-oriented Brew Log → Green (#2D6A4F) — production, natural Distribution → Red (#A93226) — commercial, logistics Reference docs → Amber/neutral — documentation, reference -------------------------------------------------------------------------------- 14. VERSION HISTORY -------------------------------------------------------------------------------- v1 Initial build. Three tool cards: pos.html, brewlog.html, distribution.html. Four info boxes: reporting, deadline, PIN reminder, backup reminder. LDB compliance notice. Deployment notice. Animated card reveals. Dark brewery aesthetic with grain texture overlay. v2 [Current — May 2026] Navigation: Company name in all three sub-page topbars hyperlinked back to index.html. POS responsive layout: phone portrait stacks panels; phone landscape switches to tablet side-by-side view via CSS orientation queries. Setup screens: Company Profile expanded to include address, city, province, postal, phone in Brew Log and Distribution (matching POS). Combined sp-cityProv field in Distribution split into separate fields. All three tools can now read and write the shared profile. Setup screens: First-run notices added to all three tools' Company Profile sections guiding setup order. Distribution DSWR CSV: Rewritten to full LDB 14-column upload spec. Returns included. Filename auto-generated to LDB format. Distribution Reports tab: DSWR section redesigned to show one card per invoice with all fields needed for manual DSWR entry. Nil report notice added for zero-delivery weeks. Index page: Reference document section added with links to Mcb_index_notes.txt and MCB_Bookkeeper_Guide.txt. ================================================================================ END OF NOTES ================================================================================