oss/RomPatcher.js
oss/RomPatcher.js
1
0
Fork 0
mirror of https://github.com/marcrobledo/RomPatcher.js.git synced 2025-06-27 16:25:54 +00:00
Code Wiki Activity

added settings screen with new features

Browse source
This commit is contained in:
Marc Robledo 2022-03-24 22:38:53 +01:00
parent a45e635696
commit e13da86290
18 changed files with 433 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

31
_cache_service_worker.js
View file

@ -13,31 +13,22 @@
navigator.serviceWorker.register('/repo/_cache_service_worker.js', {scope: '/repo/'}) navigator.serviceWorker.register('/repo/_cache_service_worker.js', {scope: '/repo/'})
*/ */
/* MOD: fix old caches for mrc */
caches.keys().then(function(cacheNames){
for(var i=0; i<cacheNames.length; i++){
if(
cacheNames[i]==='runtime' ||
/^precache-\w+$/.test(cacheNames[i]) ||
/^v?\d+\w?$/.test(cacheNames[i])
){
console.log('deleting old cache: '+cacheNames[i]);
caches.delete(cacheNames[i]);
}
}
});
var PRECACHE_ID='rom-patcher-js'; var PRECACHE_ID='rom-patcher-js';
var PRECACHE_VERSION='v14c'; var PRECACHE_VERSION='v26';
var PRECACHE_URLS=[ var PRECACHE_URLS=[
'/RomPatcher.js/','/RomPatcher.js/index.html', '/RomPatcher.js/','/RomPatcher.js/index.html',
'/RomPatcher.js/manifest.json', '/RomPatcher.js/manifest.json',
'/RomPatcher.js/style/favicon.png', '/RomPatcher.js/style/app_icon_16.png',
'/RomPatcher.js/style/logo114.png', '/RomPatcher.js/style/app_icon_114.png',
'/RomPatcher.js/style/logo144.png', '/RomPatcher.js/style/app_icon_144.png',
'/RomPatcher.js/style/logo192.png', '/RomPatcher.js/style/app_icon_192.png',
'/RomPatcher.js/style/app_icon_maskable.png',
'/RomPatcher.js/style/logo.png',
'/RomPatcher.js/style/RomPatcher.css', '/RomPatcher.js/style/RomPatcher.css',
'/RomPatcher.js/style/icon_close.svg',
'/RomPatcher.js/style/icon_github.svg',
'/RomPatcher.js/style/icon_heart.svg',
'/RomPatcher.js/style/icon_settings.svg',
'/RomPatcher.js/js/RomPatcher.js', '/RomPatcher.js/js/RomPatcher.js',
'/RomPatcher.js/js/locale.js', '/RomPatcher.js/js/locale.js',
'/RomPatcher.js/js/worker_apply.js', '/RomPatcher.js/js/worker_apply.js',

108
index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html translate="no">
<head> <head>
<title>Rom Patcher JS</title> <title>Rom Patcher JS</title>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="content-Type" content="text/html; charset=UTF-8"/>
@ -7,14 +7,19 @@
<meta name="keywords" content="ips,ups,aps,bps,rup,ninja,ppf,xdelta,patcher,online,html5,web,rom,patch,hack,translation"/> <meta name="keywords" content="ips,ups,aps,bps,rup,ninja,ppf,xdelta,patcher,online,html5,web,rom,patch,hack,translation"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <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="manifest" href="./manifest.json"/>
<link rel="shortcut icon" href="./style/favicon.png" type="image/png" sizes="16x16"/> <link rel="shortcut icon" href="./style/app_icon_16.png" type="image/png" sizes="16x16"/>
<link rel="shortcut icon" href="./style/logo192.png" type="image/png" sizes="192x192"/> <link rel="shortcut icon" href="./style/app_icon_192.png" type="image/png" sizes="192x192"/>
<!-- iOS icons --> <!-- iOS icons -->
<link rel="apple-touch-icon" sizes="57x57" href="./style/logo114.png" /> <link rel="apple-touch-icon" sizes="57x57" href="./style/app_icon_114.png" />
<link rel="apple-touch-icon" sizes="114x114" href="./style/logo114.png" /> <link rel="apple-touch-icon" sizes="114x114" href="./style/app_icon_114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="./style/logo144.png" /> <link rel="apple-touch-icon" sizes="72x72" href="./style/app_icon_144.png" />
<link rel="apple-touch-icon" sizes="144x144" href="./style/logo144.png" /> <link rel="apple-touch-icon" sizes="144x144" href="./style/app_icon_144.png" />
<link rel="apple-touch-icon" href="./style/logo192.png" /> <link rel="apple-touch-icon" href="./style/app_icon_192.png" />
<!-- cache -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- social network metatags --> <!-- social network metatags -->
<meta name="twitter:site" content="@marc_robledo"> <meta name="twitter:site" content="@marc_robledo">
@ -82,39 +87,39 @@
<!-- HEADER --> <!-- HEADER -->
<header><img src="./style/logo192.png" /><h1>Rom Patcher JS</h1></header> <header><img src="./style/logo.png" /><h1>Rom Patcher JS</h1></header>
<!-- APP --> <!-- APP -->
<div id="wrapper"> <div id="wrapper">
<div id="switch-container"><span id="switch-create-button"><span data-localize="creator_mode">Creator mode</span> <span id="switch-create" class="switch disabled"></span></span></div> <div id="switch-container"><span id="switch-create-button" class="button-outer"><span data-localize="creator_mode">Creator mode</span> <span id="switch-create" class="switch disabled"></span></span></div>
<div id="tab0" class="tab"> <div id="tab0" class="tab">
<div class="row"> <div class="row m-b">
<div class="leftcol"><label for="input-file-rom" data-localize="rom_file">ROM file:</label></div> <div class="leftcol text-right"><label for="input-file-rom" data-localize="rom_file">ROM file:</label></div>
<div class="rightcol"> <div class="rightcol">
<input type="file" id="input-file-rom" class="enabled" /> <input type="file" id="input-file-rom" class="enabled" />
</div> </div>
</div> </div>
<div class="row" id="rom-info"> <div class="row m-b" id="rom-info">
<div class="leftcol">CRC32:</div><div class="rightcol"><span id="crc32"></span></div> <div class="leftcol text-right">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 text-right">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 class="leftcol text-right">SHA-1:</div><div class="rightcol"><span id="sha1"></span></div>
</div> </div>
<div class="row hide" id="row-removeheader"> <div class="row m-b hide" id="row-removeheader">
<div class="leftcol"></div> <div class="leftcol text-right"></div>
<div class="rightcol"> <div class="rightcol">
<input type="checkbox" id="checkbox-removeheader" /> <label for="checkbox-removeheader" data-localize="remove_header">Remove header before patching</label> <input type="checkbox" id="checkbox-removeheader" /> <label for="checkbox-removeheader" data-localize="remove_header">Remove header before patching</label>
</div> </div>
</div> </div>
<div class="row hide" id="row-addheader"> <div class="row m-b hide" id="row-addheader">
<div class="leftcol"></div> <div class="leftcol text-right"></div>
<div class="rightcol"> <div class="rightcol">
<input type="checkbox" id="checkbox-addheader" /> <label for="checkbox-addheader" data-localize="add_header">Add temporary header</label> <small>(<label id="headersize" for="checkbox-addheader"></label>)</small> <input type="checkbox" id="checkbox-addheader" /> <label for="checkbox-addheader" data-localize="add_header">Add temporary header</label> <small>(<label id="headersize" for="checkbox-addheader"></label>)</small>
</div> </div>
</div> </div>
<div class="row" id="row-file-patch"> <div class="row m-b" id="row-file-patch">
<div class="leftcol"><label for="input-file-patch" data-localize="patch_file">Patch file:</label></div> <div class="leftcol text-right"><label for="input-file-patch" data-localize="patch_file">Patch file:</label></div>
<div class="rightcol"> <div class="rightcol">
<input type="file" id="input-file-patch" accept=".ips,.ups,.bps,.aps,.rup,.ppf,.mod,.xdelta,.zip"/> <input type="file" id="input-file-patch" accept=".ips,.ups,.bps,.aps,.rup,.ppf,.mod,.xdelta,.zip"/>
</div> </div>
@ -129,22 +134,22 @@
<div id="tab1" class="tab"> <div id="tab1" class="tab">
<div class="row"> <div class="row m-b">
<div class="leftcol"><label for="input-file-rom1" data-localize="original_rom" >Original ROM:</label></div> <div class="leftcol text-right"><label for="input-file-rom1" data-localize="original_rom" >Original ROM:</label></div>
<div class="rightcol"> <div class="rightcol">
<input type="file" id="input-file-rom1" /> <input type="file" id="input-file-rom1" />
</div> </div>
</div> </div>
<div class="row"> <div class="row m-b">
<div class="leftcol"><label for="input-file-rom2" data-localize="modified_rom">Modified ROM:</label></div> <div class="leftcol text-right"><label for="input-file-rom2" data-localize="modified_rom">Modified ROM:</label></div>
<div class="rightcol"> <div class="rightcol">
<input type="file" id="input-file-rom2" /> <input type="file" id="input-file-rom2" />
</div> </div>
</div> </div>
<div class="row"> <div class="row m-b">
<div class="leftcol" data-localize="patch_type">Patch type:</div> <div class="leftcol text-right" data-localize="patch_type">Patch type:</div>
<div class="rightcol"> <div class="rightcol">
<select id="select-patch-type"> <select id="select-patch-type">
<option value="ips">IPS</option> <option value="ips">IPS</option>
@ -171,7 +176,32 @@
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<div> <div>
<select id="select-language"> <button id="button-settings" class="button-outer"><img src="style/icon_settings.svg" class="icon settings" /> <span data-localize="settings">Settings</span></button>
</div>
Rom Patcher JS <small>v2.6</small> by <a href="/">Marc Robledo</a>
<br />
<img src="style/icon_github.svg" class="icon github" /> <a href="https://github.com/marcrobledo/RomPatcher.js/" target="_blank">See on GitHub</a>
<img src="style/icon_heart.svg" class="icon heart" /> <a href="https://www.paypal.me/marcrobledo/5" target="_blank" rel="nofollow">Donate</a>
</footer>
</div>
<!-- SETTINGS DIALOG -->
<div id="dialog-backdrop">
<div id="zip-dialog" class="dialog">
<div id="zip-dialog-message" class="text-center"></div>
<ul id="zip-dialog-file-list"></ul>
</div>
<div id="settings-dialog" class="dialog">
<div class="text-right m-b"><img id="settings-close-dialog" src="style/icon_close.svg" /></div>
<div class="row m-b">
<div class="leftcol"><label for="select-language">Language</label></div>
<div class="rightcol text-right">
<select id="select-language" class="enabled w100">
<option value="en">English</option> <option value="en">English</option>
<option value="fr">Français</option> <option value="fr">Français</option>
<option value="de">Deutsch</option> <option value="de">Deutsch</option>
@ -182,14 +212,20 @@
<option value="pt-br">Português Brasileiro</option> <option value="pt-br">Português Brasileiro</option>
<option value="ru">Russian</option> <option value="ru">Russian</option>
<option value="ja">日本語</option> <option value="ja">日本語</option>
<option value="zh_CN">中文（简体）</option> <option value="zh-cn">中文（简体）</option>
</select> </select>
</div> </div>
</div>
Rom Patcher JS <small>v2.5.2</small> by <a href="/">Marc Robledo</a> <div class="row m-b">
<br /> <div class="leftcol-lg"><label data-localize="alternate_output_name">Use patch name for output</label></div>
<i class="icon github"></i> <a href="https://github.com/marcrobledo/RomPatcher.js/" target="_blank">See on GitHub</a> <div class="rightcol-lg text-right"><span id="switch-output-name" class="switch disabled"></span></div>
<i class="icon heart"></i> <a href="https://www.paypal.me/marcrobledo/5" target="_blank" rel="nofollow">Donate</a> </div>
</footer>
</div></body></html> <div class="row m-b">
<div class="leftcol-lg"><label data-localize="light_theme">Light theme</label></div>
<div class="rightcol-lg text-right"><span id="switch-theme" class="switch disabled"></span></div>
</div>
</div>
</div>
</body></html>

150
js/RomPatcher.js
View file

@ -1,4 +1,4 @@
/* Rom Patcher JS v20210920 - Marc Robledo 2016-2021 - http://www.marcrobledo.com/license */ /* Rom Patcher JS v20220319 - Marc Robledo 2016-2022 - http://www.marcrobledo.com/license */
const TOO_BIG_ROM_SIZE=67108863; const TOO_BIG_ROM_SIZE=67108863;
const HEADERS_INFO=[ const HEADERS_INFO=[
@ -21,7 +21,6 @@ else if(location.protocol==='https:' && 'serviceWorker' in navigator && window.l
var romFile, patchFile, patch, romFile1, romFile2, tempFile, headerSize, oldHeader; var romFile, patchFile, patch, romFile1, romFile2, tempFile, headerSize, oldHeader;
var userLanguage;
var CAN_USE_WEB_WORKERS=true; var CAN_USE_WEB_WORKERS=true;
var webWorkerApply,webWorkerCreate,webWorkerCrc; var webWorkerApply,webWorkerCreate,webWorkerCrc;
@ -94,7 +93,7 @@ try{
/* Shortcuts */ /* Shortcuts */
function addEvent(e,ev,f){e.addEventListener(ev,f,false)} function addEvent(e,ev,f){e.addEventListener(ev,f,false)}
function el(e){return document.getElementById(e)} function el(e){return document.getElementById(e)}
function _(str){return userLanguage[str] || str} function _(str){return (LOCALIZATION[AppSettings.langCode] && LOCALIZATION[AppSettings.langCode][str]) || LOCALIZATION['en'][str] || str}
@ -190,19 +189,19 @@ function _parseROM(){
setTabApplyEnabled(false); setTabApplyEnabled(false);
}else{ }else{
if(headerSize=canHaveFakeHeader(romFile)){ if(headerSize=canHaveFakeHeader(romFile)){
el('row-addheader').className='row'; el('row-addheader').className='row m-b';
if(headerSize<1024){ if(headerSize<1024){
el('headersize').innerHTML=headerSize+'b'; el('headersize').innerHTML=headerSize+'b';
}else{ }else{
el('headersize').innerHTML=parseInt(headerSize/1024)+'kb'; el('headersize').innerHTML=parseInt(headerSize/1024)+'kb';
} }
el('row-removeheader').className='row hide'; el('row-removeheader').className='row m-b hide';
}else if(headerSize=hasHeader(romFile)){ }else if(headerSize=hasHeader(romFile)){
el('row-addheader').className='row hide'; el('row-addheader').className='row m-b hide';
el('row-removeheader').className='row'; el('row-removeheader').className='row m-b';
}else{ }else{
el('row-addheader').className='row hide'; el('row-addheader').className='row m-b hide';
el('row-removeheader').className='row hide'; el('row-removeheader').className='row m-b hide';
} }
updateChecksums(romFile, 0); updateChecksums(romFile, 0);
@ -211,23 +210,73 @@ function _parseROM(){
function setLanguage(langCode){
if(typeof LOCALIZATION[langCode]==='undefined')
langCode='en';
userLanguage=LOCALIZATION[langCode];
document.documentElement.lang=langCode;
var UI={
localize:function(){
if(typeof LOCALIZATION[AppSettings.langCode]==='undefined')
return false;
var translatableElements=document.querySelectorAll('*[data-localize]'); var translatableElements=document.querySelectorAll('*[data-localize]');
for(var i=0; i<translatableElements.length; i++){ for(var i=0; i<translatableElements.length; i++){
translatableElements[i].innerHTML=_(translatableElements[i].dataset.localize); translatableElements[i].innerHTML=_(translatableElements[i].dataset.localize);
} }
},
if(typeof localStorage!=='undefined'){ showDialog:function(id){
localStorage.setItem('rompatcher-js-lang', langCode); el('dialog-backdrop').className='show';
el(id+'-dialog').className='dialog show';
},
hideDialog:function(id){
el('dialog-backdrop').className='';
el(id+'-dialog').className='dialog';
},
isDialogOpen:function(id){
return el(id+'-dialog').className==='dialog show';
},
setLightTheme:function(val){
if(val){
document.body.className='light';
}else{
document.body.className='';
} }
} }
};
var AppSettings={
langCode:(typeof navigator.userLanguage==='string')? navigator.userLanguage.substr(0,2) : 'en',
outputFileNameMatch:false,
lightTheme:false,
load:function(){
if(typeof localStorage!=='undefined' && localStorage.getItem('rompatcher-js-settings')){
try{
var loadedSettings=JSON.parse(localStorage.getItem('rompatcher-js-settings'));
if(typeof loadedSettings.langCode==='string' && typeof LOCALIZATION[loadedSettings.langCode]){
this.langCode=loadedSettings.langCode;
el('select-language').value=this.langCode;
}
if(loadedSettings.outputFileNameMatch===true){
this.outputFileNameMatch=loadedSettings.outputFileNameMatch;
el('switch-output-name').className='switch enabled';
}
if(loadedSettings.lightTheme===true){
this.lightTheme=loadedSettings.lightTheme;
el('switch-theme').className='switch enabled';
UI.setLightTheme(true);
}
}catch(ex){
console.error('Error while loading settings: '+ex.message);
}
}
},
save:function(){
if(typeof localStorage!=='undefined')
localStorage.setItem('rompatcher-js-settings', JSON.stringify(this));
}
};
/* initialize app */ /* initialize app */
addEvent(window,'load',function(){ addEvent(window,'load',function(){
@ -243,12 +292,9 @@ addEvent(window,'load',function(){
document.getElementsByTagName('head')[0].appendChild(script); document.getElementsByTagName('head')[0].appendChild(script);
} }
/* language */ /* load settings */
var langCode=(navigator.language || navigator.userLanguage).substr(0,2); AppSettings.load();
if(typeof localStorage!=='undefined' && localStorage.getItem('rompatcher-js-lang')) UI.localize();
langCode=localStorage.getItem('rompatcher-js-lang');
el('select-language').value=langCode;
setLanguage(langCode);
el('row-file-patch').title=_('compatible_formats')+' IPS, UPS, APS, BPS, RUP, PPF, MOD (Paper Mario Star Rod), xdelta'; el('row-file-patch').title=_('compatible_formats')+' IPS, UPS, APS, BPS, RUP, PPF, MOD (Paper Mario Star Rod), xdelta';
@ -346,6 +392,55 @@ addEvent(window,'load',function(){
/* event listeners */ /* event listeners */
addEvent(el('button-settings'), 'click', function(){
UI.showDialog('settings');
});
addEvent(window, 'keyup', function(evt){
if(evt.keyCode===27 && UI.isDialogOpen('settings')){
UI.hideDialog('settings');
}
});
addEvent(el('settings-dialog'), 'click', function(evt){
evt.stopPropagation();
});
addEvent(el('zip-dialog'), 'click', function(evt){
evt.stopPropagation();
});
addEvent(el('settings-close-dialog'), 'click', function(){
UI.hideDialog('settings');
});
addEvent(el('dialog-backdrop'), 'click', function(){
if(UI.isDialogOpen('settings')){
UI.hideDialog('settings');
}
});
addEvent(el('select-language'), 'change', function(){
AppSettings.langCode=this.value;
AppSettings.save();
UI.localize();
});
addEvent(el('switch-output-name'), 'click', function(){
if(this.className==='switch enabled'){
this.className='switch disabled';
AppSettings.outputFileNameMatch=false;
}else{
this.className='switch enabled';
AppSettings.outputFileNameMatch=true;
}
AppSettings.save();
});
addEvent(el('switch-theme'), 'click', function(){
if(this.className==='switch enabled'){
this.className='switch disabled';
AppSettings.lightTheme=false;
}else{
this.className='switch enabled';
AppSettings.lightTheme=true;
}
UI.setLightTheme(AppSettings.lightTheme);
AppSettings.save();
});
addEvent(el('input-file-rom'), 'change', function(){ addEvent(el('input-file-rom'), 'change', function(){
setTabApplyEnabled(false); setTabApplyEnabled(false);
romFile=new MarcFile(this, _parseROM); romFile=new MarcFile(this, _parseROM);
@ -365,9 +460,6 @@ addEvent(window,'load',function(){
addEvent(el('button-create'), 'click', function(){ addEvent(el('button-create'), 'click', function(){
createPatch(romFile1, romFile2, el('select-patch-type').value); createPatch(romFile1, romFile2, el('select-patch-type').value);
}); });
addEvent(el('select-language'), 'change', function(){
setLanguage(this.value);
});
@ -507,7 +599,11 @@ function _readPatchFile(){
function preparePatchedRom(originalRom, patchedRom, headerSize){ function preparePatchedRom(originalRom, patchedRom, headerSize){
if(AppSettings.outputFileNameMatch){
patchedRom.fileName=patchFile.fileName.replace(/\.\w+$/i, (/\.\w+$/i.test(originalRom.fileName)? originalRom.fileName.match(/\.\w+$/i)[0] : ''));
}else{
patchedRom.fileName=originalRom.fileName.replace(/\.([^\.]*?)$/, ' (patched).$1'); patchedRom.fileName=originalRom.fileName.replace(/\.([^\.]*?)$/, ' (patched).$1');
}
patchedRom.fileType=originalRom.fileType; patchedRom.fileType=originalRom.fileType;
if(headerSize){ if(headerSize){
if(el('checkbox-removeheader').checked){ if(el('checkbox-removeheader').checked){

11
js/formats/ups.js
View file

@ -1,4 +1,4 @@
/* UPS module for Rom Patcher JS v20180930 - Marc Robledo 2017-2018 - http://www.marcrobledo.com/license */ /* UPS module for Rom Patcher JS v20220315 - Marc Robledo 2017-2022 - http://www.marcrobledo.com/license */
/* File format specification: http://www.romhacking.net/documents/392/ */ /* File format specification: http://www.romhacking.net/documents/392/ */
const UPS_MAGIC='UPS1'; const UPS_MAGIC='UPS1';
@ -58,12 +58,13 @@ UPS.prototype.apply=function(romFile, validate){
} }
/* fix the glitch that cut the end of the file if it's larger than the changed file patch was originally created with */ /* fix the glitch that cut the end of the file if it's larger than the changed file patch was originally created with */
sizeOutput = this.sizeOutput /* more info: https://github.com/marcrobledo/RomPatcher.js/pull/40#issuecomment-1069087423 */
sizeInput = this.sizeInput sizeOutput = this.sizeOutput;
sizeInput = this.sizeInput;
if(!validate && sizeInput < romFile.fileSize){ if(!validate && sizeInput < romFile.fileSize){
sizeInput = romFile.fileSize sizeInput = romFile.fileSize;
if(sizeOutput < sizeInput){ if(sizeOutput < sizeInput){
sizeOutput = sizeInput sizeOutput = sizeInput;
} }
} }

21
js/formats/zip.js
View file

@ -1,4 +1,4 @@
/* ZIP module for Rom Patcher JS v20220109 - Marc Robledo 2016-2022 - http://www.marcrobledo.com/license */ /* ZIP module for Rom Patcher JS v20220319 - Marc Robledo 2016-2022 - http://www.marcrobledo.com/license */
const ZIP_MAGIC='\x50\x4b\x03\x04'; const ZIP_MAGIC='\x50\x4b\x03\x04';
@ -107,17 +107,15 @@ var ZIPManager=(function(){
setTabApplyEnabled(false); setTabApplyEnabled(false);
}else{ }else{
var _evtClickDialogEntry=function(evt){ var _evtClickDialogEntry=function(evt){
document.body.removeChild(this.parentElement.parentElement.parentElement); UI.hideDialog('zip');
_unzipEntry(this.zipEntry, sourceFile); _unzipEntry(this.zipEntry, sourceFile);
} }
if(filteredEntries.length>1){ if(filteredEntries.length>1){
var zipOverlay=document.createElement('div'); document.getElementById('zip-dialog-message').innerHTML=_(sourceFile===romFile?'rom_file':'patch_file');
zipOverlay.className='zip-overlay';
var zipDialog=document.createElement('div'); var zipList=document.getElementById('zip-dialog-file-list');
zipDialog.className='zip-dialog'; zipList.innerHTML='';
var zipList=document.createElement('ul');
zipList.className='zipped-files'
for(var i=0; i<filteredEntries.length; i++){ for(var i=0; i<filteredEntries.length; i++){
var li=document.createElement('li'); var li=document.createElement('li');
li.zipEntry=filteredEntries[i]; li.zipEntry=filteredEntries[i];
@ -125,15 +123,14 @@ var ZIPManager=(function(){
addEvent(li, 'click', _evtClickDialogEntry); addEvent(li, 'click', _evtClickDialogEntry);
zipList.appendChild(li); zipList.appendChild(li);
} }
zipDialog.innerHTML=_(sourceFile===romFile?'rom_file':'patch_file');
zipDialog.appendChild(zipList); UI.showDialog('zip');
zipOverlay.appendChild(zipDialog);
document.body.appendChild(zipOverlay);
}else if(filteredEntries.length===1){ }else if(filteredEntries.length===1){
_unzipEntry(filteredEntries[0], sourceFile); _unzipEntry(filteredEntries[0], sourceFile);
}else{ }else{
if(sourceFile===romFile){ if(sourceFile===romFile){
romFile=null; romFile=null;
setMessage('apply', _('no_valid_file_found'), 'error');
}else if(sourceFile===patchFile){ }else if(sourceFile===patchFile){
patchFile=null; patchFile=null;
setMessage('apply', _('error_invalid_patch'), 'error'); setMessage('apply', _('error_invalid_patch'), 'error');

35
js/locale.js
View file

@ -1,6 +1,9 @@
const LOCALIZATION={ const LOCALIZATION={
'en':{ 'en':{
'creator_mode': 'Creator mode', 'creator_mode': 'Creator mode',
'settings': 'Settings',
'alternate_output_name': 'Use patch name for output',
'light_theme': 'Light theme',
'apply_patch': 'Apply patch', 'apply_patch': 'Apply patch',
'rom_file': 'ROM file:', 'rom_file': 'ROM file:',
@ -28,6 +31,9 @@ const LOCALIZATION={
}, },
'es':{ 'es':{
'creator_mode': 'Modo creador', 'creator_mode': 'Modo creador',
'settings': 'Configuración',
'alternate_output_name': 'Guardar con nombre del parche',
'light_theme': 'Tema claro',
'apply_patch': 'Aplicar parche', 'apply_patch': 'Aplicar parche',
'rom_file': 'Archivo ROM:', 'rom_file': 'Archivo ROM:',
@ -56,6 +62,9 @@ const LOCALIZATION={
}, },
'nl':{ 'nl':{
'creator_mode': 'Creator-modus', 'creator_mode': 'Creator-modus',
'settings': 'Settings',
'alternate_output_name': 'Use patch name for output',
'light_theme': 'Light theme',
'apply_patch': 'Pas patch toe', 'apply_patch': 'Pas patch toe',
'rom_file': 'ROM bestand:', 'rom_file': 'ROM bestand:',
@ -83,6 +92,9 @@ const LOCALIZATION={
}, },
'sv':{ 'sv':{
'creator_mode': 'Skaparläge', 'creator_mode': 'Skaparläge',
'settings': 'Settings',
'alternate_output_name': 'Use patch name for output',
'light_theme': 'Light theme',
'apply_patch': 'Tillämpa korrigeringsfil', 'apply_patch': 'Tillämpa korrigeringsfil',
'rom_file': 'ROM-fil:', 'rom_file': 'ROM-fil:',
@ -110,6 +122,9 @@ const LOCALIZATION={
}, },
'ca':{ 'ca':{
'creator_mode': 'Mode creador', 'creator_mode': 'Mode creador',
'settings': 'Configuració',
'alternate_output_name': 'Desar amb nom del pedaç',
'light_theme': 'Tema clar',
'apply_patch': 'Aplicar pedaç', 'apply_patch': 'Aplicar pedaç',
'rom_file': 'Arxiu ROM:', 'rom_file': 'Arxiu ROM:',
@ -137,6 +152,9 @@ const LOCALIZATION={
}, },
'ru':{ 'ru':{
'creator_mode': 'Режим создания', 'creator_mode': 'Режим создания',
'settings': 'Settings',
'alternate_output_name': 'Use patch name for output',
'light_theme': 'Light theme',
'apply_patch': 'Применить патч', 'apply_patch': 'Применить патч',
'rom_file': 'Файл ROM:', 'rom_file': 'Файл ROM:',
@ -164,6 +182,9 @@ const LOCALIZATION={
}, },
'de':{ 'de':{
'creator_mode': 'Erstellmodus', 'creator_mode': 'Erstellmodus',
'settings': 'Settings',
'alternate_output_name': 'Use patch name for output',
'light_theme': 'Light theme',
'apply_patch': 'Patch anwenden', 'apply_patch': 'Patch anwenden',
'rom_file': 'ROM-Datei:', 'rom_file': 'ROM-Datei:',
@ -191,6 +212,9 @@ const LOCALIZATION={
}, },
'pt-br':{ 'pt-br':{
'creator_mode': 'Modo criador', 'creator_mode': 'Modo criador',
'settings': 'Settings',
'alternate_output_name': 'Use patch name for output',
'light_theme': 'Light theme',
'apply_patch': 'Aplicar patch', 'apply_patch': 'Aplicar patch',
'rom_file': 'Arquivo ROM:', 'rom_file': 'Arquivo ROM:',
@ -218,6 +242,9 @@ const LOCALIZATION={
}, },
'ja':{ 'ja':{
'creator_mode': '作成モード', 'creator_mode': '作成モード',
'settings': 'Settings',
'alternate_output_name': 'Use patch name for output',
'light_theme': 'Light theme',
'apply_patch': 'パッチを当て', 'apply_patch': 'パッチを当て',
'rom_file': 'ROMファィル：', 'rom_file': 'ROMファィル：',
@ -245,6 +272,9 @@ const LOCALIZATION={
}, },
'fr':{ 'fr':{
'creator_mode': 'Mode créateur', 'creator_mode': 'Mode créateur',
'settings': 'Settings',
'alternate_output_name': 'Use patch name for output',
'light_theme': 'Light theme',
'apply_patch': 'Appliquer le patch', 'apply_patch': 'Appliquer le patch',
'rom_file': 'Fichier ROM:', 'rom_file': 'Fichier ROM:',
@ -270,8 +300,11 @@ const LOCALIZATION={
'error_invalid_patch': 'Fichier patch invalide', 'error_invalid_patch': 'Fichier patch invalide',
'warning_too_big': 'L\'utilisation de gros fichiers n\'est pas recommandée.' 'warning_too_big': 'L\'utilisation de gros fichiers n\'est pas recommandée.'
}, },
'zh_CN':{ 'zh-cn':{
'creator_mode': '创建模式', 'creator_mode': '创建模式',
'settings': 'Settings',
'alternate_output_name': 'Use patch name for output',
'light_theme': 'Light theme',
'apply_patch': '打补丁', 'apply_patch': '打补丁',
'rom_file': 'ROM文件：', 'rom_file': 'ROM文件：',

11
manifest.json
View file

@ -3,20 +3,25 @@
"name":"Rom Patcher JS", "name":"Rom Patcher JS",
"icons":[ "icons":[
{ {
"src": "style/logo114.png", "src": "style/app_icon_114.png",
"sizes": "114x114", "sizes": "114x114",
"type": "image/png", "type": "image/png",
"density": "1.0" "density": "1.0"
},{ },{
"src": "style/logo144.png", "src": "style/app_icon_144.png",
"sizes": "144x144", "sizes": "144x144",
"type": "image/png", "type": "image/png",
"density": "1.0" "density": "1.0"
},{ },{
"src": "style/logo192.png", "src": "style/app_icon_192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png", "type": "image/png",
"density": "1.0" "density": "1.0"
},{
"src": "style/app_icon_maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
} }
], ],
"start_url": "index.html", "start_url": "index.html",

232
style/RomPatcher.css
View file

@ -1,5 +1,5 @@
/* Rom Patcher JS CSS template by Marc Robledo v20210815 */ /* Rom Patcher JS CSS template by Marc Robledo v20220323 */
/* minify at https://cssminifier.com/ + https://www.base64-image.de/ */ /* minify at https://cssminifier.com/ */
/* @FONT-FACES */ /* @FONT-FACES */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@ -16,7 +16,7 @@ body{
-webkit-user-select: none; -webkit-user-select: none;
-ms-user-select:none; -ms-user-select:none;
-o-user-select:none; -o-user-select:none;
user-select:none user-select:none;
} }
/* flex main column */ /* flex main column */
@ -27,7 +27,7 @@ html, body{height:100%}
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
} }
header{padding: 1% 0 4%} header{margin: 1% 0 4%}
header h1{display:none} header h1{display:none}
footer{padding: 50px 0 20px} footer{padding: 50px 0 20px}
#wrapper{flex-basis:100%} #wrapper{flex-basis:100%}
@ -35,8 +35,9 @@ footer{padding: 50px 0 20px}
.clickable{cursor:pointer} .clickable{cursor:pointer}
.hide{display:none !important} .hide{display:none !important}
.text-center{text-align:center}
.text-right{text-align:right}
.m-b{margin-bottom:8px}
/* flex box */ /* flex box */
.row{ .row{
display:flex; display:flex;
@ -44,27 +45,23 @@ footer{padding: 50px 0 20px}
align-items:center; /* vertical align */ align-items:center; /* vertical align */
justify-content:space-between justify-content:space-between
} }
.leftcol{width:28%;text-align:right} .leftcol{width:28%}
.rightcol{width:70%} .rightcol{width:70%}
.leftcol,.rightcol{margin-bottom:8px} .leftcol-md{width:60%}
.rightcol-md{width:40%}
.leftcol-lg{width:70%}
.rightcol-lg{width:30%}
/* icons */ /* icons */
footer .icon, #crc32.valid:after{ .icon{
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; display:inline-block;
vertical-align:middle; vertical-align:middle;
width:16px;height:16px 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}
@ -76,7 +73,7 @@ footer .icon.check{background-position:-32px 0px}
/* header+footer */ /* header+footer */
header{text-align:center} header{text-align:center}
header h1{margin:0} header h1{margin:0}
header img{max-width:90%} header img{max-width:90%; height:192px;}
footer{ footer{
text-align:center; text-align:center;
@ -97,11 +94,28 @@ footer a:hover{
hr{border:none;border-top:1px dotted #bbb;margin:15px 0} hr{border:none;border-top:1px dotted #bbb;margin:15px 0}
/* outer buttons */
.button-outer{
background-color:transparent;
color:white;
cursor:pointer;
text-align:center;
}
.button-outer:hover,.button-outer:focus{
background-color:#2b2e33;
cursor:pointer;
}
.button-outer img{
height:16px;
display:inline-block;
vertical-align:middle;
}
/* Switch mode */ /* Switch mode */
#switch-container{ #switch-container{
visibility:hidden; visibility:hidden;
text-align:right; text-align:right;
color:white;
margin-bottom:10px; margin-bottom:10px;
font-size:88%; font-size:88%;
} }
@ -110,19 +124,18 @@ hr{border:none;border-top:1px dotted #bbb;margin:15px 0}
padding: 6px 8px; padding: 6px 8px;
transition:background-color .1s; transition:background-color .1s;
} }
#switch-create-button:hover{
background-color:#2b2e33;
cursor:pointer;
}
.switch{ .switch{
background-color:#474c56;
display:inline-block; display:inline-block;
vertical-align:middle; vertical-align:middle;
width:30px;height:16px; width:30px;height:16px;
border-radius:8px; border-radius:8px;
position:relative; position:relative;
transition:background-color .2s; transition:background-color .2s;
background-color:#babfbf;
} }
#switch-create-button .switch.disabled{background-color:#474c56;}
#settings-dialog .switch{transition:opacity .1s;}
#settings-dialog .switch:hover{cursor:pointer;opacity:.7}
.switch:before{ .switch:before{
position:absolute; position:absolute;
background-color:white; background-color:white;
@ -136,10 +149,7 @@ hr{border:none;border-top:1px dotted #bbb;margin:15px 0}
.switch.enabled:before{ .switch.enabled:before{
left:16px; left:16px;
} }
.switch.enabled{ .switch.enabled{background-color:#41bdc7;}
background-color:#00a5ff;
background-color:#41bdc7;
}
@ -165,6 +175,7 @@ input[type=file],select{
border-radius:3px; border-radius:3px;
background-color:#edefef; background-color:#edefef;
} }
input[type=file].w100, select.w100{width:100%}
input[type=file]{padding:6px 10px} input[type=file]{padding:6px 10px}
select{ select{
padding:6px 18px 6px 10px; padding:6px 18px 6px 10px;
@ -180,17 +191,7 @@ select::-ms-expand{display:none}
input[type=file].enabled:hover,select.enabled:hover{background-color:#dee1e1} input[type=file].enabled:hover,select.enabled:hover{background-color:#dee1e1}
input[type=file].disabled,select.disabled{background-color:transparent} input[type=file].disabled,select.disabled{background-color:transparent}
#select-language{
background-color:transparent;
color:white;
cursor:pointer;
text-align:center;
background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJmaWxsOiNmZmYiIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
}
#select-language:hover,#select-language:focus{
background-color:#2b2e33;
cursor:pointer;
}
@ -245,21 +246,23 @@ button.no-text.with-icon:before{margin-right:0px}
#crc32.valid:after{ #crc32.valid:after{
background-position:0px 0px;
display:inline-block; display:inline-block;
vertical-align:middle; vertical-align:middle;
width:16px;height:16px;
background-position:-32px 0px;
content:""; content:"";
width:16px;height:16px;
margin-left:4px; margin-left:4px;
/*content:" \002713"}*/
background-size:100% 100%;
background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSBzdHJva2U9IiMwODAiIHN0cm9rZS13aWR0aD0iODgiIHgxPSIyMjciIHgyPSI0NzQuMzEiIHkxPSIzNDMiIHkyPSI5NS42OSIvPjxsaW5lIHN0cm9rZT0iIzA4MCIgc3Ryb2tlLXdpZHRoPSI4OCIgeDE9IjU0IiB4Mj0iMjM3LjUxIiB5MT0iMjExIiB5Mj0iMzk0LjUxIi8+PC9zdmc+");
} }
.message{padding: 3px 10px; border-radius:3px;display:inline-block;vertical-align:middle} .message{padding: 5px 10px; border-radius:3px;display:inline-block;vertical-align:middle}
.message.error{background-color:#de4205; color:white} .message.error{background-color:#de4205; color:white}
.message.warning{background-color:#ffec68; color:black} .message.warning{background-color:#ffec68; color:black}
@ -307,7 +310,98 @@ button.no-text.with-icon:before{margin-right:0px}
/* dialogs */
#dialog-backdrop{
position:fixed;
display:flex;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.75);
margin:0;
padding:0;
display:none;
}
#dialog-backdrop.show{display:flex}
.dialog{
vertical-align:middle;
margin:auto;
background-color:white;
color:#999;
box-sizing:border-box;
box-shadow:rgba(0,0,0,.7) 0 0 24px;
padding:20px;
border-radius:3px;
display:none;
}
.dialog.show{display:block}
/* settings dialog */
#settings-dialog{
min-width:400px;
max-width:90%;
}
#settings-close-dialog{
padding:8px;
border-radius:30px;
margin-right:-8px;
margin-top:-8px;
transition:background-color .2s;
height:24px;
}
#settings-close-dialog:hover{
cursor:pointer;
background-color:#f4f4f4;
}
/* ZIP dialog */
#zip-dialog{
min-width:360px;
}
#zip-dialog-file-list{
list-style:none;
padding:0;
margin: 0;
max-height:300px;
overflow-y:auto;
}
#zip-dialog-file-list li{
color:#3c3c3c;
padding: 2px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#zip-dialog-file-list li:hover{
background-color:#eee;
cursor:pointer;
color: black;
border-radius: 3px;
}
/* light theme */
body.light{background-color:#eeeceb;}
body.light .button-outer{color:#575b66;}
body.light footer img.icon.settings, body.light footer img.icon.github{filter: invert(0%) brightness(30%);}
body.light .button-outer:hover, body.light .button-outer:focus{background-color: #e6e3e1}
body.light .switch.enabled{background-color:#ff941e;}
body.light #switch-create.disabled{background-color:#cec5bd;}
body.light button:not(.button-outer){background-color:#f9a345;}
body.light button:not(.button-outer):not(:disabled):hover{background-color:#ffbe78;}
body.light header img{filter: hue-rotate(98rad) brightness(97.9%) saturate(160%)}
body.light footer{color:#a89d97}
body.light footer a{color:#8c817c; border-color:#e3d4cc}
body.light footer a:hover{color:#484543; border-color:#ffac41}
@ -316,55 +410,5 @@ button.no-text.with-icon:before{margin-right:0px}
#wrapper{font-size:14px} #wrapper{font-size:14px}
#rom-info{font-size:11px} #rom-info{font-size:11px}
header img{max-height:96px} header img{max-height:96px}
} #settings-dialog, #zip-dialog{min-width: auto;}
/* 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;
} }

0
style/logo114.png → style/app_icon_114.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Before After
Before After

0
style/logo144.png → style/app_icon_144.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

0
style/favicon.png → style/app_icon_16.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 202 B

After

Width:  |  Height:  |  Size: 202 B

Before After
Before After

0
style/logo192.png → style/app_icon_192.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before After
Before After

BIN
style/app_icon_maskable.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

4
style/icon_close.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
<line stroke="#888" stroke-width="64" x1="16" x2="496" y1="16" y2="496"/>
<line stroke="#888" stroke-width="64" x1="496" x2="16" y1="16" y2="496"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 221 B

4
style/icon_github.svg Normal file
View file

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<!-- from https://github.com/simple-icons/simple-icons -->
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" fill="#fff" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 865 B

3
style/icon_heart.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
<path d="m135.81,62.13c-0.25,0.22 -3.37,0.63 -6.95,0.93c-13.9,1.13 -37.6,9.39 -50.16,17.47c-3.89,2.51 -7.33,4.55 -7.67,4.56c-0.99,0.03 -15.22,12.54 -19.79,17.39c-11.94,12.72 -19.85,26.1 -27.72,46.87c-5.01,13.19 -7.02,42.47 -4.09,59.8c5.9,35.18 27.87,69.21 67.68,104.88c103.21,82.78 106.19,85.08 106.71,85.45c0.52,0.37 60.38,45.75 61.69,45.75c49.02,-36.35 52.15,-38.5 55.2,-40.84c3.06,-2.33 5.99,-4.55 6.49,-4.91c94.85,-74.83 100.68,-80.06 106.71,-85.45c39.81,-35.66 61.78,-69.71 67.69,-104.88c2.91,-17.33 0.9,-46.62 -4.09,-59.8c-7.87,-20.76 -15.8,-34.15 -27.73,-46.87c-4.54,-4.86 -18.78,-17.37 -19.79,-17.39c-0.35,-0.01 -3.78,-2.05 -7.67,-4.56c-10.61,-6.83 -28.74,-13.61 -46.45,-17.38c-7.34,-1.57 -44.42,-1.18 -52.53,0.55c-9.8,2.08 -23.74,6.9 -32.84,11.36c-2.91,1.42 -17.78,10.71 -19.62,12.25c-0.59,0.5 -3.02,2.51 -5.38,4.47c-4.35,3.6 -13.05,12 -17.57,16.95l-2.44,2.68l-2.44,-2.68c-4.52,-4.96 -13.22,-13.36 -17.57,-16.95c-2.36,-1.96 -4.79,-3.97 -5.38,-4.47c-11.06,-9.24 -34.63,-19.86 -52.16,-23.52c-7.15,-1.49 -40.83,-2.81 -42.16,-1.65" fill="#e74c3c" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
style/icon_settings.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="256" cy="256" fill="transparent" rx="80" ry="80" stroke="#ffffff" stroke-width="36"/>
<path d="m201.85,509.06c-12.76,-2.99 -24.81,-13.35 -29.03,-24.91c-0.93,-2.29 -2.88,-11.86 -4.53,-21.32c-4.01,-22.92 -7.62,-29.5 -19.45,-35.08c-4.73,-2.19 -7.1,-2.69 -13.07,-2.69c-6.28,0.1 -9.26,0.9 -24.19,6.48c-16.88,6.28 -16.98,6.28 -27.79,6.38c-9.98,0 -11.32,-0.2 -17.5,-3.09c-3.71,-1.69 -8.75,-5.08 -11.32,-7.67c-5.46,-5.38 -50.74,-80.42 -53.83,-89.38c-2.68,-7.57 -1.96,-19.63 1.54,-27.1c3.81,-7.77 7.51,-11.76 22.13,-23.32c7.2,-5.78 14.2,-11.86 15.54,-13.35c8.85,-10.86 9.06,-26.71 0.31,-37.47c-1.13,-1.4 -8.23,-7.47 -15.75,-13.55c-14.92,-11.86 -18.22,-15.45 -22.13,-23.52c-3.6,-7.47 -4.32,-19.53 -1.75,-27.1c51.36,-88.39 53.94,-91.77 65.26,-97.06c6.18,-2.89 7.51,-3.09 17.5,-3.09c42.71,11.96 45.7,12.76 51.98,12.86c12.04,0.1 21.72,-5.78 27.38,-16.54c8.44,-40.45 9.78,-44.74 14.21,-51.01c4.32,-6.08 9.78,-10.36 17.6,-13.95l6.69,-3.09c81.32,-0.5 101.49,-0.2 104.68,0.4c12.45,2.59 22.44,10.16 28.1,21.32c9.88,44.24 12.15,50.02 18.63,55.5c6.18,5.18 12.15,7.37 20.48,7.27c6.38,0 9.26,-0.8 24.19,-6.38c16.88,-6.28 16.98,-6.28 27.79,-6.38c9.98,0 13.82,-0.8 19.5,3.09l62.53,94.57c1.34,2.89 1.75,6.68 1.85,13.95c0,8.67 -0.31,10.66 -2.68,15.45c-4.01,8.07 -7.41,11.76 -22.64,23.92c-14.72,11.86 -18.53,16.34 -21,24.21c-1.96,6.28 -1.96,9.07 0,15.35c2.47,7.97 6.48,12.66 21,24.21c15.03,11.96 18.63,15.84 22.64,23.92c2.37,4.78 2.68,6.78 2.68,15.45c-0.1,7.27 -0.21,5.15 -1.85,13.95c-1.64,8.8 -49.52,90.81 -60.74,96.08c-6.18,2.89 -11.3,1.58 -21.29,1.58c-10.81,-0.1 -10.91,-0.1 -27.79,-6.38c-14.92,-5.58 -17.91,-6.38 -24.19,-6.48c-12.04,-0.1 -21.72,5.78 -27.38,16.54c-1.24,2.39 -3.29,10.76 -5.15,21.03c-1.54,9.37 -3.71,19.13 -4.73,21.82c-3.5,9.57 -9.28,21.79 -24.17,24.58c-14.89,2.79 -108.09,0.53 -110.25,0.03l-0.01,-0.03zm96.03,-38.96c0,-0.2 1.34,-7.97 3.09,-17.44c4.43,-24.71 9.47,-35.47 22.54,-47.73c14.51,-13.75 35.61,-21.32 54.65,-19.83c9.98,0.8 12.76,1.49 31.7,8.17c8.65,3.09 15.85,5.38 15.95,5.18c38.7,-64.77 42.72,-72.24 41.69,-73.14c-0.72,-0.6 -6.59,-5.28 -12.87,-10.36c-14.82,-11.76 -20.79,-18.34 -25.94,-28.4c-5.76,-11.06 -7.62,-18.83 -7.62,-31.49c0,-12.66 1.85,-20.43 7.62,-31.49c5.15,-10.06 11.12,-16.64 25.94,-28.4l12.87,-10.36l-41.69,-73.14c-0.1,-0.2 -7.31,2.09 -15.95,5.18c-18.94,6.68 -21.72,7.37 -31.7,8.17c-19.04,1.49 -40.24,-6.18 -54.76,-19.73c-12.87,-12.26 -18.12,-23.22 -22.44,-47.83c-1.75,-9.47 -3.09,-17.24 -3.09,-17.34l-86.46,0c0,0.1 -1.34,7.87 -3.09,17.34c-4.32,24.61 -9.37,35.18 -22.34,47.63c-14.41,13.75 -35.72,21.42 -54.86,19.93c-9.98,-0.8 -12.76,-1.49 -31.7,-8.17c-8.65,-3.09 -15.85,-5.38 -15.95,-5.18c-3.19,3.89 -42.72,72.14 -42.2,72.64c0.41,0.4 6.38,5.18 13.17,10.66c14.41,11.56 19.87,17.24 25.01,26.21c6.18,10.66 8.65,20.53 8.65,33.88c0,13.35 -2.47,23.22 -8.65,33.88c-5.15,8.97 -10.6,14.65 -25.01,26.21c-6.79,5.48 -12.76,10.26 -13.17,10.66c-0.51,0.5 39.01,68.76 42.2,72.64c0.1,0.2 7.31,-2.09 15.95,-5.18c21.31,-7.57 23.36,-7.97 35.82,-8.07c12.87,0 20.79,1.79 32.42,7.37c9.37,4.48 13.99,6.88 23.36,17.64c9.37,10.76 13.79,21.52 17.29,42.15c3.5,20.63 2.37,13.65 2.68,15.25l0.62,2.69c66.8,0 86.26,-0.1 86.26,-0.2l0.01,0z" fill="#ffffff" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
style/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.9 KiB