<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<title>Happy Diwali :: 2019</title>
<audio type="audio/mpeg" controls="none" id="audio1" src="https://doc-14-c4-docs.googleusercontent.com/docs/securesc/il692mlm7m45meherbdo6rn0bdt5au3h/jt4m6pddhi0dd1gn9kpb6hpidhjaesvi/1576058400000/12204571634357119575/12204571634357119575/1_R6BvCSiehomKLXimmyeEFwx0eEXFjPI?e=open&authuser=0"></audio>
<audio type="audio/mpeg" controls="none" id="audio2" src="https://doc-04-c4-docs.googleusercontent.com/docs/securesc/il692mlm7m45meherbdo6rn0bdt5au3h/9p3hpvf7iqjo378gvbia7k94vvpdnckf/1576058400000/12204571634357119575/12204571634357119575/1BBS6kQbv3ZVetKAeR7wZ8tcr-Qj0cjtK?e=open&authuser=0"></audio>
<script>
function playSound(){
var audio2 = document.getElementById('audio2');
if (audio2.paused) {
audio2.play();
}else{
audio2.currentTime = 0
}
}
</script>
</head>
<body onclick="playSound();">
<div class="container-fluid d-flex flex-column h-100" style="background-color:rgba(0, 0, 0, 0.48)">
<p class="text-center display-1 text-danger pb-5">Happy Diwali 2019</p>
<center><p class="text-white display-2 position-relative">click Anywhere on the Screen</p></center>
</div>
<footer class="footer footer-inverse" style=" margin-bottom: 0;">
<div class="container">
<p class="text-center text-danger"> Create by <a target="_blank" href="/#Abhijeet" >Abhijeet Kanal - Pune</a></p>
</div>
</footer>
</body></html>
<!--
https://www.soundsnap.com/tags/fireworks
https://www.soundsnap.com/streamers/play.php?id=1570976979.6489:99f9f3897fe63e643eba6f39ae8db83beb467a25:759e264e508bff45fa71292dec2c4810bef208163c3058ce28334e2ece94e7d47d4ff268c7207be03ef5d125f3d5bf951c69b3c7ff79b0ee38d4269a29f9918e7e0e0a7cec7600b250a974f9c8ac432206946439622231a6cccbf8850a820e6b6401b4b15272a9f40f2ceef947fe04f22f81b51e7906afccc406ca10434097281e359172e45d5323b58039daa1b4e2e57eb1c593d3c5204dfa12e3767d22468b08e99d4d59beca78f5c13ca0f4b3206d478f876820571b6706a712e152134c222b11db93e810f4788699ee8346ee41f0ad878a93926e603dbb426c2ca114b275a7ed39197418999da19c78dad2c9b7772a066b5d6f17ec2f11019e6d81f4993a2f873ae1341438c69333e3b785b1bfbf743a49e84d0d788f553439825834f15d
https://www.soundsnap.com/streamers/play.php?id=1570974954.2568:aaf77a6f8ee0003f4befbdd94ff6a976df7ff2d4:914e573d7e50fa46edf077cf4439505c01b263490c85a961830b714879bd9749cb10486aeeabea012a84e04a3c8c3de79bd1da8bb538b012f9c1bbcb7eed8ad9d7fca72f37a158fa5d2a185527b8469d88d01c8bb52ac3a7eef704b822e265c306468ae65fef7b3c2014ecc1940123910a09c97bced408247f9457c5ca62acd39562b9640ceea5ea4b9aaf03c2eb4057546d66f722218f5ca5877f816be00522becf078934213ab2ee1819bf5de8ade7c530c8ce28616687200b7259b981b4ce1188a0d227004c4f6d7bd0398c02f4ea13c40b0c27b53308df69992280d621bd0456a30a933889595ced4abc70fda8d6b3824a786c3980d5377593fbda34335c557ee5c589e623a068ba32f3ab4809cc0f0421fe104ec9d9aa8c16ed9c86ee24c0abfa82a8c6e3795b69a27727e3a5c7
https://www.soundsnap.com/streamers/play.php?id=1570974954.1762:1a77340f49a1c22e6a411623cee50a09f004ffd0:b29fac38ae0bbaf419d2c74cd99555c2548829ff2d6f4f686f41ee42281810be2e771831061ff78c50c1cbbba7a9766088bd144f9e7bd8e53a3a01233711f45f8e3b3511ea684ef6bc7c89c153066885343b0aaa81aee72dfea62cb696ac2aaa164d5efcafb05f1606bf22251d1895f47d55d920190f3bdbaaf1a2f2e975df8138acd0151293d505c1bc3794388231b753184f99a2c28f5a3b372b76fc988bf31e08c348728531d794a7f0263cfe058a1a9327774e2615b26883ac30416aced5553aeac327277938ee632e2b5dfac5543b015cb3b763ae714d1ae5a1372916e716a4b7be10725275ee0ee49a7f73e4a5665be017e6c3755b7276aa7ee8ce7a341d3a0019c66263d4973885e0670e753d1cb89875c5277785242f07ea4e528f600f6344efe950c188d1f59ac36b196fa1
-->
.display-1.text-center {
font-family:Montserrat;
color:#ff8f03!important;
padding-top:45px;
}
p.text-white.display-2{color:rgba(255,255,255,0.19)!important;z-index:0;}
html,body{height:100%;margin:0;padding:0;user-select: none;
/*background:#000 url("https://media.cntraveller.in/wp-content/uploads/2017/10/Diwali-from-space-866x487.jpg") no-repeat center top/cover;*/
background:#000 url("https://upload.wikimedia.org/wikipedia/commons/4/40/Bombay24a.jpg") no-repeat center bottom/cover;
}
ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
img{border:0}
body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
footer{position:fixed;left:0;right:0;z-index:10; bottom:0;}
audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}
$(function(){
var Fireworks = function(){
var self = this;
var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}
var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};
window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
self.init = function(){
self.canvas = document.createElement('canvas');
self.canvas.width = self.cw = $(window).innerWidth();
self.canvas.height = self.ch = $(window).innerHeight();
self.particles = [];
self.partCount = 150;
self.fireworks = [];
self.mx = self.cw/2;
self.my = self.ch/2;
self.currentHue = 30;
self.partSpeed = 5;
self.partSpeedVariance = 10;
self.partWind = 50;
self.partFriction = 5;
self.partGravity = 1;
self.hueMin = 0;
self.hueMax = 360;
self.fworkSpeed = 4;
self.fworkAccel = 10;
self.hueVariance = 30;
self.flickerDensity = 25;
self.showShockwave = true;
self.showTarget = false;
self.clearAlpha = 25;
$(document.body).append(self.canvas);
self.ctx = self.canvas.getContext('2d');
self.ctx.lineCap = 'round';
self.ctx.lineJoin = 'round';
self.lineWidth = 1;
self.bindEvents();
self.canvasLoop();
self.canvas.onselectstart = function() {
return false;
};
};
self.createParticles = function(x,y, hue){
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.currentTime = 0
}
var countdown = self.partCount;
while(countdown--){
var newParticle = {
x: x,
y: y,
coordLast: [
{x: x, y: y},
{x: x, y: y},
{x: x, y: y}
],
angle: rand(0, 360),
speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),
friction: 1 - self.partFriction/100,
gravity: self.partGravity/2,
hue: rand(hue-self.hueVariance, hue+self.hueVariance),
brightness: rand(50, 80),
alpha: rand(40,100)/100,
decay: rand(10, 50)/1000,
wind: (rand(0, self.partWind) - (self.partWind/2))/25,
lineWidth: self.lineWidth
};
self.particles.push(newParticle);
}
};
self.updateParticles = function(){
var i = self.particles.length;
while(i--){
var p = self.particles[i];
var radians = p.angle * Math.PI / 180;
var vx = Math.cos(radians) * p.speed;
var vy = Math.sin(radians) * p.speed;
p.speed *= p.friction;
p.coordLast[2].x = p.coordLast[1].x;
p.coordLast[2].y = p.coordLast[1].y;
p.coordLast[1].x = p.coordLast[0].x;
p.coordLast[1].y = p.coordLast[0].y;
p.coordLast[0].x = p.x;
p.coordLast[0].y = p.y;
p.x += vx;
p.y += vy;
p.y += p.gravity;
p.angle += p.wind;
p.alpha -= p.decay;
if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha < .05){
self.particles.splice(i, 1);
}
};
};
self.drawParticles = function(){
var i = self.particles.length;
while(i--){
var p = self.particles[i];
var coordRand = (rand(1,3)-1);
self.ctx.beginPath();
self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
self.ctx.closePath();
self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';
self.ctx.stroke();
if(self.flickerDensity > 0){
var inverseDensity = 50 - self.flickerDensity;
if(rand(0, inverseDensity) === inverseDensity){
self.ctx.beginPath();
self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)
self.ctx.closePath();
var randAlpha = rand(50,100)/100;
self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';
self.ctx.fill();
}
}
};
};
self.createFireworks = function(startX, startY, targetX, targetY){
var newFirework = {
x: startX,
y: startY,
startX: startX,
startY: startY,
hitX: false,
hitY: false,
coordLast: [
{x: startX, y: startY},
{x: startX, y: startY},
{x: startX, y: startY}
],
targetX: targetX,
targetY: targetY,
speed: self.fworkSpeed,
angle: Math.atan2(targetY - startY, targetX - startX),
shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),
acceleration: self.fworkAccel/100,
hue: self.currentHue,
brightness: rand(50, 80),
alpha: rand(50,100)/100,
lineWidth: self.lineWidth
};
self.fireworks.push(newFirework);
};
self.updateFireworks = function(){
var i = self.fireworks.length;
while(i--){
var f = self.fireworks[i];
self.ctx.lineWidth = f.lineWidth;
vx = Math.cos(f.angle) * f.speed,
vy = Math.sin(f.angle) * f.speed;
f.speed *= 1 + f.acceleration;
f.coordLast[2].x = f.coordLast[1].x;
f.coordLast[2].y = f.coordLast[1].y;
f.coordLast[1].x = f.coordLast[0].x;
f.coordLast[1].y = f.coordLast[0].y;
f.coordLast[0].x = f.x;
f.coordLast[0].y = f.y;
if(f.startX >= f.targetX){
if(f.x + vx <= f.targetX){
f.x = f.targetX;
f.hitX = true;
} else {
f.x += vx;
}
} else {
if(f.x + vx >= f.targetX){
f.x = f.targetX;
f.hitX = true;
} else {
f.x += vx;
}
}
if(f.startY >= f.targetY){
if(f.y + vy <= f.targetY){
f.y = f.targetY;
f.hitY = true;
} else {
f.y += vy;
}
} else {
if(f.y + vy >= f.targetY){
f.y = f.targetY;
f.hitY = true;
} else {
f.y += vy;
}
}
if(f.hitX && f.hitY){
self.createParticles(f.targetX, f.targetY, f.hue);
self.fireworks.splice(i, 1);
}
};
};
self.drawFireworks = function(){
var i = self.fireworks.length;
self.ctx.globalCompositeOperation = 'lighter';
while(i--){
var f = self.fireworks[i];
self.ctx.lineWidth = f.lineWidth;
var coordRand = (rand(1,3)-1);
self.ctx.beginPath();
self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
self.ctx.closePath();
self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';
self.ctx.stroke();
if(self.showTarget){
self.ctx.save();
self.ctx.beginPath();
self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)
self.ctx.closePath();
self.ctx.lineWidth = 1;
self.ctx.stroke();
self.ctx.restore();
}
if(self.showShockwave){
self.ctx.save();
self.ctx.translate(Math.round(f.x), Math.round(f.y));
self.ctx.rotate(f.shockwaveAngle);
self.ctx.beginPath();
self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);
self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';
self.ctx.lineWidth = f.lineWidth;
self.ctx.stroke();
self.ctx.restore();
}
};
};
self.bindEvents = function(){
$(window).on('resize', function(){
clearTimeout(self.timeout);
self.timeout = setTimeout(function() {
self.canvas.width = self.cw = $(window).innerWidth();
self.canvas.height = self.ch = $(window).innerHeight();
self.ctx.lineCap = 'round';
self.ctx.lineJoin = 'round';
}, 100);
});
$(self.canvas).on('mousedown', function(e){
self.mx = e.pageX - self.canvas.offsetLeft;
self.my = e.pageY - self.canvas.offsetTop;
self.currentHue = rand(self.hueMin, self.hueMax);
self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
$(self.canvas).on('mousemove.fireworks', function(e){
self.mx = e.pageX - self.canvas.offsetLeft;
self.my = e.pageY - self.canvas.offsetTop;
self.currentHue = rand(self.hueMin, self.hueMax);
self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
});
});
$(self.canvas).on('mouseup', function(e){
$(self.canvas).off('mousemove.fireworks');
});
}
self.clear = function(){
self.particles = [];
self.fireworks = [];
self.ctx.clearRect(0, 0, self.cw, self.ch);
};
self.canvasLoop = function(){
requestAnimFrame(self.canvasLoop, self.canvas);
self.ctx.globalCompositeOperation = 'destination-out';
self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';
self.ctx.fillRect(0,0,self.cw,self.ch);
self.updateFireworks();
self.updateParticles();
self.drawFireworks();
self.drawParticles();
};
self.init();
}
var fworks = new Fireworks();
$('#info-toggle').on('click', function(e){
$('#info-inner').stop(false, true).slideToggle(100);
e.preventDefault();
});
});
