patch creation can now create IPS patches if offsets are below format limit, rearranged files internally

style/RomPatcher.css

@@ -0,0 +1,360 @@
+/* WebApps CSS template by Marc Robledo v20190531 */
+/* minify at https://cssminifier.com/ + https://www.base64-image.de/ */
+
+/* @FONT-FACES */
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
+@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:300);
+
+body{
+	margin:0;
+	font:15px 'Open Sans',sans-serif;
+	cursor:default;
+	line-height:1.8;
+	background-color:#31343a;
+	color:#3c3c3c;
+	-moz-user-select:none;
+	-webkit-user-select: none;
+	-ms-user-select:none;
+	-o-user-select:none;
+	user-select:none
+}
+
+/* flex main column */
+html, body{height:100%}
+#column{
+	display: flex;
+	flex-wrap: nowrap;
+	height: 100%;
+	flex-direction: column;
+}
+header{padding: 1% 0 4%}
+header h1{display:none}
+footer{padding: 50px 0 20px}
+#wrapper{flex-basis:100%}
+
+
+.clickable{cursor:pointer}
+
+
+/* flex box */
+.row{
+	display:flex;
+	flex-flow:row wrap; /* this is the same as flex-direction:row;flex-wrap:wrap; */
+	align-items:center; /* vertical align */
+	justify-content:space-between
+}
+.leftcol{width:28%;text-align:right}
+.rightcol{width:70%}
+.leftcol,.rightcol{margin-bottom:8px}
+
+
+
+
+
+/* icons */
+
+footer .icon, #crc32.valid:after{
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAQCAYAAABQrvyxAAACUElEQVRIx9XWzUtUURzG8atp04svtCiI3v6EQFIoInBREFgEQtC+VVCLWoQLMTKqRUEbU4uKaOht5a7IoDcoWkiLIKKVgqUUvkGMM2revid+V55u5+qdS5ANfEDvPXN4npl7zpkgDMMgpgFX8QEF8xG9aPKM/6f0n7W4ifkw+eXu5VG33Aq48G/C9K8B1EeTjLTsdrbjMQqYwn1sw2bkMYlp9GOHe89CiDNBuU5jAOujSe5KsFY8wVe8NaN4hsN4bWP7pIAL9B1hzGcMe667IjszFuhAaN65CfbIJ5tP8bVdl/F7rcBzT8ilvMxQ4JyEd9rdBHck0JUUBc7L+HtWoJShwEyswCasSghegUux8G2/7jHBoCzQDSkKuGd/1t4zZAVGMhQYlQLNmEA/1sTCV6JHgs/jxMJ9JihamEIZq3/M3lO0AmczFLggBYYloCuxWj753lj4Y78VZIJxeSQ2pgi/Dj9s/IQVqEZfGeEfIScFGjAmQZ+iDjfk2hyO/vF4McELKdCZokCbjH8l26gr8TBFeFc059lGXYlxCVyUv2dxxLs+mOC4hXkPt7AuYqsn+BYrOCcFTkkBpwq3Fwn/wIoGCedAIyZji3UGrYk7kx1ig1agXQLul/DNnsPsS3QiSwGnEt2e8LewQscmbKNN8k2UcGjRrdUm2YVp9OAgTqJKCuRi4UtWKvAUcCpwWcJ3WbEgRYHocRpCy5Jng4TcZ4vyk522NXJvpYSfwgF9vDwFIp1ut0m6/7d/zAW2C3XhG2rlerVdu2ZrYVn+Gv0v/QQllGUdmIg+uwAAAABJRU5ErkJggg==');
+}
+footer .icon{
+	background-position:0px 0px;
+	display:inline-block;
+	vertical-align:middle;
+	width:16px;height:16px
+}
+footer .icon.github{background-position:0px 0px}
+footer .icon.heart{background-position:-16px 0px}
+footer .icon.check{background-position:-32px 0px}
+
+
+
+
+
+
+
+
+/* header+footer */
+header{text-align:center}
+header h1{margin:0}
+header img{max-width:90%}
+
+footer{
+	text-align:center;
+	color:#767b86;
+	font-size:85%;
+}
+footer a{
+	color:#969ba6;
+	text-decoration:none;
+	border-bottom:1px solid #464b56;
+}
+footer a:hover{
+	color:white;
+	border-color:#41d5ff;
+}
+
+
+
+hr{border:none;border-top:1px dotted #bbb;margin:15px 0}
+
+/* Switch mode */
+#switch-container{
+	visibility:hidden;
+	text-align:right;
+	color:white;
+	margin-bottom:10px;
+	font-size:88%;
+}
+#switch-create-button{
+	border-radius:2px;
+	padding: 6px 8px;
+	transition:background-color .1s;
+}
+#switch-create-button:hover{
+	background-color:#2b2e33;
+	cursor:pointer;
+}
+.switch{
+	background-color:#474c56;
+	display:inline-block;
+	vertical-align:middle;
+	width:30px;height:16px;
+	border-radius:8px;
+	position:relative;
+	transition:background-color .2s;
+}
+.switch:before{
+	position:absolute;
+	background-color:white;
+	height:12px;width:12px;
+	content:" ";
+	border-radius:6px;
+	top:2px;
+	left:2px;
+	transition:left .2s;
+}
+.switch.enabled:before{
+	left:16px;
+}
+.switch.enabled{
+	background-color:#00a5ff;
+	background-color:#41bdc7;
+}
+
+
+
+
+.tab{background-color:#f9fafa;padding:30px 15px;border-radius: 3px}
+#tab1{display:none}
+
+.buttons{
+	margin-top:20px;
+	text-align:right
+}
+
+
+
+/* forms */
+input[type=file],select{
+	box-sizing:border-box;
+	max-width:100%;
+	font-family:inherit;
+	font-size:100%;
+	outline:0;
+	border:none;
+	border-radius:3px;
+	background-color:#edefef;
+}
+input[type=file]{padding:6px 10px}
+select{
+	padding:6px 18px 6px 10px;
+	-webkit-appearance:none;
+	-moz-appearance:none;
+	text-overflow:'';
+
+	background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
+	background-position:100% center;
+	background-repeat:no-repeat;
+}
+select::-ms-expand{display:none}
+input[type=file].enabled:hover,select.enabled:hover{background-color:#dee1e1}
+input[type=file].disabled,select.disabled{background-color:transparent}
+
+
+
+
+
+/* buttons */
+button{
+	font-family:inherit;
+	font-size:100%;
+	min-width:120px;
+	border-radius:3px;border:0;
+
+	padding:10px 20px;
+	margin:0 5px;
+
+	background-color:#2a9ca5;
+	color:white;
+
+	transition:background-color .15s;
+
+	box-sizing:border-box
+}
+button.enabled:hover{
+	cursor:pointer;
+	background-color:#3aacb5;
+}
+button.enabled:active{
+	background-color:#297b81;
+	transform:translateY(1px)
+}
+button:disabled{opacity:.35 !important;cursor:not-allowed}
+button.close{color:white;background-color:#}
+button.no-text.with-icon:before{margin-right:0px}
+
+
+
+
+
+
+
+#rom-info{font-family:'Roboto Mono',monospace;color:#888;font-size:12px;
+	-moz-user-select:text;
+	-webkit-user-select: text;
+	-ms-user-select:text;
+	-o-user-select:text;
+	user-select:text;
+	cursor:text;
+}
+#rom-info .rightcol{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+#crc32.valid{color:green}
+#crc32.invalid{color: red}
+#crc32 span{text-decoration:underline}
+#crc32 span:hover{cursor:pointer;color:black}
+
+
+#crc32.valid:after{
+	background-position:0px 0px;
+	display:inline-block;
+	vertical-align:middle;
+	width:16px;height:16px;
+	background-position:-32px 0px;
+	content:"";
+	margin-left:4px;
+	/*content:" \002713"}*/
+}
+
+
+
+
+
+.message{padding: 3px 10px; border-radius:3px;display:inline}
+.message.error{background-color:#de4205; color:white}
+.message.warning{background-color:#ffec68; color:black}
+
+/* loading circle */
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
+.loading{
+	width:20px;
+	height:20px;
+	display:inline-block;
+	position:relative;
+	-webkit-animation:spin 1s linear infinite;
+	-moz-animation:spin 1s linear infinite;
+	animation:spin 1s ease-in-out infinite;
+	vertical-align:middle;
+}
+.loading:before{
+	width:6px;
+	height:6px;
+	background-color:#41bdc7;
+	border-radius:3px;
+	display:inline-block;
+	content:"";
+	position:absolute;
+	top:0;
+	left:50%;
+	margin-left:-3px;
+}
+
+
+
+
+
+#wrapper{
+	box-sizing:border-box;
+	max-width:95%;
+	width:600px;
+	margin:0 auto
+}
+
+
+
+
+
+
+
+
+
+
+/* responsive */
+@media only screen and (max-width:641px){
+	#wrapper{font-size:14px}
+	#rom-info{font-size:11px}
+	header img{max-height:96px}
+}
+
+
+
+
+
+
+/* ZIP dialog */
+.zip-overlay{
+	position:fixed;
+	display:flex;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+	background-color:rgba(0,0,0,.65);
+
+	margin:0;
+	padding:0;
+}
+.zip-dialog{
+	vertical-align:middle;
+	color:#999;
+	text-align:center;
+	margin:auto;
+	background-color:white;
+	box-sizing:border-box;
+	padding:4px;
+	border-radius:3px;
+	min-width:340px;
+	max-width: 90%;
+}
+.zipped-files{
+	list-style:none;
+	padding:0;
+	margin: 0;
+	max-height:300px;
+	overflow-y:auto;
+}
+.zipped-files li{
+	color:#3c3c3c;
+	padding: 2px 8px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.zipped-files li:hover{
+	background-color:#eee;
+	cursor:pointer;
+	color: black;
+	border-radius: 3px;
+}