summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/attribution.html23
-rw-r--r--src/index.html11
-rw-r--r--src/scripts/quran.js17
-rw-r--r--src/scripts/sura-list.js2
-rw-r--r--src/styles/style.css52
-rw-r--r--src/sura.html15
6 files changed, 99 insertions, 21 deletions
diff --git a/src/attribution.html b/src/attribution.html
index 7f7c45a..19493ea 100644
--- a/src/attribution.html
+++ b/src/attribution.html
@@ -27,15 +27,16 @@
try {
process.versions['electron'];
var windowBtns = document.getElementsByClassName('window-button-container');
-
+
for (var i = 0; i < windowBtns.length; i++) {
windowBtns[i].style.display = 'grid';
}
document.getElementById('openquran-link').href = 'index.html'
+ document.getElementById('openquran-home').href = 'index.html'
} catch {
var windowBtns = document.getElementsByClassName('window-button-container');
-
+
for (var i = 0; i < windowBtns.length; i++) {
windowBtns[i].style.display = 'none';
}
@@ -68,24 +69,36 @@
</div>
</div>
<div id="main-container">
- <div class="main height-no-scroll" style="margin-left: 0; border-radius: 0;">
+ <div class="main-sidebar">
+ <a href="./" class="sidebar-buttons" id="openquran-home"><i class="fa-solid fa-house"></i></a>
+ <a href="sura.html" class="sidebar-buttons"><i class="fa-solid fa-quran"></i></a>
+ <a href="attribution.html" class="sidebar-buttons"><i class="fa-solid fa-scroll"></i></a>
+ </div>
+ <div class="main height-no-scroll" style="margin-left: 60px;">
<div class="scroll main-content-padding">
<div style="max-width: 1200px; margin-left: auto; margin-right: auto;">
<h1 id="header" class="title" style="text-align: center;">Credits & Attribution</h1>
<hr style="margin-top: 20px; height: 2px; background-color: black; border: none;">
<br>
- <a href="https://github.com/altaf-creator/OpenQuran" target=_blank class="link" style="text-align: center; width: 100%; display: inline-block;"><i class="fa-brands fa-github"></i> GitHub</a>
+ <a href="https://github.com/altaf-creator/OpenQuran" target=_blank class="link"
+ style="text-align: center; width: 100%; display: inline-block;"><i
+ class="fa-brands fa-github"></i> GitHub</a>
<h2>Quran Text, Metadata, & Translations</h2>
<a href="https://tanzil.net/docs/resources" class="link" target=_blank>The Tanzil Project</a>
<h2>Developer</h2>
<a href="https://altaf-creator.github.io/" class="link" target=_blank>altaf-creator</a>
+ <h2>Icons</h2>
+ <a href="https://fontawesome.com/" class="link" target="_blank">Font Awesome - licensed under the CC
+ BY 4.0 license</a>
<h2>More Information</h2>
<ul>
<li><b>Script Type:</b> Uthmani</li>
<li><b>English Translation Author:</b> Saheeh International</li>
<li><b>Indonesia Translation Author:</b> Kementerian Agama Indonesia</li>
</ul>
- <a href="https://altaf.mit-license.org/" target=_blank class="link" style="text-align: center; width: 100%; display: inline-block;"><i>Licensed under the MIT License</i></a>
+ <a href="https://altaf.mit-license.org/" target=_blank class="link"
+ style="text-align: center; width: 100%; display: inline-block;"><i>Licensed under the MIT
+ License</i></a>
</div>
</div>
</div>
diff --git a/src/index.html b/src/index.html
index 813573f..89acd8c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -51,13 +51,18 @@
<a href="attribution.html" class="link">Attribution</a>
</div>
<div id="main-container">
- <div class="main height-no-scroll" style="margin-left: 0; border-radius: 0;">
+ <div class="main-sidebar">
+ <a href="./" class="sidebar-buttons" id="openquran-home"><i class="fa-solid fa-house"></i></a>
+ <a href="sura.html" class="sidebar-buttons"><i class="fa-solid fa-quran"></i></a>
+ <a href="attribution.html" class="sidebar-buttons"><i class="fa-solid fa-scroll"></i></a>
+ </div>
+ <div class="main height-no-scroll" style="margin-left: 60px;">
<div class="scroll main-content-padding">
- <div style="max-width: 1200px; margin-left: auto; margin-right: auto;">
+ <div style="max-width: 1050px; margin-left: auto; margin-right: auto;">
<h1 id="header" class="title" style="text-align: center;">Sura List</h1>
<hr style="margin-top: 20px; height: 2px; background-color: black; border: none;">
<div id="main">
- <ul style="list-style-type: none; padding: 0; margin: 0; column-count: auto; column-width: 400px; column-gap: 0;" id="sura-ul">
+ <ul style="list-style-type: none; padding: 0; margin: 0; column-count: auto; column-width: 350px; column-gap: 0;" id="sura-ul">
</ul>
</div>
</div>
diff --git a/src/scripts/quran.js b/src/scripts/quran.js
index 76c18bf..c50d9c0 100644
--- a/src/scripts/quran.js
+++ b/src/scripts/quran.js
@@ -23,22 +23,29 @@ function getUrlVars() {
function quranOnLoad() {
var a = getUrlVars()["sura"];
- load(a, tIndex);
+
+ if (a) {
+ load(a, tIndex);
+ } else {
+ load(1, tIndex)
+ }
+
loadSuraButtons();
try {
process.versions['electron'];
-
+
var windowBtns = document.getElementsByClassName('window-button-container');
-
+
for (var i = 0; i < windowBtns.length; i++) {
windowBtns[i].style.display = 'grid';
}
-
+
document.getElementById('openquran-link').href = 'index.html'
+ document.getElementById('openquran-home').href = 'index.html'
} catch {
var windowBtns = document.getElementsByClassName('window-button-container');
-
+
for (var i = 0; i < windowBtns.length; i++) {
windowBtns[i].style.display = 'none';
}
diff --git a/src/scripts/sura-list.js b/src/scripts/sura-list.js
index a799b02..abbae2e 100644
--- a/src/scripts/sura-list.js
+++ b/src/scripts/sura-list.js
@@ -20,6 +20,8 @@ function load() {
for (var i = 0; i < windowBtns.length; i++) {
windowBtns[i].style.display = 'grid';
}
+
+ document.getElementById('openquran-home').href = 'index.html'
} catch {
var windowBtns = document.getElementsByClassName('window-button-container');
diff --git a/src/styles/style.css b/src/styles/style.css
index 1279478..435bc6a 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -203,16 +203,53 @@ hr {
background-color: rgba(0, 0, 0, 0.2) !important;
}
+.main-sidebar {
+ position: fixed;
+ padding-left: 12.5px;
+ padding-right: 12.5px;
+ height: 100%;
+ z-index: 3;
+}
+
+.sidebar-buttons {
+ width: 35px;
+ height: 35px;
+ background-color: rgba(0, 0, 0, 0);
+ border-radius: 17.5px;
+ display: block;
+ display: grid;
+ box-sizing: border-box;
+ padding: 8px;
+ color: #000;
+ text-decoration: none;
+ transition: all 150ms;
+ margin-top: 12.5px;
+ text-align: center;
+}
+
+.sidebar-buttons:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+.sidebar-buttons:active {
+ background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+.sidebar-buttons:focus {
+ background-color: rgba(0, 0, 0, 0.1) !important;
+}
+
.sidebar {
position: fixed;
height: 100%;
- width: 260px;
+ width: 230px;
background-color: #F3F3F3;
z-index: 1;
+ margin-left: 60px;
}
.main {
- margin-left: 260px;
+ margin-left: 290px;
background-color: #FFF;
border-top-left-radius: 15px;
z-index: 3;
@@ -298,6 +335,7 @@ hr {
z-index: 2;
border-top-right-radius: 10px;
background-color: #F3F3F3;
+ display: none;
}
.dropdown-button {
@@ -393,7 +431,7 @@ hr {
.main {
border-top-left-radius: 0;
- margin-left: 0;
+ margin-left: 0 !important;
}
#dropdown-alternate {
@@ -407,4 +445,12 @@ hr {
.window-button-container {
display: none;
}
+
+ .sidebar-links {
+ display: block;
+ }
+
+ .main-sidebar {
+ display: none;
+ }
} \ No newline at end of file
diff --git a/src/sura.html b/src/sura.html
index e90d78a..b003f75 100644
--- a/src/sura.html
+++ b/src/sura.html
@@ -49,6 +49,11 @@
</div>
</div>
<div id="main-container">
+ <div class="main-sidebar" style="border-right: solid 1.5px rgba(0, 0, 0, 0.1); ">
+ <a href="./" class="sidebar-buttons" id="openquran-home"><i class="fa-solid fa-house"></i></a>
+ <a href="sura.html" class="sidebar-buttons"><i class="fa-solid fa-quran"></i></a>
+ <a href="attribution.html" class="sidebar-buttons"><i class="fa-solid fa-scroll"></i></a>
+ </div>
<div class="sidebar">
<div class="scroll scroll-auto" id="scroll-sura">
<div class="dropdown" tabindex="0" id="dropdown">
@@ -58,9 +63,9 @@
class="fa-solid fa-angle-down"></i></span>
</div>
<div class="dropdown-content">
- <a href="#" class="dropdown-item"
+ <a href="javascript:void(0);" class="dropdown-item"
onclick="changeDropdownName(`dropdown-content`, `English`); changeLang(0);">English</a>
- <a href="#" class="dropdown-item"
+ <a href="javascript:void(0);" class="dropdown-item"
onclick="changeDropdownName(`dropdown-content`, `Indonesia`); changeLang(1);">Indonesia</a>
</div>
</div>
@@ -82,13 +87,13 @@
class="fa-solid fa-angle-down"></i></span>
</div>
<div class="dropdown-content" style="width: calc(100% - 85px);">
- <a href="#" class="dropdown-item"
+ <a href="javascript:void(0);" class="dropdown-item"
onclick="changeDropdownName(`dropdown-content-alternate`, `English`); changeLang(0);">English</a>
- <a href="#" class="dropdown-item"
+ <a href="javascript:void(0);" class="dropdown-item"
onclick="changeDropdownName(`dropdown-content-alternate`, `Indonesia`); changeLang(1);">Indonesia</a>
</div>
</div>
- <h1 id="header" class="title">Choose a sura</h1>
+ <h1 id="header" class="title">Loading...</h1>
<h3 id="subheader" class="subtitle"></h3>
<div id="main">
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-23 16:03:47 +0000