change compiled version with react js

This commit is contained in:
Aliberk Sandıkçı 2024-12-11 19:52:06 +03:00
parent 0dfe351c2a
commit 5f55b68836
Signed by: asandikci
GPG key ID: A3B47D76845BEDF3
39 changed files with 1373 additions and 666 deletions

16
App.js Normal file
View file

@ -0,0 +1,16 @@
import Home from "./components/Home";
import { ThemeProvider as MuiThemeProvider } from "@mui/material";
import createTheme from "./theme";
import "./App.css";
import useTheme from "./hooks/useTheme";
function App() {
const { theme } = useTheme();
return (
<MuiThemeProvider theme={createTheme(theme)}>
<Home />
</MuiThemeProvider>
);
}
export default App;

View file

@ -1,3 +1,12 @@
# quickabdest
quickabdest.com sitesinin değiştirilmiş versiyonudur
<!--
değişiklikler:
- reklamlar kaldırıldı
- sitenin asıl sahibinin emekleri üzerinden maddi gelir kazanmak istemiyorum !
- abdestli kalma süresi 1 saate çıkarıldı !
- sürekli ses dosyası indirme ve fazla internet harcama problemi çözüldü !
-->

78
components/Home.js Normal file
View file

@ -0,0 +1,78 @@
import {
CssBaseline,
Dialog,
DialogContent,
DialogTitle,
Grid,
Paper as MuiPaper,
Typography,
} from "@mui/material";
import NavMenu from "./Menu.js";
import { useRoutes } from "react-router-dom/dist";
import { routes } from "../routes";
import React from "react";
import styled from "@emotion/styled";
import { spacing } from "@mui/system";
import "./pages/Texts.css";
import { useDetectAdBlock } from "adblock-detect-react";
import BlockIcon from "@mui/icons-material/Block";
// import Social from "./Social";
const Paper = styled(MuiPaper)(spacing);
const AppContent = styled.div`
flex: 1;
display: flex;
flex-direction: column;
max-width: 100%;
`;
const MainContent = styled(Paper)`
flex: 1;
background: ${(props) => props.theme.palette.background.default};
margin: 20px 20px;
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
flex: none;
}
.MuiPaper-root .MuiPaper-root {
box-shadow: none;
}
`;
export default function Home() {
const content = useRoutes(routes);
const adBlockDetected = useDetectAdBlock();
return (
<React.Fragment>
<CssBaseline />
<AppContent>
<NavMenu />
{/* <Social /> */}
<Grid
item
sx={{
marginLeft: { xs: 0, lg: 45 },
marginRight: { xs: 0, lg: 45 },
overflow: "hidden",
}}>
<Dialog open={adBlockDetected}>
<DialogTitle align="center">
<Typography variant="h1">
<BlockIcon color="error" />
Reklam Engelleyici Tespit Edildi!
<BlockIcon color="error" />
</Typography>
</DialogTitle>
<DialogContent>
<Typography variant="h4" align="center">
Lütfen reklam engelleyicinizi kapatıp sayfayı yenileyin.
</Typography>
</DialogContent>
</Dialog>
<MainContent>{content}</MainContent>
</Grid>
</AppContent>
</React.Fragment>
);
}

143
components/Menu.js Normal file
View file

@ -0,0 +1,143 @@
import * as React from "react";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Menu from "@mui/material/Menu";
import MenuIcon from "@mui/icons-material/Menu";
import Container from "@mui/material/Container";
import MenuItem from "@mui/material/MenuItem";
import { useNavigate } from "react-router-dom";
import Settings from "./Settings";
import { AppBar, Button, Grid, Toolbar } from "@mui/material";
const pages = [
{ name: "Abdest Hakkında", href: "/abdesthakkinda" },
{ name: "Abdest Nasıl Alınır?", href: "/abdestnasilalinir" },
{ name: "Abdestin Etimolojisi", href: "/abdestetimoloji" },
{ name: "Abdestin Hükümleri", href: "/abdestinhukumleri" },
{ name: "Abdestin Farzları", href: "/abdestinfarzlari" },
{ name: "Abdestin Sünnetleri", href: "/abdestinsunnetleri" },
{ name: "Abdestin Mehrukları", href: "/abdestinmehruklari" },
{ name: "Abdesti Bozan Durumlar", href: "/abdestbozandurumlar" },
{ name: "Engelli Abdesti Nasıl Alınır?", href: "/engelliabdesti" },
{
name: "Teyemmüm Abdesti Nasıl Alınır?",
href: "/teyemmumabdesti",
},
];
function NavMenu() {
const [anchorElNav, setAnchorElNav] = React.useState(null);
const navigate = useNavigate();
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleCloseNavMenu = (href) => {
setAnchorElNav(null);
if (href) {
navigate(href);
}
};
return (
<React.Fragment>
<AppBar position="sticky" sx={{ zIndex: 99 }}>
<Container maxWidth="xxl">
<Toolbar disableGutters>
<Grid
item
width={300}
textAlign={"center"}
sx={{
display: { xs: "none", lg: "block" },
}}>
<Typography
variant="h6"
noWrap
component="a"
href="/"
sx={{
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}>
quickabdest
</Typography>
</Grid>
<Box sx={{ flexGrow: 1, display: { xs: "flex", lg: "none" } }}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit">
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "left",
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: "block", lg: "none" },
}}>
{pages.map((page) => (
<MenuItem
key={page.name}
onClick={() => handleCloseNavMenu(page.href)}>
<Typography textAlign="center">{page.name}</Typography>
</MenuItem>
))}
</Menu>
</Box>
<Typography
variant="h5"
noWrap
component="a"
href="/"
sx={{
mr: 2,
display: { xs: "flex", lg: "none" },
flexGrow: 1,
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".5rem",
color: "inherit",
textDecoration: "none",
}}>
quickabdest
</Typography>
<Box sx={{ flexGrow: 4, display: { xs: "none", lg: "flex" } }}>
{pages.map((page) => (
<Button
key={page.name}
onClick={() => handleCloseNavMenu(page.href)}
sx={{ color: "white", display: "block" }}
noWrap>
{page.name}
</Button>
))}
</Box>
<Settings />
</Toolbar>
</Container>
</AppBar>
</React.Fragment>
);
}
export default NavMenu;

