default melee profile, abilties, prepare for "launch"

src/App.jsx

@@ -2,6 +2,8 @@ import JSZip from "jszip";
 import { Create40kRoster } from "./roster40k";
 import { useState } from "react";
 import { Roster } from "./Roster";
+import Demo0 from "./assets/Demo0.png";
+import Demo1 from "./assets/Demo1.png";
 
 function App() {
 	const [error, setError] = useState();
@@ -55,7 +57,7 @@ function App() {
 			console.log(doc);
 			const roster = Create40kRoster(doc);
 			console.log(roster);
-			if (roster && roster._forces.length > 0) {
+			if (roster && roster.forces.length > 0) {
 				setRoster(roster);
 				/* const renderer = new Renderer40k(roster);
         renderer.render(rosterTitle, rosterList, forceUnits); */
@@ -67,13 +69,62 @@ function App() {
 
 	return (
 		<div className="App">
-			<label>
-				<input type="file" accept=".ros, .rosz" onChange={handleFileSelect} />
-				Select roster file (.ros, .rosz)
-			</label>
-			<div style={{ color: "red" }}>{error}</div>
+			<div className="header print-display-none">
+				FancyScribe
+				<div className="subheader">
+					A fancy way to view your Warhammer 40k BattleScribe rosters.
+				</div>
+			</div>
 
-			<Roster roster={roster} />
+			<div className="body">
+				<input
+					type="file"
+					name="rosterUpload"
+					id="rosterUpload"
+					onChange={handleFileSelect}
+					style={{ display: "none" }}
+				/>
+				<label
+					for="rosterUpload"
+					className={
+						"print-display-none rosterUpload" +
+						" " +
+						(roster ? "rosterUploaded" : "")
+					}
+					id="rosterUploadContainer"
+				>
+					<div id="preloadContainer">
+						<span>Upload roster file (.ros, .rosz)</span>
+					</div>
+				</label>
+				<div style={{ color: "red" }}>{error}</div>
+
+				<Roster roster={roster} />
+				<div
+					className="print-display-none"
+					style={{ display: roster ? "none" : "" }}
+				>
+					<div style={{ padding: "8px 0", fontSize: "1.7rem" }}>About</div>
+					<div style={{ fontSize: "1.2rem" }}>
+						PrettyScribe is a website that renders{" "}
+						<a href="https://www.battlescribe.net/" target="_blank">
+							BattleScribe
+						</a>{" "}
+						roster files in an opinionated format inspired by the new 10th
+						edition datacards. Inspiration and large parts of the parsing logic
+						come from the{" "}
+						<a href="https://rweyrauch.github.io/PrettyScribe" target="_blank">
+							PrettyScribe
+						</a>{" "}
+						application.
+					</div>
+					<div style={{ padding: "8px 0", fontSize: "1.7rem" }}>
+						Output Examples
+					</div>
+					<img src={Demo0} />
+					<img src={Demo1} />
+				</div>
+			</div>
 		</div>
 	);
 }