Skip to content

Commit 3988846

Browse files
NSTechBytesNSTechBytes
committed
implement new Islamic Date widget with WebView2, API integration, and styling
1 parent 876f2df commit 3988846

File tree

4 files changed

+329
-0
lines changed

4 files changed

+329
-0
lines changed

‎Resources/Skins/WebView2/@Resources/IslamicDate/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Islamic Date Widget</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11+
<!-- Phosphor Icons -->
12+
<script src="https://unpkg.com/@phosphor-icons/web"></script>
13+
</head>
14+
<body>
15+
<div class="widget-container">
16+
<!-- Background Elements -->
17+
<div class="shape-container">
18+
<div class="bg-shape shape-1"></div>
19+
<div class="bg-shape shape-2"></div>
20+
<div class="bg-shape shape-3"></div>
21+
</div>
22+
23+
<div class="islamic-card">
24+
<div class="content-wrapper">
25+
<!-- Icon and Day Row -->
26+
<div class="top-row">
27+
<div class="icon-container">
28+
<i class="ph ph-moon-stars"></i>
29+
</div>
30+
<div class="hijri-day" id="hijri-day">1</div>
31+
</div>
32+
33+
<!-- Month and Year -->
34+
<div class="hijri-month" id="hijri-month">Muharram</div>
35+
<div class="hijri-year" id="hijri-year">1446 AH</div>
36+
</div>
37+
</div>
38+
</div>
39+
<script src="script.js"></script>
40+
</body>
41+
</html>

‎Resources/Skins/WebView2/@Resources/IslamicDate/script.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Islamic Date Widget Script using Aladhan API
2+
3+
// Islamic month names
4+
const islamicMonths = [
5+
'Muharram',
6+
'Safar',
7+
'Rabi\' al-Awwal',
8+
'Rabi\' al-Thani',
9+
'Jumada al-Awwal',
10+
'Jumada al-Thani',
11+
'Rajab',
12+
'Sha\'ban',
13+
'Ramadan',
14+
'Shawwal',
15+
'Dhu al-Qi\'dah',
16+
'Dhu al-Hijjah'
17+
];
18+
19+
// Fetch Islamic date from API
20+
async function fetchIslamicDate() {
21+
try {
22+
// Get current date
23+
const now = new Date();
24+
const day = now.getDate();
25+
const month = now.getMonth() + 1; // JavaScript months are 0-indexed
26+
const year = now.getFullYear();
27+
28+
// Fetch from Aladhan API with Pakistan calculation method
29+
// method=1 uses University of Islamic Sciences, Karachi (Pakistan)
30+
const response = await fetch(
31+
`https://api.aladhan.com/v1/gToH/${day}-${month}-${year}?adjustment=1`,
32+
{
33+
method: 'GET',
34+
mode: 'cors',
35+
cache: 'no-cache',
36+
credentials: 'omit'
37+
}
38+
);
39+
40+
if (!response.ok) {
41+
throw new Error('Failed to fetch Islamic date');
42+
}
43+
44+
const data = await response.json();
45+
46+
if (data.code === 200 && data.data && data.data.hijri) {
47+
const hijri = data.data.hijri;
48+
49+
// Update UI
50+
document.getElementById('hijri-day').textContent = hijri.day;
51+
document.getElementById('hijri-month').textContent = hijri.month.en;
52+
document.getElementById('hijri-year').textContent = `${hijri.year} AH`;
53+
54+
console.log('Islamic date updated:', hijri.day, hijri.month.en, hijri.year);
55+
} else {
56+
throw new Error('Invalid API response');
57+
}
58+
59+
} catch (error) {
60+
console.error('Error fetching Islamic date:', error);
61+
// Fallback to showing error or default values
62+
document.getElementById('hijri-day').textContent = '--';
63+
document.getElementById('hijri-month').textContent = 'Error';
64+
document.getElementById('hijri-year').textContent = '---- AH';
65+
}
66+
}
67+
68+
// Initialize
69+
function init() {
70+
// Initial fetch
71+
fetchIslamicDate();
72+
73+
// Update once per day at midnight
74+
const now = new Date();
75+
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
76+
const msUntilMidnight = tomorrow - now;
77+
78+
// Set timeout for midnight, then update daily
79+
setTimeout(() => {
80+
fetchIslamicDate();
81+
// Update every 24 hours after that
82+
setInterval(fetchIslamicDate, 24 * 60 * 60 * 1000);
83+
}, msUntilMidnight);
84+
}
85+
86+
// Wait for DOM to be ready
87+
if (document.readyState === 'loading') {
88+
document.addEventListener('DOMContentLoaded', init);
89+
} else {
90+
init();
91+
}

‎Resources/Skins/WebView2/@Resources/IslamicDate/style.css‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
:root {
2+
--bg-color: #0f0f13;
3+
--text-primary: #ffffff;
4+
--text-secondary: #a0a0a0;
5+
--accent-purple: #764ba2;
6+
--accent-blue: #4facfe;
7+
--accent-cyan: #00f2fe;
8+
--glass-bg: rgba(255, 255, 255, 0.05);
9+
--glass-border: rgba(255, 255, 255, 0.1);
10+
}
11+
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
background-color: transparent;
20+
font-family: 'Outfit', sans-serif;
21+
height: 100vh;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
overflow: hidden;
26+
user-select: none;
27+
}
28+
29+
.widget-container {
30+
position: relative;
31+
width: 280px;
32+
height: 160px;
33+
display: flex;
34+
justify-content: center;
35+
align-items: center;
36+
border-radius: 20px;
37+
overflow: hidden;
38+
}
39+
40+
/* Abstract Background Shapes */
41+
.shape-container {
42+
position: absolute;
43+
top: 50%;
44+
left: 50%;
45+
transform: translate(-50%, -50%);
46+
width: 90%;
47+
height: 80%;
48+
border-radius: 16px;
49+
overflow: hidden;
50+
z-index: 0;
51+
}
52+
53+
.bg-shape {
54+
position: absolute;
55+
border-radius: 50%;
56+
filter: blur(25px);
57+
opacity: 0.6;
58+
z-index: 0;
59+
}
60+
61+
.shape-1 {
62+
width: 95px;
63+
height: 95px;
64+
background: #764ba2;
65+
top: 10px;
66+
left: 20px;
67+
animation: float 10s infinite ease-in-out;
68+
}
69+
70+
.shape-2 {
71+
width: 110px;
72+
height: 110px;
73+
background: #4facfe;
74+
bottom: 10px;
75+
right: 20px;
76+
animation: float 12s infinite ease-in-out reverse;
77+
}
78+
79+
.shape-3 {
80+
width: 80px;
81+
height: 80px;
82+
background: #00f2fe;
83+
top: 50%;
84+
left: 50%;
85+
transform: translate(-50%, -50%);
86+
animation: pulse 8s infinite ease-in-out;
87+
}
88+
89+
@keyframes float {
90+
0%, 100% { transform: translate(0, 0); }
91+
50% { transform: translate(10px, 10px); }
92+
}
93+
94+
@keyframes pulse {
95+
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
96+
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
97+
}
98+
99+
/* Glass Card */
100+
.islamic-card {
101+
position: relative;
102+
z-index: 1;
103+
width: 90%;
104+
height: 80%;
105+
background: var(--glass-bg);
106+
backdrop-filter: blur(15px);
107+
-webkit-backdrop-filter: blur(15px);
108+
border: 1px solid var(--glass-border);
109+
border-radius: 16px;
110+
display: flex;
111+
justify-content: center;
112+
align-items: center;
113+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
114+
}
115+
116+
/* Content Wrapper - Centered Layout */
117+
.content-wrapper {
118+
display: flex;
119+
flex-direction: column;
120+
align-items: center;
121+
gap: 8px;
122+
text-align: center;
123+
}
124+
125+
/* Top Row - Icon and Day */
126+
.top-row {
127+
display: flex;
128+
align-items: center;
129+
gap: 12px;
130+
}
131+
132+
/* Icon Container */
133+
.icon-container {
134+
display: flex;
135+
align-items: center;
136+
}
137+
138+
.icon-container i {
139+
font-size: 3rem;
140+
color: var(--text-primary);
141+
}
142+
143+
144+
/* Date Elements */
145+
.hijri-day {
146+
font-size: 3.5rem;
147+
font-weight: 700;
148+
color: var(--text-primary);
149+
line-height: 1;
150+
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
151+
}
152+
153+
.hijri-month {
154+
font-size: 1.2rem;
155+
font-weight: 600;
156+
color: var(--text-primary);
157+
line-height: 1;
158+
}
159+
160+
.hijri-year {
161+
font-size: 0.8rem;
162+
font-weight: 300;
163+
color: var(--text-secondary);
164+
letter-spacing: 1.5px;
165+
text-transform: uppercase;
166+
}
167+
168+
169+
170+

‎Resources/Skins/WebView2/IslamicDate/IslamicDate.ini‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
[Rainmeter]
2+
Update=1000
3+
4+
[Metadata]
5+
Name=Islamic Date
6+
Author=nstechbytes
7+
Information=Islamic (Hijri) Date Widget using WebView2
8+
Version=0.0.1
9+
License=MIT
10+
; ========================================
11+
; Measure
12+
; ========================================
13+
[WebView2]
14+
Measure=Plugin
15+
Plugin=WebView2
16+
URL=#@#IslamicDate\index.html
17+
W=280
18+
H=160
19+
X=15
20+
Y=15
21+
; ========================================
22+
; Background
23+
; ========================================
24+
[Background_Shape]
25+
Meter=Shape
26+
Shape=Rectangle 0,0,310,190 | StrokeWidth 0 | FillColor 0,0,0,1
27+

0 commit comments

Comments
 (0)