crowd-crunch · mkava · Jan 18, 2020 · Jan 18, 2020
diff --git a/collector/templates/collector/index.html b/collector/templates/collector/index.html
@@ -1,16 +1,17 @@
 <html>
 {% include "collector/includes/nav.html" %}
-CORRIDORS OF TIME<br>
-CROWDSOURCED TRANSCRIPTION & VALIDATION<br>
-<p>
-PURPOSE:<br>
-The purpose of this site is to provide the most accurate database of puzzle piece transcriptions by crowdsourcing the transcription process and verifying through redundancy.
-<p>
-DISCLAIMER:<br>
+<strong>CORRIDORS OF TIME<br>
+CROWDSOURCED TRANSCRIPTION & VALIDATION</strong>
+<h4>Purpose:</h4>
+The purpose of this site is to provide the most accurate database of puzzle piece transcriptions by crowdsourcing the transcription process and verifying through redundancy.<br />
+<strong>DISCLAIMER:</strong><br />
 Because we wanted this in front of people NAOW, the frontend is extremely dirty. We are working with someone to fix that. In the meantime, this is what it is.<br>
-<p>
-HELP WANTED:<br>
+<h4>Help wanted:</h4>
 Transcriptions needed! Click on <a href="/transcribe">Transcribe Something</a> above and get going, instructions are on the page!<br>
+<h4>Access to data:</h4>
+There would be no point to this effort at all if you didn't get the output. The found solutions are accessible, but not in a good format. We are going to do CSV exports. That code hasn't been written. Please get in touch with @ebuch if you'd like to help. We are keen on flagging rotations first, before we go to CSV export.
+<h4>How this works:</h4>
+Each image is transcribed several times by different people. Identical transcriptions increases the confidence that the transcription is accurate. Once the accuracy of an image's transcription has reached a high confidence rating, it will be added to our table of verified results.
 <p>
 This is an effort by the <a href="https://discord.gg/Tue4PMf">RaidSecrets Discord server</a><br>
 </html>
diff --git a/collector/templates/collector/transcribe.html b/collector/templates/collector/transcribe.html
@@ -46,20 +46,22 @@
 <div>
 	{% include "collector/includes/nav.html" %}
 	<div class="puzzlepiece">
-	DISCLAIMER: We are working on a proper frontend. This is a quick-and-very-dirty thing to get it in front of people.<br>
+	<strong>DISCLAIMER:</strong> We are working on a proper frontend. This is a quick-and-very-dirty thing to get it in front of people.<br />
 {% if puzzlepiece %}
 		<div id="imagecontainer">
-			INSTRUCTIONS:<br>
-			Transcribe the image below using <a target="_blank" rel="noopener noreferrer" href="https://tjl.co/corridors-of-time/">https://tjl.co/corridors-of-time/</a><br>
-			OUTPUT:<br>
-			Copy and paste the RAW JSON output from tjl.co into the box below and click submit. The raw JSON is everything between the { and } curly brackets, including those brackets themselves.<br>
-			IMAGE ROTATION: <br>
-			All puzzle pieces should be transcribed as they appear when room's entrance is behind the player. You can easily verify the image rotation by using the outer pillars as landmarks. [See <a href="https://cdn.discordapp.com/attachments/667254133589540877/667353728365363200/Rotation_Landmarks.png">this rotation landmarks guide</a>]<br>
-			INVERSION: <br>
+			<div style="width: 50%; margin: 0 auto;">
+			<h4>Instructions:</h4>
+			<ul>
+			<li>Transcribe the image below using <a target="_blank" rel="noopener noreferrer" href="https://tjl.co/corridors-of-time/">https://tjl.co/corridors-of-time/</a></li>
+			<li>Copy and paste the RAW JSON output from tjl.co into the box below and click submit. The raw JSON is everything between the { and } curly brackets, including those brackets themselves.</li>
+			</ul>
+			<h4>Image Rotation:</h4>
+			All puzzle pieces should be transcribed as they appear when room's entrance is behind the player. You can easily verify the image rotation by using the outer pillars as landmarks. [See <a href="https://cdn.discordapp.com/attachments/667254133589540877/667353728365363200/Rotation_Landmarks.png">this rotation landmarks guide</a>]
+			<h4>Color Inversion:</h4>
 			All images are color-inverted to make them easier to read. You can click on the image to open the original version in a new tab.
-			PLEASE FOR THE LOVE OF DOG don't report an image as bad because it looks inverted, we're doing that on purpose.<br>
-			BAD PHOTOS:<br>
-			If an image is blurry, covered, cropped off, too small, doesn't load, or is unreadable for any reason, please click "Report Bad Image" and it will be removed from circulation. Images with rotations that cannot be determined should also be flagged.<br>
+			Please don't report an image as bad because it looks inverted, we're doing that on purpose.<br>
+			<h4>Bad Images:</h4>
+			If an image is blurry, covered, cropped off, too small, doesn't load, or is unreadable for any reason, please click <strong>"Report Bad Image"</strong> and it will be removed from circulation. Images with rotations that can't be determined and images that do not show an in-game screenshot of a puzzle piece should also be reported. Please report all captures of the tjl.co site, as they are not original in-game puzzle pieces.</div><br>
 		{% if puzzlepiece.isImage == 0 %}
 		<p>
 		<a target="_blank" rel="noopener noreferrer" href={{ puzzlepiece.url }}>Link to the page that should contain an image - we can only display raw images (.png and .jpg) inline.</a></div>
@@ -80,8 +82,6 @@
 				</div>
 			</form>
 		</div>
-		HOW DOES THIS WORK:<br> 
-			Each image is transcribed several times by different people. Identical transcriptions increases the confidence that the transcription is accurate. Once the accuracy of an image's transcription has reached a high confidence rating, it will be added to our table of verified results. 
 {% else %}
 		<strong>This is embarassing but we could not load a puzzle piece to transcribe! This has been logged. Please try again.</strong>
 {% endif %}