66
components/Settings.js Normal file
View file

@ -0,0 +1,66 @@
import styled from "@emotion/styled";
import { Switch } from "@mui/material";
import useTheme from "../hooks/useTheme";
const MaterialUISwitch = styled(Switch)(({ theme }) => ({
width: 50,
height: 25,
padding: 7,
"& .MuiSwitch-switchBase": {
margin: 1,
padding: 0,
transform: "translateX(6px)",
"&.Mui-checked": {
color: "#fff",
transform: "translateX(22px)",
"& .MuiSwitch-thumb:before": {
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
"#fff"
)}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
},
"& + .MuiSwitch-track": {
opacity: 1,
backgroundColor: theme.palette.mode === "DARK" ? "#8796A5" : "#aab4be",
},
},
},
"& .MuiSwitch-thumb": {
backgroundColor: theme.palette.mode === "DARK" ? "#003892" : "#001e3c",
width: 22,
height: 22,
"&:before": {
content: "''",
position: "absolute",
width: "100%",
height: "100%",
left: 0,
top: 0,
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
"#fff"
)}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
},
},
"& .MuiSwitch-track": {
opacity: 1,
backgroundColor: theme.palette.mode === "DARK" ? "#8796A5" : "#aab4be",
borderRadius: 20 / 2,
},
}));
function Settings() {
const { setTheme, theme } = useTheme(
localStorage.getItem("theme") || "DEFAULT"
);
return (
<MaterialUISwitch
sx={{ m: 1 }}
defaultValue={theme}
defaultChecked
onChange={() => setTheme(theme === "DARK" ? "DEFAULT" : "DARK")}
/>
);
}
export default Settings;

135
components/pages/Abdest.js Normal file
View file

@ -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 (
<Grid container textAlign="center">
<Grid item onClick={changeAbdestState} xs={12} mt={7}>
<img
src={abdest ? feelsGood : feelsBad}
alt=""
height={"auto"}
style={{ width: "clamp(12.5rem, 45%, 50rem)" }}
/>
</Grid>
<Grid
item
xs={12}
m={2}
sx={{ display: abdest ? "none" : "block", fontSize: "2rem" }}>
abdest almak için{" "}
<Typography
component="a"
style={{ color: "red", fontSize: "2rem" }}
onClick={changeAbdestState}>
tıkla
</Typography>
</Grid>
<Grid item xs={12} m={2}>
<Typography
component="h2"
style={{ fontSize: "2rem" }}
className={abdest ? "abdestTrue" : "abdestFalse"}>
{abdest ? "ABDESTLENDİN" : "abdest almanın doğru adresi"}
</Typography>
</Grid>
<Grid container>
<Grid item xs={12} m={2}>
{abdest && (
<Typography component="h2" style={{ fontSize: "2rem" }}>
Abdestin geçerlilik süresi:{" "}
{minutes < 10 ? "0" + minutes : minutes}:
{seconds < 10 ? "0" + seconds : seconds}
</Typography>
)}
</Grid>
<Grid item xs={12} m={2}>
<Typography variant="h5">
Site tamamen eğlence amacıyla hazırlanmıştır
</Typography>
</Grid>
</Grid>
</Grid>
);
}
export function QuickAbdest() {
return (
<>
<Abdest />
</>
);
}

View file

