liangsheng8708
/
ruffle
mirror of https://mirror.ghproxy.com/https://github.com/ruffle-rs/ruffle.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: Formatted demo index.html

This commit is contained in:
Nathan Adams 2020-05-26 20:16:30 +02:00 committed by Mike Welsh
parent 75759d9b3b
commit d02223c816
1 changed files with 158 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

310
web/packages/demo/www/index.html
View File

@ -1,175 +1,181 @@
<!DOCTYPE html> <!DOCTYPE html>
<html data-ruffle-optout> <html data-ruffle-optout>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ruffle Web Demo</title>
<link
href="https://fonts.googleapis.com/css?family=Lato"
rel="stylesheet"
/>
<style>
body {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Lato", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: black;
}
<head> #main {
<meta charset="utf-8"> margin: 15px;
<meta name="viewport" content="width=device-width, initial-scale=1.0"> width: 100%;
<title>Ruffle Web Demo</title> height: 100%;
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> align-self: center;
<style> max-height: calc(100vh - 70px);
body { }
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Lato', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: black;
}
#main { #container {
margin: 15px; height: calc(100vh - 70px);
width: 100%; width: 100vw;
height: 100%; }
align-self: center;
max-height: calc(100vh - 70px);
}
#container #player {
{ width: 100vw;
height: calc(100vh - 70px); height: calc(100vh - 70px);
width: 100vw; display: block;
} }
#player { #nav {
width: 100vw; width: 100%;
height: calc(100vh - 70px); background: #37528c;
display: block; border: 0;
} border-color: darkgray;
border-bottom: 2px #37528c;
border-style: solid;
box-shadow: 0 5px 5px #37528c;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
align-self: flex-start;
color: white;
min-height: 45px;
}
#nav { #title:hover {
width: 100%; opacity: 0.5;
background: #37528C; cursor: pointer;
border: 0; transition-duration: 0.5s;
border-color: darkgray; }
border-bottom: 2px #37528C;
border-style: solid;
box-shadow: 0 5px 5px #37528C;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
align-self: flex-start;
color: white;
min-height: 45px;
}
#title:hover { #title img {
opacity: 0.5; display: inline-block;
cursor: pointer; height: 32px;
transition-duration: 0.5s; margin-top: 5px;
} }
#title img { #file-picker {
display: inline-block; margin-top: 7px;
height: 32px; }
margin-top: 5px;
}
#file-picker { #local-file-container {
margin-top: 7px; display: inline-block;
} vertical-align: middle;
}
#local-file-container { #sample-swfs-container {
display: inline-block; display: none;
vertical-align: middle; vertical-align: middle;
} }
#sample-swfs-container { #author-container {
display: none; display: none;
vertical-align: middle; font-size: 13px;
} text-align: left;
}
#author-container { #author {
display: none; padding-left: 5px;
font-size: 13px; color: #ffad33;
text-align: left; }
}
#author { @media only screen and (max-width: 800px) {
padding-left: 5px; #local-file-container,
color: #ffad33; #sample-swfs-container {
} display: block;
}
@media only screen and (max-width: 800px) { #nav {
#local-file-container,#sample-swfs-container { min-height: 65px;
display: block; }
}
#nav { #player {
min-height: 65px; height: calc(100vh - 90px) !important;
} }
}
#player { @media only screen and (max-width: 600px) {
height: calc(100vh - 90px) !important; #local-file-container {
} display: none;
} }
@media only screen and (max-width: 600px) { #sample-swfs-label {
#local-file-container { display: none;
display: none; }
}
#sample-swfs-label {
display: none;
}
#author-container { #author-container {
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
} }
#nav { #nav {
min-height: 85px; min-height: 85px;
flex-direction: column; flex-direction: column;
padding-bottom: 2px; padding-bottom: 2px;
} }
} }
select, select,
input { input {
margin: 0 5px; margin: 0 5px;
} }
#player { #player {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="nav"> <div id="nav">
<div id="title"> <div id="title">
<a href="https://ruffle.rs" target="_blank"> <a href="https://ruffle.rs" target="_blank">
<img src="https://ruffle.rs/assets/logo.png" alt="Ruffle" data-canonical-src="https://ruffle.rs/assets/logo.png"> <img
</a> src="https://ruffle.rs/assets/logo.png"
</div> alt="Ruffle"
<div id="file-picker"> data-canonical-src="https://ruffle.rs/assets/logo.png"
<div id="local-file-container"> />
Local SWF: </a>
<input type="file" id="local-file"> </div>
</div> <div id="file-picker">
<div id="sample-swfs-container"> <div id="local-file-container">
<span id="sample-swfs-label">Sample SWF:</span> Local SWF:
<select id="sample-swfs"> <input type="file" id="local-file" />
<option value="none">None</option> </div>
<optgroup id="anim-optgroup" label="Animations"> <div id="sample-swfs-container">
</optgroup> <span id="sample-swfs-label">Sample SWF:</span>
<optgroup id="games-optgroup" label="Games"> <select id="sample-swfs">
</optgroup> <option value="none">None</option>
</select> <optgroup id="anim-optgroup" label="Animations">
<span id="author-container">Author: <a href="#" target="_blank" id="author"></a></span> </optgroup>
</div> <optgroup id="games-optgroup" label="Games"> </optgroup>
</div> </select>
</div> <span id="author-container"
<div id="main"> >Author: <a href="#" target="_blank" id="author"></a
</div> ></span>
<script src="./index.js"></script> </div>
</body> </div>
</html> </div>
<div id="main"></div>
<script src="./index.js"></script>
</body>
</html>