Main User Interface

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• README.md

The qib13 user interface is a single-page web application contained entirely within index.html. It provides a comprehensive and interactive front-end for the reproducible multi-deviation seed recovery system. The UI allows users to generate encoding systems, transform a 13-character generator code into a 55-character seed, recover the code from a seed, and perform batch testing to ensure system integrity.

The interface is designed to be run offline for maximum security. It guides the user through the core workflows of the qib13 tool, from initial system setup using a master seed to the encoding and recovery of individual codes. All cryptographic and encoding logic is implemented in JavaScript within the same HTML file.

Sources: README.md:7-12, index.html

UI Layout and Structure

The application's UI is built with a tabbed navigation system, allowing users to switch between the four main functionalities. The entire layout is defined in index.html and styled with an internal CSS stylesheet.

Sources: index.html:5-10, index.html:68-73

Tab Navigation

The main view is organized into four tabs:

Tab Name	Functionality
Generate Systems	Creates the set of encoding systems from a master seed.
Generate Seed	Encodes a 13-letter generator code into a 55-letter seed.
Recover Code	Recovers a generator code from a 55-letter seed.
Batch Test	Runs a series of automated tests to verify the encoding/recovery process.

Sources: index.html:70-73

The switchTab() JavaScript function handles the logic for displaying the content of the selected tab.

// index.html:1003-1015
function switchTab(tabName, tabElement) {
    const tabContents = document.querySelectorAll('.tab-content');
    tabContents.forEach(content => {
        content.classList.remove('active');
    });
    
    const tabs = document.querySelectorAll('.tab');
    tabs.forEach(tab => {
        tab.classList.remove('active');
    });
    
    document.getElementById(tabName + '-tab').classList.add('active');
    tabElement.classList.add('active');
}

Styling and User Feedback

The UI uses a simple, clean stylesheet defined in the <style> block. It provides immediate visual feedback to the user through specific CSS classes:

• .success: Green text for successful operations.
• .error: Red text to indicate errors.
• .warning: Orange text for important notes.
• .info: Blue text for informational messages.

Dynamic elements like progress bars (.progress-bar) and attempt logs (.attempt-log) provide detailed feedback during potentially long-running operations like system generation or sequential recovery.

Sources: index.html:19-24, index.html:48-52

Core Components and Functionality

Each tab in the UI corresponds to a major feature of the qib13 system.

Generate Systems Tab

This is the first and most critical step. Here, the user generates the "Original" and "Deviation" encoding systems that are used for all subsequent operations.

UI Elements:

• Master Seed Input: A text field (#masterSeed) for the user to enter their unique master seed. If left blank, a default seed is used.
• Number of Deviation Systems: A number input (#numSystems) to specify how many deviation systems to generate in addition to the original one.
• Buttons:
  • Generate Systems: Calls generateSystems() to create the systems based on the inputs.
  • Use Default Systems: Calls useDefaultSystems() to load a predefined set of 1 original and 10 deviation systems.
• Status Display: An area (#systemStatus) to confirm that systems have been generated and display the master seed used.

Sources: index.html:77-87, index.html:730-758, index.html:789-815

The following diagram illustrates the system generation flow.

This diagram shows the process initiated by the user to generate the encoding systems required for other operations.
Sources: index.html:730-787

Generate Seed Tab

This tab allows the user to encode a 13-letter generator code into a 55-letter seed using one of the generated systems.

UI Elements:

• Generator Code Input: A text field (#generatorCodeInput) for the 13-letter code.
• Mode Selector: Radio buttons to select which system to use for encoding:
  • Original Mode (System 1)
  • Deviation Mode (System 2)
  • Random System
  • Specific System (reveals an input to specify the system index).
• Button: Generate 55-Letter Seed calls the generateSeed() function.
• Result Display: An area (#generateResult) to show the generated seed, the system used, and buttons to copy the data.

Sources: index.html:92-110, index.html:1017-1067

The sequence diagram below shows the interaction for generating a seed.

This diagram illustrates the process of a user encoding a generator code into a seed.
Sources: index.html:1017-1067

Recover Code Tab

This tab provides the functionality to reverse the process: recovering the original 13-letter generator code from a 55-letter seed.

UI Elements:

• Seed Input: A text field (#seedInput) for the 55-letter seed.
• Mode Selector: Radio buttons to select the recovery strategy:
  • Sequential Recovery: Tries all available systems in order until one succeeds.
  • Try Original Only: Attempts recovery using only System 1.
  • Try Specific System: Attempts recovery using a user-specified system index.
• Button: Recover Generator Code calls the recoverGeneratorCode() function.
• Result Display: An area (#recoverResult) to show the recovered code, the successful system, and a log of attempts.

Sources: index.html:115-133, index.html:1069-1149

The flow for the most common use case, sequential recovery, is shown below.

This diagram shows how the sequential recovery mode iterates through all generated systems to find the correct one.
Sources: index.html:1082-1116

Batch Test Tab

This tab provides a utility to run an automated batch test. It creates several random generator codes, encodes them using random systems, and then attempts sequential recovery to verify that the entire process is working correctly.

UI Elements:

• Buttons:
  • Run Batch Test: Calls runBatchTest() to start the test suite.
  • Clear Results: Calls clearBatchResults() to clear the output area.
• Result Display: An area (#batchResult) that shows a summary of the test run (success rate, total attempts) and a detailed log for each test case.

Sources: index.html:138-145, index.html:1151-1216

Conclusion

The main user interface of qib13 is a powerful, self-contained tool that exposes all of the project's functionality in a clear, tab-based layout. By bundling the HTML, CSS, and all application logic into a single index.html file, it achieves maximum portability and supports the project's goal of secure, offline use. The UI provides robust feedback mechanisms, including status messages, progress bars, and detailed logs, ensuring the user is always informed of the application's state.

Sources: README.md:4, index.html