Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlGohry
AlGohry authored Aug 12, 2024
0 parents commit a8d6d41
Show file tree
Hide file tree
Showing 10 changed files with 1,089 additions and 0 deletions.
698 changes: 698 additions & 0 deletions assets/css/style.css

Large diffs are not rendered by default.

Binary file added assets/images/banner-bg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/favicon.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/quran_logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions assets/js/custom.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const header = document.querySelector("header");
const sectionOne = document.querySelector(".change-name");

const sectionOneOptions = {
rootMargin: "-200px 0px 0px 0px"
};

const sectionOneObserver = new IntersectionObserver(function(
entries,
sectionOneObserver
) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
header.classList.add("nav-scrolled");
} else {
header.classList.remove("nav-scrolled");
}
});
},
sectionOneOptions);

sectionOneObserver.observe(sectionOne);
93 changes: 93 additions & 0 deletions assets/js/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
const apiURL = "https://www.mp3quran.net/api/v3";
const lang = "ar";


const chooseReciters = document.querySelector("#chooseReciters");
const chooseRewaya = document.querySelector("#chooseRewaya");
const chooseSurah = document.querySelector('#chooseSurah');
const audioPlayer = document.querySelector('#audioPlayer');
const videoPlayer = document.querySelector('#videoPlayer');

async function getReciters() {
const res = await fetch(`${apiURL}/reciters?language=${lang}`);
const data = await res.json();

chooseReciters.innerHTML = '<option value="">اختر القارئ</option>'; // empty option for Reciters

data.reciters.forEach(reciter => chooseReciters.innerHTML += `<option value="${reciter.id}">${reciter.name}</option>`)
chooseReciters.addEventListener("change", e => {
getRewaya(e.target.value)
});

}

getReciters();

async function getRewaya(reciter) {
const res = await fetch(`${apiURL}/reciters?language=${lang}&reciter=${reciter}`);
const data = await res.json();
const rewayat = data.reciters[0].moshaf

chooseRewaya.innerHTML = '<option value="">اختر الرواية</option>'; // empty option for Rewaya

rewayat.forEach(rewaya => chooseRewaya.innerHTML += `<option value="${rewaya.id}" data-server="${rewaya.server}" data-surahlist="${rewaya.surah_list}" >${rewaya.name}</option>`)

chooseRewaya.addEventListener("change", event => {
const selectedRewaya = chooseRewaya.options[chooseRewaya.selectedIndex];
const surahServer = selectedRewaya.dataset.server;
const surahList = selectedRewaya.dataset.surahlist;
getSurah(surahServer, surahList)
});

}

async function getSurah(surahServer, surahList) {
const res = await fetch(`${apiURL}/suwar`);
const data = await res.json();
const surahNames = data.suwar;
surahList = surahList.split(',')

chooseSurah.innerHTML = '<option value="">اختر السورة</option>'; // empty option for Surah

surahList.forEach(surah => {
const padSurah = surah.padStart(3, '0')
surahNames.forEach(surahName => {
if (surahName.id == surah) {
chooseSurah.innerHTML += `<option value="${surahServer}${padSurah}.mp3" >${surahName.name}</option>`
// console.log(surahName.name)
}
})
})

chooseSurah.addEventListener('change', event => {
selectedSurah = chooseSurah.options[chooseSurah.selectedIndex]
// console.log(selectedSurah.value)
playSurah(selectedSurah.value)
})
}

async function playSurah(surahUrl) {
audioPlayer.src = surahUrl;
await audioPlayer.load(); // Load the audio file to prepare for playback
audioPlayer.play();

// Handle errors
audioPlayer.onerror = (error) => {
console.error('Error playing surah:', error); // Display an error message to the user
}
}

function playLive(channel) {
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(`${channel}`);
hls.attachMedia(videoPlayer)
hls.on(Hls.Event.MANIFEST_PARSED, function(){
videoPlayer.play();
})
}
}

// console.log(data.reciters[0].moshaf)
// console.log(`Reciter: ID= ${reciter.id} Name= ${reciter.name} `)

261 changes: 261 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="المكتبة الصوتية للقرآن الكريم - تصفح واستماع وتحميل">
<meta name="keywords" content="مكتبة, قرآن, كريم">
<meta name="author" content="Ahmed Abdellatif">
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet">

<title>المكتبة الصوتية للقرآن الكريم</title>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<link rel="icon" href="assets/images/favicon.jpg" />
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.rtl.min.css">
<link rel="stylesheet" href="assets/css/style.css">

</head>

<body>

