setTheme(theme === "DARK" ? "DEFAULT" : "DARK")}
+ />
+ );
+}
+
+export default Settings;
diff --git a/src/components/pages/Abdest.js b/src/components/pages/Abdest.js
new file mode 100644
index 0000000..5e4ee23
--- /dev/null
+++ b/src/components/pages/Abdest.js
@@ -0,0 +1,135 @@
+import feelsGood from "../../files/feels.png";
+import feelsBad from "../../files/feelsbad.png";
+import { useEffect, useState } from "react";
+import abdestSound from "../../files/sound.m4a";
+import { Grid, Typography } from "@mui/material";
+
+function Abdest() {
+ const [abdest, setAbdest] = useState(localStorage.getItem("cd"));
+ const [timeLeft, setTimeLeft] = useState(localStorage.getItem("timeleft"));
+ const [minutes, setMinutes] = useState(0);
+ const [seconds, setSeconds] = useState(0);
+ var audio = new Audio(abdestSound);
+
+ const changeAbdestState = () => {
+ if (!abdest) {
+ audio.play();
+ setAbdest(true);
+ const currentTime = new Date().getTime();
+ setTimeLeft(currentTime + 300000);
+ setMinutes(5);
+ setSeconds(0);
+ }
+ };
+
+ useEffect(() => {
+ localStorage.setItem("cd", abdest);
+ localStorage.setItem("timeleft", timeLeft);
+ }, [abdest, timeLeft]);
+
+ useEffect(() => {
+ let timer;
+
+ if (abdest) {
+ const storedTimeLeft = localStorage.getItem("timeleft");
+ const currentTime = new Date().getTime();
+ if (storedTimeLeft && currentTime < storedTimeLeft) {
+ const timeDifference = Math.floor(
+ (storedTimeLeft - currentTime) / 1000
+ );
+ const updatedMinutes = Math.floor(timeDifference / 60);
+ const updatedSeconds = timeDifference % 60;
+ setMinutes(updatedMinutes);
+ setSeconds(updatedSeconds);
+ setTimeLeft(storedTimeLeft);
+ timer = setInterval(() => {
+ const currentTime = new Date().getTime();
+ if (currentTime >= storedTimeLeft) {
+ setAbdest(false);
+ setTimeLeft(null);
+ setMinutes(0);
+ setSeconds(0);
+ clearInterval(timer);
+ } else {
+ const timeDifference = Math.floor(
+ (storedTimeLeft - currentTime) / 1000
+ );
+ const updatedMinutes = Math.floor(timeDifference / 60);
+ const updatedSeconds = timeDifference % 60;
+ setMinutes(updatedMinutes);
+ setSeconds(updatedSeconds);
+ }
+ }, 1000);
+ } else {
+ setAbdest(false);
+ setTimeLeft(null);
+ setMinutes(0);
+ setSeconds(0);
+ localStorage.removeItem("cd");
+ localStorage.removeItem("timeleft");
+ }
+ }
+
+ return () => {
+ clearInterval(timer);
+ };
+ }, [abdest]);
+
+ return (
+
+
+ 
+
+
+ abdest almak için{" "}
+
+ tıkla
+
+
+
+
+ {abdest ? "ABDESTLENDİN" : "abdest almanın doğru adresi"}
+
+
+
+
+ {abdest && (
+
+ Abdestin geçerlilik süresi:{" "}
+ {minutes < 10 ? "0" + minutes : minutes}:
+ {seconds < 10 ? "0" + seconds : seconds}
+
+ )}
+
+
+
+ Site tamamen eğlence amacıyla hazırlanmıştır
+
+
+
+
+ );
+}
+
+export function QuickAbdest() {
+ return (
+ <>
+
+
+ );
+}
diff --git a/src/components/pages/AbdestBozan.js b/src/components/pages/AbdestBozan.js
new file mode 100644
index 0000000..9704d17
--- /dev/null
+++ b/src/components/pages/AbdestBozan.js
@@ -0,0 +1,31 @@
+import "./Texts.css";
+
+export function AbdestBozan() {
+ return (
+ <>
+ Abdesti Bozan Durumlar
+
+ Nisa Suresi, 43 ayetine göre sekerat (şuuru yerinde olmamak:
+ delilik/cinnet, esriklik/sarhoşluk, bayılmak-baygınlık, uyku-uyumak...)
+ durumu ile boşaltım organlarından çıkış olması durumu namaza dolayısıyla
+ da abdestin varlığına engeldir. Maide Suresi 6. ayetine göre namaz için
+ abdest ya da teyemmüm şarttır.
+
+
+ -
+ Boşaltım organlarından idrar, kan, meni, gaita (dışkı), yel gibi katı,
+ sıvı veya gaz çıkması,
+
+ -
+ Uyumak, delirmek, bayılmak, sarhoş olmak gibi idrak gücünün
+ kaybedildiği durumlar,
+
+ - Kanama,
+ - Cinsî münasebet,
+ - Ağız dolusu kusmak,
+ - Teyemmüm almış birinin su bulması,
+ - Yellenmek.
+
+
+ );
+}
diff --git a/src/components/pages/AbdestEngelli.js b/src/components/pages/AbdestEngelli.js
new file mode 100644
index 0000000..d316067
--- /dev/null
+++ b/src/components/pages/AbdestEngelli.js
@@ -0,0 +1,22 @@
+export function AbdestEngelli() {
+ return (
+ <>
+ Engelli abdesti
+
+ Normal abdest almasına engel bir durumu olan Müslüman'ın, rahatsızlığına
+ göre farklı yönlerden eksik kalan abdesttir.
+
+
+ Vücudunun belli yerlerini tıbbi sebeplerden yıkayamayan insanlar normal
+ abdest almaktan muhaf tutulur. Örnek olarak, kolu kırılan ve alçıya
+ alınan kişi abdestini alır; ancak kolunu yıkayamadığından sadece alçının
+ üstünü suyla mesh edebilir. O da zararlıysa, onu da yapmaz. Vücudunda
+ devamlı kanayan yara olan Müslümanlar da engelli abdesti alır. Buna
+ göre, normal abdest alırlar, fakat bu abdestle sadece tek vakit namaz
+ kılabilirler. Engelli abdesti alan Müslüman'ın, tam abdest alan
+ Müslüman'a cemaatle kılınan namazlarda imamlık yapması uygun
+ görülmemiştir.
+
+
+ );
+}
diff --git a/src/components/pages/AbdestEtimoloji.js b/src/components/pages/AbdestEtimoloji.js
new file mode 100644
index 0000000..e1cea6a
--- /dev/null
+++ b/src/components/pages/AbdestEtimoloji.js
@@ -0,0 +1,22 @@
+export function AbdestEtimiloji() {
+ return (
+ <>
+ Abdestin Etimolojisi
+
+ "Abdest" sözcüğü Türkçeye Selçuklular zamanında Farsça'dan
+ geçmiştir. Anlamı "su tutmak"tır. âb (su) ve dest (tutmak,
+ kavramak) kelimelerinin birleşiminden oluşmuştur. İran ve bazı diğer
+ Müslüman ülkeler ile İngilizce konuşan ülkelerde abdest yerine
+ "vudu" kelimesi kullanılır.
+
+
+ Abdest Kur'an' da gasil veya gusül olarak geçer. Bu sözcük, Arapça'da
+ "bir sıvıyı bir nesne üzerinden akıtmak, koku sürünmek"
+ anlamlarına gelir. Bazı hadisçiler ve fıkıhçılar vudû kelimesini abdest
+ anlamında kullanmakta ve gusül kelimesini boy abdesti için
+ kullanmaktadırlar. Kur'an'da boy abdesti için ıttıhar yani taharlanma
+ (temizlik) sözcüğü kullanılmaktadır.
+
+
+ );
+}
diff --git a/src/components/pages/AbdestFarz.js b/src/components/pages/AbdestFarz.js
new file mode 100644
index 0000000..66bf03f
--- /dev/null
+++ b/src/components/pages/AbdestFarz.js
@@ -0,0 +1,14 @@
+export function AbdestFarz() {
+ return (
+ <>
+ Abdestin Farzları
+ Sünni alimlere göre abdestin farzları dörttür:
+
+ - Başın dörtte birini meshetmek, yani ıslak elle sıvazlamak.
+ - Kolları (dirsekleriyle beraber) yıkamak.
+ - Yüzü yıkamak.
+ - Ayakları (topuklarıyla beraber) yıkamak.
+
+
+ );
+}
diff --git a/src/components/pages/AbdestHakkında.js b/src/components/pages/AbdestHakkında.js
new file mode 100644
index 0000000..76505f4
--- /dev/null
+++ b/src/components/pages/AbdestHakkında.js
@@ -0,0 +1,181 @@
+export function AbdestHakkinda() {
+ return (
+ <>
+ Abdest
+
+ Abdest, Müslümanların, namaz gibi belli ibadetleri yapabilmek için bir
+ düzen içerisinde bazı organları yıkayıp bazılarını mesh etme yoluyla
+ yaptıkları arınma ve temizliktir. Kur'ana göre her namazın yanında
+ bedensel temizlenme amacıyla belli organları yıkamak (gasil) ve
+ meshetmek (mesih) şeklinde anlatılır. Suyun abdeste uygun olması
+ önemlidir. Su abdeste tadı, bulanıklığı ve kokusunun olağan olması ile
+ uygun olmaktadır.
+
+ Etimolojisi
+
+ "Abdest" sözcüğü Türkçeye Selçuklular zamanında Farsça'dan
+ geçmiştir. Anlamı "su tutmak"tır. âb (su) ve dest (tutmak,
+ kavramak) kelimelerinin birleşiminden oluşmuştur. İran ve bazı diğer
+ Müslüman ülkeler ile İngilizce konuşan ülkelerde abdest yerine
+ "vudu" kelimesi kullanılır.
+
+
+ Abdest Kur'an' da gasil veya gusül olarak geçer. Bu sözcük, Arapça'da
+ "bir sıvıyı bir nesne üzerinden akıtmak, koku sürünmek"
+ anlamlarına gelir. Bazı hadisçiler ve fıkıhçılar vudû kelimesini abdest
+ anlamında kullanmakta ve gusül kelimesini boy abdesti için
+ kullanmaktadırlar. Kur'an'da boy abdesti için ıttıhar yani taharlanma
+ (temizlik) sözcüğü kullanılmaktadır.
+
+ Teyemmüm
+
+ Fakihlere (fıkıh alimi) göre namaz kılmak için abdest yerine bazı
+ durumlarda teyemmüm yapılabilir. Ayrıca teyemmüm, hastalık, yolculuk, su
+ bulmama/suyun olmaması veya erişilememesi gibi durumlarda boy abdesti
+ yerine de yapılır. Kur'an'da teyemmüm yapmak için türâb (toprak) sözcüğü
+ kullanılmaz, bunun yerine said sözcüğü kullanılır ki bu sözcük
+ "toz, toprak, taş vs." anlamına gelmektedir. Kullanıma uygun
+ su bulunduğu zaman bozulmaktadır.
+
+ Abdest Ayeti
+
+ Kur'anda; (Maide Suresi, 6), (Nisa suresi, 43), (Müddessir suresi, 4-5),
+ (Bakara suresi, 222), (Tevbe suresi, 108), (Vakıa suresi, 79)'da geçer.
+
+
+ Ayetin ayakları anlatan “ercüleküm” kelimesinin okunuşu kıraat
+ mezhepleri arasında ihtilaflı bir konudur. Kelime iki şekilde
+ okunabilir; ercüleküm şeklinde okunduğunda abdest alırken ayakların
+ yıkanması gerektiği anlaşılır, ercüliküm şeklinde okunmasında ise
+ ayakların yıkanmıyacağı, sadece meshedileceği anlaşılır.
+
+
+ Ayette kullanılan vücûhe küm (vecihleriniz) ibaresi, başın ön yanı için
+ kullanılır, bu yüzden başta saçların döküldüğü ön kısım, yüz, boyun altı
+ demektir. Baş sıvazlanırken, ayette sınır koymadığı için, baş adlı
+ organın başın ön yanı dışındaki her yanı, kulaklar, ense, boyun
+ sıvazlanır.
+
+ Abdestin hükümleri
+
+ Fıkıh alimleri, Kur'an ve Sünneti referans göstererek abdestin
+ hükümlerini (farz, sünnet, mendup, müstehab, mekruh vs.) şunlar olarak
+ belirtirler:
+
+ Abdestin farzları
+ Sünni alimlere göre abdestin farzları dörttür:
+
+ - Başın dörtte birini meshetmek, yani ıslak elle sıvazlamak.
+ - Kolları (dirsekleriyle beraber) yıkamak.
+ - Yüzü yıkamak.
+ - Ayakları (topuklarıyla beraber) yıkamak.
+
+
+ Şia alimlerden bazıları "ayaklara meshetmenin" abdestin
+ farzlarından olduğuna, bazı alimler meshin farz, yıkamanın sünnet
+ olduğuna, diğer bir kısmı ise her iki uygulamadan birisini yerine
+ getirmenin yeterli olacağına inanmışlardır.
+
+ Abdestin sünnetleri
+
+ - Niyet etmek
+ - Eûzü ve Besmele ile başlamak
+ - Evvela ellerini bileklerine kadar yıkamak
+ - Misvak kullanmak
+ - Bir âzâ kurumadan diğerini yıkamak
+ - Ağzına ve burnuna üç kere su vermek
+ - Kulağını meshetmek
+ -
+ Parmaklarını hilâllemek; yâni bir elin parmaklarını diğer elin
+ parmakları arasına geçirip çekmek
+
+ - Âzâları üçer kere yıkamak
+ - Başını kaplama meshetmek
+ -
+ Abdesti tertip üzere almak; yâni abdest âzâlarını sırasıyla yıkamak
+
+ - El ve ayaklarını yıkamakta parmak uçlarından başlamak
+ -
+ Abdest alırken okunacak birçok duâ olmakla beraber evlâ olan bütün
+ âzâlarını yıkarken besmele çekip şehâdet getirmektir
+
+
+ Abdestin mekruhları
+
+ - Sağ el ile sümkürmek
+ - Abdest âzâlarından birini üç defadan az veya fazla yıkamak
+ - Suyu yüzüne çarpmak
+ - Güneşte ısınmış su ile abdest almak
+ - Suyu çok az kullanmak veya israf etmek
+ - Abdest alırken konuşmak
+ - Sünnetlerini terk etmek
+
+ Abdesti bozan durumlar
+
+ Nisa Suresi, 43 ayetine göre sekerat (şuuru yerinde olmamak:
+ delilik/cinnet, esriklik/sarhoşluk, bayılmak-baygınlık, uyku-uyumak...)
+ durumu ile boşaltım organlarından çıkış olması durumu namaza dolayısıyla
+ da abdestin varlığına engeldir. Maide Suresi 6. ayetine göre namaz için
+ abdest ya da teyemmüm şarttır.
+
+
+ -
+ Boşaltım organlarından idrar, kan, meni, gaita (dışkı), yel gibi katı,
+ sıvı veya gaz çıkması,
+
+ -
+ Uyumak, delirmek, bayılmak, sarhoş olmak gibi idrak gücünün
+ kaybedildiği durumlar,
+
+ - Kanama,
+ - Cinsî münasebet,
+ - Ağız dolusu kusmak,
+ - Teyemmüm almış birinin su bulması,
+ - Yellenmek.
+
+ Abdest nasıl alınır
+
+ - Eller bileklere kadar Üç kere oğusturularak yıkanır.
+ -
+ Sağ elle, ilkin ağza, sonra buruna olmak üzere, üçer kere su alınır.
+
+ - Yüz, Üç kere yıkanır.
+ -
+ Dirseği biraz aşacak şekilde önce sağ kol, sonra sol kol üçer kere
+ yıkanır.
+
+ -
+ Sağ elin içi ıslatılıp, alından enseye doğru sıvazlanarak baş mesh
+ edilir.
+
+ -
+ Islak elin başparmağıyla, serçeparmağıyla sıvazlanarak kulaklar mesh
+ edilir.
+
+ -
+ Islak parmakların tersiyle, ense ortasından yanlara doğru boyun da
+ mesh edilir.
+
+ -
+ Topuğu biraz geçmek üzere, sol elle ilkin sağ, sonra sol ayak yıkanır.
+
+
+ Engelli abdesti
+
+ Normal abdest almasına engel bir durumu olan Müslüman'ın, rahatsızlığına
+ göre farklı yönlerden eksik kalan abdesttir.
+
+
+ Vücudunun belli yerlerini tıbbi sebeplerden yıkayamayan insanlar normal
+ abdest almaktan muhaf tutulur. Örnek olarak, kolu kırılan ve alçıya
+ alınan kişi abdestini alır; ancak kolunu yıkayamadığından sadece alçının
+ üstünü suyla mesh edebilir. O da zararlıysa, onu da yapmaz. Vücudunda
+ devamlı kanayan yara olan Müslümanlar da engelli abdesti alır. Buna
+ göre, normal abdest alırlar, fakat bu abdestle sadece tek vakit namaz
+ kılabilirler. Engelli abdesti alan Müslüman'ın, tam abdest alan
+ Müslüman'a cemaatle kılınan namazlarda imamlık yapması uygun
+ görülmemiştir.
+
+
+ );
+}
diff --git a/src/components/pages/AbdestHükümleri.js b/src/components/pages/AbdestHükümleri.js
new file mode 100644
index 0000000..f30a4d9
--- /dev/null
+++ b/src/components/pages/AbdestHükümleri.js
@@ -0,0 +1,26 @@
+export function AbdestHukum() {
+ return (
+ <>
+ Abdestin Hükümleri
+
+ Fıkıh alimleri, Kur'an ve Sünneti referans göstererek abdestin
+ hükümlerini (farz, sünnet, mendup, müstehab, mekruh vs.) şunlar olarak
+ belirtirler:
+
+ Abdestin farzları
+ Sünni alimlere göre abdestin farzları dörttür:
+
+ - Başın dörtte birini meshetmek, yani ıslak elle sıvazlamak.
+ - Kolları (dirsekleriyle beraber) yıkamak.
+ - Yüzü yıkamak.
+ - Ayakları (topuklarıyla beraber) yıkamak.
+
+
+ Şia alimlerden bazıları "ayaklara meshetmenin" abdestin
+ farzlarından olduğuna, bazı alimler meshin farz, yıkamanın sünnet
+ olduğuna, diğer bir kısmı ise her iki uygulamadan birisini yerine
+ getirmenin yeterli olacağına inanmışlardır.
+
+
+ );
+}
diff --git a/src/components/pages/AbdestMekruh.js b/src/components/pages/AbdestMekruh.js
new file mode 100644
index 0000000..85c0edf
--- /dev/null
+++ b/src/components/pages/AbdestMekruh.js
@@ -0,0 +1,16 @@
+export function AbdestMekruh() {
+ return (
+ <>
+ Abdestin Mekruhları
+
+ - Sağ el ile sümkürmek
+ - Abdest âzâlarından birini üç defadan az veya fazla yıkamak
+ - Suyu yüzüne çarpmak
+ - Güneşte ısınmış su ile abdest almak
+ - Suyu çok az kullanmak veya israf etmek
+ - Abdest alırken konuşmak
+ - Sünnetlerini terk etmek
+
+
+ );
+}
diff --git a/src/components/pages/AbdestNasılAlınır.js b/src/components/pages/AbdestNasılAlınır.js
new file mode 100644
index 0000000..b990625
--- /dev/null
+++ b/src/components/pages/AbdestNasılAlınır.js
@@ -0,0 +1,49 @@
+export function AbdestNasil() {
+ return (
+ <>
+ Abdest Nasıl Alınır?
+
+ - Eller bileklere kadar Üç kere oğusturularak yıkanır.
+ -
+ Sağ elle, ilkin ağza, sonra buruna olmak üzere, üçer kere su alınır.
+
+ - Yüz, Üç kere yıkanır.
+ -
+ Dirseği biraz aşacak şekilde önce sağ kol, sonra sol kol üçer kere
+ yıkanır.
+
+ -
+ Sağ elin içi ıslatılıp, alından enseye doğru sıvazlanarak baş mesh
+ edilir.
+
+ -
+ Islak elin başparmağıyla, serçeparmağıyla sıvazlanarak kulaklar mesh
+ edilir.
+
+ -
+ Islak parmakların tersiyle, ense ortasından yanlara doğru boyun da
+ mesh edilir.
+
+ -
+ Topuğu biraz geçmek üzere, sol elle ilkin sağ, sonra sol ayak yıkanır.
+
+
+ Engelli Abdesti Nasıl Alınır?
+
+ Normal abdest almasına engel bir durumu olan Müslüman'ın, rahatsızlığına
+ göre farklı yönlerden eksik kalan abdesttir.
+
+
+ Vücudunun belli yerlerini tıbbi sebeplerden yıkayamayan insanlar normal
+ abdest almaktan muhaf tutulur. Örnek olarak, kolu kırılan ve alçıya
+ alınan kişi abdestini alır; ancak kolunu yıkayamadığından sadece alçının
+ üstünü suyla mesh edebilir. O da zararlıysa, onu da yapmaz. Vücudunda
+ devamlı kanayan yara olan Müslümanlar da engelli abdesti alır. Buna
+ göre, normal abdest alırlar, fakat bu abdestle sadece tek vakit namaz
+ kılabilirler. Engelli abdesti alan Müslüman'ın, tam abdest alan
+ Müslüman'a cemaatle kılınan namazlarda imamlık yapması uygun
+ görülmemiştir.
+
+
+ );
+}
diff --git a/src/components/pages/AbdestSunnet.js b/src/components/pages/AbdestSunnet.js
new file mode 100644
index 0000000..102b2c9
--- /dev/null
+++ b/src/components/pages/AbdestSunnet.js
@@ -0,0 +1,30 @@
+export function AbdestSunnet() {
+ return (
+ <>
+ Abdestin Sünnetleri
+
+ - Niyet etmek
+ - Eûzü ve Besmele ile başlamak
+ - Evvela ellerini bileklerine kadar yıkamak
+ - Misvak kullanmak
+ - Bir âzâ kurumadan diğerini yıkamak
+ - Ağzına ve burnuna üç kere su vermek
+ - Kulağını meshetmek
+ -
+ Parmaklarını hilâllemek; yâni bir elin parmaklarını diğer elin
+ parmakları arasına geçirip çekmek
+
+ - Âzâları üçer kere yıkamak
+ - Başını kaplama meshetmek
+ -
+ Abdesti tertip üzere almak; yâni abdest âzâlarını sırasıyla yıkamak
+
+ - El ve ayaklarını yıkamakta parmak uçlarından başlamak
+ -
+ Abdest alırken okunacak birçok duâ olmakla beraber evlâ olan bütün
+ âzâlarını yıkarken besmele çekip şehâdet getirmektir
+
+
+
+ );
+}
diff --git a/src/components/pages/AbdestTeyemmüm.js b/src/components/pages/AbdestTeyemmüm.js
new file mode 100644
index 0000000..a1a032c
--- /dev/null
+++ b/src/components/pages/AbdestTeyemmüm.js
@@ -0,0 +1,16 @@
+export function AbdestTeyemmum() {
+ return (
+ <>
+ Teyemmüm
+
+ Fakihlere (fıkıh alimi) göre namaz kılmak için abdest yerine bazı
+ durumlarda teyemmüm yapılabilir. Ayrıca teyemmüm, hastalık, yolculuk, su
+ bulmama/suyun olmaması veya erişilememesi gibi durumlarda boy abdesti
+ yerine de yapılır. Kur'an'da teyemmüm yapmak için türâb (toprak) sözcüğü
+ kullanılmaz, bunun yerine said sözcüğü kullanılır ki bu sözcük
+ "toz, toprak, taş vs." anlamına gelmektedir. Kullanıma uygun
+ su bulunduğu zaman bozulmaktadır.
+
+
+ );
+}
diff --git a/src/components/pages/Texts.css b/src/components/pages/Texts.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 0000000..da312be
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,5 @@
+export const THEMES = {
+ DEFAULT: "DEFAULT",
+ GREEN: "GREEN",
+ DARK: "DARK",
+};
diff --git a/src/contexts/Themes.js b/src/contexts/Themes.js
new file mode 100644
index 0000000..67646c0
--- /dev/null
+++ b/src/contexts/Themes.js
@@ -0,0 +1,34 @@
+import React, { useEffect, useState, createContext } from "react";
+import { THEMES } from "../constants";
+
+const initialState = {
+ theme: THEMES.DEFAULT,
+ setTheme: (theme) => {},
+};
+
+const ThemeContext = createContext(initialState);
+
+function ThemeProvider({ children }) {
+ const [theme, setTheme] = useState(initialState.theme);
+
+ useEffect(() => {
+ const storedTheme = localStorage.getItem("theme");
+
+ if (storedTheme) {
+ setTheme(JSON.parse(storedTheme));
+ }
+ }, []);
+
+ const updateTheme = (theme) => {
+ localStorage.setItem("theme", JSON.stringify(theme));
+ setTheme(theme);
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export { ThemeProvider, ThemeContext };
diff --git a/src/files/feels.png b/src/files/feels.png
new file mode 100644
index 0000000..dee58ed
Binary files /dev/null and b/src/files/feels.png differ
diff --git a/src/files/feelsbad.png b/src/files/feelsbad.png
new file mode 100644
index 0000000..8e0a42d
Binary files /dev/null and b/src/files/feelsbad.png differ
diff --git a/src/files/sound.m4a b/src/files/sound.m4a
new file mode 100644
index 0000000..d50336a
Binary files /dev/null and b/src/files/sound.m4a differ
diff --git a/src/hooks/useTheme.js b/src/hooks/useTheme.js
new file mode 100644
index 0000000..d78aa18
--- /dev/null
+++ b/src/hooks/useTheme.js
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { ThemeContext } from "../contexts/Themes";
+
+const useTheme = () => useContext(ThemeContext);
+
+export default useTheme;
diff --git a/src/index.js b/src/index.js
index d563c0f..66d7e67 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "@fontsource/poppins";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
+import { ThemeProvider } from "./contexts/Themes";
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
-
-
-
+
+
+
+
+
);
// If you want to start measuring performance in your app, pass a function
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 0000000..1949a48
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,30 @@
+import { QuickAbdest } from "./components/pages/Abdest";
+import { AbdestBozan } from "./components/pages/AbdestBozan";
+import { AbdestEngelli } from "./components/pages/AbdestEngelli";
+import { AbdestEtimiloji } from "./components/pages/AbdestEtimoloji";
+import { AbdestFarz } from "./components/pages/AbdestFarz";
+import { AbdestHakkinda } from "./components/pages/AbdestHakkında";
+import { AbdestHukum } from "./components/pages/AbdestHükümleri";
+import { AbdestMekruh } from "./components/pages/AbdestMekruh";
+import { AbdestNasil } from "./components/pages/AbdestNasılAlınır";
+import { AbdestSunnet } from "./components/pages/AbdestSunnet";
+import { AbdestTeyemmum } from "./components/pages/AbdestTeyemmüm";
+
+export const routes = [
+ {
+ path: "/",
+ children: [
+ { path: "", element: },
+ { path: "abdesthakkinda", element: },
+ { path: "abdestnasilalinir", element: },
+ { path: "abdestetimoloji", element: },
+ { path: "abdestinhukumleri", element: },
+ { path: "abdestinfarzlari", element: },
+ { path: "abdestinsunnetleri", element: },
+ { path: "abdestinmehruklari", element: },
+ { path: "abdestbozandurumlar", element: },
+ { path: "engelliabdesti", element: },
+ { path: "teyemmumabdesti", element: },
+ ],
+ },
+];
diff --git a/src/theme/breakpoints.js b/src/theme/breakpoints.js
new file mode 100644
index 0000000..45ff681
--- /dev/null
+++ b/src/theme/breakpoints.js
@@ -0,0 +1,11 @@
+const breakpoints = {
+ values: {
+ xs: 0,
+ sm: 600,
+ md: 960,
+ lg: 1280,
+ xl: 1440,
+ },
+};
+
+export default breakpoints;
diff --git a/src/theme/components.js b/src/theme/components.js
new file mode 100644
index 0000000..7f79470
--- /dev/null
+++ b/src/theme/components.js
@@ -0,0 +1,138 @@
+const components = {
+ MuiButtonBase: {
+ defaultProps: {
+ disableRipple: true,
+ },
+ },
+ MuiLink: {
+ defaultProps: {
+ underline: "hover",
+ },
+ },
+ MuiCardHeader: {
+ defaultProps: {
+ titleTypographyProps: {
+ variant: "h6",
+ },
+ },
+ styleOverrides: {
+ action: {
+ marginTop: "-4px",
+ marginRight: "-4px",
+ },
+ },
+ },
+ MuiCard: {
+ styleOverrides: {
+ root: {
+ borderRadius: "6px",
+ boxShadow:
+ "rgba(50, 50, 93, 0.025) 0px 2px 5px -1px, rgba(0, 0, 0, 0.05) 0px 1px 3px -1px",
+ backgroundImage: "none",
+ },
+ },
+ },
+ MuiPaper: {
+ styleOverrides: {
+ root: {
+ backgroundImage: "none",
+ },
+ },
+ },
+ MuiPickersDay: {
+ styleOverrides: {
+ day: {
+ fontWeight: "300",
+ },
+ },
+ },
+ MuiPickersYear: {
+ styleOverrides: {
+ root: {
+ height: "64px",
+ },
+ },
+ },
+ MuiPickersCalendar: {
+ styleOverrides: {
+ transitionContainer: {
+ marginTop: "6px",
+ },
+ },
+ },
+ MuiPickersCalendarHeader: {
+ styleOverrides: {
+ iconButton: {
+ backgroundColor: "transparent",
+ "& > *": {
+ backgroundColor: "transparent",
+ },
+ },
+ switchHeader: {
+ marginTop: "2px",
+ marginBottom: "4px",
+ },
+ },
+ },
+ MuiPickersClock: {
+ styleOverrides: {
+ container: {
+ margin: `32px 0 4px`,
+ },
+ },
+ },
+ MuiPickersClockNumber: {
+ styleOverrides: {
+ clockNumber: {
+ left: `calc(50% - 16px)`,
+ width: "32px",
+ height: "32px",
+ },
+ },
+ },
+ MuiPickerDTHeader: {
+ styleOverrides: {
+ dateHeader: {
+ "& h4": {
+ fontSize: "2.125rem",
+ fontWeight: 400,
+ },
+ },
+ timeHeader: {
+ "& h3": {
+ fontSize: "3rem",
+ fontWeight: 400,
+ },
+ },
+ },
+ },
+ MuiPickersTimePicker: {
+ styleOverrides: {
+ hourMinuteLabel: {
+ "& h2": {
+ fontSize: "3.75rem",
+ fontWeight: 300,
+ },
+ },
+ },
+ },
+ MuiPickersToolbar: {
+ styleOverrides: {
+ toolbar: {
+ "& h4": {
+ fontSize: "2.125rem",
+ fontWeight: 400,
+ },
+ },
+ },
+ },
+ MuiChip: {
+ styleOverrides: {
+ root: {
+ borderRadius: "6px",
+ },
+ },
+ },
+};
+
+export default components;
diff --git a/src/theme/index.js b/src/theme/index.js
new file mode 100644
index 0000000..22183c6
--- /dev/null
+++ b/src/theme/index.js
@@ -0,0 +1,35 @@
+import "@mui/lab/themeAugmentation";
+import { createTheme as createMuiTheme } from "@mui/material/styles";
+import variants from "./variants";
+import typography from "./typography";
+import breakpoints from "./breakpoints";
+import components from "./components";
+import shadows from "./shadows";
+
+const createTheme = (name) => {
+ let themeConfig = variants.find((variant) => variant.name === name);
+
+ if (!themeConfig) {
+ console.warn(new Error(`The theme ${name} is not valid`));
+ themeConfig = variants[0];
+ }
+
+ return createMuiTheme(
+ {
+ spacing: 4,
+ breakpoints: breakpoints,
+ components: components,
+ typography: typography,
+ shadows: shadows,
+ palette: themeConfig.palette,
+ },
+ {
+ name: themeConfig.name,
+ header: themeConfig.header,
+ footer: themeConfig.footer,
+ sidebar: themeConfig.sidebar,
+ }
+ );
+};
+
+export default createTheme;
diff --git a/src/theme/shadows.js b/src/theme/shadows.js
new file mode 100644
index 0000000..165f75d
--- /dev/null
+++ b/src/theme/shadows.js
@@ -0,0 +1,33 @@
+function createShadow() {
+ return `box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);`;
+}
+
+const shadows = [
+ "none",
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+ createShadow(),
+];
+
+export default shadows;
diff --git a/src/theme/typography.js b/src/theme/typography.js
new file mode 100644
index 0000000..71050ec
--- /dev/null
+++ b/src/theme/typography.js
@@ -0,0 +1,58 @@
+const typography = {
+ fontFamily: [
+ "Inter",
+ "-apple-system",
+ "BlinkMacSystemFont",
+ '"Segoe UI"',
+ "Roboto",
+ '"Helvetica Neue"',
+ "Arial",
+ "sans-serif",
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ ].join(","),
+ fontSize: 13,
+ fontWeightLight: 300,
+ fontWeightRegular: 400,
+ fontWeightMedium: 500,
+ fontWeightBold: 600,
+ h1: {
+ fontSize: "2rem",
+ fontWeight: 600,
+ lineHeight: 1.25,
+ },
+ h2: {
+ fontSize: "1.75rem",
+ fontWeight: 600,
+ lineHeight: 1.25,
+ },
+ h3: {
+ fontSize: "1.5rem",
+ fontWeight: 600,
+ lineHeight: 1.25,
+ },
+ h4: {
+ fontSize: "1.125rem",
+ fontWeight: 500,
+ lineHeight: 1.25,
+ },
+ h5: {
+ fontSize: "1.0625rem",
+ fontWeight: 500,
+ lineHeight: 1.25,
+ },
+ h6: {
+ fontSize: "1rem",
+ fontWeight: 500,
+ lineHeight: 1.25,
+ },
+ body1: {
+ fontSize: 13,
+ },
+ button: {
+ textTransform: "none",
+ },
+};
+
+export default typography;
diff --git a/src/theme/variants.js b/src/theme/variants.js
new file mode 100644
index 0000000..0706e72
--- /dev/null
+++ b/src/theme/variants.js
@@ -0,0 +1,134 @@
+import merge from "deepmerge";
+import { green, grey } from "@mui/material/colors";
+import { THEMES } from "../constants";
+
+const customBlue = {
+ 50: "#e9ebf0",
+ 100: "#cbced4",
+ 200: "#a4a9b3",
+ 300: "#858b94",
+ 400: "#6a6f76",
+ 500: "#5c6066",
+ 600: "#3c3f43",
+ 700: "#24441c",
+ 800: "#1a1d24",
+ 900: "#0f131a ",
+};
+
+const defaultVariant = {
+ name: THEMES.DEFAULT,
+ palette: {
+ mode: "light",
+ primary: {
+ main: customBlue[700],
+ contrastText: "#FFF",
+ },
+ secondary: {
+ main: customBlue[500],
+ contrastText: "#FFF",
+ },
+ background: {
+ paper: customBlue[700],
+ contrastText: "#FFF",
+ },
+ },
+ header: {
+ color: grey[500],
+ background: "#FFF",
+ search: {
+ color: grey[800],
+ },
+ indicator: {
+ background: customBlue[600],
+ },
+ },
+ footer: {
+ color: grey[500],
+ background: "#FFF",
+ },
+ sidebar: {
+ color: grey[200],
+ background: "#233044",
+ header: {
+ color: grey[200],
+ background: "#233044",
+ brand: {
+ color: customBlue[500],
+ },
+ },
+ footer: {
+ color: grey[200],
+ background: "#1E2A38",
+ online: {
+ background: green[500],
+ },
+ },
+ badge: {
+ color: "#FFF",
+ background: customBlue[500],
+ },
+ },
+};
+
+const darkVariant = merge(defaultVariant, {
+ name: THEMES.DARK,
+ palette: {
+ mode: "dark",
+ primary: {
+ main: customBlue[400],
+ contrastText: "#FFF",
+ },
+ background: {
+ default: customBlue[800],
+ paper: customBlue[900],
+ },
+ text: {
+ primary: "rgba(255, 255, 255, 0.95)",
+ secondary: "rgba(255, 255, 255, 0.5)",
+ },
+ },
+ header: {
+ color: grey[300],
+ background: "#1B2635",
+ search: {
+ color: grey[200],
+ },
+ },
+ footer: {
+ color: grey[300],
+ background: "#233044",
+ },
+});
+
+const variants = [defaultVariant, darkVariant];
+
+export default variants;
+
+/**
+ * @typedef {object} VariantType
+ * @property {string} name
+ * @property {object} palette
+ * @property {MainContrastTextType} palette.primary
+ * @property {MainContrastTextType} palette.secondary
+ * @property {ColorBgType} palette.background
+ * @property {ColorBgType} header
+ * @property {object} header.search
+ * @property {ColorBgType} header.indicator
+ * @property {ColorBgType} footer
+ * @property {ColorBgType} sidebar
+ * @property {ColorBgType} sidebar.header
+ * @property {ColorBgType} sidebar.footer
+ * @property {ColorBgType} sidebar.badge
+ */
+
+/**
+ * @typedef {object} MainContrastTextType
+ * @property {string} main
+ * @property {string} contrastText
+ */
+
+/**
+ * @typedef {object} ColorBgType
+ * @property {string} color
+ * @property {string} background
+ */