-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcalendr.html
130 lines (115 loc) · 4.94 KB
/
calendr.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Amiri', serif;
background: url('https://web.opendrive.com/api/v1/download/file.json/ODZfNjkwMzQ1NzNf?temp_key=%AD%A9%9Au%A9%F6%D3yZ%9E%D7%AB%9F%5D%FA%EB%1E%FA%F2%3A%60&inline=1');
text-align: center;
backdrop-filter: blur(3px);
}.container {
margin-top: 40px;
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 15px;
margin: 20px;
color:#fff;
text-align: center;
}
h1 {
background: linear-gradient(145deg, #D4AF37, #B89628);
color: #0a0a01;
display: inline-block;
padding: 15px 30px;
border-radius: 50px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
font-family: 'Amiri', serif;
font-size: 8em;
}
select, input {
padding: 10px;
border-radius: 10px;
background: #fff;
color: #000;
margin: 10px;
font-size: 1.2em;
}
button {
background: #D4AF37;
color: #000;
font-weight: bold;
padding: 10px 20px;
border-radius: 15px;
transition: transform 0.3s ease;
}
button:hover {
transform: scale(1.05);
}
.card {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 10px;
color: #ffffff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1 class="text-[2rem] font-bold bg-gradient-to-r from-yellow-400 to-yellow-600 text-transparent bg-clip-text drop-shadow-lg">التقويم الهجري</h1>
<div class="container">
<div class="mb-4">
<label for="month" class="text-xl">اختر الشهر:</label>
<select id="month" class="text-black p-2 rounded-full" >
<option value="1">يناير</option>
<option value="2">فبراير</option>
<option value="3">مارس</option>
<option value="4">أبريل</option>
<option value="5">مايو</option>
<option value="6">يونيو</option>
<option value="7">يوليو</option>
<option value="8">أغسطس</option>
<option value="9">سبتمبر</option>
<option value="10">أكتوبر</option>
<option value="11">نوفمبر</option>
<option value="12">ديسمبر</option>
</select>
<label for="year" class="text-xl">اختر السنة:</label>
<input type="number" id="year" value="2025" class="text-black p-2 rounded-full" />
</div>
<button onclick="getHijriCalendar()" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-6 rounded-full">عرض التقويم الهجري</button>
<div id="calendar" class="mt-6 grid grid-cols-2 gap-4 text-white px-6 rounded-full"></div>
<script>
function getHijriCalendar() {
const month = document.getElementById('month').value;
const year = document.getElementById('year').value;
fetch(`https://api.aladhan.com/v1/gToHCalendar/${month}/${year}`)
.then(response => response.json())
.then(data => {
const calendar = document.getElementById('calendar');
calendar.innerHTML = ''; // Vider le contenu précédent
data.data.forEach(day => {
const hijriDate = day.hijri.date;
const weekday = day.hijri.weekday.ar;
const gregorianDate = day.gregorian.date;
const card = document.createElement('div');
card.className ="bg-gray-800 p-4 rounded-2xl shadow-lg";
card.innerHTML = `
<h2 class="text-xl font-bold text-yellow-500">${weekday}</h2>
<p class="text-lg">${hijriDate}</p>
<p class="text-sm text-gray-300">(${gregorianDate})</p>
`;
calendar.appendChild(card);
});
})
.catch(error => {
console.error('Erreur:', error);
document.getElementById('calendar').innerHTML = 'تعذر الحصول على التقويم';
});
}
</script>
</body>
</html>