bitburner-src/index.html

613 lines
26 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bitburner</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/terminal.css" />
<link rel="stylesheet" type="text/css" href="css/menupages.css" />
<link rel="stylesheet" type="text/css" href="css/workinprogress.css" />
<link rel="stylesheet" type="text/css" href="css/popupboxes.css" />
<!-- We'll add in the jQuery library here - direct from
the Google CDN (Content Delivery Network). -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Utils -->
<script src="utils/IPAddress.js"></script>
<script src="utils/JSONReviver.js"></script>
<script src="utils/StringHelperFunctions.js"></script>
<script src="utils/HelperFunctions.js"></script>
<script src="utils/DialogBox.js"></script>
<script src="utils/PurchaseServerBox.js"></script>
<script src="utils/FactionInvitationBox.js"></script>
<script src="utils/PurchaseAugmentationBox.js"></script>
<script src="utils/TravelBox.js"></script>
<!-- Netscript -->
<script src="src/netscript/NetScriptWorker.js"></script>
<script src="src/netscript/InputStream.js"></script>
<script src="src/netscript/Tokenizer.js"></script>
<script src="src/netscript/Parser.js"></script>
<script src="src/netscript/Evaluator.js"></script>
<script src="src/netscript/Environment.js"></script>
<!-- Main game files -->
<script src="src/Constants.js"></script>
<script src="src/SpecialServerIps.js"></script>
<script src="src/Location.js"></script>
<script src="src/Script.js"></script>
<script src="src/Server.js"></script>
<script src="src/Player.js"></script>
<script src="src/Faction.js"></script>
<script src="src/FactionInfo.js"></script>
<script src="src/Company.js"></script>
<script src="src/CompanyJobApplication.js"></script>
<script src="src/Terminal.js"></script>
<script src="src/ServerPurchases.js"></script>
<script src="src/CreateProgram.js"></script>
<script src="src/Augmentations.js"></script>
<script src="src/Perk.js"></script>
<script src="src/HacknetNode.js"></script>
<script src="src/engine.js"></script>
</head>
<body>
<div id="mainmenu-container">
<!-- Main menu -->
<ul class="mainmenu">
<li class="terminal-tab">
<a href="#" id="terminal-menu-link"> Terminal </a>
</li>
<li class="character-tab">
<a href="#" id="character-menu-link"> Character </a>
</li>
<!-- These scripts stuff should be hidden until level 2, but leave them visible for now to test -->
<li class="create-script-tab">
<a href="#" id="create-script-menu-link"> Create Script </a>
</li>
<li class="active-scripts-tab">
<a href="#" id="active-scripts-menu-link"> Active Scripts </a>
</li>
<li class="hacknet-nodes-tab">
<a href="#" id="hacknet-nodes-menu-link"> Hacknet Nodes </a>
</li>
<li class="world-tab">
<a href="#" id="world-menu-link"> World </a>
</li>
<li class="create-program-tab">
<a href="#" id="create-program-menu-link"> Create Program </a>
</li>
<li class="factions-tab">
<a href="#" id="factions-menu-link"> Factions </a>
</li>
<li class="augmentations-tab">
<a href="#" id="augmentations-menu-link"> Augmentations </a>
</li>
<li class="tutorial-tab">
<a href="#" id="tutorial-menu-link"> Tutorial </a>
</li>
<li class="save-game-tab">
<a href="#" id="save-game-link"> Save Game </a>
</li>
<li class="delete-game-tab">
<a href="#" id="delete-game-link"> Delete Game </a>
</li>
</ul>
</div>
<!-- Terminal page -->
<div id="terminal-container">
<table id="terminal">
<tr id="terminal-input">
<td id="terminal-input-td">$ <input type="text" id="terminal-input-text-box" class="terminal-input"/></td>
</tr>
</table>
</div>
<!-- Character Info page -->
<div id="character-container">
<p id="character-info"> </p>
</div>
<!-- Script editor -->
<div id="script-editor-container">
<span>
<p id="script-editor-filename-tag"> Script name: </p>
</span>
<input id="script-editor-filename" type="text" maxlength="30"> </input>
<br>
<br><br>
<textarea id="script-editor-text" autofocus> </textarea>
</div>
<!-- Active scripts info page -->
<div id="active-scripts-container">
<ul class="active-scripts-list" id="active-scripts-list" style="list-style: none;">
</ul>
</div>
<!-- Hacknet Nodes -->
<div id="hacknet-nodes-container">
<h1 id="hacknet-nodes-title"> Hacknet Nodes </h1>
<p id="hacknet-nodes-text">
The Hacknet is a global, decentralized network of machines. It is used by hackers all around
the world to anonymously share computing power and perform distributed cyberattacks without the
fear of being traced.
<br><br>
Here, you can purchase a Hacknet Node, a specialized machine that can connect and contribute its
resources to the Hacknet network. This allows you to take a small percentage of profits
from hacks performed on the network. Essentially, you are renting out your Node's computing power.
<br><br>
Each Hacknet Node you purchase will passively earn you money. Each Hacknet Node can be upgraded
in order to increase its computing power and thereby increase the profit you earn from it.
</p>
<a href="#" id="hacknet-nodes-purchase-button" class="a-link-button"> Purchase Hacknet Node </a>
<p id="hacknet-nodes-money"> </p>
<ul id="hacknet-nodes-list" style="list-style : none;">
</ul>
</div>
<!-- World -->
<div id="world-container" class="world-container">
<ul id="aevum-locations-list">
<li id="aevum-travelagency-li">
<a href="#" id="aevum-travelagency" class="a-link-button"> Travel Agency </a>
</li>
<li id="aevum-summituniversity-li">
<a href="#" id="aevum-summituniversity" class="a-link-button"> Summit University </a>
</li>
<li id="aevum-ecorp-li">
<a href="#" id="aevum-ecorp" class="a-link-button"> ECorp </a>
</li>
<li id="aevum-bachmanandassociates-li">
<a href="#" id="aevum-bachmanandassociates" class="a-link-button"> Bachman & Associates</a>
</li>
<li id="aevum-clarkeincorporated-li">
<a href="#" id="aevum-clarkeincorporated" class="a-link-button"> Clarke Incorporated </a>
</li>
<li id="aevum-fulcrumtechnologies-li">
<a href="#" id="aevum-fulcrumtechnologies" class="a-link-button"> Fulcrum Technologies </a>
</li>
<li id="aevum-aerocorp-li">
<a href="#" id="aevum-aerocorp" class="a-link-button"> AeroCorp </a>
</li>
<li id="aevum-galacticcybersystems-li">
<a href="#" id="aevum-galacticcybersystems" class="a-link-button"> Galactic Cybersystems </a>
</li>
<li id="aevum-watchdogsecurity-li">
<a href="#" id="aevum-watchdogsecurity" class="a-link-button">Watchdog Security </a>
</li>
<li id="aevum-rhoconstruction-li">
<a href="#" id="aevum-rhoconstruction" class="a-link-button">Rho Construction </a>
</li>
<li id="aevum-aevumpolice-li">
<a href="#" id="aevum-aevumpolice" class="a-link-button">Aevum Police</a>
</li>
<li id="aevum-netlinktechnologies-li">
<a href="#" id="aevum-netlinktechnologies" class="a-link-button">NetLink Technologies</a>
</li>
<li id="aevum-crushfitnessgym-li">
<a href="#" id="aevum-crushfitnessgym" class="a-link-button">Crush Fitness Gym </a>
</li>
<li id="aevum-snapfitnessgym-li">
<a href="#" id="aevum-snapfitnessgym" class="a-link-button">Snap Fitness Gym</a>
</li>
</ul>
<ul id="chongqing-locations-list">
<li id="chongqing-travelagency-li">
<a href="#" id="chongqing-travelagency" class="a-link-button"> Travel Agency </a>
</li>
<li id="chonqging-kuaigonginternational-li">
<a href="#" id="chongqing-kuaigonginternational" class="a-link-button">KuaiGong International </a>
</li>
<li id="chongqing-solarisspacesystems-li">
<a href="#" id="chongqing-solarisspacesystems" class="a-link-button">Solaris Space Systems</a>
</li>
</ul>
<ul id="sector12-locations-list">
<li id="sector12-travelagency-li">
<a href="#" id="sector12-travelagency" class="a-link-button">Travel Agency </a>
</li>
<li id="sector12-rothmanuniversity-li">
<a href="#" id="sector12-rothmanuniversity" class="a-link-button"> Rothman University</a>
</li>
<li id="sector12-megacorp-li">
<a href="#" id="sector12-megacorp" class="a-link-button">MegaCorp</a>
</li>
<li id="sector12-bladeindustries-li">
<a href="#" id="sector12-bladeindustries" class="a-link-button"> Blade Industries</a>
</li>
<li id="sector12-foursigma-li">
<a href="#" id="sector12-foursigma" class="a-link-button">Four Sigma</a>
</li>
<li id="sector12-icarusmicrosystems-li">
<a href="#" id="sector12-icarusmicrosystems" class="a-link-button"> Icarus Microsystems</a>
</li>
<li id="sector12-universalenergy-li">
<a href="#" id="sector12-universalenergy" class="a-link-button">Universal Energy </a>
</li>
<li id="sector12-deltaone-li">
<a href="#" id="sector12-deltaone" class="a-link-button">DeltaOne </a>
</li>
<li id="sector12-cia-li">
<a href="#" id="sector12-cia" class="a-link-button">Central Intelligence Agency </a>
</li>
<li id="sector12-nsa-li">
<a href="#" id="sector12-nsa" class="a-link-button">National Security Agency </a>
</li>
<li id="sector12-alphaenterprises-li">
<a href="#" id="sector12-alphaenterprises" class="a-link-button">Alpha Enterprises</a>
</li>
<li id="sector12-carmichaelsecurity-li">
<a href="#" id="sector12-carmichaelsecurity" class="a-link-button"> Carmichael Security</a>
</li>
<li id="sector12-foodnstuff-li">
<a href="#" id="sector12-foodnstuff" class="a-link-button">FoodNStuff</a>
</li>
<li id="sector12-joesguns-li">
<a href="#" id="sector12-joesguns" class="a-link-button"> Joe's Guns</a>
</li>
<li id="sector12-irongym-li">
<a href="#" id="sector12-irongym" class="a-link-button">Iron Gym </a>
</li>
<li id="sector12-powerhousegym-li">
<a href="#" id="sector12-powerhousegym" class="a-link-button">Powerhouse Gym</a>
</li>
</ul>
<ul id="newtokyo-locations-list">
<li id="newtokyo-travelagency-li">
<a href="#" id="newtokyo-travelagency" class="a-link-button"> Travel Agency</a>
</li>
<li id="newtokyo-defcomm-li">
<a href="#" id="newtokyo-defcomm" class="a-link-button"> DefComm</a>
</li>
<li id="newtokyo-vitalife-li">
<a href="#" id="newtokyo-vitalife" class="a-link-button">VitaLife </a>
</li>
<li id="newtokyo-globalpharmaceuticals-li">
<a href="#" id="newtokyo-globalpharmaceuticals" class="a-link-button">Global Pharmaceuticals</a>
</li>
<li id="newtokyo-noodlebar-li">
<a href="#" id="newtokyo-noodlebar" class="a-link-button">Noodle Bar </a>
</li>
</ul>
<ul id="ishima-locations-list">
<li id="ishima-travelagency-li">
<a href="#" id="ishima-travelagency" class="a-link-button">Travel Agency </a>
</li>
<li id="ishima-stormtechnologies-li">
<a href="#" id="ishima-stormtechnologies" class="a-link-button">Storm Technologies</a>
</li>
<li id="ishima-novamedical-li">
<a href="#" id="ishima-novamedical" class="a-link-button">Nova Medical</a>
</li>
<li id="ishima-omegasoftware-li">
<a href="#" id="ishima-omegasoftware" class="a-link-button">Omega Software </a>
</li>
</ul>
<ul id="volhaven-locations-list">
<li id="volhaven-travelagency-li">
<a href="#" id="volhaven-travelagency" class="a-link-button">Travel Agency </a>
</li>
<li id="volhaven-zbinstituteoftechnology-li">
<a href="#" id="volhaven-zbinstituteoftechnology" class="a-link-button">ZB Insitute of Technology</a>
</li>
<li id="volhaven-omnitekincorporated-li">
<a href="#" id="volhaven-omnitekincorporated" class="a-link-button">OmniTek Incorporated </a>
</li>
<li id="volhaven-nwo-li">
<a href="#" id="volhaven-nwo" class="a-link-button">NWO</a>
</li>
<li id="volhaven-helislabs-li">
<a href="#" id="volhaven-helioslabs" class="a-link-button">Helios Labs</a>
</li>
<li id="volhaven-omniacybersystems-li">
<a href="#" id="volhaven-omniacybersystems" class="a-link-button">Omnia Cybersystems</a>
</li>
<li id="volhaven-lexocorp-li">
<a href="#" id="volhaven-lexocorp" class="a-link-button">LexoCorp</a>
</li>
<li id="volhaven-syscoresecurities-li">
<a href="#" id="volhaven-syscoresecurities" class="a-link-button">SysCore Securities</a>
</li>
<li id="volhaven-computek-li">
<a href="#" id="volhaven-computek" class="a-link-button">CompuTek</a>
</li>
<li id="volhaven-milleniumfitnessgym-li">
<a href="#" id="volhaven-milleniumfitnessgym" class="a-link-button">Millenium Fitness Gym</a>
</li>
</ul>
</div>
<!-- Create a program(executable) -->
<div id="create-program-container">
<ul id="create-program-list">
<a class="create-program-a-link-button" id="create-program-porthack" href="#">
PortHack.exe
</a>
<a class="create-program-a-link-button" id="create-program-brutessh" href="#">
BruteSSH.exe
</a>
<a class="create-program-a-link-button" id="create-program-ftpcrack" href="#">
FTPCrack.exe
</a>
<a class="create-program-a-link-button" id="create-program-relaysmtp" href="#">
relaySMTP.exe
</a>
<a class="create-program-a-link-button" id="create-program-httpworm" href="#">
HTTPWorm.exe
</a>
<a class="create-program-a-link-button" id="create-program-sqlinject" href="#">
SQLInject.exe
</a>
</ul>
</div>
<!-- Factions -->
<div id="factions-container">
<h1> Factions </h1>
<p> Lists all factions you have joined </p>
<ul class="factions-list" id="factions-list">
</ul>
</div>
<!-- Single Faction info (when you select a faction from the Factions menu) -->
<div id="faction-container">
<h1 id="faction-name"></h1>
<p id="faction-info"></p>
<p id="faction-reputation"></p>
<p id="work-description-text">
Perform work/carry out assignments for your faction to help further its cause! Each
task takes a certain amount of time to complete, which is dependent on your stats. Completing
a task will earn you exp and increase your reputation with the faction. Note that you cannot
use your terminal or create scripts when you are performing a task!
</p>
<div id="faction-hack-div">
<a href="#" id="faction-hack-button" class="a-link-button">Hacking Contracts</a>
<p id="faction-hack-text">
Complete hacking contracts for your faction! <br>
Your effectiveness, which determines how much reputation you gain for this faction, is based on your hacking skill. <br>
Gain hacking exp.
</p>
<div id="faction-hack-text-div">
</div>
</div>
<div id="faction-fieldwork-div">
<a href="#" id="faction-fieldwork-button" class="a-link-button">Field Work</a>
<div id="faction-fieldwork-text-div">
<p id="faction-fieldwork-text">
Carry out field missions for your faction. <br>
Your effectiveness, which determines how much reputation you gain for this faction, is based on all of your stats. <br>
Gains exp for all stats.
</p>
</div>
</div>
<div id="faction-securitywork-div">
<a href="#" id="faction-securitywork-button" class="a-link-button">Security Work</a>
<div id="faction-securitywork-text-div">
<p id="faction-securitywork-text">
Serve in a security detail for your faction. <br>
Your effectiveness, which determines how much reputation you gain for this faction, is based on your combat stats. <br>
Gains exp for all combat stats.
</p>
</div>
</div>
<p>
As your reputation with this faction rises, you will unlock Augmentations, which you
can purchase to enhance your abilities.
</p>
<a href="#" id="faction-purchase-augmentations" class="a-link-button">Purchase Augmentations</a>
</div>
<div id="faction-augmentations-container">
<a href="#" id="faction-augmentations-back-button" class="a-link-button"> Back </a>
<h1> Faction Augmentations </h1>
<p id="faction-augmentations-page-desc"> Lists all augmentations that are available to purchase from </p>
<ul class="faction-augmentations-list" id="faction-augmentations-list">
</ul>
</div>
<!-- Installed augmentations -->
<div id="augmentations-container">
<h1> Augmentations </h1>
<p> Lists all augmentations you have installed </p>
<ul id="augmentations-list">
</ul>
</div>
<!-- Tutorial content -->
<div id="tutorial-container">
<a href="#" id="tutorial-getting-started-link" class="a-link-button"> Getting Started </a>
<a href="#" id="tutorial-networking-link" class="a-link-button"> Networking </a>
<a href="#" id="tutorial-hacking-link" class="a-link-button"> Hacking </a>
<a href="#" id="tutorial-scripts-link" class="a-link-button"> Scripts </a>
<a href="#" id="tutorial-traveling-link" class="a-link-button"> Traveling </a>
<a href="#" id="tutorial-jobs-link" class="a-link-button"> Jobs </a>
<a href="#" id="tutorial-factions-link" class="a-link-button"> Factions </a>
<a href="#" id="tutorial-augmentations-link" class="a-link-button"> Augmentations </a>
<a href="#" id="tutorial-back-button" class="a-link-button"> Back </a>
<p id="tutorial-text"> </p>
</div>
<!-- Location (visiting a location in World) -->
<div id="location-container">
<a href="#" id="location-return-to-world-button" class="a-link-button"> Return to World </a>
<h1 id="location-name"></h1>
<p id="location-info"> </p>
<p id="location-job-title"> </p>
<p id="location-job-reputation"> </p>
<!-- Jobs/Work at a company -->
<a href="#" id="location-software-job" class="a-link-button"> Apply for Software Job</a>
<a href="#" id="location-it-job" class="a-link-button"> Apply for IT Job </a>
<a href="#" id="location-security-engineer-job" class="a-link-button"> Apply for Security Engineer Job</a>
<a href="#" id="location-network-engineer-job" class="a-link-button"> Apply for Network Engineer Job</a>
<a href="#" id="location-business-job" class="a-link-button"> Apply for Business Job</a>
<a href="#" id="location-security-job" class="a-link-button"> Apply for Security Job</a>
<a href="#" id="location-agent-job" class="a-link-button"> Apply to be an Agent</a>
<a href="#" id="location-employee-job" class="a-link-button"> Apply to be an Employee </a>
<a href="#" id="location-waiter-job" class="a-link-button"> Apply to be a Waiter</a>
<a href="#" id="location-work" class="a-link-button"> Work </a>
<!-- Gym -->
<a href="#" id="location-gym-train-str" class="a-link-button">Train Strength</a>
<a href="#" id="location-gym-train-def" class="a-link-button">Train Defense </a>
<a href="#" id="location-gym-train-dex" class="a-link-button">Train Dexterity</a>
<a href="#" id="location-gym-train-agi" class="a-link-button">Train Agility</a>
<!-- Study/Take classes at a university -->
<a href="#" id="location-study-computer-science" class="a-link-button">Study Computer Science (free)</a>
<a href="#" id="location-data-structures-class" class="a-link-button">Take Data Structures course</a>
<a href="#" id="location-networks-class" class="a-link-button">Take Networks course</a>
<a href="#" id="location-algorithms-class" class="a-link-button">Take Algorithms course</a>
<a href="#" id="location-management-class" class="a-link-button">Take Management course</a>
<a href="#" id="location-leadership-class" class="a-link-button">Take Leadership course</a>
<!-- Purchase servers -->
<a href="#" id="location-purchase-1gb" class="a-link-button"> Purchase 1GB Server - $50,000</a>
<a href="#" id="location-purchase-2gb" class="a-link-button"> Purchase 2GB Server - $100,000</a>
<a href="#" id="location-purchase-4gb" class="a-link-button"> Purchase 4GB Server - $250,000</a>
<a href="#" id="location-purchase-8gb" class="a-link-button"> Purchase 8GB Server - $1,000,000</a>
<a href="#" id="location-purchase-16gb" class="a-link-button"> Purchase 16GB Server - $4,000,000</a>
<a href="#" id="location-purchase-32gb" class="a-link-button"> Purchase 32GB Server - $10,000,000</a>
<a href="#" id="location-purchase-64gb" class="a-link-button"> Purchase 64GB Server - $20,000,000</a>
<a href="#" id="location-purchase-128gb" class="a-link-button"> Purchase 128GB Server - $50,000,000</a>
<a href="#" id="location-purchase-256gb" class="a-link-button"> Purchase 256GB Server - $100,000,000</a>
<a href="#" id="location-purchase-512gb" class="a-link-button"> Purchase 512GB Server - $250,000,000</a>
<a href="#" id="location-purchase-1tb" class="a-link-button"> Purchase 1TB Server - $750,000,000</a>
<a href="#" id="location-purchase-tor" class="a-link-button"> Purchase TOR Router - $2,000,000</a>
<a href="#" id="location-purchase-home-ram" class="a-link-button"> Purchase RAM for Home computer </a>
<!-- Travel agency -->
<p id="location-travel-agency-text">
From here, you can travel to any other city! A ticket costs $1,000,000.
</p>
<a href="#" id="location-travel-to-aevum" class="a-link-button"> Travel to Aevum </a>
<a href="#" id="location-travel-to-chongqing" class="a-link-button"> Travel to Chongqing</a>
<a href="#" id="location-travel-to-sector12" class="a-link-button"> Travel to Sector-12</a>
<a href="#" id="location-travel-to-newtokyo" class="a-link-button"> Travel to New Tokyo</a>
<a href="#" id="location-travel-to-ishima" class="a-link-button"> Travel to Ishima</a>
<a href="#" id="location-travel-to-volhaven" class="a-link-button"> Travel to Volhaven</a>
</div>
<!-- Dialog Box, displays status text only -->
<div id="dialog-box-container">
<div id="dialog-box-content">
<span id="dialog-box-close-button">&times;</span>
<p id="dialog-box-text-1" class="dialog-box-text"> </p>
<br>
<p id="dialog-box-text-2" class="dialog-box-text"> </p>
<br>
<p id="dialog-box-text-3" class="dialog-box-text"> </p>
<br>
<p id="dialog-box-text-4" class="dialog-box-text"> </p>
</div>
</div>
<!-- Purchase Server Pop-up Box -->
<div id="purchase-server-box-container">
<div id="purchase-server-box-content">
<p id="purchase-server-box-text"> </p>
<p id="purchase-server-box-enter-name"> Enter new server hostname: </p>
<input type="text" id="purchase-server-box-input" pattern="[a-zA-Z0-9-_]+ maxlength="30"> </input>
<span id="purchase-server-box-confirm"> Purchase </span>
<span id="purchase-server-box-cancel"> Cancel </span>
</div>
</div>
<!-- Purchase RAM for Home Computer Pop-up Box -->
<div id="purchase-ram-for-home-box-container">
<div id="purchase-ram-for-home-box-content">
<p id="purchase-ram-for-home-box-text"> </p>
<span id="purchase-ram-for-home-box-confirm"> Purchase </span>
<span id="purchase-ram-for-home-box-cancel"> Cancel </span>
</div>
</div>
<!-- Travel Pop-up Box -->
<div id="travel-box-container">
<div id="travel-box-content">
<p id="travel-box-text"> </p>
<span id="travel-box-confirm"> Yes </span>
<span id="travel-box-cancel"> No </span>
</div>
</div>
<!-- Purchase Augmentation Pop-up Box -->
<div id="purchase-augmentation-box-container">
<div id="purchase-augmentation-box-content">
<p id="purchase-augmentation-box-text"> </p>
<p> WARNING: Purchasing an Augmentation resets most of your progress, including: <br>
Stats/Skill levels and Experience <br>
Money <br>
Scripts <br>
Faction/Company reputation <br><br>
Purchasing an Augmentation lets you start over with the perks and benefits granted by all
of the Augmentations you have ever purchased (purchasing an Augmentation does not reset the benefits
of Augmentations you have previously purchased).
<p>
<span id="purchase-augmentation-box-confirm"> Purchase </span>
<span id="purchase-augmentation-box-cancel"> Cancel </span>
</div>
</div>
<!-- Faction Invitation Pop-up Box -->
<div id="faction-invitation-box-container">
<div id="faction-invitation-box-content">
<p id="faction-invitation-box-text"> </p>
<p id="faction-invitation-box-message"> </p>
<p id="faction-invitation-box-warning">
Would you like to join? <br> <br>
Warning: Joining this faction may prevent you from joining other factions during this run!
</p>
<span id="faction-invitation-box-yes"> Yes </span>
<span id="faction-invitation-box-no"> No </span>
</div>
</div>
<!-- Work in progress screen -->
<div id="work-in-progress-container">
<p id="work-in-progress-text"> </p>
<span id="work-in-progress-cancel-button"> Cancel Work </span>
</div>
</body>
</html>