网页接入插件
This commit is contained in:
parent
68610f7353
commit
1060403622
|
@ -0,0 +1,8 @@
|
|||
fileFormatVersion: 2
|
||||
guid: 27a1cb9db1dc44245a3252286f0cbfe2
|
||||
folderAsset: yes
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
|
@ -0,0 +1,159 @@
|
|||
fileFormatVersion: 2
|
||||
guid: 60f3ee6949d606c48b1df4eb066bc251
|
||||
TextureImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 12
|
||||
mipmaps:
|
||||
mipMapMode: 0
|
||||
enableMipMap: 1
|
||||
sRGBTexture: 1
|
||||
linearTexture: 0
|
||||
fadeOut: 0
|
||||
borderMipMap: 0
|
||||
mipMapsPreserveCoverage: 0
|
||||
alphaTestReferenceValue: 0.5
|
||||
mipMapFadeDistanceStart: 1
|
||||
mipMapFadeDistanceEnd: 3
|
||||
bumpmap:
|
||||
convertToNormalMap: 0
|
||||
externalNormalMap: 0
|
||||
heightScale: 0.25
|
||||
normalMapFilter: 0
|
||||
isReadable: 0
|
||||
streamingMipmaps: 0
|
||||
streamingMipmapsPriority: 0
|
||||
vTOnly: 0
|
||||
ignoreMasterTextureLimit: 0
|
||||
grayScaleToAlpha: 0
|
||||
generateCubemap: 6
|
||||
cubemapConvolution: 0
|
||||
seamlessCubemap: 0
|
||||
textureFormat: 1
|
||||
maxTextureSize: 2048
|
||||
textureSettings:
|
||||
serializedVersion: 2
|
||||
filterMode: 1
|
||||
aniso: 1
|
||||
mipBias: 0
|
||||
wrapU: 0
|
||||
wrapV: 0
|
||||
wrapW: 0
|
||||
nPOTScale: 1
|
||||
lightmap: 0
|
||||
compressionQuality: 50
|
||||
spriteMode: 0
|
||||
spriteExtrude: 1
|
||||
spriteMeshType: 1
|
||||
alignment: 0
|
||||
spritePivot: {x: 0.5, y: 0.5}
|
||||
spritePixelsToUnits: 100
|
||||
spriteBorder: {x: 0, y: 0, z: 0, w: 0}
|
||||
spriteGenerateFallbackPhysicsShape: 1
|
||||
alphaUsage: 1
|
||||
alphaIsTransparency: 0
|
||||
spriteTessellationDetail: -1
|
||||
textureType: 0
|
||||
textureShape: 1
|
||||
singleChannelComponent: 0
|
||||
flipbookRows: 1
|
||||
flipbookColumns: 1
|
||||
maxTextureSizeSet: 0
|
||||
compressionQualitySet: 0
|
||||
textureFormatSet: 0
|
||||
ignorePngGamma: 0
|
||||
applyGammaDecoding: 0
|
||||
cookieLightType: 0
|
||||
platformSettings:
|
||||
- serializedVersion: 3
|
||||
buildTarget: DefaultTexturePlatform
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
- serializedVersion: 3
|
||||
buildTarget: Standalone
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
- serializedVersion: 3
|
||||
buildTarget: Server
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
- serializedVersion: 3
|
||||
buildTarget: Android
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
- serializedVersion: 3
|
||||
buildTarget: WebGL
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
- serializedVersion: 3
|
||||
buildTarget: Windows Store Apps
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
spriteSheet:
|
||||
serializedVersion: 2
|
||||
sprites: []
|
||||
outline: []
|
||||
physicsShape: []
|
||||
bones: []
|
||||
spriteID:
|
||||
internalID: 0
|
||||
vertices: []
|
||||
indices:
|
||||
edges: []
|
||||
weights: []
|
||||
secondaryTextures: []
|
||||
nameFileIdTable: {}
|
||||
spritePackingTag:
|
||||
pSDRemoveMatte: 0
|
||||
pSDShowRemoveMatteOption: 0
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
|
@ -0,0 +1,159 @@
|
|||
fileFormatVersion: 2
|
||||
guid: 9f6297b9d7a3394468c570694c8b93f3
|
||||
TextureImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 12
|
||||
mipmaps:
|
||||
mipMapMode: 0
|
||||
enableMipMap: 1
|
||||
sRGBTexture: 1
|
||||
linearTexture: 0
|
||||
fadeOut: 0
|
||||
borderMipMap: 0
|
||||
mipMapsPreserveCoverage: 0
|
||||
alphaTestReferenceValue: 0.5
|
||||
mipMapFadeDistanceStart: 1
|
||||
mipMapFadeDistanceEnd: 3
|
||||
bumpmap:
|
||||
convertToNormalMap: 0
|
||||
externalNormalMap: 0
|
||||
heightScale: 0.25
|
||||
normalMapFilter: 0
|
||||
isReadable: 0
|
||||
streamingMipmaps: 0
|
||||
streamingMipmapsPriority: 0
|
||||
vTOnly: 0
|
||||
ignoreMasterTextureLimit: 0
|
||||
grayScaleToAlpha: 0
|
||||
generateCubemap: 6
|
||||
cubemapConvolution: 0
|
||||
seamlessCubemap: 0
|
||||
textureFormat: 1
|
||||
maxTextureSize: 2048
|
||||
textureSettings:
|
||||
serializedVersion: 2
|
||||
filterMode: 1
|
||||
aniso: 1
|
||||
mipBias: 0
|
||||
wrapU: 0
|
||||
wrapV: 0
|
||||
wrapW: 0
|
||||
nPOTScale: 1
|
||||
lightmap: 0
|
||||
compressionQuality: 50
|
||||
spriteMode: 0
|
||||
spriteExtrude: 1
|
||||
spriteMeshType: 1
|
||||
alignment: 0
|
||||
spritePivot: {x: 0.5, y: 0.5}
|
||||
spritePixelsToUnits: 100
|
||||
spriteBorder: {x: 0, y: 0, z: 0, w: 0}
|
||||
spriteGenerateFallbackPhysicsShape: 1
|
||||
alphaUsage: 1
|
||||
alphaIsTransparency: 0
|
||||
spriteTessellationDetail: -1
|
||||
textureType: 0
|
||||
textureShape: 1
|
||||
singleChannelComponent: 0
|
||||
flipbookRows: 1
|
||||
flipbookColumns: 1
|
||||
maxTextureSizeSet: 0
|
||||
compressionQualitySet: 0
|
||||
textureFormatSet: 0
|
||||
ignorePngGamma: 0
|
||||
applyGammaDecoding: 0
|
||||
cookieLightType: 0
|
||||
platformSettings:
|
||||
- serializedVersion: 3
|
||||
buildTarget: DefaultTexturePlatform
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
- serializedVersion: 3
|
||||
buildTarget: Standalone
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
- serializedVersion: 3
|
||||
buildTarget: Server
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
- serializedVersion: 3
|
||||
buildTarget: Android
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
- serializedVersion: 3
|
||||
buildTarget: WebGL
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
- serializedVersion: 3
|
||||
buildTarget: Windows Store Apps
|
||||
maxTextureSize: 2048
|
||||
resizeAlgorithm: 0
|
||||
textureFormat: -1
|
||||
textureCompression: 1
|
||||
compressionQuality: 50
|
||||
crunchedCompression: 0
|
||||
allowsAlphaSplitting: 0
|
||||
overridden: 0
|
||||
androidETC2FallbackOverride: 0
|
||||
forceMaximumCompressionQuality_BC6H_BC7: 0
|
||||
spriteSheet:
|
||||
serializedVersion: 2
|
||||
sprites: []
|
||||
outline: []
|
||||
physicsShape: []
|
||||
bones: []
|
||||
spriteID:
|
||||
internalID: 0
|
||||
vertices: []
|
||||
indices:
|
||||
edges: []
|
||||
weights: []
|
||||
secondaryTextures: []
|
||||
nameFileIdTable: {}
|
||||
spritePackingTag:
|
||||
pSDRemoveMatte: 0
|
||||
pSDShowRemoveMatteOption: 0
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><link rel="stylesheet" type="text/css" href="Terminal.css"></head>
|
||||
<body>
|
||||
|
||||
<div class="doorFace">
|
||||
<div class='label'>
|
||||
<span id='neededCoins'>0</span>
|
||||
<img src="Coin.png">
|
||||
<br>
|
||||
<span id='lockState'></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="application/javascript">
|
||||
"use strict"; var $ = s => document.querySelector(s);
|
||||
|
||||
var neededCoins = 0;
|
||||
var currentCoins = 0;
|
||||
|
||||
function toggleDoor(state) { console.log("Would toggle door here.", state); }
|
||||
|
||||
$('.doorFace').addEventListener("click", () => {
|
||||
if (currentCoins >= neededCoins) toggleDoor("open");
|
||||
});
|
||||
updateDoorState();
|
||||
|
||||
function updateDoorState() {
|
||||
$('#neededCoins').textContent = neededCoins;
|
||||
|
||||
if (currentCoins < neededCoins) {
|
||||
$('body').classList.add('locked');
|
||||
$('#lockState').innerHTML = "🔒";
|
||||
|
||||
} else {
|
||||
$('body').classList.remove('locked');
|
||||
$('#lockState').innerHTML = "✓";
|
||||
}
|
||||
}
|
||||
|
||||
function setRequiredCoins(_neededCoins) {
|
||||
neededCoins = _neededCoins;
|
||||
updateDoorState();
|
||||
}
|
||||
|
||||
function setCoinCoint(_currentCoins) {
|
||||
currentCoins = _currentCoins;
|
||||
updateDoorState();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,7 @@
|
|||
fileFormatVersion: 2
|
||||
guid: cc6ffe638c6a6464184a62cd7cbdcea6
|
||||
TextScriptImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
|
@ -0,0 +1,19 @@
|
|||
<meta charset="UTF-8">
|
||||
<body style="background: white; border: 2px solid black; margin: 0; padding: 7px;">
|
||||
|
||||
When this example is running, a small HTTP server (TestDownloadServer) is started to serve the downloads below. By default files will be downloaded to your downloads directory (fiddle with DownloadManager to change).<br>
|
||||
<br>
|
||||
<br>
|
||||
<a href="http://localhost:8083/basicFile">Basic file</a><br>
|
||||
<a href="http://localhost:8083/bigFile">Big file</a><br>
|
||||
<a href="http://localhost:8083/slowFile">Slow file</a><br>
|
||||
<a href="http://localhost:8083/ǝpoɔıun«ñämé»">Unicode name (ǝpoɔıun«ñämé»)</a><br>
|
||||
<a href="http://localhost:8083/redirectedFile">Redirected file</a><br>
|
||||
<a href="http://localhost:8083/textFile">Text file (page)</a><br>
|
||||
<a href="http://localhost:8083/textFileDownload">Text file (download)</a><br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<small>(Note: most files are artificially bandwidth-limited; don't use this test for checking download performance.)</small>
|
||||
|
||||
</body>
|
|
@ -0,0 +1,7 @@
|
|||
fileFormatVersion: 2
|
||||
guid: 32bea77b1a900464c9af3f8206a025cf
|
||||
TextScriptImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="Terminal.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='messages'></div>
|
||||
|
||||
<div id='pauseMenu'>
|
||||
<div class='panel'>
|
||||
<h1>Paused!</h1>
|
||||
<span class='aside'>This game is paused.</span>
|
||||
<br><br>
|
||||
|
||||
<table><tr><td>
|
||||
<button onclick="unpause()">Unpause</button>
|
||||
</td><td>
|
||||
<button onclick="browserMode()">Browser Mode</button>
|
||||
</td><td>
|
||||
<button class='negative' onclick="quit()">Quit</button>
|
||||
</td></tr></table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='inventory'>
|
||||
<div id="coins">
|
||||
<span>0</span>
|
||||
<img src="Coin.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="application/javascript">
|
||||
"use strict";
|
||||
var $ = document.querySelector.bind(document);
|
||||
|
||||
function setCoinCount(count) {
|
||||
$("#coins span").textContent = count;
|
||||
|
||||
//(re-)trigger CSS animation
|
||||
var el = $("#coins");
|
||||
el.classList.remove("collectCoin");
|
||||
el.parentNode.replaceChild(el.cloneNode(true), el);
|
||||
$("#coins").classList.add("collectCoin");
|
||||
}
|
||||
|
||||
function setPaused(isPaused) {
|
||||
$('#pauseMenu').style.display = isPaused ? "block" : "none";
|
||||
}
|
||||
|
||||
function say(html, dwellTime) {
|
||||
var el = document.createElement("div");
|
||||
el.className = "message entering";
|
||||
el.innerHTML = html;
|
||||
|
||||
$('#messages').appendChild(el);
|
||||
|
||||
setTimeout(() => el.classList.remove("entering"), 20);
|
||||
setTimeout(() => {
|
||||
el.classList.add("fading");
|
||||
}, dwellTime * 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
el.remove();
|
||||
}, (dwellTime + 5) * 1000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,7 @@
|
|||
fileFormatVersion: 2
|
||||
guid: 2c998888df3b76c4db340de55844e5a2
|
||||
TextScriptImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
* {
|
||||
-webkit-user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, html, #canvas {
|
||||
width: 100%; height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0; padding: 0;
|
||||
font-family: sans-serif;
|
||||
|
||||
color: white;
|
||||
/*text-shadow: white 0 0 5px;*/
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
top: calc(50% - 65px);
|
||||
left: 0; right: 0;
|
||||
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.disclaim {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0; right: 0;
|
||||
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="100%"></canvas>
|
||||
<div class="info">
|
||||
Use the pane on the left<br>
|
||||
to cycle through demos
|
||||
</div>
|
||||
|
||||
<div class="disclaim">
|
||||
This room uses large,<br>
|
||||
animated pages which is not<br>
|
||||
recommended for slower computers.<br>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var canvas = document.getElementById('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = document.body.offsetWidth;
|
||||
canvas.height = document.body.offsetHeight;
|
||||
ctx.fillStyle = "rgba(127, 127, 127, 1)";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
function renderMouse(ev) {
|
||||
ctx.fillStyle = "rgba(127, 127, 127, .02)";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
var r = 0;
|
||||
var g = 0;
|
||||
var b = 0;
|
||||
if (ev.buttons & 1) r = 255;
|
||||
if (ev.buttons & 2) g = 255;
|
||||
if (ev.buttons & 4) b = 255;
|
||||
ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 1)`;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
ev.x, ev.y,
|
||||
70,
|
||||
0, 2 * Math.PI
|
||||
);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = "rgba(127, 127, 127, 1)";
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
ev.x, ev.y,
|
||||
20,
|
||||
0, 2 * Math.PI
|
||||
);
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
document.body.addEventListener("mousemove", renderMouse);
|
||||
document.body.addEventListener("mousedown", renderMouse);
|
||||
document.body.addEventListener("mouseup", renderMouse);
|
||||
document.body.addEventListener("contextmenu", ev => {
|
||||
ev.preventDefault();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,7 @@
|
|||
fileFormatVersion: 2
|
||||
guid: 80e78e67f26615a4bb8f1626febf1481
|
||||
TextScriptImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
|
@ -0,0 +1,12 @@
|
|||
<body>
|
||||
<h1 style='text-shadow: gray 2px 2px'></h1>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
var args = document.location.search.substr(1).split('&').reduce((res, v) => {
|
||||
res[v.split('=')[0]] = decodeURIComponent(v.split('=')[1]);
|
||||
return res;
|
||||
}, {});
|
||||
|
||||
document.body.style.background = `${(args.color || 'gray')} radial-gradient(transparent, rgba(255, 255, 255, .3))`;
|
||||
document.querySelector("h1").textContent = args.text || 'I am a window!';
|
||||
</script>
|
|
@ -0,0 +1,7 @@
|
|||
fileFormatVersion: 2
|
||||
guid: 71111e962f44c3945a3c97d5a8a3431d
|
||||
TextScriptImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
body {
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
div.make div, div.nuke div {
|
||||
border: 1px solid black;
|
||||
cursor: pointer;
|
||||
margin: 6px;
|
||||
padding: 6px;
|
||||
font-size: 140%;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Click some!</h2>
|
||||
<div class='make'>
|
||||
<div>red</div>
|
||||
<div>green</div>
|
||||
<div>blue</div>
|
||||
<div>yellow</div>
|
||||
<div>white</div>
|
||||
</div>
|
||||
|
||||
<p>Every ball that drops is a new browser tab.</p>
|
||||
|
||||
<div class='nuke'>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
Array.from(document.querySelectorAll("div.make div")).forEach(function(el) {
|
||||
el.style.background = el.textContent;
|
||||
el.addEventListener("click", function() {
|
||||
//add new tab
|
||||
var url = `NewWindowChild.html?color=${el.textContent}&text=I%20am%20${el.textContent}`;
|
||||
var childWindow = window.open(url);
|
||||
|
||||
//add button to close it
|
||||
var killEl = document.createElement("div");
|
||||
killEl.textContent = `Close ${el.textContent} child`;
|
||||
killEl.addEventListener("click", function() {
|
||||
childWindow.close();
|
||||
killEl.parentNode.removeChild(killEl);
|
||||
});
|
||||
|
||||
document.querySelector("div.nuke").appendChild(killEl);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,7 @@
|
|||
fileFormatVersion: 2
|
||||
guid: 9732fc1c06d2c46499f8c3babff416fc
|
||||
TextScriptImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="Terminal.css"></head>
|
||||
<style type="text/css">
|
||||
body { width: initial; background: white; }
|
||||
button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.main { font-size: 45px;}
|
||||
|
||||
button.secondary {
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div#url {
|
||||
font-size: 12px;
|
||||
word-wrap: break-word;
|
||||
margin-top: 8px;
|
||||
font-family: monospace;
|
||||
user-select: text;
|
||||
cursor: initial;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<button class="main" onclick="go(1)">Next Demo</button>
|
||||
<button class="secondary" onclick="go(-1)">Prev Demo</button>
|
||||
<div class="small" style="margin-top: 8px;">
|
||||
Some demos have sound,<br>others require a strong GPU.
|
||||
</div>
|
||||
<div id="url">[url]</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
function setDisplayedUrl(url) {
|
||||
document.getElementById("url").textContent = url;
|
||||
}
|
||||
|
||||
document.getElementById("url").addEventListener("click", ev => {
|
||||
document.getSelection().selectAllChildren(document.getElementById("url"));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,7 @@
|
|||
fileFormatVersion: 2
|
||||
guid: d9c09ba63baabc64ba6372ad000116f0
|
||||
TextScriptImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
|
@ -0,0 +1,169 @@
|
|||
* {
|
||||
-webkit-user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%; height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 300%;
|
||||
font-family: sans-serif;
|
||||
color: black;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: inherit;
|
||||
margin: 2px auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
div.content {
|
||||
position: absolute;
|
||||
top: 5px; right: 5px; bottom: 5px; left: 5px;
|
||||
background: linear-gradient(135deg, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
|
||||
border-radius: 16px;
|
||||
box-shadow: white 0 0 10px;
|
||||
}
|
||||
|
||||
div.consoleHTML {
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: fixed;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
*/
|
||||
|
||||
/***********************************************************************/
|
||||
/* HUD */
|
||||
/***********************************************************************/
|
||||
|
||||
/* Messages */
|
||||
.inventory, #messages {
|
||||
position: absolute;
|
||||
bottom: 0; right: 0;
|
||||
font-family: sans-serif;
|
||||
-webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .8));
|
||||
}
|
||||
|
||||
#messages {
|
||||
left: 0;
|
||||
text-align: left;
|
||||
font-size: 70%;
|
||||
color: white;
|
||||
}
|
||||
#messages .message {
|
||||
margin: 5px;
|
||||
max-height: 500px;
|
||||
margin-right: 70px;
|
||||
transition-property: max-height;
|
||||
transition-duration: 1s;
|
||||
}
|
||||
#messages .message.entering {
|
||||
max-height: 0;
|
||||
}
|
||||
#messages .message.fading {
|
||||
animation: fade;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
#coins {
|
||||
color: black;
|
||||
-webkit-text-stroke: .5px white;
|
||||
}
|
||||
#coins img {
|
||||
height: 38px;
|
||||
margin: 0 5px 0 -7px;
|
||||
}
|
||||
.collectCoin {
|
||||
animation: flash;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% {
|
||||
color: white;
|
||||
}
|
||||
|
||||
100% {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Pause menu */
|
||||
|
||||
#pauseMenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
font-size: 50%;
|
||||
}
|
||||
#pauseMenu .panel {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
background: linear-gradient(135deg, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
|
||||
border-radius: 16px;
|
||||
box-shadow: black 0 0 10px;
|
||||
padding: 8px;
|
||||
}
|
||||
#pauseMenu h1 {
|
||||
font-size: 50px;
|
||||
padding: 0;
|
||||
margin: 6px 20px;
|
||||
}
|
||||
#pauseMenu .aside {}
|
||||
#pauseMenu button {
|
||||
width: 140px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/***********************************************************************/
|
||||
/* Doors */
|
||||
/***********************************************************************/
|
||||
|
||||
.doorFace {
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 100px;
|
||||
-webkit-filter: drop-shadow(2px 2px 5px rgba(0,0,0,.8));
|
||||
}
|
||||
body.locked .doorFace {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.doorFace > .label {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.doorFace img {
|
||||
height: 100px;
|
||||
vertical-align: text-top;
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
fileFormatVersion: 2
|
||||
guid: 1ea92bbf3bd450341b81a999a10c8e27
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
width: 100%; height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
font-size: 31px;
|
||||
font-family: sans-serif;
|
||||
color: black;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: inherit;
|
||||
margin: 2px auto;
|
||||
cursor: pointer;
|
||||
width: 137px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--goButtonWidth: 100px;
|
||||
}
|
||||
|
||||
#url {
|
||||
width: calc(100% - 50px - var(--goButtonWidth));
|
||||
font-size: 30px;
|
||||
margin: 10px 3px 0 -5px;
|
||||
}
|
||||
|
||||
#goButton {
|
||||
width: var(--goButtonWidth);
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="controlPanel">
|
||||
<button onclick="demoNavBack()">Back</button>
|
||||
<button onclick="demoNavForward()">Forward</button>
|
||||
<button onclick="demoNavRefresh()">Refresh</button>
|
||||
<button onclick="demoNavClose()">Close</button>
|
||||
|
||||
<br>
|
||||
|
||||
<form id="urlForm">
|
||||
<input type="text" id="url" placeholder="Page URL"><button id="goButton" type="submit">Go</button>
|
||||
</form>
|
||||
<br>
|
||||
|
||||
<script type="application/javascript">
|
||||
function goTo(url) { console.log("Go to: " + url); }
|
||||
function getURL() {
|
||||
return document.getElementById("url").value;
|
||||
}
|
||||
|
||||
document.getElementById("urlForm").addEventListener("submit", ev => {
|
||||
ev.preventDefault();
|
||||
goTo(getURL());
|
||||
});
|
||||
|
||||
document.getElementById("url").addEventListener("focus", ev => {
|
||||
ev.target.select();
|
||||
});
|
||||
|
||||
function setURL(url) {
|
||||
document.getElementById("url").value = url;
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,7 @@
|
|||
fileFormatVersion: 2
|
||||
guid: eb7ebeaee95301f4bb71ba610e3d0be0
|
||||
TextScriptImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="Terminal.css">
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="openNewTab()">New Tab</button><br>
|
||||
<button onclick="shiftTabs(-1)"> « </button><button onclick="shiftTabs(1)"> » </button><br>
|
||||
|
||||
<p style="text-align: center; font-size: 10px;">Be careful, too many animated tabs open at once can kill your framerate and make you sick.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,7 @@
|
|||
fileFormatVersion: 2
|
||||
guid: dd289a7b626a07e49b961e7a9cab2c43
|
||||
TextScriptImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
Loading…
Reference in New Issue