كود html للمبرمجين

احمد ادلبي

<!DOCTYPE html>

<head>

<title>مشغل القرآن الكريم</title>

tailwind.config = {

theme: {

extend: {

colors: {

'islamic-gold': '#D4AF37',

'islamic-dark-gold': '#B8941F',

'islamic-light-gold': '#F4E4BC',

'islamic-green': '#006633',

'islamic-dark-green': '#004225',

'islamic-blue': '#003366',

animation: {

'rotate-slow': 'rotate 20s linear infinite',

'rotate-reverse': 'rotate-reverse 15s linear infinite',

'pulse-gold': 'pulse-gold 3s ease-in-out infinite',

'float': 'float 6s ease-in-out infinite',

}

</script>

<style>

@import url('https://fonts.googleapis.co...

body {

font-family: 'Amiri', serif;

}

@keyframes rotate {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

@keyframes rotate-reverse {

from { transform: rotate(360deg); }

to { transform: rotate(0deg); }

}

@keyframes pulse-gold {

0%, 100% {

box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);

transform: scale(1);

}

50% {

box-shadow: 0 0 40px rgba(212, 175, 55, 0.6);

transform: scale(1.05);

}

@keyframes float {

0%, 100% { transform: translateY(0px); }

50% { transform: translateY(-10px); }

}

.islamic-gradient {

background: linear-gradient(135deg,

#D4AF37 0%,

#F4E4BC 25%,

#006633 50%,

#D4AF37 75%,

#B8941F 100%);

background-size: 400% 400%;

animation: gradientMove 8s ease infinite;

}

.islamic-gradient-dark {

background: linear-gradient(135deg,

#1a1a1a 0%,

#2d2d2d 25%,

#004225 50%,

#B8941F 75%,

#1a1a1a 100%);

background-size: 400% 400%;

animation: gradientMove 8s ease infinite;

}

@keyframes gradientMove {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

.islamic-pattern {

background-image:

radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),

radial-gradient(circle at 75% 75%, rgba(0, 102, 51, 0.1) 0%, transparent 50%);

}

input[type="range"] {

background: transparent;

-webkit-appearance: none;

}

input[type="range"]::-webkit-slider-track {

background: rgba(212, 175, 55, 0.3);

height: 4px;

border-radius: 2px;

}

input[type="range"]::-webkit-slider-thumb {

-webkit-appearance: none;

background: #D4AF37;

height: 16px;

width: 16px;

border-radius: 50%;

cursor: pointer;

}

</style>

</head>

// Dark mode detection

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {

document.documentElement.classList.add('dark');

}

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {

if (event.matches) {

document.documentElement.classList.add('dark');

} else {

document.documentElement.classList.remove('dark');

}

});

</script>

<h1 class="text-2xl font-bold text-islamic-gold mb-2">بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ</h1>

<p class="text-islamic-green dark:text-islamic-light-gold text-sm">مشغل القرآن الكريم</p>

</div>

<defs>

</pattern>

</defs>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</audio>

<h3 id="trackName" class="text-islamic-green dark:text-islamic-light-gold text-lg font-bold mb-1">سورة الفاتحة</h3>

</div>

</div>

<input

type="range"

id="progressSlider"

min="0"

max="100"

value="0"

class="w-full cursor-pointer"

</div>

</svg>

</button>

</svg>

</svg>

</button>

</svg>

</button>

</div>

السرعة: <span id="speedValue" class="text-islamic-gold">1.0x</span>

</label>

</svg>

</button>

<input

type="range"

id="speedSlider"

min="0.5"

max="3"

step="0.1"

value="1"

class="flex-1 cursor-pointer"

</svg>

</button>

</div>

الصوت: <span id="volumeValue" class="text-islamic-gold">100%</span>

</label>

<input

type="range"

id="volumeSlider"

min="0"

max="100"

value="100"

class="w-full cursor-pointer"

</div>

<p class="text-islamic-gold text-xs">﴿وَقُل رَّبِّ زِدْنِي عِلْمًا﴾</p>

</div>

// DOM Elements

const audioPlayer = document.getElementById('audioPlayer');

const playPauseBtn = document.getElementById('playPauseBtn');

const playBtnIcon = document.getElementById('playBtnIcon');

const pauseBtnIcon = document.getElementById('pauseBtnIcon');

const playIndicator = document.getElementById('playIndicator');

const pauseIndicator = document.getElementById('pauseIndicator');

const stopBtn = document.getElementById('stopBtn');

const restartBtn = document.getElementById('restartBtn');

const progressBar = document.getElementById('progressBar');

const progressSlider = document.getElementById('progressSlider');

const speedSlider = document.getElementById('speedSlider');

const speedValue = document.getElementById('speedValue');

const speedUp = document.getElementById('speedUp');

const speedDown = document.getElementById('speedDown');

const volumeSlider = document.getElementById('volumeSlider');

const volumeValue = document.getElementById('volumeValue');

const trackName = document.getElementById('trackName');

const trackTime = document.getElementById('trackTime');

let isPlaying = false;

// Initialize audio when loaded

audioPlayer.addEventListener('loadedmetadata', function() {

updateTimeDisplay();

});

// Play/Pause Button

playPauseBtn.addEventListener('click', function() {

if (isPlaying) {

audioPlayer.pause();

} else {

audioPlayer.play().catch(error => {

showCustomAlert('خطأ في تشغيل الملف الصوتي. تأكد من صحة رابط الملف.');

console.error('Audio play error:', error);

});

}

});

// Audio Events

audioPlayer.addEventListener('play', function() {

isPlaying = true;

playBtnIcon.classList.add('hidden');

pauseBtnIcon.classList.remove('hidden');

playIndicator.classList.add('hidden');

pauseIndicator.classList.remove('hidden');

});

audioPlayer.addEventListener('pause', function() {

isPlaying = false;

playBtnIcon.classList.remove('hidden');

pauseBtnIcon.classList.add('hidden');

playIndicator.classList.remove('hidden');

pauseIndicator.classList.add('hidden');

});

audioPlayer.addEventListener('ended', function() {

isPlaying = false;

playBtnIcon.classList.remove('hidden');

pauseBtnIcon.classList.add('hidden');

playIndicator.classList.remove('hidden');

pauseIndicator.classList.add('hidden');

progressBar.style.width = '0%';

progressSlider.value = 0;

});

audioPlayer.addEventListener('error', function(e) {

showCustomAlert('خطأ في تحميل الملف الصوتي. تأكد من صحة رابط الملف في الكود.');

console.error('Audio error:', e);

});

// Stop Button

stopBtn.addEventListener('click', function() {

audioPlayer.pause();

audioPlayer.currentTime = 0;

progressBar.style.width = '0%';

progressSlider.value = 0;

});

// Restart Button

restartBtn.addEventListener('click', function() {

audioPlayer.currentTime = 0;

if (isPlaying) {

audioPlayer.play();

}

});

// Progress Updates

audioPlayer.addEventListener('timeupdate', function() {

if (audioPlayer.duration) {

const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;

progressBar.style.width = progress + '%';

progressSlider.value = progress;

updateTimeDisplay();

}

});

// Progress Slider

progressSlider.addEventListener('input', function() {

if (audioPlayer.duration) {

const time = (this.value / 100) * audioPlayer.duration;

audioPlayer.currentTime = time;

}

});

// Speed Control

speedSlider.addEventListener('input', function() {

const speed = parseFloat(this.value);

audioPlayer.playbackRate = speed;

speedValue.textContent = speed.toFixed(1) + 'x';

});

speedUp.addEventListener('click', function() {

let currentSpeed = parseFloat(speedSlider.value);

if (currentSpeed < 3) {

currentSpeed += 0.1;

speedSlider.value = currentSpeed.toFixed(1);

audioPlayer.playbackRate = currentSpeed;

speedValue.textContent = currentSpeed.toFixed(1) + 'x';

}

});

speedDown.addEventListener('click', function() {

let currentSpeed = parseFloat(speedSlider.value);

if (currentSpeed > 0.5) {

currentSpeed -= 0.1;

speedSlider.value = currentSpeed.toFixed(1);

audioPlayer.playbackRate = currentSpeed;

speedValue.textContent = currentSpeed.toFixed(1) + 'x';

}

});

// Volume Control

volumeSlider.addEventListener('input', function() {

const volume = this.value / 100;

audioPlayer.volume = volume;

volumeValue.textContent = this.value + '%';

});

// Time Display Update

function updateTimeDisplay() {

const current = formatTime(audioPlayer.currentTime || 0);

const duration = formatTime(audioPlayer.duration || 0);

trackTime.textContent = `${current} / ${duration}`;

}

// Format Time Helper

function formatTime(seconds) {

const minutes = Math.floor(seconds / 60);

const remainingSeconds = Math.floor(seconds % 60);

return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;

}

// Custom Alert Function

function showCustomAlert(message) {

const modal = document.createElement('div');

modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';

modal.innerHTML = `

<p class="text-gray-700 dark:text-gray-300 mb-4 text-center text-base">${message}</p>

<button class="px-6 py-2 bg-islamic-gold text-white hover:bg-islamic-dark-gold rounded-lg transition-colors font-bold" onclick="this.closest('.fixed').remove()">حسناً</button>

</div>

document.body.appendChild(modal);

}

// Initialize

updateTimeDisplay();

</script>

</body>

</html>

كود html للمبرمجين

التعليقات

اقرأ أيضًا

العمل الحر

أطلق موقعك الإلكتروني في دقائق