mirror of
https://github.com/marcrobledo/RomPatcher.js.git
synced 2025-06-27 16:25:54 +00:00
version 3.0
This commit is contained in:
Marc Robledo
parent
20a97ae39f
commit
f7014075ec
86 changed files with 7587 additions and 238 deletions
BIN
webapp/app_icon_114.png
Normal file
BIN
webapp/app_icon_114.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
webapp/app_icon_144.png
Normal file
BIN
webapp/app_icon_144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
webapp/app_icon_16.png
Normal file
BIN
webapp/app_icon_16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 B |
BIN
webapp/app_icon_192.png
Normal file
BIN
webapp/app_icon_192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
webapp/app_icon_maskable.png
Normal file
BIN
webapp/app_icon_maskable.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
1
webapp/icon_close.svg
Normal file
1
webapp/icon_close.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><line stroke="#888" stroke-width="4" x1="1" x2="31" y1="1" y2="31"/><line stroke="#888" stroke-width="4" x1="31" x2="1" y1="1" y2="31"/></svg>
|
||||
|
After Width: | Height: | Size: 206 B |
2
webapp/icon_github.svg
Normal file
2
webapp/icon_github.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<!-- from octicon https://github.com/primer/octicons/ -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 760 B |
1
webapp/icon_heart.svg
Normal file
1
webapp/icon_heart.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M4.3,2.1C2.816504,2.218309 1.4015208,3.1679153 0.87398438,4.58375 0.34678348,5.8777663 0.60547985,7.4216259 1.4467505,8.5260791 2.428738,9.9126453 3.9007302,10.812811 5.1733475,11.900144 6.1025539,12.652873 7.0572605,13.374847 8.03,14.07 9.8414762,12.741487 11.62015,11.365101 13.338177,9.9179978 14.534069,8.8670814 15.617932,7.3839163 15.42875,5.70625 15.351533,4.1060809 14.135607,2.6806679 12.60355,2.2616895 11.873602,2.0258183 11.076327,2.0638822 10.328633,2.1798242 9.4188311,2.3910696 8.6202638,2.9340558 8.02,3.64 7.2081279,2.6482215 5.9494781,2.0210606 4.6572266,2.0850586 4.5320909,2.0883379 4.4030623,2.0709127 4.28,2.1" fill="#e74c3c" /></svg>
|
||||
|
After Width: | Height: | Size: 729 B |
1
webapp/icon_settings.svg
Normal file
1
webapp/icon_settings.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><ellipse cx="8" cy="8" fill="transparent" rx="2.5" ry="2.5" stroke="#ffffff" stroke-width="1.13" style="fill:none" /><path d="M 6.34,15.93 C 5.4588832,15.789025 5.3688301,14.771577 5.1756353,14.070626 4.88526,12.736602 3.4341324,13.644518 2.5971627,13.722372 1.429913,13.634857 1.20405,12.274774 0.57110457,11.527239 0.01256473,10.862766 -0.28025442,9.5563977 0.70078865,9.1307029 1.6881819,8.6864782 1.6795687,7.1576053 0.59919067,6.8587653 -0.3188158,6.2116572 0.07040277,5.0345832 0.70962743,4.3579058 1.1458066,3.5997233 1.4745511,2.6165206 2.3772581,2.2995448 3.2853269,2.2266882 4.6163607,3.3077881 5.1380438,2.0525892 5.3177552,1.1958744 5.5325932,-0.04373646 6.6754583,0.01614659 7.7138044,0.09890156 8.7722596,-0.11077281 9.7963088,0.11827521 10.569368,0.31098193 10.571622,1.2355275 10.750403,1.8610601 c 0.307427,1.3026813 1.685123,0.6224444 2.503868,0.3533436 0.82764,-0.090277 1.050717,0.8516809 1.472505,1.360975 0.38881,0.6166529 0.834189,1.2049045 1.187448,1.8394061 0.330486,1.0831614 -0.991271,1.5371101 -1.414855,2.2998779 -0.2856,1.1308037 1.380075,1.3511924 1.444845,2.3814793 -0.0079,0.927004 -0.692382,1.66038 -1.102823,2.444419 -0.39067,0.912507 -1.296704,1.612005 -2.278176,1.000092 -0.946701,-0.63303 -1.993578,0.112458 -1.907388,1.191742 0.0079,1.047847 -1.1122687,1.390845 -1.9768201,1.270072 C 7.8997219,15.932974 7.1191405,16.008245 6.34,15.93 Z m 3,-1.22 c 0.072192,-1.038342 0.5424188,-2.201536 1.610519,-2.551894 0.862697,-0.55308 2.289047,0.880644 2.758176,-0.364357 0.567891,-0.682315 1.24254,-1.736649 0.133817,-2.2771293 C 12.89432,8.7323482 13.006994,7.194583 13.884539,6.4028471 14.39852,6.1084948 14.833041,5.6436658 14.236602,5.1479432 13.957925,4.5967831 13.628958,4.0709474 13.33,3.53 12.383852,3.9354666 11.178531,4.1915721 10.300674,3.4919254 9.2869972,3.1081771 9.8933516,1.1858595 8.7077559,1.2901448 8.0634396,1.4130361 6.9692111,1.0406335 6.610177,1.4803803 6.5078416,2.4182135 6.0678498,3.4743442 5.0999314,3.7923931 4.2722569,4.3906884 3.3123355,3.3221592 2.4772941,3.8142154 2.2352934,4.5382998 0.87395464,5.4749545 1.8007346,6.1937991 c 1.053982,0.664386 1.302272,2.235122 0.4884086,3.1815951 -0.5474043,0.4278527 -1.2164805,0.9805138 -0.5529679,1.6797018 0.467778,0.565173 0.7706283,1.822385 1.7323918,1.179994 0.7375009,-0.386335 1.6577438,-0.111792 2.2758,0.38501 0.5290179,0.419069 0.7676252,1.08802 0.7930337,1.743226 0.4594894,0.831464 1.6051495,0.156768 2.3667841,0.36409 C 9.0495442,14.724232 9.1948683,14.718824 9.34,14.71 Z" fill="#ffffff" /></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
BIN
webapp/logo.png
Normal file
BIN
webapp/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
629
webapp/style.css
Normal file
629
webapp/style.css
Normal file
|
|
@ -0,0 +1,629 @@
|
|||
/* Rom Patcher JS CSS template by Marc Robledo v20220323 */
|
||||
|
||||
/* @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{
|
||||
--rom-patcher-color-background:#31343a;
|
||||
--rom-patcher-color-primary:#2a9ca5;
|
||||
--rom-patcher-color-primary-hover:#3aacb5;
|
||||
--rom-patcher-color-primary-active:#297b81;
|
||||
--rom-patcher-color-primary-focus:#a8fff3;
|
||||
|
||||
--rom-patcher-color-danger:#ff0030;
|
||||
--rom-patcher-color-warning:#ff7800;
|
||||
|
||||
--rom-patcher-color-spinner:#41bdc7;
|
||||
|
||||
--rom-patcher-color-muted:#888;
|
||||
--rom-patcher-color-outer-btn:#fff;
|
||||
--rom-patcher-color-outer-btn-hover:#2b2e33;
|
||||
|
||||
--rom-patcher-color-footer:#767b86;
|
||||
--rom-patcher-color-footer-link:#969ba6;
|
||||
--rom-patcher-color-footer-link-border:#464b56;
|
||||
--rom-patcher-color-footer-hover:#fff;
|
||||
--rom-patcher-color-footer-hover-border:#41d5ff;
|
||||
|
||||
--rom-patcher-color-switch:#fff;
|
||||
--rom-patcher-color-switch-background:#474c56;
|
||||
--rom-patcher-color-switch-background-enabled:#41bdc7;
|
||||
|
||||
margin:0;
|
||||
font:15px 'Open Sans',sans-serif;
|
||||
cursor:default;
|
||||
line-height:1.8;
|
||||
background-color:var(--rom-patcher-color-background);
|
||||
color:#3c3c3c;
|
||||
-moz-user-select:none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select:none;
|
||||
-o-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
/* body.dragging-files{
|
||||
color:red !important;
|
||||
pointer-events: none;
|
||||
} */
|
||||
|
||||
/* flex main column */
|
||||
html, body{height:100%}
|
||||
#column{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
header{margin: 1% 0 4%}
|
||||
header h1{display:none}
|
||||
footer{padding: 50px 0 20px}
|
||||
#wrapper{flex-basis:100%}
|
||||
|
||||
|
||||
.clickable{cursor:pointer}
|
||||
.hide{display:none !important}
|
||||
.text-center{text-align:center}
|
||||
.text-right{text-align:right}
|
||||
.text-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.m-b{margin-bottom:8px}
|
||||
/* 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
|
||||
}
|
||||
.row>div:first-child{width:25%}
|
||||
.row>div:last-child{width:73%}
|
||||
.row.row-lg>div:first-child{width:70%}
|
||||
.row.row-lg>div:last-child{width:30%}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* icons */
|
||||
.icon{
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
width:16px;height:16px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* header+footer */
|
||||
header{text-align:center}
|
||||
header h1{margin:0}
|
||||
header img{max-width:90%; height:192px;}
|
||||
|
||||
footer{
|
||||
text-align:center;
|
||||
color:var(--rom-patcher-color-footer);
|
||||
font-size:85%;
|
||||
}
|
||||
footer a{
|
||||
color:var(--rom-patcher-color-footer-link);
|
||||
text-decoration:none;
|
||||
border-bottom:1px solid var(--rom-patcher-color-footer-link-border);
|
||||
}
|
||||
footer a:hover{
|
||||
color:var(--rom-patcher-color-footer-hover);
|
||||
border-color:var(--rom-patcher-color-footer-hover-border);
|
||||
}
|
||||
|
||||
|
||||
|
||||
hr{border:none;border-top:1px dotted #bbb;margin:15px 0}
|
||||
|
||||
|
||||
/* outer buttons */
|
||||
.btn-transparent{
|
||||
background-color:transparent;
|
||||
color:var(--rom-patcher-color-outer-btn);
|
||||
cursor:pointer;
|
||||
text-align:center;
|
||||
}
|
||||
.btn-transparent:hover,.btn-transparent:focus{
|
||||
background-color:var(--rom-patcher-color-outer-btn-hover);
|
||||
cursor:pointer;
|
||||
}
|
||||
.btn-transparent img{
|
||||
height:16px;
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
/* Switch mode */
|
||||
#switch-container{
|
||||
text-align:right;
|
||||
margin-bottom:10px;
|
||||
font-size:88%;
|
||||
}
|
||||
#switch-create-button{
|
||||
border-radius:2px;
|
||||
padding: 6px 8px;
|
||||
transition:background-color .1s;
|
||||
}
|
||||
.switch{
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
width:30px;height:16px;
|
||||
border-radius:8px;
|
||||
position:relative;
|
||||
transition:background-color .2s;
|
||||
background-color:#babfbf;
|
||||
}
|
||||
#switch-create-button .switch.disabled{background-color:var(--rom-patcher-color-switch-background);}
|
||||
#dialog-settings>.rom-patcher-dialog .switch{transition:opacity .1s;}
|
||||
#dialog-settings>.rom-patcher-dialog .switch:hover{cursor:pointer;opacity:.7}
|
||||
.switch:before{
|
||||
position:absolute;
|
||||
background-color:var(--rom-patcher-color-switch);
|
||||
height:10px;width:10px;
|
||||
content:" ";
|
||||
border-radius:6px;
|
||||
top:3px;
|
||||
left:4px;
|
||||
transition:left .2s;
|
||||
}
|
||||
.switch.enabled:before{
|
||||
left:16px;
|
||||
}
|
||||
.switch.enabled{background-color:var(--rom-patcher-color-switch-background-enabled);}
|
||||
|
||||
|
||||
|
||||
|
||||
.tab{background-color:#f9fafa;padding:30px 15px;border-radius: 3px}
|
||||
|
||||
|
||||
.buttons{
|
||||
margin-top:12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* forms */
|
||||
input[type=file], input[type=checkbox], select{
|
||||
box-sizing:border-box;
|
||||
max-width:100%;
|
||||
font-family:inherit;
|
||||
font-size:100%;
|
||||
outline:none;
|
||||
border:none;
|
||||
border-radius:3px;
|
||||
background-color:#edefef;
|
||||
}
|
||||
input[type=file]:focus:not(:disabled),
|
||||
select:focus:not(:disabled),
|
||||
input[type=checkbox].styled:focus:not(:disabled){
|
||||
box-shadow: var(--rom-patcher-color-primary-focus) 0 0 0 2px;
|
||||
}
|
||||
input[type=file].w100, select.w100{width:100%}
|
||||
input[type=file]{padding:6px 10px}
|
||||
input[type=file]::file-selector-button{display:none}
|
||||
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]:hover:not(:disabled),select:hover:not(:disabled){cursor:pointer;background-color:#dee1e1}
|
||||
input[type=file]:disabled,select:disabled{color:var(--rom-patcher-color-muted)}
|
||||
|
||||
/* select:focus > option{background-color:#fff} */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
input[type=file].empty,
|
||||
input[type=file]:not(:disabled):not(.empty):hover{
|
||||
padding-left:32px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 8px center;
|
||||
background-size: 16px;
|
||||
background-image: url(../rom-patcher-js/assets/icon_upload.svg);
|
||||
}
|
||||
|
||||
input[type=file].valid{
|
||||
background-color:#d6ffc8;
|
||||
padding-right:28px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
background-size: 16px;
|
||||
background-image: url(../rom-patcher-js/assets/icon_check_circle_green.svg);
|
||||
}
|
||||
input[type=file].valid:not(:disabled):not(.empty):hover{
|
||||
background-color:#adf795;
|
||||
background-position: 8px center, right 12px center;
|
||||
background-size: 16px, 16px;
|
||||
background-image: url(../rom-patcher-js/assets/icon_upload.svg), url(../rom-patcher-js/assets/icon_check_circle_green.svg);
|
||||
}
|
||||
input[type=file].invalid{
|
||||
background-color:#ffc8c8;
|
||||
padding-right:28px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
background-size: 16px;
|
||||
background-image: url(../rom-patcher-js/assets/icon_x_circle_red.svg);
|
||||
}
|
||||
input[type=file].invalid:not(:disabled):not(.empty):hover{
|
||||
background-color:#ffa3a3;
|
||||
background-position: 8px center, right 12px center;
|
||||
background-size: 16px, 16px;
|
||||
background-image: url(../rom-patcher-js/assets/icon_upload.svg), url(../rom-patcher-js/assets/icon_x_circle_red.svg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* buttons */
|
||||
button{
|
||||
font-family:inherit;
|
||||
font-size:100%;
|
||||
min-width:120px;
|
||||
border-radius:3px;border:0;
|
||||
outline:none;
|
||||
|
||||
padding:10px 20px;
|
||||
margin:0 5px;
|
||||
|
||||
background-color:var(--rom-patcher-color-primary);
|
||||
color:white;
|
||||
|
||||
transition:background-color .15s;
|
||||
|
||||
box-sizing:border-box
|
||||
}
|
||||
button:not(:disabled){
|
||||
cursor:pointer;
|
||||
}
|
||||
button:disabled{opacity:.35 !important;cursor:not-allowed}
|
||||
.tab button:not(:disabled):hover{
|
||||
background-color:var(--rom-patcher-color-primary-hover);
|
||||
}
|
||||
.tab button:not(:disabled):active{
|
||||
background-color:var(--rom-patcher-color-primary-active);
|
||||
transform:translateY(1px)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.text-selectable{
|
||||
-moz-user-select:text;
|
||||
-webkit-user-select: text;
|
||||
-ms-user-select:text;
|
||||
-o-user-select:text;
|
||||
user-select:text;
|
||||
cursor:text;
|
||||
}
|
||||
.text-mono{
|
||||
font-family:'Roboto Mono', monospace;
|
||||
color: var(--rom-patcher-color-muted);
|
||||
font-size:12px;
|
||||
}
|
||||
.text-muted{
|
||||
color: var(--rom-patcher-color-muted);
|
||||
}
|
||||
|
||||
#rom-patcher-span-crc32 span.clickable{text-decoration:underline}
|
||||
#rom-patcher-span-crc32 span.clickable:hover{cursor:pointer;color:black}
|
||||
|
||||
|
||||
#rom-patcher-row-info-rom,
|
||||
#rom-patcher-row-alter-header,
|
||||
#rom-patcher-row-patch-description,
|
||||
#rom-patcher-row-patch-requirements,
|
||||
#rom-patcher-row-error-message,
|
||||
#patch-builder-row-error-message{
|
||||
display:none
|
||||
}
|
||||
#rom-patcher-row-info-rom.show,
|
||||
#rom-patcher-row-alter-header.show,
|
||||
#rom-patcher-row-patch-description.show,
|
||||
#rom-patcher-row-patch-requirements.show{
|
||||
display:flex
|
||||
}
|
||||
#rom-patcher-row-error-message.show,
|
||||
#patch-builder-row-error-message.show{
|
||||
display:block
|
||||
}
|
||||
|
||||
#rom-patcher-patch-description{font-size: 85%;}
|
||||
|
||||
|
||||
#rom-patcher-select-file-patch{width:100%}
|
||||
|
||||
#rom-patcher-error-message,
|
||||
#patch-builder-error-message {
|
||||
color: var(--rom-patcher-color-danger);
|
||||
padding-left: 20px;
|
||||
background-image: url(../rom-patcher-js/assets/icon_x_circle_red.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
}
|
||||
#rom-patcher-error-message.warning,
|
||||
#patch-builder-error-message.warning {
|
||||
color: var(--rom-patcher-color-warning);
|
||||
background-image: url(../rom-patcher-js/assets/icon_alert_orange.svg);
|
||||
}
|
||||
|
||||
|
||||
/* loading spinner */
|
||||
@-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); } }
|
||||
|
||||
.rom-patcher-spinner{
|
||||
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;
|
||||
}
|
||||
.rom-patcher-spinner:before{
|
||||
width:6px;
|
||||
height:6px;
|
||||
background-color:var(--rom-patcher-color-spinner);
|
||||
border-radius:3px;
|
||||
display:inline-block;
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:50%;
|
||||
margin-left:-3px;
|
||||
}
|
||||
|
||||
|
||||
#rom-patcher-button-apply .rom-patcher-spinner:before{
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#wrapper{
|
||||
box-sizing:border-box;
|
||||
max-width:95%;
|
||||
width:600px;
|
||||
margin:0 auto
|
||||
}
|
||||
|
||||
|
||||
.rom-patcher-container-input{
|
||||
position:relative
|
||||
}
|
||||
.rom-patcher-container-input input.loading,
|
||||
.rom-patcher-container-input select.loading{
|
||||
padding-left:32px;
|
||||
}
|
||||
.rom-patcher-container-input input.loading + .rom-patcher-spinner,
|
||||
.rom-patcher-container-input select.loading + .rom-patcher-spinner{
|
||||
position:absolute;
|
||||
top:50%;
|
||||
margin-top: -10px;
|
||||
left:8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* dialogs */
|
||||
.rom-patcher-dialog::backdrop,
|
||||
#rom-patcher-dialog-zip-backdrop{
|
||||
background-color:rgba(0,0,0,.75);
|
||||
backdrop-filter:blur(3px);
|
||||
/*
|
||||
transition: overlay 0.35s allow-discrete, display 0.35s allow-discrete, opacity 0.35s;
|
||||
opacity: 0;
|
||||
}
|
||||
.rom-patcher-dialog[open]::backdrop {
|
||||
opacity: 1;
|
||||
|
||||
@starting-style {
|
||||
opacity: 0;
|
||||
}
|
||||
*/
|
||||
}
|
||||
#rom-patcher-dialog-zip-backdrop {
|
||||
/* fallback for browsers not compatible with <dialog> */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.rom-patcher-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;
|
||||
border:none;
|
||||
/*
|
||||
transition: overlay 0.35s allow-discrete, display 0.35s allow-discrete, opacity 0.35s;
|
||||
opacity: 0;
|
||||
}
|
||||
.rom-patcher-dialog[open] {
|
||||
opacity: 1;
|
||||
|
||||
@starting-style {
|
||||
opacity: 0;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
/* settings dialog */
|
||||
#dialog-settings{
|
||||
min-width:400px;
|
||||
max-width:90%;
|
||||
}
|
||||
#dialog-settings-button-close{
|
||||
padding:8px;
|
||||
border-radius:30px;
|
||||
margin-right:-8px;
|
||||
margin-top:-8px;
|
||||
transition:background-color .2s;
|
||||
height:24px;
|
||||
}
|
||||
#dialog-settings-button-close:hover{
|
||||
cursor:pointer;
|
||||
background-color:#f4f4f4;
|
||||
}
|
||||
input[type=checkbox].styled{
|
||||
-moz-appearance:none;
|
||||
-webkit-appearance:none;
|
||||
appearance:none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color:transparent;
|
||||
border-radius:3px;
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
position:relative;
|
||||
border: 2px solid var(--rom-patcher-color-primary);
|
||||
|
||||
background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMuMiIgZmlsbD0ibm9uZSIgZD0iTSAxLjE5LDcuMTAgNi4wNywxMi4wNiAxNC44OCwzLjMyIi8+PC9zdmc+');
|
||||
background-repeat:no-repeat;
|
||||
background-position:center center;
|
||||
background-size:0px;
|
||||
transition: background-color .2s, background-size .2s;
|
||||
}
|
||||
input[type=checkbox].styled:hover:not(:disabled){
|
||||
cursor:pointer;
|
||||
border-color:var(--rom-patcher-color-primary-hover);
|
||||
}
|
||||
input[type=checkbox].styled:hover:checked:not(:disabled){
|
||||
background-color:var(--rom-patcher-color-primary-hover);
|
||||
}
|
||||
|
||||
input[type=checkbox].styled:checked{
|
||||
background-color:var(--rom-patcher-color-primary);
|
||||
background-size:12px;
|
||||
}
|
||||
|
||||
|
||||
/* ZIP dialog */
|
||||
#rom-patcher-dialog-zip{
|
||||
min-width:360px;
|
||||
}
|
||||
#rom-patcher-dialog-zip-message{
|
||||
text-align:center
|
||||
}
|
||||
#rom-patcher-dialog-zip-file-list{
|
||||
list-style:none;
|
||||
padding:0;
|
||||
margin: 0;
|
||||
max-height:300px;
|
||||
overflow-y:auto;
|
||||
}
|
||||
#rom-patcher-dialog-zip-file-list li{
|
||||
color:#3c3c3c;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
#rom-patcher-dialog-zip-file-list li:hover{
|
||||
background-color:#eee;
|
||||
cursor:pointer;
|
||||
color: black;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* light theme */
|
||||
body.theme-light{
|
||||
--rom-patcher-color-background:#eeeceb;
|
||||
--rom-patcher-color-primary:#ff9f36;
|
||||
--rom-patcher-color-primary-hover:#ffbe78;
|
||||
--rom-patcher-color-primary-active:#ff8400;
|
||||
--rom-patcher-color-primary-focus:#ffebb4;
|
||||
|
||||
--rom-patcher-color-spinner:#ff941e;
|
||||
|
||||
--rom-patcher-color-outer-btn:#575b66;
|
||||
--rom-patcher-color-outer-btn-hover:#e6e3e1;
|
||||
|
||||
--rom-patcher-color-footer:#a89d97;
|
||||
--rom-patcher-color-footer-link:#8c817c;
|
||||
--rom-patcher-color-footer-link-border:#e3d4cc;
|
||||
--rom-patcher-color-footer-hover:#484543;
|
||||
--rom-patcher-color-footer-hover-border:#ffac41;
|
||||
|
||||
--rom-patcher-color-switch:#fff;
|
||||
--rom-patcher-color-switch-background:#cec5bd;
|
||||
--rom-patcher-color-switch-background-enabled:#ff941e;
|
||||
}
|
||||
body.theme-light header img{filter: hue-rotate(98rad) brightness(97.9%) saturate(160%)}
|
||||
body.theme-light footer img.icon.settings, body.theme-light footer img.icon.github{filter: invert(0%) brightness(30%);}
|
||||
|
||||
|
||||
/* pastel theme */
|
||||
body.theme-pastel{
|
||||
--rom-patcher-color-background:#1d2433;
|
||||
--rom-patcher-color-primary:#e65a53;
|
||||
--rom-patcher-color-primary-hover:#f4736d;
|
||||
--rom-patcher-color-primary-active:#d9413a;
|
||||
|
||||
--rom-patcher-color-spinner:#ff941e;
|
||||
|
||||
--rom-patcher-color-outer-btn:#fff;
|
||||
--rom-patcher-color-outer-btn-hover:#2b2e33;
|
||||
|
||||
--rom-patcher-color-footer:#767b86;
|
||||
--rom-patcher-color-footer-link:#969ba6;
|
||||
--rom-patcher-color-footer-link-border:#464b56;
|
||||
--rom-patcher-color-footer-hover:#fff;
|
||||
--rom-patcher-color-footer-hover-border:#41d5ff;
|
||||
|
||||
/* to-do */
|
||||
}
|
||||
body.theme-pastel header img{filter: hue-rotate(22rad) brightness(81.9%) saturate(228%)}
|
||||
|
||||
/*
|
||||
body.theme-pastel .switch.enabled{background-color:#;}
|
||||
body.theme-pastel #switch-create.disabled{background-color:#cec5bd;}
|
||||
body.theme-pastel .spinner:before{background-color:#ff941e}
|
||||
*/
|
||||
|
||||
|
||||
/* responsive */
|
||||
@media only screen and (max-width:641px){
|
||||
#wrapper{font-size:14px}
|
||||
#rom-patcher-rom-info{font-size:11px}
|
||||
header img{max-height:96px}
|
||||
#dialog-settings, #rom-patcher-dialog-zip{min-width: auto;}
|
||||
}
|
||||
BIN
webapp/thumbnail.jpg
Normal file
BIN
webapp/thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
137
webapp/webapp.js
Normal file
137
webapp/webapp.js
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
/* Rom Patcher JS (complete webapp implementation) v20240809 - Marc Robledo 2016-2024 - http://www.marcrobledo.com/license */
|
||||
|
||||
|
||||
/* service worker */
|
||||
const FORCE_HTTPS = true;
|
||||
if (FORCE_HTTPS && location.protocol === 'http:')
|
||||
location.href = window.location.href.replace('http:', 'https:');
|
||||
else if (location.protocol === 'https:' && 'serviceWorker' in navigator && window.location.hostname === 'www.marcrobledo.com')
|
||||
navigator.serviceWorker.register('/RomPatcher.js/_cache_service_worker.js', { scope: '/RomPatcher.js/' }); /* using absolute paths to avoid unexpected behaviour in GitHub Pages */
|
||||
|
||||
|
||||
/* settings */
|
||||
const LOCAL_STORAGE_SETTINGS_ID = 'rom-patcher-js-settings';
|
||||
/* default settings */
|
||||
const settings = {
|
||||
language: typeof navigator.userLanguage === 'string' ? navigator.userLanguage.substr(0, 2) : 'en',
|
||||
outputSuffix: true,
|
||||
fixChecksum: false,
|
||||
theme: 'default'
|
||||
};
|
||||
/* load settings from localStorage */
|
||||
if (typeof localStorage !== 'undefined' && localStorage.getItem(LOCAL_STORAGE_SETTINGS_ID)) {
|
||||
try {
|
||||
const loadedSettings = JSON.parse(localStorage.getItem(LOCAL_STORAGE_SETTINGS_ID));
|
||||
|
||||
if (typeof loadedSettings.language === 'string')
|
||||
settings.language = loadedSettings.language;
|
||||
|
||||
if (typeof loadedSettings.outputSuffix === 'boolean')
|
||||
settings.outputSuffix = loadedSettings.outputSuffix;
|
||||
|
||||
if (typeof loadedSettings.fixChecksum === 'boolean')
|
||||
settings.fixChecksum = loadedSettings.fixChecksum;
|
||||
|
||||
if (typeof loadedSettings.theme === 'string' && ['light'].indexOf(loadedSettings.theme) !== -1)
|
||||
settings.theme = loadedSettings.theme;
|
||||
} catch (err) {
|
||||
console.error('Error while loading settings: ' + err.message);
|
||||
}
|
||||
}
|
||||
const buildSettingsForWebapp = function () {
|
||||
return {
|
||||
language: settings.language,
|
||||
outputSuffix: settings.outputSuffix,
|
||||
fixChecksum: settings.fixChecksum,
|
||||
allowDropFiles: true,
|
||||
ondropfiles:function(evt){
|
||||
if(currentMode === 'creator'){
|
||||
ocument.getElementById('switch-create-button').click();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
const saveSettings = function () {
|
||||
if (typeof localStorage !== 'undefined')
|
||||
localStorage.setItem(LOCAL_STORAGE_SETTINGS_ID, JSON.stringify(settings));
|
||||
RomPatcherWeb.setSettings(buildSettingsForWebapp());
|
||||
}
|
||||
|
||||
|
||||
var currentMode = 'patcher';
|
||||
|
||||
|
||||
|
||||
window.addEventListener('load', function (evt) {
|
||||
/* set theme */
|
||||
document.body.className = 'theme-' + settings.theme;
|
||||
|
||||
/* event listeners */
|
||||
document.getElementById('button-settings').addEventListener('click', function (evt) {
|
||||
document.getElementById('dialog-settings').showModal();
|
||||
});
|
||||
document.getElementById('dialog-settings-button-close').addEventListener('click', function (evt) {
|
||||
document.getElementById('dialog-settings').close();
|
||||
});
|
||||
|
||||
document.getElementById('settings-language').value = settings.language;
|
||||
document.getElementById('settings-language').addEventListener('change', function () {
|
||||
settings.language = this.value;
|
||||
saveSettings();
|
||||
RomPatcherWeb.translateUI(settings.language);
|
||||
});
|
||||
|
||||
document.getElementById('settings-output-suffix').checked = !settings.outputSuffix;
|
||||
document.getElementById('settings-output-suffix').addEventListener('change', function () {
|
||||
settings.outputSuffix = !this.checked;
|
||||
saveSettings();
|
||||
});
|
||||
|
||||
document.getElementById('settings-fix-checksum').checked = settings.fixChecksum;
|
||||
document.getElementById('settings-fix-checksum').addEventListener('change', function () {
|
||||
settings.fixChecksum = this.checked;
|
||||
saveSettings();
|
||||
});
|
||||
|
||||
document.getElementById('settings-light-theme').checked = settings.theme === 'light';
|
||||
document.getElementById('settings-light-theme').addEventListener('change', function () {
|
||||
settings.theme = this.checked ? 'light' : 'default';
|
||||
saveSettings();
|
||||
document.body.className = 'theme-' + settings.theme;
|
||||
});
|
||||
|
||||
document.getElementById('switch-create-button').addEventListener('click', function () {
|
||||
if (/disabled/.test(document.getElementById('switch-create').className)) {
|
||||
try{
|
||||
if(!PatchBuilderWeb.isInitialized())
|
||||
PatchBuilderWeb.initialize();
|
||||
}catch(err){
|
||||
document.getElementById('patch-builder-container').innerHTML = err.message;
|
||||
document.getElementById('patch-builder-container').style.color = 'red';
|
||||
}
|
||||
|
||||
currentMode = 'creator';
|
||||
document.getElementById('rom-patcher-container').style.display = 'none';
|
||||
document.getElementById('patch-builder-container').style.display = 'block';
|
||||
document.getElementById('switch-create').className = 'switch enabled';
|
||||
} else {
|
||||
currentMode = 'patcher';
|
||||
document.getElementById('rom-patcher-container').style.display = 'block';
|
||||
document.getElementById('patch-builder-container').style.display = 'none';
|
||||
document.getElementById('switch-create').className = 'switch disabled';
|
||||
}
|
||||
});
|
||||
|
||||
try {
|
||||
const initialSettings = buildSettingsForWebapp();
|
||||
RomPatcherWeb.initialize(initialSettings);
|
||||
} catch (err) {
|
||||
var message = err.message;
|
||||
if (/incompatible browser/i.test(message))
|
||||
message = 'Your browser is outdated and it is not compatible with the latest version of Rom Patcher JS.<br/><a href="legacy/">Try the legacy version</a>';
|
||||
|
||||
document.getElementById('rom-patcher-container').innerHTML = message;
|
||||
document.getElementById('rom-patcher-container').style.color = 'red';
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue