harunpehlivan/.markdown

## .markdown

      
    Raw
  

              .markdown
            
          
    قران

A Pen by HARUN PEHLİVAN on CodePen.
License.

  
## index.html
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>قران كريم</title>
    <link rel="stylesheet" href="style.css">
</head>

<body onload="initClock()">
    <!--digital clock start-->
    <div class="datetime">
        <div class="date">
            <span id="dayname">Day</span>,
            <span id="month">Month</span>
            <span id="daynum">00</span>,
            <span id="year">Year</span>
        </div>
        <div class="time">
            <span id="hour">00</span>:
            <span id="minutes">00</span>:
            <span id="seconds">00</span>
            <span id="period">AM</span>
        </div>
    </div>

    <!--digital clock end-->

    <script type="text/javascript">
        function updateClock() {
            var now = new Date();
            var dname = now.getDay(),
                mo = now.getMonth(),
                dnum = now.getDate(),
                yr = now.getFullYear(),
                hou = now.getHours(),
                min = now.getMinutes(),
                sec = now.getSeconds(),
                pe = "AM";

            if (hou >= 12) {
                pe = "PM";
            }
            if (hou == 0) {
                hou = 12;
            }
            if (hou > 12) {
                hou = hou - 12;
            }

            Number.prototype.pad = function (digits) {
                for (var n = this.toString(); n.length < digits; n = 0 + n);
                return n;
            }

            var months = ["January", "February", "March", "April", "May", "June", "July", "Augest", "September", "October", "November", "December"];
            var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
            var ids = ["dayname", "month", "daynum", "year", "hour", "minutes", "seconds", "period"];
            var values = [week[dname], months[mo], dnum.pad(2), yr, hou.pad(2), min.pad(2), sec.pad(2), pe];
            for (var i = 0; i < ids.length; i++)
                document.getElementById(ids[i]).firstChild.nodeValue = values[i];
        }


        function initClock() {
            updateClock();
            window.setInterval("updateClock()", 1);
        }
    </script>


    <div class="text">صلى على سيدنا النبي</div>

</body>

</html>

<style>
*{
    margin: 0;
    padding: 0;
  }

  body{
    height: 100vh;
    display: grid;
    place-items:center;
    background: #10101E;
    font-family: "Segoe UI", sans-serif;
  }

  .datetime{
    color: #fff;
    background: #10101E;
    border: 3px solid #2E94E3;
    border-radius: 5px;
    transition: 0.5s;
    transition-property: background, box-shadow;
  }

  .datetime:hover{
    background: #2E94E3;
    box-shadow: 0 0 30px #2E94E3;
  }

  .date{
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 3px;
  }

  .time {
    font-size: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .time span:not(:last-child) {
    position: relative;
    margin: 0 6px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 3px;
  }
  .time span:last-child{
    background: #2E94E3;
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 10px;
    padding: 0 5px;
    border-radius: 3px;
  }
  .text{
    background: #10101E;
    color: #ffffff;
    font-size: 50px;
    border: 4px solid #2E94E3;
    border-radius: 7px
  }
  .text:hover{
    background: #2E94E3;
    box-shadow: 0 0 30px #2E94E3;
  }

  -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255, 255, 255, 0.1));
</style>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<span class="btn-play-pause loading"> <i class="fa fa-spinner"></i>Loading...</span><a id="codepen-link" href="https://hpitgroup.glitch.me/" target="_blank"></a>

