From 8f7fe5a9ea708b21c17439375f3a8ca94986a58e Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Tue, 2 Feb 2021 20:43:21 -0800
Subject: [PATCH] Update index.php

---
 print/index.php | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/print/index.php b/print/index.php
index 1b9fb8cd..adc5e9d5 100644
--- a/print/index.php
+++ b/print/index.php
@@ -4,9 +4,16 @@ $desc = 'Upload card images and download a fully prepared page for printing';
 include('../globalHTML/header-1.php');
 ?>
     <h2 class='readable-background header-extension title center margin-bottom-large'>Print Page Setup</h2>
-    <style>
-        
-    </style>
+    <div class='readable-background padding layer margin-bottom-large'>
+		<h4 class='center padding margin-bottom'>Configure Page Settings</h4>
+		<h5 class='margin-bottom padding input-description'>Select your paper size</h5>
+		<select onchange='setPageSize(this.value.split(","));' class='input margin-bottom'>
+			<option value='8.5,11'>Regular (8.5 by 11)</option>
+			<option value='8.2667,11.6934'>A4</option>
+		</select>
+		<h5 class='margin-bottom padding input-description'>Set the distance between cards (in pixels)</h5>
+		<input type='number' class='input margin-bottom' value='10' min='0' max='100' onchange='setCardDistance(this.value);'>
+	</div>
     <div class="layer">
         <div class='padding margin-bottom readable-background drop-area'>
             <h5 class='margin-bottom padding input-description'>Drag and drop the images that you'd like to print</h5>
@@ -14,12 +21,16 @@ include('../globalHTML/header-1.php');
         </div>
     </div>
     <div class="layer margin-bottom-large center">
-        <canvas style='height: auto; max-width:850px; width: 100%;'></canvas>
+        <canvas style='height: auto; max-width:850px; width: 100%; background: #fff;'></canvas>
     </div>
     <div class='readable-background padding layer margin-bottom-large'>
-		<h3 class='download padding' onclick='downloadSheet();'>Download your Sheet</h3>
+		<h3 class='download padding' onclick='downloadSheet();'>Download your Sheet (PNG)</h3>
 		<h4 class='padding center'>(Can take a few seconds)</h4>
 	</div>
+	<div class='readable-background padding layer margin-bottom-large'>
+		<h3 class='download padding' onclick='downloadPDF();'>Download your Sheet (PDF)</h3>
+		<h4 class='padding center'>(WARNING: This can take around 30 seconds...)</h4>
+	</div>
     <div class="readable-background layer margin-bottom-large">
         <h3 class='padding margin-bottom center'>
             Want to see your custom cards on the kitchen table?
@@ -28,6 +39,6 @@ include('../globalHTML/header-1.php');
         	Upload up to nine images, and they will automatically arrange themselves on an 8.5" by 11" sheet, so you can print them at home at up to 600PPI.
         </h4>
     </div>
-	<!-- <script defer src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js'></script> -->
+	<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js'></script>
     <script defer src="/print/print.js"></script>
 <?php include('../globalHTML/footer.php'); ?>
\ No newline at end of file