@ -0,0 +1,31 @@
import "./Texts.css";
export function AbdestBozan() {
return (
<>
<h1>Abdesti Bozan Durumlar</h1>
<p>
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.
</p>
<ul>
<li>
Boşaltım organlarından idrar, kan, meni, gaita (dışkı), yel gibi katı,
sıvı veya gaz çıkması,
</li>
<li>
Uyumak, delirmek, bayılmak, sarhoş olmak gibi idrak gücünün
kaybedildiği durumlar,
</li>
<li>Kanama,</li>
<li>Cinsî münasebet,</li>
<li>ız dolusu kusmak,</li>
<li>Teyemmüm almış birinin su bulması,</li>
<li>Yellenmek.</li>
</ul>
</>
);
}

View file

@ -0,0 +1,22 @@
export function AbdestEngelli() {
return (
<>
<h1>Engelli abdesti</h1>
<p>
Normal abdest almasına engel bir durumu olan Müslüman'ın, rahatsızlığına
göre farklı yönlerden eksik kalan abdesttir.
</p>
<p>
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.
</p>
</>
);
}

View file

@ -0,0 +1,22 @@
export function AbdestEtimiloji() {
return (
<>
<h1>Abdestin Etimolojisi</h1>
<p>
&quot;Abdest&quot; sözcüğü Türkçeye Selçuklular zamanında Farsça'dan
geçmiştir. Anlamı &quot;su tutmak&quot;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
&quot;vudu&quot; kelimesi kullanılır.
</p>
<p>
Abdest Kur'an' da gasil veya gusül olarak geçer. Bu sözcük, Arapça'da
&quot;bir sıvıyı bir nesne üzerinden akıtmak, koku sürünmek&quot;
anlamlarına gelir. Bazı hadisçiler ve fıkıı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.
</p>
</>
);
}

View file

@ -0,0 +1,14 @@
export function AbdestFarz() {
return (
<>
<h1>Abdestin Farzları</h1>
<p>Sünni alimlere göre abdestin farzları dörttür:</p>
<ul>
<li>Başın dörtte birini meshetmek, yani ıslak elle sıvazlamak.</li>
<li>Kolları (dirsekleriyle beraber) yıkamak.</li>
<li>Yüzü yıkamak.</li>
<li>Ayakları (topuklarıyla beraber) yıkamak.</li>
</ul>
</>
);
}

View file

@ -0,0 +1,181 @@
export function AbdestHakkinda() {
return (
<>
<h1>Abdest</h1>
<p>
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.
</p>
<h2>Etimolojisi</h2>
<p>
&quot;Abdest&quot; sözcüğü Türkçeye Selçuklular zamanında Farsça'dan
geçmiştir. Anlamı &quot;su tutmak&quot;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
&quot;vudu&quot; kelimesi kullanılır.
</p>
<p>
Abdest Kur'an' da gasil veya gusül olarak geçer. Bu sözcük, Arapça'da
&quot;bir sıvıyı bir nesne üzerinden akıtmak, koku sürünmek&quot;
anlamlarına gelir. Bazı hadisçiler ve fıkıı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.
</p>
<h2>Teyemmüm</h2>
<p>
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
&quot;toz, toprak, taş vs.&quot; anlamına gelmektedir. Kullanıma uygun
su bulunduğu zaman bozulmaktadır.
</p>
<h2>Abdest Ayeti</h2>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<h2>Abdestin hükümleri</h2>
<p>
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:
</p>
<h3>Abdestin farzları</h3>
<p>Sünni alimlere göre abdestin farzları dörttür:</p>
<ul>
<li>Başın dörtte birini meshetmek, yani ıslak elle sıvazlamak.</li>
<li>Kolları (dirsekleriyle beraber) yıkamak.</li>
<li>Yüzü yıkamak.</li>
<li>Ayakları (topuklarıyla beraber) yıkamak.</li>
</ul>
<p>
Şia alimlerden bazıları &quot;ayaklara meshetmenin&quot; 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.
</p>
<h3>Abdestin sünnetleri</h3>
<ul>
<li>Niyet etmek</li>
<li>Eûzü ve Besmele ile başlamak</li>
<li>Evvela ellerini bileklerine kadar yıkamak</li>
<li>Misvak kullanmak</li>
<li>Bir âzâ kurumadan diğerini yıkamak</li>
<li>Ağzına ve burnuna üç kere su vermek</li>
<li>Kulağını meshetmek</li>
<li>
Parmaklarını hilâllemek; yâni bir elin parmaklarını diğer elin
parmakları arasına geçirip çekmek
</li>
<li>Âzâları üçer kere yıkamak</li>
<li>Başını kaplama meshetmek</li>
<li>
Abdesti tertip üzere almak; yâni abdest âzâlarını sırasıyla yıkamak
</li>
<li>El ve ayaklarını yıkamakta parmak uçlarından başlamak</li>
<li>
Abdest alırken okunacak birçok duâ olmakla beraber evlâ olan bütün
âzâlarını yıkarken besmele çekip şehâdet getirmektir
</li>
</ul>
<h3>Abdestin mekruhları</h3>
<ul>
<li>Sağ el ile sümkürmek</li>
<li>Abdest âzâlarından birini üç defadan az veya fazla yıkamak</li>
<li>Suyu yüzüne çarpmak</li>
<li>Güneşte ısınmış su ile abdest almak</li>
<li>Suyu çok az kullanmak veya israf etmek</li>
<li>Abdest alırken konuşmak</li>
<li>Sünnetlerini terk etmek</li>
</ul>
<h3>Abdesti bozan durumlar</h3>
<p>
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.
</p>
<ul>
<li>
Boşaltım organlarından idrar, kan, meni, gaita (dışkı), yel gibi katı,
sıvı veya gaz çıkması,
</li>
<li>
Uyumak, delirmek, bayılmak, sarhoş olmak gibi idrak gücünün
kaybedildiği durumlar,
</li>
<li>Kanama,</li>
<li>Cinsî münasebet,</li>
<li>ız dolusu kusmak,</li>
<li>Teyemmüm almış birinin su bulması,</li>
<li>Yellenmek.</li>
</ul>
<h3>Abdest nasıl alınır</h3>
<ol>
<li>Eller bileklere kadar Üç kere oğusturularak yıkanır.</li>
<li>
Sağ elle, ilkin ağza, sonra buruna olmak üzere, üçer kere su alınır.
</li>
<li>Yüz, Üç kere yıkanır.</li>
<li>
Dirseği biraz aşacak şekilde önce sağ kol, sonra sol kol üçer kere
yıkanır.
</li>
<li>
Sağ elin içi ıslatılıp, alından enseye doğru sıvazlanarak baş mesh
edilir.
</li>
<li>
Islak elin başparmağıyla, serçeparmağıyla sıvazlanarak kulaklar mesh
edilir.
</li>
<li>
Islak parmakların tersiyle, ense ortasından yanlara doğru boyun da
mesh edilir.
</li>
<li>
Topuğu biraz geçmek üzere, sol elle ilkin sağ, sonra sol ayak yıkanır.
</li>
</ol>
<h3>Engelli abdesti</h3>
<p>
Normal abdest almasına engel bir durumu olan Müslüman'ın, rahatsızlığına
göre farklı yönlerden eksik kalan abdesttir.
</p>
<p>
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.
</p>
</>
);
}

