-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcall-for-papers.html
More file actions
475 lines (412 loc) · 16.9 KB
/
call-for-papers.html
File metadata and controls
475 lines (412 loc) · 16.9 KB
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Call for Papers - Islamic Insight Journal of Islamic Studies">
<meta name="keywords" content="call for papers, academic journal, research papers, Islamic studies, submission guidelines">
<meta name="author" content="Islamic Insight Journal">
<title>Call for Papers - Islamic Insight</title>
<link rel="icon" type="image/png" href="logo.png">
<!-- CSS Libraries -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: #1a202c;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.academic-title {
font-family: 'Crimson Text', serif;
}
.logo-container {
display: flex;
align-items: center;
gap: 0.75rem;
}
.logo-image {
height: 40px;
width: auto;
}
.logo-text-container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.logo-text {
line-height: 1;
margin: 0;
}
.logo-subtitle {
font-size: 0.75rem;
color: #6b7280;
margin: 0;
line-height: 1;
font-weight: 400;
}
.mobile-menu {
transition: all 0.3s ease;
}
/* A4-like page container */
.page-container {
max-width: 210mm; /* A4 width */
min-height: 297mm; /* A4 height */
margin: 2rem auto;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20mm 20mm; /* A4-like margins */
position: relative;
}
.content-wrapper {
width: 100%;
max-width: none;
}
.section-spacing {
margin-bottom: 2rem;
}
.text-justify {
text-align: justify;
}
/* Navigation adjustments */
.nav-container {
background: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 40;
margin-bottom: 0;
}
/* Loading spinner */
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #f3f3f3;
border-top: 3px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error-message {
background-color: #fee;
border: 1px solid #fcc;
color: #c33;
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
}
/* Button styling */
.create-paper-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.create-paper-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.create-paper-btn:active {
transform: translateY(0);
}
.create-paper-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.button-loading {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ffffff40;
border-top: 2px solid #ffffff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Notification styles */
.notification-popup {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
max-width: 400px;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.page-container {
max-width: 95%;
margin: 1rem auto;
padding: 20mm 15mm;
min-height: auto;
}
.logo-image {
height: 32px;
}
.logo-text {
font-size: 1rem;
}
.logo-subtitle {
font-size: 0.65rem;
}
.create-paper-btn {
width: 100%;
justify-content: center;
}
.notification-popup {
left: 20px;
right: 20px;
max-width: none;
}
}
@media (max-width: 480px) {
.page-container {
padding: 15mm 10mm;
}
.logo-text {
font-size: 0.9rem;
}
.logo-subtitle {
font-size: 0.6rem;
}
}
/* Footer adjustments */
footer {
margin-top: 0;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav-container">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<a href="index.html" class="logo-container">
<img src="logo.png" alt="Islamic Insight Logo" class="logo-image">
<div class="logo-text-container">
<h1 class="logo-text text-xl font-bold text-gray-900 academic-title">
ISLAMIC INSIGHT
</h1>
<p class="logo-subtitle">Journal of Islamic Studies</p>
</div>
</a>
</div>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:block">
<div class="flex items-center space-x-6">
<a href="index.html" class="text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium transition-colors">Home</a>
<a href="call-for-papers.html" class="text-blue-900 font-semibold px-3 py-2 text-sm font-medium">Call For Paper</a>
<a href="index.html#featured" class="text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium transition-colors">Current Issue</a>
<a href="all-issues.html" class="text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium transition-colors">All Issues</a>
<a href="index.html#about" class="text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium transition-colors">About</a>
</div>
</div>
<!-- Mobile menu button -->
<div class="md:hidden">
<button id="mobile-menu-btn" class="text-gray-700 hover:text-blue-900 focus:outline-none">
<i class="fas fa-bars text-lg"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Navigation -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200 mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="index.html" class="block px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-900 transition-colors">Home</a>
<a href="call-for-papers.html" class="block px-3 py-2 text-sm font-medium text-blue-900 font-semibold">Call For Paper</a>
<a href="index.html#featured" class="block px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-900 transition-colors">Current Issue</a>
<a href="all-issues.html" class="block px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-900 transition-colors">All Issues</a>
<a href="index.html#about" class="block px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-900 transition-colors">About</a>
</div>
</div>
</nav>
<!-- A4-like Page Container -->
<div class="page-container">
<div class="content-wrapper">
<!-- Loading State -->
<div id="loading-state" class="text-center section-spacing">
<div class="loading-spinner mx-auto mb-4"></div>
<p class="text-gray-600">Loading content...</p>
</div>
<!-- Error State -->
<div id="error-state" class="error-message section-spacing" style="display: none;">
<h3 class="font-bold text-lg mb-2">Error Loading Content</h3>
<p id="error-message">Unable to load content from Google Sheets. Please try again later.</p>
<button onclick="window.CallForPapersLoader.refresh()" class="mt-3 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
Retry
</button>
</div>
<!-- Main Content (Hidden initially) -->
<div id="main-content" style="display: none;">
<!-- Header -->
<div class="text-center section-spacing">
<h1 id="main-heading" class="text-3xl sm:text-4xl font-bold academic-title text-gray-900 mb-4">Call for Papers</h1>
<h2 id="sub-heading" class="text-xl sm:text-2xl academic-title text-gray-700">Islamic Insight Journal of Islamic Studies</h2>
<p id="edition" class="text-lg text-gray-600 mt-2">Vol. 8, No. 1 (2025)</p>
</div>
<!-- Main Content -->
<div class="section-spacing">
<p id="paragraph-1" class="text-gray-700 leading-relaxed text-justify mb-6">
We are pleased to invite original research articles for the upcoming issue of Islamic Insight,
a biannual peer-reviewed journal published by the Kulliyyah of Qur'an and Sunnah,
Darul Huda Islamic University, Kerala, India.
</p>
<p id="paragraph-2" class="text-gray-700 leading-relaxed text-justify mb-6">
Islamic Insight welcomes high-quality, interdisciplinary research in areas related to Islamic
revealed knowledge and the Muslim world. This includes—but is not limited to—studies in the
Noble Qur'an, Hadith, Islamic Theology, Islamic Social Sciences, and Muslim History and Culture.
Unique and relevant contributions beyond the prescribed disciplines are also encouraged.
</p>
<div id="paragraph-3" class="text-gray-700 leading-relaxed text-justify mb-6">
<p>All submissions will undergo a double-blind peer review process. Send your manuscripts by
<strong id="submission-date">mid-June 2025</strong> for consideration in <span id="edition-ref">Vol. 8, No. 1 (2025)</span>.</p>
</div>
</div>
<!-- Submission Guidelines -->
<div class="section-spacing">
<h3 class="text-2xl font-bold academic-title text-gray-900 mb-4">Submission Guidelines</h3>
<ul id="submission-guidelines" class="space-y-3 text-gray-700 leading-relaxed">
<!-- Dynamic content will be loaded here -->
</ul>
</div>
<!-- Research Areas -->
<div class="section-spacing">
<h3 class="text-2xl font-bold academic-title text-gray-900 mb-4">Research Areas</h3>
<ul id="research-areas" class="space-y-2 text-gray-700 leading-relaxed">
<!-- Dynamic content will be loaded here -->
</ul>
</div>
<!-- Article Format Tools -->
<div class="section-spacing">
<h3 class="text-2xl font-bold academic-title text-gray-900 mb-4">Article Format</h3>
<p class="text-gray-700 leading-relaxed mb-6">
To help authors format their submissions according to our journal standards,
we provide a pre-formatted Google Doc template. Click the button below to create
your own copy of the article format template:
</p>
<div class="text-center">
<button id="create-paper-btn" class="create-paper-btn" onclick="window.createPaperCopy()">
<i class="fas fa-file-alt"></i>
<span id="btn-text">Create Full Paper</span>
</button>
</div>
<p class="text-gray-600 text-sm text-center mt-4">
<i class="fas fa-info-circle"></i>
This will create a personal copy of our article template in your Google Drive
</p>
</div>
<!-- Contact Information (Static) -->
<div class="section-spacing">
<h3 class="text-2xl font-bold academic-title text-gray-900 mb-4">Submission</h3>
<p class="text-gray-700 leading-relaxed mb-4">
For submission, please send your manuscript to:
</p>
<div class="bg-gray-50 p-4 rounded border-l-4 border-blue-500 mb-6">
<p class="font-semibold text-gray-900 mb-2">Email:</p>
<a href="mailto:islamicinsight@dhiu.in" class="text-blue-600 hover:text-blue-800 font-medium text-lg">
islamicinsight@dhiu.in
</a>
</div>
<div class="bg-gray-50 p-4 rounded mb-6">
<p class="font-semibold text-gray-900 mb-2">Editorial Office:</p>
<address class="text-gray-700 not-italic leading-relaxed">
Editor, Islamic Insight Journal of Islamic Studies<br>
Darul Huda Islamic University<br>
Chemmad, P.B.NO. 3<br>
Tirurangadi (PO), Malappuram (Dt.)<br>
676306 (PIN), Kerala, India
</address>
</div>
<p class="text-gray-700 leading-relaxed">
<strong>Website:</strong>
<a href="https://www.islamicinsight.in" class="text-blue-600 hover:text-blue-800">www.islamicinsight.in</a>
</p>
</div>
<!-- Back to Home -->
<div class="text-center section-spacing">
<a href="index.html" class="inline-block bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition-colors">
Back to Home
</a>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<div class="logo-container justify-center mb-4">
<img src="logo.png" alt="Islamic Insight Logo" class="logo-image">
<div class="logo-text-container">
<h1 class="logo-text text-white">ISLAMIC INSIGHT</h1>
<p class="logo-subtitle text-gray-300">Journal of Islamic Studies</p>
</div>
</div>
<p class="text-gray-300 text-sm">
© 2024 Islamic Insight Journal. All rights reserved.
</p>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="call-for-papers.js"></script>
<script src="tracking.js"></script>
<script>
// Mobile menu functionality
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuBtn && mobileMenu) {
mobileMenuBtn.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
</script>
</body>
</html>