website updates
This commit is contained in:
Sebastian Hildebrandt
parent
04a2647612
commit
44949a0e01
121
docs/index.html
121
docs/index.html
@ -15,11 +15,25 @@
|
||||
|
||||
<title>systeminformation</title>
|
||||
<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) {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
function getDownloads() {
|
||||
typed();
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
@ -51,25 +65,108 @@
|
||||
}
|
||||
console.log('asd')
|
||||
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>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="getDownloads();">
|
||||
<body>
|
||||
<header class="bg-image-full" style="background-image: url('./assets/title-empty.jpg');">
|
||||
<img class="logo" src="assets/logo.png">
|
||||
<div class="title">systeminformation</div>
|
||||
<div class="subtitle"><span id="typed"></span></div>
|
||||
<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 class="container">
|
||||
<img class="logo" src="assets/logo.png">
|
||||
<div class="title">systeminformation</div>
|
||||
<div class="subtitle"><span id="typed"></span></div>
|
||||
<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>
|
||||
|
||||
<section class="container">
|
||||
<section class="container quickstart">
|
||||
<div class="row">
|
||||
<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>
|
||||
</div>
|
||||
@ -80,7 +177,7 @@
|
||||
</div>
|
||||
<div class="row number-section">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
@ -201,7 +298,7 @@
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script>
|
||||
window.onload = function (e) {
|
||||
getDownloads();
|
||||
init();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol";
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
@ -17,52 +17,48 @@ h1, h2, h3, h4 {
|
||||
background: no-repeat center center scroll;
|
||||
background-size: cover;
|
||||
-o-background-size: cover;
|
||||
height: 280px;
|
||||
height: calc(100vh);
|
||||
opacity: 0.95;
|
||||
filter: alpha(opacity=90);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 420px) {
|
||||
.bg-image-full {
|
||||
height: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.bg-image-full {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.bg-image-full {
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.bg-image-full {
|
||||
height: 550px;
|
||||
}
|
||||
.bg-image-full .container {
|
||||
text-align: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bg-image-full .title {
|
||||
color: #fff;
|
||||
padding-top: 10px;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 420px) {
|
||||
@ -108,7 +104,13 @@ h1, h2, h3, h4 {
|
||||
.bg-image-full .subtitle {
|
||||
text-align: center;
|
||||
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) {
|
||||
@ -140,6 +142,12 @@ h1, h2, h3, h4 {
|
||||
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) {
|
||||
.bg-image-full .text > a {
|
||||
font-size: 1rem;
|
||||
@ -162,7 +170,7 @@ h1, h2, h3, h4 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
color: #fff;
|
||||
font-size: .8rem;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
@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 {
|
||||
background: no-repeat center center scroll;
|
||||
background-size: cover;
|
||||
@ -513,6 +534,7 @@ footer {
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
footer a {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,7 +1,7 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol";
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100%;
|
||||
}
|
||||
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";
|
||||
@ -16,29 +16,28 @@ h1, h2, h3, h4 {
|
||||
-moz-background-size: cover;
|
||||
background-size: cover;
|
||||
-o-background-size: cover;
|
||||
height: 280px;
|
||||
height: calc(100vh);
|
||||
opacity: 0.95;
|
||||
filter: alpha(opacity=90);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
// align-items: center;
|
||||
flex-direction: column;
|
||||
@media only screen and (min-width: 420px) {
|
||||
height: 360px;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
height: 400px;
|
||||
}
|
||||
@media only screen and (min-width: 1024px) {
|
||||
height: 450px;
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
height: 550px;
|
||||
.container {
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.title {
|
||||
color: #fff;
|
||||
padding-top: 10px;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 10px;
|
||||
@media only screen and (min-width: 420px) {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
@ -64,7 +63,10 @@ h1, h2, h3, h4 {
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
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) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@ -83,6 +85,9 @@ h1, h2, h3, h4 {
|
||||
color: #aaa;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media only screen and (min-width: 375px) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@media only screen and (min-width: 420px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@ -97,7 +102,7 @@ h1, h2, h3, h4 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
color: #fff;
|
||||
font-size: .8rem;
|
||||
font-size: .9rem;
|
||||
@media only screen and (min-width: 420px) {
|
||||
font-size: .9rem;
|
||||
}
|
||||
@ -108,8 +113,26 @@ h1, h2, h3, h4 {
|
||||
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 {
|
||||
background: no-repeat center center scroll;
|
||||
-webkit-background-size: cover;
|
||||
@ -352,6 +375,7 @@ footer {
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
position: relative;
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user