View file

@ -0,0 +1,26 @@
export function AbdestHukum() {
return (
<>
<h1>Abdestin Hükümleri</h1>
<p>
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:
</p>
<h3>Abdestin farzları</h3>
<p>Sünni alimlere göre abdestin farzları dörttür:</p>
<ul>
<li>Başın dörtte birini meshetmek, yani ıslak elle sıvazlamak.</li>
<li>Kolları (dirsekleriyle beraber) yıkamak.</li>
<li>Yüzü yıkamak.</li>
<li>Ayakları (topuklarıyla beraber) yıkamak.</li>
</ul>
<p>
Şia alimlerden bazıları &quot;ayaklara meshetmenin&quot; 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.
</p>
</>
);
}

View file

@ -0,0 +1,16 @@
export function AbdestMekruh() {
return (
<>
<h1>Abdestin Mekruhları</h1>
<ul>
<li>Sağ el ile sümkürmek</li>
<li>Abdest âzâlarından birini üç defadan az veya fazla yıkamak</li>
<li>Suyu yüzüne çarpmak</li>
<li>Güneşte ısınmış su ile abdest almak</li>
<li>Suyu çok az kullanmak veya israf etmek</li>
<li>Abdest alırken konuşmak</li>
<li>Sünnetlerini terk etmek</li>
</ul>
</>
);
}

View file

@ -0,0 +1,49 @@
export function AbdestNasil() {
return (
<>
<h1>Abdest Nasıl Alınır?</h1>
<ol>
<li>Eller bileklere kadar Üç kere oğusturularak yıkanır.</li>
<li>
Sağ elle, ilkin ağza, sonra buruna olmak üzere, üçer kere su alınır.
</li>
<li>Yüz, Üç kere yıkanır.</li>
<li>
Dirseği biraz aşacak şekilde önce sağ kol, sonra sol kol üçer kere
yıkanır.
</li>
<li>
Sağ elin içi ıslatılıp, alından enseye doğru sıvazlanarak baş mesh
edilir.
</li>
<li>
Islak elin başparmağıyla, serçeparmağıyla sıvazlanarak kulaklar mesh
edilir.
</li>
<li>
Islak parmakların tersiyle, ense ortasından yanlara doğru boyun da
mesh edilir.
</li>
<li>
Topuğu biraz geçmek üzere, sol elle ilkin sağ, sonra sol ayak yıkanır.
</li>
</ol>
<h2>Engelli Abdesti Nasıl Alınır?</h2>
<p>
Normal abdest almasına engel bir durumu olan Müslüman'ın, rahatsızlığına
göre farklı yönlerden eksik kalan abdesttir.
</p>
<p>
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.
</p>
</>
);
}

View file

@ -0,0 +1,30 @@
export function AbdestSunnet() {
return (
<>
<h1>Abdestin Sünnetleri</h1>
<ul>
<li>Niyet etmek</li>
<li>Eûzü ve Besmele ile başlamak</li>
<li>Evvela ellerini bileklerine kadar yıkamak</li>
<li>Misvak kullanmak</li>
<li>Bir âzâ kurumadan diğerini yıkamak</li>
<li>Ağzına ve burnuna üç kere su vermek</li>
<li>Kulağını meshetmek</li>
<li>
Parmaklarını hilâllemek; yâni bir elin parmaklarını diğer elin
parmakları arasına geçirip çekmek
</li>
<li>Âzâları üçer kere yıkamak</li>
<li>Başını kaplama meshetmek</li>
<li>
Abdesti tertip üzere almak; yâni abdest âzâlarını sırasıyla yıkamak
</li>
<li>El ve ayaklarını yıkamakta parmak uçlarından başlamak</li>
<li>
Abdest alırken okunacak birçok duâ olmakla beraber evlâ olan bütün
âzâlarını yıkarken besmele çekip şehâdet getirmektir
</li>
</ul>
</>
);
}

View file

@ -0,0 +1,16 @@
export function AbdestTeyemmum() {
return (
<>
<h1>Teyemmüm</h1>
<p>
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
&quot;toz, toprak, taş vs.&quot; anlamına gelmektedir. Kullanıma uygun
su bulunduğu zaman bozulmaktadır.
</p>
</>
);
}

5
constants.js Normal file
View file

@ -0,0 +1,5 @@
export const THEMES = {
DEFAULT: "DEFAULT",
GREEN: "GREEN",
DARK: "DARK",
};

34
contexts/Themes.js Normal file
View file

@ -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 (
<ThemeContext.Provider value={{ theme, setTheme: updateTheme }}>
{children}
</ThemeContext.Provider>
);
}
export { ThemeProvider, ThemeContext };

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

6
hooks/useTheme.js Normal file
View file

@ -0,0 +1,6 @@
import { useContext } from "react";
import { ThemeContext } from "../contexts/Themes";
const useTheme = () => useContext(ThemeContext);
export default useTheme;

View file

@ -1,26 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Created by pavi & edited by asandikci" />
<link rel="manifest" href="./manifest.json" />
<title>quickabdest</title>
<meta name="description" content="Abdest almak artık daha kolay!" />
<meta name="author" content="pavi" />
<script defer="defer" src="./static/js/main.js"></script>
<link href="./static/css/main.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="./static/js/rocket-loader.min.js"
data-cf-settings="d01e28aa431a2e476a095a27-|49" defer></script>
</body>
</html>

21
index.js Normal file
View file

@ -0,0 +1,21 @@
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/dist";
import { ThemeProvider } from "./contexts/Themes";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<ThemeProvider>
<App />
</ThemeProvider>
</BrowserRouter>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

View file

@ -1,25 +0,0 @@
{
"short_name": "Quickabdest",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

13
reportWebVitals.js Normal file
View file

@ -0,0 +1,13 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

30
routes.js Normal file
View file

@ -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: <QuickAbdest /> },
{ path: "abdesthakkinda", element: <AbdestHakkinda /> },
{ path: "abdestnasilalinir", element: <AbdestNasil /> },
{ path: "abdestetimoloji", element: <AbdestEtimiloji /> },
{ path: "abdestinhukumleri", element: <AbdestHukum /> },
{ path: "abdestinfarzlari", element: <AbdestFarz /> },
{ path: "abdestinsunnetleri", element: <AbdestSunnet /> },
{ path: "abdestinmehruklari", element: <AbdestMekruh /> },
{ path: "abdestbozandurumlar", element: <AbdestBozan /> },
{ path: "engelliabdesti", element: <AbdestEngelli /> },
{ path: "teyemmumabdesti", element: <AbdestTeyemmum /> },
],
},
];

View file

