IMPLEMENT: particles.js -->(js/[particles.js, app.js, stats.js] , index.php(imports, divs))
This commit is contained in:
parent
4fe2528aa7
commit
a616f0bcc9
97
css/style.css
Normal file
97
css/style.css
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
/* =============================================================================
|
||||||
|
HTML5 CSS Reset Minified - Eric Meyer
|
||||||
|
========================================================================== */
|
||||||
|
/*
|
||||||
|
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
|
||||||
|
body{line-height:1}
|
||||||
|
|
||||||
|
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
|
||||||
|
nav ul{list-style:none}
|
||||||
|
blockquote,q{quotes:none}
|
||||||
|
blockquote:before,blockquote:after,q:before,q:after{content:none}
|
||||||
|
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
|
||||||
|
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
|
||||||
|
del{text-decoration:line-through}
|
||||||
|
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
|
||||||
|
table{border-collapse:collapse;border-spacing:0}
|
||||||
|
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
|
||||||
|
input,select{vertical-align:middle}
|
||||||
|
li{list-style:none}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
My CSS
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* ---- base ---- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
html{
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
*/
|
||||||
|
canvas{
|
||||||
|
display:block;
|
||||||
|
vertical-align:bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#footer,h3 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- stats.js ---- */
|
||||||
|
.count-particles{
|
||||||
|
background: #000022;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 5px;
|
||||||
|
right: 0;
|
||||||
|
width: 80px;
|
||||||
|
color: #13E8E9;
|
||||||
|
font-size: .8em;
|
||||||
|
text-align: left;
|
||||||
|
text-indent: 4px;
|
||||||
|
line-height: 14px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-count-particles{
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stats,
|
||||||
|
.count-particles{
|
||||||
|
-webkit-user-select: none;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stats{
|
||||||
|
border-radius: 3px 3px 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-particles{
|
||||||
|
border-radius: 0 0 3px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---- particles.js container ---- */
|
||||||
|
|
||||||
|
#particles-js{
|
||||||
|
position: fixed;
|
||||||
|
z-index: -999;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #1a1c20;
|
||||||
|
background-image: url('');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
48
index.php
48
index.php
@ -13,6 +13,9 @@
|
|||||||
<!-- Bootstrap CSS -->
|
<!-- Bootstrap CSS -->
|
||||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<!-- ccs stylesheet for Particles.js -->
|
||||||
|
<link rel="stylesheet" media="screen" href="css/style.css">
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var PHPSESSIONUSER = '<?php echo $_SESSION['user']; ?>';
|
var PHPSESSIONUSER = '<?php echo $_SESSION['user']; ?>';
|
||||||
console.log(PHPSESSIONUSER);
|
console.log(PHPSESSIONUSER);
|
||||||
@ -22,6 +25,16 @@
|
|||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<!-- PARTICLES JS -->
|
||||||
|
<!-- particles.js container -->
|
||||||
|
<div id="particles-js"></div>
|
||||||
|
|
||||||
|
<!-- count particles -->
|
||||||
|
<div class="count-particles">
|
||||||
|
<span class="js-count-particles">--</span> particles
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Include the header-->
|
<!-- Include the header-->
|
||||||
<?php
|
<?php
|
||||||
if(isset($_SESSION['user'])){
|
if(isset($_SESSION['user'])){
|
||||||
@ -33,6 +46,9 @@
|
|||||||
|
|
||||||
<?php #include('segments/_indexTestLoginVals.php'); ?><!-- For forms testing -->
|
<?php #include('segments/_indexTestLoginVals.php'); ?><!-- For forms testing -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Welche seite soll geladen werden-->
|
<!-- Welche seite soll geladen werden-->
|
||||||
<?php
|
<?php
|
||||||
$page = '_404.html';
|
$page = '_404.html';
|
||||||
@ -66,7 +82,7 @@
|
|||||||
require('segments/'.$page);
|
require('segments/'.$page);
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
<div id="footer">
|
||||||
<div id="content">
|
<div id="content">
|
||||||
<?php
|
<?php
|
||||||
if(isset($_SESSION['username'])){
|
if(isset($_SESSION['username'])){
|
||||||
@ -75,12 +91,40 @@
|
|||||||
?>
|
?>
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Include the footer-->
|
<!-- Include the footer-->
|
||||||
<?php include('segments/_footer.html'); ?>
|
<?php include('segments/_footer.html'); ?>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Optional JavaScript -->
|
<!-- Optional JavaScript -->
|
||||||
|
|
||||||
|
<!-- scripts -->
|
||||||
|
<script src="js/particles.js"></script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
<!-- stats.js -->
|
||||||
|
<script src="js/stats.js"></script>
|
||||||
|
<script>
|
||||||
|
var count_particles, stats, update;
|
||||||
|
stats = new Stats;
|
||||||
|
stats.setMode(0);
|
||||||
|
stats.domElement.style.position = 'fixed';
|
||||||
|
stats.domElement.style.right = '0px';
|
||||||
|
stats.domElement.style.bottom = '35px';
|
||||||
|
document.body.appendChild(stats.domElement);
|
||||||
|
count_particles = document.querySelector('.js-count-particles');
|
||||||
|
update = function() {
|
||||||
|
stats.begin();
|
||||||
|
stats.end();
|
||||||
|
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
|
||||||
|
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
|
||||||
|
}
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
};
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||||
|
|||||||
133
js/app.js
Normal file
133
js/app.js
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
/* -----------------------------------------------
|
||||||
|
/* How to use? : Check the GitHub README
|
||||||
|
/* ----------------------------------------------- */
|
||||||
|
|
||||||
|
/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
|
||||||
|
/*
|
||||||
|
particlesJS.load('particles-js', 'particles.json', function() {
|
||||||
|
console.log('particles.js loaded - callback');
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Otherwise just put the config content (json): */
|
||||||
|
|
||||||
|
particlesJS('particles-js',
|
||||||
|
|
||||||
|
{
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 80,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#ffffff"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.8,
|
||||||
|
"random": false,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 5,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 40,
|
||||||
|
"size_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#ffffff",
|
||||||
|
"opacity": 0.6,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 6,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "html",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 400,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 400,
|
||||||
|
"size": 40,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 200
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true,
|
||||||
|
"config_demo": {
|
||||||
|
"hide_card": false,
|
||||||
|
"background_color": "#b61924",
|
||||||
|
"background_image": "",
|
||||||
|
"background_position": "50% 50%",
|
||||||
|
"background_repeat": "no-repeat",
|
||||||
|
"background_size": "cover"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
);
|
||||||
1541
js/particles.js
Normal file
1541
js/particles.js
Normal file
File diff suppressed because it is too large
Load Diff
149
js/stats.js
Normal file
149
js/stats.js
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
/**
|
||||||
|
* @author mrdoob / http://mrdoob.com/
|
||||||
|
*/
|
||||||
|
|
||||||
|
var Stats = function () {
|
||||||
|
|
||||||
|
var startTime = Date.now(), prevTime = startTime;
|
||||||
|
var ms = 0, msMin = Infinity, msMax = 0;
|
||||||
|
var fps = 0, fpsMin = Infinity, fpsMax = 0;
|
||||||
|
var frames = 0, mode = 0;
|
||||||
|
|
||||||
|
var container = document.createElement( 'div' );
|
||||||
|
container.id = 'stats';
|
||||||
|
container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
|
||||||
|
container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
|
||||||
|
|
||||||
|
var fpsDiv = document.createElement( 'div' );
|
||||||
|
fpsDiv.id = 'fps';
|
||||||
|
fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
|
||||||
|
container.appendChild( fpsDiv );
|
||||||
|
|
||||||
|
var fpsText = document.createElement( 'div' );
|
||||||
|
fpsText.id = 'fpsText';
|
||||||
|
fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
|
||||||
|
fpsText.innerHTML = 'FPS';
|
||||||
|
fpsDiv.appendChild( fpsText );
|
||||||
|
|
||||||
|
var fpsGraph = document.createElement( 'div' );
|
||||||
|
fpsGraph.id = 'fpsGraph';
|
||||||
|
fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
|
||||||
|
fpsDiv.appendChild( fpsGraph );
|
||||||
|
|
||||||
|
while ( fpsGraph.children.length < 74 ) {
|
||||||
|
|
||||||
|
var bar = document.createElement( 'span' );
|
||||||
|
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
|
||||||
|
fpsGraph.appendChild( bar );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var msDiv = document.createElement( 'div' );
|
||||||
|
msDiv.id = 'ms';
|
||||||
|
msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
|
||||||
|
container.appendChild( msDiv );
|
||||||
|
|
||||||
|
var msText = document.createElement( 'div' );
|
||||||
|
msText.id = 'msText';
|
||||||
|
msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
|
||||||
|
msText.innerHTML = 'MS';
|
||||||
|
msDiv.appendChild( msText );
|
||||||
|
|
||||||
|
var msGraph = document.createElement( 'div' );
|
||||||
|
msGraph.id = 'msGraph';
|
||||||
|
msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
|
||||||
|
msDiv.appendChild( msGraph );
|
||||||
|
|
||||||
|
while ( msGraph.children.length < 74 ) {
|
||||||
|
|
||||||
|
var bar = document.createElement( 'span' );
|
||||||
|
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
|
||||||
|
msGraph.appendChild( bar );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var setMode = function ( value ) {
|
||||||
|
|
||||||
|
mode = value;
|
||||||
|
|
||||||
|
switch ( mode ) {
|
||||||
|
|
||||||
|
case 0:
|
||||||
|
fpsDiv.style.display = 'block';
|
||||||
|
msDiv.style.display = 'none';
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
fpsDiv.style.display = 'none';
|
||||||
|
msDiv.style.display = 'block';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
var updateGraph = function ( dom, value ) {
|
||||||
|
|
||||||
|
var child = dom.appendChild( dom.firstChild );
|
||||||
|
child.style.height = value + 'px';
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
|
||||||
|
REVISION: 12,
|
||||||
|
|
||||||
|
domElement: container,
|
||||||
|
|
||||||
|
setMode: setMode,
|
||||||
|
|
||||||
|
begin: function () {
|
||||||
|
|
||||||
|
startTime = Date.now();
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
end: function () {
|
||||||
|
|
||||||
|
var time = Date.now();
|
||||||
|
|
||||||
|
ms = time - startTime;
|
||||||
|
msMin = Math.min( msMin, ms );
|
||||||
|
msMax = Math.max( msMax, ms );
|
||||||
|
|
||||||
|
msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
|
||||||
|
updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
|
||||||
|
|
||||||
|
frames ++;
|
||||||
|
|
||||||
|
if ( time > prevTime + 1000 ) {
|
||||||
|
|
||||||
|
fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
|
||||||
|
fpsMin = Math.min( fpsMin, fps );
|
||||||
|
fpsMax = Math.max( fpsMax, fps );
|
||||||
|
|
||||||
|
fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
|
||||||
|
updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
|
||||||
|
|
||||||
|
prevTime = time;
|
||||||
|
frames = 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return time;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
update: function () {
|
||||||
|
|
||||||
|
startTime = this.end();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
if ( typeof module === 'object' ) {
|
||||||
|
|
||||||
|
module.exports = Stats;
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,2 +1,4 @@
|
|||||||
|
<div id="footer">
|
||||||
<h1>This is our Footer it foots you :D</h1>
|
<h1>This is our Footer it foots you :D</h1>
|
||||||
<p>This is a paragraph... ya don´t say</p>
|
<p>This is a paragraph... ya don´t say</p>
|
||||||
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user