From a2a485dd8e7f24f29e8e57cd75760a118bbdf1bf Mon Sep 17 00:00:00 2001
From: knight <knight@ghost.tel>
Date: Wed, 11 Dec 2024 10:01:51 -0500
Subject: [PATCH] Add basic authentication to non-GET requests and update
 library management features

- Integrated express-basic-auth middleware in index.js to secure non-GET routes with basic authentication.
- Updated libraryManager.py to use HTTPBasicAuth for API requests, enhancing security for book management operations.
- Modified public/index.html to improve the user interface with a new search feature and dynamic book table.
- Removed obsolete public/library.html file to streamline the project structure.
- Updated package.json and package-lock.json to include express-basic-auth as a new dependency.
---
 Dockerfile          |  23 +++++++
 books.db            | Bin 753664 -> 753664 bytes
 docker-compose.yml  |  20 ++++++
 index.js            |  16 +++++
 libraryManager.py   |  25 ++++++-
 package-lock.json   |  28 ++++++++
 package.json        |   1 +
 public/index.html   | 163 +++++++++++++++++++++++++++++++++++++-------
 public/library.html | 147 ---------------------------------------
 public/scanner.html |  36 ++++++++++
 10 files changed, 283 insertions(+), 176 deletions(-)
 create mode 100644 Dockerfile
 create mode 100644 docker-compose.yml
 delete mode 100644 public/library.html
 create mode 100644 public/scanner.html

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..d59079e
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,23 @@
+# Use an official Node.js runtime as a parent image
+FROM node:14
+
+# Set the working directory in the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install any needed packages specified in package.json
+RUN npm install
+
+# Copy the rest of the application code to the working directory
+COPY . .
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# Define environment variable
+ENV NODE_ENV=production
+
+# Run the application
+CMD ["node", "index.js"]
diff --git a/books.db b/books.db
index 7c7a1995a291329938854d84ce05af79444f7d0c..e9e4c69fc5a73c9a7894f4c6e25ca58744e653c0 100644
GIT binary patch
delta 852
zcmZ|L%}>){90%||?bDWyZtcd)hBzp10y1Duc~Jx>h+=%9q7gJP%oh;jW&Z(tkZ?1>
z^y*<fz!Fb0Rp!CN?ndd^6UKul4TOWqNYw9Rys3wN`sCN&@A-YxT&^#d>svn*iLVNR
z@CMH%Jhug*w)iZO6632cGhUVG&Ny{iyXfBZMznWCckd}^5`>jb_pb9?X$UIr;-3m}
zA9};p5)s`y&ZxdFy0gx<epGa$-hm!L)pm>!F1q0igq~_{MveCNlGPq(FVsj^>fJ@>
ztD10bg$$>wYQkGG9;w>I(!%}63lFSm?_>QoA-4A-_EugVVpG`P%PznvHVF^2aX84v
zU>zHQoopD^vLSeq4Z<i(!LzI%Hn0Rd#d=^3>xReK5g1`@FvTorvN(*hMyRnEyv*ug
zcZAj8b&Q2!GYi2k=X=xK^66O|Td#xu8BlG5wyPj;5hTuo&;*!F1D!|h83kb;cZ}x@
z@|af!K<oq<;CbtL+;co_6A#<h3EDfrnO4xz0>&+Ht;ze)JZh1&r>8#|q{aI-{aN|P
z|C^guiT$K9U#iTLfL)+@(Jat1;fQ95S|Tw^@-8_rUP%<iA~828Z`nbe`T_pc7JnKg
znv?k1r2L$hae<uFz-|E59ds0^&qtD!w-qH`FwsCWd`%J6f^16WhRlb`6g^25H6@F!
zimjQi75W1smV}W!XIH{p8B4K4L%S~?7+V>H#BG?w(%(BQo;uA3iafSWEui9*qe;MP
zKEKJQ?>GPVdrFmMS>I9i1)U1}PT2ZV+AFI;V=b#}WmU!g`-88p`BiJaw&@3ozX0ZP
B&;kGe

delta 900
zcmZ|LOH30%7zgm(*+(BN-KAJ4)Y9c;L0Vo~KoKk;iczFKB8UetP=i2Xy_tBRgQlKL
zYWCp8WVuKaPncEf!2@@V?3okBm~he1cpw3z{-=8IpojhK&NuUY^UtQ!t?6`Yw%Qxm
z<~Z&Ro^yC6Ij;Qf<47k7Y`>VcoW#6p_*@OdoV0pf?|8+$DdP~wEr-pd@l>uVmCgA-
z72aI1dP)SIm^X|*B}>ff#)fj3m_ch_@uGUgP(2tlVZ=O-T;{B!G8*L{v={|XKwPdc
z=Z!Cph;hxM8coh2Yfio8aLvpmXBLvP`fY2oVuR;X)^q<`X=#Lx;QktV26oY5*g^+k
zBkhMi+6#}-9(aIu!vWd_D`_V@PTOD=jld(c1(wrh*hvpTFRh2?sSY(7gh3jBF6xKP
z)CU{9v>dN6Era#c0|$-Wnu(?OI6e<v1}83ok_4!|0NiIm+iBn#0+BdSSk&P@P{!gm
zv7DtWW`7L$kAhK_w}Qouv9wVZ_EZ>z8bNCvsH+7hb#Sr9`Vi{V`EE;ze^mJn>+9Gj
z`5*spV$8v(?(a?I_ojGvA}4A@%Zcl}mKRqXP--VX)tqQMQPtU2oM3B<XItswRzg5E
zL9}Ng`>+{nBFM6X+2V}2Se(JLEjMeISo;pyS6>nlYh7ULtiVpSvjOd_ni9XOuXhAC
zD<xn(O?d5<gi&a4v4$<&pBLBBoRc)nm9*kLYivTAbtIf@YX{jS8)>AK-+@IP!vqxM
zwD_YfFKWdJadb$w_<r?&KPkVrBq>{Rfl~-qFv|4L`ES#*x1{=>=;y)%(b~)?^${BD
z2+|N8r{j0HP(HLMZwgO#Hw5*eoRV{L%8`%@<nR7cl`JMRwj*OZGq!8hcCY;c%`o24

diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..174347a
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,20 @@
+version: '3.8'
+
+services:
+  library-manager:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - GOOGLE_BOOKS_API_KEY=${GOOGLE_BOOKS_API_KEY}
+      - ADMIN_EMAIL=${ADMIN_EMAIL}
+      - EMAIL_PASSWORD=${EMAIL_PASSWORD}
+      - DOMAIN=${DOMAIN}
+    volumes:
+      - .:/usr/src/app
+      - ./data:/usr/src/app/data
+
+
diff --git a/index.js b/index.js
index df0a813..3bad1e9 100644
--- a/index.js
+++ b/index.js
@@ -7,6 +7,7 @@ const sqlite3 = require('sqlite3').verbose();
 const bodyParser = require('body-parser');
 const nodemailer = require('nodemailer'); // Add nodemailer for sending emails
 const rateLimit = require('express-rate-limit'); // Ensure this line is present
+const basicAuth = require('express-basic-auth'); // Add express-basic-auth
 
 const library = require('./library');
 const {
@@ -38,6 +39,21 @@ app.use(express.json()); // Use built-in body-parser for JSON
 // Serve static files from the 'public' directory
 app.use(express.static(path.join(__dirname, 'public')));
 
+// Basic Auth middleware
+const authMiddleware = basicAuth({
+    users: { 'admin': process.env.ADMIN_PASSWORD }, // Use environment variable for password
+    challenge: true,
+    unauthorizedResponse: (req) => 'Unauthorized'
+});
+
+// Apply auth middleware to all non-GET requests
+app.use((req, res, next) => {
+    if (req.method !== 'GET') {
+        return authMiddleware(req, res, next);
+    }
+    next();
+});
+
 app.get('/book/:isbn', async (req, res) => {
     const { isbn } = req.params;
     console.log(`Fetching book data for ISBN: ${isbn}`);
diff --git a/libraryManager.py b/libraryManager.py
index 918e9ee..205dc0d 100644
--- a/libraryManager.py
+++ b/libraryManager.py
@@ -3,10 +3,15 @@ from rich.console import Console
 from rich.prompt import Prompt
 from rich.table import Table
 from fuzzywuzzy import process
+from requests.auth import HTTPBasicAuth
 
 API_BASE_URL = "https://localhost:3000"  # Replace with your actual API base URL
 console = Console()
 
+# Use environment variables or a secure method to store credentials
+USERNAME = 'admin'
+PASSWORD = 'library@123'  # Replace with your actual password
+
 def list_books():
     response = requests.get(f"{API_BASE_URL}/api/books-with-images", verify=False)
     if response.status_code == 200:
@@ -30,7 +35,12 @@ def add_book():
         "title": title,
         "authors": authors
     }
-    response = requests.post(f"{API_BASE_URL}/store-book", json=data, verify=False)
+    response = requests.post(
+        f"{API_BASE_URL}/store-book",
+        json=data,
+        verify=False,
+        auth=HTTPBasicAuth(USERNAME, PASSWORD)
+    )
     if response.status_code == 200:
         console.print("Book added successfully.", style="bold green")
     else:
@@ -38,7 +48,11 @@ def add_book():
 
 def remove_book():
     isbn = Prompt.ask("Enter ISBN of the book to remove")
-    response = requests.delete(f"{API_BASE_URL}/book/{isbn}", verify=False)
+    response = requests.delete(
+        f"{API_BASE_URL}/book/{isbn}",
+        verify=False,
+        auth=HTTPBasicAuth(USERNAME, PASSWORD)
+    )
     if response.status_code == 200:
         console.print("Book removed successfully.", style="bold green")
     else:
@@ -48,7 +62,12 @@ def change_book_status():
     isbn = Prompt.ask("Enter ISBN of the book to change status")
     status = Prompt.ask("Enter new status (e.g., Available, Checked Out)")
     data = {"status": status}
-    response = requests.put(f"{API_BASE_URL}/book/{isbn}", json=data, verify=False)
+    response = requests.put(
+        f"{API_BASE_URL}/book/{isbn}",
+        json=data,
+        verify=False,
+        auth=HTTPBasicAuth(USERNAME, PASSWORD)
+    )
     if response.status_code == 200:
         console.print("Book status updated successfully.", style="bold green")
     else:
diff --git a/package-lock.json b/package-lock.json
index 6df61fa..29885ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "axios": "^1.7.5",
         "dotenv": "^16.4.5",
         "express": "^4.19.2",
+        "express-basic-auth": "^1.2.1",
         "express-rate-limit": "^7.4.1",
         "nodemailer": "^6.9.16",
         "sequelize": "^6.37.3",
@@ -275,6 +276,24 @@
       ],
       "license": "MIT"
     },
+    "node_modules/basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/basic-auth/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -851,6 +870,15 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/express-basic-auth": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/express-basic-auth/-/express-basic-auth-1.2.1.tgz",
+      "integrity": "sha512-L6YQ1wQ/mNjVLAmK3AG1RK6VkokA1BIY6wmiH304Xtt/cLTps40EusZsU1Uop+v9lTDPxdtzbFmdXfFO3KEnwA==",
+      "license": "MIT",
+      "dependencies": {
+        "basic-auth": "^2.0.1"
+      }
+    },
     "node_modules/express-rate-limit": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.4.1.tgz",
diff --git a/package.json b/package.json
index 32b96c6..be4833d 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "axios": "^1.7.5",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
+    "express-basic-auth": "^1.2.1",
     "express-rate-limit": "^7.4.1",
     "nodemailer": "^6.9.16",
     "sequelize": "^6.37.3",
diff --git a/public/index.html b/public/index.html
index 42397bb..0e7776b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,34 +3,145 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ISBN Scanner and Title Lookup</title>
+    <title>Ramsey Library</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>Scan a Book ISBN or Search by Title</h1>
-    <div>
-        <label for="camera-select">Select Camera:</label>
-        <select id="camera-select"></select>
-        <!-- Confirm mode toggle -->
-        <input type="checkbox" id="confirm-mode">
-        <label for="confirm-mode">Confirm mode</label>s
-    </div>
-    <div id="interactive" class="viewport"></div>
-    <div>
-        <h2>Or search for a book by title</h2>
-        <input type="text" id="title-input" placeholder="Enter book title">
-        <button id="search-title">Search by Title</button>
-    </div>
-    <div id="book-info"></div>
-    <div id="prompt">
-        <p id="prompt-message"></p>
-        <p id="book-title"></p>
-        <p id="book-author"></p>
-        <p id="book-desc"></p>
-        <button id="confirm">Add to Database</button>
-        <button id="edit-title">No, I'll add a title</button>
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
-    <script src="script.js"></script>
+    <h1>Ramsey Library</h1>
+    <input type="text" id="search-bar" placeholder="Search by title, author, publisher, etc.">
+
+    <table id="book-table">
+        <thead>
+            <tr>
+                <th onclick="sortTable(0)">Title</th>
+                <th onclick="sortTable(1)">Authors</th>
+                <th onclick="sortTable(2)">Publisher</th>
+                <th onclick="sortTable(3)">Published Date</th>
+                <th onclick="sortTable(4)">ISBN</th>
+                <th onclick="sortTable(5)">Status</th>
+                <th>Checkout</th>
+            </tr>
+        </thead>
+        <tbody id="book-table-body">
+            <!-- Book rows will be inserted here -->
+        </tbody>
+    </table>
+
+    <script>
+        // Fetch all books when the page loads
+        window.onload = fetchBooks('');
+
+        document.getElementById('search-bar').addEventListener('input', function() {
+            fetchBooks(this.value);
+        });
+
+        function fetchBooks(query = '') {
+            let url = '/search-title';
+            if (query) {
+                url += `?title=${encodeURIComponent(query)}&internalOnly=true`;
+            }
+            fetch(url)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.results) {
+                        displayBooks(data.results);
+                    } else {
+                        document.getElementById('book-table-body').innerHTML = '<tr><td colspan="5">No books found</td></tr>';
+                    }
+                })
+                .catch(error => console.error('Error fetching books:', error));
+        }
+
+        function displayBooks(books) {
+            console.debug('Books:', books);
+            const tbody = document.getElementById('book-table-body');
+            tbody.innerHTML = '';
+
+            books.forEach(book => {
+                const row = document.createElement('tr');
+                const isDisabled = book.status === 'Checked Out' ? 'disabled' : '';
+                row.innerHTML = `
+                    <td><a href="/book/${book.isbn}" target="_blank">${book.title || ''}</a></td>
+                    <td>${book.authors ? book.authors : ''}</td>
+                    <td>${book.publishers || ''}</td>
+                    <td>${book.publishedDate || ''}</td>
+                    <td>${book.isbn || ''}</td>
+                    <td>${book.status || ''}</td>
+                    <td><button id="checkout-btn-${book.isbn}" onclick="requestCheckout('${book.isbn}')" ${isDisabled}>Checkout</button></td>
+                `;
+                tbody.appendChild(row);
+            });
+        }
+
+// Utility function to get a cookie by name
+function getCookie(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+}
+
+// Utility function to set a cookie
+function setCookie(name, value, days) {
+    const date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    const expires = `expires=${date.toUTCString()}`;
+    document.cookie = `${name}=${value}; ${expires}; path=/`;
+}
+
+// Client-side function to request checkout
+function requestCheckout(isbn) {
+    let email = getCookie('lastEmail') || prompt('Please enter your email:');
+    let name = getCookie('lastName') || prompt('Please enter your name:');
+    
+    if (!email || !name) {
+        alert('Email and name are required to proceed with checkout.');
+        return;
+    }
+
+    // Store the email and name in cookies for future use
+    setCookie('lastEmail', email, 7); // Store for 7 days
+    setCookie('lastName', name, 7); // Store for 7 days
+
+    fetch(`/api/checkout/${isbn}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ email, name })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            alert('Checkout request sent successfully.');
+        } else {
+            alert(data.error || 'Failed to send checkout request.');
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('An error occurred while sending the checkout request.');
+    });
+}
+        
+
+        function sortTable(columnIndex) {
+            const table = document.getElementById('book-table');
+            const rows = Array.from(table.rows).slice(1);
+            const isAscending = table.getAttribute('data-sort-order') === 'asc';
+            const direction = isAscending ? 1 : -1;
+
+            rows.sort((a, b) => {
+                const aText = a.cells[columnIndex].innerText.toLowerCase();
+                const bText = b.cells[columnIndex].innerText.toLowerCase();
+
+                if (aText < bText) return -1 * direction;
+                if (aText > bText) return 1 * direction;
+                return 0;
+            });
+
+            rows.forEach(row => table.tBodies[0].appendChild(row));
+            table.setAttribute('data-sort-order', isAscending ? 'desc' : 'asc');
+        }
+    </script>
 </body>
 </html>
diff --git a/public/library.html b/public/library.html
deleted file mode 100644
index 0e7776b..0000000
--- a/public/library.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ramsey Library</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <h1>Ramsey Library</h1>
-    <input type="text" id="search-bar" placeholder="Search by title, author, publisher, etc.">
-
-    <table id="book-table">
-        <thead>
-            <tr>
-                <th onclick="sortTable(0)">Title</th>
-                <th onclick="sortTable(1)">Authors</th>
-                <th onclick="sortTable(2)">Publisher</th>
-                <th onclick="sortTable(3)">Published Date</th>
-                <th onclick="sortTable(4)">ISBN</th>
-                <th onclick="sortTable(5)">Status</th>
-                <th>Checkout</th>
-            </tr>
-        </thead>
-        <tbody id="book-table-body">
-            <!-- Book rows will be inserted here -->
-        </tbody>
-    </table>
-
-    <script>
-        // Fetch all books when the page loads
-        window.onload = fetchBooks('');
-
-        document.getElementById('search-bar').addEventListener('input', function() {
-            fetchBooks(this.value);
-        });
-
-        function fetchBooks(query = '') {
-            let url = '/search-title';
-            if (query) {
-                url += `?title=${encodeURIComponent(query)}&internalOnly=true`;
-            }
-            fetch(url)
-                .then(response => response.json())
-                .then(data => {
-                    if (data.results) {
-                        displayBooks(data.results);
-                    } else {
-                        document.getElementById('book-table-body').innerHTML = '<tr><td colspan="5">No books found</td></tr>';
-                    }
-                })
-                .catch(error => console.error('Error fetching books:', error));
-        }
-
-        function displayBooks(books) {
-            console.debug('Books:', books);
-            const tbody = document.getElementById('book-table-body');
-            tbody.innerHTML = '';
-
-            books.forEach(book => {
-                const row = document.createElement('tr');
-                const isDisabled = book.status === 'Checked Out' ? 'disabled' : '';
-                row.innerHTML = `
-                    <td><a href="/book/${book.isbn}" target="_blank">${book.title || ''}</a></td>
-                    <td>${book.authors ? book.authors : ''}</td>
-                    <td>${book.publishers || ''}</td>
-                    <td>${book.publishedDate || ''}</td>
-                    <td>${book.isbn || ''}</td>
-                    <td>${book.status || ''}</td>
-                    <td><button id="checkout-btn-${book.isbn}" onclick="requestCheckout('${book.isbn}')" ${isDisabled}>Checkout</button></td>
-                `;
-                tbody.appendChild(row);
-            });
-        }
-
-// Utility function to get a cookie by name
-function getCookie(name) {
-    const value = `; ${document.cookie}`;
-    const parts = value.split(`; ${name}=`);
-    if (parts.length === 2) return parts.pop().split(';').shift();
-}
-
-// Utility function to set a cookie
-function setCookie(name, value, days) {
-    const date = new Date();
-    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-    const expires = `expires=${date.toUTCString()}`;
-    document.cookie = `${name}=${value}; ${expires}; path=/`;
-}
-
-// Client-side function to request checkout
-function requestCheckout(isbn) {
-    let email = getCookie('lastEmail') || prompt('Please enter your email:');
-    let name = getCookie('lastName') || prompt('Please enter your name:');
-    
-    if (!email || !name) {
-        alert('Email and name are required to proceed with checkout.');
-        return;
-    }
-
-    // Store the email and name in cookies for future use
-    setCookie('lastEmail', email, 7); // Store for 7 days
-    setCookie('lastName', name, 7); // Store for 7 days
-
-    fetch(`/api/checkout/${isbn}`, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ email, name })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            alert('Checkout request sent successfully.');
-        } else {
-            alert(data.error || 'Failed to send checkout request.');
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        alert('An error occurred while sending the checkout request.');
-    });
-}
-        
-
-        function sortTable(columnIndex) {
-            const table = document.getElementById('book-table');
-            const rows = Array.from(table.rows).slice(1);
-            const isAscending = table.getAttribute('data-sort-order') === 'asc';
-            const direction = isAscending ? 1 : -1;
-
-            rows.sort((a, b) => {
-                const aText = a.cells[columnIndex].innerText.toLowerCase();
-                const bText = b.cells[columnIndex].innerText.toLowerCase();
-
-                if (aText < bText) return -1 * direction;
-                if (aText > bText) return 1 * direction;
-                return 0;
-            });
-
-            rows.forEach(row => table.tBodies[0].appendChild(row));
-            table.setAttribute('data-sort-order', isAscending ? 'desc' : 'asc');
-        }
-    </script>
-</body>
-</html>
diff --git a/public/scanner.html b/public/scanner.html
new file mode 100644
index 0000000..42397bb
--- /dev/null
+++ b/public/scanner.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ISBN Scanner and Title Lookup</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Scan a Book ISBN or Search by Title</h1>
+    <div>
+        <label for="camera-select">Select Camera:</label>
+        <select id="camera-select"></select>
+        <!-- Confirm mode toggle -->
+        <input type="checkbox" id="confirm-mode">
+        <label for="confirm-mode">Confirm mode</label>s
+    </div>
+    <div id="interactive" class="viewport"></div>
+    <div>
+        <h2>Or search for a book by title</h2>
+        <input type="text" id="title-input" placeholder="Enter book title">
+        <button id="search-title">Search by Title</button>
+    </div>
+    <div id="book-info"></div>
+    <div id="prompt">
+        <p id="prompt-message"></p>
+        <p id="book-title"></p>
+        <p id="book-author"></p>
+        <p id="book-desc"></p>
+        <button id="confirm">Add to Database</button>
+        <button id="edit-title">No, I'll add a title</button>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>