diff options
29 files changed, 866 insertions, 508 deletions
diff --git a/about/author.html b/about/author.html index 1c279ee..841b859 100644 --- a/about/author.html +++ b/about/author.html @@ -5,7 +5,6 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> - <link rel="icon" href="/assets/images/master.svg"> <title>About Author • Al Azhar 9th Grade Lesson Notes</title> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> @@ -20,11 +19,10 @@ <div id="console"></div> <div id="sidebar"> <div> - <a href="/index.html"> + <a href="/"> <img src="/assets/images/master.svg" alt="" class="sidebar-logo"> </a> - <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> </div> <div> @@ -71,4 +69,4 @@ <script src="/scripts/onload/toc.js"></script> <script src="/scripts/sidebar.js"></script> </body> -</html>
\ No newline at end of file +</html> diff --git a/about/school.html b/about/school.html index b8a4587..9660240 100644 --- a/about/school.html +++ b/about/school.html @@ -5,7 +5,6 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> - <link rel="icon" href="/assets/images/master.svg"> <title>About School • Al Azhar 9th Grade Lesson Notes</title> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> @@ -20,11 +19,9 @@ <div id="console"></div> <div id="sidebar"> <div> - <a href="/index.html"> + <a href="/"> <img src="/assets/images/master.svg" alt="" class="sidebar-logo"> </a> - - <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> </div> <div> @@ -181,4 +178,4 @@ <script src="/scripts/onload/toc.js"></script> <script src="/scripts/sidebar.js"></script> </body> -</html>
\ No newline at end of file +</html> diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png Binary files differindex 76c2fee..27d85c6 100644 --- a/android-chrome-192x192.png +++ b/android-chrome-192x192.png diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png Binary files differindex b891c0e..0e34c1a 100644 --- a/android-chrome-512x512.png +++ b/android-chrome-512x512.png diff --git a/apple-touch-icon.png b/apple-touch-icon.png Binary files differindex f6ceadb..e40f969 100644 --- a/apple-touch-icon.png +++ b/apple-touch-icon.png diff --git a/browserconfig.xml b/browserconfig.xml new file mode 100644 index 0000000..c554148 --- /dev/null +++ b/browserconfig.xml @@ -0,0 +1,2 @@ +<?xml version="1.0" encoding="utf-8"?> +<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
\ No newline at end of file diff --git a/favicon-16x16.png b/favicon-16x16.png Binary files differindex e4d0f7c..f185d16 100644 --- a/favicon-16x16.png +++ b/favicon-16x16.png diff --git a/favicon-32x32.png b/favicon-32x32.png Binary files differindex 473c899..f54ea1a 100644 --- a/favicon-32x32.png +++ b/favicon-32x32.png diff --git a/favicon.ico b/favicon.ico Binary files differindex a6146c5..e63d80a 100644 --- a/favicon.ico +++ b/favicon.ico diff --git a/favicon_io.zip b/favicon_io.zip Binary files differnew file mode 100644 index 0000000..1b99884 --- /dev/null +++ b/favicon_io.zip @@ -2,163 +2,166 @@ <html lang="en"> <head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="/style.css"> - <title>Al Azhar 9th Grade Lesson Notes</title> - <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> - <link rel="manifest" href="/site.webmanifest"> - <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="/style.css"> + <title>Al Azhar 9th Grade Lesson Notes</title> + <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> + <link rel="manifest" href="/site.webmanifest"> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> </head> <body> - <div class="fixed-top-btn-container" id="topbtn"> - <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a> - <a class="fixed-top-btn back-btn" style="color: var(--black-color-2);" disabled><i class="fa-solid fa-chevron-left"></i></a> - </div> + <div class="fixed-top-btn-container" id="topbtn"> + <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a> + <a class="fixed-top-btn back-btn" style="color: var(--black-color-2);" disabled><i class="fa-solid fa-chevron-left"></i></a> + </div> - <div id="console"></div> - <div id="sidebar"> - <div> - <a href="/index.html"> - <img src="/assets/images/master.svg" alt="" class="sidebar-logo"> - </a> - </div> + <div id="console"></div> + <div id="sidebar"> + <div> + <a href="/"> + <img src="/assets/images/master.svg" alt="" class="sidebar-logo"> + </a> + </div> - <div> - <a href="/about/author.html" class="sidebar-link link">About the Author</a> - <a href="/about/school.html" class="sidebar-link link">About School</a> - <a href="/lessons" class="sidebar-link link">Lessons</a> + <div> + <a href="/about/author.html" class="sidebar-link link" id="link-author">About the Author</a> + <a href="/about/school.html" class="sidebar-link link" id="link-school">About School</a> + <a href="/lessons" class="sidebar-link link" id="link-lessons">Lessons</a> - <hr class="divider"> - <div id="toc"> - <h4>Table of Contents</h4> - </div> - </div> - </div> + <hr class="divider"> + <div id="toc"> + <h4 id="toc-title">Table of Contents</h4> + </div> + </div> + </div> - <div class="banner-container" id="banner"> - <div class="banner-bg" id="img-alazhar"></div> - <div class="gradient-bg"></div> - <div class="banner-text-container"> - <h1 class="banner-text" id="banner-txt">Welcome to OpenLearning Centre!</h1> - <h3 class="banner-text" id="banner-txt">A studying website mainly for Al Azhar SMP students.</h3> - </div> - </div> + <div class="banner-container" id="banner"> + <div class="banner-bg" id="img-alazhar"></div> + <div class="gradient-bg"></div> + <div class="banner-text-container"> + <h1 class="banner-text" id="banner-txt">Welcome to OpenLearning Centre!</h1> + <h3 class="banner-text" id="banner-txt">A studying website mainly for Al Azhar SMP students.</h3> + </div> + </div> - <div class="top-chips-container" id="chip-container"> - <div><a href="indonesia.html" class="button"><i class="fa-solid fa-language"></i> View in Indonesia</a></div> - </div> + <div class="top-chips-container" id="chip-container"> + <div><a href="javascript:switchLangHref('/indonesia.html')" class="button" id="lang-switcher"><i class="fa-solid fa-language"></i> <span id="lang-switcher-text">Read in Indonesia</span></a></div> + </div> - <div id="main"> - <section> - <h1 id="welcome">A Warm Welcome</h1> - <p>Welcome to OpenLearning Centre! This is a website meant for middle school students (mainly Al Azhar) to study and / or an extra reference for studying. Choose a subuject below to start reading.</p> - <h1 id="github">Contributing and Source Code</h1> - <p> - If you want to contribute to the project or want to view the source code, it's all available at GitHub! <br> - If you want to suggest a new page, you can create it yourself using HTML, or create a new issue at GitHub. <a href="https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-an-issue" class="link">Here's how to do it. <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.6em;"></i></a> - </p> - <p>Link: <a href="https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io" class="link"><i - class="fa-brands fa-github"></i> - https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io</a> - </p> - <h1 style="display: inline;" id="lessons">Lessons</h1> <a href="/lessons/"><span - style="margin-left: 10px;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span></a> - <div class="card-container" id="subject-container"> - <!-- /scripts/lesson.js - loadSubjects(); --> - </div> - <h1 id="contributors">Credits & Contributors</h1> - <div class="flex"> - <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> - <div class="flex-element"> - <h2>Manager</h2> - <span>Athaalaa Altaf Hafidz</span> - <p> - <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> - </p> - </div> - </div> - <hr> - <div class="flex"> - <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> - <div class="flex-element"> - <h2>Writer</h2> - <span>Athaalaa Altaf Hafidz</span> - <p> - <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> - </p> - </div> - </div> - <hr> - <div class="flex"> - <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> - <div class="flex-element"> - <h2>Developer</h2> - <span>Athaalaa Altaf Hafidz</span> - <p> - <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> - </p> - </div> - </div> - <hr> - <div class="flex"> - <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> - <div class="flex-element"> - <h2>Designer</h2> - <span>Athaalaa Altaf Hafidz</span> - <p> - <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> - </p> - </div> - </div> - <hr> - <div class="flex"> - <img src="/assets/images/scenery_blur.png" alt="" class="circle flex-element" style="height: 180px;"> - <div class="flex-element"> - <h2>Images</h2> - <p> - <a href="https://unsplash.com/" class="link"><i class="fa-solid fa-globe"></i> unsplash.com</a> • - <a href="https://smpia25.al-azhar.sch.id/" class="link"><i class="fa-solid fa-globe"></i> smpia25.al-azhar.sch.id</a> • - <a href="https://upload.wikimedia.org/wikipedia/commons/a/ad/Masjid_Agung_Al-Azhar_2021.jpg" class="link"><i class="fa-solid fa-globe"></i> upload.wikimedia.org</a> • <a href="https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io" class="link"><i class="fa-brands fa-github"></i> Please me help adding more forgotten asset attributions!</a> - </p> - </div> - </div> - <hr> - <div class="flex"> - <img src="/assets/images/scenery_blur.png" alt="" class="circle flex-element" style="height: 180px;"> - <div class="flex-element"> - <h2>Assets & Open Source Softwares</h2> - <ul> - <li><a href="https://fontawesome.com/" class="link">https://fontawesome.com/</a> - for icons</li> - <li><a href="https://katex.org/" class="link">https://katex.org/</a> - for math renderer</li> - </ul> - </div> - </div> - <hr> - <div class="flex"> - <img src="/assets/images/scenery_blur.png" alt="" class="circle flex-element" style="height: 180px;"> - <div class="flex-element"> - <h2>Special Thanks</h2> - <ul> - <li>Our teachers</li> - <li>My friends & family</li> - <li>And YOU!</li> - </ul> - </div> - </div> - <p class="align-center">Thank you for using this website!</p> - </section> - </div> + <div id="main"> + <section> + <h1 id="welcome">A Warm Welcome</h1> + <p>Welcome to OpenLearning Centre! This is a website meant for middle school students (mainly Al Azhar) to study and / or an extra reference for studying. Choose a subuject below to start reading.</p> + <h1 id="github">Contributing and Source Code</h1> + <p> + If you want to contribute to the project or want to view the source code, it's all available at GitHub! <br> + If you want to suggest a new page, you can create it yourself using HTML, or create a new issue at GitHub. <a href="https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-an-issue" class="link">Here's how to do it. <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.6em;"></i></a> + </p> + <p>Link: <a href="https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io" class="link"><i + class="fa-brands fa-github"></i> + https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io</a> + </p> + <h1 style="display: inline;" id="lessons">Lessons</h1> <a href="/lessons/"><span + style="margin-left: 10px;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span></a> + <div class="card-container" id="subject-container"> + <!-- /scripts/lesson.js - loadSubjects(); --> + </div> + <h1 id="contributors">Credits & Contributors</h1> + <div class="flex"> + <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Manager</h2> + <span>Athaalaa Altaf Hafidz</span> + <p> + <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> + </p> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Writer</h2> + <span>Athaalaa Altaf Hafidz</span> + <p> + <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> + </p> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Developer</h2> + <span>Athaalaa Altaf Hafidz</span> + <p> + <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> + </p> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Designer</h2> + <span>Athaalaa Altaf Hafidz</span> + <p> + <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> + </p> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/scenery_blur.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Images</h2> + <p> + <a href="https://unsplash.com/" class="link"><i class="fa-solid fa-globe"></i> unsplash.com</a> • + <a href="https://smpia25.al-azhar.sch.id/" class="link"><i class="fa-solid fa-globe"></i> smpia25.al-azhar.sch.id</a> • + <a href="https://upload.wikimedia.org/wikipedia/commons/a/ad/Masjid_Agung_Al-Azhar_2021.jpg" class="link"><i class="fa-solid fa-globe"></i> upload.wikimedia.org</a> • <a href="https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io" class="link"><i class="fa-brands fa-github"></i> Please me help adding more forgotten asset attributions!</a> + </p> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/scenery_blur.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Assets & Open Source Softwares</h2> + <ul> + <li><a href="https://fontawesome.com/" class="link">https://fontawesome.com/</a> - for icons</li> + <li><a href="https://katex.org/" class="link">https://katex.org/</a> - for math renderer</li> + </ul> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/scenery_blur.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Special Thanks</h2> + <ul> + <li>Our teachers</li> + <li>My friends & family</li> + <li>And YOU!</li> + </ul> + </div> + </div> + <p class="align-center">Thank you for using this website!</p> + </section> + </div> - <script src="/scripts/toc.js"></script> - <script src="/scripts/lesson.js"></script> - <script src="/scripts/onload/list.js"></script> - <script src="/scripts/sidebar.js"></script> + <script src="/scripts/global.js"></script> + <script src="/scripts/globalElements.js"></script> + <script src="/scripts/localStorage.js"></script> + <script src="/scripts/toc.js"></script> + <script src="/scripts/lesson.js"></script> + <script src="/scripts/onload/list.js"></script> + <script src="/scripts/sidebar.js"></script> </body> </html> diff --git a/indonesia-bak.html b/indonesia-bak.html new file mode 100644 index 0000000..3c96df4 --- /dev/null +++ b/indonesia-bak.html @@ -0,0 +1,277 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="/style.css"> + <title>Al Azhar 9th Grade Lesson Notes</title> + <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> + <link rel="manifest" href="/site.webmanifest"> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</head> + +<body> + <div class="fixed-top-btn-container" id="topbtn"> + <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a> + <a class="fixed-top-btn back-btn" style="color: var(--black-color-2);" disabled><i class="fa-solid fa-chevron-left"></i></a> + </div> + + <div id="console"></div> + <div id="sidebar"> + <div> + <a href="/index.html"> + <img src="/assets/images/master.svg" alt="" class="sidebar-logo"> + </a> + + <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> + </div> + + <div> + <a href="/about/author.html" class="sidebar-link link">About the Author</a> + <a href="/about/school.html" class="sidebar-link link">About School</a> + <a href="/lessons" class="sidebar-link link">Lessons</a> + + + <hr class="divider"> + <div id="toc"> + <h4>Table of Contents</h4> + </div> + </div> + </div> + + <div class="banner-container" id="banner"> + <div class="banner-bg" id="img-alazhar"></div> + <div class="gradient-bg"></div> + <div class="banner-text-container"> + <h1 class="banner-text" id="banner-txt">Al Azhar 9th Grade Lesson Notes</h1> + <h3 class="banner-text" id="banner-txt">Sebuah website belajar</h3> + </div> + </div> + + <div class="top-chips-container" id="chip-container"> + <div><a href="/" class="button"><i class="fa-solid fa-language"></i> Lihat dalam Bahasa Inggris</a></div> + </div> + + <div id="main"> + <section> + <h1 id="welcome">Selamat Datang</h1> + <p>Selamat datang di website Rangkuman Pelajaran Al Azhar Kelas 9 (yang tidak resmi)! Website ini adalah website catatan pelajaran yang ditulis oleh Altaf. Silakan pilih pelajaran dibawah untuk memulai membaca.</p> + <h1 id="github">Berkontribusi dan Sumber Kode</h1> + <p> + Jika anda ingin berkontribusi ke proyek ini atau ingin melihat sumber kodennya, semuanya tersedia di GitHub!<br> + Jika anda ingin menyarankan sebuah halaman baru, silakan buat sebuah <i>Issue</i> baru di GitHub. <a href="https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-an-issue" class="link">Ini bagaimana cara melakukannya. <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.6em;"></i></a> + </p> + <p>Link: <a href="https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io" class="link"><i + class="fa-brands fa-github"></i> + https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io</a> + </p> + <h1 style="display: inline;" id="lessons">Pelajaran</h1> <a href="/lessons/"><span + style="margin-left: 10px;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span></a> + <div class="card-container"> + <div class="card"> + <a href="/lessons/matematika/" class="link-card"></a> + <img src="/assets/images/hero/math.jpg" alt="" class="card-img"> + <a href="/lessons/1/"> + <h2>Matematika</h2> + </a> + <p>Hidayatullah, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/fisika/" class="link-card"></a> + <img src="/assets/images/hero/physics.jpg" alt="" class="card-img"> + <a href="/lessons/2/"> + <h2>Fisika</h2> + </a> + <p>Ayu Rezky Yulita, M.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/biologi/" class="link-card"></a> + <img src="/assets/images/hero/biology.jpg" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Biologi</h2> + </a> + <p>Ir. Hj. Wiwit Parminta</p> + </div> + <div class="card"> + <a href="/lessons/ips/" class="link-card"></a> + <img src="/assets/images/hero/ips.jpg" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>IPS</h2> + </a> + <p>Unaeni Jahroh S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/agama/" class="link-card"></a> + <img src="/assets/images/hero/alazhar.jpg" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Agama</h2> + </a> + <p>Akrom Hasani, S.Ag.</p> + </div> + <div class="card"> + <a href="/lessons/quran/" class="link-card"></a> + <img src="/assets/images/hero/quran.jpg" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Al-Qur'an</h2> + </a> + <p>Muhammad Fathan S.Ag</p> + </div> + <div class="card"> + <a href="/lessons/arab/" class="link-card"></a> + <img src="/assets/images/hero/arabic.png" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Bahasa Arab</h2> + </a> + <p>Mohammad Amar, Lc.</p> + </div> + <div class="card"> + <a href="/lessons/ppkn/" class="link-card"></a> + <img src="/assets/images/hero/ppkn.jpg" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>PPKn</h2> + </a> + <p>Andini Nurlaily Hikmah, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/informatika/" class="link-card"></a> + <img src="/assets/images/hero/laptop.jpg" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Informatika</h2> + </a> + <p>Nurbaeti, SE., M.Ak</p> + </div> + <div class="card"> + <a href="/lessons/english/" class="link-card"></a> + <img src="https://img-cdn.inc.com/image/upload/w_1920,h_1080,c_fill/images/panoramic/GettyImages-577674005_492115_zfpgiw.jpg" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>English</h2> + </a> + <p>Sofia Nurbaiti, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/indonesia/" class="link-card"></a> + <img src="/assets/images/hero/books.jpg" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Bahasa Indonesia</h2> + </a> + <p>Maman Sulaeman, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/musik/" class="link-card"></a> + <img src="/assets/images/hero/music.jpg" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Seni Musik</h2> + </a> + <p>Dra. Kusnun Indrawati</p> + </div> + <div class="card"> + <a href="/lessons/lukis/" class="link-card"></a> + <img src="/assets/images/hero/paint.jpg" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Seni Rupa</h2> + </a> + <p>Miftah Izharul Haq, S.Pd</p> + </div> + <div class="card"> + <a href="/lessons/pjok/" class="link-card"></a> + <img src="/assets/images/hero/sports.jpg" alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Penjasorkes</h2> + </a> + <p>Supatri, S.Pd</p> + </div> + </div> + <h1 id="contributors">Credits & Contributors</h1> + <div class="flex"> + <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Manager</h2> + <span>Athaalaa Altaf Hafidz</span> + <p> + <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> + </p> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Writer</h2> + <span>Athaalaa Altaf Hafidz</span> + <p> + <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> + </p> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Developer</h2> + <span>Athaalaa Altaf Hafidz</span> + <p> + <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> + </p> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/me.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Designer</h2> + <span>Athaalaa Altaf Hafidz</span> + <p> + <a href="" class="link"><i class="fa-solid fa-globe"></i> altaf-creator.github.io</a> + </p> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/scenery_blur.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Images</h2> + <p> + <a href="https://unsplash.com/" class="link"><i class="fa-solid fa-globe"></i> unsplash.com</a> • + <a href="https://smpia25.al-azhar.sch.id/" class="link"><i class="fa-solid fa-globe"></i> smpia25.al-azhar.sch.id</a> • + <a href="https://upload.wikimedia.org/wikipedia/commons/a/ad/Masjid_Agung_Al-Azhar_2021.jpg" class="link"><i class="fa-solid fa-globe"></i> upload.wikimedia.org</a> • <a href="https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io" class="link"><i class="fa-brands fa-github"></i> Please me help adding more forgotten asset attributions!</a> + </p> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/scenery_blur.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Assets & Open Source Softwares</h2> + <ul> + <li><a href="https://fontawesome.com/" class="link">https://fontawesome.com/</a> - for icons</li> + <li><a href="https://katex.org/" class="link">https://katex.org/</a> - for math renderer</li> + </ul> + </div> + </div> + <hr> + <div class="flex"> + <img src="/assets/images/scenery_blur.png" alt="" class="circle flex-element" style="height: 180px;"> + <div class="flex-element"> + <h2>Special Thanks</h2> + <ul> + <li>Our teachers</li> + <li>My friends & family</li> + <li>And YOU!</li> + </ul> + </div> + </div> + <p class="align-center">Thank you for using this website!</p> + </section> + </div> + + <script src="/scripts/toc.js"></script> + <script src="/scripts/onload/toc.js"></script> + <script src="/scripts/sidebar.js"></script> +</body> + +</html> + diff --git a/indonesia.html b/indonesia.html index 3c96df4..02e0b50 100644 --- a/indonesia.html +++ b/indonesia.html @@ -23,22 +23,20 @@ <div id="console"></div> <div id="sidebar"> <div> - <a href="/index.html"> + <a href="/"> <img src="/assets/images/master.svg" alt="" class="sidebar-logo"> </a> - - <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> </div> <div> - <a href="/about/author.html" class="sidebar-link link">About the Author</a> - <a href="/about/school.html" class="sidebar-link link">About School</a> - <a href="/lessons" class="sidebar-link link">Lessons</a> + <a href="/about/author.html" class="sidebar-link link" id="link-author">About the Author</a> + <a href="/about/school.html" class="sidebar-link link" id="link-school">About School</a> + <a href="/lessons" class="sidebar-link link" id="link-lessons">Lessons</a> <hr class="divider"> <div id="toc"> - <h4>Table of Contents</h4> + <h4 id="toc-title">Table of Contents</h4> </div> </div> </div> @@ -47,143 +45,32 @@ <div class="banner-bg" id="img-alazhar"></div> <div class="gradient-bg"></div> <div class="banner-text-container"> - <h1 class="banner-text" id="banner-txt">Al Azhar 9th Grade Lesson Notes</h1> - <h3 class="banner-text" id="banner-txt">Sebuah website belajar</h3> + <h1 class="banner-text" id="banner-txt">Welcome to OpenLearning Centre!</h1> + <h3 class="banner-text" id="banner-txt">A studying website mainly for Al Azhar SMP students.</h3> </div> </div> <div class="top-chips-container" id="chip-container"> - <div><a href="/" class="button"><i class="fa-solid fa-language"></i> Lihat dalam Bahasa Inggris</a></div> + <div><a href="javascript:switchLangHref('/')" class="button" id="lang-switcher"><i class="fa-solid fa-language"></i> <span id="lang-switcher-text">Read in Indonesia</span></a></div> </div> <div id="main"> <section> - <h1 id="welcome">Selamat Datang</h1> - <p>Selamat datang di website Rangkuman Pelajaran Al Azhar Kelas 9 (yang tidak resmi)! Website ini adalah website catatan pelajaran yang ditulis oleh Altaf. Silakan pilih pelajaran dibawah untuk memulai membaca.</p> - <h1 id="github">Berkontribusi dan Sumber Kode</h1> + <h1 id="welcome">A Warm Welcome</h1> + <p>Welcome to OpenLearning Centre! This is a website meant for middle school students (mainly Al Azhar) to study and / or an extra reference for studying. Choose a subuject below to start reading.</p> + <h1 id="github">Contributing and Source Code</h1> <p> - Jika anda ingin berkontribusi ke proyek ini atau ingin melihat sumber kodennya, semuanya tersedia di GitHub!<br> - Jika anda ingin menyarankan sebuah halaman baru, silakan buat sebuah <i>Issue</i> baru di GitHub. <a href="https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-an-issue" class="link">Ini bagaimana cara melakukannya. <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.6em;"></i></a> + If you want to contribute to the project or want to view the source code, it's all available at GitHub! <br> + If you want to suggest a new page, you can create it yourself using HTML, or create a new issue at GitHub. <a href="https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-an-issue" class="link">Here's how to do it. <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.6em;"></i></a> </p> <p>Link: <a href="https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io" class="link"><i class="fa-brands fa-github"></i> https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io</a> </p> - <h1 style="display: inline;" id="lessons">Pelajaran</h1> <a href="/lessons/"><span + <h1 style="display: inline;" id="lessons">Lessons</h1> <a href="/lessons/"><span style="margin-left: 10px;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span></a> - <div class="card-container"> - <div class="card"> - <a href="/lessons/matematika/" class="link-card"></a> - <img src="/assets/images/hero/math.jpg" alt="" class="card-img"> - <a href="/lessons/1/"> - <h2>Matematika</h2> - </a> - <p>Hidayatullah, S.Pd.</p> - </div> - <div class="card"> - <a href="/lessons/fisika/" class="link-card"></a> - <img src="/assets/images/hero/physics.jpg" alt="" class="card-img"> - <a href="/lessons/2/"> - <h2>Fisika</h2> - </a> - <p>Ayu Rezky Yulita, M.Pd.</p> - </div> - <div class="card"> - <a href="/lessons/biologi/" class="link-card"></a> - <img src="/assets/images/hero/biology.jpg" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>Biologi</h2> - </a> - <p>Ir. Hj. Wiwit Parminta</p> - </div> - <div class="card"> - <a href="/lessons/ips/" class="link-card"></a> - <img src="/assets/images/hero/ips.jpg" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>IPS</h2> - </a> - <p>Unaeni Jahroh S.Pd.</p> - </div> - <div class="card"> - <a href="/lessons/agama/" class="link-card"></a> - <img src="/assets/images/hero/alazhar.jpg" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>Agama</h2> - </a> - <p>Akrom Hasani, S.Ag.</p> - </div> - <div class="card"> - <a href="/lessons/quran/" class="link-card"></a> - <img src="/assets/images/hero/quran.jpg" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>Al-Qur'an</h2> - </a> - <p>Muhammad Fathan S.Ag</p> - </div> - <div class="card"> - <a href="/lessons/arab/" class="link-card"></a> - <img src="/assets/images/hero/arabic.png" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>Bahasa Arab</h2> - </a> - <p>Mohammad Amar, Lc.</p> - </div> - <div class="card"> - <a href="/lessons/ppkn/" class="link-card"></a> - <img src="/assets/images/hero/ppkn.jpg" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>PPKn</h2> - </a> - <p>Andini Nurlaily Hikmah, S.Pd.</p> - </div> - <div class="card"> - <a href="/lessons/informatika/" class="link-card"></a> - <img src="/assets/images/hero/laptop.jpg" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>Informatika</h2> - </a> - <p>Nurbaeti, SE., M.Ak</p> - </div> - <div class="card"> - <a href="/lessons/english/" class="link-card"></a> - <img src="https://img-cdn.inc.com/image/upload/w_1920,h_1080,c_fill/images/panoramic/GettyImages-577674005_492115_zfpgiw.jpg" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>English</h2> - </a> - <p>Sofia Nurbaiti, S.Pd.</p> - </div> - <div class="card"> - <a href="/lessons/indonesia/" class="link-card"></a> - <img src="/assets/images/hero/books.jpg" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>Bahasa Indonesia</h2> - </a> - <p>Maman Sulaeman, S.Pd.</p> - </div> - <div class="card"> - <a href="/lessons/musik/" class="link-card"></a> - <img src="/assets/images/hero/music.jpg" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>Seni Musik</h2> - </a> - <p>Dra. Kusnun Indrawati</p> - </div> - <div class="card"> - <a href="/lessons/lukis/" class="link-card"></a> - <img src="/assets/images/hero/paint.jpg" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>Seni Rupa</h2> - </a> - <p>Miftah Izharul Haq, S.Pd</p> - </div> - <div class="card"> - <a href="/lessons/pjok/" class="link-card"></a> - <img src="/assets/images/hero/sports.jpg" alt="" class="card-img"> - <a href="/lessons/3/"> - <h2>Penjasorkes</h2> - </a> - <p>Supatri, S.Pd</p> - </div> + <div class="card-container" id="subject-container"> + <!-- /scripts/lesson.js - loadSubjects(); --> </div> <h1 id="contributors">Credits & Contributors</h1> <div class="flex"> @@ -268,10 +155,13 @@ </section> </div> + <script src="/scripts/global.js"></script> + <script src="/scripts/globalElements.js"></script> + <script src="/scripts/localStorage.js"></script> <script src="/scripts/toc.js"></script> - <script src="/scripts/onload/toc.js"></script> + <script src="/scripts/lesson.js"></script> + <script src="/scripts/onload/list.js"></script> <script src="/scripts/sidebar.js"></script> </body> </html> - diff --git a/lessons/index.json b/lessons/index.json index b12465c..87899d1 100644 --- a/lessons/index.json +++ b/lessons/index.json @@ -5,6 +5,7 @@ "titleId": "Matematika", "splash": "1 + 1 = 3", "banner": "/assets/images/hero/math.jpg", + "bannerOriginal": "/assets/images/hero/math_original.jpg", "chapters": [ { "id": 0, @@ -18,7 +19,7 @@ "titleId": "Pelajaran 1: Pangkat", "grade": 9, "status": 1, - "authors": [ "Athaalaa Altaf Hafidz", "Athaalaa Altaf Hafidz" ], + "authors": [ "Athaalaa Altaf Hafidz" ], "pathEn": "/lessons/matematika/1-exponents/1.md", "pathId": "/lessons/matematika/1-exponents/1-id.md" }, @@ -42,6 +43,7 @@ "titleId": "Fisika", "splash": "insert funny splash text", "banner": "/assets/images/hero/physics.jpg", + "bannerOriginal": "/assets/images/hero/physics_original.jpg", "chapters": [ { "id": 0, @@ -77,6 +79,7 @@ "titleId": "Biologi", "splash": "insert funny splash text", "banner": "/assets/images/hero/biology.jpg", + "bannerOriginal": "/assets/images/hero/biology_original.jpg", "chapters": [ { "id": 0, @@ -112,6 +115,7 @@ "titleId": "Ilmu Pengetahuan Sosial", "splash": "insert funny splash text", "banner": "/assets/images/hero/ips.jpg", + "bannerOriginal": "/assets/images/hero/ips_original.jpg", "chapters": [ { "id": 0, @@ -147,6 +151,7 @@ "titleId": "Pendidikan Agama Islam", "splash": "insert funny splash text", "banner": "/assets/images/hero/alazhar.jpg", + "bannerOriginal": "/assets/images/hero/alazhar_original.jpg", "chapters": [ { "id": 0, @@ -182,6 +187,7 @@ "titleId": "Al-Qur'an", "splash": "insert funny splash text", "banner": "/assets/images/hero/quran.jpg", + "bannerOriginal": "/assets/images/hero/quran_original.jpg", "chapters": [ { "id": 0, @@ -217,6 +223,7 @@ "titleId": "اللغة العربية", "splash": "insert funny splash text", "banner": "/assets/images/hero/arabic.png", + "bannerOriginal": "/assets/images/hero/library.jpg", "chapters": [ { "id": 0, @@ -252,6 +259,7 @@ "titleId": "PKN", "splash": "insert funny splash text", "banner": "/assets/images/hero/ppkn.jpg", + "bannerOriginal": "/assets/images/hero/ppkn_original.jpg", "chapters": [ { "id": 0, @@ -287,6 +295,7 @@ "titleId": "Informatika", "splash": "insert funny splash text", "banner": "/assets/images/hero/laptop.jpg", + "bannerOriginal": "/assets/images/hero/laptop_original.jpg", "chapters": [ { "id": 0, @@ -322,6 +331,7 @@ "titleId": "English", "splash": "insert funny splash text", "banner": "/assets/images/hero/library.jpg", + "bannerOriginal": "/assets/images/hero/library.jpg", "chapters": [ { "id": 0, @@ -357,6 +367,7 @@ "titleId": "Bahasa Indonesia", "splash": "insert funny splash text", "banner": "/assets/images/hero/books.jpg", + "bannerOriginal": "/assets/images/hero/books_original.jpg", "chapters": [ { "id": 0, @@ -392,6 +403,7 @@ "titleId": "Seni Musik", "splash": "insert funny splash text", "banner": "/assets/images/hero/music.jpg", + "bannerOriginal": "/assets/images/hero/music_original.jpg", "chapters": [ { "id": 0, @@ -427,6 +439,7 @@ "titleId": "Seni Rupa", "splash": "insert funny splash text", "banner": "/assets/images/hero/paint.jpg", + "bannerOriginal": "/assets/images/hero/paint_original.jpg", "chapters": [ { "id": 0, @@ -462,6 +475,7 @@ "titleId": "Penjasorkes", "splash": "insert funny splash text", "banner": "/assets/images/hero/sports.jpg", + "bannerOriginal": "/assets/images/hero/sports_original.jpg", "chapters": [ { "id": 0, diff --git a/lessons/matematika/1-exponents/1-id.md b/lessons/matematika/1-exponents/1-id.md index e69de29..a66e3fd 100644 --- a/lessons/matematika/1-exponents/1-id.md +++ b/lessons/matematika/1-exponents/1-id.md @@ -0,0 +1,2 @@ +# Pangkat +File berbahasa Indonesia diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..013d4a6 --- /dev/null +++ b/manifest.json @@ -0,0 +1,41 @@ +{ + "name": "App", + "icons": [ + { + "src": "\/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "\/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "\/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "\/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + }, + { + "src": "\/android-icon-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": "3.0" + }, + { + "src": "\/android-icon-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": "4.0" + } + ] +}
\ No newline at end of file diff --git a/scripts/global.js b/scripts/global.js new file mode 100644 index 0000000..df82ef6 --- /dev/null +++ b/scripts/global.js @@ -0,0 +1,21 @@ +// RETURN VALUE +// TYPE : bool +// DESCRIPTION : true = indonesia; false = english (fallback); +function isLangIndonesia() { + if (localStorage.getItem("lang") == "id") { + return true + } else { + return false + } +} + +// RETURN VALUE +// TYPE : bool +// DESCRIPTION : true = dark; false = light (fallback); +function isDarkMode() { + if (localStorage.getItem("theme") == "dark") { + return true + } else { + return false + } +} diff --git a/scripts/globalElements.js b/scripts/globalElements.js new file mode 100644 index 0000000..01d8516 --- /dev/null +++ b/scripts/globalElements.js @@ -0,0 +1,13 @@ +// DEPENDENCIES: +// * /scripts/global.js +function updateGlobalElements() { + if (isLangIndonesia()) { + document.getElementById("lang-switcher-text").innerHTML = "Baca dalam Bahasa Inggris"; + document.getElementById("link-author").innerHTML = "Tentang Penulis"; + document.getElementById("link-school").innerHTML = "Tentang Sekolah"; + document.getElementById("link-lessons").innerHTML = "Mata Pelajaran"; + document.getElementById("toc-title").innerHTML = "Daftar Isi" + } else { + document.getElementById("lang-switcher-text").innerHTML = "Read in Indonesia"; + } +} diff --git a/scripts/lesson.js b/scripts/lesson.js index 0036fde..0c0cf47 100644 --- a/scripts/lesson.js +++ b/scripts/lesson.js @@ -1,120 +1,154 @@ +// DEPENDENCIES: +// * /scripts/global.js function loadSubject(id) { - fetch("/lessons/index.json") - .then((response) => response.json()) - .then((data) => { - var title = document.getElementById("title-banner"); - var subtitle = document.getElementById("subtitle"); - var container = document.getElementById("container") - - console.log(data.subjects[id]); - - title.innerHTML = data.subjects[id].titleEn; - subtitle.innerHTML = data.subjects[id].splash; - container.innerHTML = ""; - - var chapterLength = data.subjects[id].chapters.length; - - for (var i = 0; i < chapterLength; i++) { - var chapterContainer = ` - <h1 id="bab${i}">Chapter ${i + 1}: ${data.subjects[id].chapters[i].titleEn}</h1> - <div class="button-group-container"> - ` - - var lessonLength = data.subjects[id].chapters[i].lessons.length; - - if (lessonLength > 1) { - chapterContainer += ` - <a class="button-grouped button-grouped-top" href="lesson/?subject=${id}&chapter=${i}&id=0"> - <span class="button-char-icon">${(data.subjects[id].chapters[i].lessons[0].type == "lesson") ? '📚' :'✏️' }</span> - <span>${data.subjects[id].chapters[i].lessons[0].titleEn}</span> - </a> - ` - for (var j = 1; j < lessonLength - 1; j++) { - chapterContainer += ` - <a class="button-grouped" href="lesson/?subject=${id}&chapter=${i}&id=${j}"> - <span class="button-char-icon">${(data.subjects[id].chapters[i].lessons[j].type == "lesson") ? '📚' :'✏️' }</span> - <span>${data.subjects[id].chapters[i].lessons[j].titleEn}</span> - </a> - ` - } - chapterContainer += ` - <a class="button-grouped button-grouped-bottom" href="lesson/?subject=${id}&chapter=${i}&id=${lessonLength - 1}"> - <span class="button-char-icon">${(data.subjects[id].chapters[i].lessons[lessonLength - 1].type == "lesson") ? '📚' :'✏️' }</span> - <span>${data.subjects[id].chapters[i].lessons[lessonLength - 1].titleEn}</span> - </a> - ` - } else { - - } - - chapterContainer += `\n</div>` - - container.innerHTML += chapterContainer; - } - // return data.subjects[id]; - } - ); + fetch("/lessons/index.json") + .then((response) => response.json()) + .then((data) => { + var title = document.getElementById("title-banner"); + var subtitle = document.getElementById("subtitle"); + var container = document.getElementById("container"); + var banner = document.getElementById("img-dynamic-subject"); + + console.log(data.subjects[id]); + + if (isLangIndonesia()) { + title.innerHTML = data.subjects[id].titleId; + } else { + title.innerHTML = data.subjects[id].titleEn; + } + subtitle.innerHTML = data.subjects[id].splash; + container.innerHTML = ""; + var bannerPath = data.subjects[id].bannerOriginal; + banner.style.setProperty("background-image", `url(${bannerPath})`) + + var chapterLength = data.subjects[id].chapters.length; + + for (var i = 0; i < chapterLength; i++) { + var chapterContainer = ` + <h1 id="bab${i}">${(isLangIndonesia()) ? "Bab" : "Chapter"} ${i + 1}: ${(isLangIndonesia()) ? data.subjects[id].chapters[i].titleId : data.subjects[id].chapters[i].titleEn}</h1> + <div class="button-group-container"> + ` + + var lessonLength = data.subjects[id].chapters[i].lessons.length; + + if (lessonLength > 1) { + for (var j = 0; j < lessonLength; j++) { + var l = data.subjects[id].chapters[i].lessons[j]; + var style = ""; + + if (j == 0) { + style = "button-grouped-top"; + } else if (j == lessonLength - 1) { + style = "button-grouped-bottom"; + } + + chapterContainer += ` + <a class="button-grouped ${style}" href="${(l.type == "lesson") ? 'lesson' : 'quiz' }/?subject=${id}&chapter=${i}&id=${j}"> + <span class="button-char-icon">${(l.type == "lesson") ? '📚' :'✏️' }</span> + <span>${(isLangIndonesia()) ? l.titleId : l.titleEn}</span> + </a> + ` + } + } else { + + } + + chapterContainer += `\n</div>` + + container.innerHTML += chapterContainer; + } + // return data.subjects[id]; + } + ); } // DEPENDENCIES: // * /scripts/toc.js +// * /scripts/global.js // * markdown-it function loadLesson(subject, chapter, lesson) { - fetch("/lessons/index.json") - .then((response) => response.json()) - .then((data) => { - var title = document.getElementById("title-banner"); - var subtitle = document.getElementById("subtitle"); - var container = document.getElementById("container") - - var chipStatus = document.getElementById("chip-status"); - var chipAuthor = document.getElementById("chip-author"); - var chipGrade = document.getElementById("chip-grade"); - - var lessonData = data.subjects[subject].chapters[chapter].lessons[lesson]; - - console.log(lessonData); - - title.innerHTML = lessonData.titleEn; - subtitle.innerHTML = `Chapter ${parseInt(chapter) + 1}`; - container.innerHTML = ""; - chipGrade.innerHTML = "Grade " + lessonData.grade; - if (lessonData.authors.length == 1) { - chipAuthor.innerHTML = "Written by " + lessonData.authors[0]; - } else { - chipAuthor.innerHTML = "Written by "; - for (var i = 0; i < lessonData.authors.length - 1; i++) { - chipAuthor.innerHTML += lessonData.authors[i] + ", "; - } - chipAuthor.innerHTML += "and " + lessonData.authors[lessonData.authors.length - 1]; - } - // why the heck switch case not working - // guess i'm too stupid for a switch case. - // no i'm not yandev - if (lessonData.status == 0) { - chipStatus.innerHTML = "❓ Not Verified"; - } else if (lessonData.status == 1) { - chipStatus.innerHTML = "✅ Verified"; - } else if (lessonData.status == 2) { - chipStatus.innerHTML = "⚠️ Contains Wrong Information"; - } - - fetch(lessonData.pathEn) - .then((response) => response.text()) + fetch("/lessons/index.json") + .then((response) => response.json()) .then((data) => { - const md = markdownit(); - container.innerHTML = md.render(data); - }).then(() => { - MathJax.typeset(); - }); - } - ).then(() => { - toc(); - }); - console.log(subject); - console.log(chapter); - console.log(lesson); - + var title = document.getElementById("title-banner"); + var subtitle = document.getElementById("subtitle"); + var container = document.getElementById("container") + + var chipStatus = document.getElementById("chip-status"); + var chipAuthor = document.getElementById("chip-author"); + var chipGrade = document.getElementById("chip-grade"); + + var lessonData = data.subjects[subject].chapters[chapter].lessons[lesson]; + + console.log(lessonData); + + if (isLangIndonesia()) { + title.innerHTML = lessonData.titleId; + subtitle.innerHTML = `Bab ${parseInt(chapter) + 1}`; + container.innerHTML = ""; + chipGrade.innerHTML = "Kelas " + lessonData.grade; + if (lessonData.authors.length == 1) { + chipAuthor.innerHTML = "Ditulis oleh " + lessonData.authors[0]; + } else { + chipAuthor.innerHTML = "Ditulis oleh "; + for (var i = 0; i < lessonData.authors.length - 1; i++) { + chipAuthor.innerHTML += lessonData.authors[i] + ", "; + } + chipAuthor.innerHTML += "dan " + lessonData.authors[lessonData.authors.length - 1]; + } + } else { + title.innerHTML = lessonData.titleEn; + subtitle.innerHTML = `Chapter ${parseInt(chapter) + 1}`; + container.innerHTML = ""; + chipGrade.innerHTML = "Grade " + lessonData.grade; + if (lessonData.authors.length == 1) { + chipAuthor.innerHTML = "Written by " + lessonData.authors[0]; + } else { + chipAuthor.innerHTML = "Written by "; + for (var i = 0; i < lessonData.authors.length - 1; i++) { + chipAuthor.innerHTML += lessonData.authors[i] + ", "; + } + chipAuthor.innerHTML += "and " + lessonData.authors[lessonData.authors.length - 1]; + } + } + // why the heck switch case not working + // guess i'm too stupid for a switch case. + // no i'm not yandev + if (isLangIndonesia()) { + if (lessonData.status == 0) { + chipStatus.innerHTML = "❓ Belum Terverifikasi"; + } else if (lessonData.status == 1) { + chipStatus.innerHTML = "✅ Terverifikasi"; + } else if (lessonData.status == 2) { + chipStatus.innerHTML = "⚠️ Mengandung Informasi Tidak Akurat"; + } + } else { + if (lessonData.status == 0) { + chipStatus.innerHTML = "❓ Not Verified"; + } else if (lessonData.status == 1) { + chipStatus.innerHTML = "✅ Verified"; + } else if (lessonData.status == 2) { + chipStatus.innerHTML = "⚠️ Contains Wrong Information"; + } + } + + fetch((isLangIndonesia()) ? lessonData.pathId : lessonData.pathEn) + .then((response) => response.text()) + .then((data) => { + const md = markdownit({ + "html": true + }); + container.innerHTML = md.render(data); + }).then(() => { + MathJax.typeset(); + }).then(() => { + toc(); + }); + } + ); + console.log(subject); + console.log(chapter); + console.log(lesson); } function loadQuiz(subject, chapter, lesson) { @@ -122,24 +156,24 @@ function loadQuiz(subject, chapter, lesson) { } function listSubjects() { - fetch("/lessons/index.json") - .then((response) => response.json()) - .then((data) => { - var container = document.getElementById("subject-container"); - - for (var i = 0; i < data.subjects.length; i++) { - var card = ` - <div class="card"> - <a href="/subject/?id=${i}" class="link-card"></a> - <img src="${data.subjects[i].banner}" alt="" class="card-img"> - <a href="/subject/?id=${i}"> - <h2>${data.subjects[i].titleEn}</h2> - </a> - </div> - `; - - container.innerHTML += card; - } - } - ); + fetch("/lessons/index.json") + .then((response) => response.json()) + .then((data) => { + var container = document.getElementById("subject-container"); + + for (var i = 0; i < data.subjects.length; i++) { + var card = ` + <div class="card"> + <a href="/subject/?id=${i}" class="link-card"></a> + <img src="${data.subjects[i].banner}" alt="" class="card-img"> + <a href="/subject/?id=${i}"> + <h2>${(isLangIndonesia()) ? data.subjects[i].titleId : data.subjects[i].titleEn}</h2> + </a> + </div> + `; + + container.innerHTML += card; + } + } + ); } diff --git a/scripts/localStorage.js b/scripts/localStorage.js new file mode 100644 index 0000000..c5eb43d --- /dev/null +++ b/scripts/localStorage.js @@ -0,0 +1,27 @@ +function langIndonesia() { + localStorage.setItem("lang", "id"); + window.location.reload(); +} + +function langEnglish() { + localStorage.setItem("lang", "en"); + window.location.reload(); +} + +function switchLang() { + switchLangStorage(); + window.location.reload(); +} + +function switchLangStorage() { + if (localStorage.getItem("lang") == "id") { + localStorage.setItem("lang", "en"); + } else { + localStorage.setItem("lang", "id"); + } +} + +function switchLangHref(destination) { + switchLangStorage(); + window.location.href = destination; +} diff --git a/scripts/onload/lesson.js b/scripts/onload/lesson.js index 8e6d5e3..389cbf0 100644 --- a/scripts/onload/lesson.js +++ b/scripts/onload/lesson.js @@ -1,8 +1,10 @@ // DEPENDENCIES // * /scripts/lesson.js // * /scripts/toc.js +// * /scripts/global.js window.onload = function() { loadLesson(getUrlVars()['subject'], getUrlVars()['chapter'], getUrlVars()['id']); + updateGlobalElements(); } function getUrlVars() { diff --git a/scripts/onload/list.js b/scripts/onload/list.js index 496c5dd..f67bc43 100644 --- a/scripts/onload/list.js +++ b/scripts/onload/list.js @@ -1,4 +1,5 @@ window.onload = function() { toc(); listSubjects(); + updateGlobalElements(); } diff --git a/scripts/onload/subject.js b/scripts/onload/subject.js index a22e3e8..2bb985d 100644 --- a/scripts/onload/subject.js +++ b/scripts/onload/subject.js @@ -1,6 +1,7 @@ window.onload = function() { toc(); loadSubject(getUrlVars()['id']); + updateGlobalElements(); } function getUrlVars() { diff --git a/scripts/onload/toc.js b/scripts/onload/toc.js index f1101fe..067b5bf 100644 --- a/scripts/onload/toc.js +++ b/scripts/onload/toc.js @@ -1,3 +1,4 @@ window.onload = function() { toc(); + updateGlobalElements(); } diff --git a/scripts/sidebar.js b/scripts/sidebar.js index 3fcb63d..5a82e89 100644 --- a/scripts/sidebar.js +++ b/scripts/sidebar.js @@ -1,43 +1,43 @@ function toggleNav() { - const sidebar = document.getElementById("sidebar"); - const sStyle = window.getComputedStyle(sidebar); + const sidebar = document.getElementById("sidebar"); + const sStyle = window.getComputedStyle(sidebar); - if (sStyle.visibility == "hidden") { - if (document.body.clientWidth >= 1000) { - document.getElementById("main").style.marginLeft = "360px"; + if (sStyle.visibility == "hidden") { + if (document.body.clientWidth >= 1000) { + document.getElementById("main").style.marginLeft = "360px"; - try { - document.getElementById("banner").style.marginLeft = "375px"; - document.getElementById("topbtn").style.left = "385px"; - } catch { - - } + try { + document.getElementById("banner").style.marginLeft = "375px"; + document.getElementById("topbtn").style.left = "385px"; + } catch { + + } - try { - document.getElementById("chip-container").style.marginLeft = "355px"; - } catch { + try { + document.getElementById("chip-container").style.marginLeft = "355px"; + } catch { - } - } - - document.getElementById("sidebar").style.visibility = "visible"; - document.getElementById("sidebar").style.opacity = "1"; - } else { - document.getElementById("main").style.marginLeft = "0"; - document.getElementById("sidebar").style.visibility = "hidden"; - document.getElementById("sidebar").style.opacity = "0"; - - try { - document.getElementById("banner").style.marginLeft = "20px"; - document.getElementById("topbtn").style.left = "30px"; - } catch { - - } + } + } + + document.getElementById("sidebar").style.visibility = "visible"; + document.getElementById("sidebar").style.opacity = "1"; + } else { + document.getElementById("main").style.marginLeft = "0"; + document.getElementById("sidebar").style.visibility = "hidden"; + document.getElementById("sidebar").style.opacity = "0"; + + try { + document.getElementById("banner").style.marginLeft = "20px"; + document.getElementById("topbtn").style.left = "30px"; + } catch { + + } - try { - document.getElementById("chip-container").style.marginLeft = "0px"; - } catch { + try { + document.getElementById("chip-container").style.marginLeft = "0px"; + } catch { - } - } + } + } } diff --git a/scripts/toc.js b/scripts/toc.js index 107c846..2823b53 100644 --- a/scripts/toc.js +++ b/scripts/toc.js @@ -2,45 +2,51 @@ // trying javascript function toc() { - const tocDiv = document.getElementById("toc"); - const content = document.getElementById("main"); - const headers = content.querySelectorAll('h1, h2, h3, h4, h5, h6'); - - console.log(headers) + const tocDiv = document.getElementById("toc"); + const content = document.getElementById("main"); + const headers = content.querySelectorAll('h1, h2, h3, h4, h5, h6'); + + console.log(headers) - const ul = document.createElement("ul"); - tocDiv.appendChild(ul) + const ul = document.createElement("ul"); + tocDiv.appendChild(ul) + + for (var i = 0; i < headers.length; i++) { + if (!headers[i].hasAttribute('id')) { + headers[i].setAttribute('id', `${headers[i].innerHTML.split(" ")[0]}-${i}`) + } + } + + for (var i = 0; i < headers.length; i++) { + if (headers[i].hasAttribute('id')) { + const li = document.createElement("li"); + var level = headers[i].tagName[1]; + console.log(level + headers[i].tagName + headers[i].id) + if (level == 1) { + const a = document.createElement("a"); + ul.appendChild(li); + li.appendChild(a); + a.href = "#" + headers[i].id + a.textContent = headers[i].textContent + } + else + { + var nowUl = document.createElement("ul"); + ul.appendChild(nowUl); - for (var i = 0; i < headers.length; i++) { - if (headers[i].hasAttribute('id')) { - const li = document.createElement("li"); - var level = headers[i].tagName[1]; - console.log(level + headers[i].tagName + headers[i].id) - if (level == 1) { - const a = document.createElement("a"); - ul.appendChild(li); - li.appendChild(a); - a.href = "#" + headers[i].id - a.textContent = headers[i].textContent - } - else - { - var nowUl = document.createElement("ul"); - ul.appendChild(nowUl); - - for (var j = 0; j < level - 2; j++) { - const currentUl = document.createElement("ul"); - nowUl.appendChild(currentUl); - nowUl = currentUl; - } - - const currentLi = document.createElement("li"); - const a = document.createElement("a"); - nowUl.appendChild(currentLi); - currentLi.appendChild(a); - a.href = "#" + headers[i].id - a.textContent = headers[i].textContent - } - } - } + for (var j = 0; j < level - 2; j++) { + const currentUl = document.createElement("ul"); + nowUl.appendChild(currentUl); + nowUl = currentUl; + } + + const currentLi = document.createElement("li"); + const a = document.createElement("a"); + nowUl.appendChild(currentLi); + currentLi.appendChild(a); + a.href = "#" + headers[i].id + a.textContent = headers[i].textContent + } + } + } } @@ -22,6 +22,19 @@ body { background-color: var(--white-bg); color: var(--black-color-1); overflow: auto; + animation: fadein .5s; +} + +@keyframes fadein { + 0% { + opacity: 0; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } } /* width */ @@ -575,6 +588,7 @@ sup>sup { gap: 15px; justify-content: space-between; margin-right: 20px; + padding-left: 20px; } .button-group-container { @@ -634,6 +648,10 @@ sup>sup { background: linear-gradient(45deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); } +#img-dynamic-subject { + background-position: center; +} + #img-main { background-image: url(https://img-cdn.inc.com/image/upload/w_1920,h_1080,c_fill/images/panoramic/GettyImages-577674005_492115_zfpgiw.jpg); background-position: center; diff --git a/subject/index.html b/subject/index.html index 5441400..c63e47c 100644 --- a/subject/index.html +++ b/subject/index.html @@ -5,7 +5,6 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> - <link rel="icon" href="/assets/images/master.svg"> <title>Al Azhar 9th Grade Lesson Notes</title> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> @@ -21,28 +20,26 @@ <div id="console"></div> <div id="sidebar"> <div> - <a href="/index.html"> + <a href="/"> <img src="/assets/images/master.svg" alt="" class="sidebar-logo"> </a> - - <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> </div> <div> - <a href="/about/author.html" class="sidebar-link link">About the Author</a> - <a href="/about/school.html" class="sidebar-link link">About School</a> - <a href="/lessons" class="sidebar-link link">Lessons</a> + <a href="/about/author.html" class="sidebar-link link" id="link-author">About the Author</a> + <a href="/about/school.html" class="sidebar-link link" id="link-school">About School</a> + <a href="/lessons" class="sidebar-link link" id="link-lessons">Lessons</a> <hr class="divider"> <div id="toc"> - <h4>Table of Contents</h4> + <h4 id="toc-title">Table of Contents</h4> </div> </div> </div> <div class="banner-container" id="banner"> - <div class="banner-bg" id="img-supplies"></div> + <div class="banner-bg" id="img-dynamic-subject"></div> <div class="gradient-bg"></div> <div class="banner-text-container"> <h1 class="banner-text" id="title-banner">Subject Title</h1> @@ -50,6 +47,10 @@ </div> </div> + <div class="top-chips-container" id="chip-container"> + <div><a href="javascript:switchLang()" class="button" id="lang-switcher"><i class="fa-solid fa-language"></i> <span id="lang-switcher-text">Read in Indonesia</span></a></div> + </div> + <div id="main"> <section id="container"> <h1 id="bab1">Chapter 1 - Chapter Title</h1> @@ -70,6 +71,9 @@ </section> </div> + <script src="/scripts/global.js"></script> + <script src="/scripts/globalElements.js"></script> + <script src="/scripts/localStorage.js"></script> <script src="/scripts/toc.js"></script> <script src="/scripts/lesson.js"></script> <script src="/scripts/onload/subject.js"></script> diff --git a/subject/lesson/index.html b/subject/lesson/index.html index 9ca2b7b..b7b6d79 100644 --- a/subject/lesson/index.html +++ b/subject/lesson/index.html @@ -6,7 +6,6 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> - <link rel="icon" href="/assets/images/master.svg"> <title>Al Azhar 9th Grade Lesson Notes</title> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> @@ -29,27 +28,25 @@ <body> <div class="fixed-top-btn-container" id="topbtn"> <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a> - <a href="../" class="fixed-top-btn back-btn"><i class="fa-solid fa-chevron-left"></i></a> + <a href="../" class="fixed-top-btn back-btn" id="top-back-btn"><i class="fa-solid fa-chevron-left"></i></a> </div> <div id="console"></div> <div id="sidebar"> <div> - <a href="/index.html"> + <a href="/"> <img src="/assets/images/master.svg" alt="" class="sidebar-logo"> </a> - - <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> </div> <div> - <a href="/about/author.html" class="sidebar-link link">About the Author</a> - <a href="/about/school.html" class="sidebar-link link">About School</a> - <a href="/lessons" class="sidebar-link link">Lessons</a> + <a href="/about/author.html" class="sidebar-link link" id="link-author">About the Author</a> + <a href="/about/school.html" class="sidebar-link link" id="link-school">About School</a> + <a href="/lessons" class="sidebar-link link" id="link-lessons">Lessons</a> <hr class="divider"> <div id="toc"> - <h4>Table of Contents</h4> + <h4 id="toc-title">Table of Contents</h4> </div> </div> </div> @@ -64,6 +61,7 @@ </div> <div class="chip-container" id="chip-container"> + <div><a href="javascript:switchLang()" class="button" id="lang-switcher"><i class="fa-solid fa-language"></i> <span id="lang-switcher-text">Read in Indonesia</span></a></div> <div class="chip" id="chip-status"><span>0 = ?; 1 = ✅ Verified; 2 = X;</span></div> <div class="chip" id="chip-author"><span>Written by Fulan bin Fulan</span></div> <div class="chip" id="chip-grade"><span>Grade -2</span></div> @@ -85,10 +83,18 @@ </section> </div> + <script src="/scripts/global.js"></script> + <script src="/scripts/globalElements.js"></script> + <script src="/scripts/localStorage.js"></script> <script src="/scripts/toc.js"></script> <script src="/scripts/lesson.js"></script> <script src="/scripts/onload/lesson.js"></script> <script src="/scripts/sidebar.js"></script> + + <script> + var btn = document.getElementById("top-back-btn"); + btn.setAttribute("href", `../?id=${getUrlVars()['subject']}`) + </script> </body> </html> |