@ -1,528 +0,0 @@
<html lang="en" data-darkreader-mode="dynamic" data-darkreader-scheme="dark">
<head>
<style class="darkreader darkreader--fallback" media="screen"></style>
<style class="darkreader darkreader--text" media="screen"></style>
<style class="darkreader darkreader--invert" media="screen">
.jfk-bubble.gtx-bubble, .captcheck_answer_label > input + img, span#closed_text > img[src^="https://www.gstatic.com/images/branding/googlelogo"], span[data-href^="https://www.hcaptcha.com/"] > #icon, img.Wirisformula
{
filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;
}
</style>
<style class="darkreader darkreader--inline" media="screen">
[data-darkreader-inline-bgcolor] {
background-color: var(--darkreader-inline-bgcolor) !important;
}
[data-darkreader-inline-bgimage] {
background-image: var(--darkreader-inline-bgimage) !important;
}
[data-darkreader-inline-border] {
border-color: var(--darkreader-inline-border) !important;
}
[data-darkreader-inline-border-bottom] {
border-bottom-color: var(--darkreader-inline-border-bottom) !important;
}
[data-darkreader-inline-border-left] {
border-left-color: var(--darkreader-inline-border-left) !important;
}
[data-darkreader-inline-border-right] {
border-right-color: var(--darkreader-inline-border-right) !important;
}
[data-darkreader-inline-border-top] {
border-top-color: var(--darkreader-inline-border-top) !important;
}
[data-darkreader-inline-boxshadow] {
box-shadow: var(--darkreader-inline-boxshadow) !important;
}
[data-darkreader-inline-color] {
color: var(--darkreader-inline-color) !important;
}
[data-darkreader-inline-fill] {
fill: var(--darkreader-inline-fill) !important;
}
[data-darkreader-inline-stroke] {
stroke: var(--darkreader-inline-stroke) !important;
}
[data-darkreader-inline-outline] {
outline-color: var(--darkreader-inline-outline) !important;
}
[data-darkreader-inline-stopcolor] {
stop-color: var(--darkreader-inline-stopcolor) !important;
}
[data-darkreader-inline-bg] {
background: var(--darkreader-inline-bg) !important;
}
[data-darkreader-inline-invert] {
filter: invert(100%) hue-rotate(180deg);
}
</style>
<style class="darkreader darkreader--variables" media="screen">
:root {
--darkreader-neutral-background: #181a1b;
--darkreader-neutral-text: #e8e6e3;
--darkreader-selection-background: #004daa;
--darkreader-selection-text: #e8e6e3;
}
</style>
<style class="darkreader darkreader--root-vars" media="screen"></style>
<style class="darkreader darkreader--user-agent" media="screen">
@layer {
html {
background-color: #181a1b !important;
}
html {
color-scheme: dark !important;
}
iframe {
color-scheme: dark !important;
}
html,
body {
background-color: #181a1b;
}
html,
body {
border-color: #736b5e;
color: #e8e6e3;
}
a {
color: #3391ff;
}
table {
border-color: #545b5e;
}
mark {
color: #e8e6e3;
}
::placeholder {
color: #b2aba1;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-color: #404400 !important;
color: #e8e6e3 !important;
}
* {
scrollbar-color: #454a4d #202324;
}
::selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
::-moz-selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
}
</style>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Created by pavi" />
<link rel="manifest" href="./manifest.json" />
<title>quickabdest</title>
<meta name="description" content="Abdest almak artık daha kolay!" />
<meta name="author" content="pavi" />
<script
async=""
data-ad-client="ca-pub-4907827220756480"
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
type="text/javascript"
></script>
<script
defer="defer"
src="./static/js/main.eb71900b.js"
type="text/javascript"
></script>
<link href="./static/css/main.43f3f6c2.css" rel="stylesheet" />
<style class="darkreader darkreader--sync" media="screen"></style>
<meta name="darkreader" content="0f519f1922c84c568d27c2f3bd7dcb50" />
<style class="darkreader darkreader--override" media="screen">
.vimvixen-hint {
background-color: #684b00 !important;
border-color: #9e7e00 !important;
color: #d7d4cf !important;
}
#vimvixen-console-frame {
color-scheme: light !important;
}
::placeholder {
opacity: 0.5 !important;
}
#edge-translate-panel-body,
.MuiTypography-body1,
.nfe-quote-text {
color: var(--darkreader-neutral-text) !important;
}
gr-main-header {
background-color: #1b4958 !important;
}
.tou-z65h9k,
.tou-mignzq,
.tou-1b6i2ox,
.tou-lnqlqk {
background-color: var(--darkreader-neutral-background) !important;
}
.tou-75mvi {
background-color: #0f3a47 !important;
}
.tou-ta9e87,
.tou-1w3fhi0,
.tou-1b8t2us,
.tou-py7lfi,
.tou-1lpmd9d,
.tou-1frrtv8,
.tou-17ezmgn {
background-color: #1e2021 !important;
}
.tou-uknfeu {
background-color: #432c09 !important;
}
.tou-6i3zyv {
background-color: #245d70 !important;
}
div.mermaid-viewer-control-panel .btn {
background-color: var(--darkreader-neutral-background);
fill: var(--darkreader-neutral-text);
}
svg g rect.er {
fill: var(--darkreader-neutral-background) !important;
}
svg g rect.er.entityBox {
fill: var(--darkreader-neutral-background) !important;
}
svg g rect.er.attributeBoxOdd {
fill: var(--darkreader-neutral-background) !important;
}
svg g rect.er.attributeBoxEven {
fill: var(--darkreader-selection-background);
fill-opacity: 0.8 !important;
}
svg rect.er.relationshipLabelBox {
fill: var(--darkreader-neutral-background) !important;
}
svg g g.nodes rect,
svg g g.nodes polygon {
fill: var(--darkreader-neutral-background) !important;
}
svg g rect.task {
fill: var(--darkreader-selection-background) !important;
}
svg line.messageLine0,
svg line.messageLine1 {
stroke: var(--darkreader-neutral-text) !important;
}
div.mermaid .actor {
fill: var(--darkreader-neutral-background) !important;
}
mitid-authenticators-code-app > .code-app-container {
background-color: white !important;
padding-top: 1rem;
}
iframe#unpaywall[src$="unpaywall.html"] {
color-scheme: light !important;
}
embed[type="application/pdf"] {
filter: invert(100%) contrast(90%);
}
</style>
<style data-emotion="css-global" data-s=""></style>
<style class="darkreader darkreader--sync" media="screen"></style>
<style data-emotion="css" data-s=""></style>
<style class="darkreader darkreader--sync" media="screen"></style>
</head>
<body class="vsc-initialized">
<div id="root">
<div class="css-edjobu">
<header
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionSticky css-1iva5mo"
>
<div class="MuiContainer-root MuiContainer-maxWidthXxl css-1059arv">
<div class="MuiToolbar-root MuiToolbar-regular css-12o98wt">
<div class="MuiGrid-root MuiGrid-item css-1heh8l">
<a
class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap css-mo5ivj"
href="/"
>quickabdest</a
>
</div>
<div class="MuiBox-root css-1mcbgky">
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeLarge css-wqmgs7"
tabindex="0"
type="button"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vnjz4i"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="MenuIcon"
>
<path
d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
></path>
</svg>
</button>
</div>
<a
class="MuiTypography-root MuiTypography-h5 MuiTypography-noWrap css-1g1l3lx"
href="/"
>quickabdest</a
>
<div class="MuiBox-root css-kqj3u7">
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-8he4te"
tabindex="0"
type="button"
>
Abdest Hakkında</button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-8he4te"
tabindex="0"
type="button"
>
Abdest Nasıl Alınır?</button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-8he4te"
tabindex="0"
type="button"
>
Abdestin Etimolojisi</button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-8he4te"
tabindex="0"
type="button"
>
Abdestin Hükümleri</button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-8he4te"
tabindex="0"
type="button"
>
Abdestin Farzları</button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-8he4te"
tabindex="0"
type="button"
>
Abdestin Sünnetleri</button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-8he4te"
tabindex="0"
type="button"
>
Abdestin Mehrukları</button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-8he4te"
tabindex="0"
type="button"
>
Abdesti Bozan Durumlar</button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-8he4te"
tabindex="0"
type="button"
>
Engelli Abdesti Nasıl Alınır?</button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-8he4te"
tabindex="0"
type="button"
>
Teyemmüm Abdesti Nasıl Alınır?
</button>
</div>
<span class="MuiSwitch-root MuiSwitch-sizeMedium css-ybabk0"
><span
class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked css-18em366"
><input
class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
type="checkbox"
checked="" /><span
class="MuiSwitch-thumb css-11l50sf"
></span></span
><span class="MuiSwitch-track css-1ju1kxc"></span
></span>
</div>
</div>
</header>
<div class="MuiGrid-root MuiGrid-item css-1wi8ys">
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-g9v1t6"
>
<div class="MuiGrid-root MuiGrid-container css-d5ww2a">
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-af65id"
>
<img
src="./static/media/feelsbad.e57bd947bd8d88bb5345.png"
alt=""
height="auto"
style="width: clamp(12.5rem, 45%, 50rem)"
/>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1ukys6i"
>
abdest almak için
<a
class="MuiTypography-root MuiTypography-body1 css-dhtbsz"
style="
color: red;
font-size: 2rem;
--darkreader-inline-color: #ff1a1a;
"
data-darkreader-inline-color=""
>tıkla</a
>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-tvovte"
>
<h2
class="MuiTypography-root MuiTypography-body1 abdestFalse css-dhtbsz"
style="font-size: 2rem"
>
abdest almanın doğru adresi
</h2>
</div>
<div class="MuiGrid-root MuiGrid-container css-1d3bbye">
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-tvovte"
></div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-tvovte"
>
<h5 class="MuiTypography-root MuiTypography-h5 css-r2c7k2">
Site tamamen eğlence amacıyla hazırlanmıştır
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
role="presentation"
id="menu-appbar"
class="MuiModal-root MuiModal-hidden MuiMenu-root MuiPopover-root css-8oxdag"
aria-hidden="true"
>
<div
aria-hidden="true"
class="MuiBackdrop-root MuiBackdrop-invisible MuiModal-backdrop css-esi9ax"
style="opacity: 0; visibility: hidden"
></div>
<div tabindex="-1" data-testid="sentinelStart"></div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation8 MuiMenu-paper MuiPopover-paper MuiMenu-paper css-1bx5hsv"
style="opacity: 0; transform: scale(0.75, 0.5625); visibility: hidden"
tabindex="-1"
>
<ul
class="MuiList-root MuiList-padding MuiMenu-list css-r8u8y9"
role="menu"
tabindex="-1"
>
<li
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-zj4jyh"
tabindex="0"
role="menuitem"
>
<p class="MuiTypography-root MuiTypography-body1 css-9a87lw">
Abdest Hakkında
</p>
</li>
<li
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-zj4jyh"
tabindex="-1"
role="menuitem"
>
<p class="MuiTypography-root MuiTypography-body1 css-9a87lw">
Abdest Nasıl Alınır?
</p>
</li>
<li
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-zj4jyh"
tabindex="-1"
role="menuitem"
>
<p class="MuiTypography-root MuiTypography-body1 css-9a87lw">
Abdestin Etimolojisi
</p>
</li>
<li
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-zj4jyh"
tabindex="-1"
role="menuitem"
>
<p class="MuiTypography-root MuiTypography-body1 css-9a87lw">
Abdestin Hükümleri
</p>
</li>
<li
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-zj4jyh"
tabindex="-1"
role="menuitem"
>
<p class="MuiTypography-root MuiTypography-body1 css-9a87lw">
Abdestin Farzları
</p>
</li>
<li
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-zj4jyh"
tabindex="-1"
role="menuitem"
>
<p class="MuiTypography-root MuiTypography-body1 css-9a87lw">
Abdestin Sünnetleri
</p>
</li>
<li
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-zj4jyh"
tabindex="-1"
role="menuitem"
>
<p class="MuiTypography-root MuiTypography-body1 css-9a87lw">
Abdestin Mehrukları
</p>
</li>
<li
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-zj4jyh"
tabindex="-1"
role="menuitem"
>
<p class="MuiTypography-root MuiTypography-body1 css-9a87lw">
Abdesti Bozan Durumlar
</p>
</li>
<li
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-zj4jyh"
tabindex="-1"
role="menuitem"
>
<p class="MuiTypography-root MuiTypography-body1 css-9a87lw">
Engelli Abdesti Nasıl Alınır?
</p>
</li>
<li
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-zj4jyh"
tabindex="-1"
role="menuitem"
>
<p class="MuiTypography-root MuiTypography-body1 css-9a87lw">
Teyemmüm Abdesti Nasıl Alınır?
</p>
</li>
</ul>
</div>
<div tabindex="-1" data-testid="sentinelEnd"></div>
</div>
</body>
</html>