<style>
html, body {
	 width: 100vw;
	 height: 100vh;
	 background: radial-gradient(#006a5f, #000);
	 background-size: 200% 200%;
	 background-position: -100% 50%;
}
 .btn-play-pause {
	 cursor: pointer;
	 position: absolute;
	 z-index: 1;
	 bottom: 20px;
	 left: 30px;
	 box-sizing: border-box;
	 padding: 12px 16px;
	 border: 1px solid white;
	 color: white;
	 font-family: 'Montserrat', sans-serif;
	 font-size: 1.2rem;
	 animation: clickMe 0.5s;
	 transition: opacity 0.8s;
}
 .btn-play-pause .fa {
	 margin-right: 8px;
}
 .btn-play-pause .fa-spinner {
	 animation: spin 1.5s infinite;
}
 .btn-play-pause.loading {
	 pointer-events: none;
	 pointer-events: none;
	 opacity: 0.5;
	 animation: load 3s infinite;
	 transition: none;
}
 @keyframes load {
	 50% {
		 opacity: 1;
	}
}
 @keyframes spin {
	 100% {
		 transform: rotate(360deg);
	}
}
 @keyframes clickMe {
	 65% {
		 transform: scale(1.2) rotate(-5deg);
	}
}
 #codepen-link {
	 position: absolute;
	 top: 20px;
	 right: 30px;
	 height: 40px;
	 width: 40px;
	 z-index: 10;
	 border-radius: 50%;
	 box-sizing: border-box;
	 background-image: url('https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1682379534/Purple_and_Blue_Neon_Gamer_Youtube_Banner_fetxhv.png');
	 background-position: center center;
	 background-size: cover;
	 opacity: 0.4;
	 transition: all 0.25s;
}
 #codepen-link:hover {
	 opacity: 0.8;
	 box-shadow: 0 0 6px #efefef;
}
</style>

<script>
	"use strict";

const defaultTrackUrl = "https://server11.mp3quran.net/yasser/001.mp3";
let canvas, ctx, audio;

function createAudio() {
  if (audio) return audio;
  const element = document.createElement("audio");
  document.body.appendChild(element);
  const ctx = new AudioContext();
  const source = ctx.createMediaElementSource(element);
  const gain = ctx.createGain();
  const analyser = ctx.createAnalyser();
  const btn = document.querySelector('.btn-play-pause');
  analyser.smoothingTimeConstant = 0.88;
  analyser.minDecibels = -120;
  analyser.maxDecibels = -10;
  analyser.fftSize = 1024;
  const frequencies = new Uint8Array(analyser.frequencyBinCount);
  source.connect(gain);
  gain.connect(analyser);
  analyser.connect(ctx.destination);
  return {
    element,
    btn,
    ctx,
    gain,
    analyser,
    playing: false,

    load(data) {
      element.src = window.URL.createObjectURL(data);
      return this;
    },

    play() {
      this.playing = true;
      element.play();
      btn.innerHTML = '<i class="fa fa-pause"></i>Pause';
      return this;
    },

    pause() {
      this.playing = false;
      element.pause();
      btn.innerHTML = '<i class="fa fa-play"></i>Play';
      return this;
    },

    get frequencyData() {
      analyser.getByteFrequencyData(frequencies);
      return frequencies;
    }

  };
}

function fetchFile(url = defaultTrackUrl) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = 'blob';
    xhr.addEventListener("load", () => resolve(xhr.response));
    xhr.send();
  });
}

function playPause() {
  audio.playing ? audio.pause() : audio.play();
}

function setup() {
  canvas = {
    a: document.createElement("canvas"),
    b: document.createElement("canvas")
  };
  canvas.b.style = `
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	`;
  document.body.appendChild(canvas.b);
  ctx = {
    a: canvas.a.getContext("2d"),
    b: canvas.b.getContext("2d")
  };
  audio = createAudio();
  resize();
  fetchFile().then(data => {
    audio.btn.classList.remove('loading');
    audio.btn.innerHTML = '<i class="fa fa-play"></i>Play';
    audio.btn.addEventListener('click', function userClicked(event) {
      audio.load(data).play();
      audio.element.addEventListener('ended', () => {
        audio.element.currentTime = 0;
        audio.element.pause();
      });
      audio.btn.addEventListener('click', playPause);
      audio.btn.removeEventListener('click', userClicked);
      draw();
    });
  });
}

