Merhaba degerli r10 üyeleri, Bizim Almanyadaki camii´miz daha güzel olmasi daha kurumsal olmasi icin bir web site yapmaya karar verdik. Tabii ben web devoloperdan anlamiyorum yapay zeka yapti hepsini. Hakkini yememek lazim gayet güzel yapti, ama bir kac basit sorun var. Admin panelde Bagis bilgilerini girdigimizde olmuyor daha dogrusu ana menüde bagis bilgileri diye bir kisim olmadigi icin sanirim. Quiz kisminda bir kisi bir günün sorusunu yaptiginda diyelim ki 2/3 dogru yapti ama sayfayi yeniliyeince tekrardan sorulari cozebiliyor bu olmamali. Bu iki sorunu bizim icin cözebilecek var midir? Allah simdiden razi olsun. asagiya index.html birakiyorum kod cok uzun biliyorum
ve acaba yapacak kisiden rica etsem bir iki yeni özellik daha ekleyebilir mi?
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mevlana Moschee Neuenrade | Huzur Birlik İyilik</title>
<meta name="description" content="Mevlana Moschee Neuenrade topluluk portalı. Namaz vakitleri, yaklaşan etkinlikler, forum, günlük bilgi yarışması ve cemaat hizmetleri." />
<meta name="keywords" content="Mevlana Moschee Neuenrade, Mevlana Camii, Neuenrade, namaz vakitleri, forum, topluluk, DITIB, IGMG" />
<meta name="theme-color" content="#064e3b" />
<meta property="og:title" content="Mevlana Moschee Neuenrade | Huzur Birlik İyilik" />
<meta property="og:description" content="Modern, huzurlu ve topluluk odaklı cami portalı. Namaz vakitleri, yaklaşan etkinlikler, forum ve daha fazlası." />
<meta property="og:type" content="website" />
<meta property="og:locale" content="tr_TR" />
<meta property="og:image" content="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?auto=format&fit=crop&w=1600&q=80" />
<meta name="twitter:card" content="summary_large_image" />
<style>
:root{
--emerald-950:#031612;
--emerald-900:#05241d;
--emerald-850:#064e3b;
--emerald-800:#0a5a45;
--emerald-700:#0f7358;
--gold:#d4af37;
--gold-soft:#efd68a;
--gold-deep:#b68b12;
--white:#ffffff;
--text:#eef6f2;
--muted:#c8d8d0;
--muted-2:#9fb4ab;
--glass:rgba(255,255,255,.08);
--glass-2:rgba(255,255,255,.12);
--glass-border:rgba(212,175,55,.24);
--shadow:0 18px 40px rgba(0,0,0,.32);
--shadow-2:0 28px 80px rgba(0,0,0,.35);
--success:#90d6aa;
--danger:#ff8d8d;
--warning:#f3d27c;
--radius-xl:30px;
--radius-lg:22px;
--radius-md:18px;
--radius-sm:14px;
--max:1260px;
--header-h:84px;
--touch:44px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
color:var(--text);
background:
radial-gradient(circle at 10% 10%, rgba(212,175,55,.11), transparent 28%),
radial-gradient(circle at 85% 10%, rgba(6,78,59,.32), transparent 32%),
radial-gradient(circle at 50% 100%, rgba(212,175,55,.08), transparent 35%),
linear-gradient(180deg, #04130f 0%, #062019 38%, #082820 100%);
min-height:100vh;
overflow-x:hidden;
}
body.lock-scroll{overflow:hidden}
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background:
linear-gradient(rgba(255,255,255,.015), rgba(255,255,255,.01)),
repeating-linear-gradient(
90deg,
rgba(255,255,255,.018) 0,
rgba(255,255,255,.018) 1px,
transparent 1px,
transparent 80px
);
opacity:.42;
z-index:0;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.container{
width:min(var(--max), calc(100% - 32px));
margin-inline:auto;
position:relative;
z-index:1;
}
.glass{
background:
linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
border:1px solid var(--glass-border);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.13),
inset 0 -1px 0 rgba(255,255,255,.03),
var(--shadow);
backdrop-filter:blur(18px) saturate(160%);
-webkit-backdrop-filter:blur(18px) saturate(160%);
}
.section-card{
padding:28px;
border-radius:var(--radius-xl);
position:relative;
overflow:hidden;
}
.section-card::after{
content:"";
position:absolute;
width:260px;
height:260px;
border-radius:50%;
right:-100px;
bottom:-120px;
background:radial-gradient(circle, rgba(212,175,55,.12), transparent 70%);
pointer-events:none;
}
.reveal{
opacity:0;
transform:translateY(28px);
transition:opacity .5s ease-in-out, transform .5s ease-in-out;
}
.reveal.in-view{
opacity:1;
transform:none;
}
/* Header */
.topbar{
position:sticky;
top:0;
z-index:60;
padding:14px 0;
background:linear-gradient(180deg, rgba(3,15,12,.68), rgba(3,15,12,.28));
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid rgba(212,175,55,.08);
transition:padding .28s ease, background .28s ease;
}
.topbar.shrink{padding:8px 0}
.nav-shell{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:0 16px;
min-height:56px;
border-radius:999px;
}
.brand{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}
.brand-mark{
width:46px;height:46px;border-radius:50%;
display:grid;place-items:center;
color:#fff8e3;
font-weight:800;
letter-spacing:.08em;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 45%),
linear-gradient(180deg, rgba(212,175,55,.28), rgba(212,175,55,.12));
border:1px solid rgba(212,175,55,.32);
flex:none;
}
.brand-copy{display:flex;flex-direction:column;min-width:0}
.brand-copy strong{
font-size:.98rem;
letter-spacing:.01em;
white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
}
.brand-copy span{
color:var(--muted);
font-size:.83rem;
white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
}
.nav-links{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}
.nav-links a{
padding:11px 14px;
border-radius:999px;
color:#eef8f3;
transition:.22s ease;
font-size:.95rem;
}
.nav-links a.active,
.nav-links a:hover{
background:rgba(255,255,255,.07);
color:#fff2c7;
}
.nav-actions{
display:flex;align-items:center;gap:10px;
}
.lang-switch{
display:flex;gap:8px;align-items:center;
}
.lang-btn,.ghost-btn,.primary-btn,.danger-btn,.menu-btn,.icon-btn{
border:none;
cursor:pointer;
transition:.25s ease;
min-height:var(--touch);
min-width:var(--touch);
}
.lang-btn,.ghost-btn,.menu-btn,.icon-btn{
color:var(--text);
background:rgba(255,255,255,.06);
border:1px solid rgba(212,175,55,.18);
border-radius:999px;
padding:10px 14px;
}
.lang-btn.active{
background:linear-gradient(180deg, rgba(212,175,55,.26), rgba(212,175,55,.13));
color:#fff7dc;
border-color:rgba(212,175,55,.36);
}
.primary-btn{
padding:13px 18px;
border-radius:999px;
color:#122017;
font-weight:800;
background:
linear-gradient(180deg, #f1dd9d, var(--gold));
box-shadow:0 12px 28px rgba(212,175,55,.20);
position:relative;
overflow:hidden;
}
.primary-btn::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
transform:translateX(-120%);
transition:transform .55s ease;
}
.primary-btn:hover::before{transform:translateX(120%)}
.primary-btn:hover,.ghost-btn:hover,.lang-btn:hover,.menu-btn:hover,.icon-btn:hover{
transform:translateY(-1px);
}
.danger-btn{
padding:13px 18px;
border-radius:999px;
color:#fff;
background:linear-gradient(180deg, #b55353, #853d3d);
}
.menu-btn{
display:none;
width:46px;height:46px;
border-radius:14px;
font-size:1.12rem;
padding:0;
}
/* Hero */
.hero{
padding:28px 0 22px;
}
.hero-grid{
display:grid;
grid-template-columns:1.14fr .86fr;
gap:24px;
align-items:stretch;
}
.hero-main,
.hero-prayer{
min-height:470px;
border-radius:32px;
padding:34px;
position:relative;
overflow:hidden;
}
.hero-main{
background:
linear-gradient(0deg, rgba(3,20,15,.42), rgba(3,20,15,.28)),
url("https://images.unsplash.com/photo-1564760055775-d63b17a55c44?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat;
}
.hero-main::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 20%, rgba(212,175,55,.18), transparent 26%),
linear-gradient(90deg, rgba(2,10,8,.74), rgba(2,10,8,.34) 55%, rgba(2,10,8,.20));
pointer-events:none;
}
.hero-main-inner{
position:relative;
z-index:1;
max-width:700px;
padding-top:12px;
}
.eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
width:max-content;
border-radius:999px;
padding:10px 15px;
margin-bottom:18px;
color:#fff4cd;
font-size:.92rem;
background:rgba(255,255,255,.08);
border:1px solid rgba(212,175,55,.24);
}
.hero-title{
margin:0 0 16px;
font-size:clamp(2.6rem, 6vw, 5rem);
line-height:.97;
letter-spacing:-.045em;
max-width:10.5ch;
}
.hero-text{
margin:0 0 24px;
color:#ebede9;
line-height:1.82;
font-size:1.08rem;
max-width:58ch;
}
.tag-row{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:24px;
}
.tag{
padding:12px 16px;
border-radius:999px;
font-weight:700;
color:#fff4cf;
background:rgba(255,255,255,.06);
border:1px solid rgba(212,175,55,.22);
}
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
}
.hero-prayer{
background:
radial-gradient(circle at 70% 20%, rgba(212,175,55,.14), transparent 26%),
linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
display:flex;
flex-direction:column;
justify-content:space-between;
}
.card-head{
display:flex;
justify-content:space-between;
gap:16px;
align-items:flex-start;
margin-bottom:18px;
}
.mini-title{
font-size:.9rem;
text-transform:uppercase;
letter-spacing:.14em;
color:#f0dda2;
margin-bottom:8px;
}
.today-date{
color:var(--muted);
text-align:right;
line-height:1.55;
font-size:.95rem;
}
.next-prayer-card{
padding:18px;
border-radius:24px;
border:1px solid rgba(212,175,55,.18);
background:rgba(255,255,255,.055);
margin-bottom:18px;
display:grid;
grid-template-columns:1fr 150px;
gap:12px;
align-items:center;
}
.next-prayer-label{
color:var(--muted);
font-size:.92rem;
margin-bottom:6px;
}
.next-prayer-name{
font-size:1.55rem;
font-weight:800;
margin:0 0 4px;
}
.next-prayer-time{
color:#ffe5a0;
font-weight:700;
font-size:1.12rem;
margin:0 0 10px;
}
.ring-wrap{
position:relative;
width:132px;
height:132px;
margin-inline:auto;
}
.ring-svg{
width:132px;height:132px;transform:rotate(-90deg);
filter:drop-shadow(0 0 12px rgba(212,175,55,.25));
}
.ring-center{
position:absolute;
inset:16px;
display:grid;
place-items:center;
text-align:center;
border-radius:50%;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
padding:10px;
}
.ring-center strong{
font-size:1rem;
color:#fff8e0;
line-height:1.2;
}
.ring-center span{
display:block;
color:var(--muted);
font-size:.8rem;
margin-top:4px;
line-height:1.3;
}
.progress-bar{
width:100%;
height:10px;
border-radius:999px;
background:rgba(255,255,255,.08);
overflow:hidden;
border:1px solid rgba(212,175,55,.12);
}
.progress-fill{
height:100%;
width:0%;
background:linear-gradient(90deg, #d4af37, #f1dc95);
border-radius:999px;
transition:width .6s ease;
}
.prayer-table{
display:grid;
gap:10px;
padding:18px;
border-radius:26px;
border:1px solid rgba(212,175,55,.18);
background:
linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 10px 28px rgba(0,0,0,.18);
backdrop-filter:blur(22px) saturate(170%);
-webkit-backdrop-filter:blur(22px) saturate(170%);
}
.prayer-row{
display:grid;
grid-template-columns:1fr auto;
gap:14px;
align-items:center;
padding:14px 16px;
border-radius:18px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.06);
transition:.22s ease;
}
.prayer-row.current{
box-shadow:0 0 0 1px rgba(212,175,55,.35), 0 0 22px rgba(212,175,55,.18);
background:linear-gradient(180deg, rgba(212,175,55,.12), rgba(255,255,255,.05));
animation:pulseGlow 2.2s infinite ease-in-out;
}
@keyframes pulseGlow{
0%,100%{box-shadow:0 0 0 1px rgba(212,175,55,.28), 0 0 16px rgba(212,175,55,.12)}
50%{box-shadow:0 0 0 1px rgba(212,175,55,.40), 0 0 28px rgba(212,175,55,.22)}
}
.prayer-row strong{font-size:1rem}
.prayer-row span{font-weight:800;color:#ffe29a}
section{padding:18px 0}
.section-head{
display:flex;
align-items:end;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}
.section-head h2{
margin:0;
font-size:clamp(1.5rem, 3vw, 2.15rem);
letter-spacing:-.03em;
}
.section-head p{
margin:8px 0 0;
color:var(--muted);
line-height:1.76;
max-width:68ch;
}
.event-card{
display:grid;
grid-template-columns:1.08fr .92fr;
gap:22px;
align-items:stretch;
}
.event-main h3{
margin:0 0 12px;
font-size:clamp(1.75rem, 3vw, 2.45rem);
letter-spacing:-.03em;
}
.event-desc{
margin:0;
line-height:1.85;
color:#e3ebe7;
font-size:1.03rem;
}
.event-meta{
display:grid;
gap:12px;
align-content:start;
}
.meta-item{
border-radius:22px;
padding:16px 18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(212,175,55,.18);
}
.meta-label{
color:var(--muted);
font-size:.9rem;
margin-bottom:6px;
}
.meta-value{
color:#fff0bf;
font-weight:700;
font-size:1.05rem;
line-height:1.5;
}
.badge{
display:inline-flex;
align-items:center;
gap:8px;
width:max-content;
padding:10px 14px;
border-radius:999px;
font-weight:800;
color:#172218;
background:linear-gradient(180deg, #f2df9f, var(--gold));
box-shadow:0 12px 28px rgba(212,175,55,.18);
margin-bottom:14px;
}
.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
.grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}
.card{
padding:24px;
border-radius:24px;
position:relative;
overflow:hidden;
transition:transform .28s ease, box-shadow .28s ease;
}
.card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-2);
}
.card h3,.card h4{margin:0 0 10px}
.card p{margin:0;color:var(--muted);line-height:1.8}
.kpi-row{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}
.kpi{
padding:18px;
border-radius:20px;
text-align:center;
background:rgba(255,255,255,.05);
border:1px solid rgba(212,175,55,.18);
}
.kpi strong{
display:block;
font-size:1.55rem;
color:#fff0bb;
margin-bottom:6px;
}
.kpi span{
color:var(--muted);
font-size:.92rem;
}
/* forum */
.forum-layout{
display:grid;
grid-template-columns:.92fr 1.08fr;
gap:18px;
}
.field{
display:grid;
gap:8px;
margin-bottom:14px;
}
.field label{
color:#f0efe7;
font-size:.95rem;
}
.field input,.field textarea,.field select{
width:100%;
border:none;
outline:none;
color:var(--text);
background:rgba(255,255,255,.06);
border:1px solid rgba(212,175,55,.16);
border-radius:16px;
padding:14px 14px;
resize:vertical;
}
.field textarea{min-height:120px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > *{flex:1 1 180px}
.auth-status{
padding:14px 16px;
border-radius:18px;
color:#fff4ca;
background:rgba(255,255,255,.05);
border:1px solid rgba(212,175,55,.18);
line-height:1.65;
}
.feed{
display:grid;
gap:14px;
}
.post{
padding:20px;
border-radius:24px;
background:linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.04));
border:1px solid rgba(212,175,55,.2);
box-shadow:var(--shadow);
}
.post-head{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
margin-bottom:12px;
}
.post-meta{
color:var(--muted);
font-size:.92rem;
line-height:1.6;
}
.post-title{
margin:0 0 8px;
font-size:1.2rem;
}
.post-body{
margin:0;
color:#ebf2ee;
line-height:1.82;
white-space:pre-wrap;
}
.reply-list{
margin-top:16px;
display:grid;
gap:10px;
}
.reply{
padding:14px 16px;
border-radius:18px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.06);
}
.reply small{
display:block;
color:var(--muted);
margin-bottom:6px;
line-height:1.5;
}
.reply-box{
margin-top:14px;
display:grid;
gap:10px;
}
/* quiz */
.quiz-list{
display:grid;
gap:14px;
}
.quiz-item{
padding:18px;
border-radius:20px;
background:rgba(255,255,255,.05);
border:1px solid rgba(212,175,55,.18);
}
.quiz-item h4{
margin:0 0 12px;
font-size:1rem;
line-height:1.6;
}
.quiz-options{
display:grid;
gap:8px;
}
.option-btn{
padding:12px 14px;
text-align:left;
border-radius:14px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.07);
color:var(--text);
cursor:pointer;
transition:.2s ease;
min-height:var(--touch);
}
.option-btn:hover{background:rgba(255,255,255,.08)}
.option-btn.correct{
border-color:rgba(144,214,170,.45);
background:rgba(144,214,170,.14);
}
.option-btn.wrong{
border-color:rgba(255,141,141,.35);
background:rgba(255,141,141,.12);
}
/* Floating buttons */
.floating-stack{
position:fixed;
right:18px;
bottom:18px;
z-index:45;
display:grid;
gap:10px;
}
.fab{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:52px;
padding:0 16px;
border-radius:999px;
background:linear-gradient(180deg, rgba(212,175,55,.98), rgba(182,139,18,.98));
color:#132018;
font-weight:800;
border:1px solid rgba(255,255,255,.15);
box-shadow:0 14px 28px rgba(0,0,0,.24);
cursor:pointer;
}
/* Drawer */
.mobile-drawer{
position:fixed;
inset:0;
z-index:90;
display:none;
background:rgba(3,10,8,.64);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
padding:16px;
}
.mobile-drawer.open{display:block}
.mobile-panel{
width:min(100%, 430px);
min-height:100%;
margin-left:auto;
border-radius:28px;
padding:18px;
display:flex;
flex-direction:column;
gap:18px;
background:linear-gradient(180deg, rgba(6,25,20,.97), rgba(7,27,22,.95));
border:1px solid rgba(212,175,55,.22);
box-shadow:var(--shadow-2);
position:relative;
}
.mobile-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.close-btn{
width:48px;height:48px;
display:grid;place-items:center;
padding:0;
border-radius:16px;
font-size:1.2rem;
color:#fff;
background:rgba(255,255,255,.08);
border:1px solid rgba(212,175,55,.2);
cursor:pointer;
position:relative;
z-index:200;
}
.mobile-links{
display:grid;
gap:10px;
}
.mobile-links a{
padding:15px 16px;
border-radius:18px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.06);
min-height:var(--touch);
display:flex;align-items:center;
}
/* Modal */
.modal-backdrop{
position:fixed;
inset:0;
z-index:100;
display:none;
align-items:center;
justify-content:center;
padding:18px;
background:rgba(2,8,7,.74);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.modal-backdrop.show{display:flex}
.modal{
width:min(100%, 560px);
border-radius:30px;
padding:24px;
background:linear-gradient(180deg, rgba(9,31,25,.97), rgba(7,24,20,.97));
border:1px solid rgba(212,175,55,.24);
box-shadow:var(--shadow-2);
position:relative;
}
.modal-top{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
margin-bottom:8px;
}
.modal h3{
margin:0 0 6px;
font-size:1.45rem;
}
.modal p{
margin:0 0 18px;
color:var(--muted);
line-height:1.72;
}
.status-note{
margin-top:12px;
padding:12px 14px;
border-radius:14px;
display:none;
font-size:.95rem;
line-height:1.6;
}
.status-note.show{display:block}
.status-note.success{
color:#dff4e6;background:rgba(144,214,170,.12);border:1px solid rgba(144,214,170,.28);
}
.status-note.error{
color:#ffe2e2;background:rgba(255,141,141,.10);border:1px solid rgba(255,141,141,.26);
}
/* Admin */
.admin-page{display:none;padding:24px 0 44px}
.admin-grid{
display:grid;
grid-template-columns:300px 1fr;
gap:20px;
}
.admin-side{
padding:22px;border-radius:28px;height:max-content;
position:sticky;top:108px;
}
.admin-side button{
width:100%;text-align:left;margin-bottom:10px;
padding:14px 16px;border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(212,175,55,.16);
color:var(--text);cursor:pointer;min-height:var(--touch);
}
.admin-side button.active{
background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(255,255,255,.05));
color:#fff3c4;
border-color:rgba(212,175,55,.28);
}
.admin-panel{
padding:24px;border-radius:30px;
}
.tab-panel{display:none}
.tab-panel.active{display:block}
.table-wrap{overflow:auto}
table{
width:100%;
border-collapse:collapse;
min-width:680px;
}
th,td{
text-align:left;
padding:12px 10px;
border-bottom:1px solid rgba(255,255,255,.07);
vertical-align:top;
}
th{color:#fff0b8;font-size:.94rem}
td{color:#e6f0eb;font-size:.95rem;line-height:1.6}
.inline-actions{
display:flex;gap:10px;flex-wrap:wrap;
}
.mini-btn{
padding:9px 12px;border-radius:12px;
border:1px solid rgba(212,175,55,.18);
background:rgba(255,255,255,.05);
color:var(--text);cursor:pointer;min-height:var(--touch);
}
.footer{
padding:28px 0 52px;
color:#c9d6cf;
}
.footer-box{
padding:24px 28px;
border-radius:28px;
display:flex;
justify-content:space-between;
gap:18px;
align-items:center;
}
.footer small{display:block;line-height:1.7;color:var(--muted)}
.hidden{display:none !important}
@media (max-width:1100px){
.hero-grid,.forum-layout,.event-card,.grid-3,.kpi-row,.admin-grid,.grid-2{
grid-template-columns:1fr;
}
.admin-side{position:static}
}
@media (max-width:980px){
.nav-links,.lang-switch{display:none}
.menu-btn{display:grid;place-items:center}
.next-prayer-card{grid-template-columns:1fr}
.ring-wrap{margin-top:4px}
}
@media (max-width:700px){
.container{width:min(var(--max), calc(100% - 20px))}
.hero-main,.hero-prayer,.section-card,.admin-panel,.admin-side,.footer-box{
padding:22px;
}
.hero-main,.hero-prayer{min-height:auto}
.hero-title{max-width:11ch}
.ring-wrap{width:116px;height:116px}
.ring-svg{width:116px;height:116px}
.ring-center{inset:14px}
.footer-box{flex-direction:column;align-items:flex-start}
}
</style>
</head>
<body>
<header class="topbar" id="topbar">
<div class="container">
<nav class="nav-shell glass" aria-label="Ana navigasyon">
<div class="brand">
<div class="brand-mark">M</div>
<div class="brand-copy">
<strong id="brandTitle">Mevlana Moschee Neuenrade</strong>
<span id="brandSub">Huzurun Adresi, Birliğin Merkezi.</span>
</div>
</div>
<div class="nav-links" id="desktopNav">
<a href="#home" data-section="home" data-i18n="navHome">Ana Sayfa</a>
<a href="#prayers" data-section="prayers" data-i18n="navPrayers">Namaz Vakitleri</a>
<a href="#event" data-section="event" data-i18n="navEvent">Yaklaşan Etkinlik</a>
<a href="#forum" data-section="forum" data-i18n="navForum">Topluluk Forumu</a>
<a href="#quiz" data-section="quiz" data-i18n="navQuiz">Günlük Quiz</a>
<a href="#courses" data-section="courses" data-i18n="navCourse">Kuran Kursu</a>
<a href="#services" data-section="services" data-i18n="navServices">Hizmetler</a>
<a href="#contact" data-section="contact" data-i18n="navContact">İletişim</a>
</div>
<div class="nav-actions">
<div class="lang-switch">
<button class="lang-btn active" data-lang="tr">TR</button>
<button class="lang-btn" data-lang="de">DE</button>
</div>
<button class="menu-btn" id="menuBtn" aria-label="Menüyü aç">☰</button>
</div>
</nav>
</div>
</header>
<div class="mobile-drawer" id="mobileDrawer" aria-hidden="true">
<div class="mobile-panel glass">
<div class="mobile-top">
<div class="brand">
<div class="brand-mark">M</div>
<div class="brand-copy">
<strong id="mobileBrandTitle">Mevlana Moschee Neuenrade</strong>
<span id="mobileBrandSub">Huzurun Adresi, Birliğin Merkezi.</span>
</div>
</div>
<button class="close-btn" id="closeDrawer" aria-label="Menüyü kapat">✕</button>
</div>
<div class="mobile-links">
<a href="#home" data-i18n="navHome">Ana Sayfa</a>
<a href="#prayers" data-i18n="navPrayers">Namaz Vakitleri</a>
<a href="#event" data-i18n="navEvent">Yaklaşan Etkinlik</a>
<a href="#forum" data-i18n="navForum">Topluluk Forumu</a>
<a href="#quiz" data-i18n="navQuiz">Günlük Quiz</a>
<a href="#courses" data-i18n="navCourse">Kuran Kursu</a>
<a href="#services" data-i18n="navServices">Hizmetler</a>
<a href="#contact" data-i18n="navContact">İletişim</a>
</div>
<div style="margin-top:auto;display:flex;gap:10px;flex-wrap:wrap">
<button class="lang-btn active" data-lang="tr">TR</button>
<button class="lang-btn" data-lang="de">DE</button>
</div>
</div>
</div>
<main id="siteContent">
<section class="hero reveal" id="home">
<div class="container">
<div class="hero-grid">
<div class="hero-main glass" id="heroMain">
<div class="hero-main-inner">
<div class="eyebrow" id="heroEyebrow">Huzur Birlik İyilik</div>
<h1 class="hero-title" id="heroTitle">Mevlana Camii Neuenrade: Huzurun Adresi, Birliğin Merkezi.</h1>
<p class="hero-text" id="heroText">
Modern bir külliye ruhuyla, cemaatimizin hizmetinde. Kalpleri bir araya getiren bu mekânda; huzuru paylaşmaya,
kardeşliği güçlendirmeye ve iyilik yolunda omuz omuza yürümeye davetlisiniz.
</p>
<div class="tag-row">
<div class="tag" id="tag1">Huzur</div>
<div class="tag" id="tag2">Birlik</div>
<div class="tag" id="tag3">İyilik</div>
</div>
<div class="hero-actions">
<a href="#prayers" class="primary-btn" id="heroPrimary">Namaz Vakitlerini Gör</a>
<a href="#forum" class="ghost-btn" id="heroSecondary">Toplulukla Buluş</a>
</div>
</div>
</div>
<aside class="hero-prayer glass reveal" id="prayers">
<div>
<div class="card-head">
<div>
<div class="mini-title" id="prayerMini">Bugünün Namaz Vakitleri</div>
<h2 style="margin:0;font-size:1.65rem;" id="prayerTitle">Vaktin Bereketi</h2>
</div>
<div class="today-date" id="todayDate"></div>
</div>
<div class="next-prayer-card">
<div>
<div class="next-prayer-label" id="nextPrayerLabel">Sıradaki Vakit</div>
<h3 class="next-prayer-name" id="nextPrayerName">Öğle</h3>
<p class="next-prayer-time" id="nextPrayerTime">13:08</p>
<div class="progress-bar" aria-hidden="true">
<div class="progress-fill" id="nextPrayerProgress"></div>
</div>
</div>
<div class="ring-wrap">
<svg class="ring-svg" viewBox="0 0 120 120" aria-hidden="true">
<circle cx="60" cy="60" r="48" fill="none" stroke="rgba(255,255,255,.10)" stroke-width="8"></circle>
<circle cx="60" cy="60" r="48" fill="none" stroke="url(#goldGradient)" stroke-width="8"
stroke-linecap="round"
stroke-dasharray="301.59"
stroke-dashoffset="120"
id="ringProgress"></circle>
<defs>
<linearGradient id="goldGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#f1de9b"></stop>
<stop offset="100%" stop-color="#d4af37"></stop>
</linearGradient>
</defs>
</svg>
<div class="ring-center">
<strong id="ringTime">--:--</strong>
<span id="ringLabel">Kalan Süre</span>
</div>
</div>
</div>
<div class="prayer-table glass" id="prayerTable"></div>
</div>
</aside>
</div>
</div>
</section>
<section id="event" class="reveal hidden">
<div class="container">
<div class="section-card glass">
<div class="section-head">
<div>
<h2 id="eventSectionTitle">Yaklaşan Etkinlik</h2>
<p id="eventSectionText">
Gönül Birliğiyle Bekliyoruz. Bir sonraki buluşmamızın bilgileri burada zarafetle yer alır.
</p>
</div>
</div>
<div class="event-card">
<div class="event-main">
<div class="badge hidden" id="eventCountdownBadge">Kalan Gün: 0</div>
<h3 id="eventTitle">Etkinlik Başlığı</h3>
<p class="event-desc" id="eventDescription">Etkinlik açıklaması burada yer alır.</p>
</div>
<div class="event-meta">
<div class="meta-item">
<div class="meta-label" id="eventDateLabel">Tarih</div>
<div class="meta-value" id="eventDate">-</div>
</div>
<div class="meta-item">
<div class="meta-label" id="eventTimeLabel">Saat</div>
<div class="meta-value" id="eventTime">-</div>
</div>
<div class="meta-item">
<div class="meta-label" id="eventInviteLabel">Davet</div>
<div class="meta-value" id="eventInvite">Gönül Birliğiyle Bekliyoruz</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="reveal" id="community">
<div class="container">
<div class="section-card glass">
<div class="section-head">
<div>
<h2 id="communityTitle">Topluluk Platformu</h2>
<p id="communityText">
Kardeşlik Sofrası sadece aynı mekânda değil, aynı kalpte buluşmaktır. Hesabınızla giriş yapın, forumda katkı sunun ve iyilik yolunda birlikte büyüyelim.
</p>
</div>
</div>
<div class="kpi-row">
<div class="kpi glass">
<strong id="kpiUsers">0</strong>
<span id="kpiUsersLabel">Toplam Üye</span>
</div>
<div class="kpi glass">
<strong id="kpiTopics">0</strong>
<span id="kpiTopicsLabel">Forum Konusu</span>
</div>
<div class="kpi glass">
<strong id="kpiStudents">0</strong>
<span id="kpiStudentsLabel">Kurs Öğrencisi</span>
</div>
<div class="kpi glass">
<strong id="kpiWinners">0</strong>
<span id="kpiWinnersLabel">Quiz Kazananı</span>
</div>
</div>
</div>
</div>
</section>
<section class="reveal" id="forum">
<div class="container">
<div class="section-card glass">
<div class="section-head">
<div>
<h2 id="forumTitle">Topluluk Forumu</h2>
<p id="forumText">
Cemaatimizin sesi burada yankılanır. Soru sorun, fikir paylaşın, hayırlı haberlere vesile olun.
</p>
</div>
</div>
<div class="forum-layout">
<div class="card glass">
<h3 id="authTitle">Giriş / Kayıt</h3>
<p id="authText" style="margin:0 0 16px;color:var(--muted);line-height:1.8;">
Firebase ile gerçek zamanlı üyelik kullanılır. Aşağıdaki yapı, sadece istemci tarafında olduğu için isim-soyisim-şifre sistemini gerçek güvenlik seviyesinde sağlayamaz. Bu dosyada güvenli yaklaşım olarak Firebase Email/Password kullanılır ve isim-soyisim profil alanı olarak saklanır.
</p>
<div class="field">
<label for="fullName" id="labelFullName">Ad Soyad</label>
<input id="fullName" type="text" placeholder="Örn. Harun Ulu" />
</div>
<div class="row">
<div class="field">
<label for="loginEmail" id="labelEmail">E-posta</label>
<input id="loginEmail" type="email" placeholder="ornek@site.de" />
</div>
<div class="field">
<label for="loginPassword" id="labelPassword">Şifre</label>
<input id="loginPassword" type="password" placeholder="" />
</div>
</div>
<div class="row">
<button class="primary-btn" id="registerBtn">Kayıt Ol</button>
<button class="ghost-btn" id="loginBtn">Giriş Yap</button>
<button class="ghost-btn hidden" id="logoutBtn">Çıkış Yap</button>
</div>
<div class="status-note" id="authStatus"></div>
<div class="auth-status" id="profileCard" style="margin-top:16px;">
<strong id="profileName">Henüz giriş yapılmadı</strong>
<div id="profileMeta" style="margin-top:8px;color:var(--muted);line-height:1.7;">
Gönül birliğiyle buluşmak için giriş yapabilirsiniz.
</div>
</div>
</div>
<div class="card glass">
<h3 id="createTopicTitle">Yeni Konu Aç</h3>
<div class="field">
<label for="topicTitle" id="labelTopicTitle">Konu Başlığı</label>
<input id="topicTitle" type="text" placeholder="Paylaşmak istediğiniz başlık" />
</div>
<div class="field">
<label for="topicBody" id="labelTopicBody">Mesaj</label>
<textarea id="topicBody" placeholder="Topluluğa iletmek istediğiniz düşünceleri yazın."></textarea>
</div>
<div class="row">
<button class="primary-btn" id="publishTopicBtn">Yayınla</button>
</div>
<div class="status-note" id="topicStatus"></div>
</div>
</div>
<div style="height:18px"></div>
<div class="feed" id="forumFeed"></div>
</div>
</div>
</section>
<section class="reveal" id="quiz">
<div class="container">
<div class="section-card glass">
<div class="section-head">
<div>
<h2 id="quizTitle">7x3 Günlük Quiz</h2>
<p id="quizText">
Her gün üç soru ile bilginizi tazeleyin. Haftanın sonunda 21/21 doğruluk sağlayan isimler, admin panelinde Çikolata Kazananlar bölümünde görünür.
</p>
</div>
</div>
<div class="grid-2">
<div class="card glass">
<h3 id="quizDayTitle">Bugünün Soruları</h3>
<p id="quizDayText" style="margin:0 0 14px;color:var(--muted);line-height:1.8;">Bugün için hazırlanan üç soruyu dikkatle cevaplayın.</p>
<div class="quiz-list" id="quizList"></div>
<div class="row" style="margin-top:14px">
<button class="primary-btn" id="submitQuizBtn">Cevapları Gönder</button>
</div>
<div class="status-note" id="quizStatus"></div>
</div>
<div class="card glass">
<h3 id="quizProgressTitle">Haftalık İlerleme</h3>
<div class="auth-status">
<strong id="quizUserScore">0 / 21</strong>
<div id="quizUserMeta" style="margin-top:8px;color:var(--muted);line-height:1.7;">
Giriş yaptıktan sonra haftalık puanınız burada görünür.
</div>
</div>
<div style="height:14px"></div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th id="quizTableDay">Gün</th>
<th id="quizTableCorrect">Doğru</th>
<th id="quizTableStatus">Durum</th>
</tr>
</thead>
<tbody id="quizProgressTable"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="reveal" id="courses">
<div class="container">
<div class="section-card glass">
<div class="section-head">
<div>
<h2 id="courseTitle">Kuran Kursu Kayıt</h2>
<p id="courseText">
Gelecek nesiller için el ele. Velilerimiz, çocuklarımızı huzurlu ve düzenli bir eğitim ortamına bu form üzerinden kaydedebilir.
</p>
</div>
</div>
<div class="grid-2">
<div class="card glass">
<h3 id="studentRegTitle">Öğrenci Kayıt Formu</h3>
<div class="field">
<label for="studentName" id="labelStudentName">Öğrenci Adı Soyadı</label>
<input id="studentName" type="text" />
</div>
<div class="row">
<div class="field">
<label for="studentAge" id="labelStudentAge">Yaş</label>
<input id="studentAge" type="number" min="4" max="18" />
</div>
<div class="field">
<label for="studentGender" id="labelStudentGender">Cinsiyet</label>
<select id="studentGender">
<option value="Kız">Kız</option>
<option value="Erkek">Erkek</option>
</select>
</div>
</div>
<div class="field">
<label for="studentAddress" id="labelStudentAddress">Adres</label>
<textarea id="studentAddress"></textarea>
</div>
<div class="field">
<label for="guardianPhone" id="labelGuardianPhone">Veli Telefonu</label>
<input id="guardianPhone" type="tel" />
</div>
<div class="row">
<button class="primary-btn" id="submitStudentBtn">Kaydı Gönder</button>
</div>
<div class="status-note" id="studentStatus"></div>
</div>
<div class="card glass">
<h3 id="courseInfoTitle">Eğitimde Huzur ve İstikrar</h3>
<p id="courseInfoText">
Kurs kayıtları Firebase üzerinde gerçek zamanlı saklanır. Yönetim paneli üzerinden sınıflar oluşturulabilir, öğrenciler sınıflara atanabilir ve süreç düzenli şekilde takip edilebilir.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="reveal" id="services">
<div class="container">
<div class="section-card glass">
<div class="section-head">
<div>
<h2 id="servicesTitle">Gelecek Nesiller İçin Hizmetlerimiz</h2>
<p id="servicesText">
Her adımda huzur, her çalışmada birlik, her niyette iyilik taşıyan hizmet anlayışımızla cemaatimizin yanındayız.
</p>
</div>
</div>
<div class="grid-3">
<article class="card glass">
<h3 id="service1Title">Cuma Sohbetleri</h3>
<p id="service1Text">Kalpleri yumuşatan, bilgiyi nezaketle taşıyan sohbet halkaları.</p>
</article>
<article class="card glass">
<h3 id="service2Title">Kuran Kursu</h3>
<p id="service2Text">Çocuklarımız ve gençlerimiz için huzurlu, düzenli ve güvenli bir eğitim iklimi.</p>
</article>
<article class="card glass">
<h3 id="service3Title">Gençlik Kolları ve Kermes</h3>
<p id="service3Text">Birlik duygusunu pekiştiren faaliyetler ve iyilik yolunda bereketli buluşmalar.</p>
</article>
</div>
</div>
</div>
</section>
<section class="reveal" id="contact">
<div class="container">
<div class="section-card glass">
<div class="section-head">
<div>
<h2 id="contactTitle">İletişim</h2>
<p id="contactText">
Herzlich Willkommen zur Gemeinschaft. Sizleri gönül huzuruyla karşılamaktan memnuniyet duyarız.
</p>
</div>
</div>
<div class="grid-3">
<article class="card glass">
<h3 id="contactTelLabel">Telefon</h3>
<p>0239261763</p>
</article>
<article class="card glass">
<h3 id="contactEmailLabel">E-posta</h3>
<p>info@mevlanamoschee.de</p>
</article>
<article class="card glass">
<h3 id="contactAddressLabel">Adres</h3>
<p>Industriestraße 4, 58809 Neuenrade</p>
</article>
</div>
<div class="row" style="margin-top:16px">
<a class="primary-btn" href="https://maps.google.com/?q=Industriestra%C3%9Fe%204,%2058809%20Neuenrade" target="_blank" rel="noopener" id="mapBtn">Google Mapste Aç</a>
</div>
</div>
</div>
</section>
</main>
<section class="admin-page" id="adminPage">
<div class="container">
<div class="admin-grid">
<aside class="admin-side glass">
<div class="badge" id="adminBadge">Yönetim Merkezi</div>
<button class="admin-tab-btn active" data-tab="tab-event" id="tabBtnEvent">Etkinlik</button>
<button class="admin-tab-btn" data-tab="tab-forum" id="tabBtnForum">Forum & Moderasyon</button>
<button class="admin-tab-btn" data-tab="tab-finance" id="tabBtnFinance">Bağış Bilgileri</button>
<button class="admin-tab-btn" data-tab="tab-courses" id="tabBtnCourses">Kuran Kursu</button>
<button class="admin-tab-btn" data-tab="tab-quiz" id="tabBtnQuiz">Quiz Kazananları</button>
<button class="admin-tab-btn" data-tab="tab-hero" id="tabBtnHero">Hero Görseli</button>
<div style="height:10px"></div>
<button class="ghost-btn" id="adminLogoutBtn">Çıkış</button>
</aside>
<div class="admin-panel glass">
<div class="status-note" id="adminStatus"></div>
<div class="tab-panel active" id="tab-event">
<h2 id="adminEventTitleHead">Yaklaşan Etkinlik Yönetimi</h2>
<p id="adminEventText" style="color:var(--muted);line-height:1.8;">
Ana sayfada görünen premium etkinlik kartını buradan güncelleyebilirsiniz.
</p>
<div class="field">
<label for="adminEventTitle" id="adminLabelEventTitle">Etkinlik Başlığı</label>
<input id="adminEventTitle" type="text" />
</div>
<div class="row">
<div class="field">
<label for="adminEventDate" id="adminLabelEventDate">Tarih</label>
<input id="adminEventDate" type="date" />
</div>
<div class="field">
<label for="adminEventTime" id="adminLabelEventTime">Saat</label>
<input id="adminEventTime" type="time" />
</div>
</div>
<div class="field">
<label for="adminEventDescription" id="adminLabelEventDescription">Açıklama</label>
<textarea id="adminEventDescription"></textarea>
</div>
<div class="row">
<button class="primary-btn" id="saveEventBtn">Kaydet</button>
<button class="danger-btn" id="deleteEventBtn">Etkinliği Sil</button>
</div>
</div>
<div class="tab-panel" id="tab-forum">
<h2 id="adminForumTitle">Forum Moderasyonu</h2>
<p id="adminForumText" style="color:var(--muted);line-height:1.8;">
Gerçek zamanlı forum akışını yönetin. Silme butonları yalnızca admin için görünür.
</p>
<div class="feed" id="adminForumFeed"></div>
</div>
<div class="tab-panel" id="tab-finance">
<h2 id="adminFinanceTitle">Bağış Bilgileri</h2>
<p id="adminFinanceText" style="color:var(--muted);line-height:1.8;">
Bu alan, daha önceki premium sürümdeki bağış verilerini Firebase üzerinde tutmak için hazırlandı.
</p>
<div class="field">
<label for="ibanInput">IBAN</label>
<input id="ibanInput" type="text" placeholder="DE00 0000 0000 0000 0000 00" />
</div>
<div class="field">
<label for="paypalInput">PayPal</label>
<input id="paypalInput" type="text" placeholder="paypal.me/..." />
</div>
<div class="row">
<button class="primary-btn" id="saveFinanceBtn">Kaydet</button>
</div>
</div>
<div class="tab-panel" id="tab-courses">
<h2 id="adminCoursesTitle">Kuran Kursu Yönetimi</h2>
<p id="adminCoursesText" style="color:var(--muted);line-height:1.8;">
Sınıf oluşturun, öğrencileri sınıflara atayın ve kayıtları düzenli şekilde takip edin.
</p>
<div class="row">
<div class="field">
<label for="classroomName">Sınıf Adı</label>
<input id="classroomName" type="text" placeholder="Örn. Nur Sınıfı" />
</div>
<div class="field">
<label for="classroomTeacher">Eğitmen</label>
<input id="classroomTeacher" type="text" placeholder="Örn. Mehmet Hoca" />
</div>
</div>
<div class="row">
<button class="primary-btn" id="createClassroomBtn">Sınıf Oluştur</button>
</div>
<div style="height:18px"></div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Öğrenci</th>
<th>Yaş</th>
<th>Cinsiyet</th>
<th>Veli Telefonu</th>
<th>Sınıf Ata</th>
</tr>
</thead>
<tbody id="studentsTableBody"></tbody>
</table>
</div>
<div style="height:18px"></div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Sınıf</th>
<th>Eğitmen</th>
<th>Öğrenci Sayısı</th>
</tr>
</thead>
<tbody id="classroomsTableBody"></tbody>
</table>
</div>
</div>
<div class="tab-panel" id="tab-quiz">
<h2 id="adminQuizTitle">Çikolata Kazananlar</h2>
<p id="adminQuizText" style="color:var(--muted);line-height:1.8;">
Haftalık 21/21 başarıya ulaşan isimler burada görünür.
</p>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>İsim</th>
<th>Skor</th>
<th>Hafta</th>
</tr>
</thead>
<tbody id="winnersTableBody"></tbody>
</table>
</div>
</div>
<div class="tab-panel" id="tab-hero">
<h2 id="adminHeroTitle">Hero Görseli</h2>
<p id="adminHeroText" style="color:var(--muted);line-height:1.8;">
Ana giriş bölümünün arka plan görselini güncelleyebilirsiniz.
</p>
<div class="field">
<label for="heroImageInput">Hero Image URL</label>
<input id="heroImageInput" type="url" />
</div>
<div class="row">
<button class="primary-btn" id="saveHeroBtn">Görseli Kaydet</button>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-box glass">
<div>
<strong id="footerTitle">Mevlana Moschee Neuenrade</strong>
<small id="footerSub">Dualarınızda buluşmak ümidiyle.</small>
</div>
<small id="footerNote">In der Hoffnung, in Ihren Gebeten vereint zu sein.</small>
</div>
</div>
</footer>
<div class="floating-stack">
<button class="fab" id="shareWhatsAppBtn">WhatsAppta Paylaş</button>
</div>
<div class="modal-backdrop" id="adminLoginModal" aria-hidden="true">
<div class="modal glass">
<div class="modal-top">
<div>
<h3 id="adminLoginTitle">Yönetim Girişi</h3>
<p id="adminLoginText">Gizli yönetim paneline erişmek için şifreyi giriniz.</p>
</div>
<button class="close-btn" id="closeAdminModal" aria-label="Pencereyi kapat">✕</button>
</div>
<div class="field">
<label for="adminPassword" id="adminPasswordLabel">Şifre</label>
<input id="adminPassword" type="password" placeholder="" />
</div>
<div class="row">
<button class="primary-btn" id="adminPasswordBtn">Giriş Yap</button>
<a href="#home" class="ghost-btn" id="adminCancelBtn">Vazgeç</a>
</div>
<div class="status-note error" id="adminLoginStatus"></div>
</div>
</div>
<!-- Firebase SDK -->
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.0.0/firebase-app.js";
import {
getAuth,
setPersistence,
browserLocalPersistence,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut,
onAuthStateChanged
} from "https://www.gstatic.com/firebasejs/11.0.0/firebase-auth.js";
import {
getFirestore,
serverTimestamp,
collection,
doc,
setDoc,
addDoc,
getDoc,
getDocs,
updateDoc,
deleteDoc,
onSnapshot,
query,
where,
orderBy
} from "https://www.gstatic.com/firebasejs/11.0.0/firebase-firestore.js";
/*
=========================================================
FIREBASE CONFIG
Buraya kendi Firebase config anahtarlarınızı yapıştırın.
=========================================================
*/
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
const ADMIN_PASSWORD = "mevlana2026";
const ADMIN_SESSION_KEY = "mevlana_admin_session_v3";
const LANG_KEY = "mevlana_lang_v3";
const DEFAULT_HERO_IMAGE = "https://images.unsplash.com/photo-1564760055775-d63b17a55c44?auto=format&fit=crop&w=1600&q=80";
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
await setPersistence(auth, browserLocalPersistence);
const $ = (id) => document.getElementById(id);
const state = {
lang: localStorage.getItem(LANG_KEY) || "tr",
user: null,
userProfile: null,
topics: [],
repliesByTopic: new Map(),
students: [],
classrooms: [],
winners: [],
event: null,
finance: { iban:"", paypal:"" },
heroImage: DEFAULT_HERO_IMAGE,
prayerTimes: null
};
const translations = {
tr: {
navHome:"Ana Sayfa",
navPrayers:"Namaz Vakitleri",
navEvent:"Yaklaşan Etkinlik",
navForum:"Topluluk Forumu",
navQuiz:"Günlük Quiz",
navCourse:"Kuran Kursu",
navServices:"Hizmetler",
navContact:"İletişim",
brandSub:"Huzurun Adresi, Birliğin Merkezi.",
heroEyebrow:"Huzur Birlik İyilik",
heroTitle:"Mevlana Camii Neuenrade: Huzurun Adresi, Birliğin Merkezi.",
heroText:"Modern bir külliye ruhuyla, cemaatimizin hizmetinde. Kalpleri bir araya getiren bu mekânda; huzuru paylaşmaya, kardeşliği güçlendirmeye ve iyilik yolunda omuz omuza yürümeye davetlisiniz.",
heroPrimary:"Namaz Vakitlerini Gör",
heroSecondary:"Toplulukla Buluş",
prayerMini:"Bugünün Namaz Vakitleri",
prayerTitle:"Vaktin Bereketi",
nextPrayerLabel:"Sıradaki Vakit",
ringLabel:"Kalan Süre",
eventSectionTitle:"Yaklaşan Etkinlik",
eventSectionText:"Gönül Birliğiyle Bekliyoruz. Bir sonraki buluşmamızın bilgileri burada zarafetle yer alır.",
eventDateLabel:"Tarih",
eventTimeLabel:"Saat",
eventInviteLabel:"Davet",
eventInvite:"Gönül Birliğiyle Bekliyoruz",
communityTitle:"Topluluk Platformu",
communityText:"Kardeşlik Sofrası sadece aynı mekânda değil, aynı kalpte buluşmaktır. Hesabınızla giriş yapın, forumda katkı sunun ve iyilik yolunda birlikte büyüyelim.",
kpiUsersLabel:"Toplam Üye",
kpiTopicsLabel:"Forum Konusu",
kpiStudentsLabel:"Kurs Öğrencisi",
kpiWinnersLabel:"Quiz Kazananı",
forumTitle:"Topluluk Forumu",
forumText:"Cemaatimizin sesi burada yankılanır. Soru sorun, fikir paylaşın, hayırlı haberlere vesile olun.",
authTitle:"Giriş / Kayıt",
authText:"Firebase ile gerçek zamanlı üyelik kullanılır. Aşağıdaki yapı, sadece istemci tarafında olduğu için isim-soyisim-şifre sistemini gerçek güvenlik seviyesinde sağlayamaz. Bu dosyada güvenli yaklaşım olarak Firebase Email/Password kullanılır ve isim-soyisim profil alanı olarak saklanır.",
labelFullName:"Ad Soyad",
labelEmail:"E-posta",
labelPassword:"Şifre",
registerBtn:"Kayıt Ol",
loginBtn:"Giriş Yap",
logoutBtn:"Çıkış Yap",
createTopicTitle:"Yeni Konu Aç",
labelTopicTitle:"Konu Başlığı",
labelTopicBody:"Mesaj",
forumPlaceholderTitle:"Paylaşmak istediğiniz başlık",
forumPlaceholderBody:"Topluluğa iletmek istediğiniz düşünceleri yazın.",
publishTopicBtn:"Yayınla",
quizTitle:"7x3 Günlük Quiz",
quizText:"Her gün üç soru ile bilginizi tazeleyin. Haftanın sonunda 21/21 doğruluk sağlayan isimler, admin panelinde Çikolata Kazananlar bölümünde görünür.",
quizDayTitle:"Bugünün Soruları",
quizDayText:"Bugün için hazırlanan üç soruyu dikkatle cevaplayın.",
submitQuizBtn:"Cevapları Gönder",
quizProgressTitle:"Haftalık İlerleme",
quizTableDay:"Gün",
quizTableCorrect:"Doğru",
quizTableStatus:"Durum",
courseTitle:"Kuran Kursu Kayıt",
courseText:"Gelecek nesiller için el ele. Velilerimiz, çocuklarımızı huzurlu ve düzenli bir eğitim ortamına bu form üzerinden kaydedebilir.",
studentRegTitle:"Öğrenci Kayıt Formu",
labelStudentName:"Öğrenci Adı Soyadı",
labelStudentAge:"Yaş",
labelStudentGender:"Cinsiyet",
labelStudentAddress:"Adres",
labelGuardianPhone:"Veli Telefonu",
submitStudentBtn:"Kaydı Gönder",
courseInfoTitle:"Eğitimde Huzur ve İstikrar",
courseInfoText:"Kurs kayıtları Firebase üzerinde gerçek zamanlı saklanır. Yönetim paneli üzerinden sınıflar oluşturulabilir, öğrenciler sınıflara atanabilir ve süreç düzenli şekilde takip edilebilir.",
servicesTitle:"Gelecek Nesiller İçin Hizmetlerimiz",
servicesText:"Her adımda huzur, her çalışmada birlik, her niyette iyilik taşıyan hizmet anlayışımızla cemaatimizin yanındayız.",
service1Title:"Cuma Sohbetleri",
service1Text:"Kalpleri yumuşatan, bilgiyi nezaketle taşıyan sohbet halkaları.",
service2Title:"Kuran Kursu",
service2Text:"Çocuklarımız ve gençlerimiz için huzurlu, düzenli ve güvenli bir eğitim iklimi.",
service3Title:"Gençlik Kolları ve Kermes",
service3Text:"Birlik duygusunu pekiştiren faaliyetler ve iyilik yolunda bereketli buluşmalar.",
contactTitle:"İletişim",
contactText:"Herzlich Willkommen zur Gemeinschaft. Sizleri gönül huzuruyla karşılamaktan memnuniyet duyarız.",
contactTelLabel:"Telefon",
contactEmailLabel:"E-posta",
contactAddressLabel:"Adres",
mapBtn:"Google Mapste Aç",
footerSub:"Dualarınızda buluşmak ümidiyle.",
footerNote:"In der Hoffnung, in Ihren Gebeten vereint zu sein.",
adminBadge:"Yönetim Merkezi",
adminLoginTitle:"Yönetim Girişi",
adminLoginText:"Gizli yönetim paneline erişmek için şifreyi giriniz.",
adminPasswordLabel:"Şifre",
adminPasswordBtn:"Giriş Yap",
adminCancelBtn:"Vazgeç",
adminInvalid:"Şifre hatalı. Lütfen tekrar deneyiniz.",
saveSuccess:"Kaydedildi. Değişiklikler bereketle güncellendi.",
saveError:"İşlem tamamlanamadı. Firebase yapılandırmasını ve kuralları kontrol edin.",
deleteSuccess:"Kayıt kaldırıldı.",
mustLogin:"Bu işlem için önce giriş yapmanız gerekir.",
topicSaved:"Konu yayınlandı.",
topicDeleted:"Konu silindi.",
replySaved:"Cevap kaydedildi.",
quizSaved:"Bugünkü cevaplarınız kaydedildi.",
studentSaved:"Öğrenci kaydı alındı.",
current:"Bugün",
done:"Tamamlandı",
pending:"Bekliyor",
remainingDays:"Kalan Gün",
rankNew:"Yeni Üye",
rankFriend:"Cami Dostu",
rankLeader:"Cemaat Reisi",
shareWhatsApp:"WhatsAppta Paylaş",
noTopics:"Henüz paylaşılmış bir konu bulunmuyor. İlk hayırlı sözü siz bırakabilirsiniz.",
noWinners:"Henüz 21/21 başarıya ulaşan bir isim bulunmuyor.",
noStudents:"Henüz kayıtlı öğrenci bulunmuyor.",
noClassrooms:"Henüz oluşturulmuş sınıf bulunmuyor.",
replyPlaceholder:"Nazik bir cevap yazın...",
sendReply:"Cevapla",
delete:"Sil",
assign:"Ata",
unassigned:"Atanmadı"
},
de: {
navHome:"Startseite",
navPrayers:"Gebetszeiten",
navEvent:"Nächste Veranstaltung",
navForum:"Gemeinschaftsforum",
navQuiz:"Tägliches Quiz",
navCourse:"Korankurs",
navServices:"Angebote",
navContact:"Kontakt",
brandSub:"Ort der Ruhe, Zentrum der Gemeinschaft.",
heroEyebrow:"Huzur Birlik İyilik",
heroTitle:"Mevlana Moschee Neuenrade: Ort der Ruhe, Zentrum der Gemeinschaft.",
heroText:"Im Geiste einer modernen Külliye, im Dienste unserer Gemeinschaft. An diesem Ort, der Herzen zusammenführt, laden wir Sie ein, Frieden zu teilen, Geschwisterlichkeit zu stärken und gemeinsam Schritte auf dem Weg des Guten zu gehen.",
heroPrimary:"Gebetszeiten ansehen",
heroSecondary:"Zur Gemeinschaft",
prayerMini:"Heutige Gebetszeiten",
prayerTitle:"Segen der Zeit",
nextPrayerLabel:"Nächstes Gebet",
ringLabel:"Verbleibende Zeit",
eventSectionTitle:"Nächste Veranstaltung",
eventSectionText:"Herzlich Willkommen zur Gemeinschaft. Die Informationen zur nächsten Begegnung erscheinen hier in würdevoller Form.",
eventDateLabel:"Datum",
eventTimeLabel:"Uhrzeit",
eventInviteLabel:"Einladung",
eventInvite:"Herzlich Willkommen zur Gemeinschaft",
communityTitle:"Gemeinschaftsplattform",
communityText:"Wahre Verbundenheit lebt nicht nur im selben Raum, sondern im selben Herzen. Melden Sie sich an, beteiligen Sie sich im Forum und wachsen wir gemeinsam auf dem Weg des Guten.",
kpiUsersLabel:"Mitglieder gesamt",
kpiTopicsLabel:"Forenthemen",
kpiStudentsLabel:"Kursschüler",
kpiWinnersLabel:"Quiz-Gewinner",
forumTitle:"Gemeinschaftsforum",
forumText:"Hier erklingt die Stimme unserer Gemeinschaft. Stellen Sie Fragen, teilen Sie Gedanken und werden Sie Anlass für gute Nachrichten.",
authTitle:"Anmeldung / Registrierung",
authText:"Für Echtzeitfunktionen wird Firebase verwendet. Ein reines Name-Nachname-Passwort-System ist in einer rein clientseitigen Datei nicht sicher umsetzbar. In dieser Datei wird deshalb die sichere Firebase-Variante mit E-Mail/Passwort genutzt; Name und Nachname werden als Profil gespeichert.",
labelFullName:"Vor- und Nachname",
labelEmail:"E-Mail",
labelPassword:"Passwort",
registerBtn:"Registrieren",
loginBtn:"Anmelden",
logoutBtn:"Abmelden",
createTopicTitle:"Neues Thema erstellen",
labelTopicTitle:"Titel",
labelTopicBody:"Nachricht",
forumPlaceholderTitle:"Ihr Thema",
forumPlaceholderBody:"Schreiben Sie Ihre Gedanken an die Gemeinschaft.",
publishTopicBtn:"Veröffentlichen",
quizTitle:"7x3 Tagesquiz",
quizText:"Jeden Tag drei Fragen. Wer am Ende der Woche 21/21 erreicht, erscheint im Admin-Bereich unter Schokoladen-Gewinner.",
quizDayTitle:"Heutige Fragen",
quizDayText:"Bitte beantworten Sie die drei Fragen des Tages in Ruhe und mit Aufmerksamkeit.",
submitQuizBtn:"Antworten senden",
quizProgressTitle:"Wochenfortschritt",
quizTableDay:"Tag",
quizTableCorrect:"Richtig",
quizTableStatus:"Status",
courseTitle:"Korankurs-Anmeldung",
courseText:"Gemeinsam für die Zukunft. Eltern können ihre Kinder über dieses Formular in eine ruhige und geordnete Lernumgebung eintragen.",
studentRegTitle:"Schüler-Anmeldeformular",
labelStudentName:"Name des Schülers",
labelStudentAge:"Alter",
labelStudentGender:"Geschlecht",
labelStudentAddress:"Adresse",
labelGuardianPhone:"Telefon der Eltern",
submitStudentBtn:"Anmeldung senden",
courseInfoTitle:"Ruhe und Beständigkeit in der Bildung",
courseInfoText:"Die Anmeldungen werden in Firebase in Echtzeit gespeichert. Im Admin-Bereich können Klassen erstellt, Schüler zugewiesen und Abläufe ordentlich verwaltet werden.",
servicesTitle:"Unsere Angebote für kommende Generationen",
servicesText:"Mit einem Dienstverständnis, das in jedem Schritt Frieden, in jeder Arbeit Gemeinschaft und in jeder Absicht Güte trägt, stehen wir unserer Gemeinde zur Seite.",
service1Title:"Freitagsgespräche",
service1Text:"Gesprächskreise, die Herzen berühren und Wissen mit Milde weitergeben.",
service2Title:"Korankurs",
service2Text:"Ein ruhiges, geordnetes und sicheres Lernumfeld für Kinder und Jugendliche.",
service3Title:"Jugendarbeit und Kermes",
service3Text:"Begegnungen, die Gemeinschaft stärken und auf dem Weg des Guten Frucht tragen.",
contactTitle:"Kontakt",
contactText:"Herzlich Willkommen zur Gemeinschaft. Es ist uns eine Freude, Sie in einer Atmosphäre des Friedens zu empfangen.",
contactTelLabel:"Telefon",
contactEmailLabel:"E-Mail",
contactAddressLabel:"Adresse",
mapBtn:"In Google Maps öffnen",
footerSub:"In der Hoffnung, in Ihren Gebeten vereint zu sein.",
footerNote:"Dualarınızda buluşmak ümidiyle.",
adminBadge:"Verwaltungszentrum",
adminLoginTitle:"Admin-Zugang",
adminLoginText:"Bitte geben Sie das Passwort ein, um den versteckten Verwaltungsbereich zu öffnen.",
adminPasswordLabel:"Passwort",
adminPasswordBtn:"Anmelden",
adminCancelBtn:"Abbrechen",
adminInvalid:"Falsches Passwort. Bitte erneut versuchen.",
saveSuccess:"Gespeichert. Die Änderungen wurden erfolgreich aktualisiert.",
saveError:"Die Aktion konnte nicht abgeschlossen werden. Prüfen Sie bitte die Firebase-Konfiguration und Regeln.",
deleteSuccess:"Der Eintrag wurde entfernt.",
mustLogin:"Für diesen Vorgang müssen Sie sich zuerst anmelden.",
topicSaved:"Thema wurde veröffentlicht.",
topicDeleted:"Thema wurde gelöscht.",
replySaved:"Antwort wurde gespeichert.",
quizSaved:"Ihre heutigen Antworten wurden gespeichert.",
studentSaved:"Die Schüleranmeldung wurde aufgenommen.",
current:"Heute",
done:"Abgeschlossen",
pending:"Offen",
remainingDays:"Verbleibende Tage",
rankNew:"Neues Mitglied",
rankFriend:"Moschee-Freund",
rankLeader:"Gemeinschaftsleiter",
shareWhatsApp:"Per WhatsApp teilen",
noTopics:"Noch wurde kein Thema veröffentlicht. Vielleicht beginnen Sie mit einem guten Wort.",
noWinners:"Noch hat niemand 21/21 erreicht.",
noStudents:"Noch sind keine Schüler registriert.",
noClassrooms:"Noch wurden keine Klassen erstellt.",
replyPlaceholder:"Schreiben Sie eine achtsame Antwort...",
sendReply:"Antworten",
delete:"Löschen",
assign:"Zuweisen",
unassigned:"Nicht zugewiesen"
}
};
const quizBank = {
1: [
{
q: { tr:"Kuran-ı Kerim hangi gecede indirilmeye başlanmıştır?", de:"In welcher Nacht begann die Offenbarung des Korans?" },
options: {
tr:["Kadir Gecesi","Berat Gecesi","Miraç Gecesi"],
de:["Lailat al-Qadr","Baraat-Nacht","Miraǧ-Nacht"]
},
correct:0
},
{
q: { tr:"İslamda günde kaç vakit namaz farzdır?", de:"Wie viele Pflichtgebete gibt es im Islam pro Tag?" },
options: { tr:["3","5","7"], de:["3","5","7"] },
correct:1
},
{
q: { tr:"Ramazan ayında tutulan ibadetin adı nedir?", de:"Wie heißt die gottesdienstliche Handlung im Ramadan?" },
options: { tr:["Zekât","Oruç","Hac"], de:["Zakāt","Fasten","Hadsch"] },
correct:1
}
],
2: [
{
q:{ tr:"İslamda paylaşmanın en önemli ifadelerinden biri aşağıdakilerden hangisidir?", de:"Welcher Begriff steht im Islam besonders für das Teilen?" },
options:{ tr:["Sadaka","Ticaret","Seyahat"], de:["Sadaqa","Handel","Reise"] },
correct:0
},
{
q:{ tr:"Peygamber Efendimizin şehri Medineye hicreti hangi başlangıca işaret eder?", de:"Wofür steht die Hidschra des Propheten nach Medina als Anfang?" },
options:{ tr:["Hicri Takvim","Miladi Takvim","Yaz Tatili"], de:["Islamischer Kalender","Gregorianischer Kalender","Sommerferien"] },
correct:0
},
{
q:{ tr:"Cuma namazı haftanın hangi günündedir?", de:"An welchem Tag findet das Freitagsgebet statt?" },
options:{ tr:["Perşembe","Cuma","Pazar"], de:["Donnerstag","Freitag","Sonntag"] },
correct:1
}
],
3: [
{
q:{ tr:"Abdestte yüzün yıkanması farz mıdır?", de:"Ist das Waschen des Gesichts im Wudu verpflichtend?" },
options:{ tr:["Evet","Hayır","Sadece cuma günü"], de:["Ja","Nein","Nur am Freitag"] },
correct:0
},
{
q:{ tr:"Zekât kimlere yardım etmeyi amaçlayan bir ibadettir?", de:"Wem dient die Zakāt in besonderer Weise?" },
options:{ tr:["İhtiyaç sahiplerine","Sadece akrabalara","Sadece öğrencilere"], de:["Bedürftigen","Nur Verwandten","Nur Schülern"] },
correct:0
},
{
q:{ tr:"Camide saf düzeni neyi güçlendirir?", de:"Was stärkt die Gebetsreihe in der Moschee?" },
options:{ tr:["Kibir","Birlik","Ayrılık"], de:["Hochmut","Gemeinschaft","Trennung"] },
correct:1
}
],
4: [
{
q:{ tr:"Kıble hangi kutsal yapıya yönelmeyi ifade eder?", de:"Auf welches heilige Bauwerk richtet sich die Qibla?" },
options:{ tr:["Mescid-i Aksa","Kâbe","Mescid-i Nebevi"], de:["al-Aqsa","Kaaba","Prophetenmoschee"] },
correct:1
},
{
q:{ tr:"İyiliği gizlice yapmak İslam ahlakında nasıl değerlendirilir?", de:"Wie wird es in der islamischen Ethik bewertet, Gutes heimlich zu tun?" },
options:{ tr:["Makbuldür","Önemsizdir","Yanlıştır"], de:["Lobenswert","Unwichtig","Falsch"] },
correct:0
},
{
q:{ tr:"Selamlaşmak toplumda neyi artırır?", de:"Was fördert der Gruß unter Menschen?" },
options:{ tr:["Mesafeyi","Muhabbeti","Kırgınlığı"], de:["Distanz","Verbundenheit","Gekränktheit"] },
correct:1
}
],
5: [
{
q:{ tr:"Kurban Bayramı hangi ibadeti hatırlatır?", de:"An welche gottesdienstliche Handlung erinnert das Opferfest?" },
options:{ tr:["Teslimiyet","Seyahat","Sessizlik"], de:["Hingabe","Reise","Schweigen"] },
correct:0
},
{
q:{ tr:"Anne-babaya güzel davranmak Kuran ahlakında nasıl görülür?", de:"Wie wird gutes Verhalten gegenüber den Eltern im Koran verstanden?" },
options:{ tr:["Önemli bir sorumluluk","İsteğe bağlı","Sadece çocuklara ait"], de:["Wichtige Verantwortung","Freiwillig","Nur Sache der Kinder"] },
correct:0
},
{
q:{ tr:"Cemaatle namaz kılmak hangi duyguyu kuvvetlendirir?", de:"Welches Gefühl stärkt das Gebet in Gemeinschaft?" },
options:{ tr:["Yalnızlık","Kardeşlik","Kaygı"], de:["Einsamkeit","Geschwisterlichkeit","Sorge"] },
correct:1
}
],
6: [
{
q:{ tr:"Bismillah neyi ifade eder?", de:"Was drückt Bismillah aus?" },
options:{ tr:["Allahın adıyla başlamak","Yemek duası","Veda sözü"], de:["Im Namen Allahs beginnen","Essensgebet","Abschiedsgruß"] },
correct:0
},
{
q:{ tr:"Cömertlik hangi erdemle ilişkilidir?", de:"Mit welcher Tugend ist Großzügigkeit verbunden?" },
options:{ tr:["Merhamet","Kibir","İhmal"], de:["Barmherzigkeit","Hochmut","Nachlässigkeit"] },
correct:0
},
{
q:{ tr:"Kuran öğrenmek için en güzel zeminlerden biri neresidir?", de:"Welcher Ort ist besonders schön, um den Koran zu lernen?" },
options:{ tr:["Camii ve ilim halkaları","Kalabalık pazar","Gürültülü ortam"], de:["Moschee und Lernkreise","Lauter Markt","Lärmende Umgebung"] },
correct:0
}
],
7: [
{
q:{ tr:"Dua ederken kalbin hâli nasıl olmalıdır?", de:"Wie soll das Herz beim Bittgebet sein?" },
options:{ tr:["Samimi","Dağınık","İlgisiz"], de:["Aufrichtig","Zerstreut","Gleichgültig"] },
correct:0
},
{
q:{ tr:"İslamda komşuluk ilişkileri için hangi tutum teşvik edilir?", de:"Welche Haltung wird für die Nachbarschaft im Islam gefördert?" },
options:{ tr:["Nezaket ve yardım","Uzak durmak","İlgisizlik"], de:["Höflichkeit und Hilfe","Auf Distanz bleiben","Gleichgültigkeit"] },
correct:0
},
{
q:{ tr:"Haftalık öğrenme yolculuğunun en güzel meyvesi nedir?", de:"Was ist die schönste Frucht einer wöchentlichen Lernreise?" },
options:{ tr:["İlmi hayata taşımak","Sadece ezberlemek","Unutmak"], de:["Wissen ins Leben tragen","Nur auswendig lernen","Vergessen"] },
correct:0
}
]
};
const months = {
tr:["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],
de:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"]
};
function t(key){
return translations[state.lang][key] || key;
}
function setLockScroll(locked){
document.body.classList.toggle("lock-scroll", locked);
}
function showStatus(el, text, type="success"){
el.textContent = text;
el.className = `status-note show ${type}`;
setTimeout(() => {
el.classList.remove("show");
}, 3200);
}
function formatDate(date){
const d = new Date(date);
if (isNaN(d)) return "-";
const day = String(d.getDate()).padStart(2,"0");
const month = months[state.lang][d.getMonth()];
const year = d.getFullYear();
return state.lang === "tr" ? `${day} ${month} ${year}` : `${day}. ${month} ${year}`;
}
function todayLabel(){
const d = new Date();
return formatDate(d);
}
function formatDateTime(ts){
if(!ts) return "";
const d = ts.toDate ? ts.toDate() : new Date(ts);
return `${formatDate(d)} ${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}`;
}
function getRankFromXP(xp){
if (xp >= 300) return t("rankLeader");
if (xp >= 100) return t("rankFriend");
return t("rankNew");
}
function applyLanguage(){
document.documentElement.lang = state.lang;
localStorage.setItem(LANG_KEY, state.lang);
const ids = {
brandSub:"brandSub",
mobileBrandSub:"brandSub",
heroEyebrow:"heroEyebrow",
heroTitle:"heroTitle",
heroText:"heroText",
heroPrimary:"heroPrimary",
heroSecondary:"heroSecondary",
prayerMini:"prayerMini",
prayerTitle:"prayerTitle",
nextPrayerLabel:"nextPrayerLabel",
ringLabel:"ringLabel",
eventSectionTitle:"eventSectionTitle",
eventSectionText:"eventSectionText",
eventDateLabel:"eventDateLabel",
eventTimeLabel:"eventTimeLabel",
eventInviteLabel:"eventInviteLabel",
communityTitle:"communityTitle",
communityText:"communityText",
kpiUsersLabel:"kpiUsersLabel",
kpiTopicsLabel:"kpiTopicsLabel",
kpiStudentsLabel:"kpiStudentsLabel",
kpiWinnersLabel:"kpiWinnersLabel",
forumTitle:"forumTitle",
forumText:"forumText",
authTitle:"authTitle",
authText:"authText",
labelFullName:"labelFullName",
labelEmail:"labelEmail",
labelPassword:"labelPassword",
registerBtn:"registerBtn",
loginBtn:"loginBtn",
logoutBtn:"logoutBtn",
createTopicTitle:"createTopicTitle",
labelTopicTitle:"labelTopicTitle",
labelTopicBody:"labelTopicBody",
publishTopicBtn:"publishTopicBtn",
quizTitle:"quizTitle",
quizText:"quizText",
quizDayTitle:"quizDayTitle",
quizDayText:"quizDayText",
submitQuizBtn:"submitQuizBtn",
quizProgressTitle:"quizProgressTitle",
quizTableDay:"quizTableDay",
quizTableCorrect:"quizTableCorrect",
quizTableStatus:"quizTableStatus",
courseTitle:"courseTitle",
courseText:"courseText",
studentRegTitle:"studentRegTitle",
labelStudentName:"labelStudentName",
labelStudentAge:"labelStudentAge",
labelStudentGender:"labelStudentGender",
labelStudentAddress:"labelStudentAddress",
labelGuardianPhone:"labelGuardianPhone",
submitStudentBtn:"submitStudentBtn",
courseInfoTitle:"courseInfoTitle",
courseInfoText:"courseInfoText",
servicesTitle:"servicesTitle",
servicesText:"servicesText",
service1Title:"service1Title",
service1Text:"service1Text",
service2Title:"service2Title",
service2Text:"service2Text",
service3Title:"service3Title",
service3Text:"service3Text",
contactTitle:"contactTitle",
contactText:"contactText",
contactTelLabel:"contactTelLabel",
contactEmailLabel:"contactEmailLabel",
contactAddressLabel:"contactAddressLabel",
mapBtn:"mapBtn",
footerSub:"footerSub",
footerNote:"footerNote",
adminBadge:"adminBadge",
adminLoginTitle:"adminLoginTitle",
adminLoginText:"adminLoginText",
adminPasswordLabel:"adminPasswordLabel",
adminPasswordBtn:"adminPasswordBtn",
adminCancelBtn:"adminCancelBtn"
};
Object.entries(ids).forEach(([id,key]) => {
const el = $(id);
if (el) el.textContent = t(key);
});
document.querySelectorAll("[data-i18n]").forEach(el => {
const key = el.dataset.i18n;
el.textContent = t(key);
});
$("topicTitle").placeholder = t("forumPlaceholderTitle");
$("topicBody").placeholder = t("forumPlaceholderBody");
renderPrayerTable();
renderEvent();
renderProfile();
renderForum();
renderQuiz();
renderAdminStudents();
renderWinners();
$("shareWhatsAppBtn").textContent = t("shareWhatsApp");
}
/* Mobile menu */
function openDrawer(){
$("mobileDrawer").classList.add("open");
setLockScroll(true);
}
function closeDrawer(){
$("mobileDrawer").classList.remove("open");
if(!$("adminLoginModal").classList.contains("show")) setLockScroll(false);
}
$("menuBtn").addEventListener("click", openDrawer);
$("closeDrawer").addEventListener("click", closeDrawer);
$("mobileDrawer").addEventListener("click", (e) => {
if (e.target === $("mobileDrawer")) closeDrawer();
});
document.querySelectorAll(".mobile-links a").forEach(a => {
a.addEventListener("click", () => closeDrawer());
});
document.querySelectorAll(".lang-btn").forEach(btn => {
btn.addEventListener("click", () => {
state.lang = btn.dataset.lang;
document.querySelectorAll(".lang-btn").forEach(b => b.classList.toggle("active", b.dataset.lang === state.lang));
applyLanguage();
});
});
/* Header shrink + parallax */
window.addEventListener("scroll", () => {
$("topbar").classList.toggle("shrink", window.scrollY > 24);
const y = Math.min(window.scrollY * 0.18, 36);
$("heroMain").style.backgroundPosition = `center calc(50% + ${y}px)`;
});
/* Scroll reveal + spy */
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) entry.target.classList.add("in-view");
});
}, { threshold:.16 });
document.querySelectorAll(".reveal").forEach(el => observer.observe(el));
const sections = ["home","prayers","event","forum","quiz","courses","services","contact"].map(id => document.getElementById(id)).filter(Boolean);
const spy = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting){
const id = entry.target.id;
document.querySelectorAll(".nav-links a").forEach(a => {
a.classList.toggle("active", a.dataset.section === id);
});
}
});
}, { rootMargin:"-35% 0px -50% 0px", threshold:.01 });
sections.forEach(sec => spy.observe(sec));
/* Prayer API */
async function fetchPrayerTimes(){
try{
const now = new Date();
const date = `${String(now.getDate()).padStart(2,"0")}-${String(now.getMonth()+1).padStart(2,"0")}-${now.getFullYear()}`;
const url = `https://api.aladhan.com/v1/timingsByCity/${date}?city=Neuenrade&country=Germany&method=13`;
const res = await fetch(url);
const data = await res.json();
const timings = data?.data?.timings;
state.prayerTimes = {
Fajr: timings?.Fajr?.slice(0,5) || "05:41",
Sunrise: timings?.Sunrise?.slice(0,5) || "07:13",
Dhuhr: timings?.Dhuhr?.slice(0,5) || "13:08",
Asr: timings?.Asr?.slice(0,5) || "16:32",
Maghrib: timings?.Maghrib?.slice(0,5) || "19:01",
Isha: timings?.Isha?.slice(0,5) || "20:28"
};
}catch{
state.prayerTimes = {
Fajr:"05:41",
Sunrise:"07:13",
Dhuhr:"13:08",
Asr:"16:32",
Maghrib:"19:01",
Isha:"20:28"
};
}
renderPrayerTable();
updatePrayerProgress();
}
function prayerLabelMap(){
return state.lang === "tr"
? { Fajr:"İmsak", Sunrise:"Güneş", Dhuhr:"Öğle", Asr:"İkindi", Maghrib:"Akşam", Isha:"Yatsı" }
: { Fajr:"Fajr", Sunrise:"Sonnenaufgang", Dhuhr:"Dhuhr", Asr:"Asr", Maghrib:"Maghrib", Isha:"Isha" };
}
function renderPrayerTable(){
$("todayDate").textContent = todayLabel();
const labels = prayerLabelMap();
const p = state.prayerTimes || {
Fajr:"05:41", Sunrise:"07:13", Dhuhr:"13:08", Asr:"16:32", Maghrib:"19:01", Isha:"20:28"
};
const currentKey = getCurrentPrayerKey(p);
const html = Object.entries(p).map(([key,val]) => `
<div class="prayer-row ${currentKey === key ? "current" : ""}">
<strong>${labels[key]}</strong>
<span>${val}</span>
</div>
`).join("");
$("prayerTable").innerHTML = html;
}
function minutesFromHHMM(str){
const [h,m] = str.split(":").map(Number);
return h * 60 + m;
}
function getCurrentPrayerKey(p){
const keys = ["Fajr","Sunrise","Dhuhr","Asr","Maghrib","Isha"];
const now = new Date();
const currentM = now.getHours()*60 + now.getMinutes();
let current = "Isha";
for(let i=0;i<keys.length;i++){
const key = keys[i];
const val = minutesFromHHMM(p[key]);
if(currentM >= val) current = key;
}
return current;
}
function getNextPrayerInfo(p){
const order = ["Fajr","Dhuhr","Asr","Maghrib","Isha"];
const now = new Date();
const currentMin = now.getHours()*60 + now.getMinutes();
const todayPrayers = order.map(key => ({ key, min: minutesFromHHMM(p[key]), time: p[key] }));
for(let i=0;i<todayPrayers.length;i++){
if(todayPrayers[i].min > currentMin){
const prev = i === 0 ? { key:"Isha", min: minutesFromHHMM(p.Isha) - 24*60, time:p.Isha } : todayPrayers[i-1];
return { next: todayPrayers[i], prev };
}
}
return {
next: { key:"Fajr", min: minutesFromHHMM(p.Fajr) + 24*60, time:p.Fajr },
prev: { key:"Isha", min: minutesFromHHMM(p.Isha), time:p.Isha }
};
}
function updatePrayerProgress(){
const p = state.prayerTimes;
if(!p) return;
const labels = prayerLabelMap();
const { next, prev } = getNextPrayerInfo(p);
const now = new Date();
const currentMin = now.getHours()*60 + now.getMinutes();
const elapsed = currentMin - prev.min;
const total = next.min - prev.min;
const progress = Math.max(0, Math.min(100, (elapsed/total)*100));
let remaining = next.min - currentMin;
if(remaining < 0) remaining += 24*60;
const hrs = String(Math.floor(remaining/60)).padStart(2,"0");
const mins = String(remaining%60).padStart(2,"0");
$("nextPrayerName").textContent = labels[next.key];
$("nextPrayerTime").textContent = next.time;
$("nextPrayerProgress").style.width = `${progress}%`;
$("ringTime").textContent = `${hrs}:${mins}`;
const circumference = 301.59;
const offset = circumference - (progress/100)*circumference;
$("ringProgress").style.strokeDashoffset = String(offset);
renderPrayerTable();
}
setInterval(updatePrayerProgress, 30000);
/* Firebase data listeners */
function profileRef(uid){ return doc(db, "profiles", uid); }
async function ensureProfile(user, fullName=""){
const ref = profileRef(user.uid);
const snap = await getDoc(ref);
if(!snap.exists()){
await setDoc(ref, {
uid:user.uid,
fullName:fullName || user.email?.split("@")[0] || "Üye",
email:user.email || "",
xp:0,
rank:getRankFromXP(0),
isAdmin:false,
createdAt:serverTimestamp()
});
}
}
function subscribeCoreCollections(){
onSnapshot(collection(db, "profiles"), (snap) => {
const profiles = snap.docs.map(d => ({ id:d.id, ...d.data() }));
$("kpiUsers").textContent = profiles.length;
if(state.user){
state.userProfile = profiles.find(p => p.uid === state.user.uid) || null;
renderProfile();
}
});
const topicsQ = query(collection(db, "topics"), orderBy("createdAt", "desc"));
onSnapshot(topicsQ, async (snap) => {
state.topics = snap.docs.map(d => ({ id:d.id, ...d.data() }));
$("kpiTopics").textContent = state.topics.length;
renderForum();
renderAdminForum();
});
const repliesQ = query(collection(db, "replies"), orderBy("createdAt", "asc"));
onSnapshot(repliesQ, (snap) => {
const map = new Map();
snap.docs.forEach(d => {
const item = { id:d.id, ...d.data() };
if(!map.has(item.topicId)) map.set(item.topicId, []);
map.get(item.topicId).push(item);
});
state.repliesByTopic = map;
renderForum();
});
onSnapshot(collection(db, "students"), (snap) => {
state.students = snap.docs.map(d => ({ id:d.id, ...d.data() }));
$("kpiStudents").textContent = state.students.length;
renderAdminStudents();
});
onSnapshot(collection(db, "classrooms"), (snap) => {
state.classrooms = snap.docs.map(d => ({ id:d.id, ...d.data() }));
renderAdminStudents();
});
onSnapshot(collection(db, "winners"), (snap) => {
state.winners = snap.docs.map(d => ({ id:d.id, ...d.data() }));
$("kpiWinners").textContent = state.winners.length;
renderWinners();
});
onSnapshot(doc(db, "site", "event"), (snap) => {
state.event = snap.exists() ? snap.data() : null;
renderEvent();
});
onSnapshot(doc(db, "site", "finance"), (snap) => {
state.finance = snap.exists() ? snap.data() : { iban:"", paypal:"" };
$("ibanInput").value = state.finance.iban || "";
$("paypalInput").value = state.finance.paypal || "";
});
onSnapshot(doc(db, "site", "hero"), (snap) => {
state.heroImage = snap.exists() ? (snap.data().url || DEFAULT_HERO_IMAGE) : DEFAULT_HERO_IMAGE;
$("heroMain").style.backgroundImage = `linear-gradient(0deg, rgba(3,20,15,.42), rgba(3,20,15,.28)), url("${state.heroImage}")`;
$("heroImageInput").value = state.heroImage;
});
}
onAuthStateChanged(auth, async (user) => {
state.user = user || null;
if(user){
const snap = await getDoc(profileRef(user.uid));
state.userProfile = snap.exists() ? snap.data() : null;
}else{
state.userProfile = null;
}
renderProfile();
renderForum();
renderQuiz();
});
/* Auth */
function renderProfile(){
const isLoggedIn = !!state.user;
$("logoutBtn").classList.toggle("hidden", !isLoggedIn);
if(!isLoggedIn || !state.userProfile){
$("profileName").textContent = state.lang === "tr" ? "Henüz giriş yapılmadı" : "Noch nicht angemeldet";
$("profileMeta").innerHTML = state.lang === "tr"
? "Gönül birliğiyle buluşmak için giriş yapabilirsiniz."
: "Melden Sie sich an, um an der Gemeinschaft teilzunehmen.";
$("quizUserScore").textContent = "0 / 21";
$("quizUserMeta").textContent = state.lang === "tr"
? "Giriş yaptıktan sonra haftalık puanınız burada görünür."
: "Nach der Anmeldung erscheint hier Ihr Wochenstand.";
return;
}
const xp = state.userProfile.xp || 0;
const rank = getRankFromXP(xp);
$("profileName").textContent = state.userProfile.fullName || "Üye";
$("profileMeta").innerHTML = `${state.lang === "tr" ? "Rütbe" : "Rang"}: <strong>${rank}</strong><br>XP: ${xp}`;
loadUserQuizProgress();
}
$("registerBtn").addEventListener("click", async () => {
const fullName = $("fullName").value.trim();
const email = $("loginEmail").value.trim();
const password = $("loginPassword").value.trim();
if(!fullName || !email || !password){
showStatus($("authStatus"), state.lang === "tr" ? "Lütfen tüm alanları doldurun." : "Bitte füllen Sie alle Felder aus.", "error");
return;
}
try{
const cred = await createUserWithEmailAndPassword(auth, email, password);
await ensureProfile(cred.user, fullName);
showStatus($("authStatus"), state.lang === "tr" ? "Hesap oluşturuldu." : "Konto wurde erstellt.");
}catch(err){
showStatus($("authStatus"), err.message, "error");
}
});
$("loginBtn").addEventListener("click", async () => {
const email = $("loginEmail").value.trim();
const password = $("loginPassword").value.trim();
try{
await signInWithEmailAndPassword(auth, email, password);
showStatus($("authStatus"), state.lang === "tr" ? "Giriş başarılı." : "Anmeldung erfolgreich.");
}catch(err){
showStatus($("authStatus"), err.message, "error");
}
});
$("logoutBtn").addEventListener("click", async () => {
await signOut(auth);
showStatus($("authStatus"), state.lang === "tr" ? "Çıkış yapıldı." : "Abmeldung erfolgreich.");
});
/* XP */
async function grantXP(amount){
if(!state.user || !state.userProfile) return;
const newXP = (state.userProfile.xp || 0) + amount;
await updateDoc(profileRef(state.user.uid), {
xp:newXP,
rank:getRankFromXP(newXP)
});
}
/* Forum */
$("publishTopicBtn").addEventListener("click", async () => {
if(!state.user || !state.userProfile){
showStatus($("topicStatus"), t("mustLogin"), "error");
return;
}
const title = $("topicTitle").value.trim();
const body = $("topicBody").value.trim();
if(!title || !body){
showStatus($("topicStatus"), state.lang === "tr" ? "Başlık ve mesaj gerekli." : "Titel und Nachricht sind erforderlich.", "error");
return;
}
try{
await addDoc(collection(db, "topics"), {
uid:state.user.uid,
author:state.userProfile.fullName,
rank:getRankFromXP(state.userProfile.xp || 0),
title,
body,
createdAt:serverTimestamp()
});
$("topicTitle").value = "";
$("topicBody").value = "";
await grantXP(20);
showStatus($("topicStatus"), t("topicSaved"));
}catch{
showStatus($("topicStatus"), t("saveError"), "error");
}
});
function canAdminDelete(){
return isAdminSessionOpen();
}
function renderForum(){
const feed = $("forumFeed");
if(!state.topics.length){
feed.innerHTML = `<div class="card glass"><p>${t("noTopics")}</p></div>`;
return;
}
feed.innerHTML = state.topics.map(topic => {
const replies = state.repliesByTopic.get(topic.id) || [];
return `
<article class="post glass">
<div class="post-head">
<div>
<h3 class="post-title">${escapeHtml(topic.title || "")}</h3>
<div class="post-meta">
<strong>${escapeHtml(topic.author || "Üye")}</strong> ${escapeHtml(topic.rank || "")}<br>
${escapeHtml(formatDateTime(topic.createdAt))}
</div>
</div>
${canAdminDelete() ? `<button class="mini-btn delete-topic-btn" data-id="${topic.id}">${t("delete")}</button>` : ``}
</div>
<p class="post-body">${escapeHtml(topic.body || "")}</p>
<div class="reply-list">
${replies.map(reply => `
<div class="reply">
<small><strong>${escapeHtml(reply.author || "")}</strong> ${escapeHtml(formatDateTime(reply.createdAt))}</small>
<div>${escapeHtml(reply.body || "")}</div>
</div>
`).join("")}
</div>
<div class="reply-box">
<textarea id="reply-${topic.id}" placeholder="${escapeHtml(t("replyPlaceholder"))}"></textarea>
<div class="row">
<button class="ghost-btn reply-btn" data-id="${topic.id}">${t("sendReply")}</button>
</div>
</div>
</article>
`;
}).join("");
feed.querySelectorAll(".reply-btn").forEach(btn => {
btn.addEventListener("click", async () => {
if(!state.user || !state.userProfile){
showStatus($("topicStatus"), t("mustLogin"), "error");
return;
}
const topicId = btn.dataset.id;
const textarea = $(`reply-${topicId}`);
const body = textarea.value.trim();
if(!body) return;
try{
await addDoc(collection(db, "replies"), {
topicId,
uid:state.user.uid,
author:state.userProfile.fullName,
body,
createdAt:serverTimestamp()
});
textarea.value = "";
await grantXP(5);
showStatus($("topicStatus"), t("replySaved"));
}catch{
showStatus($("topicStatus"), t("saveError"), "error");
}
});
});
feed.querySelectorAll(".delete-topic-btn").forEach(btn => {
btn.addEventListener("click", async () => {
if(!canAdminDelete()) return;
try{
await deleteDoc(doc(db, "topics", btn.dataset.id));
showStatus($("adminStatus"), t("topicDeleted"));
}catch{
showStatus($("adminStatus"), t("saveError"), "error");
}
});
});
}
function renderAdminForum(){
const wrap = $("adminForumFeed");
if(!state.topics.length){
wrap.innerHTML = `<div class="card glass"><p>${t("noTopics")}</p></div>`;
return;
}
wrap.innerHTML = state.topics.map(topic => `
<article class="post glass">
<div class="post-head">
<div>
<h3 class="post-title">${escapeHtml(topic.title || "")}</h3>
<div class="post-meta">${escapeHtml(topic.author || "")} ${escapeHtml(formatDateTime(topic.createdAt))}</div>
</div>
<button class="mini-btn admin-delete-topic-btn" data-id="${topic.id}">${t("delete")}</button>
</div>
<p class="post-body">${escapeHtml(topic.body || "")}</p>
</article>
`).join("");
wrap.querySelectorAll(".admin-delete-topic-btn").forEach(btn => {
btn.addEventListener("click", async () => {
try{
await deleteDoc(doc(db, "topics", btn.dataset.id));
showStatus($("adminStatus"), t("topicDeleted"));
}catch{
showStatus($("adminStatus"), t("saveError"), "error");
}
});
});
}
function escapeHtml(str){
return String(str).replace(/[&<>"']/g, s => ({
"&":"&",
"<":"<",
">":">",
'"':""",
"'":"'"
}[s]));
}
/* Event */
function renderEvent(){
const sec = $("event");
if(!state.event || !state.event.title || !state.event.date){
sec.classList.add("hidden");
return;
}
sec.classList.remove("hidden");
$("eventTitle").textContent = state.event.title || "";
$("eventDescription").textContent = state.event.description || "";
$("eventDate").textContent = state.event.date ? formatDate(new Date(state.event.date)) : "-";
$("eventTime").textContent = state.event.time || "-";
$("eventInvite").textContent = t("eventInvite");
const badge = $("eventCountdownBadge");
const diff = daysRemaining(state.event.date, state.event.time);
if(diff !== null && diff >= 0){
badge.classList.remove("hidden");
badge.textContent = `${t("remainingDays")}: ${diff}`;
}else{
badge.classList.add("hidden");
}
}
function daysRemaining(dateStr, timeStr){
if(!dateStr) return null;
const target = new Date(`${dateStr}T${timeStr || "00:00"}:00`);
if(isNaN(target)) return null;
const diff = target.getTime() - Date.now();
if(diff < 0) return null;
return Math.ceil(diff / (1000*60*60*24));
}
/* Student registration */
$("submitStudentBtn").addEventListener("click", async () => {
const payload = {
name:$("studentName").value.trim(),
age:Number($("studentAge").value || 0),
gender:$("studentGender").value,
address:$("studentAddress").value.trim(),
guardianPhone:$("guardianPhone").value.trim(),
classroomId:"",
createdAt:serverTimestamp()
};
if(!payload.name || !payload.age || !payload.address || !payload.guardianPhone){
showStatus($("studentStatus"), state.lang === "tr" ? "Lütfen tüm alanları doldurun." : "Bitte füllen Sie alle Felder aus.", "error");
return;
}
try{
await addDoc(collection(db, "students"), payload);
["studentName","studentAge","studentAddress","guardianPhone"].forEach(id => $(id).value = "");
showStatus($("studentStatus"), t("studentSaved"));
}catch{
showStatus($("studentStatus"), t("saveError"), "error");
}
});
/* Quiz */
function currentQuizDay(){
const day = new Date().getDay();
return day === 0 ? 7 : day;
}
function currentWeekKey(){
const now = new Date();
const onejan = new Date(now.getFullYear(),0,1);
const week = Math.ceil((((now - onejan) / 86400000) + onejan.getDay()+1)/7);
return `${now.getFullYear()}-W${week}`;
}
function renderQuiz(){
const day = currentQuizDay();
const questions = quizBank[day];
$("quizList").innerHTML = questions.map((q, idx) => `
<div class="quiz-item">
<h4>${idx+1}. ${escapeHtml(q.q[state.lang])}</h4>
<div class="quiz-options">
${q.options[state.lang].map((opt, optIdx) => `
<button class="option-btn" data-q="${idx}" data-opt="${optIdx}">${escapeHtml(opt)}</button>
`).join("")}
</div>
</div>
`).join("");
$("quizList").querySelectorAll(".option-btn").forEach(btn => {
btn.addEventListener("click", () => {
const qIndex = btn.dataset.q;
const group = btn.closest(".quiz-options");
group.querySelectorAll(".option-btn").forEach(b => b.classList.remove("selected"));
btn.classList.add("selected");
btn.dataset.selected = "true";
});
});
loadUserQuizProgress();
}
async function loadUserQuizProgress(){
const tbody = $("quizProgressTable");
if(!state.user){
tbody.innerHTML = "";
$("quizUserScore").textContent = "0 / 21";
return;
}
const ref = doc(db, "quizProgress", `${state.user.uid}_${currentWeekKey()}`);
const snap = await getDoc(ref);
const data = snap.exists() ? snap.data() : { days:{} };
let totalCorrect = 0;
tbody.innerHTML = "";
for(let i=1;i<=7;i++){
const dayData = data.days?.[String(i)];
const correct = dayData?.correct ?? 0;
totalCorrect += correct;
tbody.innerHTML += `
<tr>
<td>${i}</td>
<td>${correct} / 3</td>
<td>${dayData ? t("done") : (i === currentQuizDay() ? t("current") : t("pending"))}</td>
</tr>
`;
}
$("quizUserScore").textContent = `${totalCorrect} / 21`;
$("quizUserMeta").textContent = state.lang === "tr"
? `Hafta: ${currentWeekKey()} Bereketli bir gayretle ilerliyorsunuz.`
: `Woche: ${currentWeekKey()} Sie gehen mit schöner Beständigkeit voran.`;
if(totalCorrect === 21 && state.userProfile){
await setDoc(doc(db, "winners", `${state.user.uid}_${currentWeekKey()}`), {
uid:state.user.uid,
name:state.userProfile.fullName,
score:21,
weekKey:currentWeekKey(),
createdAt:serverTimestamp()
});
}
}
$("submitQuizBtn").addEventListener("click", async () => {
if(!state.user){
showStatus($("quizStatus"), t("mustLogin"), "error");
return;
}
const day = currentQuizDay();
const questions = quizBank[day];
let correct = 0;
const items = [...$("quizList").querySelectorAll(".quiz-item")];
items.forEach((item, idx) => {
const selected = item.querySelector(".option-btn.selected");
const buttons = item.querySelectorAll(".option-btn");
buttons.forEach(btn => btn.classList.remove("correct","wrong"));
if(!selected) return;
if(Number(selected.dataset.opt) === questions[idx].correct){
selected.classList.add("correct");
correct++;
}else{
selected.classList.add("wrong");
buttons[questions[idx].correct].classList.add("correct");
}
});
try{
const ref = doc(db, "quizProgress", `${state.user.uid}_${currentWeekKey()}`);
const snap = await getDoc(ref);
const data = snap.exists() ? snap.data() : { uid:state.user.uid, weekKey:currentWeekKey(), days:{} };
data.days[String(day)] = {
correct,
total:3,
submittedAt:new Date().toISOString()
};
await setDoc(ref, data);
await grantXP(correct * 4);
await loadUserQuizProgress();
showStatus($("quizStatus"), `${t("quizSaved")} (${correct}/3)`);
}catch{
showStatus($("quizStatus"), t("saveError"), "error");
}
});
/* Admin */
function isAdminSessionOpen(){
return sessionStorage.getItem(ADMIN_SESSION_KEY) === "true";
}
function showAdminModal(){
$("adminLoginModal").classList.add("show");
setLockScroll(true);
$("adminLoginStatus").classList.remove("show");
$("adminPassword").value = "";
setTimeout(() => $("adminPassword").focus(), 30);
}
function hideAdminModal(){
$("adminLoginModal").classList.remove("show");
if(!$("mobileDrawer").classList.contains("open")) setLockScroll(false);
}
function updateRouteView(){
const isAdmin = location.hash === "#/admin";
$("siteContent").style.display = isAdmin ? "none" : "block";
$("adminPage").style.display = isAdmin ? "block" : "none";
if(isAdmin){
if(!isAdminSessionOpen()) showAdminModal();
else hideAdminModal();
}else{
hideAdminModal();
}
}
window.addEventListener("hashchange", updateRouteView);
updateRouteView();
$("closeAdminModal").addEventListener("click", () => {
location.hash = "#home";
});
$("adminLoginModal").addEventListener("click", (e) => {
if(e.target === $("adminLoginModal")) location.hash = "#home";
});
$("adminPasswordBtn").addEventListener("click", () => {
const value = $("adminPassword").value;
if(value === ADMIN_PASSWORD){
sessionStorage.setItem(ADMIN_SESSION_KEY, "true");
hideAdminModal();
showStatus($("adminStatus"), t("saveSuccess"));
}else{
showStatus($("adminLoginStatus"), t("adminInvalid"), "error");
}
});
$("adminPassword").addEventListener("keydown", (e) => {
if(e.key === "Enter") $("adminPasswordBtn").click();
});
$("adminLogoutBtn").addEventListener("click", () => {
sessionStorage.removeItem(ADMIN_SESSION_KEY);
location.hash = "#home";
});
document.querySelectorAll(".admin-tab-btn").forEach(btn => {
btn.addEventListener("click", () => {
document.querySelectorAll(".admin-tab-btn").forEach(b => b.classList.remove("active"));
document.querySelectorAll(".tab-panel").forEach(p => p.classList.remove("active"));
btn.classList.add("active");
$(btn.dataset.tab).classList.add("active");
});
});
$("saveEventBtn").addEventListener("click", async () => {
try{
await setDoc(doc(db, "site", "event"), {
title:$("adminEventTitle").value.trim(),
date:$("adminEventDate").value,
time:$("adminEventTime").value,
description:$("adminEventDescription").value.trim(),
updatedAt:serverTimestamp()
});
showStatus($("adminStatus"), t("saveSuccess"));
}catch{
showStatus($("adminStatus"), t("saveError"), "error");
}
});
$("deleteEventBtn").addEventListener("click", async () => {
try{
await deleteDoc(doc(db, "site", "event"));
showStatus($("adminStatus"), t("deleteSuccess"));
}catch{
showStatus($("adminStatus"), t("saveError"), "error");
}
});
onSnapshot(doc(db, "site", "event"), (snap) => {
const ev = snap.exists() ? snap.data() : {};
$("adminEventTitle").value = ev.title || "";
$("adminEventDate").value = ev.date || "";
$("adminEventTime").value = ev.time || "";
$("adminEventDescription").value = ev.description || "";
});
$("saveFinanceBtn").addEventListener("click", async () => {
try{
await setDoc(doc(db, "site", "finance"), {
iban:$("ibanInput").value.trim(),
paypal:$("paypalInput").value.trim(),
updatedAt:serverTimestamp()
});
showStatus($("adminStatus"), t("saveSuccess"));
}catch{
showStatus($("adminStatus"), t("saveError"), "error");
}
});
$("saveHeroBtn").addEventListener("click", async () => {
try{
await setDoc(doc(db, "site", "hero"), {
url:$("heroImageInput").value.trim() || DEFAULT_HERO_IMAGE,
updatedAt:serverTimestamp()
});
showStatus($("adminStatus"), t("saveSuccess"));
}catch{
showStatus($("adminStatus"), t("saveError"), "error");
}
});
$("createClassroomBtn").addEventListener("click", async () => {
const name = $("classroomName").value.trim();
const teacher = $("classroomTeacher").value.trim();
if(!name || !teacher){
showStatus($("adminStatus"), state.lang === "tr" ? "Sınıf adı ve eğitmen gerekli." : "Klassenname und Lehrkraft sind erforderlich.", "error");
return;
}
try{
await addDoc(collection(db, "classrooms"), {
name, teacher, createdAt:serverTimestamp()
});
$("classroomName").value = "";
$("classroomTeacher").value = "";
showStatus($("adminStatus"), t("saveSuccess"));
}catch{
showStatus($("adminStatus"), t("saveError"), "error");
}
});
function renderAdminStudents(){
const studentsBody = $("studentsTableBody");
const classroomsBody = $("classroomsTableBody");
if(!state.students.length){
studentsBody.innerHTML = `<tr><td colspan="5">${t("noStudents")}</td></tr>`;
}else{
studentsBody.innerHTML = state.students.map(student => `
<tr>
<td>${escapeHtml(student.name || "")}</td>
<td>${escapeHtml(String(student.age || ""))}</td>
<td>${escapeHtml(student.gender || "")}</td>
<td>${escapeHtml(student.guardianPhone || "")}</td>
<td>
<div class="inline-actions">
<select class="assign-select" data-id="${student.id}">
<option value="">${t("unassigned")}</option>
${state.classrooms.map(c => `<option value="${c.id}" ${student.classroomId === c.id ? "selected" : ""}>${escapeHtml(c.name)}</option>`).join("")}
</select>
<button class="mini-btn assign-btn" data-id="${student.id}">${t("assign")}</button>
</div>
</td>
</tr>
`).join("");
}
if(!state.classrooms.length){
classroomsBody.innerHTML = `<tr><td colspan="3">${t("noClassrooms")}</td></tr>`;
}else{
classroomsBody.innerHTML = state.classrooms.map(c => {
const count = state.students.filter(s => s.classroomId === c.id).length;
return `
<tr>
<td>${escapeHtml(c.name || "")}</td>
<td>${escapeHtml(c.teacher || "")}</td>
<td>${count}</td>
</tr>
`;
}).join("");
}
studentsBody.querySelectorAll(".assign-btn").forEach(btn => {
btn.addEventListener("click", async () => {
const select = studentsBody.querySelector(`.assign-select[data-id="${btn.dataset.id}"]`);
try{
await updateDoc(doc(db, "students", btn.dataset.id), {
classroomId: select.value
});
showStatus($("adminStatus"), t("saveSuccess"));
}catch{
showStatus($("adminStatus"), t("saveError"), "error");
}
});
});
}
function renderWinners(){
const tbody = $("winnersTableBody");
if(!state.winners.length){
tbody.innerHTML = `<tr><td colspan="3">${t("noWinners")}</td></tr>`;
return;
}
tbody.innerHTML = state.winners
.sort((a,b) => (a.weekKey < b.weekKey ? 1 : -1))
.map(w => `
<tr>
<td>${escapeHtml(w.name || "")}</td>
<td>${escapeHtml(String(w.score || ""))}</td>
<td>${escapeHtml(w.weekKey || "")}</td>
</tr>
`).join("");
}
/* WhatsApp share */
$("shareWhatsAppBtn").addEventListener("click", () => {
const p = state.prayerTimes || {};
const labels = prayerLabelMap();
const lines = Object.entries(p).map(([k,v]) => `${labels[k]}: ${v}`).join("%0A");
const intro = state.lang === "tr"
? "Merhaba, Mevlana Moschee Neuenrade namaz vakitlerini paylaşıyorum:%0A%0A"
: "Merhaba, ich teile die Gebetszeiten der Mevlana Moschee Neuenrade:%0A%0A";
window.open(`https://wa.me/?text=${intro}${lines}`, "_blank");
});
/* Initial content fill */
async function init(){
applyLanguage();
await fetchPrayerTimes();
subscribeCoreCollections();
renderQuiz();
}
init();
</script>
<!--
FIREBASE RULES NOTE
============================================================
Bu dosya tek başına isim, soyisim, şifre sistemiyle gerçek güvenliği sağlayamaz.
Firebase Auth tarafında güvenli, desteklenen yol email/password veya özel backend ile custom auth kullanmaktır.
Bu yüzden yukarıda email/password kullanıldı.
Firestore security rules tarafında:
- topics/replies yazma: authenticated users
- topics silme: sadece admin claim veya güvenli backend
- site/*, classrooms, student assignment, winners yönetimi: sadece admin
- students create: herkese veya authenticated kullanıcılara açılabilir
============================================================
-->
</body>
</html>