111 lines
2.9 KiB
HTML

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
<title>Will it work?</title>
<style type="text/css">
body {
font-family:sans-serif;
background-color: #ceedf4;
margin:0;
padding:0;
}
h1 {
font-size: 3.5em;
margin: 0;
padding: 0.7em;
color:#ffffff;
text-align:center;
background-image: linear-gradient(rgb(84, 180, 235), rgb(47, 164, 231));
}
.main {
margin:0 auto;
max-width: 50em;
}
.res_panel {
margin:2em;
padding:1em;
background-color: #ffffff;
border-radius: 1em;
}
.res_header { margin:0 0 1em 0; text-align:center; }
.answer { font-size:5em; text-align:center; }
.item {
}
.item span, .item a { display:inline-block; padding:0.5em; margin:0.2em; }
.tname { width:7em; }
.tdesc { width:30em; }
.tinfo { }
.OK { background-color:#ccffcc; }
.Error { background-color:#ffcccc; }
</style>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
function go()
{
var res = doTests(tests);
var out = "<div class=\"answer\">" + (res.ok?"Yes":"No") + "</div>" + res.out;
document.getElementById("result").innerHTML = out;
var res = doTests(add_tests);
var out = "<div class=\"res_header\">Additional browser features, that Photopea may require in the future</div>" + res.out;
document.getElementById("add_result").innerHTML = out;
}
function doTests(tests)
{
var out = "";
var ok = true;
for(var i=0; i<tests.length; i++)
{
var test = tests[i];
var oname = "<span class=\"tname\">"+test.name+"</span>";
var works = test.works();
ok = ok && (works==0);
var iclass = (works==0?"tdesc OK":"tdesc Error");
var odesc = "<span class=\""+iclass+"\">"+test.desc[works]+"</span>";
var oinfo = "<a class=\"tinfo\" href=\""+test.spec+"\">Info</a>";
out += "<div class=\"item\">" + oname + odesc + oinfo + "</div>";
}
return { out:out, ok:ok }
}
</script>
</head>
<body onload="go()">
<h1>Will Photopea work in my browser?</h1>
<div class="main">
<div class="res_panel" id="result"> </div>
<div class="res_panel" id="add_result"></div>
<div class="res_panel">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'photopeablog'; // required: replace example with your forum shortname
//*
(function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
//*/
</script>
<!---->
</div>
</div>
</body>
</html>