function resize() {
  canvas.a.width = canvas.b.width = window.innerWidth;
  canvas.a.height = canvas.b.height = window.innerHeight;
}

function draw() {
  const {
    frequencyData
  } = audio;
  const spectrumWidth = 0.5 * frequencyData.length;
  const lineWidth = canvas.a.width / spectrumWidth * 0.5;
  const y = 0.5 * canvas.a.height;
  ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);
  ctx.b.clearRect(0, 0, canvas.b.width, canvas.b.height);
  let i, frequency, fNorm, x, hue, height;

  for (i = frequencyData.length - 1; i >= 0; i--) {
    frequency = frequencyData[i];
    fNorm = frequency / 256;
    x = i / spectrumWidth * canvas.a.width;
    hue = 110 * (1 - fNorm);
    height = 0.25 * canvas.a.height * fNorm;
    ctx.a.beginPath();
    ctx.a.lineWidth = lineWidth;
    ctx.a.strokeStyle = `hsla(${hue}, 60%, 50%, 1)`;
    ctx.a.moveTo(x, y);
    ctx.a.lineTo(x, y - height);
    ctx.a.stroke();
    ctx.a.closePath();
    ctx.a.beginPath();
    ctx.a.lineWidth = lineWidth;
    ctx.a.strokeStyle = `hsla(${hue}, 60%, 50%, 1)`;
    ctx.a.moveTo(x, y);
    ctx.a.lineTo(x, y + height);
    ctx.a.stroke();
    ctx.a.closePath();
  }

  ctx.b.save();
  ctx.b.filter = 'blur(5px)';
  ctx.b.drawImage(canvas.a, 0, 0);
  ctx.b.restore();
  ctx.b.save();
  ctx.b.globalCompositeOperation = 'lighter';
  ctx.b.drawImage(canvas.a, 0, 0);
  ctx.b.restore();
  window.requestAnimationFrame(draw);
}

