-
Notifications
You must be signed in to change notification settings - Fork 0
/
example-sim_en.html
95 lines (83 loc) · 3.96 KB
/
example-sim_en.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE HTML>
<!-- Top-level HTML file for example-sim generated by 'grunt generate-development-html' -->
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="phet-sim-level" content="development">
<title>example-sim</title>
</head>
<!-- body is only made black for the loading phase so that the splash screen is black -->
<body style="background-color:black;">
<!-- a11y - aria-live attribute is used to send alerts and status updates to screen readers, otherwise invisible -->
<div id='aria-live-elements' style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; clip: rect(0px 0px 0px 0px); pointer-events: none;">
<p id="assertive" aria-live="assertive" aria-atomic="true"></p>
<p id="polite" aria-live="polite" aria-atomic="true"></p>
<p id="assertive-alert" aria-live="assertive" role="alert" aria-atomic="true"></p>
<p id="polite-status" aria-live="polite" role="status" aria-atomic="true"></p>
</div>
<!--
Subtract off half the image width and height to center it.
Additionally, move the entire image up by a bit. This is done by changing the top margin to be lower than 50%
The logo dimensions are given in splash.svg, currently at width="273.172px" height="130.05px"
-->
<img id="splash" style="position: absolute;top: 45%;left: 50%;margin-left: -137px;margin-top: -65px;">
<div id="progressBar"
style="position:absolute;top:50%;left:50%;margin-left:-147px;margin-top:50px;width:273px;height:10px">
<svg>
<rect id="progressBarBackground" x="10" y="10" width="273" height="10" rx="3" ry="3"
style="stroke: white;stroke-width:1"></rect>
<rect id="progressBarForeground" x="10" y="10" width="0" height="10" rx="3" ry="3" style="fill:#6acef5;"></rect>
</svg>
</div>
<script type="text/javascript">
( function() {
// Identify the brand (assume generated brand if not provided with query parameters)
var brandMatch = location.search.match( /brand=([^&]+)/ );
var brand = brandMatch ? decodeURIComponent( brandMatch[ 1 ] ) : 'adapted-from-phet';
// Load the desired splash screen image
document.getElementById( 'splash' ).src = '../brand/' + brand + '/images/splash.svg';
// Preloads, with more included for phet-io brand
var preloads = [
'../sherpa/lib/jquery-2.1.0.js',
'../sherpa/lib/lodash-4.17.4.js',
'../sherpa/lib/FileSaver-b8054a2.js',
'../sherpa/lib/himalaya-0.2.7.js',
'../assert/js/assert.js',
'../query-string-machine/js/QueryStringMachine.js',
'../chipper/js/initialize-globals.js',
'../chipper/js/getVersionForBrand.js',
'../sherpa/lib/seedrandom-2.4.2.js',
'../sherpa/lib/game-up-camera-1.0.0.js',
'../sherpa/lib/base64-js-1.2.0.js',
'../sherpa/lib/TextEncoderLite-3c9f6f0.js'
];
if ( brand === 'phet-io' ) {
preloads = preloads.concat( [
'../sherpa/lib/jsondiffpatch-0.1.31.js',
'../phet-io/js/phetio-query-parameters.js'
] );
}
// Loads a synchronously-executed asynchronously-downloaded script tag, with optional data-main parameter.
// See http://www.html5rocks.com/en/tutorials/speed/script-loading/ for more about script loading. It helps to
// load all of the scripts with this method, so they are treated the same (and placed in the correct execution
// order).
function loadURL( preloadURL, main ) {
var script = document.createElement( 'script' );
if ( typeof main === 'string' ) {
script.setAttribute( 'data-main', main );
}
script.type = 'text/javascript';
script.src = preloadURL;
script.async = false;
document.head.appendChild( script );
}
// Queue all of the preloads to be loaded.
preloads.forEach( loadURL );
loadURL( '../sherpa/lib/require-2.1.11.js', 'js/example-sim-config.js' );
})();
</script>
</body>
</html>