Skip to content

Instantly share code, notes, and snippets.

@Cvar1984

Cvar1984/lain.html

Last active June 5, 2020 09:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Cvar1984/a91e9ee1db9dfd1f893fa75caed482fb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Cvar1984/a91e9ee1db9dfd1f893fa75caed482fb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
lain.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cvar1984</title>
<meta name="author" content="Cvar1984" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link rel="stylesheet" media="screen" href="https://cvar1984.github.io/css/style.css" />
<link href="https://cvar1984.github.io/css/main.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.8/typed.min.js"></script>
</head>
<body class="modal-body">
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- scripts -->
<script src="https://cvar1984.github.io/js/particles.js"></script>
<script src="https://cvar1984.github.io/js/app.js"></script>
<!-- stats.js -->
<script>
particlesJS("particles-js", {
particles: {
number: {
value: 500,
density: {
enable: true,
value_area: 800,
},
},
color: {
value: "#6aff00",
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#ffffff",
},
polygon: {
nb_sides: 5,
},
image: {
src: "img/github.svg",
width: 100,
height: 100,
},
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 1,
random: true,
anim: {
enable: true,
speed: 4,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: false,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1,
},
move: {
enable: true,
speed: 0.5,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200,
},
},
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse",
},
onclick: {
enable: false,
mode: "push",
},
resize: true,
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1,
},
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3,
},
repulse: {
distance: 200,
duration: 0.4,
},
push: {
particles_nb: 4,
},
remove: {
particles_nb: 2,
},
},
},
retina_detect: true,
});
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
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>
<div class="modal-header">
<font color="lime">cvar1984@yourhead</font
><font color="CornflowerBlue">:~</font><font color="white">$&nbsp;</font
><font class="blink">&block;</font>
</div>
<audio controls autoplay loop style="display: none;" id="bgAudio">
<source src="https://cvar1984.github.io/audio/bgm.mp3" type="audio/mpeg" />
</audio>
<img src="https://cvar1984.github.io/images/navi.png" onclick="audio.play()" id="navi" />
<div class="modal-footer">
<p><span id="typed"></span></p>
<script type="text/javascript">
var audio = document.getElementById('bgAudio');
var typed = new Typed("#typed", {
strings: ["No matter where you are, everyone is connected"],
typeSpeed: 70,
});
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment