HelpsAndTips.php — Daily Prayer Time 2026.05.04

daily-prayer-time-for-mosques / Views / HelpsAndTips.php

daily-prayer-time-for-mosques / Views Last commit date

Tabs 1 month ago DSTemplate.php 1 month ago DailyTimetablePrinter.php 1 month ago DptApiDoc.php 2 months ago HelpsAndTips.php 2 months ago MonthlyTimetablePrinter.php 2 months ago TimetablePrinter.php 1 month ago dptWidgetForm.php 4 years ago horizontal-div.php 1 month ago widget-admin.php 1 month ago

HelpsAndTips.php

255 lines

1	<?php
2	$basicShortcodes = [
3	'[monthlytable]', '[dailytable_vertical]', '[dailytable_horizontal]', '[display_ramadan_time]', '[daily_next_prayer]'
4	];
5
6	$prayerTimes = [
7	'[fajr_prayer]', '[sunrise]', '[ishraq]', '[zawal]', '[zuhr_prayer]', '[asr_prayer]', '[maghrib_prayer]', '[isha_prayer]', '[jummah_prayer]'
8	];
9
10	$individualTimes = [
11	'[fajr_start]', '[zuhr_start]', '[asr_start]', '[maghrib_start]', '[isha_start]'
12	];
13
14	$specialFeatures = [
15	'[display_iqamah_update]', '[quran_verse]', '[digital_screen]', '[hijri_date]'
16	];
17
18	$options = [
19	['key' => 'asr', 'value' => 'hanafi', 'desc' => 'Use Hanafi Asr start method'],
20	['key' => 'display', 'value' => 'iqamah_only/azan_only', 'desc' => 'Show only azan or iqamah times'],
21	['key' => 'hide_time_remaining', 'value' => 'true', 'desc' => 'Hide countdown timer'],
22	['key' => 'hide_ramadan', 'value' => 'true', 'desc' => 'Hide Ramadan row'],
23	['key' => 'announcement', 'value' => '"Any text"', 'desc' => 'Show announcement text'],
24	['key' => 'day', 'value' => 'friday', 'desc' => 'Day for announcement: everyday/saturday/.../friday'],
25	['key' => 'heading', 'value' => '"any text"', 'desc' => 'Custom heading'],
26	['key' => 'use_div_layout', 'value' => 'true', 'desc' => 'Simple div layout (horizontal only)'],
27	['key' => 'start_time', 'value' => 'true', 'desc' => 'Show prayer start time (single prayer only)'],
28	];
29
30	$digitalOptions = [
31	['key' => 'view', 'value' => 'vertical/presentation', 'desc' => 'Display mode'],
32	['key' => 'slides', 'value' => 'image1,image2', 'desc' => 'Slide images'],
33	['key' => 'dim', 'value' => 'number', 'desc' => 'Minutes to dim after Jamaat'],
34	['key' => 'scroll', 'value' => 'text', 'desc' => 'Scrolling text'],
35	['key' => 'scroll_link', 'value' => 'url', 'desc' => 'Make scroll text clickable'],
36	['key' => 'blink', 'value' => 'text', 'desc' => 'Blinking text'],
37	['key' => 'blink_link', 'value' => 'url', 'desc' => 'Make blink text clickable'],
38	['key' => 'disable_overnight_dim', 'value' => 'true', 'desc' => 'Disable overnight dimming'],
39	['key' => 'deactivate_tomorrow', 'value' => 'true', 'desc' => 'Hide tomorrow after prayer finishes'],
40	['key' => 'mute_adhan', 'value' => 'true', 'desc' => 'Disable Adhan sound'],
41	];
42
43	$examples = [
44	['[monthlytable]', 'Display yearly and monthly prayer time with ajax month selector'],
45	['[monthlytable display=iqamah_only]', 'Display Iqamah times only'],
46	['[monthlytable display=azan_only]', 'Display Azan times only'],
47	['[monthlytable heading="Månedlige Tidsplan"]', 'Custom heading in any language'],
48	['[dailytable_vertical]', 'Display daily timetable vertically'],
49	['[dailytable_vertical asr=hanafi]', 'Vertical with Hanafi Asr method'],
50	['[dailytable_horizontal]', 'Display daily timetable horizontally'],
51	['[dailytable_horizontal display=iqamah_only]', 'Horizontal with Iqamah times only'],
52	['[dailytable_horizontal asr=hanafi]', 'Horizontal with Hanafi Asr'],
53	['[dailytable_vertical asr=hanafi announcement="First Khutbah: 1:15" day=friday]', 'Announcement on Friday'],
54	['[sunrise]', 'Display sunrise time'],
55	['[isha_prayer]', 'Display Isha prayer time'],
56	['[fajr_prayer start_time=true]', 'Display fajr with start time'],
57	['[daily_next_prayer]', 'Display only next prayer'],
58	['[digital_screen]', 'Display on big monitors'],
59	['[digital_screen view=vertical]', 'Portrait mode'],
60	['[digital_screen dim=5]', 'Dim after 5 minutes'],
61	['[quran_verse min_word=20 max_word=30 language=bangla]', 'Quran verse in Bengali'],
62	];
63	?>
64	<style>
65	.dpt-help-accordion { margin-bottom: 10px; }
66	.dpt-help-accordion .accordion-header {
67	background: #2271b1; color: #fff; padding: 12px 15px; cursor: pointer;
68	border-radius: 4px; display: flex; justify-content: space-between; align-items: center;
69	}
70	.dpt-help-accordion .accordion-header:hover { background: #1d5a8a; }
71	.dpt-help-accordion .accordion-header:after { content: '▼'; font-size: 10px; transition: transform 0.3s; }
72	.dpt-help-accordion.active .accordion-header:after { transform: rotate(180deg); }
73	.dpt-help-accordion .accordion-content { display: none; padding: 15px; border: 1px solid #ddd; border-top: none; }
74	.dpt-help-accordion.active .accordion-content { display: block; }
75	.dpt-shortcode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 15px; }
76	.dpt-shortcode-grid.basic { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
77	.dpt-shortcode-card {
78	background: #f6f7f7; border: 1px solid #dcdcde; padding: 10px 12px; border-radius: 4px;
79	font-family: monospace; font-size: 13px; cursor: pointer; transition: background 0.2s; position: relative;
80	}
81	.dpt-shortcode-card:hover { background: #e6e6e6; border-color: #2271b1; }
82	.dpt-shortcode-card.copied { background: #d1e7dd; border-color: #0f5132; }
83	.dpt-option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
84	.dpt-option-card { background: #f6f7f7; border: 1px solid #dcdcde; padding: 10px; border-radius: 4px; }
85	.dpt-option-card code { background: #fff; padding: 2px 6px; border-radius: 3px; font-size: 12px; }
86	.dpt-example-list { list-style: none; padding: 0; }
87	.dpt-example-list li { padding: 8px 0; border-bottom: 1px solid #eee; }
88	.dpt-example-list li:last-child { border-bottom: none; }
89	.dpt-example-list code { background: #f6f7f7; padding: 2px 6px; border-radius: 3px; font-size: 13px; }
90	.dpt-example-list .desc { color: #666; font-size: 12px; display: block; margin-top: 4px; }
91	.dpt-tip { background: #fff8c5; border-left: 4px solid #f0c33c; padding: 10px 15px; margin-bottom: 20px; font-size: 14px; }
92	.dpt-tip a { color: #2271b1; }
93	</style>
94
95	<p class="dpt-tip">
96	<span class="red">! Important !</span> Please <a href="plugins.php">re-activate</a> the plugin if your data is not imported
97	</p>
98
99	<p style="background:#e7f1ff; padding:10px; border-radius:4px; margin-bottom:15px;">
100	<strong>💡 Tip:</strong> Click on any shortcode below to copy it to your clipboard!
101	</p>
102
103	<h2>Helps and Tips</h2>
104
105	<div id="dpt-help-accordions">
106
107	<!-- Basic Shortcodes -->
108	<div class="dpt-help-accordion active">
109	<div class="accordion-header" onclick="toggleHelpAccordion(this)">Basic Shortcodes</div>
110	<div class="accordion-content">
111	<p>Most commonly used shortcodes for displaying prayer times (click to copy):</p>
112	<div class="dpt-shortcode-grid basic">
113	<?php foreach ($basicShortcodes as $sc): ?>
114	<div class="dpt-shortcode-card" onclick="copyShortcode(this, '<?php echo esc_attr($sc); ?>')"><?php echo esc_html($sc); ?></div>
115	<?php endforeach; ?>
116	</div>
117	</div>
118	</div>
119
120	<!-- Prayer Times -->
121	<div class="dpt-help-accordion">
122	<div class="accordion-header" onclick="toggleHelpAccordion(this)">Prayer Times</div>
123	<div class="accordion-content">
124	<p>Display individual prayer times with Iqamah:</p>
125	<div class="dpt-shortcode-grid">
126	<?php foreach ($prayerTimes as $sc): ?>
127	<div class="dpt-shortcode-card" onclick="copyShortcode(this, '<?php echo esc_attr($sc); ?>')"><?php echo esc_html($sc); ?></div>
128	<?php endforeach; ?>
129	</div>
130	</div>
131	</div>
132
133	<!-- Individual Times -->
134	<div class="dpt-help-accordion">
135	<div class="accordion-header" onclick="toggleHelpAccordion(this)">Individual Times (Start/Jamah)</div>
136	<div class="accordion-content">
137	<p>Display only start time or jamah time for each prayer:</p>
138	<div class="dpt-shortcode-grid">
139	<?php foreach ($individualTimes as $sc): ?>
140	<div class="dpt-shortcode-card" onclick="copyShortcode(this, '<?php echo esc_attr($sc); ?>')"><?php echo esc_html($sc); ?></div>
141	<?php endforeach; ?>
142	</div>
143	</div>
144	</div>
145
146	<!-- Special Features -->
147	<div class="dpt-help-accordion">
148	<div class="accordion-header" onclick="toggleHelpAccordion(this)">Special Features</div>
149	<div class="accordion-content">
150	<p>Additional features like Quran verse, digital screen, etc:</p>
151	<div class="dpt-shortcode-grid">
152	<?php foreach ($specialFeatures as $sc): ?>
153	<div class="dpt-shortcode-card" onclick="copyShortcode(this, '<?php echo esc_attr($sc); ?>')"><?php echo esc_html($sc); ?></div>
154	<?php endforeach; ?>
155	</div>
156	</div>
157	</div>
158
159	<!-- Options Reference -->
160	<div class="dpt-help-accordion">
161	<div class="accordion-header" onclick="toggleHelpAccordion(this)">Shortcode Options Reference</div>
162	<div class="accordion-content">
163	<p>Add these options to any shortcode (e.g., [dailytable_horizontal asr=hanafi]):</p>
164	<div class="dpt-option-grid">
165	<?php foreach ($options as $opt): ?>
166	<div class="dpt-option-card">
167	<code><?php echo esc_html($opt['key']); ?>=<?php echo esc_html($opt['value']); ?></code>
168	<br><small><?php echo esc_html($opt['desc']); ?></small>
169	</div>
170	<?php endforeach; ?>
171	</div>
172	<p style="margin-top: 15px;"><strong>Digital Screen Options:</strong></p>
173	<div class="dpt-option-grid">
174	<?php foreach ($digitalOptions as $opt): ?>
175	<div class="dpt-option-card">
176	<code><?php echo esc_html($opt['key']); ?>=<?php echo esc_html($opt['value']); ?></code>
177	<br><small><?php echo esc_html($opt['desc']); ?></small>
178	</div>
179	<?php endforeach; ?>
180	</div>
181	</div>
182	</div>
183
184	<!-- Examples -->
185	<div class="dpt-help-accordion">
186	<div class="accordion-header" onclick="toggleHelpAccordion(this)">Practical Examples</div>
187	<div class="accordion-content">
188	<p>Click any example to copy it:</p>
189	<ul class="dpt-example-list">
190	<?php foreach ($examples as $ex): ?>
191	<li>
192	<code onclick="copyShortcode(this, '<?php echo esc_attr($ex[0]); ?>')" style="cursor:pointer;"><?php echo esc_html($ex[0]); ?></code>
193	<span class="desc"><?php echo esc_html($ex[1]); ?></span>
194	</li>
195	<?php endforeach; ?>
196	</ul>
197	<p><a href="https://wordpress.org/plugins/daily-prayer-time-for-mosques/screenshots/" target="_new">View screenshots <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
198	</div>
199	</div>
200
201	<!-- Ramadan & Hijri -->
202	<div class="dpt-help-accordion">
203	<div class="accordion-header" onclick="toggleHelpAccordion(this)">How To: Ramadan & Custom Hijri</div>
204	<div class="accordion-content">
205	<p><strong>Update Ramadan timetable:</strong><br>Put '1' for column (is_ramadan) in the sample CSV for days belonging to Ramadan before upload.</p>
206	<p><strong>Use custom Hijri date:</strong><br>Insert your own calculated Hijri date in the CSV column (hijri_date) and enable visibility from settings.</p>
207	</div>
208	</div>
209
210	</div>
211
212	<script>
213	function toggleHelpAccordion(header) {
214	header.parentElement.classList.toggle('active');
215	}
216
217	function copyShortcode(el, text) {
218	// Try modern clipboard API first
219	if (navigator.clipboard && navigator.clipboard.writeText) {
220	navigator.clipboard.writeText(text).then(function() {
221	showCopyFeedback(el, text);
222	}).catch(function(err) {
223	fallbackCopy(text, el);
224	});
225	} else {
226	fallbackCopy(text, el);
227	}
228	}
229
230	function fallbackCopy(text, el) {
231	// Fallback for older browsers
232	var textarea = document.createElement('textarea');
233	textarea.value = text;
234	textarea.style.position = 'fixed';
235	textarea.style.opacity = '0';
236	document.body.appendChild(textarea);
237	textarea.select();
238	try {
239	document.execCommand('copy');
240	showCopyFeedback(el, text);
241	} catch (err) {
242	alert('Failed to copy. Please manually select and copy: ' + text);
243	}
244	document.body.removeChild(textarea);
245	}
246
247	function showCopyFeedback(el, originalText) {
248	el.classList.add('copied');
249	el.innerText = 'Copied! ✓';
250	setTimeout(function() {
251	el.classList.remove('copied');
252	el.innerText = originalText;
253	}, 1500);
254	}
255	</script>