🚀 Lumina Premium - Advanced Agency Platform (Demo Website)

The Future of Automated Business Solutions

Lumina is a high-end, multi-page business ecosystem designed for modern agencies. It combines a conversion-optimized frontend with a heavily secured, feature-rich admin management system.

---

✨ Project Highlights

---

🏠 High-Converting Landing Page

• Next-Gen UI: Professional design utilizing the 'Inter' typeface for maximum readability.
• Micro-Interactions: CSS3 and JavaScript-driven entry animations that provide a premium user experience.
• Glassmorphic Navigation: Interactive, blur-effect menu bar with full mobile responsiveness.

🔍 Interactive Audit Engine (aud.html)

• Simulated Audit System: An engaging tool that provides instant (simulated) feedback to potential clients.
• Dynamic Progress Tracking: Real-time visual bars and status updates to boost user trust and conversion.

🔐 Multi-Layer Secure Admin Gateway (admin.html)

• Advanced Auth: Triple-tier authentication (Username, Password, and Secret Pass-Key).
• Dynamic UI Injection: The login form is rendered via JavaScript after page load, keeping the source code empty (view-source protection).
• Session Persistence: State-aware authentication using LocalStorage to keep you logged in securely.

📊 Enterprise Dashboard (dashboard.html)

• SPA Architecture: Fast, hash-based routing between 10 specialized tabs.
• Customization Engine: Real-time Dark/Light mode toggle and font scaling with persistent memory.
• System Metrics: Built-in analytics visualization for monitoring business growth.

---

📩 Database-Free Form Integration

To keep the platform lightweight and secure without a complex SQL database, Lumina is integrated with Google Forms API:

• Client Lead Generation: All inquiries from the contact sections are automatically routed to a secure Google Sheet via Google Forms.
• Audit Reports: Data from the fake audit engine is logged for future follow-ups.
• Zero-Backend Dependency: Ensures 99.9% uptime as it doesn't rely on a custom server.

---

🛡 Security & Anti-Exploit Guard

Lumina is built with a "Security-First" mindset to protect your intellectual property:

• Obfuscated Core: Main logic is hex-encoded to prevent reverse engineering.
• Anti-Hacker Shield: Fully disables Right-Click, F12 (Developer Tools), Ctrl+U (View Source), and Ctrl+S.
• Domain Locking: The script checks window.location.hostname and self-destructs if run on unauthorized domains.
• Debugger Trap: Automatically pauses the browser if anyone attempts to inspect the code.

🛠 Installation & Setup Guide

Follow these steps to deploy and configure Lumina Premium on your machine or live server.

1. Download & Extract

• Download: Click the green Code button at the top of this repository.
• ZIP File: Select Download ZIP.
• Extract: Once downloaded, extract the .zip file to your preferred folder.
• Open: Open the extracted folder using a code editor like VS Code.

Or

• Clone the Repository:

  git clone [https://github.com/anafibnshahibul/HTML-Business-Service-Website-Demo.git](https://github.com/anafibnshahibul/HTML-Business-Service-Website-Demo.git)
  

2. Google Forms Integration (Database Setup)

Lumina uses Google Forms to collect data without needing a complex backend database.

1. Go to Google Forms and create a new form.
2. Add fields matching the contact form (e.g., Name, Email, Message).
3. Click the three dots (top-right) and select "Get pre-filled link".
4. Type dummy text in each field and click Get Link.
5. Copy the link and paste it into your browser.
6. Look at the URL to find the Entry IDs (e.g., entry.12345678).

3. Configure API & Entry IDs

• Open js/script.js or your main logic file.
• Find the Google Form submission section.
• Replace the placeholder Entry IDs with your actual IDs from Step 2.
• Update the Form Action URL: https://docs.google.com/forms/d/e/YOUR_FORM_ID/formResponse.

4. Security & Deployment

• Admin Access: Ensure your credentials in js/admin.jsx are correct.
• URL Masking: If deploying on Netlify, ensure the _redirects file is in the root folder for /admin to work.
• Anti-Hacker: Remember, Right-Click and View-Source are disabled. Always edit via your local IDE.

5. Launch

Simply open index.html in your browser. For the best experience, use the Live Server extension in VS Code.

---

📁 File Structure

├── index.html           # Main Business Gateway
├── about.html           # Agency Mission & Vision
├── blog.htm             # Content Hub
├── seo.htm              # SEO Specialized Article
├── future2026.html      # Industry Predictions Blog
├── sass.html            # SaaS Strategy Guide
├── hall-to-fame.html    # Client Success Stories
├── aud.html             # The Interactive Audit Engine
├── admin.html           # The Secure Entry Point (Hidden Source)
├── dashboard.html       # Protected Management Command Center
├── security-policy.html # Legal & Data Protection Guidelines
├── career.html          # Mission-driven Recruitment Page
├── sitemap.xml          # SEO Indexing with XSLT Styling
├── sitemap-style.xls    # Professional Sitemap Visualization
├── robots.txt           # Search Engine Instructions
├── humans.txt           # Credits & Developer Info
├── pgp-key.txt          # Encrypted Communication Key
├── _redirects           # Netlify URL Masking Rules
├── action/
│   ├── checkout.html    # Premium Service Selection
│   └── thanks.html      # Conversion Completion Page
├── js/
│   ├── admin.jsx        # Secured Dashboard & Auth Logic
│   ├── script.js        # Global Interactions
│   ├── to-top.js        # Smooth Scroll Engine
│   ├── dbs.jsx          # Animation & Data Hooks
│   └── custom.html.jsx  # Modular HTML Components
└── css/
    ├── style.css        # Core Design System
    ├── style.min.css    # Audit System Optimization
    └── acc.css          # Dashboard Specific Styling
├── path/
    └── to/
          ├── manifest.json        # PWA Support (Web-to-App)