mike/systeminformation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

website updates

Browse Source
This commit is contained in:
Sebastian Hildebrandt 2019-01-26 20:21:24 +01:00
parent 04a2647612
commit 44949a0e01
4 changed files with 203 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
docs/index.html
View File

@ -15,11 +15,25 @@
<title>systeminformation</title> <title>systeminformation</title>
<script> <script>
function init() {
typed();
document.querySelector('.down').addEventListener('click', function () {
console.log('CLICKED')
scrollIt(
document.querySelector('.quickstart'),
600,
'easeOutQuad',
function () {
console.log('READY')
}
);
});
getDownloads();
}
function numberWithCommas(x) { function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} }
function getDownloads() { function getDownloads() {
typed();
var xhttp = new XMLHttpRequest(); var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () { xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
@ -51,25 +65,108 @@
} }
console.log('asd') console.log('asd')
var typed = new Typed('#typed', options); var typed = new Typed('#typed', options);
}
function scrollIt(destination, duration = 200, easing = 'linear', callback) {
const easings = {
linear(t) {
return t;
},
easeInQuad(t) {
return t * t;
},
easeOutQuad(t) {
return t * (2 - t);
},
easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
},
easeInCubic(t) {
return t * t * t;
},
easeOutCubic(t) {
return (--t) * t * t + 1;
},
easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
},
easeInQuart(t) {
return t * t * t * t;
},
easeOutQuart(t) {
return 1 - (--t) * t * t * t;
},
easeInOutQuart(t) {
return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
},
easeInQuint(t) {
return t * t * t * t * t;
},
easeOutQuint(t) {
return 1 + (--t) * t * t * t * t;
},
easeInOutQuint(t) {
return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
}
};
const start = window.pageYOffset;
const startTime = 'now' in window.performance ? performance.now() : new Date().getTime();
const documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
const destinationOffset = typeof destination === 'number' ? destination : destination.offsetTop;
const destinationOffsetToScroll = Math.round(documentHeight - destinationOffset < windowHeight ? documentHeight - windowHeight : destinationOffset);
if ('requestAnimationFrame' in window === false) {
window.scroll(0, destinationOffsetToScroll);
if (callback) {
callback();
}
return;
}
function scroll() {
const now = 'now' in window.performance ? performance.now() : new Date().getTime();
const time = Math.min(1, ((now - startTime) / duration));
const timeFunction = easings[easing](time);
window.scroll(0, Math.ceil((timeFunction * (destinationOffsetToScroll - start)) + start));
if (window.pageYOffset === destinationOffsetToScroll) {
if (callback) {
callback();
}
return;
}
requestAnimationFrame(scroll);
}
scroll();
} }
</script> </script>
</head> </head>
<body onload="getDownloads();"> <body>
<header class="bg-image-full" style="background-image: url('./assets/title-empty.jpg');"> <header class="bg-image-full" style="background-image: url('./assets/title-empty.jpg');">
<img class="logo" src="assets/logo.png"> <div class="container">
<div class="title">systeminformation</div> <img class="logo" src="assets/logo.png">
<div class="subtitle"><span id="typed"></span></div> <div class="title">systeminformation</div>
<div class="version">Current Version: <span id="version">4.0.0</span></div> <div class="subtitle"><span id="typed"></span></div>
<button class="btn btn-light" onclick="location.href='https://github.com/sebhildebrandt/systeminformation'"">View on Github <i class=" fab fa-github"></i></button> <div class="version">Current Version: <span id="version">4.0.0</span></div>
<button class="btn btn-light" onclick="location.href='https://github.com/sebhildebrandt/systeminformation'"">View on Github <i class=" fab fa-github"></i></button>
</div>
<div class="down">
Read Documentation<br>
<i class="fal fa-caret-down caret"></i>
</div>
</header> </header>
<section class="container"> <section class="container quickstart">
<div class="row"> <div class="row">
<div class="col-12 sectionheader index"> <div class="col-12 sectionheader index">
<div class="title">Quick Start</div> <div class="title">Overview</div>
<div class="subtitle">Lightweight collection of 35+ functions to retrieve detailed hardware, system and OS information. For Linux, macOS, partial Windows, FreeBSD and SunOS support</div> <div class="subtitle">Lightweight collection of 35+ functions to retrieve detailed hardware, system and OS information. For Linux, macOS, partial Windows, FreeBSD and SunOS support</div>
</div> </div>
</div> </div>
@ -80,7 +177,7 @@
</div> </div>
<div class="row number-section"> <div class="row number-section">
<div class="col-xl-4 col-lg-4 col-md-4 col-12"> <div class="col-xl-4 col-lg-4 col-md-4 col-12">
<div class="numbers">7,676</div> <div class="numbers">7,973</div>
<div class="title">Lines of code</div> <div class="title">Lines of code</div>
</div> </div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12"> <div class="col-xl-4 col-lg-4 col-md-4 col-12">
@ -88,7 +185,7 @@
<div class="title">Downloads last month</div> <div class="title">Downloads last month</div>
</div> </div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12"> <div class="col-xl-4 col-lg-4 col-md-4 col-12">
<div class="numbers">115</div> <div class="numbers">122</div>
<div class="title">Dependends</div> <div class="title">Dependends</div>
</div> </div>
</div> </div>
@ -201,7 +298,7 @@
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script> <script>
window.onload = function (e) { window.onload = function (e) {
getDownloads(); init();
} }
</script> </script>
</body> </body>

