caryoscelus
/
zeronet-conservancy
mirror of https://github.com/zeronet-conservancy/zeronet-conservancy.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<html>
<script nonce="{script_nonce}">
window.benchmark_key = "{benchmark_key}";

function setState(elem, text) {
    var formatted = text
    var parts = text.match(/\* Running (.*?)(\n|$)/g)
    if (parts) {
        for (var i=0; i < parts.length; i++) {
            part = parts[i];
            var details = part.match(/\* Running (.*?) (\.+|$)(.*)/);
            if (details) {
                var title = details[1]
                var progress = details[2]
                var result = details[3]

                result_parts = result.match(/(.*) Done in ([0-9\.]+)s = (.*?) \(([0-9\.]+)x\)/)
                var percent = Math.min(100, progress.length * 10)
                if (result_parts) percent = 100
                var style = "background-image: linear-gradient(90deg, #FFF " + percent + "%, #FFF 0%, #d9d5de 0%);"
                var part_formatted = "<div class='test' style='" + style + "'>"
                part_formatted += "<span class='title'>" + title + "</span><span class='percent percent-" + percent + "'>" + percent + "%</span> "
                if (result_parts) {
                    var result_extra = result_parts[1]
                    var taken = result_parts[2]
                    var multipler_title = result_parts[3]
                    var multipler = result_parts[4]
                    part_formatted += "<div class='result result-" + multipler_title.replace(/[^A-Za-z]/g, "") + "'>"
                    part_formatted += " <span class='taken'>" + taken + "s</span>"
                    part_formatted += " <span class='multipler'>" + multipler + "x</span>"
                    part_formatted += " <span class='multipler-title'>" + multipler_title + "</span>"
                    part_formatted += "</div>"
                } else {
                    part_formatted += "<div class='result'>" + result + "</div>"
                }
                part_formatted += "</div>"
                formatted = formatted.replace(part, part_formatted);
            }
        }
    }
    formatted = formatted.replace(/(\! Error:.*)/, "<div class='test error'>$1</div>");
    formatted = formatted.replace(/(\== Result ==[^]*)/, "<div class='test summary'>$1</div>");
    var is_bottom = document.body.scrollTop + document.body.clientHeight >= document.body.scrollHeight - 5;
    elem.innerHTML = formatted.trim();
    if (is_bottom)
        document.body.scrollTop = document.body.scrollHeight;
}

function stream(url, elem) {
    document.getElementById("h1").innerText = "Benchmark: Starting..."
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.setRequestHeader('Accept', 'text/html');
    xhr.send(null);
    xhr.onreadystatechange = function(state) {
        document.getElementById("h1").innerText = "Benchmark: Running..."
		setState(elem, xhr.responseText);
		if (xhr.readyState == 4) {
            document.getElementById("h1").innerText = "Benchmark: Done."
		}
	}
}
</script>
<body>
<style>
body {
background-color: #3c3546;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23cfcfcf' fill-opacity='0.09'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
h1 {
    font-family: monospace; color: white; font-weight: normal; text-transform: uppercase;
    max-width: 690px; margin: 30px auto; margin-bottom: 10px;
}
#out {
    white-space: pre-line; background-color: #ffffff1a; padding: 20px; font-family: Consolas, monospace;
    font-size: 11px; width: 90%; margin: auto; max-width: 650px; box-shadow: 0px 10px 30px -10px #5c5c5c6b;
}
.test { padding: 12px; box-shadow: 0px 5px 13px -5px #5c5c5c6b; margin-bottom: -2px; background-color: white; border: 1px solid #dbdbdb; }
.test .percent { float: right; }
.test .percent-100 { display: none; }
.test .result { float: right; }
.test .title { max-width: calc(100% - 150px); display: inline-block; }
.test .multipler-title { display: inline-block; width: 50px; text-align: right; }
.test:last-child { margin-bottom: 15px; border-color: #c1c1c1; }

.test .result-Sloooow { color: red; }
.test .result-Ehh { color: #ad1457; }
.test .result-Goodish { color: #ef6c00; }
.test .result-Ok { color: #00cf03; }
.test .result-Fine { color: #00bcd4; }
.test .result-Fast { color: #4b78ff; }
.test .result-WOW { color: #9c27b0; }
.test .result-Insane { color: #d603f4; }

.test.summary { margin-top: 20px; text-transform: uppercase; border-left: 10px solid #00ff63; border-color: #00ff63; }
.test.error { background-color: #ff2259; color: white; border-color: red; }

#start { text-align: center }
.button {
    background-color: white; padding: 10px 20px; display: inline-block; border-radius: 5px;
    text-decoration: none; color: #673AB7; text-transform: uppercase; margin-bottom: 11px; border-bottom: 2px solid #c1bff8;
}
.button:hover { border-bottom-color: #673AB7; }
.button:active { transform: translateY(1px) }
small { text-transform: uppercase; opacity: 0.7; color: white; letter-spacing: 1px; }
</style>

<h1 id="h1">Benchmark</h1>
<div id="out">
 <div id="start">
  <a href="#Start" class="button" id="start_button">Start benchmark</a>
  <small>(It will take around 20 sec)</small>
 </div>
</div>

<script nonce="{script_nonce}">
function start() {
    stream("/BenchmarkResult?benchmark_key={benchmark_key}&filter={filter}", document.getElementById("out"));
    return false;
}
document.getElementById("start_button").onclick = start
</script>
</body>
</html>