added toc, notifications, key shortcuts and new file for css

AfzGit · Jul 17, 2024 · 30fe11a · 30fe11a
1 parent 7dd1819
commit 30fe11a
Show file tree

Hide file tree

Showing 2 changed files with 148 additions and 67 deletions.
diff --git a/index.html b/index.html
@@ -4,82 +4,27 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Quick Quran Ayah Lookup</title>
-        <style>
-            .small-input {
-                width: 312px;
-                height: 20px;
-                padding: 5px;
-                font-size: 14px;
-            }
-            button {
-                padding: 5px;
-                margin: 5px 0px;
-                border-radius: 5px;
-            }
-            li {
-                margin: 7px 0px;
-            }
-            html {
-                background-color: rgb(255, 230, 210);
-                margin-bottom: 20%;
-            }
-            .black-hr {
-                border-color: black;
-                background: black;
-            }
-            h3,
-            h4 {
-                border: 3px solid black; /* Border style */
-                padding: 10px;
-                text-align: justify;
-                border-radius: 10px;
-            }
-            /* Styles for desktop screens */
-            @media (min-width: 700px) {
-                h3,
-                h4 {
-                    margin-right: 10%;
-                    margin-left: 10%;
-                }
-            }
-            @media (min-width: 1000px) {
-                h3,
-                h4 {
-                    margin-right: 35%;
-                    margin-left: auto;
-                }
-            }
-            @media (min-width: 1200px) {
-                h3,
-                h4 {
-                    margin-right: 45%;
-                    margin-left: auto;
-                }
-            }
-            @media (min-width: 1400px) {
-                h3,
-                h4 {
-                    margin-right: 55%;
-                    margin-left: auto;
-                }
-            }
-            @media (min-width: 1600px) {
-                h3,
-                h4 {
-                    margin-right: 60%;
-                    margin-left: auto;
-                }
-            }
-        </style>
+        <link rel="stylesheet" href="styles.css" />
     </head>
     <body>
+        <div class="toc-icon" id="tocIcon">&#9776;</div>
+        <div class="toc" id="toc">
+            <ul>
+                <li><a href="#urlForm">Search</a></li>
+                <li><a href="#quran">Quran</a></li>
+                <li><a href="#tafsir-print">Tafsir</a></li>
+                <li><a href="#copy-status">Clipboard</a></li>
+                <li><a href="#result">URLs</a></li>
+            </ul>
+        </div>
         <div class="container">
             <h1>Quick Quran Ayah Lookup</h1>
             <p>
                 For Hadith:
                 <a href="https://afzgit.github.io/Quick-Hadith-Lookup/"
                     >Quick Hadith Lookup</a
                 >
+                <br />Keyboard shortcuts: Press key I, Q, T, C or U
             </p>
             <form id="urlForm">
                 <hr />
@@ -254,6 +199,7 @@ <h1>Quick Quran Ayah Lookup</h1>
                     </select>
                 </label>
                 <br /><br />
+                <div id="notification"></div>
                 <button type="submit" style="padding: 10px">
                     🔘 Get Quran 🔘
                 </button>

diff --git a/styles.css b/styles.css
@@ -0,0 +1,135 @@
+.small-input {
+    width: 312px;
+    height: 20px;
+    padding: 5px;
+    font-size: 14px;
+}
+button {
+    padding: 5px;
+    margin: 5px 0px;
+    border-radius: 5px;
+}
+li {
+    margin: 7px 0px;
+}
+html {
+    background-color: rgb(255, 230, 210);
+    margin-bottom: 20%;
+}
+.black-hr {
+    border-color: black;
+    background: black;
+}
+h3,
+h4 {
+    border: 3px solid black; /* Border style */
+    padding: 10px;
+    text-align: justify;
+    border-radius: 10px;
+}
+/* Styles for desktop screens */
+@media (min-width: 700px) {
+    h3,
+    h4 {
+        margin-right: 10%;
+        margin-left: 10%;
+    }
+}
+@media (min-width: 1000px) {
+    h3,
+    h4 {
+        margin-right: 35%;
+        margin-left: auto;
+    }
+}
+@media (min-width: 1200px) {
+    h3,
+    h4 {
+        margin-right: 45%;
+        margin-left: auto;
+    }
+}
+@media (min-width: 1400px) {
+    h3,
+    h4 {
+        margin-right: 55%;
+        margin-left: auto;
+    }
+}
+@media (min-width: 1600px) {
+    h3,
+    h4 {
+        margin-right: 60%;
+        margin-left: auto;
+    }
+}
+
+#notification {
+    display: none;
+    position: fixed;
+    top: 10px;
+    right: 55px;
+    background-color: #0ecd47;
+    color: black;
+    padding: 12px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    font-weight: bold;
+}
+
+.toc-icon {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    background-color: #333;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+.toc {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 80%;
+    max-width: 300px;
+    background-color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.3s ease;
+    border-radius: 10px;
+    z-index: 1000;
+}
+.toc ul {
+    list-style-type: none;
+    padding: 20px;
+    margin: 0;
+}
+.toc li {
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+}
+.toc li:last-child {
+    border-bottom: none;
+}
+.toc li a {
+    text-decoration: none;
+    color: #333;
+}
+.toc.open {
+    transform: translate(-50%, -50%) scale(1);
+}
+/* Overlay for background click to close the modal */
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: none;
+    z-index: 999;
+}
+.overlay.open {
+    display: block;
+}