enhance Simple Mode with logo branding and npm script to serve SIMPLE_MODE

SIMPLE_MODE.md

@@ -57,7 +57,20 @@ docker build --build-arg SIMPLE_MODE=true -t bentopdf-simple .
 docker run -p 3000:80 bentopdf-simple
 ```
 
-### Method 4: Using Environment Variables
+### Method 4: Using npm Script (Easiest for Local Development)
+
+Use the built-in npm script that handles everything:
+
+```bash
+npm run serve:simple
+```
+
+This command automatically:
+- Sets `SIMPLE_MODE=true`
+- Builds the project with Simple Mode enabled
+- Serves the built files on `http://localhost:3000`
+
+### Method 5: Using Environment Variables
 
 Set the environment variable before building:
 
@@ -69,7 +82,15 @@ npx serve dist -p 3000
 
 ## 🧪 Testing Simple Mode Locally
 
-### Method 1: Using Pre-built Image (Easiest)
+### Method 1: Using npm Script (Easiest for Development)
+
+```bash
+npm run serve:simple
+```
+
+This automatically builds and serves Simple Mode on `http://localhost:3000`.
+
+### Method 2: Using Pre-built Image (Easiest for Production)
 
 ```bash
 # Pull and run the Simple Mode image
@@ -79,7 +100,7 @@ docker run -p 3000:80 bentopdf/bentopdf-simple:latest
 
 Open `http://localhost:3000` in your browser.
 
-### Method 2: Build and Test Locally
+### Method 3: Build and Test Locally
 
 ```bash
 # Build with simple mode
@@ -91,7 +112,7 @@ npx serve dist -p 3000
 
 Open `http://localhost:3000` in your browser.
 
-### Method 3: Compare Both Modes
+### Method 4: Compare Both Modes
 
 ```bash
 # Test Normal Mode

package.json

@@ -18,7 +18,8 @@
     "format": "prettier --write .",
     "release": "node scripts/release.js patch",
     "release:minor": "node scripts/release.js minor",
-    "release:major": "node scripts/release.js major"
+    "release:major": "node scripts/release.js major",
+    "serve:simple": "SIMPLE_MODE=true npm run build && npx serve dist -p 3000"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",

src/js/main.ts

@@ -11,12 +11,29 @@ const init = () => {
     import.meta.url
   ).toString();
 
-  // Handle simple mode - hide branding sections
+  // Handle simple mode - hide branding sections but keep logo and copyright
   if (__SIMPLE_MODE__) {
     const hideBrandingSections = () => {
+      // Hide navigation but keep logo
       const nav = document.querySelector('nav');
       if (nav) {
+        // Hide the entire nav but we'll create a minimal one with just logo
         nav.style.display = 'none';
+        
+        // Create a simple nav with just logo on the right
+        const simpleNav = document.createElement('nav');
+        simpleNav.className = 'bg-gray-800 border-b border-gray-700 sticky top-0 z-30';
+        simpleNav.innerHTML = `
+          <div class="container mx-auto px-4">
+            <div class="flex justify-start items-center h-16">
+              <div class="flex-shrink-0 flex items-center">
+                <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8">
+                <span class="text-white font-bold text-xl ml-2">BentoPDF</span>
+              </div>
+            </div>
+          </div>
+        `;
+        document.body.insertBefore(simpleNav, document.body.firstChild);
       }
 
       const heroSection = document.getElementById('hero-section');
@@ -51,9 +68,25 @@ const init = () => {
         supportSection.style.display = 'none';
       }
 
+      // Hide footer but keep copyright
       const footer = document.querySelector('footer');
       if (footer) {
         footer.style.display = 'none';
+        
+        const simpleFooter = document.createElement('footer');
+        simpleFooter.className = 'mt-16 border-t-2 border-gray-700 py-8';
+        simpleFooter.innerHTML = `
+          <div class="container mx-auto px-4">
+            <div class="flex items-center mb-4">
+              <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8 mr-2">
+              <span class="text-white font-bold text-lg">BentoPDF</span>
+            </div>
+            <p class="text-gray-400 text-sm">
+              &copy; 2025 BentoPDF. All rights reserved.
+            </p>
+          </div>
+        `;
+        document.body.appendChild(simpleFooter);
       }
 
       const sectionDividers = document.querySelectorAll('.section-divider');
@@ -61,7 +94,7 @@ const init = () => {
         (divider as HTMLElement).style.display = 'none';
       });
 
-      document.title = 'PDF Tools';
+      document.title = 'BentoPDF - PDF Tools';
 
       const toolsHeader = document.getElementById('tools-header');
       if (toolsHeader) {
@@ -79,7 +112,7 @@ const init = () => {
 
       const app = document.getElementById('app');
       if (app) {
-        app.style.paddingTop = '2rem';
+        app.style.paddingTop = '1rem';
       }
     };