web: Copy extension player restyling to demo
This commit is contained in:
Nathan Adams
parent
cf9d99f3fb
commit
20bd980189
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,163 @@
|
|||
:root {
|
||||
--ruffle-light-blue: #546da3;
|
||||
--ruffle-blue: #37528c;
|
||||
--ruffle-dark-blue: #184778;
|
||||
--ruffle-orange: #ffad33;
|
||||
--ruffle-dark-orange: #966214;
|
||||
}
|
||||
|
||||
.notransition,
|
||||
.notransition *,
|
||||
.notransition::before,
|
||||
.notransition::after {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--ruffle-blue);
|
||||
font:
|
||||
14px Arial,
|
||||
sans-serif;
|
||||
margin: auto;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
background: var(--ruffle-dark-blue);
|
||||
text-align: center;
|
||||
padding: 16px 16px 6px;
|
||||
box-shadow: 0 0 12px #0008;
|
||||
}
|
||||
|
||||
.header a {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
#version-text {
|
||||
text-align: center;
|
||||
font-size: smaller;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(104%);
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
input,
|
||||
select {
|
||||
background: var(--ruffle-dark-blue);
|
||||
color: white;
|
||||
padding: 6px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
opacity: 0.5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 6px 8px;
|
||||
border: 2px solid var(--ruffle-blue);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
background: var(--ruffle-light-blue);
|
||||
color: white;
|
||||
|
||||
/* This gives the text a little more weight without outright bolding it */
|
||||
text-shadow: 0 0 0.1px white;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.option {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.option input,
|
||||
.option select {
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.option label {
|
||||
display: inline-block;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
/* Checkbox (Based on "Pure CSS Slider Checkboxes": https://codepen.io/Qvcool/pen/bdzVYW) */
|
||||
|
||||
.option.checkbox input {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.option.checkbox label::before,
|
||||
.option.checkbox label::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
transition:
|
||||
background 0.2s,
|
||||
right 0.2s;
|
||||
}
|
||||
|
||||
.option.checkbox label::before {
|
||||
height: 20px;
|
||||
width: 40px;
|
||||
right: 0;
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.option.checkbox label::after {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
right: 21px;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.option.checkbox input:checked + label::before {
|
||||
background: var(--ruffle-dark-orange);
|
||||
}
|
||||
|
||||
.option.checkbox input:checked + label::after {
|
||||
background: var(--ruffle-orange);
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
/* Number input */
|
||||
|
||||
.option.number-input input {
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -1,35 +1,100 @@
|
|||
:root {
|
||||
--ruffle-blue: #37528c;
|
||||
--ruffle-orange: #ffad33;
|
||||
--splash-screen-background: #31497d;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Lato, sans-serif;
|
||||
font-size: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-direction: column;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width: 100%;
|
||||
background: var(--ruffle-blue);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#nav > * {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
flex: 0 0 content;
|
||||
}
|
||||
|
||||
.select-container > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#web-url {
|
||||
width: min(40vw, 500px);
|
||||
}
|
||||
|
||||
#local-file {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#local-file-name,
|
||||
#sample-swfs-label,
|
||||
#local-file-static-label {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
#local-file-static-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle-info,
|
||||
#reload-swf {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#author {
|
||||
color: var(--ruffle-orange);
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#author-container {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
#player-container {
|
||||
overflow-y: hidden;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#player-container > * {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
border: 8px dashed var(--ruffle-orange);
|
||||
border-radius: 30px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in;
|
||||
margin: 10px 5px;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#overlay.drag {
|
||||
|
|
@ -37,163 +102,47 @@ body {
|
|||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
#player {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 10px 0;
|
||||
#overlay:not([hidden]) ~ #player {
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width: 100%;
|
||||
background: var(--ruffle-blue);
|
||||
box-shadow: 0 3px 6px 5px var(--ruffle-blue);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: white;
|
||||
padding: 10px 0 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#title {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
#title:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#title img {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#file-picker select,
|
||||
#file-picker input,
|
||||
#author {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#local-file-container,
|
||||
#sample-swfs-container {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#local-file {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#local-file-label {
|
||||
color: var(--ruffle-blue);
|
||||
padding: 3px 10px;
|
||||
margin: 5px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 50px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#local-file-name {
|
||||
min-width: 150px;
|
||||
display: inline-block;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
#sample-swfs {
|
||||
background-color: white;
|
||||
color: var(--ruffle-blue);
|
||||
border: 1px solid white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#author-container {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
#author {
|
||||
color: var(--ruffle-orange);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--ruffle-blue);
|
||||
margin: 15vh auto;
|
||||
padding: 20px;
|
||||
border: 2px solid white;
|
||||
#info-container {
|
||||
width: 300px;
|
||||
height: 270px;
|
||||
overflow: auto;
|
||||
background-color: var(--ruffle-blue);
|
||||
padding: 4px 16px;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
#info-container span:first-child {
|
||||
text-shadow: 0 0 1px white;
|
||||
}
|
||||
|
||||
#info-container span:first-child::after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
#info-container span:last-child {
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#open-modal,
|
||||
#reload-swf {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
/* TODO: Make metadata element IDs kebab-case, and convert back and forth
|
||||
between that and the camelCase of metadata JS object keys. */
|
||||
/* stylelint-disable-next-line selector-id-pattern */
|
||||
#backgroundColor {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: 2px solid var(--ruffle-dark-blue);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#metadata {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#metadata td {
|
||||
padding: 2px 1px;
|
||||
border: 1px solid #ddd;
|
||||
color: var(--ruffle-orange);
|
||||
}
|
||||
|
||||
#metadata tr td:nth-child(1) {
|
||||
font-weight: bold;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@media only screen and (width <= 800px) {
|
||||
#local-file-container,
|
||||
#sample-swfs-container {
|
||||
@media only screen and (width <= 1120px) {
|
||||
#local-file-static-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#local-file-container {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width <= 600px) {
|
||||
#local-file-static-label,
|
||||
#sample-swfs-label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#author-container {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#nav {
|
||||
.select-container {
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import "./lato.css";
|
||||
import "./common.css";
|
||||
import "./index.css";
|
||||
|
||||
declare global {
|
||||
|
|
@ -25,7 +27,7 @@ const ruffle = (window.RufflePlayer as PublicAPI).newest()!;
|
|||
|
||||
let player: RufflePlayer | null;
|
||||
|
||||
const main = document.getElementById("main")!;
|
||||
const main = document.getElementById("player-container")!;
|
||||
const overlay = document.getElementById("overlay")!;
|
||||
const authorContainer = document.getElementById("author-container")!;
|
||||
const author = <HTMLLinkElement>document.getElementById("author");
|
||||
|
|
@ -37,10 +39,9 @@ const sampleFileInput = <HTMLSelectElement>(
|
|||
document.getElementById("sample-swfs")
|
||||
);
|
||||
const localFileName = document.getElementById("local-file-name")!;
|
||||
const closeModal = document.getElementById("close-modal")!;
|
||||
const openModal = document.getElementById("open-modal")!;
|
||||
const toggleInfo = document.getElementById("toggle-info")!;
|
||||
const reloadSwf = document.getElementById("reload-swf")!;
|
||||
const metadataModal = document.getElementById("metadata-modal")!;
|
||||
const infoContainer = document.getElementById("info-container")!;
|
||||
// prettier-ignore
|
||||
const optionGroups = {
|
||||
"Animation": document.getElementById("anim-optgroup")!,
|
||||
|
|
@ -57,7 +58,7 @@ const baseDemoConfig = {
|
|||
forceAlign: true,
|
||||
};
|
||||
|
||||
const swfToFlashVersion: Record<number, string> = {
|
||||
const swfToFlashVersion: { [key: number]: string } = {
|
||||
1: "1",
|
||||
2: "2",
|
||||
3: "3",
|
||||
|
|
@ -122,37 +123,36 @@ function unload() {
|
|||
document.querySelectorAll("span.metadata").forEach((el) => {
|
||||
el.textContent = "Loading";
|
||||
});
|
||||
(<HTMLInputElement>document.getElementById("backgroundColor")).value =
|
||||
"#FFFFFF";
|
||||
document.getElementById("backgroundColor")!.style.backgroundColor =
|
||||
"white";
|
||||
}
|
||||
}
|
||||
|
||||
function load(options: DataLoadOptions | URLLoadOptions) {
|
||||
function load(options: string | DataLoadOptions | URLLoadOptions) {
|
||||
unload();
|
||||
player = ruffle.createPlayer();
|
||||
player.id = "player";
|
||||
main.append(player);
|
||||
player.load(options, false);
|
||||
player.addEventListener("loadedmetadata", function () {
|
||||
player.addEventListener("loadedmetadata", () => {
|
||||
if (player?.metadata) {
|
||||
for (const [key, value] of Object.entries(player.metadata)) {
|
||||
const metadataElement = document.getElementById(key);
|
||||
if (metadataElement) {
|
||||
switch (key) {
|
||||
case "backgroundColor":
|
||||
(<HTMLInputElement>metadataElement).value =
|
||||
value ?? "#FFFFFF";
|
||||
metadataElement.style.backgroundColor =
|
||||
value ?? "white";
|
||||
break;
|
||||
case "uncompressedLength":
|
||||
metadataElement.textContent = `${value >> 10}Kb`;
|
||||
break;
|
||||
// @ts-expect-error This intentionally falls through to the default case
|
||||
case "swfVersion":
|
||||
document.getElementById(
|
||||
"flashVersion",
|
||||
)!.textContent =
|
||||
swfToFlashVersion[value] ?? "Unknown";
|
||||
metadataElement.textContent = value;
|
||||
break;
|
||||
)!.textContent = swfToFlashVersion[value] ?? null;
|
||||
// falls through and executes the default case as well
|
||||
default:
|
||||
metadataElement.textContent = value;
|
||||
break;
|
||||
|
|
@ -177,7 +177,7 @@ function hideSample() {
|
|||
author.href = "";
|
||||
}
|
||||
|
||||
async function loadFile(file: File) {
|
||||
async function loadFile(file: File | undefined) {
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -204,9 +204,14 @@ function loadSample() {
|
|||
}
|
||||
}
|
||||
|
||||
localFileInput.addEventListener("change", (_event) => {
|
||||
if (localFileInput.files && localFileInput.files[0]) {
|
||||
loadFile(localFileInput.files[0]);
|
||||
localFileInput.addEventListener("change", (event) => {
|
||||
const eventTarget = event.target as HTMLInputElement;
|
||||
if (
|
||||
eventTarget?.files &&
|
||||
eventTarget?.files.length > 0 &&
|
||||
eventTarget.files[0]
|
||||
) {
|
||||
loadFile(eventTarget.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -230,8 +235,8 @@ main.addEventListener("drop", (event) => {
|
|||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
overlay.classList.remove("drag");
|
||||
localFileInput.files = event.dataTransfer?.files ?? null;
|
||||
if (event.dataTransfer?.files[0]) {
|
||||
if (event.dataTransfer) {
|
||||
localFileInput.files = event.dataTransfer.files;
|
||||
loadFile(event.dataTransfer.files[0]);
|
||||
}
|
||||
});
|
||||
|
|
@ -249,18 +254,18 @@ localFileInput.addEventListener("drop", (event) => {
|
|||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
overlay.classList.remove("drag");
|
||||
localFileInput.files = event.dataTransfer?.files ?? null;
|
||||
if (event.dataTransfer?.files[0]) {
|
||||
if (event.dataTransfer) {
|
||||
localFileInput.files = event.dataTransfer.files;
|
||||
loadFile(event.dataTransfer.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
closeModal.addEventListener("click", () => {
|
||||
metadataModal.style.display = "none";
|
||||
});
|
||||
|
||||
openModal.addEventListener("click", () => {
|
||||
metadataModal.style.display = "block";
|
||||
toggleInfo.addEventListener("click", () => {
|
||||
if (infoContainer.style.display === "none") {
|
||||
infoContainer.style.display = "flex";
|
||||
} else {
|
||||
infoContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
reloadSwf.addEventListener("click", () => {
|
||||
|
|
@ -281,15 +286,9 @@ window.addEventListener("load", () => {
|
|||
) {
|
||||
localFileInput.removeAttribute("accept");
|
||||
}
|
||||
overlay.classList.remove("hidden");
|
||||
overlay.removeAttribute("hidden");
|
||||
});
|
||||
|
||||
window.onclick = (event) => {
|
||||
if (event.target === metadataModal) {
|
||||
metadataModal.style.display = "none";
|
||||
}
|
||||
};
|
||||
|
||||
(async () => {
|
||||
const response = await fetch("swfs.json");
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/S6uyw4BMUTPHjxAwXjeu.woff2") format("woff2");
|
||||
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
|
||||
U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/S6uyw4BMUTPHjx4wXg.woff2") format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
|
||||
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
|
@ -41,6 +41,10 @@ module.exports = (_env, _argv) => {
|
|||
patterns: [
|
||||
{ from: path.resolve(__dirname, "www/index.html") },
|
||||
{ from: path.resolve(__dirname, "www/logo-anim.swf") },
|
||||
{ from: path.resolve(__dirname, "www/icon32.png") },
|
||||
{ from: path.resolve(__dirname, "www/icon48.png") },
|
||||
{ from: path.resolve(__dirname, "www/icon180.png") },
|
||||
{ from: path.resolve(__dirname, "www/logo.svg") },
|
||||
{ from: "swfs.json", noErrorOnMissing: true },
|
||||
{ from: "LICENSE*" },
|
||||
{ from: "README.md" },
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,32 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html data-ruffle-optout>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Ruffle Web Demo</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" />
|
||||
<link rel="icon" href="https://ruffle.rs/assets/favicon-32.png" sizes="32x32">
|
||||
<link rel="icon" href="https://ruffle.rs/assets/favicon-64.png" sizes="64x64">
|
||||
<link rel="icon" href="https://ruffle.rs/assets/favicon-180.png" sizes="180x180">
|
||||
<title>Ruffle Player</title>
|
||||
<link rel="icon" href="icon32.png" sizes="32x32">
|
||||
<link rel="icon" href="icon64.png" sizes="64x64">
|
||||
<link rel="icon" href="icon180.png" sizes="180x180">
|
||||
</head>
|
||||
<body>
|
||||
<div id="nav">
|
||||
<div id="title">
|
||||
<a href="https://ruffle.rs/" target="_blank">
|
||||
<img
|
||||
src="https://ruffle.rs/assets/logo.svg"
|
||||
alt="Ruffle"
|
||||
data-canonical-src="https://ruffle.rs/assets/logo.svg" />
|
||||
<a id="logo-container" href="https://ruffle.rs/" target="_blank">
|
||||
<img class="logo" src="logo.svg" alt="Ruffle" data-canonical-src="https://ruffle.rs/assets/logo.svg" />
|
||||
</a>
|
||||
<div class="select-container">
|
||||
<div id="web-url-container">
|
||||
<input id="web-url" name="web-url" type="text" placeholder="URL of a .swf file on the web">
|
||||
<button type="submit" id="web-form-submit">Load</button>
|
||||
</div>
|
||||
<div id="file-picker">
|
||||
<div id="local-file-container">
|
||||
<span id="local-file-static-label">Local SWF:</span>
|
||||
<input type="file" accept=".swf,.spl" id="local-file"
|
||||
aria-describedby="local-file-static-label" />
|
||||
<label for="local-file" id="local-file-label">Select File</label>
|
||||
<span id="local-file-name">No file selected.</span>
|
||||
<input type="file" accept=".swf,.spl" id="local-file" aria-describedby="local-file-static-label" />
|
||||
<button id="local-file-label">Select File</button>
|
||||
<label id="local-file-name" for="local-file">No file selected.</label>
|
||||
</div>
|
||||
<div id="sample-swfs-container" class="hidden">
|
||||
<span id="sample-swfs-label">Sample SWF:</span>
|
||||
|
|
@ -38,56 +35,53 @@
|
|||
<span>Author: </span><a href="#" target="_blank" id="author"></a>
|
||||
</div>
|
||||
</div>
|
||||
 
|
||||
<svg width="20px" id="open-modal" viewBox="0 0 416.979 416.979"><path fill="white" d="M356.004 61.156c-81.37-81.47-213.377-81.551-294.848-.182-81.47 81.371-81.552 213.379-.181 294.85 81.369 81.47 213.378 81.551 294.849.181 81.469-81.369 81.551-213.379.18-294.849zM237.6 340.786a5.821 5.821 0 0 1-5.822 5.822h-46.576a5.821 5.821 0 0 1-5.822-5.822V167.885a5.821 5.821 0 0 1 5.822-5.822h46.576a5.82 5.82 0 0 1 5.822 5.822v172.901zm-29.11-202.885c-18.618 0-33.766-15.146-33.766-33.765 0-18.617 15.147-33.766 33.766-33.766s33.766 15.148 33.766 33.766c0 18.619-15.149 33.765-33.766 33.765z"/></g></svg>
|
||||
 
|
||||
</div>
|
||||
<div>
|
||||
<svg id="toggle-info" width="20px" viewBox="0 0 416.979 416.979"><path fill="white" d="M356.004 61.156c-81.37-81.47-213.377-81.551-294.848-.182-81.47 81.371-81.552 213.379-.181 294.85 81.369 81.47 213.378 81.551 294.849.181 81.469-81.369 81.551-213.379.18-294.849zM237.6 340.786a5.821 5.821 0 0 1-5.822 5.822h-46.576a5.821 5.821 0 0 1-5.822-5.822V167.885a5.821 5.821 0 0 1 5.822-5.822h46.576a5.82 5.82 0 0 1 5.822 5.822v172.901zm-29.11-202.885c-18.618 0-33.766-15.146-33.766-33.765 0-18.617 15.147-33.766 33.766-33.766s33.766 15.148 33.766 33.766c0 18.619-15.149 33.765-33.766 33.765z"/></svg>
|
||||
<svg id="reload-swf" width="20px" viewBox="0 0 489.711 489.711"><path fill="white" d="M112.156 97.111c72.3-65.4 180.5-66.4 253.8-6.7l-58.1 2.2c-7.5.3-13.3 6.5-13 14 .3 7.3 6.3 13 13.5 13h.5l89.2-3.3c7.3-.3 13-6.2 13-13.5v-1.6l-3.3-88.2c-.3-7.5-6.6-13.3-14-13-7.5.3-13.3 6.5-13 14l2.1 55.3c-36.3-29.7-81-46.9-128.8-49.3-59.2-3-116.1 17.3-160 57.1-60.4 54.7-86 137.9-66.8 217.1 1.5 6.2 7 10.3 13.1 10.3 1.1 0 2.1-.1 3.2-.4 7.2-1.8 11.7-9.1 9.9-16.3-16.8-69.6 5.6-142.7 58.7-190.7zm350.3 98.4c-1.8-7.2-9.1-11.7-16.3-9.9-7.2 1.8-11.7 9.1-9.9 16.3 16.9 69.6-5.6 142.7-58.7 190.7-37.3 33.7-84.1 50.3-130.7 50.3-44.5 0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-.7 12.9-7.2 12.2-14.7s-7.2-12.9-14.7-12.2l-88.9 8c-7.4.7-12.9 7.2-12.2 14.7l8 88.9c.6 7 6.5 12.3 13.4 12.3.4 0 .8 0 1.2-.1 7.4-.7 12.9-7.2 12.2-14.7l-4.8-54.1c36.3 29.4 80.8 46.5 128.3 48.9 3.8.2 7.6.3 11.3.3 55.1 0 107.5-20.2 148.7-57.4 60.4-54.7 86-137.8 66.8-217.1z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main" aria-label="Select a demo or drag an SWF">
|
||||
<div id="overlay" class="hidden"></div>
|
||||
<div id="main">
|
||||
<div id="player-container" aria-label="Select a demo or drag an SWF">
|
||||
<div id="overlay" hidden></div>
|
||||
</div>
|
||||
<div id="info-container" style="display:none">
|
||||
<div>
|
||||
<span>Uncompressed Length</span>
|
||||
<span id="uncompressedLength">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>SWF Version</span>
|
||||
<span id="swfVersion">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>FP Version</span>
|
||||
<span id="flashVersion">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>ActionScript 3</span>
|
||||
<span id="isActionScript3">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>Total Frames</span>
|
||||
<span id="numFrames">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>Frame Rate</span>
|
||||
<span id="frameRate">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>SWF Width</span>
|
||||
<span id="width">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>SWF Height</span>
|
||||
<span id="height">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>SWF Background Color</span>
|
||||
<span id="backgroundColor"></span>
|
||||
</div>
|
||||
<div id="metadata-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" id="close-modal">×</span>
|
||||
<table id="metadata">
|
||||
<tr>
|
||||
<td>Uncompressed Length</td>
|
||||
<td><span class="metadata" id="uncompressedLength">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWF Version</td>
|
||||
<td><span class="metadata" id="swfVersion">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>FP Version</td>
|
||||
<td><span class="metadata" id="flashVersion">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ActionScript 3</td>
|
||||
<td><span class="metadata" id="isActionScript3">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Frames</td>
|
||||
<td><span class="metadata" id="numFrames">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Frame Rate</td>
|
||||
<td><span class="metadata" id="frameRate">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWF Width</td>
|
||||
<td><span class="metadata" id="width">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWF Height</td>
|
||||
<td><span class="metadata" id="height">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWF Background Color</td>
|
||||
<td><input class="metadata" type="color" id="backgroundColor" disabled value="#FFFFFF"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<script src="index.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="328" height="108"><defs><g id="a"><path fill="#966214" d="M37.85 61.25q-.4 0-.8.05-.5-.25-.9-.5-.3-.1-.55-.3l-.6-.6-4.25-6.45-1.5 11.25h3.45q.75-.1 1.5-.35.85-.25 1.65-.75.55-.35 1.05-.8.5-.45.95-1 .5-.5.75-1.2-.05.05-.15.1-.1.15-.25.25l-.1.2q-.15.05-.25.1m58.3 0q-.9 0-1.45-.7-.3-.3-.55-.6l-.05-.05v-.05l-4.25-6.4-1.5 11.25h3.45q.75-.1 1.5-.35.85-.25 1.6-.75.75-.5 1.4-1.1.45-.35.75-.85.35-.5.65-1.05l-.45.55q-.5.15-1.1.1m19.7 3.25h3.45q.75-.1 1.5-.35.25-.05.45-.15.35-.15.65-.3l.5-.3q.25-.15.5-.35.45-.35.9-.75.45-.35.75-.85l.1-.1q.1-.2.2-.35.2-.3.35-.6l-.3.4-.15.15q-.5.15-1.1.1-.25 0-.4-.05-.5-.15-.8-.4-.15-.1-.25-.25-.3-.3-.55-.6l-.05-.05v-.05l-4.25-6.4-1.5 11.25m52.6.2q-3.1-.25-5.7-.75-5.6-1.05-8.9-3.1-.75-.5-1.4-1-3.15-2.55-3.5-6.4l-1.5 11.25h21m33.4-5.65q-2.3-2.35-2.6-5.6l-1.5 11.25h21q-11.25-.95-16-4.85-.5-.4-.9-.8m55.15 2.5q-2.55-.25-3.25-1.8l-4.2-6.3-1.5 11.25h3.45q.6-.1 1.2-.3.4-.1.75-.2.35-.15.65-.3.7-.35 1.35-.8.75-.55 1.3-1.25.1-.15.25-.3m23.95-8.05l-1.5 11.2h21q-.3-.05-.6-.05-10.8-1-15.4-4.8-3.15-2.55-3.5-6.35z"/><path fill="#FFAD33" d="M40.65 47.25H51.8L49.75 61.7h16.5l2.3-16.25h-.05l.8-5.7q.4-2.45-1-4.2-.35-.4-.75-.8-.25-.25-.55-.5-.2-.2-.45-.35-1.95-1.4-4.5-1.4H34.3q-1.35 0-2.6.45-1.65.55-3.15 1.8Q25.8 37 25.3 40l-1.65 12h.05v.3l5.85 1.15h-9.5q-.5.05-1 .15-.5.15-1 .35-.5.2-.95.45-.5.3-.95.7-.45.35-.85.8-.35.4-.65.85-.3.45-.5.9-.15.45-.3.95L8 100.2h16.25l5-35.5 1.5-11.25L35 59.9l.6.6q.25.2.55.3.4.25.9.5.4-.05.8-.05.1-.05.25-.1l.1-.2q.15-.1.25-.25.1-.05.15-.1l.3-1.05 1.75-12.3m86.8-2h-.05l.15-1.25h-.05l1.65-11.7H112.9l-2.65 19.5h.05v.2l-.05.1h.05l5.8 1.15h-9.45q-.5.05-1 .15-.5.15-1 .35-.15.05-.3.15-.3.1-.55.25-.05 0-.1.05-.5.3-1 .65-.4.35-.7.7-.55.7-.95 1.45-.35.65-.55 1.4-.15.7-.25 1.4v.05q-.15 1.05-.35 2.05l-1.2 8.75v.1l-2.1 14.7H85.35L87.6 69.9h.05l.7-5.2 1.5-11.25 4.25 6.4v.05l.05.05q.25.3.55.6.55.7 1.45.7.6.05 1.1-.1l.45-.55.3-1.05 1.3-9.05h-.05l.7-5.05h-.05l.15-1.25H100l1.65-11.7H85.4L82.75 52h.05l-.05.3 5.85 1.15h-9.45q-.5.05-1 .15-.5.15-1 .35-.5.2-.95.45-.5.3-1 .65-.4.4-.8.85-.25.3-.55.65-.05.1-.15.2-.25.45-.4.9-.2.45-.3.95-.1.65-.2 1.25-.2 1.15-.4 2.25l-4.3 30.6q-.25 3 1.75 5.25 1.6 1.8 4 2.15.6.1 1.25.1h27.35q3.25 0 6-2.25.35-.35.7-.55l.3-.2q2-2 2.25-4.5l1.65-11.6q.05-.05.1-.05l1.65-11.35h.05l.7-5.2 1.5-11.25 4.25 6.4v.05l.05.05q.25.3.55.6.1.15.25.25.3.25.8.4.15.05.4.05.6.05 1.1-.1l.15-.15.3-.4.3-1.05 1.3-9.05h-.05l.7-5.05m61.8-35Q187 8 183.75 8H156q-3 0-5.75 2.25-1.3.95-2.05 2.1-.45.6-.7 1.2-.2.5-.35 1-.1.45-.15.95l-4.15 29.95h-.05l-.7 5.2h-.05l-.2 1.35h.05l-.05.3 5.85 1.15h-9.45q-2.1.05-3.95 1.6-1.9 1.55-2.25 3.55l-.5 3.5h-.05l-5.3 38.1h16.25l5-35.5 1.5-11.25q.35 3.85 3.5 6.4.65.5 1.4 1 3.3 2.05 8.9 3.1 2.6.5 5.7.75l1.75-11.25H158l.4-2.95h-.05l.7-5.05H159q.1-.9.3-1.9.1-.75.2-1.6.85-5.9 2.15-14.9 0-.15.05-.25l.1-.9q.2-1.55.45-3.15h11.25l-3.1 20.8h16.5L191 15.5q.15-1.7-.4-3.15-.5-1.1-1.35-2.1m50.3 0Q237.3 8 234.05 8H206.3q-2.3 0-4.45 1.35-.65.35-1.3.9-1.3.95-2.05 2.1-.45.6-.7 1.2-.4.9-.5 1.95l-4.15 29.95h-.05l-.7 5.2h-.05l-.2 1.35h.05l-.05.3 5.85 1.15h-9.45q-2.1.05-3.95 1.6-1.9 1.55-2.25 3.55l-.5 3.5h-.05l-1.2 8.75v.1l-4.1 29.25h16.25l5-35.5 1.5-11.25q.3 3.25 2.6 5.6.4.4.9.8 4.75 3.9 16 4.85l1.75-11.25h-12.2l.4-2.95h-.05l.7-5.05h-.05q.15-.9.3-1.9.1-.75.25-1.6.15-1.25.35-2.65v-.05q.95-6.7 2.35-16.5h11.25l-3.1 20.8h16.5l4.1-28.05q.15-1.7-.4-3.15-.5-1.1-1.35-2.1M259.5 45.5v-.05L264.85 8H248.6l-6.15 44.3 5.85 1.15h-9.45q-.5.05-1 .15-.5.15-1 .35-.5.2-.95.45-.5.3-1 .65-.4.4-.8.85-.35.4-.7.85-.25.45-.45.9-.15.45-.3.95l-5.85 41.6h16.25l5-35.5 1.5-11.25 4.2 6.3q.7 1.55 3.25 1.8l.05-.1q.25-.4.35-.85l.3-1.05 1.8-14.05m25.6-15.75q-.65 0-1.3.1-2.5.35-4.7 2.15-2.75 2.25-3.25 5.25l-1.95 14.7V52l-.05.3 5.85 1.15h-9.45q-1.9.05-3.6 1.35-.2.1-.35.25-1.9 1.55-2.25 3.55l-4.85 34.1q-.25 3 1.75 5.25 1.25 1.4 3 1.95 1.05.3 2.25.3h27.75q3.25 0 6-2.25 2.75-2 3.25-5l2.75-18.5h-16.5l-1.75 11h-11.25l2.1-14.75h.05l.85-6 1.5-11.2q.35 3.8 3.5 6.35 4.6 3.8 15.4 4.8.3 0 .6.05h15.75l2.75-19.25h-.05l1.15-8.2q.5-3-1.75-5.25-1.25-1.25-3-1.75-1-.5-2.25-.5H285.1m5.95 15.7h-.1l.15-.95h11.45l-1.25 8.95H290l.4-2.95h-.05l.7-5.05z"/></g></defs><use xlink:href="#a"/></svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
Loading…
Reference in New Issue