Fallout-Glowing-Apple-Player-Signup

☢️ ROBCO Industries Expedition Registration Terminal

"Welcome to the Rotten Apple. Ad Victoriam."

This is an immersive, single-page HTML application designed to simulate a Fallout-style computer terminal. It serves as a registration and psychological screening tool for players joining a tabletop RPG campaign (specifically Fallout: The Roleplaying Game by Modiphius, or similar Fallout-themed games).

Instead of filling out a boring spreadsheet, players interact with a "living" terminal that types out questions, plays retro sound effects, and immerses them in the lore before the game even begins.

🖥️ Features

• Authentic CRT Aesthetics:
  • Curved screen distortion using CSS 3D transforms.
  • Animated scanlines and screen flicker.
  • Phosphor green glow and text shadows.
  • Customizable Bezel overlay (with transparency blending).
• Immersive Audio:
  • Integrated sound effects for startup, hard drive spinning, keyboard clacking, and UI interaction.
  • Audio is embedded directly into the code via Base64 (no external asset files required).
• Interactive "Typing" Engine:
  • Text appears character-by-character to simulate an old monochrome monitor.
  • Smart Scrolling: The screen automatically scrolls only when necessary, keeping the active text in view without jarring jumps.
• Dual-Submission System:
  1. Google Forms Integration: Answers are silently POSTed to a Google Form in the background.
  2. Dossier Generation: Generates a downloadable .txt file formatted as an official Brotherhood of Steel record as a backup.
• Keyboard Support: Full keyboard navigation for input fields and multiple-choice questions (Press 1-5 or Enter).

🚀 How to Use (For the GM/Host)

1. Installation

This application is a single HTML file. There is no server to set up, no node.js, and no database required.

1. Download the index.html file.
2. Open it in any modern web browser (Chrome, Firefox, Edge).

2. Customizing the Questions

Open index.html in a text editor (Notepad++, VS Code, etc.). Scroll down to the const steps = [...] section. You can modify the prompt, body, and options for every question to fit your campaign's lore.

3. Connecting Your Google Form

To receive the answers in your own Google Drive:

1. Create a Google Form with questions matching the terminal.
2. Get the pre-filled link to find the entry IDs (e.g., entry.123456789).
3. In index.html, look for the steps array and update the entry fields to match your specific Google Form IDs.
4. Update the <form action="..."> URL at the bottom of the HTML to point to your form's formResponse URL.

4. Adding Assets (Images & Audio)

To keep this as a single file, all assets are converted to Base64 strings.

1. Find the section marked /* --- PASTE YOUR BASE64 CODES HERE --- */ in the script.
2. Convert your files using a site like base64-image.de or base64.guru.
3. Paste the long string inside the quotes for variables like bezelBase64, startupSoundBase64, etc.

🎮 How to Use (For the Player)

1. Initialize: Click the screen once to bypass browser audio restrictions and boot the system.
2. Input Data: Type your answers. Press ENTER to confirm.
3. Psych Eval: For multiple-choice questions, click the option or press the corresponding number key (1-5) or letter (A-E).
4. Transmission: Review your data and click TRANSMIT.
5. Ad Victoriam: Wait for the encryption sequence. Once complete, you will see a confirmation screen.
6. Backup: Download the IRON_HORIZON_DOSSIER.txt file and email it to the GM (instructions provided on-screen).

🛠️ Technical Details

The "Smart Scroll" Logic

One common issue with typing animations is the screen jumping wildly. This terminal uses a custom smartScroll() function:

• It calculates the bounding box of the active input element.
• It compares this to the viewport height of the terminal.
• It only scrolls if the input element is physically pushing past the bottom bezel.

The Bezel Overlay

The bezel image sits on top of the entire app (z-index: 50) using pointer-events: none so you can click "through" it. It utilizes the CSS property mix-blend-mode: multiply. This allows you to use a bezel image with a white center; the code automatically turns the white transparent while keeping the black frame solid.

Dossier Generation

The application constructs a Markdown-formatted string in JavaScript based on user inputs. It creates a Blob object from this string and generates a temporary <a> tag to trigger a client-side download of the .txt file.

📝 License

This project is a fan-made creation inspired by the Fallout universe.

• Fallout, Vault Boy, and Brotherhood of Steel are trademarks of Bethesda Softworks LLC.
• This code is provided for free, educational, and personal RPG use.

---

"Steel be with you."