Update index.php

This commit is contained in:
Kyle
2021-12-18 14:26:28 -08:00
parent 9ec0d20be9
commit 60bad272b5

View File

@@ -5,42 +5,44 @@ include('../globalHTML/header-1.php');
?>
<h2 class='readable-background header-extension title center margin-bottom-large'>Printing Tool</h2>
<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'>Letter (8.5 by 11)</option>
<option value='8.2667,11.6934'>A4</option>
</select>
<h5 class='margin-bottom padding input-description'>Toggle the paper orientation (Portrait / Landscape)</h5>
<button onclick='changeOrientation();' class='input margin-bottom'>Toggle orientation</button>
<h5 class='margin-bottom padding input-description'>Select a default card size</h5>
<select onchange='setCardSize(this.value.split(","));' class='input margin-bottom'>
<option value='2.5,3.5'>2.5 x 3.5 Inches</option>
<option value='2.48031,3.46457'>63 x 88 mm</option>
</select>
<h5 class='margin-bottom padding input-description'>Or enter your own card size</h5>
<div class='margin-bottom split-grid'>
<input type='number' id='cardWidth' class='input' value='1500' onchange='setCardSize();'>
<input type='number' id='cardHeight' class='input' value='2100' onchange='setCardSize();'>
<h4 class='collapsible collapsed center padding margin-bottom' onclick='toggleCollapse(event);'>Configure Page Settings</h4>
<div>
<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'>Letter (8.5 by 11)</option>
<option value='8.2667,11.6934'>A4</option>
</select>
<h5 class='margin-bottom padding input-description'>Toggle the paper orientation (Portrait / Landscape)</h5>
<button onclick='changeOrientation();' class='input margin-bottom'>Toggle orientation</button>
<h5 class='margin-bottom padding input-description'>Select a default card size</h5>
<select onchange='setCardSize(this.value.split(","));' class='input margin-bottom'>
<option value='2.5,3.5'>2.5 x 3.5 Inches</option>
<option value='2.48031,3.46457'>63 x 88 mm</option>
</select>
<h5 class='margin-bottom padding input-description'>Or enter your own card size</h5>
<div class='margin-bottom split-grid'>
<input type='number' id='cardWidth' class='input' value='1500' onchange='setCardSize();'>
<input type='number' id='cardHeight' class='input' value='2100' onchange='setCardSize();'>
</div>
<h5 class='margin-bottom padding input-description'>Enter your bleed edge thickness (in pixels)</h5>
<input type='number' id='cardPadding' class='input margin-bottom' value='0' min='0' onchange='setPaddingSize(this.value);'>
<h5 class='margin-bottom padding input-description'>Enter the distance between cards (in pixels)</h5>
<input type='number' id='cardMargin' class='input margin-bottom' value='30' min='0' onchange='setMarginSize(this.value);'>
<h5 class='margin-bottom padding input-description'>Set PPI (pixels per inch)</h5>
<input type='number' id='cardPPI' class='input margin-bottom' value='600' min='1' max='2400' onchange='setPPI(this.value);'>
<h5 class='margin-bottom padding input-description'>Include cutting aids (colored marks to help guide cuts)</h5>
<label class='checkbox-container input margin-bottom'>Cutting aids
<input id='cuttingAidsCheckbox' type='checkbox' onchange='setCuttingAids(this.checked);'>
<span class='checkmark'></span>
</label>
<h5 class='margin-bottom padding input-description'>Images already include bleed edge</h5>
<label class='checkbox-container input margin-bottom'>Bleed edge included
<input id='bleedEdgeCheckbox' type='checkbox' onchange='setBleedEdge(this.checked);' checked>
<span class='checkmark'></span>
</label>
<h5 class='margin-bottom padding input-description'>Save your current configurations as default</h5>
<button onclick='saveDefaults();' class='input margin-bottom'>Save configuration</button>
</div>
<h5 class='margin-bottom padding input-description'>Enter your bleed edge thickness (in pixels)</h5>
<input type='number' id='cardPadding' class='input margin-bottom' value='0' min='0' onchange='setPaddingSize(this.value);'>
<h5 class='margin-bottom padding input-description'>Enter the distance between cards (in pixels)</h5>
<input type='number' id='cardMargin' class='input margin-bottom' value='30' min='0' onchange='setMarginSize(this.value);'>
<h5 class='margin-bottom padding input-description'>Set PPI (pixels per inch)</h5>
<input type='number' id='cardPPI' class='input margin-bottom' value='600' min='1' max='2400' onchange='setPPI(this.value);'>
<h5 class='margin-bottom padding input-description'>Include cutting aids (colored marks to help guide cuts)</h5>
<label class='checkbox-container input margin-bottom'>Cutting aids
<input id='cuttingAidsCheckbox' type='checkbox' onchange='setCuttingAids(this.checked);'>
<span class='checkmark'></span>
</label>
<h5 class='margin-bottom padding input-description'>Images already include bleed edge</h5>
<label class='checkbox-container input margin-bottom'>Bleed edge included
<input id='bleedEdgeCheckbox' type='checkbox' onchange='setBleedEdge(this.checked);' checked>
<span class='checkmark'></span>
</label>
<h5 class='margin-bottom padding input-description'>Save your current configurations as default</h5>
<button onclick='saveDefaults();' class='input margin-bottom'>Save configuration</button>
</div>
<div class="layer">
<div class='padding margin-bottom readable-background drop-area'>