Holy-Unblocker/public/archive/nes/index.html
2020-10-02 16:45:22 -07:00

159 lines
2.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>NES</title>
<script type="text/javascript" src="jsnes.min.js"></script>
<script type="text/javascript" src="nes-embed.js"></script>
<style>
.main {
background: black;
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
canvas {
display: block;
margin: auto;
height: 100%;
}
canvas.textureSmooth {
image-rendering: auto;
image-rendering: optimizeQuality;
-ms-interpolation-mode: bicubic;
}
canvas.texturePixelated {
image-rendering: -webkit-optimize-contrast;
image-rendering: -o-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
.menu {
position: fixed;
display: flex;
flex-wrap: wrap;
background: #fff;
transition: .3s ease;
cursor: pointer;
font-family: sans-serif;
z-index: 1;
opacity: 0;
height: 42px;
}
.menu:hover{opacity: 0.9;}
.menu ul{
visibility: hidden;
opacity: 0;
position: absolute;
top:100%;
left:0;
background-color: rgb(245, 245, 245);
box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
transition: .3s ease;
z-index: 1;
}
.menu ul li {
padding: .3em 1em !important;
}
.menu li{
white-space: nowrap;
position: relative;
cursor:pointer;
padding: .7em 1em;
}
.menu li:hover {
background: rgba(0,0,0,.1);
}
.menu li:hover > ul{
visibility: visible;
opacity: 1;
}
li input {
transform: scale(1.5);
margin: 0px 13px 0px 0px;
}
#ffd {
z-index: 5;
height: 200px;
width: 400px;
position: absolute;
background: #ddd;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: sans-serif;
border-radius: 2px;
}
#upload {
display: none;
}
#upload + label {
border: 1px solid rgb(118, 118, 118);
border-radius: 2px;
padding: 4px;
margin: 10px;
font-size: 13px;
background-color: white;
display: inline-block;
transition: ease .1s;
}
#upload + label:hover {
background-color: #eee;
}
</style>
</head>
<body onload="nes_load_url()">
<div class="main">
<ul class="menu">
<li>Controls<ul>
<li>DPad: Arrow keys</li>
<li>Start: Enter</li>
<li>Select: Space</li>
<li>A Button: D</li>
<li>B Button: C</li>
</ul>
</li>
<li>
<input type="checkbox" id="smooth" onclick="setSmooth()">Smooth
</li>
</ul>
<div id="ffd" style="display: none;">
<h2>Upload NES ROM</h2>
<input type="file" id="upload" accept=".nes" onchange="nes_upload(this)" />
<label for="upload">Choose File</label>
</div>
<canvas id="nes-canvas" class="texturePixelated" width="256" height="240" oncontextmenu="event.preventDefault()" />
</div>
</body>
</html>