Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

Update index.php

Browse Source
This commit is contained in:
Kyle
2021-02-02 20:43:21 -08:00
parent c75fd3140e
commit 8f7fe5a9ea
1 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
print/index.php
View File

@@ -4,9 +4,16 @@ $desc = 'Upload card images and download a fully prepared page for printing';
include('../globalHTML/header-1.php'); include('../globalHTML/header-1.php');
?> ?>
<h2 class='readable-background header-extension title center margin-bottom-large'>Print Page Setup</h2> <h2 class='readable-background header-extension title center margin-bottom-large'>Print Page Setup</h2>
<style> <div class='readable-background padding layer margin-bottom-large'>
<h4 class='center padding margin-bottom'>Configure Page Settings</h4>
</style> <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="layer">
<div class='padding margin-bottom readable-background drop-area'> <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> <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> </div>
<div class="layer margin-bottom-large center"> <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>
<div class='readable-background padding layer margin-bottom-large'> <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> <h4 class='padding center'>(Can take a few seconds)</h4>
</div> </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"> <div class="readable-background layer margin-bottom-large">
<h3 class='padding margin-bottom center'> <h3 class='padding margin-bottom center'>
Want to see your custom cards on the kitchen table? 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. 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> </h4>
</div> </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> <script defer src="/print/print.js"></script>
<?php include('../globalHTML/footer.php'); ?> <?php include('../globalHTML/footer.php'); ?>