🥛 MilkyWay Premium - Interactive 3D Operations Hub

An interactive, high-fidelity landing page and administrative console built for modern dairy supply chain management. This portal features responsive WebGL simulations, glossy glassmorphism styling, a floating 3D product showcase, and native integration templates for Microsoft Power Pages (Power Apps CRM).

---

✨ Features

• 🥛 Interactive Curvy 3D Bottle Showcase: A curved hourglass glass milk bottle rendered live on canvas using Three.js, complete with white liquid fills, metallic caps, rising condensation bubbles, and cursor-reactive tilt dynamics.
• 🌊 3D Milk Ocean Wave Background: A full-page, perspective-depth WebGL grid mesh that oscillates naturally like rich creamy milk. Viewport coordinate mapping projects cursor movements to deform the mesh, sending ripple wave wakes trailing behind the pointer.
• 🛡️ Secure Administrative Control Lock: An admin dashboard containing database controls for products, order queues, active subscriptions, and routes. It is protected behind a frosted-glass overlay that requires Admin credentials to unlock.
• 🔑 Sliding Switcher Login Modal: An overlay authentication modal supporting fast Tab switching (Customer vs. Administrator profiles) with local browser session persistence.
• 💎 Premium Parallax Hover Effects: Subtle 3D card transforms (translateY, rotateX, rotateY, translateZ) coupled with dual-layered, theme-color matched under-glow shadow rings and porcelain edge sheens.
• 🔌 Power Pages CRM Ready: Secure Liquid authorization code blocks and DOMContentLoaded check systems designed to drop directly into Microsoft PowerApps portals.

---

🛠️ Technology Stack

• Core Structure: HTML5, Semantic DOM, SVG Icons
• Visual Styles: Vanilla CSS3, Glassmorphic Layering, CSS Variables (HSL), Parallax Transforms
• 3D Graphics: Three.js (WebGL library)
• Target Platform: Power Pages CRM / Standalone Web Browser

---

📂 Project Structure

milkstore-landing/
├── index.html       # Main webpage markup, auth modals, and viewport canvases
├── styles.css       # Premium stylesheets, variable tokens, and hover states
├── three-scene.js   # Hero 3D glass bottle geometry and lighting controllers
└── milk-splash.js   # Full-screen 3D waves plane and direct ripple projection maths

---

🚀 Local Installation & Quick Start

Since this project uses WebGL canvases and custom script imports, running it via a local web server is recommended (though opening index.html directly in Chrome/Edge works fine).

Option 1: Live Server (VS Code Extension)

1. Open the project folder in VS Code.
2. Click Go Live in the status bar (using the Live Server extension).

Option 2: Python HTTP Server (Built-in)

If you have Python installed, navigate to the folder in your terminal and run:

python -m http.server 8000

Then, open http://localhost:8000 in your web browser.

Option 3: Node.js (Static Server)

If you have Node.js installed, run:

npx serve .

Then, open the provided local URL in your browser.

---

🔌 Microsoft Power Pages CRM Integration

To load these assets in your Power Pages portal editor (VS Code for Web):

1. HTML Content: Copy index.html contents into your webpage's copy markup file (<> webpage.copy.html). Keep the CDN loader tag for Three.js but remove local script links (three-scene.js and milk-splash.js).
2. CSS Styles: Copy the styles from styles.css into your webpage's CSS override file (# webpage.customcss.css).
3. JavaScript Controllers: Open your webpage's JS file (JS webpage.customjs.js). Copy and paste the contents of three-scene.js first, and paste milk-splash.js directly underneath it. (Both scripts are enclosed in isolated closures (function(){})() and will compile side-by-side without naming collisions).