clock
محمد محمود رزق
ساعة رقمية متطورة
الإصدار النهائي
عنوان المشروع البرمجي:
الساعة الرقمية مع منبه وألوان متغيرة
فكرة المشروع
تطبيق ساعة رقمية متكامل يعرض الوقت والتاريخ بشكل ديناميكي، مع خاصية ضبط منبه صوتي. يتميز التطبيق بتغير ألوان خلفية الساعة تلقائياً كل ثانية مما يضفي طابعاً ممتعاً وجذاباً. يمكن للمستخدم ضبط المنبه في أي وقت، وعند حلول الوقت المحدد يتم تشغيل صوت تنبيه مع وميض مميز لإشعار المستخدم. تم تطوير المشروع باستخدام HTML، CSS، وJavaScript مع تقنيات حديثة مثل LocalStorage لحفظ إعدادات المنبه.
SOURCE CODE
<!-- الساعة الرقمية مع منبه وألوان متغيرة - إعداد أحمد محمد -->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الساعة الرقمية مع منبه</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Tajawal', 'Cairo', sans-serif;
background: linear-gradient(135deg, #0B3526 0%, #1a4d3a 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.clock-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 30px;
padding: 40px;
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
text-align: center;
max-width: 500px;
width: 100%;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,215,0,0.3);
}
.clock-box {
background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
padding: 40px;
border-radius: 25px;
margin-bottom: 30px;
transition: all 0.3s ease;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.1);
}
.time {
font-size: 65px;
font-weight: bold;
font-family: 'Courier New', monospace;
letter-spacing: 5px;
color: #2c3e50;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.date {
font-size: 20px;
margin-top: 15px;
color: #7f8c8d;
font-weight: 600;
}
.alarm-section {
margin: 25px 0;
padding: 20px;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 20px;
border: 1px solid #dee2e6;
}
.alarm-section h3 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.3rem;
}
.alarm-section input {
padding: 12px;
font-size: 18px;
margin: 10px;
border: 2px solid #D4AF37;
border-radius: 12px;
text-align: center;
font-family: monospace;
font-weight: bold;
}
button {
background: linear-gradient(135deg, #0B3526, #1a4d3a);
color: white;
border: none;
padding: 12px 25px;
font-size: 16px;
border-radius: 12px;
cursor: pointer;
margin: 5px;
transition: all 0.3s ease;
font-weight: bold;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
button:active {
transform: translateY(0);
}
.status {
margin-top: 20px;
padding: 10px;
border-radius: 10px;
font-size: 14px;
font-weight: bold;
background: #fff;
border: 1px solid #dee2e6;
}
@keyframes blink {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.02); background: #ff4444; }
100% { opacity: 1; transform: scale(1); }
}
.alarming {
animation: blink 0.5s infinite;
background: #ff4444 !important;
}
.footer-note {
margin-top: 20px;
font-size: 12px;
color: #95a5a6;
text-align: center;
}
@media (max-width: 600px) {
.time { font-size: 40px; letter-spacing: 2px; }
.clock-container { padding: 20px; }
.clock-box { padding: 20px; }
button { padding: 8px 15px; font-size: 14px; }
}
</style>
</head>
<body>
<div class="clock-container">
<h1 style="color: #0B3526; margin-bottom: 20px; font-size: 1.8rem;">⏰ الساعة الرقمية</h1>
<div class="clock-box" id="clockBox">
<div class="time" id="time">--:--:--</div>
<div class="date" id="date">----/--/--</div>
</div>
<div class="alarm-section">
<h3>🔔 ضبط المنبه</h3>
<input type="time" id="alarmTime">
<br>
<button onclick="setAlarm()">🔔 تعيين المنبه</button>
<button onclick="clearAlarm()">❌ إلغاء المنبه</button>
<div class="status" id="status">
⏰ لم يتم ضبط منبه بعد
</div>
</div>
<div class="footer-note">
✨ تتغير الألوان تلقائياً كل ثانية ✨
</div>
</div>
<script>
let alarmHour = null;
let alarmMinute = null;
let alarmActive = false;
let alarmSound = null;
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('time').textContent = `${hours}:${minutes}:${seconds}`;
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const weekdays = ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
const weekday = weekdays[now.getDay()];
document.getElementById('date').textContent = `${weekday} ${year}/${month}/${day}`;
if (alarmActive && alarmHour !== null) {
if (parseInt(hours) === alarmHour && parseInt(minutes) === alarmMinute && parseInt(seconds) === 0) {
triggerAlarm();
}
}
}
function changeColors() {
const colors = [
'#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7',
'#dfe6e9', '#ff9999', '#99ff99', '#ffb347', '#87CEEB',
'#DDA0DD', '#F0E68C', '#FFA07A', '#20B2AA', '#FF69B4'
];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
const clockBox = document.getElementById('clockBox');
clockBox.style.background = `linear-gradient(135deg, ${randomColor}, ${randomColor}dd)`;
// تأثير اهتزاز خفيف
clockBox.style.transform = 'scale(1.01)';
setTimeout(() => {
clockBox.style.transform = 'scale(1)';
}, 200);
}
function setAlarm() {
const alarmInput = document.getElementById('alarmTime').value;
if (alarmInput) {
const timeParts = alarmInput.split(':');
alarmHour = parseInt(timeParts[0]);
alarmMinute = parseInt(timeParts[1]);
alarmActive = true;
const statusDiv = document.getElementById('status');
statusDiv.innerHTML = `✅ تم تعيين المنبه على ${alarmHour}:${String(alarmMinute).padStart(2, '0')}`;
statusDiv.style.background = '#d4edda';
statusDiv.style.color = '#155724';
// حفظ المنبه في localStorage
localStorage.setItem('alarmHour', alarmHour);
localStorage.setItem('alarmMinute', alarmMinute);
localStorage.setItem('alarmActive', 'true');
} else {
alert('⏰ الرجاء اختيار وقت للمنبه');
}
}
function clearAlarm() {
alarmActive = false;
alarmHour = null;
alarmMinute = null;
const statusDiv = document.getElementById('status');
statusDiv.innerHTML = '❌ تم إلغاء المنبه';
statusDiv.style.background = '#f8d7da';
statusDiv.style.color = '#721c24';
const clockBox = document.getElementById('clockBox');
clockBox.classList.remove('alarming');
// إزالة من localStorage
localStorage.removeItem('alarmHour');
localStorage.removeItem('alarmMinute');
localStorage.setItem('alarmActive', 'false');
if (alarmSound) {
alarmSound.pause();
alarmSound = null;
}
}
function triggerAlarm() {
if (!alarmActive) return;
const clockBox = document.getElementById('clockBox');
clockBox.classList.add('alarming');
const statusDiv = document.getElementById('status');
statusDiv.innerHTML = '🔔🔔🔔 حان وقت المنبه! 🔔🔔🔔';
statusDiv.style.background = '#ff4444';
statusDiv.style.color = 'white';
// محاولة تشغيل الصوت
try {
alarmSound = new Audio('https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3');
alarmSound.play().catch(e => {
console.log('تشغيل الصوت غير مسموح في بعض المتصفحات');
// تنبيه بديل
statusDiv.innerHTML += ' <br>⚠️ يرجى السماح بتشغيل الصوت في المتصفح';
});
} catch(e) {
console.log('صوت غير متوفر');
}
// عرض تنبيه للمتصفح
if (Notification.permission === 'granted') {
new Notification('🔔 المنبه', { body: 'حان وقت المنبه الذي ضبطته!' });
}
// إيقاف التنبيه بعد 30 ثانية
setTimeout(() => {
clearAlarm();
statusDiv.innerHTML = '⏰ انتهى وقت المنبه';
statusDiv.style.background = '#fff3cd';
statusDiv.style.color = '#856404';
}, 30000);
}
// طلب إذن الإشعارات
if (Notification.permission !== 'granted' && Notification.permission !== 'denied') {
Notification.requestPermission();
}
// تحميل المنبه المحفوظ
function loadSavedAlarm() {
const savedHour = localStorage.getItem('alarmHour');
const savedMinute = localStorage.getItem('alarmMinute');
const savedActive = localStorage.getItem('alarmActive');
if (savedActive === 'true' && savedHour !== null && savedMinute !== null) {
alarmHour = parseInt(savedHour);
alarmMinute = parseInt(savedMinute);
alarmActive = true;
const statusDiv = document.getElementById('status');
statusDiv.innerHTML = `✅ المنبه مضبوط مسبقاً على ${alarmHour}:${String(alarmMinute).padStart(2, '0')}`;
statusDiv.style.background = '#d4edda';
statusDiv.style.color = '#155724';
// تعيين الوقت في حقل الإدخال
document.getElementById('alarmTime').value = `${String(alarmHour).padStart(2, '0')}:${String(alarmMinute).padStart(2, '0')}`;
}
}
// بدء تشغيل الساعة
setInterval(updateClock, 1000);
setInterval(changeColors, 1000);
updateClock();
loadSavedAlarm();
</script>
</body>
</html>
نتيجة التنفيذ
اضغط على "تشغيل المشروع" لرؤية النتيجة
ساعة رقمية مع منبه - تتغير الألوان كل ثانية
تم التنفيذ والمراجعة تحت إشراف معلم أول المادة:
المهندس/ محمد محمود شاهين
مدرسة الشهيد أحمد مالك الثانوية
إدارة قلين التعليمية