etched frame & print page enhancements

img/frames/etched/regular/border.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="Masks">
+        <path id="Border" d="M0,0L1500,0L1500,2100L0,2100L0,0ZM986,1969L514,1969C513.235,1960.94 508.219,1951.55 496,1948L100,1948L100,1853C73.299,1829.61 60.611,1789.61 60,1765L60,85C62.855,71.038 71.263,62.781 85,60L1415,60C1428.74,62.781 1437.14,71.038 1440,85L1440,1765C1439.39,1789.61 1426.7,1829.61 1400,1853L1400,1948L1004,1948C991.781,1951.55 986.765,1960.94 986,1969Z"/>
+    </g>
+</svg>

img/frames/etched/regular/crowns/cover.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path id="Cover" d="M1441,111L1420,111L1420,92L76,92L76,111L55,111L55,58L1441,58L1441,111Z"/>
+</svg>

img/frames/etched/regular/frame.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="Masks">
+        <path id="Frame" d="M986,1969L514,1969C513.235,1960.94 508.219,1951.55 496,1948L100,1948L100,1853C73.299,1829.61 60.611,1789.61 60,1765L60,85C62.855,71.038 71.263,62.781 85,60L1415,60C1428.74,62.781 1437.14,71.038 1440,85L1440,1765C1439.39,1789.61 1426.7,1829.61 1400,1853L1400,1948L1004,1948C991.781,1951.55 986.765,1960.94 986,1969ZM119,1929L1381,1929L1381,1322L119,1322L119,1929ZM95.879,1220.88C98.445,1208.92 103.487,1196.96 112,1185L724,1185C734.064,1185.24 742.884,1187.29 749.917,1191.94L750,1192C757.047,1187.31 765.897,1185.24 776,1185L1388,1185L1388.32,1185.44C1396.6,1197.2 1401.54,1208.95 1404.08,1220.7L1404.79,1220L1426.79,1242L1404.79,1264L1404.08,1263.3C1401.51,1275.2 1396.47,1287.1 1388,1299L112,1299C103.487,1287.04 98.445,1275.08 95.879,1263.12L95,1264L73,1242L95,1220L95.879,1220.88ZM1385,237C1384.98,236.978 1385,1166 1385,1166L115,1166L115,237C115,237 1385.02,237.022 1385,237ZM112,218C98.476,199 93.714,180 93.714,161C93.714,142 98.476,123 112,104L709,104C728.317,104.377 749.333,119 750,119C750.667,119 771.683,104.377 791,104L1388,104C1401.52,123 1406.29,142 1406.29,161C1406.29,180 1401.52,199 1388,218L112,218Z" style="fill:rgb(0,123,67);"/>
+    </g>
+</svg>

img/frames/etched/regular/rules.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="180" height="252" viewBox="0 0 180 252" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect x="14.28" y="158.64" width="151.44" height="72.84" style="fill:#0075be;"/></svg>

img/frames/etched/regular/title.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path id="Twins--Stroke-" serif:id="Twins (Stroke)" d="M112,218c-13.524,-19 -18.286,-38 -18.286,-57c-0,-19 4.762,-38 18.286,-57l597,0c19.317,0.377 40.333,15 41,15c0.667,0 21.683,-14.623 41,-15l597,0c13.524,19 18.286,38 18.286,57c0,19 -4.762,38 -18.286,57l-1276,0Z" style="fill:#ef3827;"/></svg>

img/frames/etched/regular/type.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path id="Twins--Stroke-" serif:id="Twins (Stroke)" d="M95.879,1220.88c2.566,-11.958 7.608,-23.918 16.121,-35.879l612,-0c10.064,0.237 18.884,2.289 25.917,6.945l0.083,0.055c7.047,-4.695 15.897,-6.762 26,-7l612,-0l0.315,0.445c8.281,11.752 13.221,23.504 15.768,35.258l0.703,-0.703l22,22l-22,22l-0.703,-0.703c-2.578,11.9 -7.611,23.801 -16.083,35.703l-1276,-0c-8.513,-11.96 -13.555,-23.921 -16.121,-35.879l-0.879,0.879l-22,-22l22,-22l0.879,0.879Z" style="fill:#ef3827;"/></svg>