<div class="loader">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="34px" height="40px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;"
xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.8s"
repeatCount="indefinite" />
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.8s"
repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.8s"
repeatCount="indefinite" />
</rect>
<rect x="8" y="10" width="4" height="10" fill="#333" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.8s"
repeatCount="indefinite" />
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.8s"
repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.8s"
repeatCount="indefinite" />
</rect>
<rect x="16" y="10" width="4" height="10" fill="#333" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.8s"
repeatCount="indefinite" />
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.8s"
repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.8s"
repeatCount="indefinite" />
</rect>
</svg>
</div>

<header id="#top">

<nav class="main-navigation navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="assets/images/quran_logo.png" height="120" alt="Quran Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">الرئيسية</a>
</li>
</ul>
</div>
</div>
</nav>

</header>

<div class="main-banner change-name">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header-text">
<h6>هيا الى</h6>
<h2>رحاب <em>القرآن الكريم</em> </h2>
</div>
</div>
</div>
</div>
</div>

<div class="player-form">
<div class="container">
<div class="row">
<div class="col-lg-12">
<form id="player-form" name="gs" method="submit" role="player" action="#">
<div class="row">
<div class="col-lg-4">
<fieldset>
<label for="chooseReciters" class="form-label">اختر القارئ</label>
<select name="Reciters" id="chooseReciters" class="form-select" aria-label="Default select example">
<option selected>اختر القارئ</option>
</select>
</fieldset>
</div>
<div class="col-lg-4">
<fieldset>
<label for="chooseRewaya" class="form-label">اختر الرواية</label>
<select name="Rewaya" id="chooseRewaya" class="form-select" aria-label="Default select example">
<option value="" selected>اختر الرواية</option>
</select>
</fieldset>
</div>
<div class="col-lg-4">
<fieldset>
<label for="chooseSurah" class="form-label">اختر السورة</label>
<select name="Surah" id="chooseSurah" class="form-select" aria-label="Default select example">
<option selected>اختر السورة</option>
</select>
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<audio id="audioPlayer" controls autoplay style="width: 100%;">
<source src="" type="audio/ogg">
<source src="" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
</div>


<section class="live-streaming" id="liveStreaming">
<div class="container">
<div class="row">
<div class="col text-center">
<button type="button" class="btn btn-dark" name="Quran Channel"
onclick="playLive('https://win.holol.com/live/quran/playlist.m3u8')">قناة القرآن الكريم</button>
</div>
<div class="col text-center">
<button type="button" class="btn btn-dark" name="Sunna Channel"
onclick="playLive('https://win.holol.com/live/sunnah/playlist.m3u8')">قناة السنة النبوية</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="section-heading text-center">
<h2>اختر قناة البث المباشر</h2>
</div>
<video id="videoPlayer" controls autoplay muted style="width: 100%;">
<source src="" type="video/mp4">
<source src="" type="video/ogg">
Your browser does not support the video tag.
</video>

</div>
</div>
</div>
</section>


<footer>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="about-widget">
<img src="assets/images/quran_logo.png" alt="Quran Logo">
</div>
</div>
<div class="col-lg-2 offset-lg-2">
<div class="location-widget">
<h4>Our Location</h4>
<p>Sunny Isles Beach, <br><br>Florida 33160, <br>United States</p>
</div>
</div>
<div class="col-lg-2">
<div class="customer-care">
<h4>Customer Care</h4>
<ul class="info">
<li><a href="#">010-020-0340</a></li>
<li><a href="#">090-080-0760</a></li>
<li><a href="#">info@company.com</a></li>
</ul>
</div>
</div>
<div class="col-lg-2">
<div class="follow-us">
<h4>Follow Us</h4>
<ul class="social-links">
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-facebook" viewBox="0 0 16 16">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg>
Facebook
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-twitter" viewBox="0 0 16 16">
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
Twitter
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-linkedin" viewBox="0 0 16 16">
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg>
Linkedin
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-12">
<div class="sub-footer">
<div class="row">
<div class="col-lg-6">
<p>Copyright © 2022 Designer Co., Ltd. All Rights Reserved.

<br>Design: <a rel="sponsored" href="https://templatemo.com" target="_blank">TemplateMo</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>

<!-- Scripts -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/script.js"></script>
<script>
setTimeout(function () {
$('.loader').fadeToggle();
}, 1500);

$("a[href='#top']").click(function () {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>

</body>

</html>
6 changes: 6 additions & 0 deletions vendor/bootstrap/css/bootstrap.rtl.min.css

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions vendor/bootstrap/js/bootstrap.bundle.min.js

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions vendor/jquery/jquery.min.js

Large diffs are not rendered by default.

0 comments on commit a8d6d41

Please sign in to comment.