موقع مصممه خاصه بkr
KRKR
كود عباره عن مودات لعبه
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KR MODS | النسخة الكاملة</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
:root { --p: #00d2ff; --s: #9d50bb; --bg: #08080a; --card: #121217; }
body { font-family: 'Cairo', sans-serif; margin: 0; background: var(--bg); color: white; overflow-x: hidden; }
.screen { display: none; min-height: 100vh; flex-direction: column; align-items: center; padding: 20px; animation: fadeIn 0.3s ease; padding-bottom: 120px; }
.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.logo-kr { font-size: 45px; font-weight: 900; background: linear-gradient(45deg, var(--p), var(--s)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 20px; }
button { padding: 15px; margin: 8px; border: none; border-radius: 15px; background: rgba(255,255,255,0.07); color: white; font-weight: bold; cursor: pointer; transition: 0.2s; width: 100%; max-width: 340px; border: 1px solid rgba(255,255,255,0.1); }
button:active { transform: scale(0.95); background: var(--p); color: black; }
input, textarea, select { width: 90%; max-width: 340px; padding: 15px; margin: 8px 0; border-radius: 12px; border: 1px solid #222; background: #000; color: white; outline: none; }
/* البروفايل */
.profile-header { position: relative; width: 120px; height: 120px; margin-bottom: 15px; }
.profile-pic { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--p); }
.edit-pic-btn { position: absolute; bottom: 0; right: 0; background: var(--p); color: black; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid var(--bg); }
/* المودات */
.mod-card { background: var(--card); border-radius: 20px; width: 95%; max-width: 400px; margin: 10px; overflow: hidden; border: 1px solid #1a1a1f; }
.mod-img { width: 100%; height: 160px; object-fit: cover; }
.mod-info { padding: 15px; }
/* النافبار */
.navbar { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); background: rgba(18, 18, 23, 0.95); padding: 10px 25px; border-radius: 30px; display: flex; gap: 30px; border: 1px solid #222; backdrop-filter: blur(10px); z-index: 1000; }
.nav-icon { font-size: 24px; cursor: pointer; opacity: 0.4; transition: 0.3s; }
.nav-icon.active { opacity: 1; color: var(--p); }
</style>
</head>
<body onload="checkLogin()">
<div id="scr-login" class="screen active">
<div class="logo-kr">KR</div>
<input type="email" id="l-email" placeholder="البريد الإلكتروني">
<input type="password" id="l-pass" placeholder="كلمة السر">
<button onclick="login()">تسجيل الدخول</button>
<button onclick="show('scr-reg')" style="background:transparent; border:none; color:var(--p)">إنشاء حساب جديد</button>
</div>
<div id="scr-reg" class="screen">
<h2>انضم إلى KR</h2>
<input type="text" id="r-name" placeholder="الاسم المستعار">
<input type="text" id="r-user" placeholder="يوزر (3 أحرف)" maxlength="3">
<input type="email" id="r-email" placeholder="البريد الإلكتروني">
<input type="password" id="r-pass" placeholder="كلمة السر">
<button onclick="register()">إنشاء الحساب</button>
<button onclick="show('scr-login')">رجوع</button>
</div>
<div id="scr-main" class="screen">
<div class="logo-kr" style="font-size: 30px;">المودات</div>
<div id="mods-list" style="width:100%; display:flex; flex-direction:column; align-items:center;"></div>
</div>
<div id="scr-chat" class="screen">
<div class="logo-kr" style="font-size: 25px;">الشات العام</div>
<div id="chat-container" style="width:100%; max-width:400px; height:300px; background:#000; overflow-y:auto; padding:10px; border-radius:15px; margin-bottom:10px;"></div>
<input type="text" id="msg-input" placeholder="اكتب هنا...">
<button onclick="sendMessage()">إرسال</button>
</div>
<div id="scr-upload" class="screen">
<h2>نشر مود جديد</h2>
<input type="text" id="m-title" placeholder="اسم المود">
<input type="text" id="m-version" placeholder="إصدار اللعبة (مثال: 1.21)">
<select id="m-platform">
<option value="بيدروك">بيدروك</option>
<option value="جافا">جافا</option>
</select>
<button onclick="document.getElementById('m-img-file').click()" style="background:#1a1a1a;">🖼️ رفع صورة المود</button>
<input type="file" id="m-img-file" hidden accept="image/*">
<button onclick="document.getElementById('m-mod-file').click()" style="background:#1a1a1a;">📁 رفع ملف المود (.mcpack / .zip)</button>
<input type="file" id="m-mod-file" hidden>
<button onclick="publishMod()" style="background:var(--p); color:black; margin-top:20px;">نشر المود الآن</button>
</div>
<div id="scr-settings" class="screen">
<h2>تعديلات الحساب</h2>
<div class="profile-header">
<img id="p-img-view" class="profile-pic" src="https://via.placeholder.com/150">
<div class="edit-pic-btn" onclick="document.getElementById('p-img-input').click()">📷</div>
<input type="file" id="p-img-input" hidden accept="image/*" onchange="updateProfilePic(this)">
</div>
<div class="info-row" style="text-align:center; margin-bottom:15px;">
<h3 id="p-name-view" style="margin:0;">الاسم</h3>
<span id="p-user-view" style="color:var(--p)">@user</span>
</div>
<input type="text" id="edit-name" placeholder="تغيير الاسم">
<textarea id="edit-bio" placeholder="وصف الحساب"></textarea>
<button onclick="saveProfile()" style="background:var(--p); color:black;">حفظ التغييرات</button>
<button onclick="logout()" style="border-color:red; color:red; margin-top:20px;">تسجيل الخروج</button>
</div>
<div class="navbar" id="nav" style="display:none;">
<div class="nav-icon active" onclick="navTo('scr-main', this)">🏠</div>
<div class="nav-icon" onclick="navTo('scr-chat', this)">💬</div>
<div class="nav-icon" onclick="navTo('scr-upload', this)">➕</div>
<div class="nav-icon" onclick="navTo('scr-settings', this)">⚙️</div>
</div>
<script>
let db = {
users: JSON.parse(localStorage.getItem('KR_U')) || [],
mods: JSON.parse(localStorage.getItem('KR_M')) || [],
msgs: JSON.parse(localStorage.getItem('KR_G')) || []
};
let curr = null;
function checkLogin() {
let saved = localStorage.getItem('KR_SESSION');
if(saved) {
curr = JSON.parse(saved);
loadProfileData();
navTo('scr-main', document.querySelectorAll('.nav-icon')[0]);
}
}
function loadProfileData() {
document.getElementById('p-name-view').innerText = curr.name;
document.getElementById('p-user-view').innerText = "@" + curr.user;
document.getElementById('edit-name').value = curr.name;
document.getElementById('edit-bio').value = curr.bio || "";
if(curr.avatar) document.getElementById('p-img-view').src = curr.avatar;
}
function navTo(id, el) {
show(id);
document.querySelectorAll('.nav-icon').forEach(i => i.classList.remove('active'));
el.classList.add('active');
if(id === 'scr-main') renderMods();
if(id === 'scr-chat') renderChat();
}
function show(id) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
document.getElementById(id).classList.add('active');
document.getElementById('nav').style.display = (id==='scr-login'||id==='scr-reg')?'none':'flex';
}
function publishMod() {
let title = document.getElementById('m-title').value;
let version = document.getElementById('m-version').value;
let platform = document.getElementById('m-platform').value;
let imgInput = document.getElementById('m-img-file');
if(!title || !imgInput.files[0]) return alert("يرجى كتابة الاسم ورفع صورة!");
let reader = new FileReader();
reader.onload = function(e) {
db.mods.push({
title: title,
version: version,
platform: platform,
img: e.target.result,
owner: curr.user
});
localStorage.setItem('KR_M', JSON.stringify(db.mods));
alert("تم نشر المود بنجاح!");
navTo('scr-main', document.querySelectorAll('.nav-icon')[0]);
}
reader.readAsDataURL(imgInput.files[0]);
}
function renderMods() {
let l = document.getElementById('mods-list');
l.innerHTML = db.mods.map(m => `
<div class="mod-card">
<img src="${m.img}" class="mod-img">
<div class="mod-info">
<small style="color:var(--p)">@${m.owner} | ${m.platform}</small>
<h3 style="margin:5px 0;">${m.title}</h3>
<p style="font-size:12px; opacity:0.6; margin:0;">إصدار اللعبة: ${m.version}</p>
<button style="margin-top:10px; padding:8px;" onclick="alert('سيبدأ التحميل قريباً...')">تحميل المود</button>
</div>
</div>
`).join('') || "<p style='margin-top:50px; opacity:0.5;'>لا توجد مودات حالياً</p>";
}
// دوال الحساب والشات (نفس المنطق السابق)
function login() {
let e = document.getElementById('l-email').value, p = document.getElementById('l-pass').value;
let found = db.users.find(x => x.email === e && x.pass === p);
if(found) { curr = found; localStorage.setItem('KR_SESSION', JSON.stringify(curr)); loadProfileData(); navTo('scr-main', document.querySelectorAll('.nav-icon')[0]); }
else alert("بيانات خاطئة!");
}
function register() {
let u = document.getElementById('r-user').value, e = document.getElementById('r-email').value;
let newUser = {name:document.getElementById('r-name').value, user:u, email:e, pass:document.getElementById('r-pass').value, avatar:"", bio:""};
db.users.push(newUser); localStorage.setItem('KR_U', JSON.stringify(db.users));
curr = newUser; localStorage.setItem('KR_SESSION', JSON.stringify(curr)); loadProfileData(); navTo('scr-main', document.querySelectorAll('.nav-icon')[0]);
}
function logout() { localStorage.removeItem('KR_SESSION'); location.reload(); }
function saveProfile() {
curr.name = document.getElementById('edit-name').value;
curr.bio = document.getElementById('edit-bio').value;
let idx = db.users.findIndex(u => u.email === curr.email);
db.users[idx] = curr;
localStorage.setItem('KR_U', JSON.stringify(db.users));
localStorage.setItem('KR_SESSION', JSON.stringify(curr));
alert("تم الحفظ!");
}
function updateProfilePic(input) {
if (input.files[0]) {
let reader = new FileReader();
reader.onload = (e) => { document.getElementById('p-img-view').src = e.target.result; curr.avatar = e.target.result; }
reader.readAsDataURL(input.files[0]);
}
}
function sendMessage() {
let val = document.getElementById('msg-input').value;
if(!val) return;
db.msgs.push({u: curr.user, t: val});
localStorage.setItem('KR_G', JSON.stringify(db.msgs));
document.getElementById('msg-input').value = ""; renderChat();
}
function renderChat() {
let c = document.getElementById('chat-container');
c.innerHTML = db.msgs.map(m => `<div style="margin-bottom:8px;"><b>@${m.u}:</b> ${m.t}</div>`).join('');
c.scrollTop = c.scrollHeight;
}
</script>
</body>
</html>