window.addEventListener("load", setup);
window.addEventListener("resize", resize);
</script>
	<html lang="en" dir="ltr">

	<head>
	<meta charset="utf-8">
	<title>قران كريم</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body onload="initClock()">
	<!--digital clock start-->
	<div class="datetime">
	<div class="date">
	<span id="dayname">Day</span>,
	<span id="month">Month</span>
	<span id="daynum">00</span>,
	<span id="year">Year</span>
	</div>
	<div class="time">
	<span id="hour">00</span>:
	<span id="minutes">00</span>:
	<span id="seconds">00</span>
	<span id="period">AM</span>
	</div>
	</div>

	<!--digital clock end-->

	<script type="text/javascript">
	function updateClock() {
	var now = new Date();
	var dname = now.getDay(),
	mo = now.getMonth(),
	dnum = now.getDate(),
	yr = now.getFullYear(),
	hou = now.getHours(),
	min = now.getMinutes(),
	sec = now.getSeconds(),
	pe = "AM";

	if (hou >= 12) {
	pe = "PM";
	}
	if (hou == 0) {
	hou = 12;
	}
	if (hou > 12) {
	hou = hou - 12;
	}

	Number.prototype.pad = function (digits) {
	for (var n = this.toString(); n.length < digits; n = 0 + n);
	return n;
	}

	var months = ["January", "February", "March", "April", "May", "June", "July", "Augest", "September", "October", "November", "December"];
	var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
	var ids = ["dayname", "month", "daynum", "year", "hour", "minutes", "seconds", "period"];
	var values = [week[dname], months[mo], dnum.pad(2), yr, hou.pad(2), min.pad(2), sec.pad(2), pe];
	for (var i = 0; i < ids.length; i++)
	document.getElementById(ids[i]).firstChild.nodeValue = values[i];
	}


	function initClock() {
	updateClock();
	window.setInterval("updateClock()", 1);
	}
	</script>



	<div class="text">صلى على سيدنا النبي</div>

	</body>

	</html>

	<style>
	*{
	margin: 0;
	padding: 0;
	}

	body{
	height: 100vh;
	display: grid;
	place-items:center;
	background: #10101E;
	font-family: "Segoe UI", sans-serif;
	}

	.datetime{
	color: #fff;
	background: #10101E;
	border: 3px solid #2E94E3;
	border-radius: 5px;
	transition: 0.5s;
	transition-property: background, box-shadow;
	}

	.datetime:hover{
	background: #2E94E3;
	box-shadow: 0 0 30px #2E94E3;
	}

	.date{
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 3px;
	}

	.time {
	font-size: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.time span:not(:last-child) {
	position: relative;
	margin: 0 6px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 3px;
	}
	.time span:last-child{
	background: #2E94E3;
	font-size: 30px;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: 10px;
	padding: 0 5px;
	border-radius: 3px;
	}
	.text{
	background: #10101E;
	color: #ffffff;
	font-size: 50px;
	border: 4px solid #2E94E3;
	border-radius: 7px
	}
	.text:hover{
	background: #2E94E3;
	box-shadow: 0 0 30px #2E94E3;
	}

	-webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255, 255, 255, 0.1));
	</style>

	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	<span class="btn-play-pause loading"> <i class="fa fa-spinner"></i>Loading...</span><a id="codepen-link" href="https://hpitgroup.glitch.me/" target="_blank"></a>

	<style>
	html, body {
	width: 100vw;
	height: 100vh;
	background: radial-gradient(#006a5f, #000);
	background-size: 200% 200%;
	background-position: -100% 50%;
	}
	.btn-play-pause {
	cursor: pointer;
	position: absolute;
	z-index: 1;
	bottom: 20px;
	left: 30px;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid white;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2rem;
	animation: clickMe 0.5s;
	transition: opacity 0.8s;
	}
	.btn-play-pause .fa {
	margin-right: 8px;
	}
	.btn-play-pause .fa-spinner {
	animation: spin 1.5s infinite;
	}
	.btn-play-pause.loading {
	pointer-events: none;
	pointer-events: none;
	opacity: 0.5;
	animation: load 3s infinite;
	transition: none;
	}
	@keyframes load {
	50% {
	opacity: 1;
	}
	}
	@keyframes spin {
	100% {
	transform: rotate(360deg);
	}
	}
	@keyframes clickMe {
	65% {
	transform: scale(1.2) rotate(-5deg);
	}
	}
	#codepen-link {
	position: absolute;
	top: 20px;
	right: 30px;
	height: 40px;
	width: 40px;
	z-index: 10;
	border-radius: 50%;
	box-sizing: border-box;
	background-image: url('https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1682379534/Purple_and_Blue_Neon_Gamer_Youtube_Banner_fetxhv.png');
	background-position: center center;
	background-size: cover;
	opacity: 0.4;
	transition: all 0.25s;
	}
	#codepen-link:hover {
	opacity: 0.8;
	box-shadow: 0 0 6px #efefef;
	}
	</style>

	<script>
	"use strict";

	const defaultTrackUrl = "https://server11.mp3quran.net/yasser/001.mp3";
	let canvas, ctx, audio;

	function createAudio() {
	if (audio) return audio;
	const element = document.createElement("audio");
	document.body.appendChild(element);
	const ctx = new AudioContext();
	const source = ctx.createMediaElementSource(element);
	const gain = ctx.createGain();
	const analyser = ctx.createAnalyser();
	const btn = document.querySelector('.btn-play-pause');
	analyser.smoothingTimeConstant = 0.88;
	analyser.minDecibels = -120;
	analyser.maxDecibels = -10;
	analyser.fftSize = 1024;
	const frequencies = new Uint8Array(analyser.frequencyBinCount);
	source.connect(gain);
	gain.connect(analyser);
	analyser.connect(ctx.destination);
	return {
	element,
	btn,
	ctx,
	gain,
	analyser,
	playing: false,

	load(data) {
	element.src = window.URL.createObjectURL(data);
	return this;
	},

	play() {
	this.playing = true;
	element.play();
	btn.innerHTML = '<i class="fa fa-pause"></i>Pause';
	return this;
	},

	pause() {
	this.playing = false;
	element.pause();
	btn.innerHTML = '<i class="fa fa-play"></i>Play';
	return this;
	},

	get frequencyData() {
	analyser.getByteFrequencyData(frequencies);
	return frequencies;
	}

	};
	}

	function fetchFile(url = defaultTrackUrl) {
	return new Promise((resolve, reject) => {
	const xhr = new XMLHttpRequest();
	xhr.open("GET", url, true);
	xhr.responseType = 'blob';
	xhr.addEventListener("load", () => resolve(xhr.response));
	xhr.send();
	});
	}

	function playPause() {
	audio.playing ? audio.pause() : audio.play();
	}

	function setup() {
	canvas = {
	a: document.createElement("canvas"),
	b: document.createElement("canvas")
	};
	canvas.b.style = `
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	`;
	document.body.appendChild(canvas.b);
	ctx = {
	a: canvas.a.getContext("2d"),
	b: canvas.b.getContext("2d")
	};
	audio = createAudio();
	resize();
	fetchFile().then(data => {
	audio.btn.classList.remove('loading');
	audio.btn.innerHTML = '<i class="fa fa-play"></i>Play';
	audio.btn.addEventListener('click', function userClicked(event) {
	audio.load(data).play();
	audio.element.addEventListener('ended', () => {
	audio.element.currentTime = 0;
	audio.element.pause();
	});
	audio.btn.addEventListener('click', playPause);
	audio.btn.removeEventListener('click', userClicked);
	draw();
	});
	});
	}

	function resize() {
	canvas.a.width = canvas.b.width = window.innerWidth;
	canvas.a.height = canvas.b.height = window.innerHeight;
	}

	function draw() {
	const {
	frequencyData
	} = audio;
	const spectrumWidth = 0.5 * frequencyData.length;
	const lineWidth = canvas.a.width / spectrumWidth * 0.5;
	const y = 0.5 * canvas.a.height;
	ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);
	ctx.b.clearRect(0, 0, canvas.b.width, canvas.b.height);
	let i, frequency, fNorm, x, hue, height;

	for (i = frequencyData.length - 1; i >= 0; i--) {
	frequency = frequencyData[i];
	fNorm = frequency / 256;
	x = i / spectrumWidth * canvas.a.width;
	hue = 110 * (1 - fNorm);
	height = 0.25 * canvas.a.height * fNorm;
	ctx.a.beginPath();
	ctx.a.lineWidth = lineWidth;
	ctx.a.strokeStyle = `hsla(${hue}, 60%, 50%, 1)`;
	ctx.a.moveTo(x, y);
	ctx.a.lineTo(x, y - height);
	ctx.a.stroke();
	ctx.a.closePath();
	ctx.a.beginPath();
	ctx.a.lineWidth = lineWidth;
	ctx.a.strokeStyle = `hsla(${hue}, 60%, 50%, 1)`;
	ctx.a.moveTo(x, y);
	ctx.a.lineTo(x, y + height);
	ctx.a.stroke();
	ctx.a.closePath();
	}

	ctx.b.save();
	ctx.b.filter = 'blur(5px)';
	ctx.b.drawImage(canvas.a, 0, 0);
	ctx.b.restore();
	ctx.b.save();
	ctx.b.globalCompositeOperation = 'lighter';
	ctx.b.drawImage(canvas.a, 0, 0);
	ctx.b.restore();
	window.requestAnimationFrame(draw);
	}

	window.addEventListener("load", setup);
	window.addEventListener("resize", resize);
	</script>