Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Irfanprasetiya
Irfanprasetiya authored Apr 9, 2024
0 parents commit 11a5e09
Show file tree
Hide file tree
Showing 4 changed files with 332 additions and 0 deletions.
55 changes: 55 additions & 0 deletions idulfitri.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<title>Selamat Hari Raya Idul Fitri</title>
</head>
<body>

<link href='https://fonts.googleapis.com/css?family=Raleway:500,400,300,200,100' rel='stylesheet' type='text/css'>
<canvas class="container" id="container" role="main"></canvas>
<div class="content">
<h1>
<div id="jam"></div>
<p class="lead mt-2">
بسم الله الرحمن الرحيم
</p>
<div class="intro">Selamat Hari Raya Idul Fitri 1 Syawal 1445 H</div>
<a class="typewrite" data-period="2000" data-type='[ "Saya Irfan & Segenap Familiy Mengucapkan", "Minal Aidin Wal Faidzin", "Mohon Maaf Lahir dan Batin"]'>
<span class="wrap"></span>
</a>
<blockquote class="blockquote mt-3">
<p class="quote mb-0 small">Hari ini kurendahkan diriku, kulupakan kesombonganku, kutundukkan kepalaku, lalu kududuk terpaku di depan jendela hatimu, menanti pintu maafmu, terbuka untukku. Selamat Hari Raya Idul Fitri, Mohon maaf lahir dan batin.</p>
<footer class="blockquote-footer">Muhammad Irfan Hadi Prasetiya</footer>
</blockquote>
</h1>
</div>
<audio controls autoplay>
<source src="takbir.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div class="blur blurTop"><canvas class="canvas"id="blurCanvasTop"></canvas></div>
<div class="blur blurBottom"><canvas width="1000px" height="1000px" class="canvas" id="blurCanvasBottom"></canvas></div>





<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
200 changes: 200 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};

TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];

if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}

this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

var that = this;
var delta = 200 - Math.random() * 100;

if (this.isDeleting) { delta /= 2; }

if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}

setTimeout(function() {
that.tick();
}, delta);
};

window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
document.body.appendChild(css);
};

function tampilJam() {
var a_p = "";
var hari = new Date();
var jam_skr = hari.getHours();
var menit_skr = hari.getMinutes();
var detik_skr = hari.getSeconds();
if (jam_skr < 12) {
a_p = "AM";
} else {
a_p = "PM";
}
if (jam_skr == 0) {
jam_skr = 12;
}
if (jam_skr > 12) {
jam_skr = jam_skr - 12;
}
jam_skr = cekJam(jam_skr);
menit_skr = cekJam(menit_skr);
detik_skr = cekJam(detik_skr);
document.getElementById('jam').innerHTML=jam_skr + ":" + menit_skr + ":" + detik_skr + " " + a_p;
}

function cekJam(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
setInterval(tampilJam, 100);

var canvas = document.getElementById('container');
var clone = document.getElementById('blurCanvasBottom');

var cloneCtx = clone.getContext('2d');
var ctx = canvas.getContext('2d');


var w = $('#blurCanvasTop').width();
var h = $('#blurCanvasTop').height();

var ww = $(window).width();
var wh = $(window).height();
canvas.width = ww;
canvas.height= wh;
var partCount = 100;
var particles = [];

function particle(){
this.color = 'rgba(255,255,255,'+ Math.random()+')';
console.log(this.color);
this.x = randomInt(0,ww);
this.y = randomInt(0,wh);
this.direction = {
"x": -1 + Math.random() * 2,
"y": -1 + Math.random() * 2
};
this.vx = 0.3 * Math.random();
this.vy = 0.3 * Math.random();
this.radius = randomInt(2,3);
this.float = function(){
this.x += this.vx * this.direction.x;
this.y += this.vy * this.direction.y;
};
this.changeDirection = function (axis) {
this.direction[axis] *= -1;
};
this.boundaryCheck = function () {
if (this.x >= ww) {
this.x = ww;
this.changeDirection("x");
} else if (this.x <= 0) {
this.x = 0;
this.changeDirection("x");
}
if (this.y >= wh) {
this.y = wh;
this.changeDirection("y");
} else if (this.y <= 0) {
this.y = 0;
this.changeDirection("y");
}
};
this.draw = function () {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fill();
};
}
function clearCanvas() {
cloneCtx.clearRect(0, 0, ww, wh);
ctx.clearRect(0, 0, ww, wh);
}
function createParticles(){
for (i=0;i<partCount;i++){
var p = new particle();
particles.push(p);
}
}
function drawParticles() {
for (i=0;i<particles.length;i++) {
p = particles[i];
p.draw();
}
}
function updateParticles() {
for (var i = particles.length - 1; i >= 0; i--) {
p = particles[i];
p.float();
p.boundaryCheck();
}
}
createParticles();
drawParticles();
function animateParticles() {
clearCanvas();
drawParticles();
updateParticles();
cloneCtx.drawImage(canvas, 0, 0);
requestAnimationFrame(animateParticles);
}
requestAnimationFrame(animateParticles);
cloneCtx.drawImage(canvas, 0, 0);

$(window).on('resize',function(){
ww = $(window).width();
wh = $(window).height();
canvas.width = ww;
canvas.height= wh;
clearCanvas();
particles = [];
createParticles();
drawParticles();
});
function randomInt(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
function velocityInt(min,max)
{
return Math.random()*(max-min+1)+min;
}
77 changes: 77 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
html,body {
font-family: Raleway;
overflow:hidden;
width:100%;
height:100%;
position:absolute;
color: white;
background: linear-gradient(25deg,#dfe6e9,#55efc4);
text-shadow: 0px 1px 2px rgba(0,0,0,0.1);
}
.container {
width:100%;
height:100%;
position:absolute;
}
#blurCanvasTop{
position:absolute;
}
#blurCanvasBottom{
left:30%;
top:0;
position:absolute;
}
.content {
left:15%;
top:20%;
width:70%;
position:relative;
}

.blur {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.blurTop{
left:40%;
top:-110%;
transform:rotate(20deg);
transform-origin: 0 100%;
}
.blurBottom{
left:-60%;
top:100%;
transform:rotate(20deg);
transform-origin: 100% 0%;
}

.intro{
font-size: 30px;
}

.typewrite{
font-size: 20px;
}

.quote{
font-size: 15px;
}

audio {
opacity: 0;
}

@media (min-width: 576px) {
.intro{
font-size: 100%;
}

.typewrite{
font-size: 50px;
}
.quote{
font-size: 22px;
}
}
Binary file added takbir.mp3
Binary file not shown.

0 comments on commit 11a5e09

Please sign in to comment.