christianandClaude Opus 5.5
e7e527197f
A new tab (globe, after Maps) shows one web page full-bleed in the content area — no address bar, bookmarks or scrollbars — built for It Is Written but usable with any page. It loads at startup and keeps running in the background. Stage (browser-tab.js, browser-guest-preload.cjs): - An Electron <webview> per Browser tab, in its own sandboxed process and persistent session. The pages live in one persistent layer inside .tab-content: every tab switch rebuilds .tab-content and moving a webview reloads it, so app.js now clears around that layer (clearTabContentKeepingBrowser). - Tapping a text field brings up the Prayer tab's keyboard (createPrayerKeyboard with a sink) and types into the page with trusted input; Enter submits; the keyboard puts itself away when the page moves focus on (e.g. after a search). The OS touch keyboard is suppressed with inputmode="none" while a field is focused. - Tapping a scripture reference opens it in a new Bible tab, in the translation printed beside it when that one is switched on. References are found with the app's own scanner: scripture-scan.js gains scanAll() (every match with its offsets), translationAfter() and isTranslation(); scanText/parseSlide are unchanged. - Input inside a webview never reaches the app, so the page reports activity (idle splash) and five-finger touches (blank the screen) itself. - main.cjs: webviewTag on; every webview is forced sandboxed, context-isolated, no Node, http(s) only, with the guest preload. No new windows (opened in place), no permission prompts, no downloads, no pinch-zoom, no alert/confirm/prompt boxes, and "Leave site?" can never block Reload or Start page. The session reports plain Chrome. - server.js CSP: frame-src allows http(s) (a webview is a frame to CSP); style-src and font-src allow https (the follower's srcdoc copy inherits this policy). Everywhere a tab kind is listed: - app.js: create at startup and on Reset, icon, visibility defaults, + menu, fixed mode, no ink layer, tool handling, OSC kind + information line (the page's search term), phone remote scroll / tap / page buttons, OSC show / reload / home actions, live setting changes, translation for tapped references. - quick-dock, tool-wheel, presentation-tools: no drawing tools on the tab. - Phone remote: tab label, one finger scrolls the page (taps still tap), hint text; mirror-stream.js reports the page's scroll for the phone's local preview. - Follower screen: the stage publishes a script-free copy of the page's DOM (only while a follower is linked), its scroll and form fields; the follower shows it in sandboxed, double-buffered frames; the relay keeps the page for late joiners. - OSC: /bibleapp/browser, /bibleapp/browser/reload, /bibleapp/browser/home; tab_kind/browser feedback. Admin and phone allow-lists updated. - Settings: Tab Visibility, a Browser Tab section (start page, page size, scripture taps, return to start page), Service Profiles carry its settings, OSC references. - Admin console: show the tab, reload / start page, start page and page size. - BROWSER_TAB.md documents it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
//install this https://nodejs.org/en //then //start server
Bible App
A minimalist Bible reading app with annotation features and Google Drive integration.
🎯 Features
- 📖 Multiple Bible translations (KJV, NIV, ESV, NKJV)
- ✏️ Drawing and highlighting annotations
- 📱 Touch-friendly interface optimized for touchscreen TVs
- ☁️ Google Drive media integration
- 📑 Multi-tab support
- 🔄 Undo/Redo functionality
- 💾 Local annotation persistence
🚀 Live Demo
Visit: https://[your-username].github.io/bible-app
🛠️ Local Development
- Clone this repository
- Install Node.js from https://nodejs.org/en
- Run:
node server.js - Open:
http://localhost:8080
☁️ Google Drive Setup
To enable Google Drive integration:
- Create a Google Cloud Console project
- Enable Google Drive API
- Create OAuth 2.0 credentials
- Add your GitHub Pages domain to authorized JavaScript origins
- Update the API key and Client ID in
app.js
📖 Usage
- Create new tabs with the "+" button
- Switch between Bible and Media modes
- Use the toolbar to draw, highlight, and annotate
- Connect Google Drive folders for media content
- All annotations are saved locally in your browser
🎨 Tools
- Select Tool: Navigate and select text
- Pen Tool: Draw with customizable colors and sizes
- Highlighter: Highlight text with transparency
- Eraser: Remove annotations
- Undo/Redo: Full history management
- Clear: Remove all annotations
🖥️ TV Setup
- Open your TV's web browser
- Navigate to the live demo URL
- The app will load automatically
- Use touch gestures to interact
🤝 Contributing
Feel free to open issues and submit pull requests!
📄 License
MIT License
Bible App - Deployment Package
📦 What's Included
This folder contains all the essential files needed to deploy your Bible app:
index.html- Main Bible applicationstyles.css- Styling and responsive designapp.js- Application logic and functionalitybible-data.js- Bible text data (KJV, NIV, ESV, NKJV)package.json- Project configurationdeploy-to-netlify.html- Deployment guideREADME.md- This file
🚀 Quick Deployment
Option 1: Netlify (Recommended)
- Open
deploy-to-netlify.htmlin your browser - Follow the step-by-step instructions
- Drag this entire folder to Netlify's drop zone
- Get your free URL in seconds
Option 2: GitHub Pages
- Create a GitHub repository
- Upload all files in this folder
- Enable GitHub Pages in repository settings
- Access via
https://username.github.io/repository-name
Option 3: Any Web Server
- Upload all files to your web server
- Access via your domain name
- Works on any hosting service
🎯 Features
- Multiple Bible Translations: KJV, NIV, ESV, NKJV
- Touch-Optimized: Designed for touchscreen TVs
- Annotation Tools: Highlight, underline, circle, erase
- Session Management: Annotations persist during session
- Responsive Design: Works on all screen sizes
- Offline Capable: Bible text stored locally
📱 Access URLs
Once deployed, your Bible app will be available at:
- Netlify:
https://your-app-name.netlify.app - GitHub Pages:
https://username.github.io/repository-name - Custom Domain: Your own domain name
🖥️ TV Setup
- Open your TV's web browser
- Navigate to your deployed URL
- The app will load automatically
- Use touch gestures to interact
🧪 Testing
Before deploying to your TV:
- Test locally by opening
index.htmlin a browser - Verify all features work correctly
- Test on different devices if possible
📞 Support
If you encounter any issues:
- Check that all files are present
- Verify the URL loads on a computer first
- Ensure your TV's browser supports modern web features
🎉 Your Bible app is ready for deployment!
🔤 Greek WordNet Integration
This app includes a minimal client for the Greek WordNet API and exposes it on window.greekWordNet in the browser for quick testing.
Quick start:
- Start the app:
node server.jsthen openhttp://localhost:8080 - Open DevTools (F12) → Console
- Try:
await greekWordNet.lemmatize('reginarum')await greekWordNet.searchLemmas('bula')await greekWordNet.lookupLemma('sicula','n')await greekWordNet.searchSynsets('mythology')
Client location: services/greekWordNet.js
If your network blocks cross-origin calls, ensure the CSP in server.js includes https://greekwordnet.chs.harvard.edu under connect-src (already configured).