FrACT10/index.html at main · michaelbach/FrACT10 · GitHub

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!doctype html>
<html lang="en">
<!--
This file is part of FrACT10, a vision test battery.
Copyright © 2022 Michael Bach, bach@uni-freiburg.de, <https://michaelbach.de>
FrACT10>index.html. Created & © by Michael Bach on 2022-05-24.
-->
    <head>
        <meta charset="utf-8">
        <!--<meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">-->
        <link rel="apple-touch-icon" href="Resources/icons/icon.png" type="image/png">
        <link rel="apple-touch-startup-image" href="Resources/icons/icon.png" type="image/png">
        <link rel="icon" href="Resources/icons/FrACT_svg_icon.svg" type="image/svg+xml">
        <link rel="manifest" href="webApp.webmanifest" type="application/manifest+json">
        <meta name="description" content="Freiburg Vision Test Battery © bach@uni-freiburg.de">
        <title>FrACT10</title>
        <script type="text/javascript">
            OBJJ_INCLUDE_PATHS = ["Resources/cappFrameworks"];
            OBJJ_MAIN_FILE = "main.j";
            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols",*/ "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
            let progressBar = null;
            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path) {
                percent *= 100;
                if (!progressBar)
                    progressBar = document.getElementById("progress-bar");
                if (progressBar)
                    progressBar.style.width = Math.min(percent, 100) + "%";
            }
            let loadingHTML =
                    '<div id="loading">' +
	                '    <div style="flex-grow: 35"></div>' +
	                '    <div id="loading-text">Loading...</div>' +
	                '    <div id="progress-indicator">' +
	                '        <span id="progress-bar" style="width:0%"></span>' +
	                '    </div>' +
	                '    <div style="flex-grow: 65"></div>' +
                    '</div>';
        </script>
        <script src="Resources/cappFrameworks/Objective-J/Objective-J.js"></script>
        <script src="Resources/js/jspdf.umd.min.js"></script>
        <script src="Resources/js/jspdf.plugin.autotable.min.js"></script>
        <script src="Resources/js/FileSaver.min.js"></script>
        <script src="Resources/js/qrcode.min.js"></script>

        <style type="text/css">
            html, body, h1, p {
                margin: 0;
                padding: 0;
            }
            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
            #cappuccino-body {
                position: absolute;/* Position it absolutely so it will fill the height without content */
                top: 0;
                bottom: 0;
                width: 100%;
                z-index: 0;/* Put it at the bottom of the stack so it doesn't interfere with UI */
            }
            #cappuccino-body .container {
                display: table;
                margin: 0 auto;
                height: 100%;
            }
            #cappuccino-body .content {
                display: table-cell;
                height: 100%;
                vertical-align: top;
            }
            #loading {
                height: 100%;
                display:flex;
                flex-direction:column;
                flex-wrap:nowrap;
                justify-content: space-evenly;
            }
            #loading-text {
                height: 1.5em;
                color: #555;
                font: normal bold 36px/36px Arial, sans-serif;
            }
            #progress-indicator {
                padding: 0px;
                height: 16px;
                border: 5px solid #555;
                border-radius: 18px;
                background-color: white;
            }
            #progress-bar {
                position: relative;
                top: -1px;
                left: -1px;
                display: block;
                height: 18px;
                border-right: 1px solid #555;/* Compensate for moving the bar left 1px to overlap the indicator border */
                background-color: #555;
            }
            #noscript {
                position: relative;
                top: 35%;
                padding: 1em 1.5em;
                border: 5px solid #555;
                border-radius: 16px;
                background-color: white;
                color: #555;
                text-align: center;
                font: bold 24px Arial, sans-serif;
            }
            #noscript a {
                color: #98c0ff;
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <div id="cappuccino-body">
            <div class="container">
                <div class="content" id="loadingDiv">
                    <script type="text/javascript">
                        document.getElementById("loadingDiv").innerHTML = loadingHTML;
                    </script>
                </div>
            </div>
            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
                <div class="container">
                    <div class="content">
                        <div id="noscript">
                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                        </div>
                    </div>
                </div>
            </noscript>
        </div>
        <script> /* try to activate the service worker */
		  try {
			if (("serviceWorker" in navigator) && ['http:', 'https:'].includes(location.protocol)) {
			  navigator.serviceWorker.register("webAppServiceWorker.js").then((registration) => {
				  /*console.info('Service worker registration succeeded:', registration);*/
				}, /*catch*/ (error) => {
				  console.error(`Service worker registration failed: ${error}`);
				});
			  navigator.serviceWorker.addEventListener('message', (event) => {
				console.log(`Received message from service worker: ${event.data}`);
			  });
			}
		  } catch(error) {
		  	 console.log(`Error when trying to activate the service worker: ${error}`);
		  }
        </script>
    </body>
</html>