82
docs/styles.css
View File

@ -1,7 +1,7 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol";
font-weight: 300; font-weight: 300;
-webkit-font-smoothing: antialiased; min-height: 100%;
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
@ -17,52 +17,48 @@ h1, h2, h3, h4 {
background: no-repeat center center scroll; background: no-repeat center center scroll;
background-size: cover; background-size: cover;
-o-background-size: cover; -o-background-size: cover;
height: 280px; height: calc(100vh);
opacity: 0.95; opacity: 0.95;
filter: alpha(opacity=90);
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: center; -webkit-box-pack: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; text-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
} }
@media only screen and (min-width: 420px) { .bg-image-full .container {
.bg-image-full { text-align: center;
height: 360px; -ms-flex-item-align: center;
} align-self: center;
} display: -webkit-box;
display: -ms-flexbox;
@media only screen and (min-width: 768px) { display: flex;
.bg-image-full { -webkit-box-pack: center;
height: 400px; -ms-flex-pack: center;
} justify-content: center;
} -webkit-box-orient: vertical;
-webkit-box-direction: normal;
@media only screen and (min-width: 1024px) { -ms-flex-direction: column;
.bg-image-full { flex-direction: column;
height: 450px; -webkit-box-align: center;
} -ms-flex-align: center;
} align-items: center;
-webkit-box-flex: 1;
@media only screen and (min-width: 1200px) { -ms-flex-positive: 1;
.bg-image-full { flex-grow: 1;
height: 550px;
}
} }
.bg-image-full .title { .bg-image-full .title {
color: #fff; color: #fff;
padding-top: 10px; padding-top: 10px;
font-size: 1.8rem; font-size: 1.8rem;
margin-bottom: 10px;
} }
@media only screen and (min-width: 420px) { @media only screen and (min-width: 420px) {
@ -108,7 +104,13 @@ h1, h2, h3, h4 {
.bg-image-full .subtitle { .bg-image-full .subtitle {
text-align: center; text-align: center;
color: #bbb; color: #bbb;
font-size: 0.9rem; font-size: 0.78rem;
}
@media only screen and (min-width: 375px) {
.bg-image-full .subtitle {
font-size: 0.9rem;
}
} }
@media only screen and (min-width: 420px) { @media only screen and (min-width: 420px) {
@ -140,6 +142,12 @@ h1, h2, h3, h4 {
text-decoration: none; text-decoration: none;
} }
@media only screen and (min-width: 375px) {
.bg-image-full .text > a {
font-size: 0.9rem;
}
}
@media only screen and (min-width: 420px) { @media only screen and (min-width: 420px) {
.bg-image-full .text > a { .bg-image-full .text > a {
font-size: 1rem; font-size: 1rem;
@ -162,7 +170,7 @@ h1, h2, h3, h4 {
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
color: #fff; color: #fff;
font-size: .8rem; font-size: .9rem;
} }
@media only screen and (min-width: 420px) { @media only screen and (min-width: 420px) {
@ -183,6 +191,19 @@ h1, h2, h3, h4 {
} }
} }
.bg-image-full .down {
text-align: center;
color: #fff;
font-size: 1.3rem;
line-height: 1;
margin-bottom: 15px;
cursor: pointer;
}
.bg-image-full .down .caret {
font-size: 3rem;
}
.nav { .nav {
background: no-repeat center center scroll; background: no-repeat center center scroll;
background-size: cover; background-size: cover;
@ -513,6 +534,7 @@ footer {
margin-top: 30px; margin-top: 30px;
padding-top: 30px; padding-top: 30px;
padding-bottom: 30px; padding-bottom: 30px;
position: relative;
} }
footer a { footer a {

2
docs/styles.css.map
View File

File diff suppressed because one or more lines are too long

58
docs/styles.scss
View File

@ -1,7 +1,7 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol";
font-weight: 300; font-weight: 300;
-webkit-font-smoothing: antialiased; min-height: 100%;
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol";
@ -16,29 +16,28 @@ h1, h2, h3, h4 {
-moz-background-size: cover; -moz-background-size: cover;
background-size: cover; background-size: cover;
-o-background-size: cover; -o-background-size: cover;
height: 280px; height: calc(100vh);
opacity: 0.95; opacity: 0.95;
filter: alpha(opacity=90);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; text-align: center;
// align-items: center;
flex-direction: column; flex-direction: column;
@media only screen and (min-width: 420px) { .container {
height: 360px; text-align: center;
} align-self: center;
@media only screen and (min-width: 768px) { display: flex;
height: 400px; justify-content: center;
} flex-direction: column;
@media only screen and (min-width: 1024px) { align-items: center;
height: 450px; flex-grow: 1;
}
@media only screen and (min-width: 1200px) {
height: 550px;
} }
.title { .title {
color: #fff; color: #fff;
padding-top: 10px; padding-top: 10px;
font-size: 1.8rem; font-size: 1.8rem;
margin-bottom: 10px;
@media only screen and (min-width: 420px) { @media only screen and (min-width: 420px) {
font-size: 2.4rem; font-size: 2.4rem;
} }
@ -64,7 +63,10 @@ h1, h2, h3, h4 {
.subtitle { .subtitle {
text-align: center; text-align: center;
color: #bbb; color: #bbb;
font-size: 0.9rem; font-size: 0.78rem;
@media only screen and (min-width: 375px) {
font-size: 0.9rem;
}
@media only screen and (min-width: 420px) { @media only screen and (min-width: 420px) {
font-size: 1rem; font-size: 1rem;
} }
@ -83,6 +85,9 @@ h1, h2, h3, h4 {
color: #aaa; color: #aaa;
text-decoration: none; text-decoration: none;
} }
@media only screen and (min-width: 375px) {
font-size: 0.9rem;
}
@media only screen and (min-width: 420px) { @media only screen and (min-width: 420px) {
font-size: 1rem; font-size: 1rem;
} }
@ -97,7 +102,7 @@ h1, h2, h3, h4 {
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
color: #fff; color: #fff;
font-size: .8rem; font-size: .9rem;
@media only screen and (min-width: 420px) { @media only screen and (min-width: 420px) {
font-size: .9rem; font-size: .9rem;
} }
@ -108,8 +113,26 @@ h1, h2, h3, h4 {
font-size: 1.1rem; font-size: 1.1rem;
} }
} }
.down {
text-align: center;
color: #fff;
font-size: 1.3rem;
line-height: 1;
margin-bottom: 15px;
cursor: pointer;
.caret {
font-size: 3rem;
}
}
} }
// a[ id="quickstart" ]:target ~ #main div.row {
// transform: translateY( -500px );
// }
// #quickstart {
// background-color: #ff3333;
// }
.nav { .nav {
background: no-repeat center center scroll; background: no-repeat center center scroll;
-webkit-background-size: cover; -webkit-background-size: cover;
@ -352,6 +375,7 @@ footer {
margin-top: 30px; margin-top: 30px;
padding-top: 30px; padding-top: 30px;
padding-bottom: 30px; padding-bottom: 30px;
position: relative;
a { a {
color: #000; color: #000;
} }