js/frames/packEtched.js

@@ -1,30 +1,39 @@
 //Create objects for common properties across available frames
-var masks = [{src:'/img/frames/etched/legends/frame.svg', name:'Frame'}, {src:'/img/frames/etched/legends/title.svg', name:'Title'}, {src:'/img/frames/etched/legends/type.svg', name:'Type'}, {src:'/img/frames/etched/legends/rules.svg', name:'Rules'}, {src:'/img/frames/etched/legends/border.svg', name:'Border'}];
+var masks = [{src:'/img/frames/etched/regular/frame.svg', name:'Frame'}, {src:'/img/frames/etched/regular/title.svg', name:'Title'}, {src:'/img/frames/etched/regular/type.svg', name:'Type'}, {src:'/img/frames/etched/regular/rules.svg', name:'Rules'}, {src:'/img/frames/etched/regular/border.svg', name:'Border'}];
 var bounds = {x:0.7573, y:0.8848, width:0.188, height:0.0733};
 var bounds2 = {x:0.42, y:0.9062, width:0.16, height:0.0453};
+var bounds3 = {x:0.0307, y:0.0191, width:0.9387, height:0.092};
 //defines available frames
 availableFrames = [
-	{name:'White Frame', src:'/img/frames/etched/legends/w.png', masks:masks},
+	{name:'White Frame', src:'/img/frames/etched/regular/w.png', masks:masks},
-	{name:'Blue Frame', src:'/img/frames/etched/legends/u.png', masks:masks},
+	{name:'Blue Frame', src:'/img/frames/etched/regular/u.png', masks:masks},
-	{name:'Black Frame', src:'/img/frames/etched/legends/b.png', masks:masks},
+	{name:'Black Frame', src:'/img/frames/etched/regular/b.png', masks:masks},
-	{name:'Red Frame', src:'/img/frames/etched/legends/r.png', masks:masks},
+	{name:'Red Frame', src:'/img/frames/etched/regular/r.png', masks:masks},
-	{name:'Green Frame', src:'/img/frames/etched/legends/g.png', masks:masks},
+	{name:'Green Frame', src:'/img/frames/etched/regular/g.png', masks:masks},
-	{name:'Multicolored Frame', src:'/img/frames/etched/legends/m.png', masks:masks},
+	{name:'Multicolored Frame', src:'/img/frames/etched/regular/m.png', masks:masks},
-	{name:'Artifact Frame', src:'/img/frames/etched/legends/a.png', masks:masks},
+	{name:'Artifact Frame', src:'/img/frames/etched/regular/a.png', masks:masks},
-	{name:'White Power/Toughness', src:'/img/frames/m15/commanderLegends/ptW.png', bounds:bounds},
+	{name:'White Power/Toughness', src:'/img/frames/etched/regular/w.png', bounds:bounds},
-	{name:'Blue Power/Toughness', src:'/img/frames/m15/commanderLegends/ptU.png', bounds:bounds},
+	{name:'Blue Power/Toughness', src:'/img/frames/etched/regular/u.png', bounds:bounds},
-	{name:'Black Power/Toughness', src:'/img/frames/m15/commanderLegends/ptB.png', bounds:bounds},
+	{name:'Black Power/Toughness', src:'/img/frames/etched/regular/b.png', bounds:bounds},
-	{name:'Red Power/Toughness', src:'/img/frames/m15/commanderLegends/ptR.png', bounds:bounds},
+	{name:'Red Power/Toughness', src:'/img/frames/etched/regular/r.png', bounds:bounds},
-	{name:'Green Power/Toughness', src:'/img/frames/m15/commanderLegends/ptG.png', bounds:bounds},
+	{name:'Green Power/Toughness', src:'/img/frames/etched/regular/g.png', bounds:bounds},
-	{name:'Multicolored Power/Toughness', src:'/img/frames/m15/commanderLegends/ptM.png', bounds:bounds},
+	{name:'Multicolored Power/Toughness', src:'/img/frames/etched/regular/m.png', bounds:bounds},
-	{name:'Artifact Power/Toughness', src:'/img/frames/m15/commanderLegends/ptA.png', bounds:bounds},
+	{name:'Artifact Power/Toughness', src:'/img/frames/etched/regular/a.png', bounds:bounds},
-	{name:'White Holo Stamp', src:'/img/frames/etched/legends/holo/w.png', bounds:bounds2},
+	{name:'White Legend Crown', src:'/img/frames/etched/regular/crowns/w.png', bounds:bounds3, complementary:21},
-	{name:'Blue Holo Stamp', src:'/img/frames/etched/legends/holo/u.png', bounds:bounds2},
+	{name:'Blue Legend Crown', src:'/img/frames/etched/regular/crowns/u.png', bounds:bounds3, complementary:21},
-	{name:'Black Holo Stamp', src:'/img/frames/etched/legends/holo/b.png', bounds:bounds2},
+	{name:'Black Legend Crown', src:'/img/frames/etched/regular/crowns/b.png', bounds:bounds3, complementary:21},
-	{name:'Red Holo Stamp', src:'/img/frames/etched/legends/holo/r.png', bounds:bounds2},
+	{name:'Red Legend Crown', src:'/img/frames/etched/regular/crowns/r.png', bounds:bounds3, complementary:21},
-	{name:'Green Holo Stamp', src:'/img/frames/etched/legends/holo/g.png', bounds:bounds2},
+	{name:'Green Legend Crown', src:'/img/frames/etched/regular/crowns/g.png', bounds:bounds3, complementary:21},
-	{name:'Multicolored Holo Stamp', src:'/img/frames/etched/legends/holo/m.png', bounds:bounds2},
+	{name:'Multicolored Legend Crown', src:'/img/frames/etched/regular/crowns/m.png', bounds:bounds3, complementary:21},
-	{name:'Artifact Holo Stamp', src:'/img/frames/etched/legends/holo/a.png', bounds:bounds2},
+	{name:'Artifact Legend Crown', src:'/img/frames/etched/regular/crowns/a.png', bounds:bounds3, complementary:21},
+	{name:'Legend Crown Cover', src:'/img/frames/etched/regular/crowns/cover.svg'},
+	{name:'White Holo Stamp', src:'/img/frames/etched/regular/holo/w.png', bounds:bounds2},
+	{name:'Blue Holo Stamp', src:'/img/frames/etched/regular/holo/u.png', bounds:bounds2},
+	{name:'Black Holo Stamp', src:'/img/frames/etched/regular/holo/b.png', bounds:bounds2},
+	{name:'Red Holo Stamp', src:'/img/frames/etched/regular/holo/r.png', bounds:bounds2},
+	{name:'Green Holo Stamp', src:'/img/frames/etched/regular/holo/g.png', bounds:bounds2},
+	{name:'Multicolored Holo Stamp', src:'/img/frames/etched/regular/holo/m.png', bounds:bounds2},
+	{name:'Artifact Holo Stamp', src:'/img/frames/etched/regular/holo/a.png', bounds:bounds2},
 ];
 //disables/enables the "Load Frame Version" button
 document.querySelector('#loadFrameVersion').disabled = false;

print/index.php

@@ -46,15 +46,17 @@ include('../globalHTML/header-1.php');
             <button onclick='saveDefaults();' class='input margin-bottom'>Save configuration</button>
         </div>
 	</div>
-    <div class="layer">
+    <div class="layer margin-bottom-large">
-        <div class='padding margin-bottom readable-background drop-area'>
+        <div class="drop-area" style="padding: 1rem">
-            <h5 class='margin-bottom padding input-description'>Drag and drop the images that you'd like to print</h5>
+            <div class='padding margin-bottom-large readable-background'>
+                <h5 class='margin-bottom padding input-description'>Upload the images that you'd like to print, or drag-and-drop them</h5>
                 <input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, uploadCard, "filename");' data-dropFunction='uploadCard' data-otherParams='filename'>
             </div>
-    </div>
+            <div class="center">
-    <div class="layer margin-bottom-large center">
                 <canvas style='height: auto; max-width:850px; width: 100%; background: #fff;'></canvas>
             </div>
+        </div>
+    </div>
     <div class='readable-background padding layer margin-bottom-large'>
 		<h3 class='download padding' onclick='downloadCanvas();'>Download your Sheet (PNG)</h3>
 		<h4 class='padding center'>(Can take a few seconds)</h4>