mirror of
https://github.com/marcrobledo/RomPatcher.js.git
synced 2025-09-15 17:26:57 +00:00
GUI redesign among other fixes
This commit is contained in:
Marc Robledo
parent
eb40a592b5
commit
a56fa9d4e8
13 changed files with 251 additions and 314 deletions
123
index.html
123
index.html
|
|
@ -1,137 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>RomPatcher.js</title>
|
||||
<title>Rom Patcher JS</title>
|
||||
<meta http-equiv="content-Type" content="text/html; charset=UTF-8"/>
|
||||
<meta name="description" content="A web-based IPS/UPS/APS/BPS ROM patcher."/>
|
||||
<meta name="keywords" content="ips,ups,aps,bps,patcher,online,html5,rom,patch,hack,translation"/>
|
||||
<meta name="keywords" content="ips,ups,aps,bps,patcher,online,html5,web,online,rom,patch,hack,translation"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
|
||||
<link rel="manifest" href="./manifest.json"/>
|
||||
<link rel="shortcut icon" href="./favicon.png"/>
|
||||
<link type="text/css" rel="stylesheet" href="./RomPatcher.css" media="all"/>
|
||||
<script type="text/javascript" src="./RomPatcher.js"></script>
|
||||
<script type="text/javascript" src="./ips.js"></script>
|
||||
<script type="text/javascript" src="./ups.js"></script>
|
||||
<script type="text/javascript" src="./aps.js"></script>
|
||||
<!-- <script type="text/javascript" src="./apsgba.js"></script> -->
|
||||
<script type="text/javascript" src="./bps.js"></script>
|
||||
<script type="text/javascript" src="./ByteFlipper.js"></script>
|
||||
|
||||
<!-- <script type="text/javascript" src="./apsgba.js"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
<body unselectable="on" onselectstart="return false"><div id="column">
|
||||
|
||||
|
||||
<!-- HEADER -->
|
||||
<div id="header">
|
||||
<div id="header-top">
|
||||
<div class="row wrapper">
|
||||
<h1 class="six columns text-left"><img src="logo.png" /><span class="hidden">RomPatcher.js</span></h1>
|
||||
<div class="six columns header-buttons text-right">
|
||||
by <a href="/">Marc Robledo</a>
|
||||
<i class="icon github"></i> <a href="https://github.com/marcrobledo/RomPatcher.js/" target="_blank">See on GitHub</a>
|
||||
<i class="icon heart"></i> <a href="https://www.paypal.me/marcrobledo/5" target="_blank" rel="nofollow">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<header><img src="logo.png" /><h1>RomPatcher.js</h1></header>
|
||||
|
||||
<!-- APP -->
|
||||
<div class="wrapper" id="the-app">
|
||||
<h3 class="red">Apply patch</h3>
|
||||
<div class="container-description">Apply a patch to your ROM</div>
|
||||
<div class="container">
|
||||
<div id="wrapper">
|
||||
<div id="tabs"><div class="selected clickable" onclick="setTab(0)">Apply patch</div><div class="clickable" onclick="setTab(1)">Create patch</div></div>
|
||||
|
||||
<div id="tab0" class="tab">
|
||||
<div class="row">
|
||||
<div class="six columns text-right"><label for="input-file-rom">ROM file:</label></div>
|
||||
<div class="six columns">
|
||||
<div class="leftcol"><label for="input-file-rom">ROM file:</label></div>
|
||||
<div class="rightcol">
|
||||
<input type="file" id="input-file-rom" />
|
||||
<div id="rom-info" class="mono" style="display:none;font-size:12px">
|
||||
CRC32: <span id="crc32"></span><br/>
|
||||
MD5: <span id="md5"></span><br/>
|
||||
SHA-1: <span id="sha1"></span><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="rom-info">
|
||||
<div class="leftcol">CRC32:</div><div class="rightcol"><span id="crc32"></span></div>
|
||||
<div class="leftcol">MD5:</div><div class="rightcol"><span id="md5"></span></div>
|
||||
<div class="leftcol">SHA-1:</div><div class="rightcol"><span id="sha1"></span></div>
|
||||
</div>
|
||||
<div class="row" id="row-removeheader" style="display:none">
|
||||
<div class="six columns text-right"><label for="checkbox-removeheader">Remove header before patching:</label></div>
|
||||
<div class="six columns">
|
||||
<div class="leftcol"><label for="checkbox-removeheader">Remove header before patching:</label></div>
|
||||
<div class="rightcol">
|
||||
<input type="checkbox" id="checkbox-removeheader" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="row-addheader" style="display:none">
|
||||
<div class="six columns text-right"><label for="checkbox-addheader">Patch needs a headered ROM:</label></div>
|
||||
<div class="six columns">
|
||||
<div class="leftcol"><label for="checkbox-addheader">Patch needs a headered ROM:</label></div>
|
||||
<div class="rightcol">
|
||||
<input type="checkbox" id="checkbox-addheader" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="six columns text-right"><label for="input-file-patch">Patch file <small>(IPS/UPS/APS/BPS)</small>:</label></div>
|
||||
<div class="six columns">
|
||||
<div class="row" title="Compatible formats: IPS, UPS, APS and BPS">
|
||||
<div class="leftcol"><label for="input-file-patch">Patch file:</label></div>
|
||||
<div class="rightcol">
|
||||
<input type="file" id="input-file-patch" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button class="with-icon icon9" onclick="applyPatchFile(patch, romFile)"><i class="icon check"></i> Apply patch</button>
|
||||
<button class="with-dot" onclick="applyPatchFile(patch, romFile)">Apply patch</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h3 class="blue">Create patch</h3>
|
||||
<div class="container-description">Create a patch from two different ROMs </div>
|
||||
<div class="container">
|
||||
<div id="tab1" class="tab">
|
||||
<div class="row">
|
||||
<div class="six columns text-right"><label for="input-file-rom1">Original ROM:</label></div>
|
||||
<div class="six columns end">
|
||||
<div class="leftcol"><label for="input-file-rom1">Original ROM:</label></div>
|
||||
<div class="rightcol">
|
||||
<input type="file" id="input-file-rom1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="six columns text-right"><label for="input-file-rom2">Modified ROM:</label></div>
|
||||
<div class="six columns end">
|
||||
<div class="leftcol"><label for="input-file-rom2">Modified ROM:</label></div>
|
||||
<div class="rightcol">
|
||||
<input type="file" id="input-file-rom2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="six columns text-right">Patch type</div>
|
||||
<div class="six columns end">
|
||||
<input type="radio" id="radio-ips" name="patch-type" checked /><label for="radio-ips">IPS</label>
|
||||
<input type="radio" id="radio-ups" name="patch-type" /><label for="radio-ups">UPS</label>
|
||||
<input type="radio" id="radio-aps" name="patch-type" /><label for="radio-aps">APS</label>
|
||||
<input type="radio" id="radio-apsn64" name="patch-type" /><label for="radio-apsn64">APS (N64)</label>
|
||||
<!-- <input type="radio" id="radio-bps" name="patch-type" /><label for="radio-bps">BPS</label> -->
|
||||
<div class="leftcol">Patch type:</div>
|
||||
<div class="rightcol">
|
||||
<select id="patch-type">
|
||||
<option value="ips">IPS</option>
|
||||
<option value="ups">UPS</option>
|
||||
<option value="aps">APS</option>
|
||||
<option value="apsn64">APS (N64)</option>
|
||||
<!-- <option value="bps">BPS</option> -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button class="with-icon icon9" onclick="createPatchFile()"><i class="icon settings"></i> Create patch</button>
|
||||
<button class="with-dot" onclick="createPatchFile()">Create patch</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h3 class="green">Byte flipper</h3>
|
||||
<div class="container-description">This tool flips bytes in a file in order to change its endianness</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="six columns text-right"><label for="input-file-flip">File</label></div>
|
||||
<div class="six columns"><input type="file" id="input-file-flip" /></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="six columns text-right">Bytes to flip</div>
|
||||
<div class="six columns">
|
||||
<input type="radio" value="4" id="radio4" name="radio-bytes" checked /><label for="radio4">4 <small>(N64 ROMs and savegames)</small></label>
|
||||
<input type="radio" value="8" id="radio8" name="radio-bytes" /><label for="radio8">8 <small>(old GBA flashcards)</small></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button onclick="flipBytesInFile()" id="button-save"><i class="icon settings"></i> Flip bytes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
Rom Patcher JS <small>rev 20170428</small> by <a href="/">Marc Robledo</a>
|
||||
<i class="icon github"></i> <a href="https://github.com/marcrobledo/RomPatcher.js/" target="_blank">See on GitHub</a>
|
||||
<i class="icon heart"></i> <a href="https://www.paypal.me/marcrobledo/5" target="_blank" rel="nofollow">Donate</a>
|
||||
</footer>
|
||||
|
||||
|
||||
</body></html>
|
||||
</div></body></html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue