better masks

img/frames/m15/fang/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="M1500,0L0,0L0,2100L1500,2100L1500,0ZM1378.19,63.903L1378.3,64C1459.53,92.633 1474.67,199.902 1451.3,353L1451.3,461.9C1459.18,478.203 1457.31,516.749 1451.3,564.734L1451.3,799.536C1460.16,829.013 1459.79,859.644 1451.3,891.29L1451.3,1081.08C1458.34,1095.15 1459.19,1111.95 1451.3,1132.61L1451.3,1203.21L1458.3,1210.51C1455.65,1213.38 1453.11,1216.39 1451.3,1220.37L1451.3,1238.43C1453.15,1238.06 1454.73,1236.44 1456.3,1234.78C1467.39,1267.12 1446.13,1284.5 1458.78,1322.06C1457.27,1321.78 1454.29,1321.64 1451.3,1321.81L1451.3,1382.2C1454.12,1377.91 1455.87,1370.7 1457.3,1362.6C1462,1390.87 1461.88,1417.83 1451.3,1441.94L1451.3,1532.76C1460.53,1544.81 1461.14,1575.08 1451.3,1613.09L1451.3,1710C1468.62,1891.24 1455.6,1915.56 1416.3,1950L838.3,1950C816.125,1924.87 786.792,1912.54 750.3,1913L750,1913C713.508,1912.54 684.175,1924.87 662,1950L84,1950C44.704,1915.56 31.684,1891.24 49,1710L49,1613.09C39.164,1575.08 39.77,1544.81 49,1532.76L49,1441.94C38.425,1417.83 38.3,1390.87 43,1362.6C44.428,1370.7 46.183,1377.91 49,1382.2L49,1321.81C46.013,1321.64 43.028,1321.78 41.521,1322.06C54.165,1284.5 32.909,1267.12 44,1234.78C45.568,1236.44 47.145,1238.06 49,1238.43L49,1220.37C47.189,1216.39 44.647,1213.38 42,1210.51L49,1203.21L49,1132.61C41.113,1111.95 41.962,1095.15 49,1081.08L49,891.29C40.509,859.644 40.137,829.013 49,799.536L49,564.734C42.991,516.749 41.121,478.203 49,461.9L49,353C25.627,199.902 40.77,92.633 122,64L130,62C138.307,74.444 147.479,80.507 157,84L419,84C444.487,73.491 479.702,64.263 512.074,53C516.741,76.485 568.158,80.928 590.876,84L909.124,84C931.842,80.928 983.259,76.485 987.926,53C1020.3,64.263 1055.51,73.491 1081,84L1343,84C1352.52,80.507 1361.69,74.444 1370,62L1378,64L1378.19,63.903Z"/>
+    </g>
+</svg>

js/frames/packFang.js

@@ -1,5 +1,5 @@
 //Create objects for common properties across available frames
-var masks = [{src:'/img/frames/m15/fang/frame.svg', name:'Frame'}, {src:'/img/frames/m15/fang/title.svg', name:'Title'}, {src:'/img/frames/m15/fang/type.svg', name:'Type'}, {src:'/img/frames/m15/fang/rules.svg', name:'Rules'}];
+var masks = [{src:'/img/frames/m15/fang/frame.svg', name:'Frame'}, {src:'/img/frames/m15/fang/title.svg', name:'Title'}, {src:'/img/frames/m15/fang/type.svg', name:'Type'}, {src:'/img/frames/m15/fang/rules.svg', name:'Rules'}, {src:'/img/frames/m15/fang/gold.svg', name:'Gold Accents'}, {src:'/img/frames/m15/fang/border.svg', name:'Border'}];
 var bounds = {x:0.76, y:0.8762, width:0.204, height:0.0781};
 var bounds2 = {x:0.0814, y:0.0191, width:0.838, height:0.021};
 //defines available frames

js/main-1.js

@@ -100,3 +100,11 @@ urlInputs.forEach(element => {
 		}
 	});
 });
+
+//bind two inputs to match values
+function bindInputs(query1, query2) {
+	var e1 = document.querySelector(query1);
+	var e2 = document.querySelector(query2);
+	e1.oninput = (event) => {e2.value = e1.value;}
+	e2.oninput = (event) => {e1.value = e2.value;}
+}