View file

@ -1,82 +0,0 @@
h1 {
font-size:2.5rem;
font-weight:600;
margin-bottom:1rem;
text-align:center
}
p {
text-align:justify;
text-decoration:none
}
ul {
list-style:circle
}
::-webkit-scrollbar {
display:none
}
.abdestTrue {
color:red;
letter-spacing:1.8229166666666667vw;
text-transform:uppercase;
width:auto
}
@font-face {
font-display:swap;
font-family:Poppins;
font-style:normal;
font-weight:400;
src:url(../../static/media/poppins-devanagari-400-normal.64d5f06ee726edd58ca3.woff2) format("woff2"),
url(../../static/media/poppins-all-400-normal.6fbfdac99c274b77fe96.woff) format("woff");
unicode-range:u+0900-097f,
u+1cd0-1cf6,
u+1cf8-1cf9,
u+200c-200d,
u+20a8,
u+20b9,
u+25cc,
u+a830-a839,
u+a8e0-a8fb
}
@font-face {
font-display:swap;
font-family:Poppins;
font-style:normal;
font-weight:400;
src:url(../../static/media/poppins-latin-ext-400-normal.4f38b4331448d2313adc.woff2) format("woff2"),
url(../../static/media/poppins-all-400-normal.6fbfdac99c274b77fe96.woff) format("woff");
unicode-range:u+0100-024f,
u+0259,
u+1e??,
u+2020,
u+20a0-20ab,
u+20ad-20cf,
u+2113,
u+2c60-2c7f,
u+a720-a7ff
}
@font-face {
font-display:swap;
font-family:Poppins;
font-style:normal;
font-weight:400;
src:url(../../static/media/poppins-latin-400-normal.405055dd680fa1dcdfa2.woff2) format("woff2"),
url(../../static/media/poppins-all-400-normal.6fbfdac99c274b77fe96.woff) format("woff");
unicode-range:u+00??,
u+0131,
u+0152-0153,
u+02bb-02bc,
u+02c6,
u+02da,
u+02dc,
u+2000-206f,
u+2074,
u+20ac,
u+2122,
u+2191,
u+2193,
u+2212,
u+2215,
u+feff,
u+fffd
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 135 KiB

11
theme/breakpoints.js Normal file
View file

@ -0,0 +1,11 @@
const breakpoints = {
values: {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1440,
},
};
export default breakpoints;

138
theme/components.js Normal file
View file

@ -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;

35
theme/index.js Normal file
View file

@ -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;

33
theme/shadows.js Normal file
View file

@ -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;

58
theme/typography.js Normal file
View file

@ -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;

134
theme/variants.js Normal file
View file

@ -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
*/