Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/arverma/Bihar-Police-Notebook/llms.txt

Use this file to discover all available pages before exploring further.

Bihar Police Notebook is a single website that runs on every device — desktop computers, tablets, and smartphones alike. However, the interface adapts automatically based on screen width. At the canonical breakpoint of max-width: 768 px (phone layout), certain controls are hidden and the scrolling model changes. Wider viewports — including tablets held in landscape — receive the full desktop feature set. Understanding these differences helps you choose the right device for a task and explains why some controls you see on a computer are not visible on a phone.

​
Feature Matrix

CapabilityDesktop / TabletPhone (≤ 768 px)
Letter & Diary templates✅ Yes✅ Yes
Document History✅ Sidebar panel (slight workspace nudge on very wide screens)✅ Overlay drawer
Google Drive backup✅ Yes✅ Yes
Print / Save as PDF✅ Yes✅ Yes
Document name in header✅ Yes✅ Yes
Help (?)✅ Yes✅ Yes
Hindi Typing toggle (A:अ)✅ Visible and functional❌ Hidden
Hinglish transliteration suggestions✅ Active when toggle is ON❌ Off — use OS keyboard or tools
In-app dictation microphone (FAB)✅ Draggable floating button❌ Hidden — use keyboard mic
Page fit-to-width✅ Automatic✅ Automatic + pinch, double-tap, Fit chip
Vertical scroll container.main-content element#editorStage element
The 768 px breakpoint is checked at runtime with window.matchMedia('(max-width: 768px)') inside editor/js/main.js. The breakpoint is re-evaluated on every resize event, so rotating a tablet from portrait to landscape can switch between phone and desktop behaviour without a page reload.

​
Desktop-Only Features Explained

​
Hindi Typing Toggle (Transliteration)

On desktop, the header contains a checkbox toggle labelled A:अ that enables Hinglish-to-Devanagari transliteration. When active, words typed in Roman script (e.g. namaste) are converted to Devanagari (e.g. नमस्ते) and an inline suggestions popup appears near the cursor with alternative conversions. The gate that controls this behaviour lives in editor/js/main.js: 
const mobileInputMq = window.matchMedia('(max-width: 768px)');

/** Hinglish transliteration is desktop/tablet only — mobile uses the OS keyboard. */
function isTransliterationEnabled() {
    return !isHindiMode && !mobileInputMq.matches;
}
When mobileInputMq.matches is true (phone), isTransliterationEnabled() always returns false — suggestions are suppressed regardless of the toggle state. The toggle itself is hidden on phones via editor/css/header-responsive.css. Why hidden on phones? The transliteration suggestion popup requires a stable, accurate cursor-coordinate calculation to position itself near the typed word. On narrow screens this popup UX is unreliable, and the system keyboard already offers Devanagari input and its own word predictions.

​
In-App Dictation Microphone (FAB)

On desktop, a draggable floating action button (FAB) lets you dictate text using the browser’s Web Speech API. Spoken words are inserted at the current cursor position inside the active letter or diary field. The FAB and its supporting UI are initialised in editor/js/dictation-ui.js and hidden on phones via editor/css/overlays-responsive.css. Why hidden on phones? Every modern phone keyboard already includes a built-in microphone key for voice input. Adding a second in-app microphone button would duplicate that functionality and clutter the already-narrow screen. Tap the microphone icon on your OS keyboard to dictate directly into any field.

​
Phone-Only Features Explained

​
Pinch-Zoom, Double-Tap, and the Fit Chip

On phones, A4 pages are wider than the screen. The page scale system (editor/js/page-scale.js, editor/css/page-preview.css) provides three touch-friendly ways to adjust the view:
  • Pinch-zoom — use two fingers to zoom in or out on the page.
  • Double-tap — quickly zoom to a comfortable reading/editing level.
  • Fit chip — a small button that snaps the page back to fit-to-width at any time.
On desktop, fit-to-width is applied automatically and no manual zoom controls are needed.

​
Scroll Container Difference

The scroll container changes based on viewport width to prevent nested scroll traps (where the browser’s scroll wheel moves the wrong element):
LayoutScrolling element
Desktop / tablet.main-content (the outer content wrapper)
Phone (≤ 768 px)#editorStage (the inner editor stage)
This split is governed by editor/css/layout-shell.css and editor/css/page-preview.css. The JavaScript resize handler calls pageScale.refresh() when the breakpoint changes so the scroll model is updated without a reload.
FileResponsibility
editor/css/header-responsive.cssHides the Hindi Typing toggle and other header controls at ≤ 768 px
editor/css/overlays-responsive.cssHides the dictation FAB and its overlay on phones
editor/css/layout-shell.cssDefines the scroll container split between .main-content (desktop) and #editorStage (phone)
editor/css/page-preview.cssControls A4 page scaling, pinch-zoom, and the Fit chip on mobile
editor/js/main.jsisTransliterationEnabled() — runtime gate for transliteration based on mobileInputMq
editor/js/dictation-ui.jsInitialises the dictation FAB; respects the responsive hide on phones
editor/js/page-scale.jsManages page fit-to-width, pinch-zoom, double-tap, and the Fit chip
Additional responsive breakpoints inside header-responsive.css handle intermediate screen widths: the header tightens at 1100 px, 900 px, and 420 px. The History sidebar nudge only activates at ≥ 1025 px. These are cosmetic adjustments that do not affect which features are available.

Build docs developers (and LLMs) love

Get started for freeTalk to us